feat: multiple options && activeIconSetPath about cascader comp

[electroluxcode]

fix #6334

移动端 级联选择器支持多选逻辑，一些ts类型和细节需要调整

• 设计的理念是 将分层级的 array数组变成 tree，尽可能保留原来代码的形式进行这个功能的新增。
• 由于屏幕尺寸的限制，原先默认 点击选项会进行check 和 uncheck的切换，但是考虑到用户可能不想 点击选项切换而是想要查看这个选择背后的选项。添加activeIconSetPath 这个bool值。对应着pc端的这个按钮。

之所以不直接用这个按钮是因为在mobile可能不好看

并且要处理类似于点击子级然后父级也要被选中的逻辑，由于是分层级的array数组，所以如果添加了这一个设计那么每一次点击这个选项都要深度遍历一次 options，因此将这个按钮和 activeIcon这个 元素做了合并

• 下面是使用示例视频:

antd.mobile.mp4

• 下面是使用的demo

import { Button, Cascader, Modal } from 'antd-mobile'
import { DemoBlock } from 'demos'
import React, { useState } from 'react'

const options = [
  {
    label: '江苏',
    value: '江苏',
    children: [
      {
        label: '南京',
        value: '南京',
        children: [
          {
            label: '玄武区',
            value: '玄武区',
          },
          {
            label: '秦淮区',
            value: '秦淮区',
          },
          {
            label: '建邺区',
            value: '建邺区',
          },
        ],
      },
      {
        label: '苏州',
        value: '苏州',
        children: [
          {
            label: '虎丘区',
            value: '虎丘区',
          },
          {
            label: '吴中区',
            value: '吴中区',
          },
          {
            label: '相城区',
            value: '相城区',
          },
        ],
      },
    ],
  },
]


// 基础用法
function BasicDemo() {
  const [visible, setVisible] = useState(false)

const [value, setValue] = useState<any>([
    [
        "江苏",
        "南京",
        "玄武区"
    ],

])
  return (
    <>
      <Button
        onClick={() => {
          setVisible(true)
        }}
      >
        选择
      </Button>
      <Cascader
        activeIconSetPath={true}
         multiple
         value={value}
         onConfirm={(e) => {
          console.log('onConfirm', e)
          setValue(e)
          Modal.alert({
            content: ` ${JSON.stringify(e.map((item) => item.join("/")),null,2)}`,
            onConfirm: () => {
              console.log('Confirmed')
            },
          })
          // setValue(e)
        }}

        options={options}
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
      />
    </>
  )
}

// 渲染所选值


export default () => {
  return (
    <>
      <DemoBlock title='基础用法'>
        <BasicDemo />
      </DemoBlock>

    </>
  )
}

[afc163]

activeIconSetPath 这个命名好奇怪。

[electroluxcode]

哈哈，因为是从 activeIcon 这个属性派生出来的，然后上面的 tab我个人感觉有点像是路径的意思然后就取的这个名字，看看大佬有什么更好的命名

[github-actions]

PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-6741.surge.sh