zmp-react/cjs/zalo-ui-kits/box.js

Build full featured iOS & Android apps using ZMP & React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _utils = require("../shared/utils");

var _utils2 = require("../../common/utils");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/* dts-imports
import { SpacingEnum, VerticalAlignEnum, TextAlignEnum, FlexDirectionEnum, JustifyContentEnum, AlignItemsEnum, AlignContentEnum } from '../../common/components-enum-props';
*/

/* dts-props
  id?: string | number;
  className?: string;
  style?: React.CSSProperties;
  noSpace?: boolean;
  inline?: boolean;
  m?: keyof typeof SpacingEnum;
  p?: keyof typeof SpacingEnum;
  mt?: keyof typeof SpacingEnum;
  ml?: keyof typeof SpacingEnum;
  mb?: keyof typeof SpacingEnum;
  mr?: keyof typeof SpacingEnum;
  pt?: keyof typeof SpacingEnum;
  pl?: keyof typeof SpacingEnum;
  pb?: keyof typeof SpacingEnum;
  pr?: keyof typeof SpacingEnum;
  mx?: keyof typeof SpacingEnum;
  my?: keyof typeof SpacingEnum;
  px?: keyof typeof SpacingEnum;
  py?:keyof typeof SpacingEnum;
  width?: number;
  height?: number;
  verticalAlign?: keyof typeof VerticalAlignEnum;
  textAlign?: keyof typeof TextAlignEnum;
  flex?: boolean;
  flexDirection?: keyof typeof FlexDirectionEnum;
  flexWrap?: boolean;
  justifyContent?: keyof typeof JustifyContentEnum;
  alignItems?: keyof typeof AlignItemsEnum;
  alignContent?: keyof typeof AlignContentEnum;
  ref?: React.MutableRefObject<{el: HTMLElement | null}>;
  CHILDREN_PROP
*/
var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
  var _classNames;

  var id = _ref.id,
      children = _ref.children,
      className = _ref.className,
      style = _ref.style,
      m = _ref.m,
      p = _ref.p,
      mt = _ref.mt,
      ml = _ref.ml,
      mb = _ref.mb,
      mr = _ref.mr,
      mx = _ref.mx,
      my = _ref.my,
      pt = _ref.pt,
      pl = _ref.pl,
      pb = _ref.pb,
      pr = _ref.pr,
      px = _ref.px,
      py = _ref.py,
      noSpace = _ref.noSpace,
      inline = _ref.inline,
      width = _ref.width,
      height = _ref.height,
      verticalAlign = _ref.verticalAlign,
      textAlign = _ref.textAlign,
      flex = _ref.flex,
      flexDirection = _ref.flexDirection,
      flexWrap = _ref.flexWrap,
      justifyContent = _ref.justifyContent,
      alignItems = _ref.alignItems,
      alignContent = _ref.alignContent;
  var elRef = (0, _react.useRef)(null);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      el: elRef.current
    };
  });
  var classes = (0, _utils.classNames)('box', (_classNames = {
    'box-no-space': noSpace,
    'box-inline': inline
  }, _classNames["box-m-" + m] = (0, _utils2.validateSpacingNumber)(m), _classNames["box-mt-" + mt] = (0, _utils2.validateSpacingNumber)(mt), _classNames["box-ml-" + ml] = (0, _utils2.validateSpacingNumber)(ml), _classNames["box-mb-" + mb] = (0, _utils2.validateSpacingNumber)(mb), _classNames["box-mr-" + mr] = (0, _utils2.validateSpacingNumber)(mr), _classNames["box-mx-" + mx] = (0, _utils2.validateSpacingNumber)(mx), _classNames["box-my-" + my] = (0, _utils2.validateSpacingNumber)(my), _classNames["box-p-" + p] = (0, _utils2.validateSpacingNumber)(p), _classNames["box-pt-" + pt] = (0, _utils2.validateSpacingNumber)(pt), _classNames["box-pl-" + pl] = (0, _utils2.validateSpacingNumber)(pl), _classNames["box-pb-" + pb] = (0, _utils2.validateSpacingNumber)(pb), _classNames["box-pr-" + pr] = (0, _utils2.validateSpacingNumber)(pr), _classNames["box-px-" + px] = (0, _utils2.validateSpacingNumber)(px), _classNames["box-py-" + py] = (0, _utils2.validateSpacingNumber)(py), _classNames['box-flex'] = flex, _classNames["box-flex-" + flexDirection] = (0, _utils2.isValidBoxProps)(flexDirection, 'flexDirection'), _classNames["box-vertical-align-" + verticalAlign] = (0, _utils2.isValidBoxProps)(verticalAlign, 'verticalAlign'), _classNames["box-text-align-" + textAlign] = (0, _utils2.isValidBoxProps)(textAlign, 'textAlign'), _classNames['box-flex-wrap'] = flexWrap === true, _classNames['box-flex-nowrap'] = flexWrap === false, _classNames["box-justify-" + justifyContent] = (0, _utils2.isValidBoxProps)(justifyContent, 'justifyContent'), _classNames["box-align-items-" + alignItems] = (0, _utils2.isValidBoxProps)(alignItems, 'alignItems'), _classNames["box-align-content-" + alignContent] = (0, _utils2.isValidBoxProps)(alignContent, 'alignContent'), _classNames), className);
  var boxStyle = (0, _extends2.default)({}, style);

  if (width) {
    boxStyle.width = width;
  }

  if (height) {
    boxStyle.height = height;
  }

  return /*#__PURE__*/_react.default.createElement("div", {
    ref: elRef,
    id: id,
    style: boxStyle,
    className: classes
  }, children);
});
Box.displayName = 'zmp-box';
var _default = Box;
exports.default = _default;