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

a npm develop template

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _templateObject;
var _excluded = ["visible", "flex", "gap", "direction", "horizontal", "align", "justify", "distribution", "height", "width", "padding", "paddingInline", "paddingBlock", "as", "internalClassName", "className", "children", "wrap"];
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) { _defineProperty(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; }
import { getCssValue, getFlexDirection, isHorizontal, isSpaceDistribution } from "../utils";
import { css, cx } from '@emotion/css';
import { forwardRef, useMemo } from 'react';

/**
 * 表示一个 Flexbox 布局组件的接口
 */
import { jsx as _jsx } from "react/jsx-runtime";
var FlexBasic = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
  var justifyContent = justify || distribution;
  var finalWidth = useMemo(function () {
    if (isHorizontal(direction, horizontal) && !width && isSpaceDistribution(justifyContent)) return '100%';
    return getCssValue(width);
  }, [direction, horizontal, justifyContent, width]);
  return /*#__PURE__*/_jsx(Container, _objectSpread(_objectSpread({
    ref: ref
  }, props), {}, {
    className: cx(internalClassName, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, getFlexDirection(direction, horizontal), wrap, justifyContent, align, finalWidth, getCssValue(height), getCssValue(padding), getCssValue(paddingInline), getCssValue(paddingBlock), getCssValue(gap)), className),
    children: children
  }));
});
FlexBasic.displayName = 'FlexBasic';
export default FlexBasic;