From acb6bdfa3ef4c568ce8dd3c8a0271059e18c8121 Mon Sep 17 00:00:00 2001 From: lingdocs <71590811+lingdocs@users.noreply.github.com> Date: Fri, 29 Jul 2022 14:44:26 -0500 Subject: [PATCH] ability to have sleeker inline form choice on VPDisplay, good for grammar app examples --- package.json | 2 +- src/components/ButtonSelect.tsx | 3 ++- .../vp-explorer/AbbreviationFormSelector.tsx | 6 ++++-- src/components/vp-explorer/VPDisplay.tsx | 11 +++++++++-- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index e621fc4..d8c238c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lingdocs/pashto-inflector", - "version": "3.6.2", + "version": "3.6.3", "author": "lingdocs.com", "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations", "homepage": "https://verbs.lingdocs.com", diff --git a/src/components/ButtonSelect.tsx b/src/components/ButtonSelect.tsx index f2c956a..1da3914 100644 --- a/src/components/ButtonSelect.tsx +++ b/src/components/ButtonSelect.tsx @@ -14,6 +14,7 @@ type PickerProps = { handleChange: (payload: T) => void, small?: boolean, xSmall?: boolean, + faded?: boolean, } function ButtonSelect(props: PickerProps) { @@ -24,7 +25,7 @@ function ButtonSelect(props: PickerProps) { type="button" className={classNames( "btn", - "btn-outline-secondary", + props.faded ? "btn-light" : "btn-outline-secondary", { active: props.value === option.value }, { "btn-sm": props.small || props.xSmall }, )} diff --git a/src/components/vp-explorer/AbbreviationFormSelector.tsx b/src/components/vp-explorer/AbbreviationFormSelector.tsx index f1bd1fe..dd26a95 100644 --- a/src/components/vp-explorer/AbbreviationFormSelector.tsx +++ b/src/components/vp-explorer/AbbreviationFormSelector.tsx @@ -68,10 +68,11 @@ function limitValue(value: string, adjustable: "both" | "king" | "servant") { throw new Error("unrecognized adjustable value"); } -function AbbreviationFormSelector({ form, onChange, adjustable }: { +function AbbreviationFormSelector({ form, onChange, adjustable, inline }: { form: T.FormVersion, onChange: (f: T.FormVersion) => void, adjustable: "both" | "king" | "servant", + inline?: boolean, }) { function handleChange(f: "full" | "noKing" | "shrinkServant" | "shortest") { if (f === "full") { @@ -85,9 +86,10 @@ function AbbreviationFormSelector({ form, onChange, adjustable }: { } } // TODO: limit display of shrinking options based on the verb type - return
+ return
{/*
Abbreviation Options
*/} void), @@ -20,6 +20,7 @@ function VPDisplay({ VPS, opts, setForm, justify, onlyOne, length, mode: preferr mode?: Mode, script?: "p" | "f", onLengthChange?: (length: "long" | "short") => void, + inlineFormChoice?: boolean, }) { const [mode, setMode] = useState(preferredMode || "text"); 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 result = compileVP(rendered, rendered.form); return
- {typeof setForm === "function" && {mode === "blocks" && } {mode === "text" && length && "long" in result.ps && onLengthChange && } + {typeof setForm === "function" && inlineFormChoice && }
{mode === "text" ?