feat(ui/picker): add cascadeInitialIndexes prop (#489)

varletjs · Apr 22, 2022 · c6f10bd · c6f10bd
1 parent 62dd3ee
commit c6f10bd
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 7 deletions.
diff --git a/packages/varlet-ui/src/picker/Picker.vue b/packages/varlet-ui/src/picker/Picker.vue
@@ -261,28 +261,30 @@ export default defineComponent({
           scrollEl: null,
           scrolling: false,
         }
-        scrollTo(scrollColumn, scrollColumn.index, 200)
+        scrollTo(scrollColumn, scrollColumn.index, 0, true)
         return scrollColumn
       })
     }
 
     const normalizeCascadeColumns = (cascadeColumns: CascadeColumn[]) => {
       const scrollColumns: ScrollColumn[] = []
 
-      createChildren(scrollColumns, cascadeColumns)
+      createChildren(scrollColumns, cascadeColumns, true)
 
       return scrollColumns
     }
 
-    const createChildren = (scrollColumns: ScrollColumn[], children: CascadeColumn[]) => {
+    const createChildren = (scrollColumns: ScrollColumn[], children: CascadeColumn[], initial = false) => {
       if (isArray(children) && children.length) {
+        const index = initial ? props.cascadeInitialIndexes[scrollColumns.length] ?? 0 : 0
+
         const scrollColumn: ScrollColumn = {
           id: sid++,
           prevY: undefined,
           momentumPrevY: undefined,
           touching: false,
           translate: center.value,
-          index: 0,
+          index,
           duration: 0,
           momentumTime: 0,
           column: {
@@ -294,7 +296,8 @@ export default defineComponent({
         }
 
         scrollColumns.push(scrollColumn)
-        createChildren(scrollColumns, (scrollColumn.columns as CascadeColumn[])[scrollColumn.index].children)
+        scrollTo(scrollColumn, scrollColumn.index, 0, true)
+        createChildren(scrollColumns, (scrollColumn.columns as CascadeColumn[])[scrollColumn.index].children, initial)
       }
     }
 

diff --git a/packages/varlet-ui/src/picker/__tests__/__snapshots__/component.spec.js.snap b/packages/varlet-ui/src/picker/__tests__/__snapshots__/component.spec.js.snap
@@ -1,5 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`test cascade initial indexes 1`] = `
+"<transition-stub>
+  <div class=\\"var-picker\\">
+    <div class=\\"var-picker__toolbar\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-picker__cancel-button\\" var-picker-cover=\\"\\">
+        <!--v-if-->
+        <div class=\\"var-button__content\\">取消</div>
+      </button>
+      <div class=\\"var-picker__title\\">请选择</div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-picker__confirm-button\\" var-picker-cover=\\"\\">
+        <!--v-if-->
+        <div class=\\"var-button__content\\">确认</div>
+      </button>
+    </div>
+    <div class=\\"var-picker__columns\\" style=\\"height: 264px;\\">
+      <div class=\\"var-picker__column\\">
+        <div class=\\"var-picker__scroller\\" style=\\"transform: translateY(66px); transition-duration: 0ms; transition-property: none;\\">
+          <div class=\\"var-picker__option\\" style=\\"height: 44px;\\">
+            <div class=\\"var-picker__text\\">成都市</div>
+          </div>
+          <div class=\\"var-picker__option\\" style=\\"height: 44px;\\">
+            <div class=\\"var-picker__text\\">无锡市</div>
+          </div>
+        </div>
+      </div>
+      <div class=\\"var-picker__column\\">
+        <div class=\\"var-picker__scroller\\" style=\\"transform: translateY(110px); transition-duration: 0ms; transition-property: none;\\">
+          <div class=\\"var-picker__option\\" style=\\"height: 44px;\\">
+            <div class=\\"var-picker__text\\">新吴区</div>
+          </div>
+          <div class=\\"var-picker__option\\" style=\\"height: 44px;\\">
+            <div class=\\"var-picker__text\\">惠山区</div>
+          </div>
+        </div>
+      </div>
+      <div class=\\"var-picker__picked\\" style=\\"top: 110px; height: 44px;\\"></div>
+      <div class=\\"var-picker__mask\\" style=\\"background-size: 100% 110px;\\"></div>
+    </div>
+  </div>
+</transition-stub>"
+`;
+
 exports[`test cascade mode 1`] = `
 "<transition-stub>
   <div class=\\"var-picker\\">
@@ -54,7 +94,7 @@ exports[`test scroll down & onCancel 1`] = `
     </div>
     <div class=\\"var-picker__columns\\" style=\\"height: 264px;\\">
       <div class=\\"var-picker__column\\">
-        <div class=\\"var-picker__scroller\\" style=\\"transform: translateY(110px); transition-duration: 200ms; transition-property: transform;\\">
+        <div class=\\"var-picker__scroller\\" style=\\"transform: translateY(110px); transition-duration: 0ms; transition-property: none;\\">
           <div class=\\"var-picker__option\\" style=\\"height: 44px;\\">
             <div class=\\"var-picker__text\\">A</div>
           </div>
@@ -120,7 +160,7 @@ exports[`test scroll up & onConfirm 1`] = `
     </div>
     <div class=\\"var-picker__columns\\" style=\\"height: 264px;\\">
       <div class=\\"var-picker__column\\">
-        <div class=\\"var-picker__scroller\\" style=\\"transform: translateY(110px); transition-duration: 200ms; transition-property: transform;\\">
+        <div class=\\"var-picker__scroller\\" style=\\"transform: translateY(110px); transition-duration: 0ms; transition-property: none;\\">
           <div class=\\"var-picker__option\\" style=\\"height: 44px;\\">
             <div class=\\"var-picker__text\\">A</div>
           </div>

diff --git a/packages/varlet-ui/src/picker/__tests__/component.spec.js b/packages/varlet-ui/src/picker/__tests__/component.spec.js
@@ -144,3 +144,50 @@ test('test cascade mode', async () => {
   mockRestore()
   wrapper.unmount()
 })
+
+test('test cascade initial indexes', async () => {
+  const onConfirm = jest.fn()
+  const onCancel = jest.fn()
+
+  const wrapper = mount(VarPicker, {
+    props: {
+      cascade: true,
+      cascadeInitialIndexes: [1, 0],
+      columns: [
+        {
+          text: '成都市',
+          children: [
+            {
+              text: '温江区',
+            },
+            {
+              text: '金牛区',
+            },
+          ],
+        },
+        {
+          text: '无锡市',
+          children: [
+            {
+              text: '新吴区',
+            },
+            {
+              text: '惠山区',
+            },
+          ],
+        },
+      ],
+      onConfirm,
+      onCancel,
+    },
+  })
+
+  wrapper.vm.confirm()
+  wrapper.vm.cancel()
+
+  expect(onCancel).lastCalledWith(['无锡市', '新吴区'], [1, 0])
+  expect(onConfirm).lastCalledWith(['无锡市', '新吴区'], [1, 0])
+
+  expect(wrapper.html()).toMatchSnapshot()
+  wrapper.unmount()
+})
diff --git a/packages/varlet-ui/src/picker/docs/en-US.md b/packages/varlet-ui/src/picker/docs/en-US.md
@@ -131,6 +131,7 @@ const columns = ref(area)
 | `text-key` | The attribute key of the text | _string_ | `text` |
 | `toolbar` | Whether to display the top toolbar | _string_ | `true` |
 | `cascade` | Whether to enable cascading mode | _boolean_ | `true` |
+| `cascade-initial-indexes` | List of initialization indices for cascade mode | _number[]_ | `-` |
 | `option-height` | Option height(px rem) | _string \| number_ | `44` |
 | `option-count` | Number of options visible | _string \| number_ | `6` |
 | `confirm-button-text` | Confirm button text | _string_ | `Confirm` |
@@ -147,6 +148,7 @@ const columns = ref(area)
 | `textKey` | The attribute key of the text | _string_ | `text` |
 | `toolbar` | Whether to display the top toolbar | _string_ | `true` |
 | `cascade` | Whether to enable cascading mode | _boolean_ | `true` |
+| `cascadeInitialIndexes` | List of initialization indices for cascade mode | _number[]_ | `-` |
 | `optionHeight` | Option height | _string \| number_ | `44` |
 | `optionCount` | Number of options visible | _string \| number_ | `6` |
 | `confirmButtonText` | Confirm button text | _string_ | `Confirm` |

diff --git a/packages/varlet-ui/src/picker/docs/zh-CN.md b/packages/varlet-ui/src/picker/docs/zh-CN.md
@@ -131,6 +131,7 @@ const columns = ref(area)
 | `text-key` | 文本的属性 key | _string_ | `text` |
 | `toolbar` | 是否显示上方工具栏 | _string_ | `true` |
 | `cascade` | 是否开启级联模式 | _boolean_ | `true` |
+| `cascade-initial-indexes` | 级联模式的初始化索引列表 | _number[]_ | `-` |
 | `option-height` | 选项的高度(px rem) | _string \| number_ | `44` |
 | `option-count` | 可见的选项个数 | _string \| number_ | `6` |
 | `confirm-button-text` | 确认按钮文字 | _string_ | `确认` |
@@ -147,6 +148,7 @@ const columns = ref(area)
 | `textKey` | 文本的属性 key | _string_ | `text` |
 | `toolbar` | 是否显示上方工具栏 | _string_ | `true` |
 | `cascade` | 是否开启级联模式 | _boolean_ | `true` |
+| `cascadeInitialIndexes` | 级联模式的初始化索引列表 | _number[]_ | `-` |
 | `optionHeight` | 选项的高度 | _string \| number_ | `44` |
 | `optionCount` | 可见的选项个数 | _string \| number_ | `6` |
 | `confirmButtonText` | 确认按钮文字 | _string_ | `确认` |

diff --git a/packages/varlet-ui/src/picker/index.ts b/packages/varlet-ui/src/picker/index.ts
@@ -14,6 +14,7 @@ interface PickerOptions {
   textKey?: string
   toolbar?: boolean
   cascade?: boolean
+  cascadeInitialIndexes?: number[]
   optionHeight?: number | string
   optionCount?: number | string
   confirmButtonText?: string

diff --git a/packages/varlet-ui/src/picker/props.ts b/packages/varlet-ui/src/picker/props.ts
@@ -33,6 +33,10 @@ export const props = {
     type: Boolean,
     default: false,
   },
+  cascadeInitialIndexes: {
+    type: Array as PropType<number[]>,
+    default: () => [],
+  },
   optionHeight: {
     type: [Number, String],
     default: 44,

diff --git a/packages/varlet-ui/types/picker.d.ts b/packages/varlet-ui/types/picker.d.ts
@@ -19,6 +19,7 @@ export interface PickerProps {
   textKey?: string
   toolbar?: boolean
   cascade?: boolean
+  cascadeInitialIndexes: number[]
   optionHeight?: string | number
   optionCount?: string | number
   confirmButtonText?: string
@@ -52,6 +53,7 @@ export interface PickerOptions {
   textKey?: string
   toolbar?: boolean
   cascade?: boolean
+  cascadeInitialIndexes?: number[]
   optionHeight?: number | string
   optionCount?: number | string
   confirmButtonText?: string