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

a npm develop template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _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"];
/**
 * 表示一个 Flexbox 布局组件的接口
 */
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var FlexBasic = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, 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,
    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var justifyContent = justify || distribution;
  var finalWidth = (0, _react.useMemo)(function () {
    if ((0, _utils.isHorizontal)(direction, horizontal) && !width && (0, _utils.isSpaceDistribution)(justifyContent)) return '100%';
    return (0, _utils.getCssValue)(width);
  }, [direction, horizontal, justifyContent, width]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, _objectSpread(_objectSpread({
    ref: ref
  }, props), {}, {
    className: (0, _css.cx)(internalClassName, (0, _css.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n            // \u662F\u5426\u663E\u793A\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)), className),
    children: children
  }));
});
FlexBasic.displayName = 'FlexBasic';
var _default = exports.default = FlexBasic;