Skip to content

Commit

Permalink
feat: update Picker component props types and events
Browse files Browse the repository at this point in the history
  • Loading branch information
@lusoftware @NeverEllipsis
lusoftware authored and NeverEllipsis committed Jan 13, 2025
1 parent df40e45 commit 7d29b64
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 63 deletions.
6 changes: 3 additions & 3 deletions packages/bui-core/src/Input/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,10 +231,10 @@ export default () => {
| endIcon | Input with icon, set the back icon. If clearable=true, both icons will be displayed | ReactNode | - |
| placeholder | Occupation Content | string | - |
| disabled | Do you want to disable it | boolean | false |
| onClear | Clicking on the clear icon callback will also clear the input box content in an uncontrolled state | (e: React.SyntheticEvent) => void | - |
| onClear | Clicking on the clear icon callback will also clear the input box content in an uncontrolled state | (e: React.MouseEvent<HTMLDivElement\>) => void | - |
| onChange | Callback when input box content changes | (e: React.ChangeEvent<HTMLInputElement\>,data: {value:string}) => void | - |
| onFocus | Callback during focusing | (e: React.SyntheticEvent) => void | - |
| onBlur | Callback when out of focus | (e: React.SyntheticEvent) => void | - |
| onFocus | Callback during focusing | (e: React.FocusEvent<HTMLInputElement\>) => void | - |
| onBlur | Callback when out of focus | (e: React.FocusEvent<HTMLInputElement\>) => void | - |

## Style variables

Expand Down
28 changes: 20 additions & 8 deletions packages/bui-core/src/Picker/Picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState, useCallback } from 'react';
import Drawer from '../Drawer';
import PickerPanel from './PickerPanel';
import { useLocaleText } from '../locales';
import { IPickerOptionItem, PickerProps } from './Picker.types';
import { PickerProps, ICascadePickerChildOptionItem } from './Picker.types';
import { formatOptions, pickerPanelType, safeData } from './utils';
import './Picker.less';

Expand Down Expand Up @@ -51,7 +51,7 @@ const Picker = React.forwardRef<HTMLDivElement, PickerProps>((props, ref) => {
}
}, [value, options]);

