@nutui/nutui-react/dist/esm/ActionSheet.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { _ as __rest } from "./tslib.es6.js";
import React__default from "react";
import { P as Popup } from "./popup2.js";
import { C as ComponentDefaults } from "./typings.js";
import { m as mergeProps } from "./merge-props.js";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { visible: false, description: "", options: [], optionKey: { name: "name", description: "description" }, cancelText: "", onCancel: () => {
}, onSelect: () => {
} });
const ActionSheet = (props) => {
  const _a = mergeProps(defaultProps, props), { children, cancelText, optionKey, title, description, options, onCancel, onSelect, visible, className, style } = _a, rest = __rest(_a, ["children", "cancelText", "optionKey", "title", "description", "options", "onCancel", "onSelect", "visible", "className", "style"]);
  const classPrefix = "nut-actionsheet";
  const cancelActionSheet = () => {
    onCancel && onCancel();
  };
  const chooseItem = (item, index) => {
    if (!item.disabled) {
      onSelect && onSelect(item, index);
    }
  };
  return React__default.createElement(
    Popup,
    Object.assign({}, rest, { round: true, visible, position: "bottom", title, description, className: classPrefix, onClose: () => {
      onCancel && onCancel();
    } }),
    React__default.createElement(
      "div",
      { className: `${className}`, style },
      options.length ? React__default.createElement("div", { className: `${classPrefix}-list` }, options.map((item, index) => {
        return React__default.createElement(
          "div",
          { className: `${classPrefix}-item ${item.disabled ? "disabled" : ""} ${item.danger ? "danger" : ""}`, key: index, onClick: () => chooseItem(item, index) },
          item[optionKey.name],
          React__default.createElement("div", { className: `${classPrefix}-item-description` }, item[optionKey.description])
        );
      })) : children,
      cancelText && React__default.createElement("div", { className: `${classPrefix}-cancel`, onClick: () => cancelActionSheet() }, cancelText)
    ),
    React__default.createElement("div", { className: `${classPrefix}-safe-area` })
  );
};
ActionSheet.displayName = "NutActionSheet";
export {
  ActionSheet as default
};