react-layout-kit/lib/FlexBasic/index.js

a npm develop template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _utils = require("../utils");
var _css = require("@emotion/css");
var _fastDeepEqual = _interopRequireDefault(require("fast-deep-equal"));
var _react = require("react");
var _jsxRuntime = require("react/jsx-runtime");
var _templateObject;
var _excluded = ["visible", "flex", "gap", "direction", "horizontal", "align", "justify", "distribution", "height", "width", "padding", "paddingInline", "paddingBlock", "as", "internalClassName", "className", "children", "wrap", "ref"];
/**
 * 表示一个 Flexbox 布局组件的接口
 */
var FlexBasic = /*#__PURE__*/(0, _react.memo)(function (_ref) {
  var visible = _ref.visible,
    flex = _ref.flex,
    gap = _ref.gap,
    direction = _ref.direction,
    horizontal = _ref.horizontal,
    align = _ref.align,
    justify = _ref.justify,
    distribution = _ref.distribution,
    height = _ref.height,
    width = _ref.width,
    padding = _ref.padding,
    paddingInline = _ref.paddingInline,
    paddingBlock = _ref.paddingBlock,
    _ref$as = _ref.as,
    Container = _ref$as === void 0 ? 'div' : _ref$as,
    internalClassName = _ref.internalClassName,
    className = _ref.className,
    children = _ref.children,
    wrap = _ref.wrap,
    ref = _ref.ref,
    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var justifyContent = justify || distribution;
  var mergedClassName = (0, _react.useMemo)(function () {
    var calcWidth = function calcWidth() {
      if ((0, _utils.isHorizontal)(direction, horizontal) && !width && (0, _utils.isSpaceDistribution)(justifyContent)) return '100%';
      return (0, _utils.getCssValue)(width);
    };
    var finalWidth = calcWidth();
    var funcClassName = (0, _css.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        display: ", ";\n\n        flex: ", ";\n\n        flex-direction: ", ";\n        flex-wrap: ", ";\n\n        justify-content: ", ";\n        align-items: ", ";\n\n        width: ", ";\n        height: ", ";\n\n        padding: ", ";\n\n        padding-inline: ", ";\n        padding-block: ", ";\n\n        gap: ", ";\n      "])), visible === false ? 'none' : 'flex', flex, (0, _utils.getFlexDirection)(direction, horizontal), wrap, justifyContent, align, finalWidth, (0, _utils.getCssValue)(height), (0, _utils.getCssValue)(padding), (0, _utils.getCssValue)(paddingInline), (0, _utils.getCssValue)(paddingBlock), (0, _utils.getCssValue)(gap));
    return (0, _css.cx)(internalClassName, funcClassName, className);
  }, [visible, flex, direction, horizontal, width, wrap, justifyContent, align, height, padding, paddingInline, paddingBlock, gap, internalClassName, className]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, (0, _objectSpread2.default)((0, _objectSpread2.default)({
    ref: ref
  }, props), {}, {
    className: mergedClassName,
    children: children
  }));
}, _fastDeepEqual.default);
FlexBasic.displayName = 'FlexBasic';
var _default = exports.default = FlexBasic;