const confirm = (e) => {
const confirm = (e: React.MouseEvent<HTMLDivElement>) => {
const isMoving = rollerRefs.current.some((roller) => roller?.isMoving);
// 处于惯性滚动中，不允许确认关闭选择器
if (isMoving) return;
Expand All @@ -73,7 +73,7 @@ const Picker = React.forwardRef<HTMLDivElement, PickerProps>((props, ref) => {
});
};

const cancel = (e) => {
const cancel = (e: React.MouseEvent<HTMLDivElement>) => {
onCancel?.(e);
const { safeValue } = safeData({
value: internalValue,
Expand All @@ -90,7 +90,11 @@ const Picker = React.forwardRef<HTMLDivElement, PickerProps>((props, ref) => {
});
};

const updateItem = (e, columnOption, columnIndex) => {
const updateItem = (
e: React.TransitionEvent<HTMLDivElement>,
columnOption: ICascadePickerChildOptionItem,
columnIndex: number,
) => {
const columnValues = internalValue?.slice(0, columnIndex) || [];
let colIndex = columnIndex;
let colOption = columnOption;
Expand All @@ -102,7 +106,9 @@ const Picker = React.forwardRef<HTMLDivElement, PickerProps>((props, ref) => {
while (colOption?.children?.[0]) {
columnValues[colIndex + 1] = colOption.children[0].value;
colIndex += 1;
colOption = { ...(colOption?.children?.[0] || {}) };
colOption = {
...(colOption?.children?.[0] || {}),
} as ICascadePickerChildOptionItem;
}
// 当前改变列的下一列 children 值为空
if (colOption?.children?.length) {
Expand All @@ -127,18 +133,24 @@ const Picker = React.forwardRef<HTMLDivElement, PickerProps>((props, ref) => {
setInternalValue(result);
onOptionChange?.(e, {
value: result,
options: options as IPickerOptionItem[][],
options: options as ICascadePickerChildOptionItem[][],
currentOption: columnOption,
});
}
}
};

const handleSelect = (e, { columnIndex, columnOption }) => {
const handleSelect = (
e: React.TransitionEvent<HTMLDivElement>,
{
columnIndex,
columnOption,
}: { columnIndex: number; columnOption: ICascadePickerChildOptionItem },
) => {
updateItem(e, columnOption, columnIndex);
};

const handleClose = (e, data) => {
const handleClose = (e: React.MouseEvent<HTMLDivElement>, data) => {
const { safeValue } = safeData({
value: internalValue,
formatted: columns,
Expand Down
22 changes: 11 additions & 11 deletions packages/bui-core/src/Picker/Picker.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,36 +59,36 @@ export type PickerProps<
* 点击确认按钮时候回调
*/
onConfirm?: (
e: React.SyntheticEvent,
e: React.MouseEvent<HTMLDivElement>,
data: {
value: (string | number)[];
options: IPickerOptionItem[][];
options: ICascadePickerChildOptionItem[][];
},
) => void;
/**
* 选项值变更时的回调
*/
onOptionChange?: (
e: React.SyntheticEvent,
e: React.TransitionEvent<HTMLDivElement>,
data: {
value: (string | number)[];
options: IPickerOptionItem[][];
currentOption: ICascadePickerOptionItem;
options: ICascadePickerChildOptionItem[][];
currentOption: ICascadePickerChildOptionItem;
},
) => void;
/**
* 点击取消按钮时候回调
*/
onCancel?: (e: React.SyntheticEvent) => void;
onCancel?: (e: React.MouseEvent<HTMLDivElement>) => void;
/**
* 关闭选择器时执行
*/
onClose?: (
e: React.SyntheticEvent,
e: React.MouseEvent<HTMLDivElement>,
data: {
from: string;
value: (string | number)[];
options: IPickerOptionItem[][];
options: ICascadePickerChildOptionItem[][];
},
) => void;
};
Expand All @@ -107,7 +107,7 @@ export type PickerPanelProps<
* 单列面板的列表数据
* @default []
*/
options?: IPickerOptionItem[][] | ICascadePickerOptionItem[];
options?: ICascadePickerChildOptionItem[];
/**
* 默认值
*/
Expand All @@ -124,9 +124,9 @@ export type PickerPanelProps<
* 选择选项时的回调
*/
onSelect?: (
e: React.SyntheticEvent,
e: React.TransitionEvent<HTMLDivElement>,
data: {
columnOption: IPickerOptionItem[] | ICascadePickerOptionItem;
columnOption: ICascadePickerChildOptionItem;
columnIndex: number;
},
) => void;
Expand Down
2 changes: 1 addition & 1 deletion packages/bui-core/src/Picker/PickerPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ const PickerPanel = React.forwardRef<HTMLDivElement, PickerPanelProps>(
};
});

const onTransitionEnd = (e: React.SyntheticEvent) => {
const onTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>) => {
isVerticalMoving.current = false;
setTouchTime(0);
onSelect?.(e, {
Expand Down
52 changes: 30 additions & 22 deletions packages/bui-core/src/Picker/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1210,26 +1210,26 @@ export default () => {

### Picker

| attribute | explain | type | Default value |
| -------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| open | Do you want to display the selector | boolean | false |
| title | title | string | - |
| options | List data | IPickerOptionItem[][] \|ICascadePickerOptionItem[] | [] |
| value | Selected values | (string \|number)[] | - |
| contentProps | Props on drawer content DOM node | React.HTMLAttributes\<HTMLDivElement\> | - |
| onConfirm | Callback when clicking the confirm button | (e: React.SyntheticEvent,data: { value: (string \|number)[]; options: ICascadePickerOptionItem[]}) => void | - |
| onOptionChange | Callback when option value changes | (e: React.SyntheticEvent,data: { value: (string \|number)[];options: IPickerOptionItem[][] \|ICascadePickerOptionItem[];currentOption: ICascadePickerOptionItem}) => void | - |
| onCancel | Callback when clicking the cancel button | (e: React.SyntheticEvent) => void | - |
| onClose | Execute when closing the selector | (e: React.SyntheticEvent,data: {from: string;value: (string \|number)[];options: IPickerOptionItem[][] \|ICascadePickerOptionItem[]}) => void | - |
| attribute | explain | type | Default value |
| -------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| open | Do you want to display the selector | boolean | false |
| title | title | string | - |
| options | List data | IPickerOptionItem[][] \|ICascadePickerOptionItem[] | [] |
| value | Selected values | (string \|number)[] | - |
| contentProps | Props on drawer content DOM node | React.HTMLAttributes\<HTMLDivElement\> | - |
| onConfirm | Callback when clicking the confirm button | (e: React.MouseEvent<HTMLDivElement\>,data: { value: (string \|number)[]; options: ICascadePickerChildOptionItem[][]}) => void | - |
| onOptionChange | Callback when option value changes | (e: React.TransitionEvent<HTMLDivElement\>,data: { value: (string \|number)[];options: ICascadePickerChildOptionItem[][];currentOption: ICascadePickerChildOptionItem}) => void | - |
| onCancel | Callback when clicking the cancel button | (e: React.MouseEvent<HTMLDivElement\>) => void | - |
| onClose | Execute when closing the selector | (e: React.MouseEvent<HTMLDivElement\>,data: {from: string;value: (string \|number)[];options: ICascadePickerChildOptionItem[][]}) => void | - |

### PickerPanel

| attribute | explain | type | Default value |
| ------------ | --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------- |
| options | List data of a single column panel | IPickerOptionItem[][] \|ICascadePickerOptionItem[] | [] |
| defaultValue | Default values for single column panels | string \|number | - |
| columnIndex | Li Suo Yin | number | - |
| onSelect | Callback when clicking on an option | (e: React.SyntheticEvent,data: {columnOption: IPickerOptionItem[] \|ICascadePickerOptionItem;columnIndex: number}) => void | - |
| attribute | explain | type | Default value |
| ------------ | --------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------- |
| options | List data of a single column panel | ICascadePickerChildOptionItem[] | [] |
| defaultValue | Default values for single column panels | string \|number | - |
| columnIndex | Li Suo Yin | number | - |
| onSelect | Callback when clicking on an option | (e: React.TransitionEvent<HTMLDivElement\>,data: {columnOption: ICascadePickerChildOptionItem;columnIndex: number}) => void | - |

#### IPickerOptionItem

Expand All @@ -1240,11 +1240,19 @@ export default () => {

#### ICascadePickerOptionItem

| attribute | explain | type | Default value |
| --------- | ----------------------------------- | -------------------------- | ------------- |
| label | Text content of options | string \|number | - |
| value | Options correspond to unique values | string \|number | - |
| children | Used for cascading options | ICascadePickerOptionItem[] | - |
| attribute | explain | type | Default value |
| --------- | ------------------------------------ | -------------------------- | ------------- |
| label | Text content of options | string \|number | - |
| value | Options correspond to unique values | string \|number | - |
| children | Used for cascading options, required | ICascadePickerOptionItem[] | - |

#### ICascadePickerChildOptionItem

| attribute | explain | type | Default value |
| --------- | ---------------------------------------- | -------------------------- | ------------- |
| label | Text content of options | string \|number | - |
| value | Options correspond to unique values | string \|number | - |
| children | Used for cascading options, not required | ICascadePickerOptionItem[] | - |

Picker inherits from Drawer. Other properties can be found in the Drawer API (/ores/Drawer? # API)

Expand Down
Loading

0 comments on commit 7d29b64

Please sign in to comment.