@alifd/meet-react
Version:
Fusion Mobile React UI System Component
123 lines • 7.09 kB
JavaScript
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
import { __rest } from "tslib";
import React, { createElement, forwardRef, Fragment, useCallback, useMemo } from "react";
import classNames from 'classnames';
import { Image, Text } from "@alifd/meet-react-component-one";
import View from '../view';
import SafeArea from '../safe-area';
import Badge from '../badge';
import Drawer from '../drawer';
import { useLocale } from '../locale';
import defaultLang from '../locale/lang/zh-cn';
import { isString } from '../utils';
var ActionSheet = function ActionSheet(props, ref) {
var _props$prefix = props.prefix,
prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
message = props.message,
options = props.options,
_props$visible = props.visible,
visible = _props$visible === void 0 ? false : _props$visible,
_props$fullWidth = props.fullWidth,
fullWidth = _props$fullWidth === void 0 ? true : _props$fullWidth,
_props$showCancel = props.showCancel,
showCancel = _props$showCancel === void 0 ? true : _props$showCancel,
_props$maskClosable = props.maskClosable,
maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable,
destructiveIndex = props.destructiveIndex,
cancelText = props.cancelText,
alignProps = props.align,
disabledIndexes = props.disabledIndexes,
onClick = props.onClick,
onClose = props.onClose,
className = props.className,
others = __rest(props, ["prefix", "message", "options", "visible", "fullWidth", "showCancel", "maskClosable", "destructiveIndex", "cancelText", "align", "disabledIndexes", "onClick", "onClose", "className"]);
var locale = useLocale('ActionSheet', others, defaultLang.ActionSheet);
var handleOptionClick = useCallback(function (option, index, e) {
if (onClick) {
onClick(option, index, e);
}
if (onClose) {
onClose(index, e);
}
}, [onClick, onClose]);
var clsPrefix = "".concat(prefix, "actionsheet");
var buttons = useMemo(function () {
if (!options) {
return null;
}
var len = options.length;
return options.map(function (option, index) {
var disabled = disabledIndexes ? disabledIndexes.indexOf(index) > -1 : false;
var content = null;
var align = alignProps || (_typeof(option) === 'object' && option.icon ? 'left' : 'center');
if (isString(option)) {
content = /*#__PURE__*/React.createElement(Text, {
className: "".concat(clsPrefix, "-option-text ").concat(clsPrefix, "-option--").concat(align)
}, option);
} else if (_typeof(option) === 'object') {
var badge = option.badge,
icon = option.icon,
text = option.text,
badgeType = option.badgeType;
content = /*#__PURE__*/React.createElement(Fragment, null, icon ? /*#__PURE__*/React.createElement(Image, {
source: {
uri: icon
},
className: "".concat(clsPrefix, "-icon")
}) : null, /*#__PURE__*/React.createElement(View, {
className: "".concat(clsPrefix, "-option-content ").concat(clsPrefix, "-option--").concat(align)
}, /*#__PURE__*/React.createElement(Text, {
className: "".concat(clsPrefix, "-option-text")
}, text), badge ? /*#__PURE__*/React.createElement(Badge, {
className: "".concat(clsPrefix, "-badge"),
count: badge,
dot: badgeType === 'dot'
}) : null));
}
return /*#__PURE__*/React.createElement(View, {
key: "".concat(clsPrefix, "-option-").concat(index),
onClick: function onClick(e) {
if (!disabled) {
handleOptionClick(option, index, e);
}
},
className: classNames("".concat(clsPrefix, "-option"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(clsPrefix, "-option--destructive"), destructiveIndex === index), "".concat(clsPrefix, "-option--disabled"), disabled), "".concat(clsPrefix, "-option--advanced"), _typeof(option) === 'object' && option.icon), "".concat(clsPrefix, "-option--last"), index === len - 1))
}, content);
});
}, [options, clsPrefix, disabledIndexes, destructiveIndex, alignProps, handleOptionClick]);
var handleMaskClose = useCallback(function (r, e) {
return onClose && onClose('mask', e);
}, [onClose]);
var handleCancelClose = useCallback(function (e) {
return onClose && onClose('cancel', e);
}, [onClose]);
return /*#__PURE__*/React.createElement(Drawer, _extends({}, others, {
ref: ref,
visible: visible,
closeMode: maskClosable ? ['mask'] : [],
className: classNames("".concat(clsPrefix, "-drawer"), className),
placement: "bottom",
onClose: handleMaskClose,
disableScroll: true
}), /*#__PURE__*/React.createElement(View, {
className: classNames("".concat(clsPrefix), _defineProperty({}, "".concat(clsPrefix, "--fullwidth"), fullWidth))
}, message ? /*#__PURE__*/React.createElement(Text, {
className: "".concat(clsPrefix, "-msg"),
numberOfLines: 1
}, message) : null, /*#__PURE__*/React.createElement(View, {
className: classNames("".concat(clsPrefix, "-option-list"))
}, buttons), showCancel ? /*#__PURE__*/React.createElement(View, {
className: classNames("".concat(clsPrefix, "-option"), "".concat(clsPrefix, "-cancel")),
onClick: handleCancelClose
}, /*#__PURE__*/React.createElement(Text, {
className: "".concat(clsPrefix, "-option-text")
}, cancelText || locale.cancel || 'Cancel')) : null, /*#__PURE__*/React.createElement(SafeArea, {
className: classNames("".concat(clsPrefix, "-safe-area"), _defineProperty({}, "".concat(clsPrefix, "-safe-area--fullwidth"), fullWidth))
})));
};
ActionSheet.displayName = 'ActionSheet';
export default /*#__PURE__*/forwardRef(ActionSheet);