RcGroup - 分组类元素

可以支持RadioGroup、CheckboxGroup、Tabs、Tag List等组件。 方便进行父子之间通信。

API

RcGroup

分组容器，处于同一个容器下的组件会被当成是一组，支持所有div元素支持的属性。

• 定义 function RcGroup<T, P>(props: IRcGroupProps<T, P>): React.ReactNode

• 类型

  • IRcGroupProps type IRcGroupProps<T, P> = UnionOmit<IGroupOptions<T, P>, HTMLAttributes<HTMLDivElement>>
  • IGroupOptions interface IGroupOptions<T, P> {disabled: boolean;extraProps: P;value: T[];onChange: (value: T[]) => void;}

• 泛型参数

  • T 表示分组中值可能为的类型
  • P 表示所有可以在容器和子项之间共享的属性，设置在P中的属性会进行容器和子项的合并（子项目高于容器）由于disabled影响行为，所以直接在IGroupOptions中做了定义

• 用法

1    import React, {useMemo, HTMLAttributes} from 'react'
2    import {ComponentSize, UnionOmit} from '@co-hooks/util'
3    import {RcGroup} from '@rc-hooks/group'
4
5    interface ICheckboxButtonGroupShareOptions {
6        size: ComponentSize; // 用于表示按钮大小
7        type: string; // 用于表示按钮类型
8    } 
9    
10    interface ICheckboxButtonGroup<T> extends Partial<ICheckboxButtonGroupShareOptions> {
11        value: T[]
12        onChange: (value: T[]) => void;
13        disabled?: boolean;
14    }
15     
16    type ICheckboxButtonGroupProps<T> = UnionOmit<ICheckboxButtonGroup<T>, HTMLAttributes<HTMLDivElement>>;
17
18    function CheckboxButtonGroup<T>(props: ICheckboxButtonGroupProps<T>) {
19        
20        const {
21            value,
22            type = 'default',
23            size = 'md',
24            disabled = false,
25            onChange,
26            ...others
27        } = props;
28        
29        const extraProps = useMemo(() => ({size, type}), [size, type]);
30        
31        return (
32            <RcGroup<T, ICheckboxButtonGroupShareOptions>
33                {...others}
34                value={value}
35                onChange={onChange}
36                disabled={disabled}
37                extraProps={extraProps}
38            />
39        )
40    }

由于要支持单选、多选、混选等多种情况，所有数值都以数组的形式提供，如须单值，可以如下自行封装相关属性

1    
2    import {useCallback} from 'react'
3    
4    
5    function RadioGroup<T>(props:{onChange: (value: T | null) => void}) {
6    
7         const onChange = useCallback((value: T[]) => {
8              props.onChange(value.length ? value[0]: null);
9          }, [props.onChange])
10    }

• 参考
  • UnionOmit
  • ComponentSize

useGroupItem

分组子项使用的钩子，可以用于获取子项目使用到的信息。

• 定义 function useGroupItem<T, P>(props: IGroupItemOptions<T, P>): IGroupItemRenderProps<T, P>
• 类型
  • IGroupItemRenderProps type IGroupItemRenderProps<T, P> = [UnionOmit<{checked: boolean; disabled: boolean}, P>, (checked: boolean) => void ]
  • IGroupItemOptions interface IGroupItemOptions<T, P> {disabled: boolean; extraProps: Partial<P>; group: string; free: boolean; value: T}
• 泛型参数
  • T 表示分组中值可能为的类型
  • P 表示所有可以在容器和子项之间共享的属性，设置在P中的属性会进行容器和子项的合并（子项目高于容器）由于disabled影响行为，所以直接在IGroupOptions中做了定义
• 用法

1    import React, {ButtonHTMLAttributes, useCallback, MouseEventHandler} from 'react'
2    import {ComponentSize, UnionOmit} from '@co-hooks/util'
3    import {useGroupItem} from '@rc-hooks/group'
4
5    interface ICheckboxButtonGroupShareOptions {
6        size: ComponentSize; // 用于表示按钮大小
7        type: string; // 用于表示按钮类型
8    } 
9    
10    interface ICheckboxButton<T> extends Partial<ICheckboxButtonGroupShareOptions> {
11        value: T[]
12        disabled?: boolean;
13    }
14     
15    type ICheckboxButtonProps<T> = UnionOmit<ICheckboxButton<T>, ButtonHTMLAttributes<HTMLButtonElement>>;
16
17    function CheckboxButton<T>(props: ICheckboxButtonProps<T>) {
18        
19        const {
20            value,
21            type, 
22            size,
23            disabled = false,
24            onClick, // Button没有onChange事件，用onClick来模拟
25            ...others
26        } = props;
27        
28        const [group, onItemChange] = useGroupItem<T, ICheckboxButtonGroupShareOptions>({
29            disabled,
30            value,
31            group: 'checkbox', // 所有的项目都在一个分组，用同一个就可以了
32            free: false,
33            // 这里有个partial可以传递部分属性
34            extraProps:{
35                size, 
36                type
37            }
38        });
39        
40        // 省略了type size等样式处理函数，也可以单独封装一个组件来处理
41        
42        const onButtonClick = useCallback((e: MouseEventHandler<HTMLButtonElement>) => {
43            
44            if(onClick) {
45                onClick(e);
46            }
47            
48            // 对于checkbox来说，点一下翻转
49            onItemChange(!group.checked);
50        }, [onClick, onItemChange, group.checked]);
51        
52        return (
53            <button {...others} onClick={onButtonClick}/>
54        )
55    }

• 参考
  • UnionOmit
  • ComponentSize