react-layout-kit
Version:
a npm develop template
55 lines (54 loc) • 3 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
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", "ref"];
import { getCssValue, getFlexDirection, isHorizontal, isSpaceDistribution } from "../utils";
import { css, cx } from '@emotion/css';
import isEqual from 'fast-deep-equal';
import { memo, useMemo } from 'react';
/**
* 表示一个 Flexbox 布局组件的接口
*/
import { jsx as _jsx } from "react/jsx-runtime";
var FlexBasic = /*#__PURE__*/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 = _objectWithoutProperties(_ref, _excluded);
var justifyContent = justify || distribution;
var mergedClassName = useMemo(function () {
var calcWidth = function calcWidth() {
if (isHorizontal(direction, horizontal) && !width && isSpaceDistribution(justifyContent)) return '100%';
return getCssValue(width);
};
var finalWidth = calcWidth();
var funcClassName = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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));
return cx(internalClassName, funcClassName, className);
}, [visible, flex, direction, horizontal, width, wrap, justifyContent, align, height, padding, paddingInline, paddingBlock, gap, internalClassName, className]);
return /*#__PURE__*/_jsx(Container, _objectSpread(_objectSpread({
ref: ref
}, props), {}, {
className: mergedClassName,
children: children
}));
}, isEqual);
FlexBasic.displayName = 'FlexBasic';
export default FlexBasic;