chore: checkbox mini

packages/mini-demo/order.json

@@ -1 +1 @@
-{"input":{"AutoHeight":"6","Basic":"1","Clearable":"2","Disabled":"5","Native":"3","ReadOnly":"4","ShowLength":"7","Vertical":"8","Readonly":"4","Disable":0},"swipe-action":{"Basic":0}}
+{"input":{"AutoHeight":"6","Basic":"1","Clearable":"2","Disabled":"5","Native":"3","ReadOnly":"4","ShowLength":"7","Vertical":"8","Readonly":"4","Disable":0},"swipe-action":{"Basic":0},"checkbox":{"Controlled":0}}

packages/mini-demo/src/pages/checkbox/component/controlled.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { showModal } from '@tarojs/taro';
+import { Checkbox, List, Panel } from 'zarm/mini';
+
+
+const Demo = () => {
+ const [checked, setChecked] = useState(false);
+
+ const onChange = (e) => {
+ if (!e.target.checked) {
+ showModal({
+ content: '是否要取消选择',
+ cancelText: '不取消',
+ success: ({ confirm }) => {
+ if (confirm) {
+ setChecked(false);
+ }
+ },
+ });
+ return false;
+ }
+ setChecked(true);
+ };
+
+ return (
+ <Panel title="取消勾选前确认">
+ <List>
+ <List.Item>
+ <Checkbox checked={checked} onChange={onChange}>
+ 取消勾选前确认
+ </Checkbox>
+ </List.Item>
+ </List>
+ </Panel>
+ );
+};
+
+export default Demo;

packages/mini-demo/src/pages/checkbox/index.tsx

@@ -1,15 +1,19 @@
+
 import * as React from 'react';
 import Basic from './component/basic';
 import Buttton from './component/buttton';
+import Controlled from './component/controlled';
 import List from './component/list';
+
 import './index.scss';
 
 export default () => {
  return (
  <>
  <Basic />
  <Buttton />
+ <Controlled />
  <List />
  </>
- );
-};
+ )
+}

packages/zarm/src/checkbox/Checkbox.mini.tsx

@@ -2,7 +2,8 @@ import { BaseEventOrig, Label, Switch, SwitchProps, View } from '@tarojs/compone
 import { createBEM } from '@zarm-design/bem';
 import { Minus as MinusIcon, Success as SuccessIcon } from '@zarm-design/icons';
 import includes from 'lodash/includes';
-import React, { ReactNode, useContext, useEffect, useMemo, useState } from 'react';
+import React, { ReactNode, useContext, useMemo, } from 'react';
+import { useControllableEventValue } from '../utils/hooks';
 import Button from '../button/index.mini';
 import { ConfigContext } from '../config-provider';
 import List from '../list';
@@ -19,19 +20,37 @@ export type CheckboxProps = BaseCheckboxProps &
  onChange?: (value: BaseEventOrig<SwitchProps.onChangeEventDetail>) => void;
  };
 
