@cloudbase/cals 1.1.14-alpha.1 → 1.2.0

package/lib/esm/parser/cals/utils/version/parses.js

@@ -0,0 +1,560 @@
+import { addDefaultData, addDefaultSlot, findComponentInTree, getComponentChildren, getId, checkIsNeedAddFormWrapper, } from './utils';
+import get from 'lodash/get';
+import set from 'lodash/set';
+import merge from 'lodash/merge';
+import { addFormItem } from './common';
+import { OFFICIAL_COMPONENT_LIB_NAME } from '../../../../utils';
+export function parseGsdKboneFooter(comp) {
+    const { xComponent, xProps } = comp;
+    if (xComponent.moduleName === 'gsd-kbone') {
+        xComponent.moduleName = OFFICIAL_COMPONENT_LIB_NAME;
+        xComponent.name = 'Footer';
+        const { data } = xProps;
+        const textValue = data.text.value;
+        comp.properties = {
+            text: {
+                properties: {
+                    [getId()]: {
+                        xComponent: {
+                            moduleName: 'gsd-h5-react',
+                            name: 'Text',
+                        },
+                        xProps: {
+                            data: {
+                                text: {
+                                    value: textValue,
+                                },
+                                decode: {
+                                    value: false,
+                                },
+                                selectable: {
+                                    value: false,
+                                },
+                            },
+                        },
+                        xIndex: 0,
+                    },
+                },
+            },
+        };
+        delete data.text;
+    }
+}
+export function parseGsdKboneButton(comp) {
+    const { xComponent, xProps } = comp;
+    if (xComponent.moduleName === 'gsd-kbone') {
+        xComponent.moduleName = OFFICIAL_COMPONENT_LIB_NAME;
+        xComponent.name = 'Button';
+        const targetData = {
+            size: {
+                type: 'static',
+                value: 'default',
+            },
+            type: {
+                type: 'static',
+                value: 'primary',
+            },
+            plain: {
+                type: 'static',
+                value: false,
+            },
+            loading: {
+                type: 'static',
+                value: false,
+            },
+            disabled: {
+                type: 'static',
+                value: false,
+            },
+            formType: {
+                type: 'static',
+                value: '',
+            },
+            openType: {
+                type: 'static',
+                value: '',
+            },
+            categoryId: {
+                type: 'static',
+                value: [],
+            },
+            sessionFrom: {
+                type: 'static',
+                value: '',
+            },
+            appParameter: {
+                type: 'static',
+                value: '',
+            },
+            sendMessageImg: {
+                type: 'static',
+                value: '',
+            },
+            sendMessagePath: {
+                type: 'static',
+                value: '',
+            },
+            showMessageCard: {
+                type: 'static',
+                value: false,
+            },
+            sendMessageTitle: {
+                type: 'static',
+                value: '',
+            },
+        };
+        const { data } = xProps;
+        const { text = {} } = data;
+        // 转换 data
+        for (const i in targetData) {
+            for (const j in targetData[i]) {
+                if (data[i] && data[i][j]) {
+                    targetData[i][j] = data[i][j];
+                }
+            }
+        }
+        xProps.data = targetData;
+        // 转换内容
+        if (text.type === 'slot') {
+            comp.properties = {
+                contentSlot: {
+                    properties: comp.properties.text.properties,
+                },
+            };
+        }
+        else {
+            comp.properties = {
+                contentSlot: {
+                    properties: {
+                        [getId()]: {
+                            xComponent: {
+                                moduleName: 'gsd-h5-react',
+                                name: 'Text',
+                            },
+                            xProps: {
+                                data: {
+                                    decode: {
+                                        value: false,
+                                    },
+                                    selectable: {
+                                        value: false,
+                                    },
+                                    text: text,
+                                },
+                            },
+                            xIndex: 0,
+                        },
+                    },
+                },
+            };
+        }
+    }
+}
+export function parseGsdKbonePopLayer(comp) {
+    // 特殊处理，因为组件名字大小写改了
+    comp.xComponent.name = 'Poplayer';
+    const slotKeys = ['content', 'footer'];
+    addDefaultSlot(slotKeys, comp);
+    const defaultData = {
+        visible: {
+            value: true,
+        },
+        content: {
+            value: '内容',
+            type: 'slot',
+        },
+        footer: {
+            value: '',
+            type: 'slot',
+        },
+        direction: {
+            value: 'bottom',
+        },
+        popWidth: {
+            value: '100%',
+        },
+        popHeight: {
+            value: '120',
+        },
+    };
+    addDefaultData(defaultData, comp);
+}
+export function parseGsdKboneAgree(comp, key, parent) {
+    addFormItem(comp, key, parent, true);
+    const slotKeys = ['content'];
+    addDefaultSlot(slotKeys, comp);
+    const defaultData = {
+        name: {
+            value: 'thisIsAgreeKey',
+        },
+        value: {
+            value: false,
+        },
+        checkedIcon: {
+            value: 'https://weapps-prod-1301730524.cos.ap-guangzhou.myqcloud.com/res/2/square.svg',
+        },
+        uncheckedIcon: {
+            value: 'https://weapps-prod-1301730524.cos.ap-guangzhou.myqcloud.com/res/2/square_un.svg',
+        },
+    };
+    addDefaultData(defaultData, comp);
+    if (comp.properties && comp.properties.custom) {
+        comp.properties.content = comp.properties.custom;
+        delete comp.properties.custom;
+    }
+}
+export function parseGsdKboneSwiper(comp) {
+    const defaultData = {
+        indicatorDots: {
+            value: false,
+        },
+        autoplay: {
+            value: true,
+        },
+        current: {
+            value: 0,
+        },
+        interval: {
+            value: 2000,
+        },
+        duration: {
+            value: 500,
+        },
+        circular: {
+            value: false,
+        },
+        vertical: {
+            value: false,
+        },
+        previousMargin: {
+            value: 0,
+        },
+        nextMargin: {
+            value: 0,
+        },
+        displayMultipleItems: {
+            value: 1,
+        },
+        updated: {
+            value: 0,
+        },
+        indicatorColor: {
+            value: '',
+        },
+        indicatorActiveColor: {
+            value: '',
+        },
+    };
+    addDefaultData(defaultData, comp);
+    getComponentChildren(comp).map(([subKey, subComp]) => {
+        const { xComponent } = subComp;
+        if (xComponent.name === 'Container') {
+            xComponent.moduleName = 'gsd-h5-react';
+            xComponent.name = 'SwiperItem';
+        }
+        else {
+            const newSwiperItemId = getId();
+            const newSubComp = JSON.parse(JSON.stringify(subComp).replace(new RegExp(`forItems\\.${subKey}`, 'g'), `forItems.${newSwiperItemId}`));
+            const waFor = get(newSubComp, 'xProps.directives.waFor');
+            try {
+                delete newSubComp.xProps.directives.waFor;
+                delete comp.properties[subKey];
+            }
+            catch (e) {
+                console.error('parseGsdKboneSwiper 删除 waFor 出错', e);
+            }
+            comp.properties[newSwiperItemId] = {
+                xComponent: {
+                    moduleName: 'gsd-h5-react',
+                    name: 'SwiperItem',
+                },
+                // @ts-ignore
+                xProps: {
+                    commonStyle: {
+                        self: {
+                            width: '100%',
+                            height: '100%',
+                            position: 'absolute',
+                        },
+                    },
+                    directives: {
+                        waFor,
+                    },
+                },
+                properties: {
+                    [subKey]: newSubComp,
+                },
+            };
+        }
+    });
+}
+export function parseGsdKboneRichText(comp) {
+    const { xProps } = comp;
+    if (xProps.data) {
+        xProps.data.nodes = xProps.data.nodes || xProps.data.content;
+        delete xProps.data.content;
+    }
+}
+export function parseGsdKboneText(comp) {
+    // @ts-ignore
+    comp.xProps = comp.xProps || {};
+    comp.xProps.commonStyle = comp.xProps.commonStyle || {};
+    // v1 版本 text 为 block
+    comp.xProps.commonStyle = merge({
+        display: 'block',
+        self: {
+            display: 'block',
+        },
+    }, comp.xProps.commonStyle);
+}
+export function parseGsdKboneInput(comp, key, parent) {
+    addFormItem(comp, key, parent);
+    const slotKeys = ['prefix', 'suffix'];
+    addDefaultSlot(slotKeys, comp);
+    const defaultData = {
+        name: {
+            value: 'uniqueFormKey',
+        },
+        placeholder: {
+            value: '请输入',
+        },
+        disabled: {
+            value: false,
+        },
+        focus: {
+            value: false,
+        },
+        password: {
+            value: false,
+        },
+        type: {
+            value: 'text',
+        },
+        maxLength: {
+            value: 140,
+        },
+        clearable: {
+            value: true,
+        },
+        value: {
+            value: '',
+        },
+        confirmType: {
+            value: 'done',
+        },
+        prefix: {
+            value: '',
+            type: 'slot',
+        },
+        suffix: {
+            value: '',
+            type: 'slot',
+        },
+    };
+    addDefaultData(defaultData, comp);
+    const append = get(comp, 'properties.append');
+    if (append) {
+        set(comp, 'properties.suffix', append);
+        set(comp, 'xProps.data.isSuffix.value', true);
+        delete comp.properties.append;
+    }
+}
+export function parseGsdKboneSwitch(comp, key, parent) {
+    addFormItem(comp, key, parent, true);
+    const defaultValue = get(comp, 'xProps.data.defaultValue');
+    defaultValue && set(comp, 'xProps.data.value', defaultValue);
+    const originStyle = get(comp, 'xProps.commonStyle.margin');
+    set(comp, 'xProps.commonStyle.margin', Object.assign(Object.assign({}, originStyle), { top: '30', right: '40', bottom: '30', left: '40' }));
+}
+export function parseGsdKbonePicker(comp, key, parent) {
+    addFormItem(comp, key, parent);
+    comp.xComponent.name = 'Selector';
+}
+export function parseGsdKboneDateTimePicker(comp, key, parent) {
+    addFormItem(comp, key, parent);
+    const modeValue = get(comp, 'xProps.data.mode.value');
+    if (modeValue === 'date') {
+        comp.xComponent.name = 'Date';
+    }
+    else {
+        comp.xComponent.name = 'Time';
+    }
+}
+export function parseGsdKboneUpload(comp, key, parent) {
+    addFormItem(comp, key, parent);
+    comp.xComponent.name = 'Uploader';
+    const defaultData = {
+        name: {
+            value: 'thisIsUploadKey',
+        },
+        value: {
+            value: [],
+        },
+        maxNumber: {
+            value: 9,
+        },
+        type: {
+            value: 'media',
+        },
+        mediaType: {
+            value: ['image'],
+        },
+        sourceType: {
+            value: ['album', 'camera'],
+        },
+        maxSize: {
+            value: 500,
+        },
+        filename: {
+            value: 'file',
+        },
+        header: {
+            value: {},
+        },
+        formData: {
+            value: {},
+        },
+        disabled: {
+            value: false,
+        },
+        action: {
+            value: '',
+        },
+        extension: {
+            value: '',
+        },
+    };
+    addDefaultData(defaultData, comp);
+}
+export function addFormWrapperComp(pageInstance) {
+    const { componentInstances } = pageInstance;
+    const cloneTree = {
+        properties: componentInstances,
+    };
+    if (checkIsNeedAddFormWrapper(cloneTree)) {
+        let listeners = [];
+        // 获取 Button 按钮事件，赋值到 Form 并删除按钮事件监听
+        findComponentInTree(cloneTree, (_comp) => {
+            let comp = _comp;
+            const { xComponent, xProps } = comp;
+            if (xComponent && xComponent.name === 'Button') {
+                const target = get(xProps, 'listeners[0]');
+                if (target && target.trigger && target.trigger === 'click') {
+                    listeners = xProps.listeners;
+                    set(xProps, 'data.formType', {
+                        value: 'submit',
+                    });
+                    target.trigger = 'submit';
+                    delete xProps.listeners;
+                    return true;
+                }
+            }
+        });
+        // @ts-ignore
+        pageInstance.componentInstances = {
+            [getId()]: {
+                xComponent: {
+                    moduleName: 'gsd-h5-react',
+                    name: 'Form',
+                },
+                xProps: {
+                    data: {
+                        layout: {
+                            value: 'horizontal',
+                        },
+                    },
+                    listeners,
+                },
+                xIndex: 1,
+                properties: {
+                    contentSlot: {
+                        properties: componentInstances,
+                    },
+                },
+            },
+        };
+    }
+}
+export function parseGsdKboneTabs(comp) {
+    const { xProps, properties } = comp;
+    // 有内容说明之前已经转过了，不需要再次转
+    if (properties === null || properties === void 0 ? void 0 : properties.content) {
+        return;
+    }
+    if (xProps.listeners) {
+        xProps.listeners = xProps.listeners.map((lItem) => {
+            // tab change 事件名由 handleTabChange 改为 change
+            if (lItem.trigger === 'handleTabChange') {
+                lItem.trigger = 'change';
+            }
+            return lItem;
+        });
+    }
+    let tabItems; // [{key, title, content}]
+    if (xProps.data) {
+        tabItems = get(xProps.data, 'TabItems.value', []);
+        // 只保留 activeKey
+        Object.keys(xProps.data).forEach((key) => {
+            if (key !== 'activeKey')
+                delete xProps.data[key];
+        });
+    }
+    if (properties) {
+        const newProperties = {};
+        Object.values(properties).forEach((pItem, idx) => {
+            const tabItem = tabItems[idx];
+            if (tabItem) {
+                newProperties[getId()] = {
+                    xComponent: {
+                        moduleName: OFFICIAL_COMPONENT_LIB_NAME,
+                        name: 'TabPane',
+                    },
+                    xProps: {
+                        data: {
+                            key: {
+                                value: tabItem.key,
+                            },
+                            tab: {
+                                value: tabItem.title,
+                            },
+                        },
+                    },
+                    xIndex: idx,
+                    properties: {
+                        content: pItem,
+                    },
+                };
+            }
+        });
+        comp.properties = {
+            content: {
+                properties: newProperties,
+            },
+        };
+    }
+}
+// 处理组件公共部分
+export function parseComplexComponentInstance(instance) {
+    const { data, lowCodes = [], componentInstances = {} } = instance;
+    const styleLowCode = lowCodes.find((item) => item.name == 'style');
+    // 默认样式加.
+    if ((styleLowCode === null || styleLowCode === void 0 ? void 0 : styleLowCode.code) && (styleLowCode === null || styleLowCode === void 0 ? void 0 : styleLowCode.code.match(/^&/m)) === null) {
+        // 没有添加过的才进行添加
+        styleLowCode.code = `&{
+      ${styleLowCode.code}
+    }`;
+    }
+    const keys = Object.keys(componentInstances);
+    if (keys.length > 1) {
+        instance.componentInstances = {
+            [getId()]: {
+                xComponent: {
+                    moduleName: 'gsd-h5-react',
+                    name: 'Container',
+                },
+                xIndex: 0,
+                properties: componentInstances,
+            },
+        };
+    }
+}

