@schema-render/core-react
Version:
Through a set of simple JSON Schema, efficiently build a set of forms.
55 lines (54 loc) • 1.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
LAYOUT_MIN_MAX: function() {
return LAYOUT_MIN_MAX;
},
/**
* 计算 grid 布局样式值
* @returns 根节点样式值
*/ default: function() {
return useLayoutStyle;
}
});
var _react = require("react");
var _constants = require("../constants");
var _misc = require("../utils/misc");
var LAYOUT_MIN_MAX = [
'320px',
'1fr'
];
function useLayoutStyle(param) {
var layout = param.layout, layoutMinMax = param.layoutMinMax, layoutColumnGap = param.layoutColumnGap, layoutRowGap = param.layoutRowGap;
var min = layoutMinMax === null || layoutMinMax === void 0 ? void 0 : layoutMinMax[0];
var max = layoutMinMax === null || layoutMinMax === void 0 ? void 0 : layoutMinMax[1];
var gridTemplateColumns = (0, _react.useMemo)(function() {
if (layout === _constants.ELayout.normal) {
return 'repeat(24, 1fr)';
}
var autoMode = layout === _constants.ELayout.autoFill ? 'auto-fill' : 'auto-fit';
var minValue = (0, _misc.normalizeStyleValue)(min !== null && min !== void 0 ? min : LAYOUT_MIN_MAX[0]);
var maxValue = (0, _misc.normalizeStyleValue)(max !== null && max !== void 0 ? max : LAYOUT_MIN_MAX[1]);
return "repeat(".concat(autoMode, ", minmax(").concat(minValue, ", ").concat(maxValue, "))");
}, [
layout,
min,
max
]);
// 设置布局样式
var layoutStyle = {
display: 'grid',
gridTemplateColumns: gridTemplateColumns,
columnGap: layoutColumnGap,
rowGap: layoutRowGap
};
return layoutStyle;
}