feat: 模卡更新

src/components/bl-checkbox/index.tsx

@@ -1,42 +1,44 @@
-import { Image } from '@tarojs/components';
-
 import { Checkbox } from '@taroify/core';
 import { CheckboxProps, CheckboxGroupProps } from '@taroify/core/checkbox';
+import CheckboxGroupContext from '@taroify/core/checkbox/checkbox-group.context';
+import { useContext } from 'react';
 
 import './index.less';
 
 interface IProps extends CheckboxProps {
   text: string;
+}
+
+interface IGroupProps extends CheckboxGroupProps {
   value: BL.Anything[];
 }
 
-interface IGroupProps extends CheckboxGroupProps {}
-
 const PREFIX = 'profile-checkbox';
 
-export function BlCheckboxGroup(props: IGroupProps) {
-  return <Checkbox.Group className={`${PREFIX}__group`} direction="horizontal" {...props} />;
+export function BlCheckboxGroup({ value, onChange, children }: IGroupProps) {
+  return (
+    <Checkbox.Group className={`${PREFIX}__group`} value={value} onChange={onChange}>
+      {children}
+    </Checkbox.Group>
+  );
 }
 
 export function BlCheckbox(props: IProps) {
-  const { name, text, value } = props;
+  const { name, text } = props;
+  const { value: names = [], onChange: onNamesChange } = useContext(CheckboxGroupContext);
+  const checked = names.includes(name);
+  const handleClick = () => {
+    if (!name) return;
+
+    if (checked) {
+      onNamesChange?.(names.filter(aName => aName !== name));
+    } else {
+      onNamesChange?.([...names, name]);
+    }
+  };
 
   return (
-    <Checkbox
-      className={`${PREFIX}__item`}
-      name={name}
-      icon={
-        <Image
-          className={`${PREFIX}__icon`}
-          mode="aspectFit"
-          src={
-            value.includes(name)
-              ? require('@/statics/svg/radio-checked.svg')
-              : require('@/statics/svg/radio-uncheck.svg')
-          }
-        />
-      }
-    >
+    <Checkbox className={`${PREFIX}__item ${checked ? 'active' : ''}`} name={name} icon={null} onClick={handleClick}>
       {text}
     </Checkbox>
   );