From 3cce14f860819bf53da3d5545ec77d866bbfa74a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Wed, 6 Mar 2024 15:32:41 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20picker=E7=BB=84=E4=BB=B6=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E8=87=AA=E5=AE=9A=E4=B9=89=E8=BF=9E=E6=8E=A5=E7=AC=A6?= =?UTF-8?q?=EF=BC=88=E9=BB=98=E8=AE=A4=E6=98=AF,=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/warm-eyes-kiss.md | 5 +++++ .../react-native-picker/src/picker-input/index.tsx | 5 +++++ .../react-native-picker/src/picker-item/index.tsx | 5 +++++ packages/react-native-picker/src/usePicker.ts | 13 ++++++++----- packages/react-native-picker/src/utils.ts | 7 ++++--- 5 files changed, 27 insertions(+), 8 deletions(-) create mode 100644 .changeset/warm-eyes-kiss.md diff --git a/.changeset/warm-eyes-kiss.md b/.changeset/warm-eyes-kiss.md new file mode 100644 index 0000000000..8519e5e1c9 --- /dev/null +++ b/.changeset/warm-eyes-kiss.md @@ -0,0 +1,5 @@ +--- +'@td-design/react-native-picker': patch +--- + +feat: picker组件支持自定义连接符（默认是,） diff --git a/packages/react-native-picker/src/picker-input/index.tsx b/packages/react-native-picker/src/picker-input/index.tsx index fd8885fd68..82b852a8b0 100644 --- a/packages/react-native-picker/src/picker-input/index.tsx +++ b/packages/react-native-picker/src/picker-input/index.tsx @@ -27,7 +27,10 @@ interface PickerInputProps extends PickerProps, Omit; + /** 自定义高度 */ itemHeight?: number; + /** 连接符 */ + hyphen?: string; } const { ONE_PIXEL } = helpers; @@ -48,6 +51,7 @@ const PickerInput = forwardRef( allowClear = true, disabled = false, itemHeight, + hyphen = ',', activeOpacity = 0.6, ...restProps }, @@ -60,6 +64,7 @@ const PickerInput = forwardRef( value, onChange, placeholder, + hyphen, ref, }); diff --git a/packages/react-native-picker/src/picker-item/index.tsx b/packages/react-native-picker/src/picker-item/index.tsx index e1cc0aa7bd..b0cbbb7fb5 100644 --- a/packages/react-native-picker/src/picker-item/index.tsx +++ b/packages/react-native-picker/src/picker-item/index.tsx @@ -17,7 +17,10 @@ interface PickerItemProps extends PickerProps, Omit; + /** 是否在表单里 */ inForm?: boolean; + /** 连接符 */ + hyphen?: string; } const PickerItem = forwardRef( @@ -31,6 +34,7 @@ const PickerItem = forwardRef( onChange, style, allowClear = true, + hyphen = ',', activeOpacity = 0.6, inForm, ...restProps @@ -44,6 +48,7 @@ const PickerItem = forwardRef( value, onChange, placeholder, + hyphen, ref, }); diff --git a/packages/react-native-picker/src/usePicker.ts b/packages/react-native-picker/src/usePicker.ts index 9b60ce5845..7a0dba726f 100644 --- a/packages/react-native-picker/src/usePicker.ts +++ b/packages/react-native-picker/src/usePicker.ts @@ -12,10 +12,11 @@ function getText( data: CascadePickerItemProps[] | CascadePickerItemProps[][], value?: ItemValue[], cascade?: boolean, - placeholder?: string + placeholder?: string, + hyphen?: string ) { if (value) { - return transformValueToLabel(data, value, cascade) || placeholder; + return transformValueToLabel(data, value, cascade, hyphen) || placeholder; } return placeholder; } @@ -26,13 +27,15 @@ export default function usePicker({ value, onChange, placeholder = '请选择', + hyphen, ref, }: Pick & { placeholder?: string; + hyphen?: string; ref: ForwardedRef; }) { const [state, setState] = useSafeState(value); - const [currentText, setCurrentText] = useSafeState(getText(data, value, cascade, placeholder)); + const [currentText, setCurrentText] = useSafeState(getText(data, value, cascade, placeholder, hyphen)); const [visible, { setTrue, setFalse }] = useBoolean(false); useImperativeHandle(ref, () => { @@ -44,7 +47,7 @@ export default function usePicker({ }); useEffect(() => { - const text = getText(data, value, cascade, placeholder); + const text = getText(data, value, cascade, placeholder, hyphen); setCurrentText(text); setState(value); }, [value]); @@ -55,7 +58,7 @@ export default function usePicker({ }; const handleChange = (value?: ItemValue[]) => { - const text = getText(data, value, cascade, placeholder); + const text = getText(data, value, cascade, placeholder, hyphen); setCurrentText(text); setState(value); diff --git a/packages/react-native-picker/src/utils.ts b/packages/react-native-picker/src/utils.ts index b6de3d381e..a1b59dd905 100644 --- a/packages/react-native-picker/src/utils.ts +++ b/packages/react-native-picker/src/utils.ts @@ -10,7 +10,8 @@ import { CascadePickerItemProps, ItemValue } from './components/WheelPicker/type export function transformValueToLabel( data: CascadePickerItemProps[] | Array, value?: ItemValue[], - cascade?: boolean + cascade?: boolean, + hyphen?: string ) { if (!value || value.length === 0) return undefined; if (!cascade) { @@ -19,14 +20,14 @@ export function transformValueToLabel( value.forEach((val, index) => { const label = (data[index] as CascadePickerItemProps[]).find(item => item.value + '' === val + '')?.label; if (label) { - text += label + ','; + text += label + hyphen; } }); return text.substring(0, text.length - 1); } return (data as CascadePickerItemProps[]).find(item => item.value + '' === value[0] + '')?.label; } - return value.map(val => findByValue(data as CascadePickerItemProps[], val)?.label).join(','); + return value.map(val => findByValue(data as CascadePickerItemProps[], val)?.label).join(hyphen); } /** From cfad6ff730aba9164d5bf30213856e5f1f0ef1ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=9D=B0?= Date: Wed, 6 Mar 2024 15:34:41 +0800 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=E8=A1=A5=E5=85=85=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native-picker/src/picker-input/index.md | 1 + packages/react-native-picker/src/picker-item/index.md | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react-native-picker/src/picker-input/index.md b/packages/react-native-picker/src/picker-input/index.md index ff93a93b8e..ceb79ae305 100644 --- a/packages/react-native-picker/src/picker-input/index.md +++ b/packages/react-native-picker/src/picker-input/index.md @@ -36,6 +36,7 @@ group: | data | `true` | 选择项数据 | `CascadePickerItemProps[]` \| `Array` | `[]` | | cascade | `false` | 是否级联选择 | `boolean` | `false` | | cols | `false` | 选择列数量 | `number` | `3` | +| hyphen | `false` | 连接符 | `number` | `,` | | value | `false` | 选中的值 | `ItemValue[]` | | | onChange | `false` | 选择回调 | `(value?: ItemValue[]) => void` | | | title | `false` | 选择器标题 | `string` | | diff --git a/packages/react-native-picker/src/picker-item/index.md b/packages/react-native-picker/src/picker-item/index.md index 749e289fa7..ad155830ea 100644 --- a/packages/react-native-picker/src/picker-item/index.md +++ b/packages/react-native-picker/src/picker-item/index.md @@ -57,6 +57,7 @@ group: | data | `true` | 选择项数据 | `CascadePickerItemProps[]` \| `Array` | `[]` | | cascade | `false` | 是否级联选择 | `boolean` | `false` | | cols | `false` | 选择列数量 | `number` | `3` | +| hyphen | `false` | 连接符 | `number` | `,` | | value | `false` | 选中的值 | `ItemValue[]` | | | onChange | `false` | 选择回调 | `(value?: ItemValue[]) => void` | | | title | `false` | 选择器标题 | `string` | |