@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
81 lines (80 loc) • 3.48 kB
JavaScript
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import React from "react";
import Popup from "../popup/index";
import { ComponentDefaults } from "../../utils/typings";
import { mergeProps } from "../../utils/merge-props";
var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
visible: false,
description: '',
options: [],
optionKey: {
name: 'name',
description: 'description'
},
cancelText: '',
onCancel: function() {},
onSelect: function() {}
});
export var ActionSheet = function(props) {
var _mergeProps = mergeProps(defaultProps, props), children = _mergeProps.children, cancelText = _mergeProps.cancelText, optionKey = _mergeProps.optionKey, title = _mergeProps.title, description = _mergeProps.description, options = _mergeProps.options, onCancel = _mergeProps.onCancel, onSelect = _mergeProps.onSelect, visible = _mergeProps.visible, className = _mergeProps.className, style = _mergeProps.style, rest = _object_without_properties(_mergeProps, [
"children",
"cancelText",
"optionKey",
"title",
"description",
"options",
"onCancel",
"onSelect",
"visible",
"className",
"style"
]);
var classPrefix = 'nut-actionsheet';
var cancelActionSheet = function() {
onCancel && onCancel();
};
var chooseItem = function(item, index) {
if (!item.disabled) {
onSelect && onSelect(item, index);
}
};
return /*#__PURE__*/ React.createElement(Popup, _object_spread_props(_object_spread({}, rest), {
round: true,
visible: visible,
position: "bottom",
title: title,
description: description,
className: classPrefix,
onClose: function() {
onCancel && onCancel();
}
}), /*#__PURE__*/ React.createElement("div", {
className: "".concat(className),
style: style
}, options.length ? /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-list")
}, options.map(function(item, index) {
var statusClass = "".concat(item.disabled ? "".concat(classPrefix, "-item-disabled") : '', " ").concat(item.danger ? "".concat(classPrefix, "-item-danger") : '');
return /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-item ").concat(statusClass),
key: index,
onClick: function() {
return chooseItem(item, index);
}
}, /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-item-name ").concat(statusClass)
}, item[optionKey.name]), /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-item-description ").concat(statusClass)
}, item[optionKey.description]));
})) : children, cancelText && /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-cancel"),
onClick: function() {
return cancelActionSheet();
}
}, cancelText)), /*#__PURE__*/ React.createElement("div", {
className: "".concat(classPrefix, "-safe-area")
}));
};
ActionSheet.displayName = 'NutActionSheet';