p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: make checkbox checked style working with css instead of prop

Browse Source
This commit is contained in:
p-sw 2024-05-29 23:34:04 +09:00
parent 8cff71542f
commit d109879fd8
1 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/react/components/Checkbox.tsx
View File

@ -5,8 +5,10 @@ const checkboxColors = {
background: { background: {
default: "bg-neutral-200 dark:bg-neutral-700", default: "bg-neutral-200 dark:bg-neutral-700",
hover: "hover:bg-neutral-300 dark:hover:bg-neutral-600", hover: "hover:bg-neutral-300 dark:hover:bg-neutral-600",
checked: "bg-neutral-300 dark:bg-neutral-400", checked:
checkedHover: "hover:bg-neutral-400 dark:hover:bg-neutral-300", "has-[input[type=checkbox]:checked]:bg-neutral-300 dark:has-[input[type=checkbox]:checked]:bg-neutral-400",
checkedHover:
"has-[input[type=checkbox]:checked]:hover:bg-neutral-400 dark:has-[input[type=checkbox]:checked]:hover:bg-neutral-300",
disabled: disabled:
'has-[input[type="checkbox"]:disabled]:bg-neutral-100 dark:has-[input[type="checkbox"]:disabled]:bg-neutral-800', 'has-[input[type="checkbox"]:disabled]:bg-neutral-100 dark:has-[input[type="checkbox"]:disabled]:bg-neutral-800',
disabledHover: disabledHover:
@ -16,12 +18,8 @@ const checkboxColors = {
}; };
const [checkboxVariant, resolveCheckboxVariantProps] = vcn({ const [checkboxVariant, resolveCheckboxVariantProps] = vcn({
base: `inline-block rounded-md ${checkboxColors.checkmark} ${checkboxColors.background.disabled} ${checkboxColors.background.default} ${checkboxColors.background.hover} has-[input[type="checkbox"]:disabled]:cursor-not-allowed transition-colors duration-75 ease-in-out`, base: `inline-block rounded-md ${checkboxColors.checkmark} ${checkboxColors.background.disabled} ${checkboxColors.background.default} ${checkboxColors.background.hover} ${checkboxColors.background.checked} ${checkboxColors.background.checkedHover} has-[input[type="checkbox"]:disabled]:cursor-not-allowed transition-colors duration-75 ease-in-out`,
variants: { variants: {
checked: {
true: `${checkboxColors.background.checked} ${checkboxColors.background.checkedHover}`,
false: ``,
},
size: { size: {
base: "size-[1em] p-0 [&>svg]:size-[1em]", base: "size-[1em] p-0 [&>svg]:size-[1em]",
md: "size-[1.5em] p-0.5 [&>svg]:size-[1.25em]", md: "size-[1.5em] p-0.5 [&>svg]:size-[1.25em]",
@ -29,7 +27,6 @@ const [checkboxVariant, resolveCheckboxVariantProps] = vcn({
}, },
}, },
defaults: { defaults: {
checked: false,
size: "md", size: "md",
}, },
}); });
@ -45,22 +42,26 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
(props, ref) => { (props, ref) => {
const [variantProps, otherPropsCompressed] = const [variantProps, otherPropsCompressed] =
resolveCheckboxVariantProps(props); resolveCheckboxVariantProps(props);
const { defaultChecked, onChange, ...otherPropsExtracted } = const {
otherPropsCompressed; defaultChecked,
checked: propChecked,
onChange,
...otherPropsExtracted
} = otherPropsCompressed;
// internally handles checked, so we can use checked value without prop // internally handles checked, so we can use checked value without prop
const [checked, setChecked] = React.useState(defaultChecked ?? false); const [checked, setChecked] = React.useState(defaultChecked ?? false);
React.useEffect(() => { React.useEffect(() => {
if (typeof variantProps.checked === "boolean") { if (typeof propChecked === "boolean") {
setChecked(variantProps.checked); setChecked(propChecked);
} }
}, [variantProps.checked]); }, [propChecked]);
const internalRef = React.useRef<HTMLInputElement | null>(null); const internalRef = React.useRef<HTMLInputElement | null>(null);
return ( return (
<> <>
<label className={checkboxVariant({ ...variantProps, checked })}> <label className={checkboxVariant(variantProps)}>
<input <input
{...otherPropsExtracted} {...otherPropsExtracted}
defaultChecked={defaultChecked} defaultChecked={defaultChecked}