mp-colorui/dist/h5/components/actionSheet/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）

import Nerv from "nervjs";

var _this = this;

import Taro from "@tarojs/taro-h5";
import classNames from "classnames";
import ClCard from "../card/index";
import { generateId } from "../../lib/index";
import ClText from "../text/index";
import { View } from "@tarojs/components";
import ClLayout from "../layout/index";
import "./index.scss";
import { BG_COLOR_LIST } from "../../lib/model";
export default class ClActionSheet extends Taro.Component {
  render() {
    const props = this.props;

    const { type, tip, isOpened, closeWithShadow, options, cancelText, showCancel, cancelBgColor, cancelFontColor, onClick, onCancel } = props;
    const [actionsArr, setActionsArr] = Taro.useState([]);
    const [show, setShow] = Taro.useState(false);
    Taro.useMemo(() => {
      const list = options || [];
      setActionsArr(list.map(item => {
        item.cu_action_sheet_id = generateId();
        return item;
      }));
    }, [options]);
    Taro.useMemo(() => {
      setShow(!!isOpened);
    }, [isOpened]);
    const click = index => {
      onClick && onClick(index);
    };
    const cancelComponent = <View>
      <View onClick={e => {
        e.stopPropagation();
        onCancel && onCancel();
      }} style={{
        marginTop: Taro.pxTransform(20)
      }} className={classNames([{
        cu_action_sheet_card: type === "card"
      }])}>
        <ClCard bgColor={cancelBgColor} type="full" active>
          <ClText text={cancelText} textColor={cancelFontColor} align="center" />
        </ClCard>
      </View>
    </View>;
    const tipComponent = <ClText align="center" bgColor="gray" textColor="grey">
      <ClLayout padding="xsmall" paddingDirection="vertical">
        {tip}
      </ClLayout>
    </ClText>;
    const actionsComponents = actionsArr.map((item, index) => <View onClick={click.bind(this, index)} className={classNames([{
      cu_action_sheet_line: index !== actionsArr.length - 1
    }, BG_COLOR_LIST[item.bgColor]])} key={item.cu_action_sheet_id}>
        <ClCard bgColor={item.bgColor} type="full" active>
          {item.text}
        </ClCard>
      </View>);
    return <View className={classNames(["cu-modal bottom-modal", {
      show: show
    }], props.className)} style={Object.assign({}, props.style)} onClick={e => {
      closeWithShadow && setShow(false);
      onCancel && onCancel();
      e.stopPropagation();
    }}>
      <View className="cu-dialog" style={{
        maxHeight: "70vh",
        backgroundColor: `${type === "card" ? "transparent" : "#f8f8f8"}`
      }} onClick={e => {
        e.stopPropagation();
      }}>
        <View className={classNames([{
          cu_action_sheet_card: type === "card"
        }])}>
          {tip ? tipComponent : ""}
          {actionsComponents}
        </View>
        {showCancel ? cancelComponent : ""}
        <View style={{ height: "20px", width: "100%" }} />
      </View>
    </View>;
  }

}
ClActionSheet.options = {
  addGlobalClass: true
};
ClActionSheet.defaultProps = {
  tip: "",
  isOpened: false,
  closeWithShadow: true,
  actions: [],
  cancelText: "取消",
  showCancel: false,
  cancelBgColor: "white",
  cancelFontColor: undefined,
  onClick: () => {},
  onCancel: () => {}
};