ActionSheet 动作面板

import { ActionSheet } from "@taroify/core"

function BasicActionSheet() {
  const [open, setOpen] = useState(false)
  const actions = useMemo(() => [
    { name: "选项一", value: "1" },
    { name: "选项二", value: "2" },
    { name: "选项三", value: "3" },
  ], [])
  return (
    <>
      <Cell clickable isLink title="基础用法"  onClick={() => setOpen(true)} />
      <ActionSheet actions={actions} open={open} onSelect={() => setOpen(false)} onClose={setOpen} />
    </>
  )
}

function ActionSheetWithCancel() {
  const [open, setOpen] = useState(false)
  const actions = useMemo(() => [
    { name: "选项一", value: "1" },
    { name: "选项二", value: "2" },
    { name: "选项三", value: "3" },
  ], [])
  return (
    <>
      <Cell
        clickable
        isLink
        title="展示取消按钮"
        onClick={() => setOpen(true)}
      />
      <ActionSheet
        cancelText="取消"
        actions={actions}
        open={open}
        onSelect={() => setOpen(false)}
        onCancel={() => setOpen(false)}
        onClose={setOpen}
      />
    </>
  )
}

function ActionSheetWithDescription() {
  const [open, setOpen] = useState(false)
  const actions = useMemo(() => [
    { name: "选项一", value: "1", subname: "这是一段描述信息" },
    { name: "选项二", value: "2" },
    { name: "选项三", value: "3" },
  ], [])
  return (
    <>
      <Cell
        clickable
        title="展示描述信息"
        isLink
        onClick={() => setOpen(true)}
      />
      <ActionSheet
        description="这是一段描述信息"
        cancelText="取消"
        actions={actions}
        open={open}
        onSelect={() => setOpen(false)}
        onCancel={() => setOpen(false)}
        onClose={setOpen}
      />
    </>
  )
}

function ActionSheetWithStatuses() {
  const [open, setOpen] = useState(false)
  const actions = useMemo(() => [
    { name: "选项一", value: "1", style: { color: "#ee0a24" } },
    { name: "选项二", value: "2", disabled: true },
    { name: "选项三", value: "3", loading: true },
  ], [])
  return (
    <>
      <Cell clickable title="选项状态" isLink onClick={() => setOpen(true)} />
      <ActionSheet
        actions={actions}
        cancelText="取消"
        open={open}
        onSelect={() => setOpen(false)}
        onCancel={() => setOpen(false)}
        onClose={setOpen}
      />
    </>
  )
}

function ActionSheetWithStatuses() {
  const [open, setOpen] = useState(true)
  return (
    <ActionSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
      <ActionSheet.Action value="1" style={{ color: "#ee0a24" }} name="着色选项" />
      <ActionSheet.Action value="2" disabled name="禁止选项" />
      <ActionSheet.Action value="3" loading name="选项三" />
      <ActionSheet.Button onClick={() => setOpen(false)}>取消</ActionSheet.Button>
    </ActionSheet>
  )
}