zarm/es/action-sheet/ActionSheet.js

基于 React 的移动端UI库

import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { createBEM } from '@zarm-design/bem';
import React, { useContext } from 'react';
import { ConfigContext } from '../config-provider';
import Popup from '../popup';
import SafeArea from '../safe-area';
import ActionSheetItem from './ActionSheetItem';
var ActionSheet = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var className = props.className,
      style = props.style,
      spacing = props.spacing,
      actions = props.actions,
      cancelText = props.cancelText,
      onCancel = props.onCancel,
      onAction = props.onAction,
      safeArea = props.safeArea,
      restProps = _objectWithoutProperties(props, ["className", "style", "spacing", "actions", "cancelText", "onCancel", "onAction", "safeArea"]);

  var _useContext = useContext(ConfigContext),
      prefixCls = _useContext.prefixCls,
      globalSafeArea = _useContext.safeArea,
      locale = _useContext.locale;

  var bem = createBEM('action-sheet', {
    prefixCls: prefixCls
  });
  var cls = bem([{
    spacing: spacing
  }, className]);
  var actionsRender = actions.map(function (action, index) {
    return /*#__PURE__*/React.createElement(ActionSheetItem, _extends({}, action, {
      key: +index,
      onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        var _action$onClick;

        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return (_action$onClick = action.onClick) === null || _action$onClick === void 0 ? void 0 : _action$onClick.call(action);

              case 2:
                _context.next = 4;
                return onAction === null || onAction === void 0 ? void 0 : onAction(action, index);

              case 4:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }))
    }));
  });

  var renderCancel = function renderCancel() {
    var _locale$ActionSheet;

    if (typeof onCancel !== 'function') return;
    return /*#__PURE__*/React.createElement("div", {
      className: bem('cancel')
    }, /*#__PURE__*/React.createElement("div", {
      className: bem('item', [{
        bold: true
      }]),
      onClick: onCancel
    }, cancelText || (locale === null || locale === void 0 ? void 0 : (_locale$ActionSheet = locale.ActionSheet) === null || _locale$ActionSheet === void 0 ? void 0 : _locale$ActionSheet.cancelText)));
  };

  return /*#__PURE__*/React.createElement(Popup, restProps, /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: cls,
    style: style
  }, /*#__PURE__*/React.createElement("div", {
    className: bem('actions')
  }, actionsRender), renderCancel(), (safeArea !== null && safeArea !== void 0 ? safeArea : globalSafeArea) && /*#__PURE__*/React.createElement(SafeArea, {
    position: "bottom"
  })));
});
ActionSheet.displayName = 'ActionSheet';
ActionSheet.defaultProps = {
  spacing: false,
  visible: false,
  actions: [],
  destroy: true
};
export default ActionSheet;