@cloudbase/cals 1.0.49-alpha.0 → 1.0.50

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

@@ -1,472 +0,0 @@
-"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;