@flatbiz/antd
Version:
313 lines (303 loc) • 10.9 kB
JavaScript
/* eslint-disable */
import './index.css';
/*! @flatjs/forge MIT @flatbiz/antd */
import { _ as _objectWithoutProperties, b as _objectSpread2, i as _defineProperty } from '../_rollupPluginBabelHelpers-BYm17lo8.js';
import { Col, Form, Row, Space } from 'antd';
import { jsx, jsxs } from 'react/jsx-runtime';
import { classNames } from '@dimjs/utils/class-names/class-names';
import { useMemo, isValidElement, cloneElement } from 'react';
import { toArray, valueIsEqual } from '@flatbiz/utils';
import { u as useResponsivePoint } from '../use-responsive-point-Bp3D3lZT.js';
var _excluded$2 = ["forceAloneRow", "hidden"];
var forceAloneRowGrid = {
xs: 24,
sm: 24,
md: 24,
lg: 24,
xl: 24,
xxl: 24
};
/**
* 网格响应式布局，默认值：{ xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }
*```
* 1. 设置 span 栅格占位格数，替换lg、xl、xxl默认数据，不替换xs、sm布局数据
* 2. grid 自定义响应式网格布局
* xs: 屏幕 < 576px
* sm: 屏幕 ≥ 576px
* md: 屏幕 ≥ 768px
* lg: 屏幕 ≥ 992px
* xl: 屏幕 ≥ 1200px
* xxl: 屏幕 ≥ 1600px
* ```
*/
var FormCol = function FormCol(props) {
var forceAloneRow = props.forceAloneRow,
hidden = props.hidden,
otherProps = _objectWithoutProperties(props, _excluded$2);
var forceGrid = forceAloneRow ? forceAloneRowGrid : otherProps;
if (hidden) return null;
return /*#__PURE__*/jsx(Col, _objectSpread2(_objectSpread2({}, forceGrid), {}, {
children: props.children
}));
};
FormCol['domTypeName'] = 'FormCol';
var _excluded$1 = ["leftList", "rightList", "rowColTotal", "justify", "forceAloneRow", "hidden", "leftSpaceProps", "rightSpaceProps"];
var fullGrid = {
xs: 24,
sm: 24,
md: 24,
lg: 24,
xl: 24,
xxl: 24
};
/**
* FormOperateCol 布局说明
* ```
* 1. 网格数以及位置为动态计算，不支持 xs、sm、md等
* 2. 如果FormRow只有一行col，则OperateCol会在当前行剩余网格内居左对齐
* 3. 如果同时设置 leftList、rightList，则此cell会强制独占一行，并左右布局
* 4. 如果只设置 leftList、rightList其中一个，则会在最后一行剩余网格内居右对齐
* ```
*/
var FormOperateCol = function FormOperateCol(props) {
var _ref = props,
leftList = _ref.leftList,
rightList = _ref.rightList,
rowColTotal = _ref.rowColTotal,
justify = _ref.justify,
forceAloneRow = _ref.forceAloneRow,
hidden = _ref.hidden,
leftSpaceProps = _ref.leftSpaceProps,
rightSpaceProps = _ref.rightSpaceProps,
otherProps = _objectWithoutProperties(_ref, _excluded$1);
var _leftList = (leftList || []).filter(Boolean);
var _rightList = (rightList || []).filter(Boolean);
var hasAll = _leftList.length > 0 && _rightList.length > 0;
var forceGrid = forceAloneRow || hasAll ? fullGrid : {};
var colJustify = useMemo(function () {
if (justify) return justify;
if (hasAll) return 'space-between';
if (forceAloneRow) return 'end';
if (rowColTotal === 1) return 'start';
return 'end';
}, [forceAloneRow, hasAll, justify, rowColTotal]);
var className = classNames(props.className, 'v-form-col-operate');
if (hidden) return null;
return /*#__PURE__*/jsx(Col, _objectSpread2(_objectSpread2(_objectSpread2({}, otherProps), forceGrid), {}, {
className: className,
children: /*#__PURE__*/jsx(Form.Item, {
children: /*#__PURE__*/jsxs(Row, {
justify: colJustify,
wrap: false,
children: [/*#__PURE__*/jsx(Space, _objectSpread2(_objectSpread2({}, leftSpaceProps), {}, {
className: classNames('v-form-col-operate-left', leftSpaceProps === null || leftSpaceProps === void 0 ? void 0 : leftSpaceProps.className),
children: _leftList.map(function (item) {
return item;
})
})), /*#__PURE__*/jsx(Space, _objectSpread2(_objectSpread2({}, rightSpaceProps), {}, {
style: _objectSpread2({
overflowX: 'auto'
}, rightSpaceProps === null || rightSpaceProps === void 0 ? void 0 : rightSpaceProps.style),
className: classNames('v-form-col-operate-right', rightSpaceProps === null || rightSpaceProps === void 0 ? void 0 : rightSpaceProps.className),
children: _rightList === null || _rightList === void 0 ? void 0 : _rightList.map(function (item) {
return item;
})
}))]
})
})
}));
};
FormOperateCol['domTypeName'] = 'FormOperateCol';
/**
* 用于计算 operateCol 所占用网格数
* ```
* col网格数据 [8,8,8,12,24,0,8] => [[8,8,8],[12],[24],[0,8]]，分组后计算operateCol所在行中剩余网格数
* ```
* @returns
*/
var calculateOperateGrid = function calculateOperateGrid(gridList, operateColIndex) {
try {
var groupList = [];
var getGroupItem = function getGroupItem(index) {
var value = gridList[index];
return {
index: index,
value: value > 24 ? 24 : value
};
};
var condition = true;
var groupItemList = [];
var currentIndex = 0;
var total = 0;
while (condition) {
var currentValue = gridList[currentIndex];
groupItemList.push(getGroupItem(currentIndex));
if (currentValue >= 24) {
groupList.push(groupItemList);
groupItemList = [];
total = 0;
} else if (currentIndex === gridList.length - 1) {
groupList.push(groupItemList);
} else {
total += currentValue;
if (total >= 24) {
groupList.push(groupItemList);
groupItemList = [];
total = 0;
}
}
currentIndex = currentIndex + 1;
if (currentIndex >= gridList.length) {
condition = false;
}
}
var hasOperateList = groupList.find(function (item) {
return !!item.find(function (temp) {
return temp.index === operateColIndex;
});
}) || [];
var hasOperateTotal = 0;
var hasOperateIndex = 0;
hasOperateList.forEach(function (item, index) {
if (item.index === operateColIndex) hasOperateIndex = index;
if (item.index < operateColIndex) {
hasOperateTotal = hasOperateTotal + item.value;
}
});
if (hasOperateTotal === 24 || hasOperateTotal === 0) {
hasOperateList[hasOperateIndex].value = 24;
} else {
hasOperateList[hasOperateIndex].value = 24 - hasOperateTotal;
}
return {
gridList: groupList.reduce(function (a, b) {
return a.concat(b);
}).map(function (temp) {
return temp.value;
}),
gridGroupList: groupList
};
} catch (_error) {
return {
gridList: gridList,
gridGroupList: []
};
}
};
var _excluded = ["gridSize"];
var defaultGrid = {
xs: 24,
sm: 12,
md: 12,
lg: 8,
xl: 8,
xxl: 6
};
var defaultSmallGrid = {
xs: 24,
sm: 12,
md: 8,
lg: 6,
xl: 6,
xxl: 6
};
/**
* FormItem网格响应式布局
*```
* 1. 应用场景：Form条件布局
* 2. 子元素只能是 FormGrid.Col、FormGrid.OperateCol，其他会被忽略
* 3. 所有子元素中只能存在一个 FormGrid.OperateCol
*/
var FormRow = function FormRow(props) {
var gridSize = props.gridSize,
otherProps = _objectWithoutProperties(props, _excluded);
var screenType = useResponsivePoint() || 'md';
var childrenList = toArray(props.children).filter(function (item) {
if (!item || ! /*#__PURE__*/isValidElement(item)) return false;
return valueIsEqual(item.type['domTypeName'], ['FormOperateCol', 'FormCol']);
});
var defaultGridSize = gridSize === 'small' ? defaultSmallGrid : defaultGrid;
var _useMemo = useMemo(function () {
var operateColIndex = childrenList.findIndex(function (item) {
return item.type['domTypeName'] === 'FormOperateCol';
});
if (screenType === undefined) {
return {
gridList: [],
gridGroupList: []
};
}
var _currentGridList = childrenList.map(function (temp, index) {
var _temp$props, _temp$props3;
if (index === operateColIndex) return 0;
var span = (_temp$props = temp.props) === null || _temp$props === void 0 ? void 0 : _temp$props.span;
if (['md', 'sm', 'xs'].includes(screenType)) {
var _temp$props2;
var innerSpan = ((_temp$props2 = temp.props) === null || _temp$props2 === void 0 ? void 0 : _temp$props2[screenType]) || defaultGridSize[screenType];
if (screenType == 'md' && span) {
return span > innerSpan ? span : innerSpan;
}
return innerSpan;
}
return ((_temp$props3 = temp.props) === null || _temp$props3 === void 0 ? void 0 : _temp$props3[screenType]) || span || defaultGridSize[screenType];
});
if (operateColIndex < 0) {
return {
gridList: _currentGridList,
gridGroupList: []
};
}
return calculateOperateGrid(_currentGridList, operateColIndex);
}, [childrenList, defaultGridSize, screenType]),
gridList = _useMemo.gridList,
gridGroupList = _useMemo.gridGroupList;
// if (!screenType) return <Fragment>{props.children}</Fragment>;
return /*#__PURE__*/jsx(Row, _objectSpread2(_objectSpread2({}, otherProps), {}, {
children: childrenList.map(function (item, index) {
var itemProps = _objectSpread2(_objectSpread2({}, defaultGridSize), item.props);
var newProps = _objectSpread2(_objectSpread2({
key: index
}, itemProps), {}, _defineProperty({}, screenType, gridList[index] || itemProps[screenType]));
if (item.type['domTypeName'] === 'FormOperateCol') {
newProps['rowColTotal'] = gridGroupList.length;
}
return /*#__PURE__*/cloneElement(item, newProps);
})
}));
};
var FormGrid = {
/**
* FormItem网格响应式布局
*```
* 1. 应用场景：Form条件布局
* 2. 子元素只能是 FormGrid.Col、FormGrid.OperateCol，其他会被忽略
* 3. 所有子元素中只能存在一个 FormGrid.OperateCol
*/
Row: FormRow,
/**
* 网格响应式布局，默认值：{ xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 6 }
*```
* 1. 设置 span 栅格占位格数，替换lg、xl、xxl默认数据，不替换xs、sm布局数据
* 2. grid 自定义响应式网格布局
* xs: 屏幕 < 576px
* sm: 屏幕 ≥ 576px
* md: 屏幕 ≥ 768px
* lg: 屏幕 ≥ 992px
* xl: 屏幕 ≥ 1200px
* xxl: 屏幕 ≥ 1600px
* ```
*/
Col: FormCol,
/**
* FormOperateCol 布局说明
* ```
* 1. 网格数以及位置为动态计算，不支持 xs、sm、md等
* 2. 如果FormRow只有一行col，则OperateCol会在当前行剩余网格内居左对齐
* 3. 如果同时设置 leftList、rightList，则此cell会强制独占一行，并左右布局
* 4. 如果只设置 leftList、rightList其中一个，则会在最后一行剩余网格内居右对齐
* ```
*/
OperateCol: FormOperateCol
};
export { FormGrid };
//# sourceMappingURL=index.js.map