@flatbiz/antd
Version:
272 lines (261 loc) • 8.6 kB
JavaScript
/* eslint-disable */
import './index.css';
/*! @flatjs/forge MIT @flatbiz/antd */
import { classNames } from '@dimjs/utils/class-names/class-names';
import { b as _objectSpread2, a as _slicedToArray } from '../_rollupPluginBabelHelpers-BYm17lo8.js';
import { createContext, useContext, useMemo, Children, cloneElement, useRef, useEffect } from 'react';
import { jsx } from 'react/jsx-runtime';
import { isNumber } from '@dimjs/lang/is-number';
import { useSize } from 'ahooks';
var PresetDefaultGrid = {
xs: 24,
sm: 12,
md: 12,
lg: 8,
xl: 8,
xxl: 6
};
var DefaultGutter = {
xs: 8,
sm: 16,
md: 16,
lg: 24,
xl: 24,
xxl: 32
};
var alignPropsMap = {
top: 'flex-start',
middle: 'center',
bottom: 'flex-end',
stretch: 'stretch'
};
var justifyPropsMap = {
start: 'flex-start',
end: 'flex-end',
center: 'center',
'space-around': 'space-around',
'space-between': 'space-between',
'space-evenly': 'space-evenly'
};
var defaultCtx = {
boxBreakpoint: 'lg',
defaultGrid: PresetDefaultGrid,
horizontalGap: 10,
verticalGap: 10
};
var BoxGridProviderCtx = /*#__PURE__*/createContext(defaultCtx);
var Col = function Col(props) {
var children = props.children,
className = props.className,
style = props.style,
removeWrapper = props.removeWrapper;
var _useContext = useContext(BoxGridProviderCtx),
defaultGrid = _useContext.defaultGrid,
horizontalGap = _useContext.horizontalGap,
boxBreakpoint = _useContext.boxBreakpoint;
var span = useMemo(function () {
return props.span || props[boxBreakpoint || 'lg'] || (defaultGrid === null || defaultGrid === void 0 ? void 0 : defaultGrid[boxBreakpoint || 'lg']) || 8;
}, [props, boxBreakpoint, defaultGrid]);
var styles = _objectSpread2(_objectSpread2({}, style), {}, {
flex: "0 0 ".concat(span / 24 * 100, "%"),
maxWidth: "".concat(span / 24 * 100, "%"),
padding: "0 ".concat(horizontalGap / 2, "px")
});
if (removeWrapper && Children.count(children) === 1) {
var _children$props, _children$props2;
var innerStyle = (children === null || children === void 0 || (_children$props = children['props']) === null || _children$props === void 0 ? void 0 : _children$props.style) || {};
var innerClassName = (children === null || children === void 0 || (_children$props2 = children['props']) === null || _children$props2 === void 0 ? void 0 : _children$props2.className) || {};
return /*#__PURE__*/cloneElement(children, _objectSpread2(_objectSpread2({}, children === null || children === void 0 ? void 0 : children['props']), {}, {
style: _objectSpread2(_objectSpread2({}, styles), innerStyle),
className: classNames('box-grad-col', innerClassName, className)
}));
}
return /*#__PURE__*/jsx("div", {
className: classNames(className, 'box-grad-col'),
style: styles,
children: children
});
};
Col['domTypeName'] = 'BoxGridCol';
/**
* 监听盒子大小变化，返回当前的断点
* @param dom
* @returns
*/
var useBoxBreakpoint = function useBoxBreakpoint(dom) {
var _ref = useSize(dom) || {},
width = _ref.width;
var boxBreakpoint = useMemo(function () {
var w = width || (dom === null || dom === void 0 ? void 0 : dom.clientWidth);
if (!w) {
return 'lg';
}
if (w >= 1600) {
return 'xxl';
} else if (w >= 1200) {
return 'xl';
} else if (w >= 992) {
return 'lg';
} else if (w >= 768) {
return 'md';
} else if (w >= 576) {
return 'sm';
} else {
return 'xs';
}
}, [width]);
return {
boxBreakpoint: boxBreakpoint,
/**
* @deprecated
* 使用 haveWidth 替代
*/
isInit: !!width,
/** width为0，或者不存在 */
haveWidth: !!width
};
};
/**
* 处理间距
* @param gutter
* @param boxBreakpoint
* @returns
*/
var useGutter = function useGutter() {
var gutter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DefaultGutter;
var boxBreakpoint = arguments.length > 1 ? arguments[1] : undefined;
return useMemo(function () {
var horizontalGap;
var verticalGap;
var getCommonGutter = function getCommonGutter(gutter) {
if (typeof gutter === 'number') {
return gutter;
}
if (typeof gutter === 'object') {
return _objectSpread2(_objectSpread2({}, DefaultGutter), gutter)[boxBreakpoint];
}
};
if (Array.isArray(gutter)) {
var _gutter = _slicedToArray(gutter, 2),
h = _gutter[0],
v = _gutter[1];
horizontalGap = getCommonGutter(h);
verticalGap = getCommonGutter(v);
} else {
horizontalGap = getCommonGutter(gutter);
verticalGap = defaultCtx.verticalGap;
}
return {
horizontalGap: isNumber(horizontalGap) ? horizontalGap : defaultCtx.horizontalGap,
verticalGap: isNumber(verticalGap) ? verticalGap : defaultCtx.verticalGap
};
}, [gutter, boxBreakpoint]);
};
var Row = function Row(props) {
var _props$defaultGrid = props.defaultGrid,
defaultGrid = _props$defaultGrid === void 0 ? PresetDefaultGrid : _props$defaultGrid,
children = props.children,
className = props.className,
style = props.style,
gutter = props.gutter,
align = props.align,
justify = props.justify,
onBoxBreakpointChange = props.onBoxBreakpointChange;
var comRef = useRef(null);
var _useBoxBreakpoint = useBoxBreakpoint(comRef),
boxBreakpoint = _useBoxBreakpoint.boxBreakpoint,
haveWidth = _useBoxBreakpoint.haveWidth;
var _useGutter = useGutter(gutter, boxBreakpoint),
horizontalGap = _useGutter.horizontalGap,
verticalGap = _useGutter.verticalGap;
useEffect(function () {
onBoxBreakpointChange === null || onBoxBreakpointChange === void 0 || onBoxBreakpointChange(boxBreakpoint);
}, [boxBreakpoint]);
return /*#__PURE__*/jsx(BoxGridProviderCtx.Provider, {
value: _objectSpread2(_objectSpread2({}, defaultCtx), {}, {
defaultGrid: _objectSpread2(_objectSpread2({}, PresetDefaultGrid), defaultGrid),
boxBreakpoint: boxBreakpoint,
horizontalGap: horizontalGap,
verticalGap: verticalGap
}),
children: /*#__PURE__*/jsx("div", {
className: classNames('box-grad-root', className),
ref: comRef,
style: style,
children: /*#__PURE__*/jsx("div", {
className: "box-grad-row",
style: {
alignItems: align ? alignPropsMap[align] : 'normal',
justifyContent: justify ? justifyPropsMap[justify] : 'normal',
marginLeft: "-".concat(horizontalGap / 2, "px"),
marginRight: "-".concat(horizontalGap / 2, "px"),
rowGap: "".concat(verticalGap, "px"),
/**
* fix: boxBreakpoint多次变化，闪一下的问题
* 子元素拿不到宽度，boxBreakpoint 会快速变化，导致元素闪烁
* 场景：
* 1. 使用 Tabs 组件时，任意父级元素disabled，子元素拿不到宽度
* 2. 初始渲染，拿不到宽度
*/
opacity: haveWidth ? 1 : 0
},
children: children
})
})
});
};
/**
* 获取栅格响应式布局的配置
* @param minSize 元素的最小可接受宽度
* @returns
*/
var getGridMapByRange = function getGridMapByRange(minSize) {
var getSpan = function getSpan(threshold) {
var result = Math.ceil(minSize * 24 / threshold);
return [1, 2, 3, 4, 6, 8, 12, 24].find(function (item) {
return item >= result;
}) || 24;
};
return {
xxl: getSpan(1600),
xl: getSpan(1200),
lg: getSpan(992),
md: getSpan(768),
sm: getSpan(576),
xs: getSpan(200)
};
};
var BoxGrid = {
/**
* 网格响应式布局
*```
* 1. 应用场景：根据盒子大小决定内部元素的布局
* 2. 子元素只能是 BoxGrid.Col
*/
Row: Row,
/**
* 网格响应式布局，
* 默认值：
* { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }
* xs={24} sm={12} md={12} lg={8} xl={8} xxl={6}
*```
* 1. 设置 span 栅格占位格数，0 ～ 24
* 2. grid 自定义响应式网格布局
* xs: 容器尺寸 < 576px
* sm: 容器尺寸 ≥ 576px
* md: 容器尺寸 ≥ 768px
* lg: 容器尺寸 ≥ 992px
* xl: 容器尺寸 ≥ 1200px
* xxl: 容器尺寸 ≥ 1600px
* ```
*/
Col: Col,
/**
* 获取栅格响应式布局的配置
* @param minSize 元素的最小可接受宽度
* @returns { xs: num, sm: num, md: num, lg: num, xl: num, xxl: num }
*/
getGridMapByRange: getGridMapByRange
};
export { BoxGrid, useBoxBreakpoint };
//# sourceMappingURL=index.js.map