fix 🐛: value for checkboxGroup

NJUPT-SAST · Oct 20, 2024 · 9cd4426 · 9cd4426 · vercel · Oct 20, 2024
1 parent bc4b413
commit 9cd4426
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/packages/ui-react/lib/Checkbox/Checkbox.tsx b/packages/ui-react/lib/Checkbox/Checkbox.tsx
@@ -35,6 +35,10 @@ export interface CheckboxProps extends React.HtmlHTMLAttributes<HTMLDivElement>
    * type
    */
   type?: 'primary' | 'warning' | 'danger' | 'info' | 'ghost';
+  /**
+   * defaultChecked
+   */
+  defaultChecked?: boolean;
 }
 
 export const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(
@@ -48,22 +52,19 @@ export const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(
       labelClass,
       onChecked = function () {},
       type = 'primary',
+      defaultChecked,
       ...rest
     },
     ref,
   ) => {
     const checkboxClass = classNames(
       `${styles['base']} ${styles[disabled ? 'disabled' : '']} ${className} ${styles[type]}`,
     );
-    const [isChecked, setIsChecked] = useState<boolean>(false);
-
-    useEffect(() => {
-      checked && setIsChecked(checked);
-    }, [checked]);
+    const [isChecked, setIsChecked] = useState<boolean>(defaultChecked ?? false);
 
     const handleChecked = () => {
-      const newIsChecked = !isChecked;
-      setIsChecked(newIsChecked);
+      const newIsChecked = !(checked ?? isChecked);
+      !checked && setIsChecked(newIsChecked);
       newIsChecked && value && onChecked('add', value || label);
       !newIsChecked && value && onChecked('delete', value || label);
     };
@@ -78,9 +79,9 @@ export const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(
         <button
           id="checkbox"
           disabled={disabled}
-          className={`${styles['checkbox-button']} ${styles[isChecked ? 'checked' : '']}`}
+          className={`${styles['checkbox-button']} ${styles[(checked ?? isChecked) ? 'checked' : '']}`}
         >
-          {isChecked && (
+          {(checked ?? isChecked) && (
             <Check
               size={16}
               className={styles['check-icon']}

diff --git a/packages/ui-react/lib/CheckboxGroup/CheckboxGroup.stories.tsx b/packages/ui-react/lib/CheckboxGroup/CheckboxGroup.stories.tsx
@@ -35,6 +35,7 @@ export const DefaultCheckboxGroup: Story = {
     ...defaultProps,
     onChange: test,
     defaultValue: ['node'],
+    value: ['node', 'next'],
   },
 };
 

diff --git a/packages/ui-react/lib/CheckboxGroup/CheckboxGroup.tsx b/packages/ui-react/lib/CheckboxGroup/CheckboxGroup.tsx
@@ -23,22 +23,28 @@ export interface CheckboxGroupProps extends Omit<HtmlHTMLAttributes<HTMLDivEleme
    * defaultValue, the defaultValue of the checkbox Group
    */
   defaultValue?: string[];
+  /**
+   * value, the value of the checkbox
+   */
+  value?: string[];
 }
 
 export const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
-  ({ options, onChange, direction, defaultValue, ...rest }, ref) => {
+  ({ options, onChange, direction, defaultValue, value, ...rest }, ref) => {
     const [selectedValue, setSelectedValue] = useState<string[]>(defaultValue ?? []);
 
     const changeSelect = useCallback(
-      (type: 'add' | 'delete', value: string) => {
+      (type: 'add' | 'delete', selectValue: string) => {
         if (type === 'add') {
-          const newSelected = [...selectedValue, value];
-          setSelectedValue(newSelected);
+          const newSelected = [...(value !== undefined ? value : selectedValue), selectValue];
+          value === undefined && setSelectedValue(newSelected);
           onChange && onChange(newSelected);
         }
         if (type === 'delete') {
-          const newSelected = selectedValue.filter((element) => element !== value);
-          setSelectedValue(newSelected);
+          const newSelected = (value !== undefined ? value : selectedValue).filter(
+            (element) => element !== selectValue,
+          );
+          value === undefined && setSelectedValue(newSelected);
           onChange && onChange(newSelected);
         }
       },
@@ -54,7 +60,7 @@ export const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps
         >
           <Content
             options={options}
-            selectValue={selectedValue}
+            selectValue={value !== undefined ? value : selectedValue}
             changeSelect={changeSelect}
           />
         </div>

diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui-aurora/react",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "A React UI library built for SASTOJ",
   "author": "sast",
   "license": "MIT",