action-sheet 动作面板

动作面板组件（Action Panel Component）是一 种用户界面组件，通常用于显示操作按钮或命令选项，以便用户可以执行相关操作。

Props参数

名称	类型	是否必传	默认值	描述
visible	boolean	✅	false	是否显示
title	ReactNode	否	-	标题
actions	IMMAction[]	✅	-	选项
footer	ReactNode | false	否	-	自定义底部或者不显示底部
onClosed	() => void	否	-	关闭事件
onOpened	() => void	否	-	打开事件
onSelect	(value: IMMAction, index: number) => void	否	-	点击选项

示例

/* eslint-disable no-console */
import { Component } from 'react'
import MMActionSheet from '~/components/action-sheet'
import MMButton from '~/components/button'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'
import { View } from '@tarojs/components'

export default class Index extends Component {
  state = {
    visible: false,
    visible2: false,
    value: '1',
    footer: undefined,
    data: Array.from({ length: 3 }).map((_, index) => ({ id: `${index + 1}`, text: `选项${index + 1}` }))
  }

  render() {
    const { value, visible2, data, footer } = this.state
    return (
      <MMPageContainer title="动作面板">
        <PageDemoBlock title="基础使用" className="container">
          <MMButton onClick={() => this.setState({ visible: true })} text="打开" />
          <MMButton
            onClick={() =>
              this.setState({
                visible: true,
                footer: footer === false ? undefined : false
              })
            }
            text={footer === false ? '显示底部' : '不显示底部'}
          />
        </PageDemoBlock>

        <PageDemoBlock title="自定义底部" className="container">
          <MMButton onClick={() => this.setState({ visible2: true })} text="打开" />
        </PageDemoBlock>

        <MMActionSheet
          title="底部自定义"
          visible={visible2}
          actions={data}
          footer={
            <View style={{ backgroundColor: '#ffffff' }}>
              <MMButton block>确定</MMButton>
            </View>
          }
          onSelect={() => this.setState({ visible2: false })}
          onClosed={() => this.setState({ visible2: false })}
        />

        <MMActionSheet
          title="请选择内容"
          visible={this.state.visible}
          actions={data}
          footer={footer}
          onOpened={this.handleOpend}
          onClosed={this.onCancel}
          onSelect={this.onOptionsClick}
        />
      </MMPageContainer>
    )
  }

  onCancel = () => {
    this.setState({ visible: false })
    console.log('面板关闭')
  }

  onOptionsClick = (value: { id: string; text: string }, index: number) => {
    this.setState({
      value: value.id,
      visible: false
    })
    console.log('选择了', value, index)
  }

  handleOpend = () => {
    console.log('面板打开了')
  }
}