@cloudbase/cals 1.0.50 → 1.0.51

package/lib/parser/cals/utils/style.js

@@ -0,0 +1,472 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processCSSPropertiesUnit = exports.processCSSProperties2Rem = exports.processCommonStyle2CSSProperties = exports.removeInvalidStyleFormValue = void 0;
+const common_1 = require("./common");
+const map_1 = __importDefault(require("lodash/map"));
+const uniq_1 = __importDefault(require("lodash/uniq"));
+const utils_1 = require("../../../utils");
+const DISTANCE_KEY_LIST = ['top', 'right', 'bottom', 'left'];
+function removeInvalidStyleFormValue(styleForm = {}) {
+    return Object.keys(styleForm).reduce((result, key) => {
+        const propStyleFormData = styleForm[key];
+        if ((0, common_1.isPlainObject)(propStyleFormData)) {
+            setStyleValue(result, key, removeInvalidStyleFormValue(propStyleFormData));
+        }
+        else {
+            setStyleValue(result, key, styleForm[key]);
+        }
+        return result;
+    }, {});
+}
+exports.removeInvalidStyleFormValue = removeInvalidStyleFormValue;
+function setStyleValue(object, key, value) {
+    if (value === undefined || value === null || value === '') {
+        return;
+    }
+    // 特殊样式移除
+    if (key === 'open') {
+        return;
+    }
+    if ((0, common_1.isEmptyObj)(value)) {
+        return;
+    }
+    if (key.startsWith('--')) {
+        // css 自定义属性
+        object[key] = value;
+    }
+    else {
+        object[(0, common_1.camelcase)(key)] = value;
+    }
+}
+function _handleStyleNumValue(styleVal, addPXUnit) {
+    if (addPXUnit) {
+        /**
+         * 2022.12.13
+         * 改分支未启用
+         */
+        const value = `${styleVal}`;
+        if (/^-?(?:\d*\.)?\d+$/.test(value)) {
+            return `${value}px`;
+        }
+    }
+    return styleVal;
+}
+function setDistanceStyle(style, distance, attr, addPXUnit) {
+    const attributeKey = (0, common_1.camelcase)(`${attr}`);
+    if (Object.keys(distance).length === 4) {
+        if ((0, uniq_1.default)((0, map_1.default)(distance, (val) => val)).length === 1) {
+            // 4个值全相等的情况
+            setStyleValue(style, attributeKey, _handleStyleNumValue(distance.top, addPXUnit));
+        }
+        else if (distance.top === distance.bottom && distance.left === distance.right) {
+            // 俩俩相等的情况
+            setStyleValue(style, attributeKey, `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)}`);
+        }
+        else if (distance.left === distance.right) {
+            setStyleValue(style, attributeKey, `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)} ${_handleStyleNumValue(distance.bottom, addPXUnit)}`);
+        }
+        else {
+            setStyleValue(style, attributeKey, `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)} ${_handleStyleNumValue(distance.bottom, addPXUnit)} ${_handleStyleNumValue(distance.left, addPXUnit)}`);
+        }
+    }
+    else {
+        DISTANCE_KEY_LIST.forEach((key) => {
+            if (distance[key] !== undefined)
+                setStyleValue(style, (0, common_1.camelcase)(`${attr}_${key}`), _handleStyleNumValue(distance[key], addPXUnit));
+        });
+    }
+}
+function translateStyleByHandler(style = {}, handler, options) {
+    const { looseError = false, rpxCalcRoot } = options || {};
+    return Object.keys(style).reduce((result, key) => {
+        const value = style[key];
+        if (utils_1.isUnitlessNumber[key]) {
+            setStyleValue(result, key, value);
+        }
+        else if (value !== undefined && value !== null) {
+            try {
+                setStyleValue(result, key, handler(value, rpxCalcRoot));
+            }
+            catch (e) {
+                if (looseError) {
+                    console.warn('translate style error, key:value', key, value);
+                }
+                else {
+                    throw e;
+                }
+            }
+        }
+        return result;
+    }, {});
+}
+function toREM(cssLen, rpxCalcRoot = undefined) {
+    if (typeof cssLen === 'string' || typeof cssLen === 'number') {
+        const cssLenArr = `${cssLen}`.split(' ');
+        return cssLenArr
+            .map((attr) => {
+            const matchResult = attr.match(/^(-?\d*\.?\d+)(r?px)?$/);
+            if (matchResult === null || matchResult === void 0 ? void 0 : matchResult[1]) {
+                const px = +matchResult[1];
+                if (Number.isNaN(px / 1))
+                    return px.toString();
+                if (px === 0) {
+                    return '0';
+                }
+                if ((matchResult === null || matchResult === void 0 ? void 0 : matchResult[2]) === 'rpx') {
+                    return rpxCalcRoot ? `calc(${px}px / ${rpxCalcRoot})` : attr;
+                }
+                return `${(px / 28).toFixed(4)}rem`;
+            }
+            return attr;
+        })
+            .join(' ');
+    }
+    else {
+        throw new Error(`cssLen type error ${cssLen}`);
+    }
+}
+function toRPX(cssLen, rpxCalcRoot = undefined) {
+    const cssLenArr = `${cssLen}`.split(' ');
+    return cssLenArr
+        .map((attr) => {
+        const matchResult = attr.match(/^(-?\d*\.?\d+)(px)?$/);
+        if (matchResult === null || matchResult === void 0 ? void 0 : matchResult[1]) {
+            const px = +matchResult[1];
+            if (Number.isNaN(px / 1))
+                return px.toString();
+            if (px === 0) {
+                return '0';
+            }
+            return rpxCalcRoot ? `calc(${px}px / ${rpxCalcRoot})` : `${px}rpx`;
+        }
+        return attr;
+    })
+        .join(' ');
+}
+function toPX(cssLen, rpxCalcRoot = undefined) {
+    return `${cssLen}`
+        .split(' ')
+        .map((attr) => {
+        const matchResult = attr.match(/^(-?\d*\.?\d+)(rpx)?$/);
+        if (matchResult === null || matchResult === void 0 ? void 0 : matchResult[1]) {
+            const px = +matchResult[1];
+            if (Number.isNaN(px / 1))
+                return px.toString();
+            if (px === 0) {
+                return '0';
+            }
+            if ((matchResult === null || matchResult === void 0 ? void 0 : matchResult[2]) === 'rpx') {
+                return rpxCalcRoot ? `calc(${px}px / ${rpxCalcRoot})` : attr;
+            }
+            return `${+matchResult[1]}px`;
+        }
+        return attr;
+    })
+        .join(' ');
+}
+/**
+ * Convert WeApps common style to css styles(React.CSSProperties)
+ * toRem/toRpx/toRpx 三者互斥 @deprecated
+ * 应使用 defaultUnit 来声明
+ */
+function processCommonStyle2CSSProperties(commonStyle = {}, options = { toRem: true, ignoreSelf: false, addPXUnit: false, toRpx: false, rpxCalcRoot: undefined }) {
+    const { size, 
+    // transform,
+    text, border, background, margin, padding, zIndex, position, display, flexConfig, custom, self, boxShadow, } = commonStyle;
+    const style = {};
+    if (size) {
+        setStyleValue(style, 'width', _handleStyleNumValue(size.width, !!options.addPXUnit));
+        setStyleValue(style, 'height', _handleStyleNumValue(size.height, !!options.addPXUnit));
+    }
+    // if (transform) {
+    //   const { rotate, opacity, scale, radius } = transform
+    //   if ((rotate && rotate !== 0) || (scale && scale !== 1)) {
+    //     style.transform = `${rotate ? `rotate(${rotate}deg) ` : ''}${scale ? `scale(${scale})` : ''}`
+    //   }
+    //   setStyleValue(style, 'opacity', opacity)
+    //   setStyleValue(style, 'borderRadius', radius)
+    // }
+    if (margin) {
+        setDistanceStyle(style, margin, 'margin', !!options.addPXUnit);
+    }
+    if (padding) {
+        setDistanceStyle(style, padding, 'padding', !!options.addPXUnit);
+    }
+    if (display) {
+        setStyleValue(style, 'display', display);
+    }
+    if (display === 'flex' && flexConfig) {
+        if (flexConfig.justifyContent)
+            setStyleValue(style, 'justifyContent', flexConfig.justifyContent);
+        if (flexConfig.alignItems)
+            setStyleValue(style, 'alignItems', flexConfig.alignItems);
+        if (flexConfig.flexWrap && flexConfig.flexDirection) {
+            setStyleValue(style, 'flexFlow', `${flexConfig.flexDirection} ${flexConfig.flexWrap}`);
+        }
+        else {
+            if (flexConfig.flexWrap)
+                setStyleValue(style, 'flexWrap', flexConfig.flexWrap);
+            if (flexConfig.flexDirection)
+                setStyleValue(style, 'flexDirection', flexConfig.flexDirection);
+        }
+    }
+    if (typeof zIndex === 'number' || `${zIndex}`.search(/^\d+$/) === 0) {
+        style.zIndex = zIndex;
+    }
+    if (text) {
+        setStyleValue(style, 'color', text.color);
+        setStyleValue(style, 'fontSize', _handleStyleNumValue(text.fontSize, !!options.addPXUnit));
+        setStyleValue(style, 'lineHeight', text.lineHeight);
+        setStyleValue(style, 'textAlign', text.textAlign);
+        setStyleValue(style, 'fontWeight', text.weight);
+        if (text.opacity !== undefined) {
+            setStyleValue(style, 'opacity', text.opacity / 100);
+        }
+    }
+    if (border) {
+        const { type, color, width, radius, radiusInfo } = border;
+        // width
+        if (typeof width === 'string') {
+            if (type && type !== 'none') {
+                setStyleValue(style, 'border', `${_handleStyleNumValue(width, !!options.addPXUnit)} ${type} ${color || ''}`);
+            }
+            else {
+                setStyleValue(style, 'borderWidth', _handleStyleNumValue(width, !!options.addPXUnit));
+                if (color)
+                    setStyleValue(style, 'borderColor', color);
+            }
+        }
+        else if (Object.prototype.toString.call(width) === '[object Object]' && Object.keys(width).length !== 0) {
+            // https://developer.mozilla.org/zh-CN/docs/Web/CSS/border
+            // 虽然border-width,、border-style和 border-color 简写属性接受最多 4 个参数来为不同的边设置宽度、风格和颜色，但 boder 属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同。
+            const { top = '0', right = '0', bottom = '0', left = '0' } = width;
+            setStyleValue(style, 'borderWidth', `${_handleStyleNumValue(top, !!options.addPXUnit) || '0'} ${_handleStyleNumValue(right, !!options.addPXUnit) || '0'} ${_handleStyleNumValue(bottom, !!options.addPXUnit) || '0'} ${_handleStyleNumValue(left, !!options.addPXUnit) || '0'}`);
+            if (type) {
+                setStyleValue(style, 'borderStyle', type);
+            }
+            if (color) {
+                setStyleValue(style, 'borderColor', color);
+            }
+        }
+        // border radius
+        if (radius !== undefined) {
+            setStyleValue(style, 'borderRadius', _handleStyleNumValue(radius, !!options.addPXUnit));
+        }
+        if (radiusInfo && !(0, common_1.isEmptyObj)(radiusInfo)) {
+            let { topLeft, topRight, bottomRight, bottomLeft } = radiusInfo;
+            if (Object.keys(radiusInfo).length === 4) {
+                // 包含不为空的属性，将部分为空属性处理成 0
+                if (Object.values(radiusInfo).some((corner) => !!corner)) {
+                    if (!topLeft) {
+                        topLeft = '0';
+                    }
+                    if (!topRight) {
+                        topRight = '0';
+                    }
+                    if (!bottomRight) {
+                        bottomRight = '0';
+                    }
+                    if (!bottomLeft) {
+                        bottomLeft = '0';
+                    }
+                }
+                if ((0, uniq_1.default)((0, map_1.default)(radiusInfo, (val) => val)).length === 1) {
+                    // 4个值全相等的情况
+                    setStyleValue(style, 'borderRadius', _handleStyleNumValue(topLeft, !!options.addPXUnit));
+                }
+                else if (topLeft === bottomRight && topRight === bottomLeft) {
+                    // 俩俩相等的情况
+                    setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(topLeft, !!options.addPXUnit)} ${_handleStyleNumValue(topRight, !!options.addPXUnit)}`);
+                }
+                else if (topRight === bottomLeft) {
+                    setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(topLeft, !!options.addPXUnit)} ${_handleStyleNumValue(topRight, !!options.addPXUnit)} ${_handleStyleNumValue(bottomRight, !!options.addPXUnit)}`);
+                }
+                else {
+                    setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(topLeft, !!options.addPXUnit)} ${_handleStyleNumValue(topRight, !!options.addPXUnit)} ${_handleStyleNumValue(bottomRight, !!options.addPXUnit)} ${_handleStyleNumValue(bottomLeft, !!options.addPXUnit)}`);
+                }
+            }
+            else {
+                setStyleValue(style, 'borderTopLeftRadius', _handleStyleNumValue(topLeft, !!options.addPXUnit));
+                setStyleValue(style, 'borderTopRightRadius', _handleStyleNumValue(topRight, !!options.addPXUnit));
+                setStyleValue(style, 'borderBottomRightRadius', _handleStyleNumValue(bottomRight, !!options.addPXUnit));
+                setStyleValue(style, 'borderBottomLeftRadius', _handleStyleNumValue(bottomLeft, !!options.addPXUnit));
+            }
+        }
+        if (type === 'none') {
+            setStyleValue(style, 'border', `none`);
+        }
+    }
+    if (background) {
+        const { bgType, color, image, size, repeat, position, positionObj } = background;
+        if (bgType === 'none') {
+            setStyleValue(style, 'background', 'none');
+        }
+        else if (bgType === 'color') {
+            setStyleValue(style, 'background', color);
+        }
+        else if (bgType === 'image') {
+            // 如 radial-gradient(crimson, skyblue);
+            if (image != null) {
+                if (image.search(/[()]/) >= 0) {
+                    style.background = image;
+                }
+                else {
+                    style.background = `url(${image})`;
+                }
+            }
+            if (repeat)
+                style.background += ` ${repeat}`;
+            if (size) {
+                setStyleValue(style, 'backgroundSize', _handleStyleNumValue(size, !!options.addPXUnit));
+            }
+            setStyleValue(style, 'backgroundPosition', position);
+            if (positionObj && !(0, common_1.isEmptyObj)(positionObj)) {
+                style.background += ` ${_handleStyleNumValue(positionObj.left, !!options.addPXUnit)} ${_handleStyleNumValue(positionObj.top, !!options.addPXUnit)}`;
+            }
+        }
+        // FIXME: 这里兼容原有应用的数据，后面应去掉
+        if (bgType === undefined) {
+            setStyleValue(style, 'backgroundColor', color);
+            if (image != null) {
+                style.backgroundImage = `url(${image})`;
+                setStyleValue(style, 'backgroundRepeat', repeat);
+                setStyleValue(style, 'backgroundSize', _handleStyleNumValue(size, !!options.addPXUnit));
+                setStyleValue(style, 'backgroundPosition', position);
+            }
+        }
+    }
+    if (position) {
+        setStyleValue(style, 'position', position.position);
+        if (position.left !== undefined) {
+            setStyleValue(style, 'left', _handleStyleNumValue(position.left, !!options.addPXUnit));
+        }
+        if (position.right !== undefined) {
+            setStyleValue(style, 'right', _handleStyleNumValue(position.right, !!options.addPXUnit));
+        }
+        if (position.top !== undefined) {
+            setStyleValue(style, 'top', _handleStyleNumValue(position.top, !!options.addPXUnit));
+        }
+        if (position.bottom !== undefined) {
+            setStyleValue(style, 'bottom', _handleStyleNumValue(position.bottom, !!options.addPXUnit));
+        }
+    }
+    if (boxShadow) {
+        let processedBoxShadow = boxShadow;
+        if (Object.prototype.toString.call(boxShadow) === '[object Object]') {
+            processedBoxShadow = [boxShadow];
+        }
+        let boxShadowStyleString = '';
+        if (Array.isArray(processedBoxShadow)) {
+            processedBoxShadow.forEach((boxShadowItem, index) => {
+                let currentBoxShadowStyleString = '';
+                const { keyWord, offsetX, offsetY, blurRadius, spreadRadius, color, global, inset } = boxShadowItem;
+                // Keyword values
+                if (keyWord === 'none') {
+                    currentBoxShadowStyleString = 'none';
+                }
+                else if (!!global) {
+                    currentBoxShadowStyleString = global;
+                }
+                else if (!!offsetX || !!offsetY) {
+                    // inset
+                    if (!!inset) {
+                        currentBoxShadowStyleString = 'inset ';
+                    }
+                    // offsetX
+                    currentBoxShadowStyleString += _handleStyleNumValue(!!offsetX ? offsetX : 0, !!options.addPXUnit);
+                    // offsetY
+                    currentBoxShadowStyleString += ` ${_handleStyleNumValue(!!offsetY ? offsetY : 0, !!options.addPXUnit)}`;
+                    // blur-radius 当 spread-radius 存在时，即使不存在 blur-radius，blur-radius 也要为 0
+                    if (!!blurRadius || !!spreadRadius) {
+                        currentBoxShadowStyleString += ` ${_handleStyleNumValue(!!blurRadius ? blurRadius : 0, !!options.addPXUnit)}`;
+                    }
+                    // spread-radius
+                    if (!!spreadRadius) {
+                        currentBoxShadowStyleString += ` ${_handleStyleNumValue(spreadRadius, !!options.addPXUnit)}`;
+                    }
+                    // color
+                    if (!!color) {
+                        currentBoxShadowStyleString += ` ${color}`;
+                    }
+                }
+                if (!!currentBoxShadowStyleString) {
+                    const splitLabel = !!boxShadowStyleString ? ' , ' : '';
+                    boxShadowStyleString += splitLabel + currentBoxShadowStyleString;
+                }
+            });
+        }
+        else if (typeof boxShadow === 'string') {
+            boxShadowStyleString = boxShadow;
+        }
+        if (!!boxShadowStyleString) {
+            setStyleValue(style, 'boxShadow', boxShadowStyleString);
+        }
+    }
+    if (custom && custom.length > 0) {
+        custom.map((item) => {
+            setStyleValue(style, item.key, item.value);
+        });
+    }
+    if (self && !options.ignoreSelf) {
+        const _a = self, { cssFloat } = _a, restSelf = __rest(_a, ["cssFloat"]);
+        Object.assign(style, restSelf);
+        if (cssFloat) {
+            Object.assign(style, { float: cssFloat });
+        }
+    }
+    for (const key in style) {
+        const value = style[key];
+        if (Array.isArray(value)) {
+            style[key] = value[value.length - 1];
+        }
+    }
+    let { defaultUnit } = options;
+    const translateStyleOptions = { rpxCalcRoot: options.rpxCalcRoot };
+    if (!defaultUnit) {
+        if (options.toRpx) {
+            defaultUnit = 'rpx';
+        }
+        if (options.toRem) {
+            defaultUnit = 'rem';
+        }
+    }
+    if (defaultUnit) {
+        return processCSSPropertiesUnit(style, defaultUnit, translateStyleOptions);
+    }
+    return style;
+}
+exports.processCommonStyle2CSSProperties = processCommonStyle2CSSProperties;
+/**
+ * @deprecated
+ */
+function processCSSProperties2Rem(style = {}, options) {
+    return translateStyleByHandler(style, toREM, options);
+}
+exports.processCSSProperties2Rem = processCSSProperties2Rem;
+function processCSSPropertiesUnit(style = {}, type, options) {
+    const handerMap = {
+        px: toPX,
+        rem: toREM,
+        rpx: toRPX,
+    };
+    const handler = handerMap[type] ||
+        function (cssLen, _) {
+            return cssLen;
+        };
+    return translateStyleByHandler(style, handler, options);
+}
+exports.processCSSPropertiesUnit = processCSSPropertiesUnit;