From 816895cfdf1d953e1ba3fb3f4c3b916ea4bc36c7 Mon Sep 17 00:00:00 2001 From: Yang Date: Thu, 14 Sep 2023 10:28:13 +0800 Subject: [PATCH 01/10] fix: conflict --- packages/mini-demo/src/app.config.ts | 1 + .../src/pages/checkbox/component/basic.tsx | 24 +++ .../src/pages/checkbox/component/buttton.tsx | 20 ++ .../src/pages/checkbox/component/list.tsx | 16 ++ .../src/pages/checkbox/index.config.ts | 3 + .../mini-demo/src/pages/checkbox/index.scss | 3 + .../mini-demo/src/pages/checkbox/index.tsx | 15 ++ packages/mini-demo/src/site.ts | 11 + packages/zarm/src/button/Button.mini.tsx | 2 +- packages/zarm/src/checkbox/Checkbox.mini.tsx | 190 ++++++++++++++++++ .../zarm/src/checkbox/demo/basic.mini.tsx | 24 +++ .../zarm/src/checkbox/demo/buttton.mini.tsx | 20 ++ packages/zarm/src/checkbox/demo/list.mini.tsx | 16 ++ packages/zarm/src/checkbox/index.mini.ts | 8 + .../zarm/src/checkbox/style/index.mini.scss | 22 ++ .../zarm/src/checkbox/style/index.mini.ts | 5 + packages/zarm/src/index.mini.ts | 7 + 17 files changed, 386 insertions(+), 1 deletion(-) create mode 100644 packages/mini-demo/src/pages/checkbox/component/basic.tsx create mode 100644 packages/mini-demo/src/pages/checkbox/component/buttton.tsx create mode 100644 packages/mini-demo/src/pages/checkbox/component/list.tsx create mode 100644 packages/mini-demo/src/pages/checkbox/index.config.ts create mode 100644 packages/mini-demo/src/pages/checkbox/index.scss create mode 100644 packages/mini-demo/src/pages/checkbox/index.tsx create mode 100644 packages/zarm/src/checkbox/Checkbox.mini.tsx create mode 100644 packages/zarm/src/checkbox/demo/basic.mini.tsx create mode 100644 packages/zarm/src/checkbox/demo/buttton.mini.tsx create mode 100644 packages/zarm/src/checkbox/demo/list.mini.tsx create mode 100644 packages/zarm/src/checkbox/index.mini.ts create mode 100644 packages/zarm/src/checkbox/style/index.mini.scss create mode 100644 packages/zarm/src/checkbox/style/index.mini.ts diff --git a/packages/mini-demo/src/app.config.ts b/packages/mini-demo/src/app.config.ts index df9ea8bc8..908bdfdd6 100644 --- a/packages/mini-demo/src/app.config.ts +++ b/packages/mini-demo/src/app.config.ts @@ -8,6 +8,7 @@ export default defineAppConfig({ 'pages/tabs/index', 'pages/input/index', 'pages/swipe-action/index', + 'pages/checkbox/index', ], window: { backgroundTextStyle: 'light', diff --git a/packages/mini-demo/src/pages/checkbox/component/basic.tsx b/packages/mini-demo/src/pages/checkbox/component/basic.tsx new file mode 100644 index 000000000..174a3dd11 --- /dev/null +++ b/packages/mini-demo/src/pages/checkbox/component/basic.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Checkbox, List, Panel } from 'zarm/mini'; + +function Demo() { + return ( + + + + console.log(e)}>普通 + + + + 默认选中 + + + + 禁用 + + + + ); +} + +export default Demo; diff --git a/packages/mini-demo/src/pages/checkbox/component/buttton.tsx b/packages/mini-demo/src/pages/checkbox/component/buttton.tsx new file mode 100644 index 000000000..47a429322 --- /dev/null +++ b/packages/mini-demo/src/pages/checkbox/component/buttton.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Checkbox, List, Panel } from 'zarm/mini'; + +function Demo() { + return ( + + + + console.log(e)} block> + 选项一 + 选项二 + 选项三 + + + + + ); +} + +export default Demo; diff --git a/packages/mini-demo/src/pages/checkbox/component/list.tsx b/packages/mini-demo/src/pages/checkbox/component/list.tsx new file mode 100644 index 000000000..baa2827c9 --- /dev/null +++ b/packages/mini-demo/src/pages/checkbox/component/list.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Checkbox, Panel } from 'zarm/mini'; + +function Demo() { + return ( + + console.log(e)}> + 选项一 + 选项二 + 选项三 + + + ); +} + +export default Demo; diff --git a/packages/mini-demo/src/pages/checkbox/index.config.ts b/packages/mini-demo/src/pages/checkbox/index.config.ts new file mode 100644 index 000000000..267fb2a4b --- /dev/null +++ b/packages/mini-demo/src/pages/checkbox/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: 'Checkbox', +}); diff --git a/packages/mini-demo/src/pages/checkbox/index.scss b/packages/mini-demo/src/pages/checkbox/index.scss new file mode 100644 index 000000000..649525820 --- /dev/null +++ b/packages/mini-demo/src/pages/checkbox/index.scss @@ -0,0 +1,3 @@ +view { + box-sizing: border-box; +} diff --git a/packages/mini-demo/src/pages/checkbox/index.tsx b/packages/mini-demo/src/pages/checkbox/index.tsx new file mode 100644 index 000000000..5e0022401 --- /dev/null +++ b/packages/mini-demo/src/pages/checkbox/index.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import Basic from './component/basic'; +import Buttton from './component/buttton'; +import List from './component/list'; +import './index.scss'; + +export default () => { + return ( + <> + + + + + ); +}; diff --git a/packages/mini-demo/src/site.ts b/packages/mini-demo/src/site.ts index 4a1f85f37..aa4ada427 100644 --- a/packages/mini-demo/src/site.ts +++ b/packages/mini-demo/src/site.ts @@ -28,6 +28,17 @@ const siteMap = { page: '/pages/input/index', }, // { + { + key: 'Checkbox', + name: '复选框', + page: '/pages/checkbox/index', + }, + // { + // key: 'Input', + // name: '输入框', + // page: '/pages/input/index', + // }, + // { // key: 'Keyboard', // name: '键盘', // page: '/pages/keyboard/index', diff --git a/packages/zarm/src/button/Button.mini.tsx b/packages/zarm/src/button/Button.mini.tsx index 9990a439c..5f98c7d22 100644 --- a/packages/zarm/src/button/Button.mini.tsx +++ b/packages/zarm/src/button/Button.mini.tsx @@ -7,7 +7,7 @@ import { BaseButtonProps } from './interface'; export interface ButtonProps extends BaseButtonProps, Omit {} -const Button: React.FC = (props: ButtonProps) => { +const Button = (props: ButtonProps) => { const { className, theme, diff --git a/packages/zarm/src/checkbox/Checkbox.mini.tsx b/packages/zarm/src/checkbox/Checkbox.mini.tsx new file mode 100644 index 000000000..b9ed03769 --- /dev/null +++ b/packages/zarm/src/checkbox/Checkbox.mini.tsx @@ -0,0 +1,190 @@ +import { Label, Switch, View } from '@tarojs/components'; +import { createBEM } from '@zarm-design/bem'; +import { Minus as MinusIcon, Success as SuccessIcon } from '@zarm-design/icons'; +import includes from 'lodash/includes'; +import React, { forwardRef, ReactNode, useContext, useEffect, useMemo, useState } from 'react'; +import Button from '../button/index.mini'; +import { ConfigContext } from '../config-provider'; +import List from '../list'; +import { nanoid } from '../utils'; +import { canUseDOM } from '../utils/dom'; +import { HTMLProps } from '../utils/utilityTypes'; +import { CheckboxGroupContext } from './context'; +import type { BaseCheckboxProps } from './interface'; + +export interface CheckboxCssVars { + '--icon-size'?: React.CSSProperties['height']; + '--icon-background'?: React.CSSProperties['background']; + '--icon-border-radius'?: React.CSSProperties['borderRadius']; + '--icon-border-width'?: React.CSSProperties['borderWidth']; + '--icon-border-color'?: React.CSSProperties['borderColor']; + '--tick-font-size'?: React.CSSProperties['fontSize']; + '--tick-color'?: React.CSSProperties['color']; + '--tick-transition'?: React.CSSProperties['transition']; + '--text-margin-horizontal'?: React.CSSProperties['marginLeft']; + '--active-opacity'?: React.CSSProperties['opacity']; + '--checked-icon-background'?: React.CSSProperties['background']; + '--checked-icon-border-color'?: React.CSSProperties['borderColor']; + '--checked-tick-color'?: React.CSSProperties['color']; + '--disabled-icon-background'?: React.CSSProperties['background']; + '--disabled-icon-border-color'?: React.CSSProperties['borderColor']; + '--disabled-text-color'?: React.CSSProperties['color']; + '--disabled-tick-color'?: React.CSSProperties['color']; + '--group-spacing-vertical'?: React.CSSProperties['marginBottom']; + '--group-spacing-horizontal'?: React.CSSProperties['marginRight']; +} + +export type CheckboxProps = BaseCheckboxProps & + HTMLProps & { + renderIcon?: (props: CheckboxProps) => ReactNode; + render?: (props: CheckboxProps) => ReactNode; + onChange?: (value: boolean) => void; + }; + +const getChecked = (props: CheckboxProps, defaultChecked?: boolean) => { + return props.checked ?? props.defaultChecked ?? defaultChecked; +}; + +const Checkbox = forwardRef((props, ref) => { + let [checked, setChecked] = useState(getChecked(props, false)); + let { disabled } = props; + + const groupContext = useContext(CheckboxGroupContext); + if (groupContext && props.value !== undefined) { + checked = includes(groupContext.value, props.value); + setChecked = (changedChecked: boolean) => { + if (changedChecked) { + groupContext.check(props.value); + } else { + groupContext.uncheck(props.value); + } + }; + disabled = disabled || groupContext.disabled; + } + + const { prefixCls } = useContext(ConfigContext); + const bem = createBEM('checkbox', { prefixCls }); + const cls = bem([ + { + disabled, + checked: checked && !props.indeterminate, + untext: !props.children, + indeterminate: props.indeterminate, + }, + props.className, + ]); + + const currentProps = { ...props, checked }; + + const textRender = props.children && {props.children}; + + const iconRender = ( + + {props.renderIcon ? ( + props.renderIcon(currentProps) + ) : ( + {props.indeterminate ? : } + )} + + ); + + const id = useMemo(() => nanoid(), []); + + const passProps = canUseDOM + ? { + nativeProps: { + id, + }, + } + : { id }; + + const inputRender = ( + { + if (disabled) return; + + if (!('checked' in props)) { + setChecked(e.detail.value); + } + props.onChange?.(e.detail.value); + }} + /> + ); + 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 ( + + {inputRender} + + + + ); + } + + if (groupContext?.type === 'list') { + const tickRender = ( + <> + {inputRender} + {iconRender} + + ); + + return ( + + ); + } + + const contentRender = props.render ? ( + props.render(currentProps) + ) : ( + <> + {iconRender} + {textRender} + + ); + + return ( + + + {inputRender} + + ); +}); + +Checkbox.displayName = 'Checkbox'; + +Checkbox.defaultProps = { + indeterminate: false, +}; + +export default Checkbox; diff --git a/packages/zarm/src/checkbox/demo/basic.mini.tsx b/packages/zarm/src/checkbox/demo/basic.mini.tsx new file mode 100644 index 000000000..174a3dd11 --- /dev/null +++ b/packages/zarm/src/checkbox/demo/basic.mini.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Checkbox, List, Panel } from 'zarm/mini'; + +function Demo() { + return ( + + + + console.log(e)}>普通 + + + + 默认选中 + + + + 禁用 + + + + ); +} + +export default Demo; diff --git a/packages/zarm/src/checkbox/demo/buttton.mini.tsx b/packages/zarm/src/checkbox/demo/buttton.mini.tsx new file mode 100644 index 000000000..47a429322 --- /dev/null +++ b/packages/zarm/src/checkbox/demo/buttton.mini.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Checkbox, List, Panel } from 'zarm/mini'; + +function Demo() { + return ( + + + + console.log(e)} block> + 选项一 + 选项二 + 选项三 + + + + + ); +} + +export default Demo; diff --git a/packages/zarm/src/checkbox/demo/list.mini.tsx b/packages/zarm/src/checkbox/demo/list.mini.tsx new file mode 100644 index 000000000..baa2827c9 --- /dev/null +++ b/packages/zarm/src/checkbox/demo/list.mini.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Checkbox, Panel } from 'zarm/mini'; + +function Demo() { + return ( + + console.log(e)}> + 选项一 + 选项二 + 选项三 + + + ); +} + +export default Demo; diff --git a/packages/zarm/src/checkbox/index.mini.ts b/packages/zarm/src/checkbox/index.mini.ts new file mode 100644 index 000000000..954e0255f --- /dev/null +++ b/packages/zarm/src/checkbox/index.mini.ts @@ -0,0 +1,8 @@ +import attachPropertiesToComponent from '../utils/attachPropertiesToComponent'; +import Checkbox from './Checkbox.mini'; +import Group from './CheckboxGroup'; + +export type { CheckboxCssVars, CheckboxProps, CheckboxRef } from './Checkbox'; +export type { CheckboxGroupCssVars, CheckboxGroupProps } from './CheckboxGroup'; + +export default attachPropertiesToComponent(Checkbox, { Group }); diff --git a/packages/zarm/src/checkbox/style/index.mini.scss b/packages/zarm/src/checkbox/style/index.mini.scss new file mode 100644 index 000000000..2d0b85c7d --- /dev/null +++ b/packages/zarm/src/checkbox/style/index.mini.scss @@ -0,0 +1,22 @@ +@import '../../style/core/index'; +@import 'component'; + +@include b(checkbox) { + position: relative; + + @include e(label) { + display: flex; + align-items: center; + position: relative; + } + + @include e(click) { + position: absolute; + z-index: 2; + opacity: 0; + left: 0; + top: 0; + height: 100%; + width: 100%; + } +} diff --git a/packages/zarm/src/checkbox/style/index.mini.ts b/packages/zarm/src/checkbox/style/index.mini.ts new file mode 100644 index 000000000..829c27fea --- /dev/null +++ b/packages/zarm/src/checkbox/style/index.mini.ts @@ -0,0 +1,5 @@ +import '../../button/style/index.mini'; +import '../../icon/style'; +import '../../list/style/index.mini'; +import '../../style'; +import './index.mini.scss'; diff --git a/packages/zarm/src/index.mini.ts b/packages/zarm/src/index.mini.ts index 8f1bd29f2..8c43b1a9f 100644 --- a/packages/zarm/src/index.mini.ts +++ b/packages/zarm/src/index.mini.ts @@ -1,5 +1,12 @@ export { default as Button } from './button/index.mini'; export type { ButtonProps } from './button/index.mini'; +export { default as Checkbox } from './checkbox/index.mini'; +export type { + CheckboxCssVars, + CheckboxGroupCssVars, + CheckboxGroupProps, + CheckboxProps, +} from './checkbox/index.mini'; export { default as Collapse } from './collapse/index.mini'; export type { CollapseCssVars, CollapseItemProps, CollapseProps } from './collapse/index.mini'; export { default as List } from './list/index.mini'; From 17b80d0aaac94c7c9a08b835100046abce8caf98 Mon Sep 17 00:00:00 2001 From: Yang Date: Mon, 28 Aug 2023 19:09:46 +0800 Subject: [PATCH 02/10] chore: checkbox type --- packages/zarm/src/checkbox/Checkbox.mini.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/zarm/src/checkbox/Checkbox.mini.tsx b/packages/zarm/src/checkbox/Checkbox.mini.tsx index b9ed03769..c729ab660 100644 --- a/packages/zarm/src/checkbox/Checkbox.mini.tsx +++ b/packages/zarm/src/checkbox/Checkbox.mini.tsx @@ -1,4 +1,4 @@ -import { Label, Switch, View } from '@tarojs/components'; +import { BaseEventOrig, Label, Switch, SwitchProps, View } from '@tarojs/components'; import { createBEM } from '@zarm-design/bem'; import { Minus as MinusIcon, Success as SuccessIcon } from '@zarm-design/icons'; import includes from 'lodash/includes'; @@ -38,7 +38,7 @@ export type CheckboxProps = BaseCheckboxProps & HTMLProps & { renderIcon?: (props: CheckboxProps) => ReactNode; render?: (props: CheckboxProps) => ReactNode; - onChange?: (value: boolean) => void; + onChange?: (value: BaseEventOrig) => void; }; const getChecked = (props: CheckboxProps, defaultChecked?: boolean) => { @@ -104,13 +104,13 @@ const Checkbox = forwardRef((props, ref) => { className={bem('input')} disabled={disabled} checked={checked} - onChange={(e) => { + onChange={(e: BaseEventOrig) => { if (disabled) return; if (!('checked' in props)) { setChecked(e.detail.value); } - props.onChange?.(e.detail.value); + props.onChange?.(e); }} /> ); From 557381662f6f6ccd76ba1400ef61d824e8078470 Mon Sep 17 00:00:00 2001 From: Yang Date: Wed, 13 Sep 2023 18:19:27 +0800 Subject: [PATCH 03/10] chore: checkbox replace render with children function --- packages/zarm/src/checkbox/Checkbox.mini.tsx | 51 +++++----------- packages/zarm/src/checkbox/Checkbox.tsx | 61 ++++++++------------ packages/zarm/src/checkbox/demo.md | 37 ++++++------ packages/zarm/src/checkbox/index.mini.ts | 3 +- packages/zarm/src/checkbox/index.ts | 3 +- packages/zarm/src/checkbox/interface.ts | 27 +++++++-- 6 files changed, 86 insertions(+), 96 deletions(-) diff --git a/packages/zarm/src/checkbox/Checkbox.mini.tsx b/packages/zarm/src/checkbox/Checkbox.mini.tsx index c729ab660..ef24be463 100644 --- a/packages/zarm/src/checkbox/Checkbox.mini.tsx +++ b/packages/zarm/src/checkbox/Checkbox.mini.tsx @@ -10,34 +10,12 @@ import { nanoid } from '../utils'; import { canUseDOM } from '../utils/dom'; import { HTMLProps } from '../utils/utilityTypes'; import { CheckboxGroupContext } from './context'; -import type { BaseCheckboxProps } from './interface'; - -export interface CheckboxCssVars { - '--icon-size'?: React.CSSProperties['height']; - '--icon-background'?: React.CSSProperties['background']; - '--icon-border-radius'?: React.CSSProperties['borderRadius']; - '--icon-border-width'?: React.CSSProperties['borderWidth']; - '--icon-border-color'?: React.CSSProperties['borderColor']; - '--tick-font-size'?: React.CSSProperties['fontSize']; - '--tick-color'?: React.CSSProperties['color']; - '--tick-transition'?: React.CSSProperties['transition']; - '--text-margin-horizontal'?: React.CSSProperties['marginLeft']; - '--active-opacity'?: React.CSSProperties['opacity']; - '--checked-icon-background'?: React.CSSProperties['background']; - '--checked-icon-border-color'?: React.CSSProperties['borderColor']; - '--checked-tick-color'?: React.CSSProperties['color']; - '--disabled-icon-background'?: React.CSSProperties['background']; - '--disabled-icon-border-color'?: React.CSSProperties['borderColor']; - '--disabled-text-color'?: React.CSSProperties['color']; - '--disabled-tick-color'?: React.CSSProperties['color']; - '--group-spacing-vertical'?: React.CSSProperties['marginBottom']; - '--group-spacing-horizontal'?: React.CSSProperties['marginRight']; -} +import type { BaseCheckboxProps, CheckboxCssVars } from './interface'; export type CheckboxProps = BaseCheckboxProps & HTMLProps & { renderIcon?: (props: CheckboxProps) => ReactNode; - render?: (props: CheckboxProps) => ReactNode; + children?: React.ReactNode | ((props: CheckboxProps) => React.ReactNode); onChange?: (value: BaseEventOrig) => void; }; @@ -76,7 +54,9 @@ const Checkbox = forwardRef((props, ref) => { const currentProps = { ...props, checked }; - const textRender = props.children && {props.children}; + const children = + typeof props.children === 'function' ? props.children(currentProps) : props.children; + const textRender = props.children && {children}; const iconRender = ( @@ -126,7 +106,7 @@ const Checkbox = forwardRef((props, ref) => { {inputRender} ); @@ -162,14 +142,15 @@ const Checkbox = forwardRef((props, ref) => { ); } - const contentRender = props.render ? ( - props.render(currentProps) - ) : ( - <> - {iconRender} - {textRender} - - ); + const contentRender = + typeof props.children === 'function' ? ( + props.children(currentProps) + ) : ( + <> + {iconRender} + {textRender} + + ); return ( diff --git a/packages/zarm/src/checkbox/Checkbox.tsx b/packages/zarm/src/checkbox/Checkbox.tsx index ca9b95dbe..de14930a6 100644 --- a/packages/zarm/src/checkbox/Checkbox.tsx +++ b/packages/zarm/src/checkbox/Checkbox.tsx @@ -16,34 +16,12 @@ import { ConfigContext } from '../config-provider'; import List from '../list'; import type { HTMLProps } from '../utils/utilityTypes'; import { CheckboxGroupContext } from './context'; -import type { BaseCheckboxProps } from './interface'; - -export interface CheckboxCssVars { - '--icon-size'?: React.CSSProperties['height']; - '--icon-background'?: React.CSSProperties['background']; - '--icon-border-radius'?: React.CSSProperties['borderRadius']; - '--icon-border-width'?: React.CSSProperties['borderWidth']; - '--icon-border-color'?: React.CSSProperties['borderColor']; - '--tick-font-size'?: React.CSSProperties['fontSize']; - '--tick-color'?: React.CSSProperties['color']; - '--tick-transition'?: React.CSSProperties['transition']; - '--text-margin-horizontal'?: React.CSSProperties['marginLeft']; - '--active-opacity'?: React.CSSProperties['opacity']; - '--checked-icon-background'?: React.CSSProperties['background']; - '--checked-icon-border-color'?: React.CSSProperties['borderColor']; - '--checked-tick-color'?: React.CSSProperties['color']; - '--disabled-icon-background'?: React.CSSProperties['background']; - '--disabled-icon-border-color'?: React.CSSProperties['borderColor']; - '--disabled-text-color'?: React.CSSProperties['color']; - '--disabled-tick-color'?: React.CSSProperties['color']; - '--group-spacing-vertical'?: React.CSSProperties['marginBottom']; - '--group-spacing-horizontal'?: React.CSSProperties['marginRight']; -} +import type { BaseCheckboxProps, CheckboxCssVars } from './interface'; export type CheckboxProps = BaseCheckboxProps & HTMLProps & { renderIcon?: (props: CheckboxProps) => ReactNode; - render?: (props: CheckboxProps) => ReactNode; + children?: React.ReactNode | ((props: CheckboxProps) => React.ReactNode); onChange?: (e: ChangeEvent) => void; }; @@ -55,7 +33,7 @@ export interface CheckboxRef { check: () => void; uncheck: () => void; toggle: () => void; -}; +} const Checkbox = forwardRef((props, ref) => { const inputRef = useRef(null); @@ -89,8 +67,10 @@ const Checkbox = forwardRef((props, ref) => { ]); const currentProps = { ...props, checked }; + const children = + typeof props.children === 'function' ? props.children(currentProps) : props.children; - const textRender = props.children && {props.children}; + const textRender = props.children && {children}; const iconRender = ( @@ -143,7 +123,15 @@ const Checkbox = forwardRef((props, ref) => { if (props.checked === undefined) return; if (props.checked === checked) return; - setChecked(getChecked({ checked: props.checked, defaultChecked: props.defaultChecked }, false)); + setChecked( + getChecked( + { + checked: props.checked, + defaultChecked: props.defaultChecked, + }, + false, + ), + ); }, [props.checked, props.defaultChecked]); if (groupContext?.type === 'button') { @@ -159,7 +147,7 @@ const Checkbox = forwardRef((props, ref) => { inputRef.current.click(); }} > - {props.children} + {children} ); @@ -193,14 +181,15 @@ const Checkbox = forwardRef((props, ref) => { ); } - const contentRender = props.render ? ( - props.render(currentProps) - ) : ( - <> - {iconRender} - {textRender} - - ); + const contentRender = + typeof props.children === 'function' ? ( + props.children(currentProps) + ) : ( + <> + {iconRender} + {textRender} + + ); return ( ); -}); +}; Checkbox.displayName = 'Checkbox'; From 40034dbbb405f1b994583bfea6e9c78df26fd39d Mon Sep 17 00:00:00 2001 From: Yang Date: Mon, 4 Dec 2023 18:01:54 +0800 Subject: [PATCH 05/10] 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 (