refactor(picker): 删除3D环绕效果

migrate-from-v2.md

@@ -441,13 +441,7 @@ plugins: [
 
 #### Picker
 
-- `isVisible` 重命名为 `visible`
-- `listData` 重命名为 `options`
-- `defaultValueData` 重命名为 `defaultValue`
-- 增加受控 `value`
-- `swipeDuration` 重命名为 `duration`
-- `onCloseUpdate` 重命名为 `afterClose`
-- 方法 `onConfirm`、`onClose`、`afterClose`、`onChange`的参数进行了调整，从`(selectedValue, selectedOptions)` 改为 `(selectedOptions, selectedValue)`。
+- 废弃 3D 动效
 
 #### Radio
 

src/packages/datepicker/__test__/datepicker.spec.tsx

@@ -12,7 +12,6 @@ test('Show Chinese', async () => {
       visible
       defaultValue={new Date(currentYear - 10, 0, 1)}
       showChinese
-      threeDimensional={false}
       onConfirm={(options) => confirm(options)}
     />
   )
@@ -35,7 +34,6 @@ test('Min date & Max date', async () => {
       defaultValue={new Date(2022, 0, 1)}
       startDate={new Date(2020, 0, 1)}
       endDate={new Date(2022, 0, 1)}
-      threeDimensional={false}
       onConfirm={confirm}
     />
   )
@@ -55,7 +53,6 @@ test('Min date & Max date', async () => {
       defaultValue={new Date(2022, 0, 1)}
       startDate={new Date(2020, 0, 1)}
       endDate={new Date(2022, 0, 1)}
-      threeDimensional={false}
       onConfirm={confirm}
     />
   )
@@ -67,7 +64,6 @@ test('Min date & Max date', async () => {
       defaultValue={new Date(2022, 0, 1)}
       startDate={new Date(2020, 0, 1)}
       endDate={new Date(2022, 0, 1)}
-      threeDimensional={false}
       onConfirm={confirm}
     />
   )
@@ -79,7 +75,6 @@ test('Min date & Max date', async () => {
       defaultValue={new Date(2022, 0, 1)}
       startDate={new Date(2020, 0, 1)}
       endDate={new Date(2022, 0, 1)}
-      threeDimensional={false}
       onConfirm={confirm}
     />
   )
@@ -91,7 +86,6 @@ test('Min date & Max date', async () => {
       defaultValue={new Date(2022, 0, 1)}
       startDate={new Date(2020, 0, 1)}
       endDate={new Date(2022, 0, 1)}
-      threeDimensional={false}
       onConfirm={confirm}
     />
   )
@@ -124,7 +118,6 @@ test('Min date & Max date', async () => {
       defaultValue={new Date(2022, 0, 1)}
       startDate={new Date(2020, 0, 1)}
       endDate={new Date(2022, 0, 1)}
-      threeDimensional={false}
       onConfirm={confirm}
       formatter={formatter}
     />
@@ -167,7 +160,7 @@ test('Increment step setting', async () => {
   )
 
   const columns = container.querySelectorAll('.nut-picker-list')[1]
-  const lists = columns.querySelectorAll('.nut-picker-roller-item')
+  const lists = columns.querySelectorAll('.nut-picker-roller-item-title')
   expect(lists.length).toBe(12)
 })
 
@@ -190,6 +183,6 @@ test('Filter Time', async () => {
   )
 
   const columns = container.querySelectorAll('.nut-picker-list')[3]
-  const lists = columns.querySelectorAll('.nut-picker-roller-item')
+  const lists = columns.querySelectorAll('.nut-picker-roller-item-title')
   expect(lists.length).toBe(4)
 })

src/packages/datepicker/datepicker.taro.tsx

@@ -24,12 +24,10 @@ export interface DatePickerProps extends BasicComponent {
   minuteStep: number
   startDate: Date
   endDate: Date
-  threeDimensional: boolean
   pickerProps: Partial<
     Omit<
       PickerProps,
       | 'defaultValue'
-      | 'threeDimensional'
       | 'title'
       | 'value'
       | 'onConfirm'
@@ -60,7 +58,6 @@ const defaultProps = {
   title: '',
   type: 'date',
   showChinese: false,
-  threeDimensional: true,
   minuteStep: 1,
   startDate: new Date(currentYear - 10, 0, 1),
   endDate: new Date(currentYear + 10, 11, 31),
@@ -86,7 +83,6 @@ export const DatePicker: FunctionComponent<
     onConfirm,
     filter,
     onChange,
-    threeDimensional,
     className,
     style,
     ...rest
@@ -420,7 +416,6 @@ export const DatePicker: FunctionComponent<
             value: (number | string)[],
             index: number
           ) => handlePickerChange(options, value, index)}
-          threeDimensional={threeDimensional}
         />
       )}
     </View>

src/packages/datepicker/datepicker.tsx

@@ -24,12 +24,10 @@ export interface DatePickerProps extends BasicComponent {
   minuteStep: number
   startDate: Date
   endDate: Date
-  threeDimensional: boolean
   pickerProps: Partial<
     Omit<
       PickerProps,
       | 'defaultValue'
-      | 'threeDimensional'
       | 'title'
       | 'value'
       | 'onConfirm'
@@ -60,7 +58,6 @@ const defaultProps = {
   title: '',
   type: 'date',
   showChinese: false,
-  threeDimensional: true,
   minuteStep: 1,
   startDate: new Date(currentYear - 10, 0, 1),
   endDate: new Date(currentYear + 10, 11, 31),
@@ -86,7 +83,6 @@ export const DatePicker: FunctionComponent<
     onConfirm,
     filter,
     onChange,
-    threeDimensional,
     className,
     style,
     ...rest
@@ -415,7 +411,6 @@ export const DatePicker: FunctionComponent<
             value: (number | string)[],
             index: number
           ) => handlePickerChange(options, value, index)}
-          threeDimensional={threeDimensional}
         />
       )}
     </div>

src/packages/datepicker/demos/h5/demo1.tsx

@@ -53,7 +53,6 @@ const Demo1 = () => {
         value={new Date(value)}
         showChinese
         onClose={() => setShow2(false)}
-        threeDimensional={false}
         onChange={(options, values) => change(options, values)}
       />
     </>

src/packages/datepicker/demos/taro/demo1.tsx

@@ -53,7 +53,6 @@ const Demo1 = () => {
         value={new Date(value)}
         showChinese
         onClose={() => setShow2(false)}
-        threeDimensional={false}
         onChange={(options, values) => change(options, values)}
       />
     </>

src/packages/datepicker/doc.en-US.md

@@ -90,7 +90,6 @@ import { DatePicker } from '@nutui/nutui'
 | pickerProps | picker props | `object` | `-` |
 | formatter | Option text formatter | `(type: string, option: PickerOption) => PickerOption` | `-` |
 | filter | Option filter | `(type: string, option: PickerOption) => PickerOption[]` | `-` |
-| threeDimensional | Turn on 3D effects | `boolean` | `true` |
 | onConfirm | Emitted when click confirm button. | `(options, value) => void` | `-` |
 | onCancel | Emitted when click cancel button. | `() => void` | `-` |
 | onClose | Emitted when click confirm and cancel button. | `(options, value) => void` | `-` |

src/packages/datepicker/doc.md

@@ -100,7 +100,6 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 | pickerProps | 透传picker属性 | `object` | `-` |
 | formatter | 选项格式化函数 | `(type: string, option: PickerOption) => PickerOption` | `-` |
 | filter | 选项过滤函数 | `(type: string, option: PickerOption) => PickerOption[]` | `-` |
-| threeDimensional | 是否开启3D效果 | `boolean` | `true` |
 | onConfirm | 点击确定按钮时触发 | `(options, value) => void` | `-` |
 | onCancel | 点击取消按钮时触发 | `() => void` | `-` |
 | onClose | 确定和取消时，都触发 | `(options, value) => void` | `-` |

src/packages/datepicker/doc.taro.md

@@ -100,7 +100,6 @@ DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type
 | formatter | 选项格式化函数 | `(type: string, option: PickerOption) => PickerOption` | `-` |
 | pickerProps | 透传picker属性 | `object` | `-` |
 | filter | 选项过滤函数 | `(type: string, option: PickerOption) => PickerOption[]` | `-` |
-| threeDimensional | 是否开启3D效果 | `boolean` | `true` |
 | onConfirm | 点击确定按钮时触发 | `(options, value) => void` | `-` |
 | onCancel | 点击取消按钮时触发 | `() => void` | `-` |
 | onClose | 确定和取消时，都触发 | `(options, value) => void` | `-` |

src/packages/datepicker/doc.zh-TW.md

@@ -100,7 +100,6 @@ DatetimePicker 通過 type 屬性來定義需要選擇的時間類型。將 type
 | formatter | 選項格式化函數 | `(type: string, option: PickerOption) => PickerOption` | `-` |
 | pickerProps | 透传 picker 屬性 | `object` | `-` |
 | filter | 選項過濾函數 | `(type: string, option: PickerOption) => PickerOption[]` | `-` |
-| threeDimensional | 是否開啟3D效果 | `boolean` | `true` |
 | onConfirm | 點擊確定按鈕時觸發 | `(options, value) => void` | `-` |
 | onCancel | 點擊取消按鈕時觸發 | `() => void` | `-` |
 | onClose | 確定和取消時，都觸發 | `(options, value) => void` | `-` |

src/packages/picker/demo.taro.tsx

@@ -7,7 +7,6 @@ import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
-import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
@@ -18,7 +17,6 @@ const PickerDemo = () => {
       basic: '基础用法',
       defaultSelected: '默认选中项',
       controlled: '受控',
-      tileDesc: '平铺展示',
       multipleColumns: '多列样式',
       cascade: '多级联动',
       async: '异步获取',
@@ -28,7 +26,6 @@ const PickerDemo = () => {
       basic: '基础用法',
       defaultSelected: '默認選中項',
       controlled: '受控',
-      tileDesc: '平鋪展示',
       multipleColumns: '多列樣式',
       cascade: '多級聯動',
       async: '異步獲取',
@@ -38,7 +35,6 @@ const PickerDemo = () => {
       basic: 'Basic Usage',
       defaultSelected: 'Default Index',
       controlled: 'Controlled',
-      tileDesc: 'Tile',
       multipleColumns: 'Multiple Columns',
       cascade: 'Cascade',
       async: 'Async',
@@ -58,8 +54,6 @@ const PickerDemo = () => {
         <Demo3 />
         <View className="h2">{translated.multipleColumns}</View>
         <Demo4 />
-        <View className="h2">{translated.tileDesc}</View>
-        <Demo5 />
         <View className="h2">{translated.cascade}</View>
         <Demo6 />
         <View className="h2">{translated.async}</View>

src/packages/picker/demo.tsx

@@ -4,7 +4,6 @@ import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
-import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
 import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
@@ -15,7 +14,6 @@ const PickerDemo = () => {
       basic: '基础用法',
       defaultSelected: '默认选中项',
       controlled: '受控',
-      tileDesc: '平铺展示',
       multipleColumns: '多列样式',
       cascade: '多级联动',
       async: '异步获取',
@@ -25,7 +23,6 @@ const PickerDemo = () => {
       basic: '基础用法',
       defaultSelected: '默認選中項',
       controlled: '受控',
-      tileDesc: '平鋪展示',
       multipleColumns: '多列樣式',
       cascade: '多級聯動',
       async: '異步獲取',
@@ -35,7 +32,6 @@ const PickerDemo = () => {
       basic: 'Basic Usage',
       defaultSelected: 'Default Index',
       controlled: 'Controlled',
-      tileDesc: 'Tile',
       multipleColumns: 'Multiple Columns',
       cascade: 'Cascade',
       async: 'Async',
@@ -54,8 +50,6 @@ const PickerDemo = () => {
         <Demo3 />
         <h2>{translated.multipleColumns}</h2>
         <Demo4 />
-        <h2>{translated.tileDesc}</h2>
-        <Demo5 />
         <h2>{translated.cascade}</h2>
         <Demo6 />
         <h2>{translated.async}</h2>

src/packages/picker/demos/h5/demo5.tsx

@@ -49,7 +49,6 @@ const Demo5 = () => {
         options={listData1}
         onConfirm={(list, values) => confirmPicker(list, values)}
         defaultValue={[2]}
-        threeDimensional={false}
         duration={1000}
         onClose={() => setIsVisible(false)}
       />

src/packages/picker/demos/taro/demo5.tsx

@@ -52,7 +52,6 @@ const Demo5 = () => {
         options={listData1}
         onConfirm={(list, values) => confirmPicker(list, values)}
         defaultValue={[2]}
-        threeDimensional={false}
         duration={1000}
         onClose={() => setIsVisible(false)}
         onChange={changePicker}

src/packages/picker/doc.en-US.md

@@ -42,16 +42,6 @@ import { Picker } from '@nutui/nutui-react'
 
 :::
 
-### Tile
-
-Cancel the 3D display effect by setting `threeDimensional`, and control the duration of fast scrolling by setting `duration`.
-
-:::demo
-
-<CodeBlock src='h5/demo5.tsx'></CodeBlock>
-
-:::
-
 ### Cascade
 
 :::demo
@@ -87,7 +77,6 @@ Cancel the 3D display effect by setting `threeDimensional`, and control the dura
 | options | Columns data | `Array` | `[]` |
 | value | Controlled Value | `Array` | `[]` |
 | defaultValue | Default Index | `Array` | `[]` |
-| threeDimensional | Turn on 3D effects | `boolean` | `true` |
 | duration | move animation duration, ms | `string` \| `number` | `1000` |
 | popupProps | popup props | `object` | `-` |
 | closeOnOverlayClick | Tap Mask off | `boolean` | `true` |

src/packages/picker/doc.md

@@ -42,16 +42,6 @@ import { Picker } from '@nutui/nutui-react'
 
 :::
 
-### 平铺展示
-
-通过设置 `threeDimensional` 取消 3D 展示效果，并且通过设置 `duration` 可以控制快速滚动的时长。
-
-:::demo
-
-<CodeBlock src='h5/demo5.tsx'></CodeBlock>
-
-:::
-
 ### 多级联动
 
 :::demo
@@ -87,7 +77,6 @@ import { Picker } from '@nutui/nutui-react'
 | options | 列表数据 | `Array` | `[]` |
 | value | 选中值，受控 | `Array` | `[]` |
 | defaultValue | 默认选中 | `Array` | `[]` |
-| threeDimensional | 是否开启3D效果 | `boolean` | `true` |
 | duration | 快速滑动时惯性滚动的时长，单位 ms | `string` \| `number` | `1000` |
 | popupProps | 透传popup属性 | `object` | `-` |
 | closeOnOverlayClick | 是否点击遮罩关闭 | `boolean` | `true` |

src/packages/picker/doc.taro.md

@@ -42,16 +42,6 @@ import { Picker } from '@nutui/nutui-react-taro'
 
 :::
 
-### 平铺展示
-
-通过设置 `threeDimensional` 取消 3D 展示效果，并且通过设置 `duration` 可以控制快速滚动的时长。
-
-:::demo
-
-<CodeBlock src='taro/demo5.tsx'></CodeBlock>
-
-:::
-
 ### 多级联动
 
 :::demo
@@ -87,7 +77,6 @@ import { Picker } from '@nutui/nutui-react-taro'
 | options | 列表数据 | `Array` | `[]` |
 | value | 选中值，受控 | `Array` | `[]` |
 | defaultValue | 默认选中 | `Array` | `[]` |
-| threeDimensional | 是否开启3D效果 | `boolean` | `true` |
 | duration | 快速滑动时惯性滚动的时长，单位 ms | `string` \| `number` | `1000` |
 | popupProps | 透传popup属性 | `object` | `-` |
 | closeOnOverlayClick | 是否点击遮罩关闭 | `boolean` | `true` |