-const getChecked = (props: CheckboxProps, defaultChecked?: boolean) => {
- return props.checked ?? props.defaultChecked ?? defaultChecked;
-};
+// const getChecked = (props: CheckboxProps, defaultChecked?: boolean) => {
+//  return props.checked ?? props.defaultChecked ?? defaultChecked;
+// };
 
 const Checkbox = (props: CheckboxProps) => {
- let [checked, setChecked] = useState(getChecked(props, false));
+ // const defaultVal: Partial<{value: boolean, defaultValue: boolean}> = {};
+ // if ('checked' in props) {
+ // defaultVal.value = props.checked;
+ // }
+ // if ('defaultChecked' in props) {
+ // defaultVal.defaultValue = props.defaultChecked;
+ // }
+ // let [checked, setChecked] = useControllableEventValue({
+ // ...props,
+ // ...defaultVal,
+ // });
+
+ // console.log(checked);
+ let [checked, setChecked] = useControllableEventValue(props, {
+ valuePropName: 'checked',
+ defaultValuePropName: 'defaultChecked'
+ });
+ checked = checked ?? false;
+
  let { disabled } = props;
 
  const groupContext = useContext(CheckboxGroupContext);
  if (groupContext && props.value !== undefined) {
  checked = includes(groupContext.value, props.value);
- setChecked = (changedChecked: boolean) => {
- if (changedChecked) {
+ setChecked = (e: any) => {
+ if (e.target.checked === true) {
  groupContext.check(props.value);
  } else {
  groupContext.uncheck(props.value);
@@ -84,22 +103,17 @@ const Checkbox = (props: CheckboxProps) => {
  className={bem('input')}
  disabled={disabled}
  checked={checked}
- onChange={(e: BaseEventOrig<SwitchProps.onChangeEventDetail>) => {
+ onChange={() => {
  if (disabled) return;
-
- if (!('checked' in props)) {
- setChecked(e.detail.value);
- }
- props.onChange?.(e);
+ setChecked({
+ target: {
+ checked: !checked,
+ }
+ } as any);
+ // props.onChange?.(e);
  }}
  />
  );
- useEffect(() => {
- if (props.checked === undefined) return;
- if (props.checked === checked) return;
-
- setChecked(getChecked({ checked: props.checked, defaultChecked: props.defaultChecked }, false));
- }, [props.checked, props.defaultChecked]);
 
  if (groupContext?.type === 'button') {
  return (

packages/zarm/src/checkbox/Checkbox.tsx

@@ -6,17 +6,17 @@ import React, {
  forwardRef,
  ReactNode,
  useContext,
- useEffect,
  useImperativeHandle,
  useRef,
- useState,
 } from 'react';
 import Button from '../button';
 import { ConfigContext } from '../config-provider';
 import List from '../list';
 import type { HTMLProps } from '../utils/utilityTypes';
 import { CheckboxGroupContext } from './context';
 import type { BaseCheckboxProps, CheckboxCssVars } from './interface';
+import { useControllableEventValue } from '../utils/hooks';
+
 
 export type CheckboxProps = BaseCheckboxProps &
  HTMLProps<CheckboxCssVars> & {
@@ -25,10 +25,6 @@ export type CheckboxProps = BaseCheckboxProps &
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
  };
 
-const getChecked = (props: CheckboxProps, defaultChecked?: boolean) => {
- return props.checked ?? props.defaultChecked ?? defaultChecked;
-};
-
 export interface CheckboxRef {
  check: () => void;
  uncheck: () => void;
@@ -38,14 +34,18 @@ export interface CheckboxRef {
 const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);
 
- let [checked, setChecked] = useState(getChecked(props, false));
+ let [checked, setChecked] = useControllableEventValue(props, {
+ valuePropName: 'checked',
+ defaultValuePropName: 'defaultChecked'
+ });
+ checked = checked ?? false;
  let { disabled } = props;
 
  const groupContext = useContext(CheckboxGroupContext);
- if (groupContext && props.value !== undefined) {
+ if (groupContext && props.value !== undefined ) {
  checked = includes(groupContext.value, props.value);
- setChecked = (changedChecked: boolean) => {
- if (changedChecked) {
+ setChecked = (e: ChangeEvent<HTMLInputElement>) => {
+ if (e.target.checked === true) {
  groupContext.check(props.value);
  } else {
  groupContext.uncheck(props.value);
@@ -94,11 +94,8 @@ const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
  checked={checked}
  onChange={(e: ChangeEvent<HTMLInputElement>) => {
  if (disabled) return;
-
- if (!('checked' in props)) {
- setChecked(e.target.checked);
- }
- props.onChange?.(e);
+ setChecked(e);
+ // props.onChange?.(e);
  }}
  />
  );
@@ -119,21 +116,6 @@ const Checkbox = forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
  };
  });
 
- useEffect(() => {
- if (props.checked === undefined) return;
- if (props.checked === checked) return;
-
- setChecked(
- getChecked(
- {
- checked: props.checked,
- defaultChecked: props.defaultChecked,
- },
- false,
- ),
- );
- }, [props.checked, props.defaultChecked]);
-
  if (groupContext?.type === 'button') {
  return (
  <label className={cls} style={props.style}>

packages/zarm/src/checkbox/CheckboxGroup.tsx

@@ -1,25 +1,29 @@
 import { createBEM } from '@zarm-design/bem';
-import React, { FC, useContext, useEffect, useState } from 'react';
-import isEqual from 'lodash/isEqual';
+import React, { FC, useContext } from 'react';
 import { ConfigContext } from '../config-provider';
 import List from '../list';
 import type { HTMLProps } from '../utils/utilityTypes';
 import { CheckboxGroupContext } from './context';
-import type { BaseCheckboxGroupProps, CheckboxValue } from './interface';
+import type { BaseCheckboxGroupProps } from './interface';
+import useSelect from '../use-select';
+
 
 export interface CheckboxGroupCssVars {
  '--group-spacing-vertical'?: React.CSSProperties['marginBottom'];
  '--group-spacing-horizontal'?: React.CSSProperties['marginRight'];
 }
 
-const getValue = (props: CheckboxGroupProps, defaultValue?: CheckboxValue[]) => {
- return props.value ?? props.defaultValue ?? defaultValue;
-};
+// const getValue = (props: CheckboxGroupProps, defaultValue?: CheckboxValue[]) => {
+//  return props.value ?? props.defaultValue ?? defaultValue;
+// };
 
 export type CheckboxGroupProps = BaseCheckboxGroupProps & HTMLProps<CheckboxGroupCssVars>;
 
 const CheckboxGroup: FC<CheckboxGroupProps> = (props) => {
- const [value, setValue] = useState(getValue(props, []));
+ const [value, setValue] = useSelect({
+ ...props,
+ multiple: true,
+ });
  const { type, block, disabled, iconAlign, className, style } = props;
  const { prefixCls } = useContext(ConfigContext);
 
@@ -33,13 +37,6 @@ const CheckboxGroup: FC<CheckboxGroupProps> = (props) => {
  className,
  ]);
 
- useEffect(() => {
- if (props.value === undefined) return;
- if (isEqual(props.value, value)) return;
-
- setValue(getValue(props, []));
- }, [props.value]);
-
  return (
  <CheckboxGroupContext.Provider
  value={{
@@ -49,14 +46,10 @@ const CheckboxGroup: FC<CheckboxGroupProps> = (props) => {
  disabled,
  iconAlign,
  check: (v) => {
- const values = [...value, v];
- setValue(values);
- props.onChange?.(values);
+ setValue(v);
  },
  uncheck: (v) => {
- const values = value.filter((item) => item !== v);
- setValue(values);
- props.onChange?.(values);
+ setValue(v);
  },
  }}
  >

packages/zarm/src/checkbox/demo.md

@@ -213,7 +213,7 @@ ReactDOM.render(
 
 ```jsx
 import { List, Checkbox } from 'zarm';
-import { Star, StarFill, Success, Close } from '@zarm-design/icons';
+import { Star, StarFill, Success, Close  } from '@zarm-design/icons';
 
 ReactDOM.render(
  <List>
@@ -264,8 +264,10 @@ const Demo = () => {
  const checkboxRef = useRef();
 
  return (
- <Checkbox ref={checkboxRef} value={props.value}>
- {({ checked }) => (
+ <Checkbox
+ ref={checkboxRef}
+ value={props.value}
+ render={({ checked }) => (
  <div
  style={{
  position: 'relative',
@@ -293,7 +295,7 @@ const Demo = () => {
  {props.label}
  </div>
  )}
- </Checkbox>
+ />
  );
  };
  return (
@@ -326,26 +328,26 @@ ReactDOM.render(<Demo />, mountNode);
 | 属性 | 类型 | 默认值 | 说明 |
 | :------------- | :----------------------------------------------- | :----- | :-------------------------------------------------- |
 | disabled | boolean | false | 是否禁用 |
-| value | number \| string  | - | 值 |
+| value | number \| string | - | 值 |
 | checked | boolean | false | 当前是否选中 |
 | defaultChecked | boolean | false | 初始是否选中 |
-| indeterminate | boolean | false | 当前是否为半选状态  |
+| indeterminate | boolean | false | 当前是否为半选状态 |
 | id | string | - | 方便外部带有 for 属性的 label 标签控制当前 checkbox |
 | onChange | (event: ChangeEvent\<HTMLInputElement\>) => void | - | 值变化时触发的回调函数 |
-| renderIcon | (props: number \| string) => React.ReactNode | - | 自定义图标渲染函数 |
-| render | (props: number \| string) => React.ReactNode | - | 自定义样式渲染函数 |
+| renderIcon | (props: number \| string) => React.ReactNode  | - | 自定义图标渲染函数 |
+| render | (props: number \| string) => React.ReactNode  | - | 自定义样式渲染函数 |
 
 ### Checkbox.Group
 
-| 属性 | 类型 | 默认值 | 说明 |
-| :----------- | :------------------------------------- | :------- | :-------------------------------------------------- |
-| type | string | - | 显示类型，可选值 `button`、`list` |
-| value | number[] \| string[] | [] | 选中值 |
-| defaultValue | number[] \| string[] | [] | 初始选中值 |
-| disabled | boolean | false | 是否禁用 |
-| block | boolean | false | 子项是否为块级元素 |
-| iconAlign  | string | 'before' | type 为`list`时图标的位置，可选值 `before`、`after` |
-| onChange | (values: number[] \| string[]) => void | - | 值变化时触发的回调函数 |
+| 属性  | 类型 | 默认值 | 说明 |
+| :------------ | :------------------------------------- | :------- | :-------------------------------------------------- |
+| type  | string | - | 显示类型，可选值 `button`、`list` |
+| value  | number[] \| string[] | [] | 选中值 |
+| defaultValue  | number[] \| string[] | [] | 初始选中值 |
+| disabled  | boolean | false | 是否禁用 |
+| block  | boolean | false | 子项是否为块级元素 |
+| iconAlign | string | 'before' | type 为`list`时图标的位置，可选值 `before`、`after` |
+| onChange  | (values: number[] \| string[]) => void | - | 值变化时触发的回调函数 |
 
 ## CSS 变量
 
@@ -379,7 +381,6 @@ ReactDOM.render(<Demo />, mountNode);
 | --group-spacing-horizontal | '24px' | 组合使用时的横向间距 |
 
 ## Checkbox 指令式 API
-
 ```js
 // 选择
 ref.current.check();