UNPKG

@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
"use strict"; 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 });