Cascader 级联选择

import { Cascader } from "@taroify/core"

import { Cascader, Field, Popup } from "@taroify/core"
import { ArrowRight } from "@taroify/icons"
import { useState } from "react"

const dept = [
  {
    label: "研发中心",
    value: "1",
    children: [
      {
        label: "产线1",
        value: "1-1",
        children: [
          {
            label: "研发",
            value: "1-1-1",
          },
          {
            label: "测试",
            value: "1-1-2",
          },
          {
            label: "产品",
            value: "1-1-3",
          }
        ]
      },
      {
        label: "产线2",
        value: "1-2",
      }
    ]
  },
  {
    label: "客户中心",
    value: "2",
    children: [
      {
        label: "客服",
        value: "2-1",
      },
      {
        label: "销售",
        value: "2-2",
      }
    ]
  }
]

function BasicCascader() {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState<string[]>([])
  const [fieldValue, setFieldValue] = useState("")
  return (
    <>
      <Field label="选项值" isLink onClick={() => setOpen(true)}>
        <Input readonly placeholder="请选择部门" value={fieldValue} />
      </Field>
      <Popup open={open} rounded placement="bottom" onClose={setOpen}>
        <Popup.Close />
        <Cascader
          options={dept}
          value={value}
          title="请选择部门"
          placeholder="请选择"
          onSelect={setValue}
          onChange={(_values_, options) => {
            setOpen(false)
            setFieldValue(
              options.map(item => item.children).join("/")
            )
          }}
        />
      </Popup>
    </>
  )
}

<Cascader className="custom-color" />

.custom-color {
  --tabs-active-color: red;
  --cascader-active-color: red;
}

export const dynamic = [
  {
    label: "产品",
    value: "1"
  },
  {
    label: "测试",
    value: "2"
  },
  {
    label: "研发",
    value: "3"
  }
]

function DynamicCascader() {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState<string[]>([])
  const [fieldValue, setFieldValue] = useState("")
  return (
    <>
      <Field label="选项值" isLink onClick={() => setOpen(true)}>
        <Input readonly placeholder="请选择" value={fieldValue} />
      </Field>
      <Popup open={open} rounded placement="bottom" onClose={setOpen}>
        <Popup.Close />
        <Cascader
          options={dynamic}
          loadData={(_values_) => {
            const len = _values_.length
            return new Promise((resolve) => {
              resolve(len > 3 ? [] : [
                { label: `动态${len}-1`, value: Math.random() },
                { label: `动态${len}-2`, value: Math.random() }
              ])
            })
          }}
          title="请选择"
          swipeable
          value={value}
          onSelect={setValue}
          onChange={(_values_, options) => {
            setOpen(false)
            setFieldValue(
              options.map(item => item.children).join("/")
            )
          }}
        />
      </Popup>
    </>
  )
}

const fieldNames = {
  label: "name",
  value: "code",
  children: "data"
}
function CustomFieldCascader() {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState<string[]>([])
  const [fieldValue, setFieldValue] = useState("")
  return (
    <>
      <Field label="选项值" isLink onClick={() => setOpen(true)}>
        <Input readonly placeholder="请选择地区" value={fieldValue} />
      </Field>
      <Popup open={open} rounded placement="bottom" onClose={setOpen}>
        <Popup.Close />
        <Cascader
          options={customArea}
          fieldNames={fieldNames}
          value={value}
          title="请选择地区"
          placeholder="请选择"
          onSelect={setValue}
          onChange={(_values_, options) => {
            setOpen(false)
            setFieldValue(
              options.map(item => item.children).join("/")
            )
          }}
        />
      </Popup>
    </>
  )
}

import { Cascader, Field, Popup } from "@taroify/core"
import { ArrowRight } from "@taroify/icons"
import { useState } from "react"
import { useCascader } from "@taroify/hooks"

function BasicCascader() {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState<string[]>([])
  const [fieldValue, setFieldValue] = useState("")
  const { columns } = useCascader({ value, depth: 3, options: area })
  return (
    <>
      <Field label="选项值" isLink onClick={() => setOpen(true)}>
        <Input readonly placeholder="请选择地区" value={fieldValue} />
      </Field>
      <Popup open={open} rounded placement="bottom" onClose={setOpen}>
        <Popup.Close />
        <Cascader
          value={value}
          onSelect={setValue}
          onChange={(_values_, options) => {
            setOpen(false)
            setFieldValue(
              options.map(item => item.children).join("/")
            )
          }}
        >
          <Cascader.Header>请选择所在地区</Cascader.Header>
          {
            columns.map((options, index) => (
              <Cascader.Tab key={index}>
                {
                  options.map(option => (
                    <Cascader.Option key={option.value} value={option.value}>
                      {option.label}
                    </Cascader.Option>
                  ))
                }
              </Cascader.Tab>
            ))
          }
        </Cascader>
      </Popup>
    </>
  )
}

const onSelect = (_value) => {
  const level = _value.length - 1
  const selected = columns[level].find(item => item.value === _value[level]);
  if (selected && level < depth - 1) {
    selected.children = [
      { label: `动态${level}-1`, value: Math.random() },
      { label: `动态${level}-2`, value: Math.random() }
    ]
  }

  setValue(_value)
}

import type { 
  CascaderDataOption, CascaderEventOption, CascaderFieldNames 
} from '@taroify/core/cascader'