@cloudbase/cals 0.4.3 → 0.4.4

package/lib/parser/cals/utils/style.d.ts

@@ -1,2 +1,12 @@
+import { Properties } from 'csstype';
 export declare function removeInvalidStyleFormValue(styleForm?: any): any;
+export declare function processCommonStyle2CSSProperties(commonStyle?: any, options?: {
+    toRem: boolean;
+    ignoreSelf?: boolean;
+    addPXUnit?: boolean;
+    toRpx?: boolean;
+}): Properties<string | number>;
+export declare function processCSSProperties2Rem(style?: Properties<string | number>, options?: {
+    looseError: boolean;
+}): Properties<string | number>;
 //# sourceMappingURL=style.d.ts.map

package/lib/parser/cals/utils/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/parser/cals/utils/style.ts"],"names":[],"mappings":"AAEA,wBAAgB,2BAA2B,CAAC,SAAS,GAAE,GAA2B,GAAG,GAAG,CAUvF"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/parser/cals/utils/style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAKrC,wBAAgB,2BAA2B,CAAC,SAAS,GAAE,GAA2B,GAAG,GAAG,CAUvF;AAuID,wBAAgB,gCAAgC,CAC9C,WAAW,GAAE,GAA2B,EACxC,OAAO,GAAE;IACP,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACoD,GACrE,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,CAmN7B;AASD,wBAAgB,wBAAwB,CACtC,KAAK,GAAE,UAAU,CAAC,MAAM,GAAG,MAAM,CAAM,EACvC,OAAO;;CAAwB,GAC9B,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,CAE7B"}

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

@@ -1,7 +1,21 @@
 "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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeInvalidStyleFormValue = void 0;
+exports.processCSSProperties2Rem = exports.processCommonStyle2CSSProperties = exports.removeInvalidStyleFormValue = void 0;
 const common_1 = require("./common");
