@alifd/meet-react
Version:
Fusion Mobile React UI System Component
228 lines • 13.6 kB
JavaScript
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 { rpx2vw4style as __rpx2vw__ } from "@alifd/babel-runtime-jsx-style-transform";
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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import { __rest } from "tslib";
import classNames from 'classnames';
import React, { createElement, forwardRef, Fragment, useCallback, useContext, useImperativeHandle, useState } from "react";
import { Text } from "@alifd/meet-react-component-one";
import View from '../view';
import SafeArea from '../safe-area';
import Icon from '../icon';
import Drawer from '../drawer';
import Button from '../button';
import BottomButton from '../bottom-button';
import { ItemContext } from '../form';
import { useLocale } from '../locale';
import defaultLang from '../locale/lang/zh-cn';
import { isString, stopPropagation } from '../utils';
import { getValidChildren } from '../utils/children';
var SelectDrawer = function SelectDrawer(props, ref) {
var _props$prefix = props.prefix,
prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
alignProp = props.align,
children = props.children,
_props$drawerTitle = props.drawerTitle,
drawerTitle = _props$drawerTitle === void 0 ? '' : _props$drawerTitle,
_props$iconType = props.iconType,
iconType = _props$iconType === void 0 ? 'arrow-right' : _props$iconType,
_props$content = props.content,
content = _props$content === void 0 ? '' : _props$content,
placeholder = props.placeholder,
_props$type = props.type,
type = _props$type === void 0 ? 'normal' : _props$type,
_props$buttonPosition = props.buttonPosition,
buttonPosition = _props$buttonPosition === void 0 ? 'top' : _props$buttonPosition,
className = props.className,
drawerClassName = props.drawerClassName,
_props$disabled = props.disabled,
disabled = _props$disabled === void 0 ? false : _props$disabled,
_props$readOnly = props.readOnly,
readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
_props$showIcon = props.showIcon,
showIcon = _props$showIcon === void 0 ? true : _props$showIcon,
_props$hasClear = props.hasClear,
hasClear = _props$hasClear === void 0 ? false : _props$hasClear,
hideButton = props.hideButton,
_props$showToolbar = props.showToolbar,
showToolbarProp = _props$showToolbar === void 0 ? true : _props$showToolbar,
notFoundContent = props.notFoundContent,
onOk = props.onOk,
onCancel = props.onCancel,
onClear = props.onClear,
onVisibleChange = props.onVisibleChange,
okText = props.okText,
cancelText = props.cancelText,
zIndex = props.zIndex,
sizeProp = props.size,
disableScroll = props.disableScroll,
others = __rest(props, ["prefix", "align", "children", "drawerTitle", "iconType", "content", "placeholder", "type", "buttonPosition", "className", "drawerClassName", "disabled", "readOnly", "showIcon", "hasClear", "hideButton", "showToolbar", "notFoundContent", "onOk", "onCancel", "onClear", "onVisibleChange", "okText", "cancelText", "zIndex", "size", "disableScroll"]);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var _useContext = useContext(ItemContext),
contextAlign = _useContext.contentAlign,
contextSize = _useContext.size,
isInsideForm = _useContext.isInsideForm;
var _children = getValidChildren(children);
var align = alignProp || (isInsideForm ? contextAlign : null) || 'left';
var size = sizeProp || (isInsideForm ? contextSize : null) || 'medium';
var shouldShowClear = !disabled && hasClear && content;
var shouldShowIcon = showIcon && !shouldShowClear;
var isInverse = type === 'inverse';
var locale = useLocale('SelectDrawer', others, defaultLang.SelectDrawer);
var showToolbar = showToolbarProp && (drawerTitle || buttonPosition === 'top' && !hideButton);
var showBottomBtn = showToolbarProp && buttonPosition === 'bottom' && !hideButton;
var clsPrefix = "".concat(prefix, "selectdrawer");
var doHide = useCallback(function () {
if (visible) {
setVisible(false);
}
if (onVisibleChange) {
onVisibleChange(false);
}
}, [visible, setVisible, onVisibleChange]);
var handleOk = useCallback(function () {
var shouldHide = true;
if (onOk) {
shouldHide = onOk();
}
if (shouldHide !== false) {
doHide();
}
}, [onOk, doHide]);
var handleCancel = useCallback(function (reason) {
var shouldHide = true;
if (onCancel) {
shouldHide = onCancel(reason);
}
if (shouldHide !== false) {
doHide();
}
}, [onCancel, doHide]);
var handleClear = useCallback(function (e) {
e.preventDefault();
stopPropagation(e);
if (onClear) {
onClear();
}
}, [onClear]);
var handleOpen = function handleOpen() {
if (disabled || readOnly || visible) {
return;
}
if (_children || notFoundContent) {
setVisible(true);
if (onVisibleChange) {
onVisibleChange(true);
}
}
};
useImperativeHandle(ref, function () {
return Object.assign(ref.current || {}, {
hide: doHide,
show: handleOpen,
ok: handleOk,
cancel: handleCancel
});
});
var getContent = function getContent() {
if (!content) {
return /*#__PURE__*/React.createElement(View, {
className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(clsPrefix, "-placeholder"), true), "".concat(clsPrefix, "-placeholder--").concat(align), true), "".concat(clsPrefix, "-placeholder--disabled"), disabled), "".concat(clsPrefix, "-placeholder--inverse"), isInverse), "".concat(clsPrefix, "-placeholder--inverse-disabled"), disabled && isInverse))
}, placeholder || locale.placeHolderText);
} else if (isString(content)) {
return /*#__PURE__*/React.createElement(Text, {
numberOfLines: 1,
className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(clsPrefix, "-content-text"), true), "".concat(clsPrefix, "-content-text--").concat(align), true), "".concat(clsPrefix, "-content-text--").concat(size), size), "".concat(clsPrefix, "-content-text--disabled"), disabled), "".concat(clsPrefix, "-content-text--inverse"), isInverse), "".concat(clsPrefix, "-content-text--inverse-disabled"), isInverse && disabled)),
style: __rpx2vw__({
textAlign: align
})
}, content);
} else {
return content;
}
};
var renderChildren = function renderChildren() {
var ret = null;
if (_children) {
ret = /*#__PURE__*/React.createElement(View, {
className: "".concat(clsPrefix, "-drawer-content")
}, _children);
} else if (isString(notFoundContent)) {
ret = /*#__PURE__*/React.createElement(View, {
className: "".concat(clsPrefix, "-drawer-content ").concat(clsPrefix, "-drawer--empty")
}, /*#__PURE__*/React.createElement(Text, {
className: "".concat(clsPrefix, "-drawer-empty-text")
}, notFoundContent));
} else if (notFoundContent) {
ret = /*#__PURE__*/React.createElement(View, {
className: "".concat(clsPrefix, "-drawer-content ").concat(clsPrefix, "-drawer--empty")
}, /*#__PURE__*/React.createElement(View, {
className: "".concat(clsPrefix, "-drawer-empty-text")
}, notFoundContent));
}
return ret;
};
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(View, _extends({
ref: ref
}, others, {
className: classNames(clsPrefix, "".concat(clsPrefix, "--").concat(size), className),
onClick: handleOpen
}), /*#__PURE__*/React.createElement(View, {
className: classNames("".concat(clsPrefix, "-content"), "".concat(clsPrefix, "-content--").concat(size), "".concat(clsPrefix, "-content--").concat(align))
}, getContent()), shouldShowIcon ? /*#__PURE__*/React.createElement(View, {
className: classNames("".concat(clsPrefix, "-icon"), "".concat(clsPrefix, "-icon--").concat(size))
}, /*#__PURE__*/React.createElement(Icon, {
className: classNames("".concat(clsPrefix, "-icon-text"), "".concat(clsPrefix, "-icon-text--").concat(size), _defineProperty(_defineProperty(_defineProperty({}, "".concat(clsPrefix, "-icon-text--inverse"), isInverse), "".concat(clsPrefix, "-icon-text--disabled"), disabled), "".concat(clsPrefix, "-icon-text--inverse-disabled"), isInverse && disabled)),
name: iconType
})) : null, shouldShowClear ? /*#__PURE__*/React.createElement(View, {
className: classNames("".concat(clsPrefix, "-icon"), "".concat(clsPrefix, "-icon--").concat(size)),
onClick: handleClear
}, /*#__PURE__*/React.createElement(Icon, {
className: classNames("".concat(clsPrefix, "-icon-text--").concat(size), _defineProperty(_defineProperty(_defineProperty({}, "".concat(clsPrefix, "-icon-text--inverse"), isInverse), "".concat(clsPrefix, "-icon-text--disabled"), disabled), "".concat(clsPrefix, "-icon-text--inverse-disabled"), isInverse && disabled)),
name: "delete-filling"
})) : null), /*#__PURE__*/React.createElement(Drawer, {
visible: visible,
placement: "bottom",
closeMode: ['mask'],
onClose: handleCancel,
zIndex: zIndex,
className: classNames("".concat(clsPrefix, "-drawer"), drawerClassName),
containerClassName: "".concat(clsPrefix, "-container"),
disableScroll: disableScroll
}, showToolbar ? /*#__PURE__*/React.createElement(View, {
className: classNames("".concat(clsPrefix, "-toolbar"), _defineProperty({}, "".concat(clsPrefix, "-toolbar--no-border"), buttonPosition === 'bottom'))
}, !hideButton && buttonPosition !== 'bottom' ? /*#__PURE__*/React.createElement(Button, {
className: "".concat(clsPrefix, "-toolbar-btn-cancel"),
model: "text",
onClick: function onClick() {
return handleCancel('cancel-button');
}
}, cancelText || locale.cancel) : null, /*#__PURE__*/React.createElement(View, {
className: "".concat(clsPrefix, "-toolbar-title")
}, drawerTitle), !hideButton && buttonPosition !== 'bottom' ? /*#__PURE__*/React.createElement(Button, {
className: "".concat(clsPrefix, "-toolbar-btn-ok"),
model: "text",
type: "primary",
onClick: handleOk
}, okText || locale.ok) : null) : null, renderChildren(), showBottomBtn ? /*#__PURE__*/React.createElement(BottomButton, {
okText: okText || locale.ok,
cancelText: cancelText || locale.cancel,
onOk: handleOk,
onCancel: function onCancel() {
return handleCancel('cancel-button');
}
}) : /*#__PURE__*/React.createElement(SafeArea, null)));
};
SelectDrawer.displayName = 'SelectDrawer';
export default /*#__PURE__*/forwardRef(SelectDrawer);