ability to have sleeker inline form choice on VPDisplay, good for grammar app examples

This commit is contained in:
lingdocs 2022-07-29 14:44:26 -05:00
parent 6be4531114
commit acb6bdfa3e
4 changed files with 16 additions and 6 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@lingdocs/pashto-inflector", "name": "@lingdocs/pashto-inflector",
"version": "3.6.2", "version": "3.6.3",
"author": "lingdocs.com", "author": "lingdocs.com",
"description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations", "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
"homepage": "https://verbs.lingdocs.com", "homepage": "https://verbs.lingdocs.com",

View File

@ -14,6 +14,7 @@ type PickerProps<T extends string> = {
handleChange: (payload: T) => void, handleChange: (payload: T) => void,
small?: boolean, small?: boolean,
xSmall?: boolean, xSmall?: boolean,
faded?: boolean,
} }
function ButtonSelect<L extends string>(props: PickerProps<L>) { function ButtonSelect<L extends string>(props: PickerProps<L>) {
@ -24,7 +25,7 @@ function ButtonSelect<L extends string>(props: PickerProps<L>) {
type="button" type="button"
className={classNames( className={classNames(
"btn", "btn",
"btn-outline-secondary", props.faded ? "btn-light" : "btn-outline-secondary",
{ active: props.value === option.value }, { active: props.value === option.value },
{ "btn-sm": props.small || props.xSmall }, { "btn-sm": props.small || props.xSmall },
)} )}

View File

@ -68,10 +68,11 @@ function limitValue(value: string, adjustable: "both" | "king" | "servant") {
throw new Error("unrecognized adjustable value"); throw new Error("unrecognized adjustable value");
} }
function AbbreviationFormSelector({ form, onChange, adjustable }: { function AbbreviationFormSelector({ form, onChange, adjustable, inline }: {
form: T.FormVersion, form: T.FormVersion,
onChange: (f: T.FormVersion) => void, onChange: (f: T.FormVersion) => void,
adjustable: "both" | "king" | "servant", adjustable: "both" | "king" | "servant",
inline?: boolean,
}) { }) {
function handleChange(f: "full" | "noKing" | "shrinkServant" | "shortest") { function handleChange(f: "full" | "noKing" | "shrinkServant" | "shortest") {
if (f === "full") { if (f === "full") {
@ -85,9 +86,10 @@ function AbbreviationFormSelector({ form, onChange, adjustable }: {
} }
} }
// TODO: limit display of shrinking options based on the verb type // TODO: limit display of shrinking options based on the verb type
return <div className="mb-3"> return <div className="mb-3 mx-3">
{/* <div className="text-center text-small mb-2">Abbreviation Options</div> */} {/* <div className="text-center text-small mb-2">Abbreviation Options</div> */}
<ButtonSelect <ButtonSelect
faded
small small
// @ts-ignore // @ts-ignore
value={limitValue(formToValue(form), adjustable)} value={limitValue(formToValue(form), adjustable)}

View File

@ -10,7 +10,7 @@ import CompiledPTextDisplay from "../CompiledPTextDisplay";
import RenderedBlocksDisplay from "../RenderedBlocksDisplay"; import RenderedBlocksDisplay from "../RenderedBlocksDisplay";
import useStickyState from "../../lib/useStickyState"; import useStickyState from "../../lib/useStickyState";
function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferredMode, script: preferredScript, onLengthChange }: { function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferredMode, script: preferredScript, onLengthChange, inlineFormChoice }: {
VPS: T.VPSelectionState, VPS: T.VPSelectionState,
opts: T.TextOptions, opts: T.TextOptions,
setForm: "disable" | ((form: T.FormVersion) => void), setForm: "disable" | ((form: T.FormVersion) => void),
@ -20,6 +20,7 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferr
mode?: Mode, mode?: Mode,
script?: "p" | "f", script?: "p" | "f",
onLengthChange?: (length: "long" | "short") => void, onLengthChange?: (length: "long" | "short") => void,
inlineFormChoice?: boolean,
}) { }) {
const [mode, setMode] = useState<Mode>(preferredMode || "text"); const [mode, setMode] = useState<Mode>(preferredMode || "text");
const [script, setScript] = useStickyState<"p" | "f">(preferredScript || "f", "blockScriptChoice"); const [script, setScript] = useStickyState<"p" | "f">(preferredScript || "f", "blockScriptChoice");
@ -39,7 +40,7 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferr
const rendered = renderVP(VP); const rendered = renderVP(VP);
const result = compileVP(rendered, rendered.form); const result = compileVP(rendered, rendered.form);
return <div className={`text-${justify ? justify : "center"} mt-1`}> return <div className={`text-${justify ? justify : "center"} mt-1`}>
{typeof setForm === "function" && <AbbreviationFormSelector {typeof setForm === "function" && !inlineFormChoice && <AbbreviationFormSelector
adjustable={rendered.whatsAdjustable} adjustable={rendered.whatsAdjustable}
form={rendered.form} form={rendered.form}
onChange={setForm} onChange={setForm}
@ -48,6 +49,12 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferr
<ModeSelect value={mode} onChange={setMode} /> <ModeSelect value={mode} onChange={setMode} />
{mode === "blocks" && <ScriptSelect value={script} onChange={setScript} />} {mode === "blocks" && <ScriptSelect value={script} onChange={setScript} />}
{mode === "text" && length && "long" in result.ps && onLengthChange && <LengthSelect value={length} onChange={onLengthChange} />} {mode === "text" && length && "long" in result.ps && onLengthChange && <LengthSelect value={length} onChange={onLengthChange} />}
{typeof setForm === "function" && inlineFormChoice && <AbbreviationFormSelector
adjustable={rendered.whatsAdjustable}
form={rendered.form}
onChange={setForm}
inline
/>}
</div> </div>
{mode === "text" {mode === "text"
? <CompiledPTextDisplay opts={opts} compiled={result} justify={justify} onlyOne={!!onlyOne} length={length} /> ? <CompiledPTextDisplay opts={opts} compiled={result} justify={justify} onlyOne={!!onlyOne} length={length} />