package/lib/esm/parser/cals/utils/version/utils.d.ts

@@ -0,0 +1,14 @@
+export declare function init(json: any): void;
+export declare function getId(): string;
+export declare function isComplexComponent(name?: string): string;
+export declare function isGsdH5ReactComponent(name?: string): string;
+export declare function addDefaultSlot(slotKey: string[], comp: any): void;
+export declare function addDefaultData(defaultData: any, comp: any): void;
+export declare function isComplexJSON(json: any): any;
+export declare function getComponentChildren(component: any): [string, unknown][];
+export declare function isWeAppId(key?: string): RegExpMatchArray;
+export declare function isEmptyObject(obj?: {}): boolean;
+export declare function isPlainObject(src: any): boolean;
+export declare function checkIsNeedAddFormWrapper(tree: any): boolean;
+export declare function findComponentInTree(tree: any, cb: (cmp: any, path: string) => any, path?: string): any;
+//# sourceMappingURL=utils.d.ts.map

package/lib/esm/parser/cals/utils/version/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/parser/cals/utils/version/utils.ts"],"names":[],"mappings":"AAKA,wBAAgB,IAAI,CAAC,IAAI,EAAE,GAAG,QA2B7B;AAED,wBAAgB,KAAK,WAEpB;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAK,UAQ3C;AAED,wBAAgB,qBAAqB,CAAC,IAAI,SAAK,UAQ9C;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAO,EAAE,IAAI,EAAE,GAAG,QAO/D;AAED,wBAAgB,cAAc,CAAC,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,QAKzD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,GAAG,OAItC;AAED,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,GAAG,uBASlD;AAED,wBAAgB,SAAS,CAAC,GAAG,SAAK,oBAEjC;AAED,wBAAgB,aAAa,CAAC,GAAG,KAAK,WAErC;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,GAAG,WAErC;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,GAAG,WAkBlD;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,GAAG,EAAE,IAAI,SAAK,GAAG,GAAG,CAmBlG"}

