feat(ui/picker): add textFormatter in picker (#58)

* test: steps test

* test: swipe test

* test: list test

* test: dialog test

* test: pagination test

* feat(ui/picker): add textFormatter in picker

Co-authored-by: davion <[email protected]>

Author: wangKBweb

packages/varlet-vue2-ui/src/picker/Picker.vue

@@ -68,7 +68,7 @@
               v-for="t in c.column.texts"
               :key="t"
             >
-              <div class="var-picker__text">{{ t }}</div>
+              <div class="var-picker__text">{{ textFormatter(t, c.columnIndex) }}</div>
             </div>
           </div>
         </div>
@@ -140,7 +140,7 @@
               v-for="t in c.column.texts"
               :key="t"
             >
-              <div class="var-picker__text">{{ t }}</div>
+              <div class="var-picker__text">{{ textFormatter(t, c.columnIndex) }}</div>
             </div>
           </div>
         </div>
@@ -369,7 +369,7 @@ export default defineComponent({
     },
 
     normalizeNormalColumns(normalColumns) {
-      return normalColumns.map((column) => {
+      return normalColumns.map((column, columnIndex) => {
         const normalColumn = isArray(column) ? { texts: column } : column
         const scrollColumn = {
           id: sid++,
@@ -378,6 +378,7 @@ export default defineComponent({
           touching: false,
           translate: this.center,
           index: normalColumn.initialIndex ?? 0,
+          columnIndex,
           duration: 0,
           momentumTime: 0,
           column: normalColumn,
@@ -392,12 +393,12 @@ export default defineComponent({
     normalizeCascadeColumns(cascadeColumns) {
       const scrollColumns = []
 
-      this.createChildren(scrollColumns, cascadeColumns)
+      this.createChildren(scrollColumns, cascadeColumns, 0)
 
       return scrollColumns
     },
 
-    createChildren(scrollColumns, children) {
+    createChildren(scrollColumns, children, columnIndex) {
       if (isArray(children) && children.length) {
         const scrollColumn = {
           id: sid++,
@@ -406,6 +407,7 @@ export default defineComponent({
           touching: false,
           translate: this.center,
           index: 0,
+          columnIndex,
           duration: 0,
           momentumTime: 0,
           column: {
@@ -417,13 +419,17 @@ export default defineComponent({
         }
 
         scrollColumns.push(scrollColumn)
-        this.createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children)
+        this.createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children, columnIndex + 1)
       }
     },
 
     rebuildChildren(scrollColumn) {
       this.scrollColumns.splice(this.scrollColumns.indexOf(scrollColumn) + 1)
-      this.createChildren(this.scrollColumns, scrollColumn.columns[scrollColumn.index].children)
+      this.createChildren(
+        this.scrollColumns,
+        scrollColumn.columns[scrollColumn.index].children,
+        scrollColumn.columnIndex + 1
+      )
     },
 
     change(scrollColumn) {

packages/varlet-vue2-ui/src/picker/__tests__/__snapshots__/component.spec.js.snap

@@ -159,3 +159,21 @@ test('test cascade mode', async () => {
   mockRestore()
   wrapper.destroy()
 })
+
+test('test picker component textFormatter', async () => {
+  const textFormatter = jest.fn().mockReturnValue('text')
+  const columns = [['A']]
+
+  const wrapper = mount(VarPicker, {
+    propsData: {
+      columns,
+      textFormatter,
+    },
+  })
+
+  const pickerText = wrapper.find('.var-picker__text')
+
+  expect(pickerText.text()).toBe('text')
+
+  wrapper.destroy()
+})

packages/varlet-vue2-ui/src/picker/__tests__/component.spec.js

@@ -73,3 +73,27 @@ test('test picker functional cancel', async () => {
   await delay(16)
   await delay(300)
 })
+
+test('test picker functional textFormatter', async () => {
+  const textFormatter = jest.fn().mockReturnValue('text')
+  const onCancel = jest.fn()
+
+  const columns = [['A']]
+
+  Picker({
+    columns,
+    textFormatter,
+    onCancel,
+  })
+
+  await delay(16)
+  await delay(300)
+
+  await trigger(document.querySelector('.var-picker__cancel-button'), 'click')
+
+  expect(textFormatter).toHaveBeenLastCalledWith('A', 0)
+  expect(document.querySelector('.var-picker__text').innerHTML).toBe('text')
+
+  await delay(16)
+  await delay(300)
+})

packages/varlet-vue2-ui/src/picker/__tests__/index.spec.js

@@ -54,6 +54,117 @@ const { state, texts, indexes } = await Picker({
 })
 ```
 
+### Text Formatter
+
+Picker passes in a `textFormatter` attribute to customize the text.
+`textFormatter` accepts two parameters. The first parameter `text` is the current text, and the second parameter
+`columnIndex` is the subscript of the column where the current text is located.
+The following is the case of year month day selection
+
+```js
+import { Picker } from '@varlet-vue2/ui'
+
+const genCounts = length => Array.from({ length }, (_, index) => index + 1)
+
+const months = genCounts(12)
+const leapYearFebruaryDates = genCounts(29)
+const februaryDates = genCounts(28)
+const oddMonthDates = genCounts(31)
+const evenMonthDates = genCounts(30)
+
+const isOddMonth = month => [1, 3, 5, 7, 8, 10, 12].includes(month)
+
+const isLeapYear = year => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+
+const genDates = (year, month) => {
+  if (isLeapYear(year) && month === 2) {
+    return leapYearFebruaryDates
+  }
+
+  if (!isLeapYear(year) && month === 2) {
+    return februaryDates
+  }
+
+  if (isOddMonth(month)) {
+    return oddMonthDates
+  }
+
+  return evenMonthDates
+}
+
+const genColumns = (startYear, endYear) => {
+  const columns = []
+
+  for (let year = startYear; year < endYear; year++) {
+    columns.push({
+      text: year,
+      children: months.map((month) => {
+        return {
+          text: month,
+          children: genDates(year, month).map(date => ({ text: date }))
+        }
+      })
+    })
+  }
+
+  return columns
+}
+
+const columns = genColumns(1970, 2100)
+
+const textFormatter = (text, columnIndex) => {
+  if (columnIndex === 0) return `${text} YEAR`
+  else if (columnIndex === 1) return `${text} MONTH`
+  else if (columnIndex === 2) return `${text} DATE`
+}
+
+const { state, texts, indexes } = await Picker({
+  cascade: true,
+  columns,
+  textFormatter,
+})
+```
+
+### Mapping of values
+
+```js
+import { Picker, Snackbar } from '@varlet-vue2/ui'
+
+const rawColumns = [
+  [
+    { label: 'Ember Spirit', id: 1 },
+    { label: 'Storm Spirit', id: 2 },
+    { label: 'Earth Spirit', id: 3 },
+    { label: 'Void Spirit', id: 4 },
+  ],
+  [
+    { label: 'Ember Spirit', id: 1 },
+    { label: 'Storm Spirit', id: 2 },
+    { label: 'Earth Spirit', id: 3 },
+    { label: 'Void Spirit', id: 4 },
+  ],
+  [
+    { label: 'Ember Spirit', id: 1 },
+    { label: 'Storm Spirit', id: 2 },
+    { label: 'Earth Spirit', id: 3 },
+    { label: 'Void Spirit', id: 4 },
+  ],
+]
+
+const normalizedColumns = rawColumns.map((column) => column.map(option => option.label))
+
+const handleChange = (_, [i1, i2, i3]) => {
+  const [c1, c2, c3] = rawColumns
+  const ids = [c1[i1].id, c2[i2].id, c3[i3].id]
+  Snackbar(ids.toString())
+}
+
+const { state, texts, indexes } = await Picker({
+  columns: normalizedColumns,
+  onChange: handleChange
+})
+```
+
 ## Component Call
 
 ### Multi-column Picker
@@ -118,6 +229,123 @@ export default {
 }
 ```
 
+### Text Formatter
+
+```html
+<template>
+  <var-picker cascade :columns="columns" :text-formatter="textFormatter" />
+</template>
+```
+
+```js
+const genCounts = length => Array.from({ length }, (_, index) => index + 1)
+
+const months = genCounts(12)
+const leapYearFebruaryDates = genCounts(29)
+const februaryDates = genCounts(28)
+const oddMonthDates = genCounts(31)
+const evenMonthDates = genCounts(30)
+
+const isOddMonth = month => [1, 3, 5, 7, 8, 10, 12].includes(month)
+
+const isLeapYear = year => (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0
+
+const genDates = (year, month) => {
+  if (isLeapYear(year) && month === 2) {
+    return leapYearFebruaryDates
+  }
+
+  if (!isLeapYear(year) && month === 2) {
+    return februaryDates
+  }
+
+  if (isOddMonth(month)) {
+    return oddMonthDates
+  }
+
+  return evenMonthDates
+}
+
+const genColumns = (startYear, endYear) => {
+  const columns = []
+
+  for (let year = startYear; year < endYear; year++) {
+    columns.push({
+      text: year,
+      children: months.map((month) => {
+        return {
+          text: month,
+          children: genDates(year, month).map(date => ({ text: date }))
+        }
+      })
+    })
+  }
+
+  return columns
+}
+
+export default {
+  data: () => ({
+    columns: genColumns(1970, 2100)
+  }),
+  methods: {
+    textFormatter() {
+      if (columnIndex === 0) return `${text} YEAR`
+      else if (columnIndex === 1) return `${text} MONTH`
+      else if (columnIndex === 2) return `${text} DATE`
+    }
+  }
+}
+```
+
+### Mapping of values
+
+```html
+<template>
+  <var-picker :columns="columns" @change="handleChange" />
+</template>
+```
+
+```js
+import { Snackbar } from '@varlet-vue2/ui'
+
+const rawColumns = [
+  [
+    { label: 'Ember Spirit', id: 1 },
+    { label: 'Storm Spirit', id: 2 },
+    { label: 'Earth Spirit', id: 3 },
+    { label: 'Void Spirit', id: 4 },
+  ],
+  [
+    { label: 'Ember Spirit', id: 1 },
+    { label: 'Storm Spirit', id: 2 },
+    { label: 'Earth Spirit', id: 3 },
+    { label: 'Void Spirit', id: 4 },
+  ],
+  [
+    { label: 'Ember Spirit', id: 1 },
+    { label: 'Storm Spirit', id: 2 },
+    { label: 'Earth Spirit', id: 3 },
+    { label: 'Void Spirit', id: 4 },
+  ]
+]
+
+const normalizedColumns = rawColumns.map(column => column.map(option => option.label))
+
+export default {
+  data: () => ({
+    columns: normalizedColumns
+  }),
+  methods: {
+    handleChange(_, [i1, i2, i3]) {
+      const [c1, c2, c3] = rawColumns
+      const ids = [c1[i1].id, c2[i2].id, c3[i3].id]
+      Snackbar(ids.toString())
+    }
+  }  
+}
+```
+
 ## API
 
 ### Props
@@ -129,6 +357,7 @@ export default {
 | `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` |
+| `text-formatter` | Text formatter | _(text: any, columnIndex: number) => any_ | `text => text` |
 | `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` |
@@ -145,6 +374,7 @@ export default {
 | `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` |
+| `textFormatter` | Text formatter | _(text: any, columnIndex: number) => any_ | `text => text` |
 | `optionHeight` | Option height | _string \| number_ | `44` |
 | `optionCount` | Number of options visible | _string \| number_ | `6` |
 | `confirmButtonText` | Confirm button text | _string_ | `Confirm` |