@cainiaofe/cn-ui-layout
Version:
- 安装 cone-cli | [Cone-CLI 使用指引](https://alidocs.dingtalk.com/i/nodes/xdqZp24KneBJzvGM6XezJvyb7RA0Nr1E) - `tnpm i -g @alife/cone-cli@latest` - 安装依赖包 - `cone install` - 启动研发 - `cone start`
150 lines (142 loc) • 5.53 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.debounceCalPageClassNames2 = exports.debounceCalPageClassNames = void 0;
exports.getCurBreakPoint = getCurBreakPoint;
exports.getGapVal = getGapVal;
exports.getMaxNumberOfColumns = getMaxNumberOfColumns;
exports.isPresetSize = isPresetSize;
exports.isValidGap = isValidGap;
exports.wrapUnit = wrapUnit;
var _constant = require("../common/constant");
var _eventName = require("../../../common/util/event-name");
var _context = require("../common/context");
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
var _isString = _interopRequireDefault(require("lodash/isString"));
/**
* 获取当前屏幕断点
* @param breakPoints
*/
function getCurBreakPoint(breakPoints, container) {
var screenWidths = [];
var tmpMap = {};
var availWidth = container ? container === null || container === void 0 ? void 0 : container.clientWidth : document.body.clientWidth;
// console.info('当前容器', container || document.body, ';当前容器宽度', availWidth);
breakPoints.forEach(function (bp) {
var width = bp.width;
screenWidths.push(width);
tmpMap[width] = bp;
});
screenWidths = screenWidths.sort(function (a, b) {
return a - b;
});
var len = screenWidths.length;
var ret = tmpMap[screenWidths[0]];
if (availWidth > screenWidths[len - 1]) {
ret = tmpMap[screenWidths[len - 1]];
} else {
for (var i = 1; i < len; i++) {
var breakPoint = tmpMap[screenWidths[i]];
if (screenWidths[i - 1] <= availWidth && availWidth < screenWidths[i]) {
ret = breakPoint;
}
}
}
return ret;
}
/**
* 获取最大断点列数
*/
function getMaxNumberOfColumns(breakPoints) {
if (breakPoints === void 0) {
breakPoints = _constant.DEFAULT_BREAK_POINTS;
}
var screenWidths = breakPoints.map(function (bp) {
return bp.width;
});
var maxWidth = Math.max.apply(Math, screenWidths);
var bp = breakPoints.find(function (breakPoint) {
return (breakPoint === null || breakPoint === void 0 ? void 0 : breakPoint.width) === maxWidth;
});
return (bp === null || bp === void 0 ? void 0 : bp.numberOfColumns) || 12;
}
/**
* 是否为标准的预设尺寸
* @param val
*/
function isPresetSize(val) {
return ['small', 'medium', 'large'].indexOf(val) > -1;
}
/**
* 为数值包裹自动单位
* eg:
* wrapUnit(2) -> 2px
* wrapUnit('2em') -> 2em
* @param value
* @param unit
*/
function wrapUnit(value, unit) {
if (unit === void 0) {
unit = 'px';
}
return (0, _isNumber["default"])(value) ? "" + value + unit : value;
}
/**
* 是否为一个有效的 gap 值:
* eg: 0.9 / -9px / auto
* @param val
*/
function isValidGap(val) {
var gapValReg = /^-?[0-9]*\.?[0-9]+([a-z|A-z]*)$/;
return (0, _isNumber["default"])(val) || (0, _isString["default"])(val) && (gapValReg.test(val) || val === 'auto');
}
/**
* 获取最终的 gap 值
* @param contextGap 上下文中的 gap 值
* @param propGap 属性中定义的 gap 值
*/
function getGapVal(contextGap, propGap) {
if (isValidGap(propGap)) {
return wrapUnit(propGap);
} else if (isValidGap(contextGap)) {
return wrapUnit(contextGap);
}
return undefined;
}
function calPageClassNames(config) {
var bp = getCurBreakPoint(_constant.DEFAULT_BREAK_POINTS, config === null || config === void 0 ? void 0 : config.container);
var _document = document,
body = _document.body;
var target = (config === null || config === void 0 ? void 0 : config.container) || body;
if (!target) {
return;
}
var prefix = config !== null && config !== void 0 && config.container ? _context.defaultContext.prefix + "container--col-" : _context.defaultContext.prefix + "page--col-";
var pattern = config !== null && config !== void 0 && config.container ? /(cn-layout-container--col-)\d+/ : /(cn-layout-page--col-)\d+/;
var cls = target.className;
if (typeof bp.numberOfColumns === 'number') {
var _cls$match, _cls$match$call, _cls$match$call$;
var index = cls === null || cls === void 0 ? void 0 : cls.indexOf(prefix);
var currentNumberOfColumn = +(cls === null || cls === void 0 ? void 0 : (_cls$match = cls.match) === null || _cls$match === void 0 ? void 0 : (_cls$match$call = _cls$match.call(cls, pattern)) === null || _cls$match$call === void 0 ? void 0 : (_cls$match$call$ = _cls$match$call[0]) === null || _cls$match$call$ === void 0 ? void 0 : _cls$match$call$.replace(prefix, ''));
if (index !== -1) {
if (currentNumberOfColumn !== bp.numberOfColumns) {
target.className = cls === null || cls === void 0 ? void 0 : cls.replace(pattern, "" + prefix + bp.numberOfColumns);
}
(0, _eventName.emitEvent)(_eventName.CnPageColumnChange, bp);
} else {
target.className = cls + " " + prefix + bp.numberOfColumns;
(0, _eventName.emitEvent)(_eventName.CnPageColumnChange, bp);
}
}
}
var debounceCalPageClassNames = exports.debounceCalPageClassNames = (0, _debounce["default"])(function (config) {
calPageClassNames === null || calPageClassNames === void 0 ? void 0 : calPageClassNames(config);
}, 500, {
leading: true
});
var debounceCalPageClassNames2 = exports.debounceCalPageClassNames2 = (0, _debounce["default"])(function (config) {
calPageClassNames === null || calPageClassNames === void 0 ? void 0 : calPageClassNames(config);
}, 500, {
leading: true
});