lole-ui
Version:
React UI Component which like a love letter
92 lines (91 loc) • 4.47 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from "react";
import useFlexGapSupport from "../../hooks/useFlexGapSupport";
import toArray from 'rc-util/lib/Children/toArray';
import classNames from "classnames";
import { GlobalReviewContext } from "../GlobalReview/global_review";
import Item from "./item";
var spaceSize = {
small: 8,
middle: 16,
large: 24,
};
function getNumberSize(size) {
return typeof size === 'string' ? spaceSize[size] : size || 0;
}
export var SpaceContext = React.createContext({
latestIndex: 0,
horizontalSize: 0,
verticalSize: 0,
supportFlexGap: false,
});
var Space = function (props) {
var _a;
var _b = React.useContext(GlobalReviewContext), space = _b.space, directionConfig = _b.direction;
var _c = props.size, size = _c === void 0 ? (space === null || space === void 0 ? void 0 : space.size) || 'small' : _c, align = props.align, className = props.className, children = props.children, _d = props.direction, direction = _d === void 0 ? 'horizontal' : _d, split = props.split, style = props.style, _e = props.wrap, wrap = _e === void 0 ? false : _e, otherProps = __rest(props, ["size", "align", "className", "children", "direction", "split", "style", "wrap"]);
var supportFlexGap = useFlexGapSupport();
var _f = React.useMemo(function () {
return (Array.isArray(size) ? size : [size, size]).map(function (item) {
return getNumberSize(item);
});
}, [size]), horizontalSize = _f[0], verticalSize = _f[1];
var childNodes = toArray(children, { keepEmpty: true });
var mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align;
var prefixCls = 'xiOn-space';
var cn = classNames(prefixCls, "".concat(prefixCls, "-").concat(direction), (_a = {},
_a["".concat(prefixCls, "-rtl")] = directionConfig === 'rtl',
_a["".concat(prefixCls, "-align-").concat(mergedAlign)] = mergedAlign,
_a), className);
var itemClassName = "".concat(prefixCls, "-item");
var marginDirection = directionConfig === 'rtl' ? 'marginLeft' : 'marginRight';
// Calculate latest one
var latestIndex = 0;
var nodes = childNodes.map(function (child, i) {
if (child !== null && child !== undefined) {
latestIndex = i;
}
var keyOfChild = child && child.key;
return (React.createElement(Item, { className: itemClassName, key: "".concat(itemClassName, "-").concat(keyOfChild || i), direction: direction, index: i, marginDirection: marginDirection, split: split, wrap: wrap }, child));
});
var spaceContext = React.useMemo(function () { return ({ horizontalSize: horizontalSize, verticalSize: verticalSize, latestIndex: latestIndex, supportFlexGap: supportFlexGap }); }, [horizontalSize, verticalSize, latestIndex, supportFlexGap]);
// =========================== Render ===========================
if (childNodes.length === 0) {
return null;
}
var gapStyle = {};
if (wrap) {
gapStyle.flexWrap = 'wrap';
// Patch for gap not support
if (!supportFlexGap) {
gapStyle.marginBottom = -verticalSize;
}
}
if (supportFlexGap) {
gapStyle.columnGap = horizontalSize;
gapStyle.rowGap = verticalSize;
}
return (React.createElement("div", __assign({ className: cn, style: __assign(__assign({}, gapStyle), style) }, otherProps),
React.createElement(SpaceContext.Provider, { value: spaceContext }, nodes)));
};
export default Space;