@cainiaofe/cn-ui-m
Version:
92 lines (91 loc) • 6.01 kB
JavaScript
import { __assign, __rest } from "tslib";
import $i18n from "../../locales/i18n";
import React, { useCallback, useMemo } from 'react';
import cx from 'classnames';
import { CnSafeArea } from "../cn-safe-area";
import { CnBadge } from "../cn-badge";
import { CnIcon } from "../cn-icon";
import { CnModal } from "../cn-modal";
import { MenuActionSheet } from './antion-sheet-menu';
import { withNativeProps } from '@cainiaofe/cn-ui-common';
var ActionSheet = function (props) {
var _a, _b, _c;
var visible = props.visible, message = props.message, options = props.options, alignProps = props.align, onClick = props.onClick, onClose = props.onClose, showCancel = props.showCancel, cancelText = props.cancelText, maskClosable = props.maskClosable, destructiveIndex = props.destructiveIndex, disabledIndexes = props.disabledIndexes, others = __rest(props, ["visible", "message", "options", "align", "onClick", "onClose", "showCancel", "cancelText", "maskClosable", "destructiveIndex", "disabledIndexes"]);
var fullWidth = true;
var handleOptionClick = useCallback(function (option, index, e) {
if (onClick) {
onClick(option, index, e);
}
if (onClose) {
onClose(index, e);
}
}, [onClick, onClose]);
var clsPrefix = 'cn-ui-m-action-sheet';
var buttons = useMemo(function () {
if (!options) {
return null;
}
var len = options.length;
return options.map(function (option, index) {
var _a, _b;
var disabled = disabledIndexes
? disabledIndexes.indexOf(index) > -1
: false;
var content = null;
var align = alignProps || 'center';
if (typeof option === 'string') {
content = (React.createElement("div", { className: "".concat(clsPrefix, "-option-text ").concat(clsPrefix, "-option--").concat(align) }, option));
}
else if (typeof option === 'object') {
var badge = option.badge, iconType = option.iconType, text = option.text, badgeType = option.badgeType, menu = option.menu;
content = (React.createElement(React.Fragment, null,
iconType ? (React.createElement("div", { className: "".concat(clsPrefix, "-icon") },
React.createElement(CnIcon, { type: iconType, size: "xl" }))) : null,
React.createElement("div", { className: "".concat(clsPrefix, "-option-content ").concat(clsPrefix, "-option--").concat(align) },
React.createElement("div", { className: cx("".concat(clsPrefix, "-option-text"), (_a = {},
_a["".concat(clsPrefix, "-option-text-menu")] = menu,
_a)) }, text),
menu ? (React.createElement(CnIcon, { outerClassName: "".concat(clsPrefix, "-option-text-menu"), type: "icon-triangle-down-fill", size: "medium" })) : null,
badge ? (React.createElement(CnBadge, { className: "".concat(clsPrefix, "-badge"), count: badge, shape: badgeType === 'dot' ? 'dot' : 'normal' })) : null)));
}
return (React.createElement("div", { key: "".concat(clsPrefix, "-option-").concat(index), onClick: function (e) {
if (!disabled) {
handleOptionClick(option, index, e);
}
}, className: cx("".concat(clsPrefix, "-option"), (_b = {},
_b["".concat(clsPrefix, "-option--destructive")] = destructiveIndex === index,
_b["".concat(clsPrefix, "-option--disabled")] = disabled,
_b["".concat(clsPrefix, "-option--advanced")] = typeof option === 'object' && option.iconType,
_b["".concat(clsPrefix, "-option--last")] = index === len - 1,
_b)) }, content));
});
}, [
options,
clsPrefix,
disabledIndexes,
destructiveIndex,
alignProps,
handleOptionClick,
]);
var buttonsContent = (props === null || props === void 0 ? void 0 : props.mode) === 'menu' ? (React.createElement(MenuActionSheet, __assign({ clsPrefix: clsPrefix, options: options }, props))) : (buttons);
return withNativeProps(props, React.createElement(CnModal, __assign({}, others, { visible: visible, showMask: true, maskClosable: maskClosable, className: cx("".concat(clsPrefix, "-drawer")), placement: "bottom", onClose: onClose }),
React.createElement("div", { className: cx(CN_UI_HASH_CLASS_NAME, "".concat(clsPrefix), (_a = {},
_a["".concat(clsPrefix, "--fullwidth")] = fullWidth,
_a)) },
React.createElement("div", { className: cx("".concat(clsPrefix, "-option-warper")) },
message ? (React.createElement("div", { className: cx("".concat(clsPrefix, "-msg"), (_b = {},
_b["".concat(clsPrefix, "-menu-msg")] = (props === null || props === void 0 ? void 0 : props.mode) === 'menu',
_b)) }, message)) : null,
React.createElement("div", { className: cx("".concat(clsPrefix, "-option-list")) }, buttonsContent)),
showCancel ? (React.createElement("div", { className: cx("".concat(clsPrefix, "-option"), "".concat(clsPrefix, "-cancel")), onClick: function (e) { return onClose === null || onClose === void 0 ? void 0 : onClose('cancel', e); } },
React.createElement("div", { className: "".concat(clsPrefix, "-option-text") }, cancelText || $i18n.get({ id: 'Cancel', dm: '取消' })))) : null,
React.createElement(CnSafeArea, { className: cx("".concat(clsPrefix, "-safe-area"), (_c = {},
_c["".concat(clsPrefix, "-safe-area--fullwidth")] = fullWidth,
_c)) }))));
};
ActionSheet.defaultProps = {
visible: false,
showCancel: true,
maskClosable: true,
};
export var CnActionSheet = ActionSheet;