lingdocs
/
pashto-inflector
mirror of https://github.com/lingdocs/pashto-inflector.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

try updating button-select

This commit is contained in:
lingdocs 2022-04-05 00:22:47 +05:00
parent 786e3855e9
commit 1a01b1ddc8
2 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@lingdocs/pashto-inflector", "name": "@lingdocs/pashto-inflector",
"version": "1.6.8", "version": "1.6.9",
"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",

50
src/components/ButtonSelect.tsx
View File

@ -17,33 +17,29 @@ type PickerProps<T extends string> = {
} }
function ButtonSelect<L extends string>(props: PickerProps<L>) { function ButtonSelect<L extends string>(props: PickerProps<L>) {
return ( return <div className="btn-group">
<div className="d-inline-flex flex-row justify-content-center"> {props.options.map((option) => (
<div className="btn-group"> <button
{props.options.map((option) => ( key={option.value}
<button type="button"
key={option.value} className={classNames(
type="button" "btn",
className={classNames( "btn-outline-secondary",
"btn", { active: props.value === option.value },
"btn-outline-secondary", { "btn-sm": props.small || props.xSmall }
{ active: props.value === option.value }, )}
{ "btn-sm": props.small || props.xSmall } onClick={() => props.handleChange(option.value)}
)} style={{
onClick={() => props.handleChange(option.value)} ...props.xSmall ?
style={{ { fontSize: "small" }: {},
...props.xSmall ? ...(option.color && (props.value === option.value)) ?
{ fontSize: "small" }: {}, { backgroundColor: option.color } : {},
...(option.color && (props.value === option.value)) ? }}
{ backgroundColor: option.color } : {}, >
}} {option.label}
> </button>
{option.label} ))}
</button> </div>
))}
</div>
</div>
);
} }
export default ButtonSelect; export default ButtonSelect;