From 40034dbbb405f1b994583bfea6e9c78df26fd39d Mon Sep 17 00:00:00 2001 From: Yang Date: Mon, 4 Dec 2023 18:01:54 +0800 Subject: [PATCH] chore: checkbox mini --- packages/mini-demo/order.json | 2 +- .../pages/checkbox/component/controlled.tsx | 38 ++++++++++++++ .../mini-demo/src/pages/checkbox/index.tsx | 8 ++- packages/zarm/src/checkbox/Checkbox.mini.tsx | 52 ++++++++++++------- packages/zarm/src/checkbox/Checkbox.tsx | 42 +++++---------- packages/zarm/src/checkbox/CheckboxGroup.tsx | 33 +++++------- packages/zarm/src/checkbox/demo.md | 37 ++++++------- .../src/checkbox/demo/controlled.mini.tsx | 38 ++++++++++++++ .../zarm/src/checkbox/style/index.mini.scss | 16 ++++++ .../zarm/src/checkbox/style/index.mini.ts | 1 - .../hooks/useControllableEventValue/index.ts | 1 + 11 files changed, 177 insertions(+), 91 deletions(-) create mode 100644 packages/mini-demo/src/pages/checkbox/component/controlled.tsx create mode 100644 packages/zarm/src/checkbox/demo/controlled.mini.tsx diff --git a/packages/mini-demo/order.json b/packages/mini-demo/order.json index 8f23290e8..43565b622 100644 --- a/packages/mini-demo/order.json +++ b/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}} diff --git a/packages/mini-demo/src/pages/checkbox/component/controlled.tsx b/packages/mini-demo/src/pages/checkbox/component/controlled.tsx new file mode 100644 index 000000000..a471c1d65 --- /dev/null +++ b/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 ( + + + + + 取消勾选前确认 + + + + + ); +}; + +export default Demo; diff --git a/packages/mini-demo/src/pages/checkbox/index.tsx b/packages/mini-demo/src/pages/checkbox/index.tsx index 5e0022401..e45221fd9 100644 --- a/packages/mini-demo/src/pages/checkbox/index.tsx +++ b/packages/mini-demo/src/pages/checkbox/index.tsx @@ -1,7 +1,10 @@ + 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 () => { @@ -9,7 +12,8 @@ export default () => { <> + - ); -}; + ) +} \ No newline at end of file diff --git a/packages/zarm/src/checkbox/Checkbox.mini.tsx b/packages/zarm/src/checkbox/Checkbox.mini.tsx index 2a1f2ae26..d3a7974e5 100644 --- a/packages/zarm/src/checkbox/Checkbox.mini.tsx +++ b/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) => 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) => { + 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 ( diff --git a/packages/zarm/src/checkbox/Checkbox.tsx b/packages/zarm/src/checkbox/Checkbox.tsx index de14930a6..73f172b66 100644 --- a/packages/zarm/src/checkbox/Checkbox.tsx +++ b/packages/zarm/src/checkbox/Checkbox.tsx @@ -6,10 +6,8 @@ import React, { forwardRef, ReactNode, useContext, - useEffect, useImperativeHandle, useRef, - useState, } from 'react'; import Button from '../button'; import { ConfigContext } from '../config-provider'; @@ -17,6 +15,8 @@ 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 & { @@ -25,10 +25,6 @@ export type CheckboxProps = BaseCheckboxProps & onChange?: (e: ChangeEvent) => 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((props, ref) => { const inputRef = useRef(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) => { + if (e.target.checked === true) { groupContext.check(props.value); } else { groupContext.uncheck(props.value); @@ -94,11 +94,8 @@ const Checkbox = forwardRef((props, ref) => { checked={checked} onChange={(e: ChangeEvent) => { 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((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 (