+const lodash_1 = require("lodash");
+const CSSProperty_1 = require("../../../utils/CSSProperty");
+const DISTANCE_KEY_LIST = ['top', 'right', 'bottom', 'left'];
 function removeInvalidStyleFormValue(styleForm = {}) {
     return Object.keys(styleForm).reduce((result, key) => {
         const propStyleFormData = styleForm[key];
@@ -28,3 +42,272 @@ function setStyleValue(object, key, value) {
     }
     object[(0, common_1.camelcase)(key)] = value;
 }
+function _handleStyleNumValue(styleVal, addPXUnit) {
+    if (addPXUnit) {
+        const value = `${styleVal}`;
+        if (value.search(/^\d+$/) >= 0) {
+            return `${value}px`;
+        }
+    }
+    return styleVal;
+}
+function setDistanceStyle(style, distance, attr, addPXUnit) {
+    if (Object.keys(distance).length === 4) {
+        if ((0, lodash_1.uniq)((0, lodash_1.map)(distance, (val) => val)).length === 1) {
+            // 4个值全相等的情况
+            setStyleValue(style, (0, common_1.camelcase)(`${attr}`), _handleStyleNumValue(distance.top, addPXUnit));
+        }
+        else if (distance.top === distance.bottom && distance.left === distance.right) {
+            // 俩俩相等的情况
+            setStyleValue(style, (0, common_1.camelcase)(`${attr}`), `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)}`);
+        }
+        else if (distance.left === distance.right) {
+            setStyleValue(style, (0, common_1.camelcase)(`${attr}`), `${_handleStyleNumValue(distance.top, addPXUnit)} ${_handleStyleNumValue(distance.right, addPXUnit)} ${_handleStyleNumValue(distance.bottom, addPXUnit)}`);
+        }
+        else {
+            setStyleValue(style, (0, common_1.camelcase)(`${attr}`), `${_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 = { looseError: false }) {
+    return Object.keys(style).reduce((result, key) => {
+        const value = style[key];
+        if (CSSProperty_1.isUnitlessNumber[key]) {
+            setStyleValue(result, key, value);
+        }
+        else if (value !== undefined && value !== null) {
+            try {
+                setStyleValue(result, key, handler(value));
+            }
+            catch (e) {
+                if (options.looseError) {
+                    console.warn('translate style error, key:value', key, value);
+                }
+                else {
+                    throw e;
+                }
+            }
+        }
+        return result;
+    }, {});
+}
+function calPxToREM(px) {
+    if (Number.isNaN(px / 28))
+        return px.toString();
+    if (+px === 0) {
+        return '0';
+    }
+    return `${(px / 28).toFixed(4)}rem`;
+}
+function toREM(cssLen) {
+    if (typeof cssLen === 'string') {
+        const cssLenArr = cssLen.split(' ');
+        return cssLenArr
+            .map((attr) => {
+            const matchResult = attr.match(/^(-?\d+)(px)?$/);
+            if (matchResult === null || matchResult === void 0 ? void 0 : matchResult[1]) {
+                return calPxToREM(+matchResult[1]);
+            }
+            return attr;
+        })
+            .join(' ');
+    }
+    else if (typeof cssLen === 'number') {
+        return calPxToREM(cssLen);
+    }
+    else {
+        throw new Error('cssLen type error');
+    }
+}
+function toRPX(cssLen) {
+    if (typeof cssLen === 'string') {
+        const cssLenArr = cssLen.split(' ');
+        return cssLenArr
+            .map((attr) => {
+            const matchResult = attr.match(/^(-?\d+)(px)?$/);
+            if (matchResult === null || matchResult === void 0 ? void 0 : matchResult[1]) {
+                return `${+matchResult[1]}rpx`;
+            }
+            return attr;
+        })
+            .join(' ');
+    }
+    return `${cssLen}rpx`;
+}
+// Convert WeApps common style to css styles(React.CSSProperties)
+function processCommonStyle2CSSProperties(commonStyle = {}, options = { toRem: true, ignoreSelf: false, addPXUnit: false, toRpx: false }) {
+    const { size, 
+    // transform,
+    text, border, background, margin, padding, zIndex, position, display, flexConfig, custom, self, } = 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;
+        if (width !== undefined) {
+            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);
+            }
+        }
+        if (radius !== undefined) {
+            setStyleValue(style, 'borderRadius', _handleStyleNumValue(radius, !!options.addPXUnit));
+        }
+        if (radiusInfo && !(0, common_1.isEmptyObj)(radiusInfo)) {
+            if (Object.keys(radiusInfo).length === 4) {
+                if ((0, lodash_1.uniq)((0, lodash_1.map)(radiusInfo, (val) => val)).length === 1) {
+                    // 4个值全相等的情况
+                    setStyleValue(style, 'borderRadius', _handleStyleNumValue(radiusInfo.topLeft, !!options.addPXUnit));
+                }
+                else if (radiusInfo.topLeft === radiusInfo.bottomRight && radiusInfo.topRight === radiusInfo.bottomLeft) {
+                    // 俩俩相等的情况
+                    setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(radiusInfo.topLeft, !!options.addPXUnit)} ${_handleStyleNumValue(radiusInfo.topRight, !!options.addPXUnit)}`);
+                }
+                else if (radiusInfo.topRight === radiusInfo.bottomLeft) {
+                    setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(radiusInfo.topLeft, !!options.addPXUnit)} ${_handleStyleNumValue(radiusInfo.topRight, !!options.addPXUnit)} ${_handleStyleNumValue(radiusInfo.bottomRight, !!options.addPXUnit)}`);
+                }
+                else {
+                    setStyleValue(style, 'borderRadius', `${_handleStyleNumValue(radiusInfo.topLeft, !!options.addPXUnit)} ${_handleStyleNumValue(radiusInfo.topRight, !!options.addPXUnit)} ${_handleStyleNumValue(radiusInfo.bottomRight, !!options.addPXUnit)} ${_handleStyleNumValue(radiusInfo.bottomLeft, !!options.addPXUnit)}`);
+                }
+            }
+            else {
+                setStyleValue(style, 'borderTopLeftRadius', _handleStyleNumValue(radiusInfo.topLeft, !!options.addPXUnit));
+                setStyleValue(style, 'borderTopRightRadius', _handleStyleNumValue(radiusInfo.topRight, !!options.addPXUnit));
+                setStyleValue(style, 'borderBottomRightRadius', _handleStyleNumValue(radiusInfo.bottomRight, !!options.addPXUnit));
+                setStyleValue(style, 'borderBottomLeftRadius', _handleStyleNumValue(radiusInfo.bottomLeft, !!options.addPXUnit));
+            }
+        }
+        if (type === 'none') {
+            setStyleValue(style, 'border', `none`);
+        }
+    }
+    if (background) {
+        const { bgType, color, image, size, repeat, position, positionObj } = background;
+        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 (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, { float: cssFloat });
+    }
+    if (options.toRpx) {
+        return translateStyleToRpx(style);
+    }
+    return options.toRem ? processCSSProperties2Rem(style) : style;
+}
+exports.processCommonStyle2CSSProperties = processCommonStyle2CSSProperties;
+function translateStyleToRpx(style = {}, options = { looseError: false }) {
+    return translateStyleByHandler(style, toRPX, options);
+}
+function processCSSProperties2Rem(style = {}, options = { looseError: false }) {
+    return translateStyleByHandler(style, toREM, options);
+}
+exports.processCSSProperties2Rem = processCSSProperties2Rem;

package/lib/parser/index.d.ts

@@ -1,7 +1,8 @@
 export * from './cals/index';
 export { upgrageToVersion2 } from './cals/utils/version';
 export { processComponentModule } from './cals/utils/spinoff';
-export { calsToCode, codeToCals, ICodeItem, checkForConflicts, autoResolveConflicts, } from './cals/utils/code';
+export { calsToCode, codeToCals, ICodeItem, checkForConflicts, autoResolveConflicts } from './cals/utils/code';
 export { parseComponentCals } from './cals/utils/block';
 export { ActionType, IDataBind, PropBindType } from './expression/index';
+export { processCommonStyle2CSSProperties, processCSSProperties2Rem } from './cals/utils/style';
 //# sourceMappingURL=index.d.ts.map

package/lib/parser/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/parser/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/parser/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/G,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACzE,OAAO,EAAE,gCAAgC,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/parser/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PropBindType = exports.ActionType = exports.parseComponentCals = exports.autoResolveConflicts = exports.checkForConflicts = exports.codeToCals = exports.calsToCode = exports.processComponentModule = exports.upgrageToVersion2 = void 0;
+exports.processCSSProperties2Rem = exports.processCommonStyle2CSSProperties = exports.PropBindType = exports.ActionType = exports.parseComponentCals = exports.autoResolveConflicts = exports.checkForConflicts = exports.codeToCals = exports.calsToCode = exports.processComponentModule = exports.upgrageToVersion2 = void 0;
 __exportStar(require("./cals/index"), exports);
 var version_1 = require("./cals/utils/version");
 Object.defineProperty(exports, "upgrageToVersion2", { enumerable: true, get: function () { return version_1.upgrageToVersion2; } });
@@ -30,3 +30,6 @@ Object.defineProperty(exports, "parseComponentCals", { enumerable: true, get: fu
 var index_1 = require("./expression/index");
 Object.defineProperty(exports, "ActionType", { enumerable: true, get: function () { return index_1.ActionType; } });
 Object.defineProperty(exports, "PropBindType", { enumerable: true, get: function () { return index_1.PropBindType; } });
+var style_1 = require("./cals/utils/style");
+Object.defineProperty(exports, "processCommonStyle2CSSProperties", { enumerable: true, get: function () { return style_1.processCommonStyle2CSSProperties; } });
+Object.defineProperty(exports, "processCSSProperties2Rem", { enumerable: true, get: function () { return style_1.processCSSProperties2Rem; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudbase/cals",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Common application specifications",
   "main": "lib/utils/index.js",
   "source": "src/utils/index.ts",
@@ -31,6 +31,7 @@
     "@types/jest": "^27.4.0",
     "@types/lodash": "^4.14.168",
     "@types/node": "^14.14.6",
+    "@types/react": "^18.0.17",
     "ajv": "^8.8.2",
     "csstype": "^3.0.11",
     "jest": "^27.1.0",