@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
92 lines (91 loc) • 4.06 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ActionSheet", {
enumerable: true,
get: function() {
return ActionSheet;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
var _index = /*#__PURE__*/ _interop_require_default._(require("../popup/index"));
var _typings = require("../../utils/typings");
var _mergeprops = require("../../utils/merge-props");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
visible: false,
description: '',
options: [],
optionKey: {
name: 'name',
description: 'description'
},
cancelText: '',
onCancel: function onCancel() {},
onSelect: function onSelect() {}
});
var ActionSheet = function ActionSheet(props) {
var _mergeProps = (0, _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 = (0, _object_without_properties._)(_mergeProps, [
"children",
"cancelText",
"optionKey",
"title",
"description",
"options",
"onCancel",
"onSelect",
"visible",
"className",
"style"
]);
var classPrefix = 'nut-actionsheet';
var cancelActionSheet = function cancelActionSheet() {
onCancel && onCancel();
};
var chooseItem = function chooseItem(item, index) {
if (!item.disabled) {
onSelect && onSelect(item, index);
}
};
return /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread_props._)((0, _object_spread._)({}, rest), {
round: true,
visible: visible,
position: "bottom",
title: title,
description: description,
className: classPrefix,
onClose: function onClose() {
onCancel && onCancel();
}
}), /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(className),
style: style
}, options.length ? /*#__PURE__*/ _react.default.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.default.createElement("div", {
className: "".concat(classPrefix, "-item ").concat(statusClass),
key: index,
onClick: function onClick() {
return chooseItem(item, index);
}
}, /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-item-name ").concat(statusClass)
}, item[optionKey.name]), /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-item-description ").concat(statusClass)
}, item[optionKey.description]));
})) : children, cancelText && /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-cancel"),
onClick: function onClick() {
return cancelActionSheet();
}
}, cancelText)), /*#__PURE__*/ _react.default.createElement("div", {
className: "".concat(classPrefix, "-safe-area")
}));
};
ActionSheet.displayName = 'NutActionSheet';