package/lib/esm/parser/cals/utils/version/utils.js

@@ -0,0 +1,129 @@
+import { COMPLEX_COMPONENT_KEYS, FORM_COMPONENT_KEYS, GSD_H5_REACT_COMPONENT_KEYS } from './config';
+import merge from 'lodash/merge';
+const ids = [];
+let maxId = 10000;
+export function init(json) {
+    const { pageInstanceList = [] } = json;
+    const comps = [];
+    pageInstanceList.forEach((instance, index) => {
+        const { componentInstances } = instance;
+        for (const i in componentInstances) {
+            ids.push(i);
+            const comp = componentInstances[i];
+            comps.push(comp);
+        }
+    });
+    while (true) {
+        const topComp = comps.pop();
+        if (!topComp) {
+            break;
+        }
+        const keys = Object.keys(topComp['properties'] || {});
+        if (keys.length > 0) {
+            keys.forEach((key) => {
+                ids.push(key);
+                const _comp = topComp['properties'][key];
+                comps.push(_comp);
+            });
+        }
+    }
+    const idNums = ids.map((id) => parseInt(id.replace('id', ''))).filter((item) => !isNaN(item));
+    maxId = Math.max(...idNums);
+}
+export function getId() {
+    return `id${++maxId}`;
+}
+export function isComplexComponent(name = '') {
+    const bigoName = COMPLEX_COMPONENT_KEYS.map((item) => {
+        return {
+            key: item.toLocaleLowerCase(),
+            compName: item,
+        };
+    }).find((item) => item.key === name.toLocaleLowerCase());
+    return bigoName === null || bigoName === void 0 ? void 0 : bigoName.compName;
+}
+export function isGsdH5ReactComponent(name = '') {
+    const bigoName = GSD_H5_REACT_COMPONENT_KEYS.map((item) => {
+        return {
+            key: item.toLocaleLowerCase(),
+            compName: item,
+        };
+    }).find((item) => item.key === name.toLocaleLowerCase());
+    return bigoName === null || bigoName === void 0 ? void 0 : bigoName.compName;
+}
+export function addDefaultSlot(slotKey = [], comp) {
+    comp.properties = comp.properties || {};
+    slotKey.map((key) => {
+        comp.properties[key] = comp.properties[key] || {
+            properties: {},
+        };
+    });
+}
+export function addDefaultData(defaultData, comp) {
+    // @ts-ignore
+    comp.xProps = comp.xProps || {};
+    comp.xProps.data = comp.xProps.data || {};
+    comp.xProps.data = merge(defaultData, comp.xProps.data);
+}
+export function isComplexJSON(json) {
+    // FIX: pure render 组件无法通过该方法判断
+    // 在 v2 导出时会有 isComposite 的标识字段可识别
+    return json.isComposite || Object.keys((json === null || json === void 0 ? void 0 : json.dataForm) || {}).length > 0;
+}
+export function getComponentChildren(component) {
+    if (!component) {
+        return [];
+    }
+    const { properties } = component;
+    if (!properties) {
+        return [];
+    }
+    return Object.entries(properties).sort((a, b) => (a['x-index'] || 0) - (b['x-index'] || 0));
+}
+export function isWeAppId(key = '') {
+    return key.match(/^id\d+$/);
+}
+export function isEmptyObject(obj = {}) {
+    return Object.keys(obj).length === 0;
+}
+export function isPlainObject(src) {
+    return Object.prototype.toString.call(src) === '[object Object]';
+}
+export function checkIsNeedAddFormWrapper(tree) {
+    let isNeedAddFormWrapper = false;
+    findComponentInTree(tree, (comp) => {
+        const { xComponent } = comp;
+        if (xComponent && xComponent.name) {
+            const lowerCaseName = xComponent.name.toLocaleLowerCase();
+            // 存在 Form 组件时，不需要加最外层 Form
+            if (lowerCaseName === 'form') {
+                isNeedAddFormWrapper = false;
+                return true;
+            }
+            // 当存在 Input 类型组件，而没有 Form 组件时，需要加最外层 Form
+            isNeedAddFormWrapper = FORM_COMPONENT_KEYS.some((key) => key.toLocaleLowerCase() === lowerCaseName);
+            return isNeedAddFormWrapper;
+        }
+    });
+    return isNeedAddFormWrapper;
+}
+export function findComponentInTree(tree, cb, path = '') {
+    // tree.path = path
+    const stop = cb(tree, path);
+    if (stop) {
+        return tree;
+    }
+    const { properties } = tree;
+    if (!properties) {
+        return;
+    }
+    // eslint-disable-next-line guard-for-in
+    for (const id in properties) {
+        const node = properties[id];
+        const compPath = path ? `${path}.${id}` : id;
+        const found = findComponentInTree(node, cb, compPath);
+        if (found) {
+            return found;
+        }
+    }
+}