RcGroup - 分组类元素

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

API

RcGroup

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

* 定义 function RcGroup(props: IRcGroupProps): React.ReactNode
* 类型
- IRcGroupProps type IRcGroupProps = UnionOmit, HTMLAttributes>
- IGroupOptions interface IGroupOptions {disabled: boolean;extraProps: P;value: T[];onChange: (value: T[]) => void;}
* 泛型参数
- T 表示分组中值可能为的类型
- P 表示所有可以在容器和子项之间共享的属性，设置在P中的属性会进行容器和子项的合并（子项目高于容器）由于disabled影响行为，所以直接在IGroupOptions中做了定义

* 用法

``typescript jsx
import React, {useMemo, HTMLAttributes} from 'react'
import {ComponentSize, UnionOmit} from '@co-hooks/util'
import {RcGroup} from '@rc-hooks/group'

interface ICheckboxButtonGroupShareOptions {
size: ComponentSize; // 用于表示按钮大小
type: string; // 用于表示按钮类型
}

interface ICheckboxButtonGroup extends Partial {
value: T[]
onChange: (value: T[]) => void;
disabled?: boolean;
}

type ICheckboxButtonGroupProps = UnionOmit, HTMLAttributes>;

function CheckboxButtonGroup(props: ICheckboxButtonGroupProps) {

const {
value,
type = 'default',
size = 'md',
disabled = false,
onChange,
...others
} = props;

const extraProps = useMemo(() => ({size, type}), [size, type]);

return (

{...others}
value={value}
onChange={onChange}
disabled={disabled}
extraProps={extraProps}
/>
)
}
`
由于要支持单选、多选、混选等多种情况，所有数值都以数组的形式提供，如须单值，可以如下自行封装相关属性
`typescript jsx

import {useCallback} from 'react'


function RadioGroup(props:{onChange: (value: T | null) => void}) {

const onChange = useCallback((value: T[]) => {
props.onChange(value.length ? value[0]: null);
}, [props.onChange])
}
`

* 参考
- UnionOmit
- ComponentSize

useGroupItem


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

* 定义 function useGroupItem(props: IGroupItemOptions): IGroupItemRenderProps
* 类型
- IGroupItemRenderProps type IGroupItemRenderProps = [UnionOmit<{checked: boolean; disabled: boolean}, P>, (checked: boolean) => void ]
- IGroupItemOptions interface IGroupItemOptions {disabled: boolean; extraProps: Partial

; group: string; free: boolean; value: T}
* 泛型参数
- T 表示分组中值可能为的类型
- P 表示所有可以在容器和子项之间共享的属性，设置在P中的属性会进行容器和子项的合并（子项目高于容器）由于disabled影响行为，所以直接在IGroupOptions中做了定义
* 用法
`typescript jsx
import React, {ButtonHTMLAttributes, useCallback, MouseEventHandler} from 'react'
import {ComponentSize, UnionOmit} from '@co-hooks/util'
import {useGroupItem} from '@rc-hooks/group'

interface ICheckboxButtonGroupShareOptions {
size: ComponentSize; // 用于表示按钮大小
type: string; // 用于表示按钮类型
}

interface ICheckboxButton extends Partial {
value: T[]
disabled?: boolean;
}

type ICheckboxButtonProps = UnionOmit, ButtonHTMLAttributes>;

function CheckboxButton(props: ICheckboxButtonProps) {

const {
value,
type,
size,
disabled = false,
onClick, // Button没有onChange事件，用onClick来模拟
...others
} = props;

const [group, onItemChange] = useGroupItem({
disabled,
value,
group: 'checkbox', // 所有的项目都在一个分组，用同一个就可以了
free: false,
// 这里有个partial可以传递部分属性
extraProps:{
size,
type
}
});

// 省略了type size等样式处理函数，也可以单独封装一个组件来处理

const onButtonClick = useCallback((e: MouseEventHandler) => {

if(onClick) {
onClick(e);
}

// 对于checkbox来说，点一下翻转
onItemChange(!group.checked);
}, [onClick, onItemChange, group.checked]);

return (

)
}
``

* 参考
- UnionOmit
- ComponentSize