mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-04-17 02:48:05 +00:00
chore: delete useless codes
This commit is contained in:
1ncounter
parent
03f7c76284
commit
fedbbca845
@ -3,7 +3,8 @@
|
||||
"workspaces": {
|
||||
"packages": [
|
||||
"packages/*",
|
||||
"runtime/*"
|
||||
"runtime/*",
|
||||
"examples/*"
|
||||
],
|
||||
"nohoist": [
|
||||
"**/css-modules-typescript-loader",
|
||||
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('../../babel.config');
|
||||
@ -1,45 +0,0 @@
|
||||
{
|
||||
"entry": {
|
||||
"AliLowCodeEngine": "../engine/src/index.ts",
|
||||
"ReactSimulatorRenderer": "../react-simulator-renderer/src/index.ts"
|
||||
},
|
||||
"vendor": false,
|
||||
"devServer": {
|
||||
"liveReload": false,
|
||||
"hot": false
|
||||
},
|
||||
"library": "[name]",
|
||||
"publicPath": "/",
|
||||
"externals": {
|
||||
"react": "var window.React",
|
||||
"react-dom": "var window.ReactDOM",
|
||||
"prop-types": "var window.PropTypes",
|
||||
"@alifd/next": "var window.Next",
|
||||
"rax": "var window.Rax",
|
||||
"@alilc/lowcode-engine": "var window.AliLowCodeEngine",
|
||||
"@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
|
||||
"moment": "var moment",
|
||||
"lodash": "var _"
|
||||
},
|
||||
"plugins": [
|
||||
[
|
||||
"build-plugin-react-app"
|
||||
],
|
||||
[
|
||||
"build-plugin-fusion",
|
||||
{
|
||||
"themePackage": "@alifd/theme-lowcode-light",
|
||||
"externalNext": "umd"
|
||||
}
|
||||
],
|
||||
[
|
||||
"build-plugin-moment-locales",
|
||||
{
|
||||
"locales": [
|
||||
"zh-cn"
|
||||
]
|
||||
}
|
||||
],
|
||||
"./build.plugin.js"
|
||||
]
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
|
||||
const fse = require('fs-extra');
|
||||
// read from lerna
|
||||
const lernaConfig = JSON.parse(fse.readFileSync('../../lerna.json', 'utf8'));
|
||||
const { version } = lernaConfig;
|
||||
|
||||
module.exports = ({ context, onGetWebpackConfig }) => {
|
||||
onGetWebpackConfig((config) => {
|
||||
config.resolve.plugin('tsconfigpaths').use(TsconfigPathsPlugin, [
|
||||
{
|
||||
configFile: './tsconfig.json',
|
||||
},
|
||||
]);
|
||||
config
|
||||
.plugin('define')
|
||||
.use(context.webpack.DefinePlugin, [{
|
||||
VERSION_PLACEHOLDER: JSON.stringify(version),
|
||||
}]);
|
||||
config.plugins.delete('hot');
|
||||
config.devServer.hot(false);
|
||||
if (context.command === 'start') {
|
||||
config.devtool('inline-source-map');
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -1,47 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const { join } = require('path');
|
||||
const esModules = [].join('|');
|
||||
const pkgNames = fs.readdirSync(join('..')).filter(pkgName => !pkgName.startsWith('.'));
|
||||
|
||||
const jestConfig = {
|
||||
// transform: {
|
||||
// '^.+\\.[jt]sx?$': 'babel-jest',
|
||||
// // '^.+\\.(ts|tsx)$': 'ts-jest',
|
||||
// // '^.+\\.(js|jsx)$': 'babel-jest',
|
||||
// },
|
||||
// testMatch: ['**/node-children.test.ts'],
|
||||
// testMatch: ['**/plugin-manager.test.ts'],
|
||||
// testMatch: ['**/history/history.test.ts'],
|
||||
// testMatch: ['**/document-model.test.ts'],
|
||||
// testMatch: ['**/prop.test.ts'],
|
||||
// testMatch: ['(/tests?/.*(test))\\.[jt]s$'],
|
||||
transformIgnorePatterns: [
|
||||
`/node_modules/(?!${esModules})/`,
|
||||
],
|
||||
setupFiles: ['./tests/fixtures/unhandled-rejection.ts'],
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
|
||||
collectCoverage: false,
|
||||
collectCoverageFrom: [
|
||||
'src/**/*.ts',
|
||||
'!src/**/*.d.ts',
|
||||
'!src/icons/**',
|
||||
'!src/locale/**',
|
||||
'!src/builtin-simulator/utils/**',
|
||||
'!src/plugin/sequencify.ts',
|
||||
'!src/document/node/exclusive-group.ts',
|
||||
'!src/document/node/props/value-to-source.ts',
|
||||
'!src/builtin-simulator/live-editing/live-editing.ts',
|
||||
'!src/designer/offset-observer.ts',
|
||||
'!src/designer/clipboard.ts',
|
||||
'!src/designer/scroller.ts',
|
||||
'!src/builtin-simulator/host.ts',
|
||||
'!**/node_modules/**',
|
||||
'!**/vendor/**',
|
||||
],
|
||||
};
|
||||
|
||||
// 只对本仓库内的 pkg 做 mapping
|
||||
jestConfig.moduleNameMapper = {};
|
||||
jestConfig.moduleNameMapper[`^@alilc/lowcode\\-(${pkgNames.join('|')})$`] = '<rootDir>/../$1/src';
|
||||
|
||||
module.exports = jestConfig;
|
||||
@ -1,26 +0,0 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-ignitor",
|
||||
"version": "1.3.2",
|
||||
"description": "点火器，bootstrap lce project",
|
||||
"main": "lib/index.js",
|
||||
"private": true,
|
||||
"files": [
|
||||
"dist",
|
||||
"es",
|
||||
"lib"
|
||||
],
|
||||
"scripts": {
|
||||
"start": "build-scripts start --disable-open --port 5555"
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@alib/build-scripts": "^0.1.18",
|
||||
"fs-extra": "^10.0.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "http",
|
||||
"url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/ignitor"
|
||||
},
|
||||
"bugs": "https://github.com/alibaba/lowcode-engine/issues",
|
||||
"homepage": "https://github.com/alibaba/lowcode-engine/#readme"
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
@ -1,20 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>LowCodeEngine Editor DEMO</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>
|
||||
This project only provides engine resource files. For usage, go for
|
||||
<a href="https://github.com/alibaba/lowcode-demo" target="_blank">Lowcode Demo</a>
|
||||
</h1>
|
||||
<h2>
|
||||
For local debugging of lowcode engine, please visit
|
||||
<a href="https://lowcode-engine.cn/site/docs/participate/prepare" target="_blank">proxy documentation</a>
|
||||
to get more information.
|
||||
</h2>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "lib"
|
||||
},
|
||||
"include": [
|
||||
"./src/"
|
||||
]
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"plugins": [
|
||||
"@alilc/build-plugin-lce",
|
||||
"build-plugin-fusion",
|
||||
["build-plugin-moment-locales", {
|
||||
"locales": ["zh-cn"]
|
||||
}]
|
||||
]
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"plugins": [
|
||||
"@alilc/build-plugin-lce",
|
||||
"@alilc/lowcode-test-mate/plugin/index.ts"
|
||||
]
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
{
|
||||
"entry": {
|
||||
"react-renderer": "src/index"
|
||||
},
|
||||
"sourceMap": true,
|
||||
"library": "AliLowCodeReactRenderer",
|
||||
"libraryTarget": "umd",
|
||||
"externals": {
|
||||
"react": "var window.React",
|
||||
"react-dom": "var window.ReactDOM",
|
||||
"prop-types": "var window.PropTypes",
|
||||
"@alifd/next": "var Next",
|
||||
"moment": "var window.moment"
|
||||
},
|
||||
"polyfill": false,
|
||||
"outputDir": "dist",
|
||||
"vendor": false,
|
||||
"ignoreHtmlTemplate": true,
|
||||
"plugins": [
|
||||
"build-plugin-react-app",
|
||||
["build-plugin-fusion", {
|
||||
"externalNext": "umd"
|
||||
}],
|
||||
["build-plugin-moment-locales", {
|
||||
"locales": ["zh-cn"]
|
||||
}]
|
||||
]
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
---
|
||||
title: 复杂组件
|
||||
order: 2
|
||||
---
|
||||
|
||||
````jsx
|
||||
import React, { PureComponent } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import ReactRenderer from '@alilc/lowcode-react-renderer';
|
||||
import schema from './schemas/compose';
|
||||
import components from './config/components/index';
|
||||
import utils from './config/utils';
|
||||
import constants from './config/constants';
|
||||
|
||||
class Demo extends PureComponent {
|
||||
static displayName = 'renderer-demo';
|
||||
render() {
|
||||
return (
|
||||
<div className="demo">
|
||||
<ReactRenderer
|
||||
key={schema.fileName}
|
||||
schema={schema}
|
||||
components={components}
|
||||
appHelper={{
|
||||
utils,
|
||||
constants
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render((
|
||||
<Demo />
|
||||
), mountNode);
|
||||
````
|
||||
@ -1,11 +0,0 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
export default class AView extends PureComponent {
|
||||
static displayName = 'A';
|
||||
|
||||
static version = '0.0.0';
|
||||
|
||||
render() {
|
||||
return <a {...this.props} />;
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
export default class DivView extends PureComponent {
|
||||
static displayName = 'Div';
|
||||
|
||||
static version = '0.0.0';
|
||||
|
||||
render() {
|
||||
return <div {...this.props} />;
|
||||
}
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
export default class ImageView extends PureComponent {
|
||||
static displayName = 'Image';
|
||||
|
||||
static version = '0.0.0';
|
||||
|
||||
static defaultProps = {
|
||||
src: '//img.alicdn.com/tfs/TB1knm4bqNj0u4jSZFyXXXgMVXa-240-240.png_100x100.jpg',
|
||||
};
|
||||
|
||||
render() {
|
||||
return <img {...this.props} />;
|
||||
}
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export default class TextView extends PureComponent {
|
||||
static displayName = 'Text';
|
||||
|
||||
static version = '0.0.0';
|
||||
|
||||
static propTypes = {
|
||||
text: PropTypes.string,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { text, ...restProps } = this.props;
|
||||
let textNode = text;
|
||||
// 强制类型转换
|
||||
try {
|
||||
textNode = text.toString();
|
||||
} catch (e) {
|
||||
textNode = '';
|
||||
}
|
||||
if (window.__ctx && window.__ctx.canvasAppHelper) {
|
||||
textNode = textNode || 'Text';
|
||||
}
|
||||
return <span {...restProps}>{textNode}</span>;
|
||||
}
|
||||
}
|
||||
@ -1,175 +0,0 @@
|
||||
import Div from './Div';
|
||||
import Text from './Text';
|
||||
import A from './A';
|
||||
import Image from './Image';
|
||||
|
||||
import {
|
||||
Balloon,
|
||||
Button,
|
||||
Checkbox,
|
||||
Dropdown,
|
||||
Grid,
|
||||
Menu,
|
||||
Select,
|
||||
Tab,
|
||||
Table,
|
||||
Radio,
|
||||
Pagination,
|
||||
Input,
|
||||
Icon,
|
||||
Switch,
|
||||
Tree,
|
||||
NumberPicker,
|
||||
Collapse,
|
||||
Range,
|
||||
Dialog,
|
||||
Overlay,
|
||||
Search,
|
||||
Loading,
|
||||
MenuButton,
|
||||
Badge,
|
||||
Message,
|
||||
Slider,
|
||||
SplitButton,
|
||||
Paragraph,
|
||||
Nav,
|
||||
Breadcrumb,
|
||||
Step,
|
||||
DatePicker,
|
||||
TimePicker,
|
||||
Rating,
|
||||
Upload,
|
||||
Tag,
|
||||
Card,
|
||||
Calendar,
|
||||
Progress,
|
||||
Cascader,
|
||||
ConfigProvider,
|
||||
Animate,
|
||||
CascaderSelect,
|
||||
Transfer,
|
||||
TreeSelect,
|
||||
Timeline,
|
||||
VirtualList,
|
||||
} from '@alifd/next';
|
||||
|
||||
const { Row, Col } = Grid;
|
||||
const {
|
||||
Item: MenuItem,
|
||||
Group: MenuGroup,
|
||||
SubMenu,
|
||||
PopupItem: MenuPopupItem,
|
||||
CheckboxItem: MenuCheckboxItem,
|
||||
RadioItem: MenuRadioItem,
|
||||
Divider: MenuDivider,
|
||||
} = Menu;
|
||||
const { Item: TabItem } = Tab;
|
||||
const { Column: TableColumn, ColumnGroup: TableColumnGroup } = Table;
|
||||
const { Group: ButtonGroup } = Button;
|
||||
const { Group: RadioGroup } = Radio;
|
||||
const { Node: TreeNode } = Tree;
|
||||
const { Panel: CollapsePanel } = Collapse;
|
||||
const { Tooltip } = Balloon;
|
||||
const { AutoComplete: SelectAutoComplete, OptionGroup: SelectOptionGroup, Option: SelectOption } = Select;
|
||||
const { Item: MenuButtonItem } = MenuButton;
|
||||
const { Item: StepItem } = Step;
|
||||
const { Item: NavItem, SubNav, PopupItem: NavPopItem, Group: NavGroup } = Nav;
|
||||
const { Item: BreadcrumbItem } = Breadcrumb;
|
||||
const { MonthPicker, RangePicker, YearPicker } = DatePicker;
|
||||
const { Card: UploadCard, Dragger: UploadDragger, Selecter: UploadSelecter } = Upload;
|
||||
const { Closeable: TagCloseable, Selectable: TagSelectable } = Tag;
|
||||
const { Popup } = Overlay;
|
||||
const { Node: TreeSelectNode } = TreeSelect;
|
||||
const { Item: TimelineItem } = Timeline;
|
||||
|
||||
export default {
|
||||
Div,
|
||||
A,
|
||||
Text,
|
||||
Image,
|
||||
|
||||
Balloon,
|
||||
Tooltip,
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Checkbox,
|
||||
Row,
|
||||
Col,
|
||||
Select,
|
||||
SelectAutoComplete,
|
||||
SelectOptionGroup,
|
||||
SelectOption,
|
||||
Dropdown,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuGroup,
|
||||
MenuDivider,
|
||||
SubMenu,
|
||||
MenuPopupItem,
|
||||
MenuCheckboxItem,
|
||||
MenuRadioItem,
|
||||
MenuButton,
|
||||
MenuButtonItem,
|
||||
Loading,
|
||||
Tab,
|
||||
TabItem,
|
||||
Table,
|
||||
TableColumn,
|
||||
TableColumnGroup,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Pagination,
|
||||
Input,
|
||||
Icon,
|
||||
Switch,
|
||||
Tree,
|
||||
TreeNode,
|
||||
NumberPicker,
|
||||
Collapse,
|
||||
Dialog,
|
||||
Overlay,
|
||||
Popup,
|
||||
CollapsePanel,
|
||||
Range,
|
||||
Search,
|
||||
Badge,
|
||||
Message,
|
||||
Slider,
|
||||
SplitButton,
|
||||
Paragraph,
|
||||
Nav,
|
||||
NavItem,
|
||||
NavPopItem,
|
||||
NavGroup,
|
||||
SubNav,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
Rating,
|
||||
Step,
|
||||
StepItem,
|
||||
DatePicker,
|
||||
MonthPicker,
|
||||
RangePicker,
|
||||
YearPicker,
|
||||
TimePicker,
|
||||
Upload,
|
||||
UploadCard,
|
||||
UploadDragger,
|
||||
UploadSelecter,
|
||||
Tag,
|
||||
TagCloseable,
|
||||
TagSelectable,
|
||||
Card,
|
||||
Calendar,
|
||||
Progress,
|
||||
Cascader,
|
||||
ConfigProvider,
|
||||
Animate,
|
||||
CascaderSelect,
|
||||
Transfer,
|
||||
TreeSelect,
|
||||
TreeSelectNode,
|
||||
Timeline,
|
||||
TimelineItem,
|
||||
VirtualList,
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
export default {
|
||||
name: 'renderer-demo',
|
||||
};
|
||||
10
packages/react-renderer/demo/config/utils.js
vendored
10
packages/react-renderer/demo/config/utils.js
vendored
@ -1,10 +0,0 @@
|
||||
import { Message } from '@alifd/next';
|
||||
import moment from 'moment';
|
||||
|
||||
export default {
|
||||
Message,
|
||||
moment,
|
||||
test(msg) {
|
||||
this.Message.notice(msg);
|
||||
},
|
||||
};
|
||||
@ -1,37 +0,0 @@
|
||||
---
|
||||
title: 数据源使用
|
||||
order: 4
|
||||
---
|
||||
|
||||
````jsx
|
||||
import React, { PureComponent } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import ReactRenderer from '@alilc/lowcode-react-renderer';
|
||||
import schema from './schemas/dataSource';
|
||||
import components from './config/components/index';
|
||||
import utils from './config/utils';
|
||||
import constants from './config/constants';
|
||||
|
||||
class Demo extends PureComponent {
|
||||
static displayName = 'renderer-demo';
|
||||
render() {
|
||||
return (
|
||||
<div className="demo">
|
||||
<ReactRenderer
|
||||
key={schema.fileName}
|
||||
schema={schema}
|
||||
components={components}
|
||||
appHelper={{
|
||||
utils,
|
||||
constants
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render((
|
||||
<Demo />
|
||||
), mountNode);
|
||||
````
|
||||
@ -1,42 +0,0 @@
|
||||
---
|
||||
title: 国际化
|
||||
order: 5
|
||||
---
|
||||
|
||||
````jsx
|
||||
import React, { PureComponent } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import ReactRenderer from '@alilc/lowcode-react-renderer';
|
||||
import schema from './schemas/i18n';
|
||||
import components from './config/components/index';
|
||||
import utils from './config/utils';
|
||||
import constants from './config/constants';
|
||||
|
||||
class Demo extends PureComponent {
|
||||
static displayName = 'renderer-demo';
|
||||
render() {
|
||||
return (
|
||||
<div className="demo">
|
||||
<ReactRenderer
|
||||
key={schema.fileName}
|
||||
schema={schema}
|
||||
components={components}
|
||||
appHelper={{
|
||||
utils,
|
||||
constants
|
||||
}}
|
||||
locale="zh-CN"
|
||||
messages={{
|
||||
"hello": "你好",
|
||||
"china": "中国"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render((
|
||||
<Demo />
|
||||
), mountNode);
|
||||
````
|
||||
@ -1,37 +0,0 @@
|
||||
---
|
||||
title: 列表
|
||||
order: 1
|
||||
---
|
||||
|
||||
````jsx
|
||||
import React, { PureComponent } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import ReactRenderer from '@alilc/lowcode-react-renderer';
|
||||
import schema from './schemas/list';
|
||||
import components from './config/components/index';
|
||||
import utils from './config/utils';
|
||||
import constants from './config/constants';
|
||||
|
||||
class Demo extends PureComponent {
|
||||
static displayName = 'renderer-demo';
|
||||
render() {
|
||||
return (
|
||||
<div className="demo">
|
||||
<ReactRenderer
|
||||
key={schema.fileName}
|
||||
schema={schema}
|
||||
components={components}
|
||||
appHelper={{
|
||||
utils,
|
||||
constants
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render((
|
||||
<Demo />
|
||||
), mountNode);
|
||||
````
|
||||
61
packages/react-renderer/demo/schemas/compose.js
vendored
61
packages/react-renderer/demo/schemas/compose.js
vendored
@ -1,61 +0,0 @@
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
componentName: 'Page',
|
||||
fileName: 'compose',
|
||||
props: {
|
||||
},
|
||||
children: [
|
||||
{
|
||||
"componentName": "Dropdown",
|
||||
"props": {
|
||||
"trigger": [
|
||||
{
|
||||
"componentName": "Button",
|
||||
"props": {
|
||||
"type": "primary"
|
||||
},
|
||||
"children": "确定"
|
||||
}
|
||||
],
|
||||
"triggerType": "click"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"componentName": "Menu",
|
||||
"props": {
|
||||
"style": {
|
||||
"width": 200
|
||||
}
|
||||
},
|
||||
"children": [
|
||||
{ "componentName": "MenuItem", "props": {}, "children": "Option 1" },
|
||||
{ "componentName": "MenuItem", "props": { "disabled": false }, "children": "option 2" },
|
||||
{ "componentName": "MenuItem", "props": { "disabled": false }, "children": "option 3" }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "Menu",
|
||||
"props": {
|
||||
"style": {
|
||||
"width": 200
|
||||
}
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"componentName": "MenuItem",
|
||||
"props": {
|
||||
},
|
||||
"children": "Option 1"
|
||||
},
|
||||
{
|
||||
"componentName": "MenuItem",
|
||||
"props": {
|
||||
},
|
||||
"children": "Option 2"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -1,37 +0,0 @@
|
||||
export default {
|
||||
componentName: 'Page',
|
||||
fileName: 'dataSource',
|
||||
props: {},
|
||||
children: [{
|
||||
componentName: 'Div',
|
||||
props: {},
|
||||
children: [{
|
||||
componentName: 'Text',
|
||||
props: {
|
||||
text: '{{this.item.title}}',
|
||||
},
|
||||
}, {
|
||||
componentName: 'Switch',
|
||||
props: {
|
||||
checkedChildren: '开',
|
||||
unCheckedChildren: '关',
|
||||
checked: '{{this.item.done}}',
|
||||
},
|
||||
}],
|
||||
loop: '{{this.dataSourceMap.todos.data}}',
|
||||
}],
|
||||
dataSource: {
|
||||
list: [{
|
||||
id: 'todos',
|
||||
isInit: true,
|
||||
type: 'jsonp',
|
||||
options: {
|
||||
method: 'GET',
|
||||
uri: 'https://mocks.alibaba-inc.com/mock/D8iUX7zB/todo_getAll',
|
||||
},
|
||||
dataHandler: function dataHandler(data) {
|
||||
return data.data;
|
||||
},
|
||||
}],
|
||||
},
|
||||
};
|
||||
20
packages/react-renderer/demo/schemas/i18n.js
vendored
20
packages/react-renderer/demo/schemas/i18n.js
vendored
@ -1,20 +0,0 @@
|
||||
export default {
|
||||
componentName: 'Page',
|
||||
fileName: 'i18n',
|
||||
props: {},
|
||||
children: [{
|
||||
componentName: 'Div',
|
||||
props: {},
|
||||
children: [{
|
||||
componentName: 'Text',
|
||||
props: {
|
||||
text: "{{this.i18n('hello')}}",
|
||||
},
|
||||
}, {
|
||||
componentName: 'Text',
|
||||
props: {
|
||||
text: "{{this.i18n('china')}}",
|
||||
},
|
||||
}],
|
||||
}],
|
||||
};
|
||||
225
packages/react-renderer/demo/schemas/list.js
vendored
225
packages/react-renderer/demo/schemas/list.js
vendored
@ -1,225 +0,0 @@
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
componentName: 'Page',
|
||||
fileName: 'tab_article',
|
||||
props: {
|
||||
style: {
|
||||
paddingTop: 20,
|
||||
paddingRight: 20,
|
||||
paddingLeft: 20
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
style: {
|
||||
marginTop: 5,
|
||||
marginBottom: 15,
|
||||
borderBottom: '1px solid rgba(244,244,244)'
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: 15
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Text',
|
||||
props: {
|
||||
text: '{{this.item.title}}',
|
||||
style: {
|
||||
color: 'rgba(51,51,51)'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
componentName: 'Text',
|
||||
props: {
|
||||
text: '{{this.item.datetime}}',
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
float: 'right'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
style: {
|
||||
paddingBottom: 15,
|
||||
fontSize: '13px',
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
children: '{{this.item.description}}'
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: 15
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Button',
|
||||
props: {
|
||||
type: 'normal',
|
||||
style: {
|
||||
marginRight: 5,
|
||||
marginLeft: 5
|
||||
},
|
||||
size: 'small'
|
||||
},
|
||||
children: '{{this.item}}',
|
||||
loop: '{{this.item.tags}}'
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: 15,
|
||||
float: 'right'
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
marginRight: 5,
|
||||
marginBottom: 15,
|
||||
marginLeft: 5,
|
||||
fontSize: 12,
|
||||
color: '#666',
|
||||
float: 'none'
|
||||
}
|
||||
},
|
||||
children: '{{"点赞："+this.item.star}}'
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
marginRight: 5,
|
||||
marginBottom: 15,
|
||||
marginLeft: 5,
|
||||
fontSize: 12,
|
||||
color: '#666',
|
||||
float: 'none'
|
||||
}
|
||||
},
|
||||
children: '{{"喜爱："+this.item.like}}'
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
style: {
|
||||
display: 'inline-block',
|
||||
marginRight: 5,
|
||||
marginBottom: 15,
|
||||
marginLeft: 5,
|
||||
fontSize: 12,
|
||||
color: '#66',
|
||||
float: 'none'
|
||||
}
|
||||
},
|
||||
children: '{{"评论："+this.item.comment}}'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loop: '{{this.state.dataSource}}'
|
||||
},
|
||||
{
|
||||
componentName: 'Pagination',
|
||||
props: {
|
||||
shape: 'normal',
|
||||
type: 'normal',
|
||||
size: 'medium',
|
||||
style: {
|
||||
marginTop: 10,
|
||||
marginBottom: 30,
|
||||
textAlign: 'right'
|
||||
},
|
||||
onChange: function onChange(current, e) {
|
||||
//页码发生改变时的回调函数
|
||||
//@param {Number} current 改变后的页码数
|
||||
//@param {Object} e 点击事件对象
|
||||
this.page.reloadDataSource();
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
dataSource: {
|
||||
dataHandler: function dataHandler(dataMap) {
|
||||
const dataSource = [
|
||||
{
|
||||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||
description:
|
||||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||
tags: ['直播', '大促', '简介'],
|
||||
datetime: '2017年12月12日 18:00',
|
||||
star: Math.floor(Math.random() * 100) + 100,
|
||||
like: Math.floor(Math.random() * 100) + 200,
|
||||
comment: Math.floor(Math.random() * 100) + 100
|
||||
},
|
||||
{
|
||||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||
description:
|
||||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||
tags: ['直播', '大促', '简介'],
|
||||
datetime: '2017年12月12日 18:00',
|
||||
star: Math.floor(Math.random() * 100) + 100,
|
||||
like: Math.floor(Math.random() * 100) + 200,
|
||||
comment: Math.floor(Math.random() * 100) + 100
|
||||
},
|
||||
{
|
||||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||
description:
|
||||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||
tags: ['直播', '大促', '简介'],
|
||||
datetime: '2017年12月12日 18:00',
|
||||
star: Math.floor(Math.random() * 100) + 100,
|
||||
like: Math.floor(Math.random() * 100) + 200,
|
||||
comment: Math.floor(Math.random() * 100) + 100
|
||||
},
|
||||
{
|
||||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||
description:
|
||||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||
tags: ['直播', '大促', '简介'],
|
||||
datetime: '2017年12月12日 18:00',
|
||||
star: Math.floor(Math.random() * 100) + 100,
|
||||
like: Math.floor(Math.random() * 100) + 200,
|
||||
comment: Math.floor(Math.random() * 100) + 100
|
||||
},
|
||||
{
|
||||
title: '越夏越嗨皮-7月官方营销活动-技能提升方向',
|
||||
description:
|
||||
'商家通过V任务选择主播并达成合作，费用按照商品链接计算，一个商品为一个价格，建议主播在一场直播里最多接60个商品，并提供不少于两个小时的直播服务，每个商品讲解时间不少于5分钟。 ',
|
||||
tags: ['直播', '大促', '简介'],
|
||||
datetime: '2017年12月12日 18:00',
|
||||
star: Math.floor(Math.random() * 100) + 100,
|
||||
like: Math.floor(Math.random() * 100) + 200,
|
||||
comment: Math.floor(Math.random() * 100) + 100
|
||||
}
|
||||
];
|
||||
return {
|
||||
dataSource
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
367
packages/react-renderer/demo/schemas/table.js
vendored
367
packages/react-renderer/demo/schemas/table.js
vendored
@ -1,367 +0,0 @@
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
componentName: 'Page',
|
||||
fileName: 'filterTable',
|
||||
props: {
|
||||
style: {
|
||||
paddingRight: 20,
|
||||
paddingLeft: 20
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Table',
|
||||
props: {
|
||||
hasBorder: false,
|
||||
hasHeader: true,
|
||||
dataSource: [
|
||||
{
|
||||
id: 1,
|
||||
title: '2017秋冬新款背带裙复古格子连衣裙清新背心裙a字裙短裙子',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '2017秋冬新款 高质感特定纱线欧美宽松马海毛羊毛毛衣',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '日式天然玉米皮草编碗垫锅垫隔热垫茶垫加厚餐垫GD-29',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '2017秋冬新款 绑带腰封设计感超顺滑质感落肩铜氨丝连衣裙',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '日式糖果色陶瓷柄不锈钢餐具西餐牛扒刀叉勺子咖啡勺',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '日式和风深蓝素色文艺餐巾餐垫围裙锅垫隔热手套厨房桌布',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: '日式雪点樱花手绘陶瓷餐具米饭碗拉面碗寿司盘子汤碗',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: '川岛屋 釉下彩复古日式陶瓷盘子菜盘圆盘调味碟 米饭碗日式餐具',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'TableColumn',
|
||||
props: {
|
||||
dataIndex: 'title',
|
||||
title: '问题描述',
|
||||
resizable: false
|
||||
}
|
||||
},
|
||||
{
|
||||
componentName: 'TableColumn',
|
||||
props: {
|
||||
title: '问题分类',
|
||||
dataIndex: 'type'
|
||||
}
|
||||
},
|
||||
{
|
||||
componentName: 'TableColumn',
|
||||
props: {
|
||||
title: '发布时间',
|
||||
dataIndex: 'publishTime'
|
||||
}
|
||||
},
|
||||
{
|
||||
componentName: 'TableColumn',
|
||||
props: {
|
||||
title: '状态',
|
||||
dataIndex: 'publishStatus',
|
||||
cell: [
|
||||
{
|
||||
componentName: 'Button',
|
||||
props: {
|
||||
type: 'normal',
|
||||
size: 'small',
|
||||
component: 'div',
|
||||
text: true,
|
||||
ghost: false,
|
||||
style: {
|
||||
width: '30px',
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
cursor: 'auto',
|
||||
background: '#f7f8fa'
|
||||
}
|
||||
},
|
||||
children: '已发布',
|
||||
condition: false
|
||||
},
|
||||
{
|
||||
componentName: 'Text',
|
||||
props: {
|
||||
text: '已发布',
|
||||
style: {
|
||||
paddingTop: 2,
|
||||
paddingRight: 5,
|
||||
paddingBottom: 2,
|
||||
paddingLeft: 5,
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
borderRadius: 3,
|
||||
cursor: 'auto',
|
||||
background: '#f7f8fa'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
componentName: 'TableColumn',
|
||||
props: {
|
||||
title: '操作',
|
||||
cell: [
|
||||
{
|
||||
componentName: 'Button',
|
||||
props: {
|
||||
type: 'normal',
|
||||
component: 'a',
|
||||
size: 'medium',
|
||||
loading: false,
|
||||
text: true,
|
||||
style: {
|
||||
paddingRight: 10,
|
||||
paddingLeft: 10,
|
||||
color: '#2077ff'
|
||||
}
|
||||
},
|
||||
children: '解决'
|
||||
},
|
||||
{
|
||||
componentName: 'Button',
|
||||
props: {
|
||||
type: 'normal',
|
||||
component: 'a',
|
||||
text: true,
|
||||
style: {
|
||||
paddingRight: 10,
|
||||
paddingLeft: 10,
|
||||
color: '#2077ff'
|
||||
}
|
||||
},
|
||||
children: '详情'
|
||||
},
|
||||
{
|
||||
componentName: 'Button',
|
||||
props: {
|
||||
type: 'normal',
|
||||
text: true,
|
||||
component: 'a',
|
||||
style: {
|
||||
paddingRight: 10,
|
||||
paddingLeft: 10,
|
||||
color: '#2077ff'
|
||||
}
|
||||
},
|
||||
children: '分类'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
loopArgs: ['', '']
|
||||
},
|
||||
{
|
||||
componentName: 'Div',
|
||||
props: {
|
||||
style: {
|
||||
textAlign: 'right'
|
||||
}
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Pagination',
|
||||
props: {
|
||||
shape: 'normal',
|
||||
type: 'normal',
|
||||
size: 'medium',
|
||||
style: {
|
||||
marginTop: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
dataSource: {
|
||||
dataHandler: function dataHandler(dataMap) {
|
||||
let dataSource = [
|
||||
{
|
||||
id: 1,
|
||||
title: '2017秋冬新款背带裙复古格子连衣裙清新背心裙a字裙短裙子',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '2017秋冬新款 高质感特定纱线欧美宽松马海毛羊毛毛衣',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '日式天然玉米皮草编碗垫锅垫隔热垫茶垫加厚餐垫GD-29',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '2017秋冬新款 绑带腰封设计感超顺滑质感落肩铜氨丝连衣裙',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '日式糖果色陶瓷柄不锈钢餐具西餐牛扒刀叉勺子咖啡勺',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '日式和风深蓝素色文艺餐巾餐垫围裙锅垫隔热手套厨房桌布',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: '日式雪点樱花手绘陶瓷餐具米饭碗拉面碗寿司盘子汤碗',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: '川岛屋 釉下彩复古日式陶瓷盘子菜盘圆盘调味碟 米饭碗日式餐具',
|
||||
url: 'https://item.taobao.com/item.htm?id=558559528377',
|
||||
type: '清单',
|
||||
publishTime: '17-04-28 20:29:20',
|
||||
publishStatus: '已发布',
|
||||
pushStatus: '已推送至订阅号',
|
||||
operation: {
|
||||
edit: true
|
||||
}
|
||||
}
|
||||
];
|
||||
return {
|
||||
...dataMap,
|
||||
dataSource
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -1,37 +0,0 @@
|
||||
---
|
||||
title: 表格
|
||||
order: 1
|
||||
---
|
||||
|
||||
````jsx
|
||||
import React, { PureComponent } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import ReactRenderer from '@alilc/lowcode-react-renderer';
|
||||
import schema from './schemas/table';
|
||||
import components from './config/components/index';
|
||||
import utils from './config/utils';
|
||||
import constants from './config/constants';
|
||||
|
||||
class Demo extends PureComponent {
|
||||
static displayName = 'renderer-demo';
|
||||
render() {
|
||||
return (
|
||||
<div className="demo">
|
||||
<ReactRenderer
|
||||
key={schema.fileName}
|
||||
schema={schema}
|
||||
components={components}
|
||||
appHelper={{
|
||||
utils,
|
||||
constants
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render((
|
||||
<Demo />
|
||||
), mountNode);
|
||||
````
|
||||
@ -1,32 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const { join } = require('path');
|
||||
const esModules = [].join('|');
|
||||
const pkgNames = fs.readdirSync(join('..')).filter(pkgName => !pkgName.startsWith('.'));
|
||||
|
||||
const jestConfig = {
|
||||
// transform: {
|
||||
// '^.+\\.[jt]sx?$': 'babel-jest',
|
||||
// // '^.+\\.(ts|tsx)$': 'ts-jest',
|
||||
// // '^.+\\.(js|jsx)$': 'babel-jest',
|
||||
// },
|
||||
// testMatch: ['**/document/node/node.test.ts'],
|
||||
// testMatch: ['**/designer/builtin-hotkey.test.ts'],
|
||||
// testMatch: ['**/plugin/plugin-manager.test.ts'],
|
||||
// testMatch: ['(/tests?/.*(test))\\.[jt]s$'],
|
||||
transformIgnorePatterns: [
|
||||
`/node_modules/(?!${esModules})/`,
|
||||
],
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
|
||||
collectCoverage: true,
|
||||
collectCoverageFrom: [
|
||||
'src/**/*.ts',
|
||||
'!src/**/*.d.ts',
|
||||
'!**/node_modules/**',
|
||||
],
|
||||
};
|
||||
|
||||
// 只对本仓库内的 pkg 做 mapping
|
||||
jestConfig.moduleNameMapper = {};
|
||||
jestConfig.moduleNameMapper[`^@alilc/lowcode\\-(${pkgNames.join('|')})$`] = '<rootDir>/../$1/src';
|
||||
|
||||
module.exports = jestConfig;
|
||||
@ -1,47 +0,0 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-react-renderer",
|
||||
"version": "1.3.2",
|
||||
"description": "react renderer for ali lowcode engine",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
"files": [
|
||||
"lib",
|
||||
"es",
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"test": "build-scripts test --config build.test.json",
|
||||
"start": "build-scripts start",
|
||||
"build": "build-scripts build",
|
||||
"build:umd": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --config build.umd.json"
|
||||
},
|
||||
"keywords": [
|
||||
"lowcode",
|
||||
"engine",
|
||||
"react"
|
||||
],
|
||||
"dependencies": {
|
||||
"@alifd/next": "^1.21.16",
|
||||
"@alilc/lowcode-renderer-core": "1.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@alib/build-scripts": "^0.1.18",
|
||||
"@alifd/next": "^1.19.17",
|
||||
"build-plugin-fusion": "^0.1.0",
|
||||
"build-plugin-moment-locales": "^0.1.0",
|
||||
"react": "^16.4.1",
|
||||
"react-dom": "^16.4.1",
|
||||
"react-test-renderer": "^16"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
"registry": "https://registry.npmjs.org/"
|
||||
},
|
||||
"repository": {
|
||||
"type": "http",
|
||||
"url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/react-renderer"
|
||||
},
|
||||
"homepage": "https://github.com/alibaba/lowcode-engine/#readme",
|
||||
"gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6",
|
||||
"bugs": "https://github.com/alibaba/lowcode-engine/issues"
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
import React, { Component, PureComponent, createElement, createContext, forwardRef, ReactInstance, ContextType } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import {
|
||||
adapter,
|
||||
pageRendererFactory,
|
||||
componentRendererFactory,
|
||||
blockRendererFactory,
|
||||
addonRendererFactory,
|
||||
tempRendererFactory,
|
||||
rendererFactory,
|
||||
types,
|
||||
} from '@alilc/lowcode-renderer-core';
|
||||
import ConfigProvider from '@alifd/next/lib/config-provider';
|
||||
|
||||
window.React = React;
|
||||
(window as any).ReactDom = ReactDOM;
|
||||
|
||||
adapter.setRuntime({
|
||||
Component,
|
||||
PureComponent,
|
||||
createContext,
|
||||
createElement,
|
||||
forwardRef,
|
||||
findDOMNode: ReactDOM.findDOMNode,
|
||||
});
|
||||
|
||||
adapter.setRenderers({
|
||||
PageRenderer: pageRendererFactory(),
|
||||
ComponentRenderer: componentRendererFactory(),
|
||||
BlockRenderer: blockRendererFactory(),
|
||||
AddonRenderer: addonRendererFactory(),
|
||||
TempRenderer: tempRendererFactory(),
|
||||
DivRenderer: blockRendererFactory(),
|
||||
});
|
||||
|
||||
adapter.setConfigProvider(ConfigProvider);
|
||||
|
||||
function factory(): types.IRenderComponent {
|
||||
const Renderer = rendererFactory();
|
||||
return class ReactRenderer extends Renderer implements Component {
|
||||
readonly props: types.IRendererProps;
|
||||
|
||||
context: ContextType<any>;
|
||||
|
||||
setState: (
|
||||
state: types.IRendererState,
|
||||
callback?: () => void,
|
||||
) => void;
|
||||
|
||||
forceUpdate: (callback?: () => void) => void;
|
||||
|
||||
refs: {
|
||||
[key: string]: ReactInstance;
|
||||
};
|
||||
|
||||
constructor(props: types.IRendererProps, context: ContextType<any>) {
|
||||
super(props, context);
|
||||
}
|
||||
|
||||
isValidComponent(obj: any) {
|
||||
return obj?.prototype?.isReactComponent || obj?.prototype instanceof Component;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default factory();
|
||||
@ -1,865 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`React Renderer render basic case 1`] = `
|
||||
<div
|
||||
className="lce-page lce-test"
|
||||
style={
|
||||
Object {
|
||||
"padding": "0 5px 0 5px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
__id="node_dockcy8n9xed"
|
||||
className="next-box"
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "rgba(31,56,88,0.1)",
|
||||
"flexDirection": "column",
|
||||
"flexWrap": "nowrap",
|
||||
"msFlexDirection": "column",
|
||||
"msFlexWrap": "none",
|
||||
"padding": "12px 12px 12px 12px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
__id="node_dockcy8n9xee"
|
||||
className="next-box"
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#ffffff",
|
||||
"flexDirection": "column",
|
||||
"flexWrap": "nowrap",
|
||||
"msFlexDirection": "column",
|
||||
"msFlexWrap": "none",
|
||||
"padding": "12px 12px 12px 12px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<nav
|
||||
__id="node_dockcy8n9xef"
|
||||
aria-label="Breadcrumb"
|
||||
style={
|
||||
Object {
|
||||
"position": "relative",
|
||||
}
|
||||
}
|
||||
>
|
||||
<ul
|
||||
className="next-breadcrumb"
|
||||
>
|
||||
<li
|
||||
className="next-breadcrumb-item"
|
||||
dir={null}
|
||||
>
|
||||
<span
|
||||
__id="node_dockcy8n9xeg"
|
||||
className="next-breadcrumb-text"
|
||||
>
|
||||
首页
|
||||
</span>
|
||||
<span
|
||||
className="next-breadcrumb-separator"
|
||||
>
|
||||
<i
|
||||
className="next-icon next-icon-arrow-right next-medium next-breadcrumb-icon-sep"
|
||||
style={Object {}}
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
className="next-breadcrumb-item"
|
||||
dir={null}
|
||||
>
|
||||
<span
|
||||
__id="node_dockcy8n9xei"
|
||||
className="next-breadcrumb-text"
|
||||
>
|
||||
品质中台
|
||||
</span>
|
||||
<span
|
||||
className="next-breadcrumb-separator"
|
||||
>
|
||||
<i
|
||||
className="next-icon next-icon-arrow-right next-medium next-breadcrumb-icon-sep"
|
||||
style={Object {}}
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
className="next-breadcrumb-item"
|
||||
dir={null}
|
||||
>
|
||||
<span
|
||||
__id="node_dockcy8n9xek"
|
||||
className="next-breadcrumb-text"
|
||||
>
|
||||
商家品质页面管理
|
||||
</span>
|
||||
<span
|
||||
className="next-breadcrumb-separator"
|
||||
>
|
||||
<i
|
||||
className="next-icon next-icon-arrow-right next-medium next-breadcrumb-icon-sep"
|
||||
style={Object {}}
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
className="next-breadcrumb-item"
|
||||
dir={null}
|
||||
>
|
||||
<span
|
||||
__id="node_dockcy8n9xem"
|
||||
aria-current="page"
|
||||
className="next-breadcrumb-text activated"
|
||||
>
|
||||
质检知识条配置
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div
|
||||
__id="node_dockcy8n9xeo"
|
||||
className="next-box"
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#ffffff",
|
||||
"flexDirection": "column",
|
||||
"flexWrap": "nowrap",
|
||||
"marginTop": "12px",
|
||||
"msFlexDirection": "column",
|
||||
"msFlexWrap": "none",
|
||||
}
|
||||
}
|
||||
>
|
||||
<form
|
||||
__events={Array []}
|
||||
__id="node_dockcy8n9xep"
|
||||
className="next-form next-inline next-medium"
|
||||
onSubmit={[Function]}
|
||||
role="grid"
|
||||
style={
|
||||
Object {
|
||||
"marginLeft": "12px",
|
||||
"marginRight": "12px",
|
||||
"marginTop": "12px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
__id="node_dockcy8n9xeq"
|
||||
className="next-form-item next-left next-medium"
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": "0",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="next-form-item-label"
|
||||
>
|
||||
<label>
|
||||
类目名：
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className="next-form-item-control"
|
||||
>
|
||||
<span
|
||||
aria-haspopup={true}
|
||||
className="next-select next-select-trigger next-select-single next-medium next-inactive next-no-search"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"width": "150px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="next-input next-medium next-select-inner"
|
||||
>
|
||||
<span
|
||||
className="next-select-values next-input-text-field"
|
||||
>
|
||||
<span
|
||||
className="next-select-trigger-search"
|
||||
>
|
||||
<input
|
||||
__id="node_dockcy8n9xer"
|
||||
autoComplete="off"
|
||||
disabled={false}
|
||||
height="100%"
|
||||
maxLength={null}
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
placeholder="请选择"
|
||||
readOnly={true}
|
||||
role="combobox"
|
||||
size="1"
|
||||
tabIndex={0}
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-hidden={true}
|
||||
>
|
||||
<span>
|
||||
请选择
|
||||
</span>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
className="next-input-control"
|
||||
>
|
||||
<span
|
||||
aria-hidden={true}
|
||||
className="next-select-arrow"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="next-icon next-icon-arrow-down next-medium next-select-symbol-fold"
|
||||
style={Object {}}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-live="polite"
|
||||
className="next-sr-only"
|
||||
>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
__id="node_dockcy8n9xes"
|
||||
className="next-form-item next-left next-medium"
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": "0",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="next-form-item-label"
|
||||
>
|
||||
<label>
|
||||
项目类型：
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className="next-form-item-control"
|
||||
>
|
||||
<span
|
||||
aria-haspopup={true}
|
||||
className="next-select next-select-trigger next-select-single next-medium next-inactive next-no-search"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onMouseDown={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"width": "200px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="next-input next-medium next-select-inner"
|
||||
>
|
||||
<span
|
||||
className="next-select-values next-input-text-field"
|
||||
>
|
||||
<span
|
||||
className="next-select-trigger-search"
|
||||
>
|
||||
<input
|
||||
__id="node_dockcy8n9xet"
|
||||
autoComplete="off"
|
||||
disabled={false}
|
||||
height="100%"
|
||||
maxLength={null}
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
placeholder="请选择"
|
||||
readOnly={true}
|
||||
role="combobox"
|
||||
size="1"
|
||||
tabIndex={0}
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-hidden={true}
|
||||
>
|
||||
<span>
|
||||
请选择
|
||||
</span>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
className="next-input-control"
|
||||
>
|
||||
<span
|
||||
aria-hidden={true}
|
||||
className="next-select-arrow"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
className="next-icon next-icon-arrow-down next-medium next-select-symbol-fold"
|
||||
style={Object {}}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-live="polite"
|
||||
className="next-sr-only"
|
||||
>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
__id="node_dockcy8n9xeu"
|
||||
className="next-form-item next-left next-medium"
|
||||
style={
|
||||
Object {
|
||||
"marginBottom": "0",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="next-form-item-label"
|
||||
>
|
||||
<label>
|
||||
项目 ID：
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className="next-form-item-control"
|
||||
>
|
||||
<span
|
||||
className="next-input next-medium"
|
||||
style={
|
||||
Object {
|
||||
"width": "200px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<input
|
||||
__id="node_dockcy8n9xev"
|
||||
autoComplete="off"
|
||||
disabled={false}
|
||||
height="100%"
|
||||
maxLength={null}
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
readOnly={false}
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
__id="node_dockcy8n9xew"
|
||||
className="next-btn-group"
|
||||
>
|
||||
<button
|
||||
__id="node_dockcy8n9xex"
|
||||
className="next-btn next-medium next-btn-primary"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"margin": "0 5px 0 5px",
|
||||
}
|
||||
}
|
||||
type="submit"
|
||||
>
|
||||
<span
|
||||
className="next-btn-helper"
|
||||
>
|
||||
搜索
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
__id="node_dockcy8n9xe10"
|
||||
className="next-btn next-medium next-btn-normal"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"margin": "0 5px 0 5px",
|
||||
}
|
||||
}
|
||||
type="reset"
|
||||
>
|
||||
<span
|
||||
className="next-btn-helper"
|
||||
>
|
||||
清空
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
__id="node_dockcy8n9xe1f"
|
||||
className="next-box"
|
||||
style={
|
||||
Object {
|
||||
"backgroundColor": "#ffffff",
|
||||
"display": "flex",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "nowrap",
|
||||
"justifyContent": "flex-end",
|
||||
"msFlexDirection": "column",
|
||||
"msFlexWrap": "none",
|
||||
"paddingBottom": "24px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<button
|
||||
__events={
|
||||
Array [
|
||||
Object {
|
||||
"name": "onClick",
|
||||
"relatedEventName": "onClick",
|
||||
"type": "componentEvent",
|
||||
},
|
||||
]
|
||||
}
|
||||
__id="node_dockd5nrh9p4"
|
||||
className="next-btn next-medium next-btn-primary"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
style={Object {}}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="next-btn-helper"
|
||||
>
|
||||
新建配置
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
__id="node_dockd5nrh9p5"
|
||||
className="next-box"
|
||||
style={
|
||||
Object {
|
||||
"flexDirection": "column",
|
||||
"flexWrap": "nowrap",
|
||||
"msFlexDirection": "column",
|
||||
"msFlexWrap": "none",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
__id="node_dockjielosj1"
|
||||
actionBar={
|
||||
Array [
|
||||
Object {
|
||||
"title": "新增",
|
||||
"type": "primary",
|
||||
},
|
||||
Object {
|
||||
"title": "编辑",
|
||||
},
|
||||
]
|
||||
}
|
||||
actionColumn={
|
||||
Array [
|
||||
Object {
|
||||
"callback": [Function],
|
||||
"device": Array [
|
||||
"desktop",
|
||||
],
|
||||
"title": "编辑",
|
||||
},
|
||||
Object {
|
||||
"callback": [Function],
|
||||
"mode": "EDIT",
|
||||
"title": "保存",
|
||||
},
|
||||
]
|
||||
}
|
||||
actionFixed="right"
|
||||
actionHidden={false}
|
||||
actionTitle="操作"
|
||||
actionType="link"
|
||||
actionWidth={180}
|
||||
className="next-table next-table-medium"
|
||||
data={
|
||||
Array [
|
||||
Object {
|
||||
"age": 15000,
|
||||
"email": "aaa@abc.com",
|
||||
"id": "1",
|
||||
"name": "王小",
|
||||
},
|
||||
Object {
|
||||
"age": 25000,
|
||||
"email": "bbb@abc.com",
|
||||
"id": "2",
|
||||
"name": "王中",
|
||||
},
|
||||
Object {
|
||||
"age": 35000,
|
||||
"email": "ccc@abc.com",
|
||||
"id": "3",
|
||||
"name": "王大",
|
||||
},
|
||||
]
|
||||
}
|
||||
maxWebShownActionCount={2}
|
||||
showActionBar={true}
|
||||
showMiniPager={true}
|
||||
style={Object {}}
|
||||
>
|
||||
<table
|
||||
role="table"
|
||||
style={
|
||||
Object {
|
||||
"width": undefined,
|
||||
}
|
||||
}
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style={
|
||||
Object {
|
||||
"width": 200,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<col
|
||||
style={
|
||||
Object {
|
||||
"width": 200,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<col
|
||||
style={
|
||||
Object {
|
||||
"width": 200,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</colgroup>
|
||||
<thead
|
||||
className="next-table-header"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
className="next-table-cell next-table-header-node"
|
||||
dataKey="name"
|
||||
editType="text"
|
||||
role="gridcell"
|
||||
rowSpan={1}
|
||||
style={
|
||||
Object {
|
||||
"textAlign": "center",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="next-table-cell-wrapper"
|
||||
data-next-table-col={0}
|
||||
>
|
||||
姓名
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
className="next-table-cell next-table-header-node"
|
||||
dataKey="age"
|
||||
role="gridcell"
|
||||
rowSpan={1}
|
||||
style={
|
||||
Object {
|
||||
"textAlign": "center",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="next-table-cell-wrapper"
|
||||
data-next-table-col={1}
|
||||
>
|
||||
年龄
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
className="next-table-cell next-table-header-node"
|
||||
dataKey="email"
|
||||
role="gridcell"
|
||||
rowSpan={1}
|
||||
style={
|
||||
Object {
|
||||
"textAlign": "center",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="next-table-cell-wrapper"
|
||||
data-next-table-col={2}
|
||||
>
|
||||
邮箱
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
className="next-table-body"
|
||||
>
|
||||
<tr>
|
||||
<td
|
||||
colSpan={3}
|
||||
>
|
||||
<div
|
||||
className="next-table-empty"
|
||||
style={
|
||||
Object {
|
||||
"left": 0,
|
||||
"overflow": "hidden",
|
||||
"position": "sticky",
|
||||
"width": -1,
|
||||
}
|
||||
}
|
||||
>
|
||||
没有数据
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
__id="node_dockd5nrh9pg"
|
||||
className="next-box"
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"flexDirection": "row",
|
||||
"flexWrap": "nowrap",
|
||||
"justifyContent": "flex-end",
|
||||
"msFlexDirection": "column",
|
||||
"msFlexWrap": "none",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
__id="node_dockd5nrh9pf"
|
||||
className="next-pagination next-medium next-normal"
|
||||
style={Object {}}
|
||||
>
|
||||
<div
|
||||
className="next-pagination-pages"
|
||||
>
|
||||
<button
|
||||
aria-label="上一页，当前第1页"
|
||||
className="next-btn next-medium next-btn-normal next-pagination-item next-prev"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
className="next-icon next-icon-arrow-left next-xs next-btn-icon next-icon-first next-pagination-icon-prev"
|
||||
style={Object {}}
|
||||
/>
|
||||
<span
|
||||
className="next-btn-helper"
|
||||
>
|
||||
上一页
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
className="next-pagination-list"
|
||||
>
|
||||
<button
|
||||
aria-label="第1页，共10页"
|
||||
className="next-btn next-medium next-btn-normal next-pagination-item next-current"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="next-btn-helper"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
aria-label="第2页，共10页"
|
||||
className="next-btn next-medium next-btn-normal next-pagination-item"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="next-btn-helper"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
aria-label="第3页，共10页"
|
||||
className="next-btn next-medium next-btn-normal next-pagination-item"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="next-btn-helper"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
aria-label="第4页，共10页"
|
||||
className="next-btn next-medium next-btn-normal next-pagination-item"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="next-btn-helper"
|
||||
>
|
||||
4
|
||||
</span>
|
||||
</button>
|
||||
<i
|
||||
className="next-icon next-icon-ellipsis next-medium next-pagination-ellipsis next-pagination-icon-ellipsis"
|
||||
style={Object {}}
|
||||
/>
|
||||
<button
|
||||
aria-label="第10页，共10页"
|
||||
className="next-btn next-medium next-btn-normal next-pagination-item"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="next-btn-helper"
|
||||
>
|
||||
10
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
aria-label="下一页，当前第1页"
|
||||
className="next-btn next-medium next-btn-normal next-pagination-item next-next"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="next-btn-helper"
|
||||
>
|
||||
下一页
|
||||
</span>
|
||||
<i
|
||||
className="next-icon next-icon-arrow-right next-xs next-btn-icon next-icon-last next-pagination-icon-next"
|
||||
style={Object {}}
|
||||
/>
|
||||
</button>
|
||||
<span
|
||||
className="next-pagination-display"
|
||||
>
|
||||
<em>
|
||||
1
|
||||
</em>
|
||||
/
|
||||
10
|
||||
</span>
|
||||
<span
|
||||
className="next-pagination-jump-text"
|
||||
>
|
||||
到第
|
||||
</span>
|
||||
<span
|
||||
className="next-input next-medium next-pagination-jump-input"
|
||||
>
|
||||
<input
|
||||
aria-label="请输入跳转到第几页"
|
||||
autoComplete="off"
|
||||
disabled={false}
|
||||
height="100%"
|
||||
maxLength={null}
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
readOnly={false}
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
className="next-pagination-jump-text"
|
||||
>
|
||||
页
|
||||
</span>
|
||||
<button
|
||||
className="next-btn next-medium next-btn-normal next-pagination-jump-go"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
onMouseUp={[Function]}
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
className="next-btn-helper"
|
||||
>
|
||||
确定
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
__id="node_dockd5nrh9pr"
|
||||
name="error"
|
||||
>
|
||||
Component Not Found
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,567 +0,0 @@
|
||||
export default {
|
||||
componentName: 'Page',
|
||||
id: 'node_dockcviv8fo1',
|
||||
props: {
|
||||
ref: 'outterView',
|
||||
autoLoading: true,
|
||||
style: {
|
||||
padding: '0 5px 0 5px',
|
||||
},
|
||||
},
|
||||
fileName: 'test',
|
||||
dataSource: {
|
||||
list: [],
|
||||
},
|
||||
state: {
|
||||
text: 'outter',
|
||||
isShowDialog: false,
|
||||
},
|
||||
css: 'body {font-size: 12px;} .botton{width:100px;color:#ff00ff}',
|
||||
lifeCycles: {
|
||||
componentDidMount: {
|
||||
type: 'JSFunction',
|
||||
value: "function() {\n console.log('did mount');\n }",
|
||||
},
|
||||
componentWillUnmount: {
|
||||
type: 'JSFunction',
|
||||
value: "function() {\n console.log('will umount');\n }",
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
testFunc: {
|
||||
type: 'JSFunction',
|
||||
value: "function() {\n console.log('test func');\n }",
|
||||
},
|
||||
onClick: {
|
||||
type: 'JSFunction',
|
||||
value: 'function() {\n this.setState({\n isShowDialog: true\n })\n }',
|
||||
},
|
||||
closeDialog: {
|
||||
type: 'JSFunction',
|
||||
value: 'function() {\n this.setState({\n isShowDialog: false\n })\n }',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Box',
|
||||
id: 'node_dockcy8n9xed',
|
||||
props: {
|
||||
style: {
|
||||
backgroundColor: 'rgba(31,56,88,0.1)',
|
||||
padding: '12px 12px 12px 12px',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Box',
|
||||
id: 'node_dockcy8n9xee',
|
||||
props: {
|
||||
style: {
|
||||
padding: '12px 12px 12px 12px',
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Breadcrumb',
|
||||
id: 'node_dockcy8n9xef',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
maxNode: 100,
|
||||
component: 'nav',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Breadcrumb.Item',
|
||||
id: 'node_dockcy8n9xeg',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
children: '首页',
|
||||
},
|
||||
},
|
||||
{
|
||||
componentName: 'Breadcrumb.Item',
|
||||
id: 'node_dockcy8n9xei',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
children: '品质中台',
|
||||
},
|
||||
},
|
||||
{
|
||||
componentName: 'Breadcrumb.Item',
|
||||
id: 'node_dockcy8n9xek',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
children: '商家品质页面管理',
|
||||
},
|
||||
},
|
||||
{
|
||||
componentName: 'Breadcrumb.Item',
|
||||
id: 'node_dockcy8n9xem',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
children: '质检知识条配置',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Box',
|
||||
id: 'node_dockcy8n9xeo',
|
||||
props: {
|
||||
style: {
|
||||
marginTop: '12px',
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Form',
|
||||
id: 'node_dockcy8n9xep',
|
||||
props: {
|
||||
inline: true,
|
||||
style: {
|
||||
marginTop: '12px',
|
||||
marginRight: '12px',
|
||||
marginLeft: '12px',
|
||||
},
|
||||
__events: [],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockcy8n9xeq',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
},
|
||||
label: '类目名：',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
id: 'node_dockcy8n9xer',
|
||||
props: {
|
||||
mode: 'single',
|
||||
hasArrow: true,
|
||||
cacheValue: true,
|
||||
style: {
|
||||
width: '150px',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockcy8n9xes',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
},
|
||||
label: '项目类型：',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
id: 'node_dockcy8n9xet',
|
||||
props: {
|
||||
mode: 'single',
|
||||
hasArrow: true,
|
||||
cacheValue: true,
|
||||
style: {
|
||||
width: '200px',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockcy8n9xeu',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
},
|
||||
label: '项目 ID：',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Input',
|
||||
id: 'node_dockcy8n9xev',
|
||||
props: {
|
||||
hasBorder: true,
|
||||
size: 'medium',
|
||||
autoComplete: 'off',
|
||||
style: {
|
||||
width: '200px',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Button.Group',
|
||||
id: 'node_dockcy8n9xew',
|
||||
props: {},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Button',
|
||||
id: 'node_dockcy8n9xex',
|
||||
props: {
|
||||
type: 'primary',
|
||||
style: {
|
||||
margin: '0 5px 0 5px',
|
||||
},
|
||||
htmlType: 'submit',
|
||||
children: '搜索',
|
||||
},
|
||||
},
|
||||
{
|
||||
componentName: 'Button',
|
||||
id: 'node_dockcy8n9xe10',
|
||||
props: {
|
||||
type: 'normal',
|
||||
style: {
|
||||
margin: '0 5px 0 5px',
|
||||
},
|
||||
htmlType: 'reset',
|
||||
children: '清空',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Box',
|
||||
id: 'node_dockcy8n9xe1f',
|
||||
props: {
|
||||
style: {
|
||||
backgroundColor: '#ffffff',
|
||||
paddingBottom: '24px',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Button',
|
||||
id: 'node_dockd5nrh9p4',
|
||||
props: {
|
||||
type: 'primary',
|
||||
size: 'medium',
|
||||
htmlType: 'button',
|
||||
component: 'button',
|
||||
children: '新建配置',
|
||||
style: {},
|
||||
__events: [
|
||||
{
|
||||
type: 'componentEvent',
|
||||
name: 'onClick',
|
||||
relatedEventName: 'onClick',
|
||||
},
|
||||
],
|
||||
onClick: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(){ this.onClick() }',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Box',
|
||||
id: 'node_dockd5nrh9p5',
|
||||
props: {},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Table',
|
||||
id: 'node_dockjielosj1',
|
||||
props: {
|
||||
showMiniPager: true,
|
||||
showActionBar: true,
|
||||
actionBar: [
|
||||
{
|
||||
title: '新增',
|
||||
type: 'primary',
|
||||
},
|
||||
{
|
||||
title: '编辑',
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
dataKey: 'name',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
title: '姓名',
|
||||
editType: 'text',
|
||||
},
|
||||
{
|
||||
dataKey: 'age',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
title: '年龄',
|
||||
},
|
||||
{
|
||||
dataKey: 'email',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
title: '邮箱',
|
||||
},
|
||||
],
|
||||
data: [
|
||||
{
|
||||
name: '王小',
|
||||
id: '1',
|
||||
age: 15000,
|
||||
email: 'aaa@abc.com',
|
||||
},
|
||||
{
|
||||
name: '王中',
|
||||
id: '2',
|
||||
age: 25000,
|
||||
email: 'bbb@abc.com',
|
||||
},
|
||||
{
|
||||
name: '王大',
|
||||
id: '3',
|
||||
age: 35000,
|
||||
email: 'ccc@abc.com',
|
||||
},
|
||||
],
|
||||
actionTitle: '操作',
|
||||
actionWidth: 180,
|
||||
actionType: 'link',
|
||||
actionFixed: 'right',
|
||||
actionHidden: false,
|
||||
maxWebShownActionCount: 2,
|
||||
actionColumn: [
|
||||
{
|
||||
title: '编辑',
|
||||
callback: {
|
||||
type: 'JSFunction',
|
||||
value: '(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n });\n }',
|
||||
},
|
||||
device: [
|
||||
'desktop',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '保存',
|
||||
callback: {
|
||||
type: 'JSFunction',
|
||||
value: '(rowData, action, table) => { \nreturn table.saveRow(rowData).then((row) => { \nconsole.log(row); \n}); \n}',
|
||||
},
|
||||
mode: 'EDIT',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
componentName: 'Box',
|
||||
id: 'node_dockd5nrh9pg',
|
||||
props: {
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Pagination',
|
||||
id: 'node_dockd5nrh9pf',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
type: 'normal',
|
||||
shape: 'normal',
|
||||
size: 'medium',
|
||||
defaultCurrent: 1,
|
||||
total: 100,
|
||||
pageShowCount: 5,
|
||||
pageSize: 10,
|
||||
pageSizePosition: 'start',
|
||||
showJump: true,
|
||||
style: {},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Dialog',
|
||||
id: 'node_dockcy8n9xe1h',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
footerAlign: 'right',
|
||||
footerActions: [
|
||||
'ok',
|
||||
'cancel',
|
||||
],
|
||||
closeable: 'esc,close',
|
||||
hasMask: true,
|
||||
align: 'cc cc',
|
||||
minMargin: 40,
|
||||
visible: {
|
||||
type: 'JSExpression',
|
||||
value: 'this.state.isShowDialog',
|
||||
},
|
||||
title: '标题',
|
||||
events: [],
|
||||
__events: [
|
||||
{
|
||||
type: 'componentEvent',
|
||||
name: 'onCancel',
|
||||
relatedEventName: 'closeDialog',
|
||||
},
|
||||
{
|
||||
type: 'componentEvent',
|
||||
name: 'onClose',
|
||||
relatedEventName: 'closeDialog',
|
||||
},
|
||||
{
|
||||
type: 'componentEvent',
|
||||
name: 'onOk',
|
||||
relatedEventName: 'testFunc',
|
||||
},
|
||||
],
|
||||
onCancel: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(){ this.closeDialog() }',
|
||||
},
|
||||
onClose: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(){ this.closeDialog() }',
|
||||
},
|
||||
onOk: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(){ this.testFunc() }',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Form',
|
||||
id: 'node_dockd5nrh9pi',
|
||||
props: {
|
||||
inline: false,
|
||||
labelAlign: 'top',
|
||||
labelTextAlign: 'right',
|
||||
size: 'medium',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockd5nrh9pj',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
minWidth: '200px',
|
||||
minHeight: '28px',
|
||||
},
|
||||
label: '商品类目',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
id: 'node_dockd5nrh9pk',
|
||||
props: {
|
||||
mode: 'single',
|
||||
hasArrow: true,
|
||||
cacheValue: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockd5nrh9pl',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
minWidth: '200px',
|
||||
minHeight: '28px',
|
||||
},
|
||||
label: '商品类目',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
id: 'node_dockd5nrh9pm',
|
||||
props: {
|
||||
mode: 'single',
|
||||
hasArrow: true,
|
||||
cacheValue: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockd5nrh9pn',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
minWidth: '200px',
|
||||
minHeight: '28px',
|
||||
},
|
||||
label: '商品类目',
|
||||
asterisk: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
id: 'node_dockd5nrh9po',
|
||||
props: {
|
||||
mode: 'single',
|
||||
hasArrow: true,
|
||||
cacheValue: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockd5nrh9pp',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
minWidth: '200px',
|
||||
minHeight: '28px',
|
||||
},
|
||||
label: '商品类目',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Input',
|
||||
id: 'node_dockd5nrh9pr',
|
||||
props: {
|
||||
hasBorder: true,
|
||||
size: 'medium',
|
||||
autoComplete: 'off',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'ErrorComponent',
|
||||
id: 'node_dockd5nrh9pr',
|
||||
props: {
|
||||
name: 'error',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -1,31 +0,0 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { Box, Breadcrumb, Form, Select, Input, Button, Table, Pagination, Dialog } from '@alifd/next';
|
||||
import ReactRenderer from '../src';
|
||||
import schema from './fixtures/schema/basic';
|
||||
|
||||
describe('React Renderer', () => {
|
||||
it('render basic case', () => {
|
||||
const components = {
|
||||
Box,
|
||||
Breadcrumb,
|
||||
'Breadcrumb.Item': Breadcrumb.Item,
|
||||
Form,
|
||||
'Form.Item': Form.Item,
|
||||
Select,
|
||||
Input,
|
||||
Button,
|
||||
'Button.Group': Button.Group,
|
||||
Table,
|
||||
Pagination,
|
||||
Dialog,
|
||||
};
|
||||
const content = (
|
||||
<ReactRenderer
|
||||
schema={schema}
|
||||
components={components}
|
||||
/>);
|
||||
const tree = renderer.create(content).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "lib"
|
||||
},
|
||||
"include": [
|
||||
"./src/"
|
||||
]
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"plugins": [
|
||||
["@babel/plugin-proposal-decorators", { "legacy": true }],
|
||||
["@babel/plugin-proposal-class-properties", { "loose": true }]
|
||||
]
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('../../babel.config');
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"plugins": [
|
||||
[
|
||||
"@alilc/build-plugin-lce",
|
||||
{
|
||||
"babelPlugins": ["@babel/plugin-transform-typescript"]
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"plugins": [
|
||||
"@alilc/build-plugin-lce",
|
||||
"@alilc/lowcode-test-mate/plugin/index.ts"
|
||||
]
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
const fs = require('fs');
|
||||
const { join } = require('path');
|
||||
const esModules = [].join('|');
|
||||
const pkgNames = fs.readdirSync(join('..')).filter(pkgName => !pkgName.startsWith('.'));
|
||||
|
||||
const jestConfig = {
|
||||
// transform: {
|
||||
// // '^.+\\.[jt]sx?$': 'babel-jest',
|
||||
// '^.+\\.(ts|tsx)$': 'ts-jest',
|
||||
// // '^.+\\.(js|jsx)$': 'babel-jest',
|
||||
// },
|
||||
// testMatch: ['(/tests?/.*(test))\\.[jt]s$'],
|
||||
// testMatch: ['**/*/base.test.tsx'],
|
||||
// testMatch: ['**/utils/common.test.ts'],
|
||||
// testMatch: ['**/*/leaf.test.tsx'],
|
||||
// testMatch: ['**/*/is-use-loop.test.ts'],
|
||||
transformIgnorePatterns: [
|
||||
`/node_modules/(?!${esModules})/`,
|
||||
],
|
||||
setupFiles: [
|
||||
'./tests/fixtures/unhandled-rejection.ts',
|
||||
'./tests/setup.ts',
|
||||
],
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
|
||||
collectCoverage: true,
|
||||
collectCoverageFrom: [
|
||||
'src/**/*.ts',
|
||||
'src/**/*.tsx',
|
||||
'!src/utils/logger.ts',
|
||||
'!src/types/index.ts',
|
||||
],
|
||||
};
|
||||
|
||||
// 只对本仓库内的 pkg 做 mapping
|
||||
jestConfig.moduleNameMapper = {};
|
||||
jestConfig.moduleNameMapper[`^@alilc/lowcode\\-(${pkgNames.join('|')})$`] = '<rootDir>/../$1/src';
|
||||
|
||||
module.exports = jestConfig;
|
||||
@ -1,61 +0,0 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-renderer-core",
|
||||
"version": "1.3.2",
|
||||
"description": "renderer core",
|
||||
"license": "MIT",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
"files": [
|
||||
"lib",
|
||||
"es"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "build-scripts build",
|
||||
"test": "build-scripts test --config build.test.json",
|
||||
"test:cov": "build-scripts test --config build.test.json --jest-coverage"
|
||||
},
|
||||
"dependencies": {
|
||||
"@alilc/lowcode-datasource-engine": "^1.0.0",
|
||||
"@alilc/lowcode-types": "1.3.2",
|
||||
"@alilc/lowcode-utils": "1.3.2",
|
||||
"classnames": "^2.2.6",
|
||||
"debug": "^4.1.1",
|
||||
"fetch-jsonp": "^1.1.3",
|
||||
"intl-messageformat": "^9.3.1",
|
||||
"jsonuri": "^2.1.2",
|
||||
"lodash": "^4.17.11",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.10.1",
|
||||
"socket.io-client": "^2.2.0",
|
||||
"whatwg-fetch": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@alib/build-scripts": "^0.1.18",
|
||||
"@alifd/next": "^1.26.0",
|
||||
"@alilc/lowcode-designer": "1.3.2",
|
||||
"@babel/plugin-transform-typescript": "^7.16.8",
|
||||
"@testing-library/react": "^11.2.2",
|
||||
"@types/classnames": "^2.2.11",
|
||||
"@types/debug": "^4.1.5",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/lodash": "^4.14.167",
|
||||
"@types/node": "^13.7.1",
|
||||
"@types/prop-types": "^15.7.3",
|
||||
"@types/react-is": "^17.0.3",
|
||||
"@types/react-test-renderer": "^17.0.1",
|
||||
"jest": "^26.6.3",
|
||||
"react-test-renderer": "^17.0.2",
|
||||
"ts-jest": "^26.5.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
"registry": "https://registry.npmjs.org/"
|
||||
},
|
||||
"repository": {
|
||||
"type": "http",
|
||||
"url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/renderer-core"
|
||||
},
|
||||
"gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6",
|
||||
"bugs": "https://github.com/alibaba/lowcode-engine/issues",
|
||||
"homepage": "https://github.com/alibaba/lowcode-engine/#readme"
|
||||
}
|
||||
@ -1,104 +0,0 @@
|
||||
import { IRuntime, IRendererModules, IGeneralConstructor } from '../types';
|
||||
|
||||
export enum Env {
|
||||
React = 'react',
|
||||
}
|
||||
|
||||
class Adapter {
|
||||
runtime: IRuntime;
|
||||
|
||||
builtinModules = ['Component', 'PureComponent', 'createElement', 'createContext', 'forwardRef', 'findDOMNode'];
|
||||
|
||||
env: Env;
|
||||
|
||||
renderers: IRendererModules;
|
||||
|
||||
configProvider: any;
|
||||
|
||||
constructor() {
|
||||
this.initRuntime();
|
||||
}
|
||||
|
||||
initRuntime() {
|
||||
const Component: IGeneralConstructor = class <T = any, S = any> {
|
||||
state: Readonly<S>;
|
||||
props: Readonly<T> & Readonly<{ children?: any | undefined }>;
|
||||
refs: Record<string, unknown>;
|
||||
context: Record<string, unknown>;
|
||||
setState() {}
|
||||
forceUpdate() {}
|
||||
render() {}
|
||||
};
|
||||
const PureComponent = class <T = any, S = any> {
|
||||
state: Readonly<S>;
|
||||
props: Readonly<T> & Readonly<{ children?: any | undefined }>;
|
||||
refs: Record<string, unknown>;
|
||||
context: Record<string, unknown>;
|
||||
setState() {}
|
||||
forceUpdate() {}
|
||||
render() {}
|
||||
};
|
||||
const createElement = () => {};
|
||||
const createContext = () => {};
|
||||
const forwardRef = () => {};
|
||||
const findDOMNode = () => {};
|
||||
this.runtime = {
|
||||
Component,
|
||||
PureComponent,
|
||||
createElement,
|
||||
createContext,
|
||||
forwardRef,
|
||||
findDOMNode,
|
||||
};
|
||||
}
|
||||
|
||||
setRuntime(runtime: IRuntime) {
|
||||
if (this.isValidRuntime(runtime)) {
|
||||
this.runtime = runtime;
|
||||
}
|
||||
}
|
||||
|
||||
isValidRuntime(runtime: IRuntime) {
|
||||
if (typeof runtime !== 'object' || Array.isArray(runtime)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return this.builtinModules.every((m) => {
|
||||
const flag = !!runtime[m];
|
||||
if (!flag) {
|
||||
throw new Error(`runtime is invalid, module '${m}' does not exist`);
|
||||
}
|
||||
return flag;
|
||||
});
|
||||
}
|
||||
|
||||
getRuntime() {
|
||||
return this.runtime;
|
||||
}
|
||||
|
||||
setEnv(env: Env) {
|
||||
this.env = env;
|
||||
}
|
||||
|
||||
isReact() {
|
||||
return this.env === Env.React;
|
||||
}
|
||||
|
||||
setRenderers(renderers: IRendererModules) {
|
||||
this.renderers = renderers;
|
||||
}
|
||||
|
||||
getRenderers() {
|
||||
return this.renderers || {};
|
||||
}
|
||||
|
||||
setConfigProvider(Comp: any) {
|
||||
this.configProvider = Comp;
|
||||
}
|
||||
|
||||
getConfigProvider() {
|
||||
return this.configProvider;
|
||||
}
|
||||
}
|
||||
|
||||
export default new Adapter();
|
||||
@ -1,15 +0,0 @@
|
||||
import adapter from '../adapter';
|
||||
import { IGeneralConstructor } from '../types';
|
||||
|
||||
export default function divFactory(): IGeneralConstructor {
|
||||
const { PureComponent, createElement } = adapter.getRuntime();
|
||||
return class Div extends PureComponent {
|
||||
static displayName = 'Div';
|
||||
|
||||
static version = '0.0.0';
|
||||
|
||||
render() {
|
||||
return createElement('div', this.props);
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
.visual-dom .panel-container {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.visual-dom .panel-container .title {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
background-color: #ebecf0;
|
||||
line-height: 28px;
|
||||
padding: 0 12px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.visual-dom .panel-container .content {
|
||||
min-height: 20px;
|
||||
padding: 5px;
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import adapter from '../../adapter';
|
||||
import { IGeneralConstructor } from '../../types';
|
||||
import './index.css';
|
||||
|
||||
export default function visualDomFactory(): IGeneralConstructor {
|
||||
const { PureComponent, createElement } = adapter.getRuntime();
|
||||
return class VisualDom extends PureComponent {
|
||||
static displayName = 'VisualDom';
|
||||
|
||||
static propTypes = {
|
||||
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
children: null,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { children, cell, title, label, text, __componentName } = this.props;
|
||||
let mainContent = children;
|
||||
if (cell && typeof cell === 'function') {
|
||||
mainContent = cell();
|
||||
}
|
||||
return createElement('div', { className: 'visual-dom' },
|
||||
createElement('div', { className: 'panel-container' },
|
||||
[
|
||||
createElement('span', { className: 'title' }, title || label || text || __componentName),
|
||||
createElement('div', { className: 'content' }, mainContent),
|
||||
]));
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import adapter from '../adapter';
|
||||
|
||||
|
||||
export default function contextFactory() {
|
||||
const { createContext } = adapter.getRuntime();
|
||||
|
||||
let context = (window as any).__appContext;
|
||||
if (!context) {
|
||||
context = createContext({});
|
||||
(window as any).__appContext = context;
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@ -1,88 +0,0 @@
|
||||
import { cloneEnumerableProperty } from '@alilc/lowcode-utils';
|
||||
import adapter from '../adapter';
|
||||
import { IBaseRendererInstance, IRendererProps } from '../types';
|
||||
|
||||
interface Options {
|
||||
baseRenderer: IBaseRendererInstance;
|
||||
schema: any;
|
||||
}
|
||||
|
||||
function patchDidCatch(Comp: any, { baseRenderer }: Options) {
|
||||
if (Comp.patchedCatch) {
|
||||
return;
|
||||
}
|
||||
Comp.patchedCatch = true;
|
||||
const { PureComponent } = adapter.getRuntime();
|
||||
// Rax 的 getDerivedStateFromError 有 BUG，这里先用 componentDidCatch 来替代
|
||||
// @see https://github.com/alibaba/rax/issues/2211
|
||||
const originalDidCatch = Comp.prototype.componentDidCatch;
|
||||
Comp.prototype.componentDidCatch = function didCatch(this: any, error: Error, errorInfo: any) {
|
||||
this.setState({ engineRenderError: true, error });
|
||||
if (originalDidCatch && typeof originalDidCatch === 'function') {
|
||||
originalDidCatch.call(this, error, errorInfo);
|
||||
}
|
||||
};
|
||||
|
||||
const { engine } = baseRenderer.context;
|
||||
const originRender = Comp.prototype.render;
|
||||
Comp.prototype.render = function () {
|
||||
if (this.state && this.state.engineRenderError) {
|
||||
this.state.engineRenderError = false;
|
||||
return engine.createElement(engine.getFaultComponent(), {
|
||||
...this.props,
|
||||
error: this.state.error,
|
||||
componentName: this.props._componentName,
|
||||
});
|
||||
}
|
||||
return originRender.call(this);
|
||||
};
|
||||
if (!(Comp.prototype instanceof PureComponent)) {
|
||||
const originShouldComponentUpdate = Comp.prototype.shouldComponentUpdate;
|
||||
Comp.prototype.shouldComponentUpdate = function (nextProps: IRendererProps, nextState: any) {
|
||||
if (nextState && nextState.engineRenderError) {
|
||||
return true;
|
||||
}
|
||||
return originShouldComponentUpdate
|
||||
? originShouldComponentUpdate.call(this, nextProps, nextState)
|
||||
: true;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const cache = new Map<string, { Comp: any; WrapperComponent: any }>();
|
||||
|
||||
export function compWrapper(Comp: any, options: Options) {
|
||||
const { createElement, Component, forwardRef } = adapter.getRuntime();
|
||||
if (
|
||||
Comp?.prototype?.isReactComponent || // react
|
||||
Comp?.prototype?.setState || // rax
|
||||
Comp?.prototype instanceof Component
|
||||
) {
|
||||
patchDidCatch(Comp, options);
|
||||
return Comp;
|
||||
}
|
||||
|
||||
if (cache.has(options.schema.id) && cache.get(options.schema.id)?.Comp === Comp) {
|
||||
return cache.get(options.schema.id)?.WrapperComponent;
|
||||
}
|
||||
|
||||
class Wrapper extends Component {
|
||||
render() {
|
||||
return createElement(Comp, { ...this.props, ref: this.props.forwardRef });
|
||||
}
|
||||
}
|
||||
(Wrapper as any).displayName = Comp.displayName;
|
||||
|
||||
patchDidCatch(Wrapper, options);
|
||||
|
||||
const WrapperComponent = cloneEnumerableProperty(
|
||||
forwardRef((props: any, ref: any) => {
|
||||
return createElement(Wrapper, { ...props, forwardRef: ref });
|
||||
}),
|
||||
Comp,
|
||||
);
|
||||
|
||||
cache.set(options.schema.id, { WrapperComponent, Comp });
|
||||
|
||||
return WrapperComponent;
|
||||
}
|
||||
@ -1,600 +0,0 @@
|
||||
import { INode, IPublicTypePropChangeOptions } from '@alilc/lowcode-designer';
|
||||
import { GlobalEvent, IPublicEnumTransformStage, IPublicTypeNodeSchema, IPublicTypeEngineOptions } from '@alilc/lowcode-types';
|
||||
import { isReactComponent, cloneEnumerableProperty } from '@alilc/lowcode-utils';
|
||||
import { debounce } from '../utils/common';
|
||||
import adapter from '../adapter';
|
||||
import * as types from '../types/index';
|
||||
import logger from '../utils/logger';
|
||||
|
||||
export interface IComponentHocInfo {
|
||||
schema: any;
|
||||
baseRenderer: types.IBaseRendererInstance;
|
||||
componentInfo: any;
|
||||
scope: any;
|
||||
}
|
||||
|
||||
export interface IComponentHocProps {
|
||||
__tag: any;
|
||||
componentId: any;
|
||||
_leaf: any;
|
||||
forwardedRef?: any;
|
||||
}
|
||||
|
||||
export interface IComponentHocState {
|
||||
childrenInState: boolean;
|
||||
nodeChildren: any;
|
||||
nodeCacheProps: any;
|
||||
|
||||
/** 控制是否显示隐藏 */
|
||||
visible: boolean;
|
||||
|
||||
/** 控制是否渲染 */
|
||||
condition: boolean;
|
||||
nodeProps: any;
|
||||
}
|
||||
|
||||
type DesignMode = Pick<IPublicTypeEngineOptions, 'designMode'>['designMode'];
|
||||
|
||||
export interface IComponentHoc {
|
||||
designMode: DesignMode | DesignMode[];
|
||||
hoc: IComponentConstruct;
|
||||
}
|
||||
|
||||
export type IComponentConstruct = (Comp: types.IBaseRenderComponent, info: IComponentHocInfo) => types.IGeneralConstructor;
|
||||
|
||||
interface IProps {
|
||||
_leaf: INode | undefined;
|
||||
|
||||
visible: boolean;
|
||||
|
||||
componentId: number;
|
||||
|
||||
children?: INode[];
|
||||
|
||||
__tag: number;
|
||||
|
||||
forwardedRef?: any;
|
||||
}
|
||||
|
||||
enum RerenderType {
|
||||
All = 'All',
|
||||
ChildChanged = 'ChildChanged',
|
||||
PropsChanged = 'PropsChanged',
|
||||
VisibleChanged = 'VisibleChanged',
|
||||
MinimalRenderUnit = 'MinimalRenderUnit',
|
||||
}
|
||||
|
||||
// 缓存 Leaf 层组件，防止重新渲染问题
|
||||
class LeafCache {
|
||||
|
||||
/** 组件缓存 */
|
||||
component = new Map();
|
||||
|
||||
/**
|
||||
* 状态缓存，场景：属性变化后，改组件被销毁，state 为空，没有展示修改后的属性
|
||||
*/
|
||||
state = new Map();
|
||||
|
||||
/**
|
||||
* 订阅事件缓存，导致 rerender 的订阅事件
|
||||
*/
|
||||
event = new Map();
|
||||
|
||||
ref = new Map();
|
||||
|
||||
constructor(public documentId: string, public device: string) {
|
||||
}
|
||||
}
|
||||
|
||||
let cache: LeafCache;
|
||||
|
||||
/** 部分没有渲染的 node 节点进行兜底处理 or 渲染方式没有渲染 LeafWrapper */
|
||||
function initRerenderEvent({
|
||||
schema,
|
||||
__debug,
|
||||
container,
|
||||
getNode,
|
||||
}: any) {
|
||||
const leaf = getNode?.(schema.id);
|
||||
if (!leaf
|
||||
|| cache.event.get(schema.id)?.clear
|
||||
|| leaf === cache.event.get(schema.id)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
cache.event.get(schema.id)?.dispose.forEach((disposeFn: any) => disposeFn && disposeFn());
|
||||
const debounceRerender = debounce(() => {
|
||||
container.rerender();
|
||||
}, 20);
|
||||
cache.event.set(schema.id, {
|
||||
clear: false,
|
||||
leaf,
|
||||
dispose: [
|
||||
leaf?.onPropChange?.(() => {
|
||||
if (!container.autoRepaintNode) {
|
||||
return;
|
||||
}
|
||||
__debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onPropsChange make rerender`);
|
||||
debounceRerender();
|
||||
}),
|
||||
leaf?.onChildrenChange?.(() => {
|
||||
if (!container.autoRepaintNode) {
|
||||
return;
|
||||
}
|
||||
__debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onChildrenChange make rerender`);
|
||||
debounceRerender();
|
||||
}) as Function,
|
||||
leaf?.onVisibleChange?.(() => {
|
||||
if (!container.autoRepaintNode) {
|
||||
return;
|
||||
}
|
||||
__debug(`${schema.componentName}[${schema.id}] leaf not render in SimulatorRendererView, leaf onVisibleChange make rerender`);
|
||||
debounceRerender();
|
||||
}),
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
/** 渲染的 node 节点全局注册事件清除 */
|
||||
function clearRerenderEvent(id: string): void {
|
||||
if (cache.event.get(id)?.clear) {
|
||||
return;
|
||||
}
|
||||
cache.event.get(id)?.dispose?.forEach((disposeFn: any) => disposeFn && disposeFn());
|
||||
cache.event.set(id, {
|
||||
clear: true,
|
||||
dispose: [],
|
||||
});
|
||||
}
|
||||
|
||||
// 给每个组件包裹一个 HOC Leaf，支持组件内部属性变化，自响应渲染
|
||||
export function leafWrapper(Comp: types.IBaseRenderComponent, {
|
||||
schema,
|
||||
baseRenderer,
|
||||
componentInfo,
|
||||
scope,
|
||||
}: IComponentHocInfo) {
|
||||
const {
|
||||
__debug,
|
||||
__getComponentProps: getProps,
|
||||
__getSchemaChildrenVirtualDom: getChildren,
|
||||
__parseData,
|
||||
} = baseRenderer;
|
||||
const { engine } = baseRenderer.context;
|
||||
const host = baseRenderer.props?.__host;
|
||||
const curDocumentId = baseRenderer.props?.documentId ?? '';
|
||||
const curDevice = baseRenderer.props?.device ?? '';
|
||||
const getNode = baseRenderer.props?.getNode;
|
||||
const container = baseRenderer.props?.__container;
|
||||
const setSchemaChangedSymbol = baseRenderer.props?.setSchemaChangedSymbol;
|
||||
const editor = host?.designer?.editor;
|
||||
const runtime = adapter.getRuntime();
|
||||
const { forwardRef, createElement } = runtime;
|
||||
const Component = runtime.Component as types.IGeneralConstructor<
|
||||
IComponentHocProps, IComponentHocState
|
||||
>;
|
||||
|
||||
const componentCacheId = schema.id;
|
||||
|
||||
if (!cache || (curDocumentId && curDocumentId !== cache.documentId) || (curDevice && curDevice !== cache.device)) {
|
||||
cache?.event.forEach(event => {
|
||||
event.dispose?.forEach((disposeFn: any) => disposeFn && disposeFn());
|
||||
});
|
||||
cache = new LeafCache(curDocumentId, curDevice);
|
||||
}
|
||||
|
||||
if (!isReactComponent(Comp)) {
|
||||
logger.error(`${schema.componentName} component may be has errors: `, Comp);
|
||||
}
|
||||
|
||||
initRerenderEvent({
|
||||
schema,
|
||||
__debug,
|
||||
container,
|
||||
getNode,
|
||||
});
|
||||
|
||||
if (curDocumentId && cache.component.has(componentCacheId) && (cache.component.get(componentCacheId).Comp === Comp)) {
|
||||
return cache.component.get(componentCacheId).LeafWrapper;
|
||||
}
|
||||
|
||||
class LeafHoc extends Component {
|
||||
recordInfo: {
|
||||
startTime?: number | null;
|
||||
type?: string;
|
||||
node?: INode;
|
||||
} = {};
|
||||
|
||||
private curEventLeaf: INode | undefined;
|
||||
|
||||
static displayName = schema.componentName;
|
||||
|
||||
disposeFunctions: Array<((() => void) | Function)> = [];
|
||||
|
||||
__component_tag = 'leafWrapper';
|
||||
|
||||
renderUnitInfo: {
|
||||
minimalUnitId?: string;
|
||||
minimalUnitName?: string;
|
||||
singleRender?: boolean;
|
||||
};
|
||||
|
||||
// 最小渲染单元做防抖处理
|
||||
makeUnitRenderDebounced = debounce(() => {
|
||||
this.beforeRender(RerenderType.MinimalRenderUnit);
|
||||
const schema = this.leaf?.export?.(IPublicEnumTransformStage.Render);
|
||||
if (!schema) {
|
||||
return;
|
||||
}
|
||||
const nextProps = getProps(schema, scope, Comp, componentInfo);
|
||||
const children = getChildren(schema, scope, Comp);
|
||||
const nextState = {
|
||||
nodeProps: nextProps,
|
||||
nodeChildren: children,
|
||||
childrenInState: true,
|
||||
};
|
||||
if ('children' in nextProps) {
|
||||
nextState.nodeChildren = nextProps.children;
|
||||
}
|
||||
|
||||
__debug(`${this.leaf?.componentName}(${this.props.componentId}) MinimalRenderUnit Render!`);
|
||||
this.setState(nextState);
|
||||
}, 20);
|
||||
|
||||
constructor(props: IProps, context: any) {
|
||||
super(props, context);
|
||||
// 监听以下事件，当变化时更新自己
|
||||
__debug(`${schema.componentName}[${this.props.componentId}] leaf render in SimulatorRendererView`);
|
||||
clearRerenderEvent(componentCacheId);
|
||||
this.curEventLeaf = this.leaf;
|
||||
|
||||
cache.ref.set(componentCacheId, {
|
||||
makeUnitRender: this.makeUnitRender,
|
||||
});
|
||||
|
||||
let cacheState = cache.state.get(componentCacheId);
|
||||
if (!cacheState || cacheState.__tag !== props.__tag) {
|
||||
cacheState = this.getDefaultState(props);
|
||||
}
|
||||
|
||||
this.state = cacheState;
|
||||
}
|
||||
|
||||
recordTime = () => {
|
||||
if (!this.recordInfo.startTime) {
|
||||
return;
|
||||
}
|
||||
const endTime = Date.now();
|
||||
const nodeCount = host?.designer?.currentDocument?.getNodeCount?.();
|
||||
const componentName = this.recordInfo.node?.componentName || this.leaf?.componentName || 'UnknownComponent';
|
||||
editor?.eventBus.emit(GlobalEvent.Node.Rerender, {
|
||||
componentName,
|
||||
time: endTime - this.recordInfo.startTime,
|
||||
type: this.recordInfo.type,
|
||||
nodeCount,
|
||||
});
|
||||
this.recordInfo.startTime = null;
|
||||
};
|
||||
|
||||
makeUnitRender = () => {
|
||||
this.makeUnitRenderDebounced();
|
||||
};
|
||||
|
||||
get autoRepaintNode() {
|
||||
return container?.autoRepaintNode;
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.recordTime();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const _leaf = this.leaf;
|
||||
this.initOnPropsChangeEvent(_leaf);
|
||||
this.initOnChildrenChangeEvent(_leaf);
|
||||
this.initOnVisibleChangeEvent(_leaf);
|
||||
this.recordTime();
|
||||
}
|
||||
|
||||
getDefaultState(nextProps: any) {
|
||||
const {
|
||||
hidden = false,
|
||||
condition = true,
|
||||
} = nextProps.__inner__ || this.leaf?.export?.(IPublicEnumTransformStage.Render) || {};
|
||||
return {
|
||||
nodeChildren: null,
|
||||
childrenInState: false,
|
||||
visible: !hidden,
|
||||
condition: __parseData?.(condition, scope),
|
||||
nodeCacheProps: {},
|
||||
nodeProps: {},
|
||||
};
|
||||
}
|
||||
|
||||
setState(state: any) {
|
||||
cache.state.set(componentCacheId, {
|
||||
...this.state,
|
||||
...state,
|
||||
__tag: this.props.__tag,
|
||||
});
|
||||
super.setState(state);
|
||||
}
|
||||
|
||||
/** 由于内部属性变化，在触发渲染前，会执行该函数 */
|
||||
beforeRender(type: string, node?: INode): void {
|
||||
this.recordInfo.startTime = Date.now();
|
||||
this.recordInfo.type = type;
|
||||
this.recordInfo.node = node;
|
||||
setSchemaChangedSymbol?.(true);
|
||||
}
|
||||
|
||||
judgeMiniUnitRender() {
|
||||
if (!this.renderUnitInfo) {
|
||||
this.getRenderUnitInfo();
|
||||
}
|
||||
|
||||
const renderUnitInfo = this.renderUnitInfo || {
|
||||
singleRender: true,
|
||||
};
|
||||
|
||||
if (renderUnitInfo.singleRender) {
|
||||
return;
|
||||
}
|
||||
|
||||
const ref = cache.ref.get(renderUnitInfo.minimalUnitId);
|
||||
|
||||
if (!ref) {
|
||||
__debug('Cant find minimalRenderUnit ref! This make rerender!');
|
||||
container?.rerender();
|
||||
return;
|
||||
}
|
||||
__debug(`${this.leaf?.componentName}(${this.props.componentId}) need render, make its minimalRenderUnit ${renderUnitInfo.minimalUnitName}(${renderUnitInfo.minimalUnitId})`);
|
||||
ref.makeUnitRender();
|
||||
}
|
||||
|
||||
getRenderUnitInfo(leaf = this.leaf) {
|
||||
// leaf 在低代码组件中存在 mock 的情况，退出最小渲染单元判断
|
||||
if (!leaf || typeof leaf.isRoot !== 'function') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (leaf.isRootNode) {
|
||||
this.renderUnitInfo = {
|
||||
singleRender: true,
|
||||
...(this.renderUnitInfo || {}),
|
||||
};
|
||||
}
|
||||
if (leaf.componentMeta.isMinimalRenderUnit) {
|
||||
this.renderUnitInfo = {
|
||||
minimalUnitId: leaf.id,
|
||||
minimalUnitName: leaf.componentName,
|
||||
singleRender: false,
|
||||
};
|
||||
}
|
||||
if (leaf.hasLoop()) {
|
||||
// 含有循环配置的元素，父元素是最小渲染单元
|
||||
this.renderUnitInfo = {
|
||||
minimalUnitId: leaf?.parent?.id,
|
||||
minimalUnitName: leaf?.parent?.componentName,
|
||||
singleRender: false,
|
||||
};
|
||||
}
|
||||
if (leaf.parent) {
|
||||
this.getRenderUnitInfo(leaf.parent);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps: any) {
|
||||
let { componentId } = nextProps;
|
||||
if (nextProps.__tag === this.props.__tag) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const _leaf = getNode?.(componentId);
|
||||
if (_leaf && this.curEventLeaf && _leaf !== this.curEventLeaf) {
|
||||
this.disposeFunctions.forEach((fn) => fn());
|
||||
this.disposeFunctions = [];
|
||||
this.initOnChildrenChangeEvent(_leaf);
|
||||
this.initOnPropsChangeEvent(_leaf);
|
||||
this.initOnVisibleChangeEvent(_leaf);
|
||||
this.curEventLeaf = _leaf;
|
||||
}
|
||||
|
||||
const {
|
||||
visible,
|
||||
...resetState
|
||||
} = this.getDefaultState(nextProps);
|
||||
this.setState(resetState);
|
||||
}
|
||||
|
||||
/** 监听参数变化 */
|
||||
initOnPropsChangeEvent(leaf = this.leaf): void {
|
||||
const handlePropsChange = debounce((propChangeInfo: IPublicTypePropChangeOptions) => {
|
||||
const {
|
||||
key,
|
||||
newValue = null,
|
||||
} = propChangeInfo;
|
||||
const node = leaf;
|
||||
|
||||
if (key === '___condition___') {
|
||||
const { condition = true } = this.leaf?.export(IPublicEnumTransformStage.Render) || {};
|
||||
const conditionValue = __parseData?.(condition, scope);
|
||||
__debug(`key is ___condition___, change condition value to [${condition}]`);
|
||||
// 条件表达式改变
|
||||
this.setState({
|
||||
condition: conditionValue,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果循坏条件变化，从根节点重新渲染
|
||||
// 目前多层循坏无法判断需要从哪一层开始渲染，故先粗暴解决
|
||||
if (key === '___loop___') {
|
||||
__debug('key is ___loop___, render a page!');
|
||||
container?.rerender();
|
||||
// 由于 scope 变化，需要清空缓存，使用新的 scope
|
||||
cache.component.delete(componentCacheId);
|
||||
return;
|
||||
}
|
||||
this.beforeRender(RerenderType.PropsChanged);
|
||||
const { state } = this;
|
||||
const { nodeCacheProps } = state;
|
||||
const nodeProps = getProps(node?.export?.(IPublicEnumTransformStage.Render) as IPublicTypeNodeSchema, scope, Comp, componentInfo);
|
||||
if (key && !(key in nodeProps) && (key in this.props)) {
|
||||
// 当 key 在 this.props 中时，且不存在在计算值中，需要用 newValue 覆盖掉 this.props 的取值
|
||||
nodeCacheProps[key] = newValue;
|
||||
}
|
||||
__debug(`${leaf?.componentName}[${this.props.componentId}] component trigger onPropsChange!`, nodeProps, nodeCacheProps, key, newValue);
|
||||
this.setState('children' in nodeProps ? {
|
||||
nodeChildren: nodeProps.children,
|
||||
nodeProps,
|
||||
childrenInState: true,
|
||||
nodeCacheProps,
|
||||
} : {
|
||||
nodeProps,
|
||||
nodeCacheProps,
|
||||
});
|
||||
|
||||
this.judgeMiniUnitRender();
|
||||
});
|
||||
const dispose = leaf?.onPropChange?.((propChangeInfo: IPublicTypePropChangeOptions) => {
|
||||
if (!this.autoRepaintNode) {
|
||||
return;
|
||||
}
|
||||
handlePropsChange(propChangeInfo);
|
||||
});
|
||||
|
||||
dispose && this.disposeFunctions.push(dispose);
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听显隐变化
|
||||
*/
|
||||
initOnVisibleChangeEvent(leaf = this.leaf) {
|
||||
const dispose = leaf?.onVisibleChange?.((flag: boolean) => {
|
||||
if (!this.autoRepaintNode) {
|
||||
return;
|
||||
}
|
||||
if (this.state.visible === flag) {
|
||||
return;
|
||||
}
|
||||
|
||||
__debug(`${leaf?.componentName}[${this.props.componentId}] component trigger onVisibleChange(${flag}) event`);
|
||||
this.beforeRender(RerenderType.VisibleChanged);
|
||||
this.setState({
|
||||
visible: flag,
|
||||
});
|
||||
this.judgeMiniUnitRender();
|
||||
});
|
||||
|
||||
dispose && this.disposeFunctions.push(dispose);
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听子元素变化（拖拽，删除...）
|
||||
*/
|
||||
initOnChildrenChangeEvent(leaf = this.leaf) {
|
||||
const dispose = leaf?.onChildrenChange?.((param): void => {
|
||||
if (!this.autoRepaintNode) {
|
||||
return;
|
||||
}
|
||||
const {
|
||||
type,
|
||||
node,
|
||||
} = param || {};
|
||||
this.beforeRender(`${RerenderType.ChildChanged}-${type}`, node);
|
||||
// TODO: 缓存同级其他元素的 children。
|
||||
// 缓存二级 children Next 查询筛选组件有问题
|
||||
// 缓存一级 children Next Tab 组件有问题
|
||||
const nextChild = getChildren(leaf?.export?.(IPublicEnumTransformStage.Render) as types.ISchema, scope, Comp);
|
||||
__debug(`${schema.componentName}[${this.props.componentId}] component trigger onChildrenChange event`, nextChild);
|
||||
this.setState({
|
||||
nodeChildren: nextChild,
|
||||
childrenInState: true,
|
||||
});
|
||||
this.judgeMiniUnitRender();
|
||||
});
|
||||
dispose && this.disposeFunctions.push(dispose);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.disposeFunctions.forEach(fn => fn());
|
||||
}
|
||||
|
||||
get hasChildren(): boolean {
|
||||
if (!this.state.childrenInState) {
|
||||
return 'children' in this.props;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
get children(): any {
|
||||
if (this.state.childrenInState) {
|
||||
return this.state.nodeChildren;
|
||||
}
|
||||
if (this.props.children && !Array.isArray(this.props.children)) {
|
||||
return [this.props.children];
|
||||
}
|
||||
if (this.props.children && this.props.children.length) {
|
||||
return this.props.children;
|
||||
}
|
||||
return this.props.children;
|
||||
}
|
||||
|
||||
get leaf(): INode | undefined {
|
||||
if (this.props._leaf?.isMock) {
|
||||
// 低代码组件作为一个整体更新，其内部的组件不需要监听相关事件
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return getNode?.(componentCacheId);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.state.visible || !this.state.condition) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const {
|
||||
forwardedRef,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
const compProps = {
|
||||
...rest,
|
||||
...(this.state.nodeCacheProps || {}),
|
||||
...(this.state.nodeProps || {}),
|
||||
children: [],
|
||||
__id: this.props.componentId,
|
||||
ref: forwardedRef,
|
||||
};
|
||||
|
||||
delete compProps.__inner__;
|
||||
|
||||
if (this.hasChildren) {
|
||||
return engine.createElement(Comp, compProps, this.children);
|
||||
}
|
||||
|
||||
return engine.createElement(Comp, compProps);
|
||||
}
|
||||
}
|
||||
|
||||
let LeafWrapper = forwardRef((props: any, ref: any) => {
|
||||
return createElement(LeafHoc, {
|
||||
...props,
|
||||
forwardedRef: ref,
|
||||
});
|
||||
});
|
||||
|
||||
LeafWrapper = cloneEnumerableProperty(LeafWrapper, Comp);
|
||||
|
||||
LeafWrapper.displayName = (Comp as any).displayName;
|
||||
|
||||
cache.component.set(componentCacheId, {
|
||||
LeafWrapper,
|
||||
Comp,
|
||||
});
|
||||
|
||||
return LeafWrapper;
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
import adapter from './adapter';
|
||||
import contextFactory from './context';
|
||||
|
||||
export { adapter, contextFactory };
|
||||
|
||||
export * from './renderer';
|
||||
export * as types from './types';
|
||||
export * as utils from './utils';
|
||||
export * from './hoc';
|
||||
@ -1,82 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import baseRendererFactory from './base';
|
||||
import { isEmpty } from '../utils';
|
||||
import { IRendererAppHelper, IBaseRendererProps, IBaseRenderComponent } from '../types';
|
||||
import logger from '../utils/logger';
|
||||
|
||||
export default function addonRendererFactory(): IBaseRenderComponent {
|
||||
const BaseRenderer = baseRendererFactory();
|
||||
return class AddonRenderer extends BaseRenderer {
|
||||
static displayName = 'AddonRenderer';
|
||||
|
||||
__namespace = 'addon';
|
||||
|
||||
static propTypes = {
|
||||
config: PropTypes.object,
|
||||
__schema: PropTypes.object,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
config: {},
|
||||
__schema: {},
|
||||
};
|
||||
|
||||
addonKey: any;
|
||||
appHelper: IRendererAppHelper;
|
||||
open: () => any;
|
||||
close: () => any;
|
||||
|
||||
__afterInit(props: IBaseRendererProps) {
|
||||
this.__generateCtx({
|
||||
component: this,
|
||||
});
|
||||
const schema = props.__schema || {};
|
||||
this.state = this.__parseData(schema.state || {});
|
||||
if (isEmpty(props.config) || !props.config?.addonKey) {
|
||||
logger.warn('lce addon has wrong config');
|
||||
this.setState({
|
||||
__hasError: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 注册插件
|
||||
this.addonKey = props.config.addonKey;
|
||||
this.appHelper.addons = this.appHelper.addons || {};
|
||||
this.appHelper.addons[this.addonKey] = this;
|
||||
this.__initDataSource(props);
|
||||
this.open = this.open || (() => { });
|
||||
this.close = this.close || (() => { });
|
||||
this.__executeLifeCycleMethod('constructor', [...arguments]);
|
||||
}
|
||||
|
||||
async componentWillUnmount() {
|
||||
super.componentWillUnmount?.apply(this, [...arguments] as any);
|
||||
// 注销插件
|
||||
const config = this.props.config || {};
|
||||
if (config && this.appHelper.addons) {
|
||||
delete this.appHelper.addons[config.addonKey];
|
||||
}
|
||||
}
|
||||
|
||||
get utils() {
|
||||
const { utils = {} } = this.context.config || {};
|
||||
return { ...this.appHelper.utils, ...utils };
|
||||
}
|
||||
|
||||
render() {
|
||||
const { __schema } = this.props;
|
||||
|
||||
if (this.__checkSchema(__schema)) {
|
||||
return '插件 schema 结构异常！';
|
||||
}
|
||||
|
||||
this.__debug(`${AddonRenderer.displayName} render - ${__schema.fileName}`);
|
||||
this.__generateCtx({
|
||||
component: this,
|
||||
});
|
||||
this.__render();
|
||||
|
||||
return this.__renderContent(this.__renderContextProvider({ compContext: this }));
|
||||
}
|
||||
};
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,38 +0,0 @@
|
||||
import baseRendererFactory from './base';
|
||||
import { IBaseRendererProps, IBaseRenderComponent } from '../types';
|
||||
|
||||
export default function blockRendererFactory(): IBaseRenderComponent {
|
||||
const BaseRenderer = baseRendererFactory();
|
||||
return class BlockRenderer extends BaseRenderer {
|
||||
static displayName = 'BlockRenderer';
|
||||
|
||||
__namespace = 'block';
|
||||
|
||||
__afterInit(props: IBaseRendererProps) {
|
||||
this.__generateCtx({});
|
||||
const schema = props.__schema || {};
|
||||
this.state = this.__parseData(schema.state || {});
|
||||
this.__initDataSource(props);
|
||||
this.__executeLifeCycleMethod('constructor', [...arguments]);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { __schema, __components } = this.props;
|
||||
|
||||
if (this.__checkSchema(__schema, 'Div')) {
|
||||
return '区块 schema 结构异常！';
|
||||
}
|
||||
|
||||
this.__debug(`${BlockRenderer.displayName} render - ${__schema?.fileName}`);
|
||||
this.__generateCtx({});
|
||||
this.__render();
|
||||
|
||||
const { Block } = __components;
|
||||
if (Block) {
|
||||
return this.__renderComp(Block, {});
|
||||
}
|
||||
|
||||
return this.__renderContent(this.__renderContextProvider());
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
import baseRendererFactory from './base';
|
||||
import { IBaseRendererProps, IBaseRenderComponent } from '../types';
|
||||
|
||||
export default function componentRendererFactory(): IBaseRenderComponent {
|
||||
const BaseRenderer = baseRendererFactory();
|
||||
return class CompRenderer extends BaseRenderer {
|
||||
static displayName = 'CompRenderer';
|
||||
|
||||
__namespace = 'component';
|
||||
|
||||
__afterInit(props: IBaseRendererProps) {
|
||||
this.__generateCtx({
|
||||
component: this,
|
||||
});
|
||||
const schema = props.__schema || {};
|
||||
this.state = this.__parseData(schema.state || {});
|
||||
this.__initDataSource(props);
|
||||
this.__executeLifeCycleMethod('constructor', arguments as any);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { __schema, __components } = this.props;
|
||||
if (this.__checkSchema(__schema)) {
|
||||
return '自定义组件 schema 结构异常！';
|
||||
}
|
||||
this.__debug(`${CompRenderer.displayName} render - ${__schema.fileName}`);
|
||||
|
||||
this.__generateCtx({
|
||||
component: this,
|
||||
});
|
||||
this.__render();
|
||||
|
||||
const noContainer = this.__parseData(__schema.props?.noContainer);
|
||||
|
||||
this.__bindCustomMethods(this.props);
|
||||
|
||||
if (noContainer) {
|
||||
return this.__renderContextProvider({ compContext: this });
|
||||
}
|
||||
|
||||
const Component = __components?.[__schema?.componentName];
|
||||
|
||||
if (!Component) {
|
||||
return this.__renderContent(this.__renderContextProvider({ compContext: this }));
|
||||
}
|
||||
|
||||
return this.__renderComp(Component, this.__renderContextProvider({ compContext: this }));
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
import baseRendererFactory from './base';
|
||||
import pageRendererFactory from './page';
|
||||
import componentRendererFactory from './component';
|
||||
import blockRendererFactory from './block';
|
||||
import addonRendererFactory from './addon';
|
||||
import tempRendererFactory from './temp';
|
||||
import rendererFactory from './renderer';
|
||||
|
||||
export {
|
||||
baseRendererFactory,
|
||||
pageRendererFactory,
|
||||
componentRendererFactory,
|
||||
blockRendererFactory,
|
||||
addonRendererFactory,
|
||||
tempRendererFactory,
|
||||
rendererFactory,
|
||||
};
|
||||
@ -1,63 +0,0 @@
|
||||
import { getLogger } from '@alilc/lowcode-utils';
|
||||
import baseRendererFactory from './base';
|
||||
import { IBaseRendererProps, IBaseRenderComponent } from '../types';
|
||||
|
||||
const logger = getLogger({ level: 'warn', bizName: 'renderer-core:page' });
|
||||
|
||||
export default function pageRendererFactory(): IBaseRenderComponent {
|
||||
const BaseRenderer = baseRendererFactory();
|
||||
return class PageRenderer extends BaseRenderer {
|
||||
static displayName = 'PageRenderer';
|
||||
|
||||
__namespace = 'page';
|
||||
|
||||
__afterInit(props: IBaseRendererProps, ...rest: unknown[]) {
|
||||
this.__generateCtx({
|
||||
page: this,
|
||||
});
|
||||
const schema = props.__schema || {};
|
||||
this.state = this.__parseData(schema.state || {});
|
||||
this.__initDataSource(props);
|
||||
this.__executeLifeCycleMethod('constructor', [props, ...rest]);
|
||||
}
|
||||
|
||||
async componentDidUpdate(prevProps: IBaseRendererProps, _prevState: {}, snapshot: unknown) {
|
||||
const { __ctx } = this.props;
|
||||
// 当编排的时候修改 schema.state 值，需要将最新 schema.state 值 setState
|
||||
if (JSON.stringify(prevProps.__schema.state) != JSON.stringify(this.props.__schema.state)) {
|
||||
const newState = this.__parseData(this.props.__schema.state, __ctx);
|
||||
this.setState(newState);
|
||||
}
|
||||
|
||||
super.componentDidUpdate?.(prevProps, _prevState, snapshot);
|
||||
}
|
||||
|
||||
setState(state: any, callback?: () => void) {
|
||||
logger.info('page set state', state);
|
||||
super.setState(state, callback);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { __schema, __components } = this.props;
|
||||
if (this.__checkSchema(__schema)) {
|
||||
return '页面schema结构异常！';
|
||||
}
|
||||
this.__debug(`${PageRenderer.displayName} render - ${__schema.fileName}`);
|
||||
|
||||
this.__bindCustomMethods(this.props);
|
||||
this.__initDataSource(this.props);
|
||||
|
||||
this.__generateCtx({
|
||||
page: this,
|
||||
});
|
||||
this.__render();
|
||||
|
||||
const { Page } = __components;
|
||||
if (Page) {
|
||||
return this.__renderComp(Page, { pageContext: this });
|
||||
}
|
||||
|
||||
return this.__renderContent(this.__renderContextProvider({ pageContext: this }));
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,182 +0,0 @@
|
||||
import Debug from 'debug';
|
||||
import adapter from '../adapter';
|
||||
import contextFactory from '../context';
|
||||
import { isFileSchema, isEmpty } from '../utils';
|
||||
import baseRendererFactory from './base';
|
||||
import divFactory from '../components/Div';
|
||||
import { IRenderComponent, IRendererProps, IRendererState } from '../types';
|
||||
import { IPublicTypeNodeSchema, IPublicTypeRootSchema } from '@alilc/lowcode-types';
|
||||
import logger from '../utils/logger';
|
||||
|
||||
export default function rendererFactory(): IRenderComponent {
|
||||
const { PureComponent, Component, createElement, findDOMNode } = adapter.getRuntime();
|
||||
const RENDERER_COMPS: any = adapter.getRenderers();
|
||||
const BaseRenderer = baseRendererFactory();
|
||||
const AppContext = contextFactory();
|
||||
const Div = divFactory();
|
||||
|
||||
const ConfigProvider = adapter.getConfigProvider() || Div;
|
||||
|
||||
const debug = Debug('renderer:entry');
|
||||
|
||||
class FaultComponent extends PureComponent<IPublicTypeNodeSchema | any> {
|
||||
render() {
|
||||
logger.error(`%c${this.props.componentName || ''} 组件渲染异常, 异常原因: ${this.props.error?.message || this.props.error || '未知'}`, 'color: #ff0000;');
|
||||
return createElement(Div, {
|
||||
style: {
|
||||
width: '100%',
|
||||
height: '50px',
|
||||
lineHeight: '50px',
|
||||
textAlign: 'center',
|
||||
fontSize: '15px',
|
||||
color: '#ff0000',
|
||||
border: '2px solid #ff0000',
|
||||
},
|
||||
}, `${this.props.componentName || ''} 组件渲染异常，请查看控制台日志`);
|
||||
}
|
||||
}
|
||||
|
||||
class NotFoundComponent extends PureComponent<{
|
||||
componentName: string;
|
||||
} & IRendererProps> {
|
||||
render() {
|
||||
if (this.props.enableStrictNotFoundMode) {
|
||||
return `${this.props.componentName || ''} Component Not Found`;
|
||||
}
|
||||
return createElement(Div, this.props, this.props.children || `${this.props.componentName || ''} Component Not Found`);
|
||||
}
|
||||
}
|
||||
|
||||
return class Renderer extends Component<IRendererProps> {
|
||||
static displayName = 'Renderer';
|
||||
|
||||
state: Partial<IRendererState> = {};
|
||||
|
||||
__ref: any;
|
||||
|
||||
static defaultProps: IRendererProps = {
|
||||
appHelper: undefined,
|
||||
components: {},
|
||||
designMode: '',
|
||||
suspended: false,
|
||||
schema: {} as IPublicTypeRootSchema,
|
||||
onCompGetRef: () => { },
|
||||
onCompGetCtx: () => { },
|
||||
thisRequiredInJSE: true,
|
||||
};
|
||||
|
||||
static findDOMNode = findDOMNode;
|
||||
|
||||
constructor(props: IRendererProps, context: any) {
|
||||
super(props, context);
|
||||
this.state = {};
|
||||
debug(`entry.constructor - ${props?.schema?.componentName}`);
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
debug(`entry.componentDidMount - ${this.props.schema && this.props.schema.componentName}`);
|
||||
}
|
||||
|
||||
async componentDidUpdate() {
|
||||
debug(`entry.componentDidUpdate - ${this.props?.schema?.componentName}`);
|
||||
}
|
||||
|
||||
async componentWillUnmount() {
|
||||
debug(`entry.componentWillUnmount - ${this.props?.schema?.componentName}`);
|
||||
}
|
||||
|
||||
componentDidCatch(error: Error) {
|
||||
this.state.engineRenderError = true;
|
||||
this.state.error = error;
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: IRendererProps) {
|
||||
return !nextProps.suspended;
|
||||
}
|
||||
|
||||
__getRef = (ref: any) => {
|
||||
this.__ref = ref;
|
||||
if (ref) {
|
||||
this.props.onCompGetRef?.(this.props.schema, ref);
|
||||
}
|
||||
};
|
||||
|
||||
isValidComponent(SetComponent: any) {
|
||||
return SetComponent;
|
||||
}
|
||||
|
||||
createElement(SetComponent: any, props: any, children?: any) {
|
||||
return (this.props.customCreateElement || createElement)(SetComponent, props, children);
|
||||
}
|
||||
|
||||
getNotFoundComponent() {
|
||||
return this.props.notFoundComponent || NotFoundComponent;
|
||||
}
|
||||
|
||||
getFaultComponent() {
|
||||
const { faultComponent, faultComponentMap, schema } = this.props;
|
||||
if (faultComponentMap) {
|
||||
const { componentName } = schema;
|
||||
return faultComponentMap[componentName] || faultComponent || FaultComponent;
|
||||
}
|
||||
return faultComponent || FaultComponent;
|
||||
}
|
||||
|
||||
getComp() {
|
||||
const { schema, components } = this.props;
|
||||
const { componentName } = schema;
|
||||
const allComponents = { ...RENDERER_COMPS, ...components };
|
||||
let Comp = allComponents[componentName] || RENDERER_COMPS[`${componentName}Renderer`];
|
||||
if (Comp && Comp.prototype) {
|
||||
if (!(Comp.prototype instanceof BaseRenderer)) {
|
||||
Comp = RENDERER_COMPS[`${componentName}Renderer`];
|
||||
}
|
||||
}
|
||||
return Comp;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { schema, designMode, appHelper, components } = this.props;
|
||||
if (isEmpty(schema)) {
|
||||
return null;
|
||||
}
|
||||
// 兼容乐高区块模板
|
||||
if (schema.componentName !== 'Div' && !isFileSchema(schema)) {
|
||||
logger.error('The root component name needs to be one of Page、Block、Component, please check the schema: ', schema);
|
||||
return '模型结构异常';
|
||||
}
|
||||
debug('entry.render');
|
||||
const allComponents = { ...RENDERER_COMPS, ...components };
|
||||
let Comp = this.getComp();
|
||||
|
||||
if (this.state && this.state.engineRenderError) {
|
||||
return createElement(this.getFaultComponent(), {
|
||||
...this.props,
|
||||
error: this.state.error,
|
||||
});
|
||||
}
|
||||
|
||||
if (Comp) {
|
||||
return createElement(AppContext.Provider, {
|
||||
value: {
|
||||
appHelper,
|
||||
components: allComponents,
|
||||
engine: this,
|
||||
},
|
||||
}, createElement(ConfigProvider, {
|
||||
device: this.props.device,
|
||||
locale: this.props.locale,
|
||||
}, createElement(Comp, {
|
||||
key: schema.__ctx && `${schema.__ctx.lceKey}_${schema.__ctx.idx || '0'}`,
|
||||
ref: this.__getRef,
|
||||
__appHelper: appHelper,
|
||||
__components: allComponents,
|
||||
__schema: schema,
|
||||
__designMode: designMode,
|
||||
...this.props,
|
||||
})));
|
||||
}
|
||||
return null;
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
import { IBaseRenderComponent } from '../types';
|
||||
import logger from '../utils/logger';
|
||||
import baseRendererFactory from './base';
|
||||
|
||||
export default function tempRendererFactory(): IBaseRenderComponent {
|
||||
const BaseRenderer = baseRendererFactory();
|
||||
|
||||
return class TempRenderer extends BaseRenderer {
|
||||
static displayName = 'TempRenderer';
|
||||
|
||||
__namespace = 'temp';
|
||||
|
||||
cacheSetState?: Record<string, any>;
|
||||
|
||||
__init() {
|
||||
this.state = {};
|
||||
this.cacheSetState = {};
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
const ctx = this.props.__ctx;
|
||||
if (!ctx) return;
|
||||
const { setState } = ctx;
|
||||
this.cacheSetState = setState;
|
||||
ctx.setState = (...args: any) => {
|
||||
setState.call(ctx, ...args);
|
||||
setTimeout(() => this.forceUpdate(), 0);
|
||||
};
|
||||
this.__debug(`componentDidMount - ${this.props.__schema.fileName}`);
|
||||
}
|
||||
|
||||
async componentDidUpdate() {
|
||||
this.__debug(`componentDidUpdate - ${this.props.__schema.fileName}`);
|
||||
}
|
||||
|
||||
async componentWillUnmount() {
|
||||
const ctx = this.props.__ctx;
|
||||
if (!ctx || !this.cacheSetState) return;
|
||||
ctx.setState = this.cacheSetState;
|
||||
delete this.cacheSetState;
|
||||
this.__debug(`componentWillUnmount - ${this.props.__schema.fileName}`);
|
||||
}
|
||||
|
||||
async componentDidCatch(e: any) {
|
||||
logger.warn(e);
|
||||
this.__debug(`componentDidCatch - ${this.props.__schema.fileName}`);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { __schema, __ctx } = this.props;
|
||||
if (this.__checkSchema(__schema)) {
|
||||
return '下钻编辑 schema 结构异常！';
|
||||
}
|
||||
|
||||
this.__debug(`${TempRenderer.displayName} render - ${__schema?.fileName}`);
|
||||
|
||||
return this.__renderContent(this.__renderContextProvider({ __ctx }));
|
||||
}
|
||||
};
|
||||
}
|
||||
@ -1,342 +0,0 @@
|
||||
import type { ComponentLifecycle, CSSProperties } from 'react';
|
||||
import { BuiltinSimulatorHost, BuiltinSimulatorRenderer } from '@alilc/lowcode-designer';
|
||||
import { RequestHandler, IPublicTypeNodeSchema, IPublicTypeRootSchema, IPublicTypeJSONObject } from '@alilc/lowcode-types';
|
||||
|
||||
export type ISchema = IPublicTypeNodeSchema | IPublicTypeRootSchema;
|
||||
|
||||
/*
|
||||
** Duck typed component type supporting both react and rax
|
||||
*/
|
||||
interface IGeneralComponent<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> {
|
||||
readonly props: Readonly<P> & Readonly<{ children?: any | undefined }>;
|
||||
state: Readonly<S>;
|
||||
refs: Record<string, any>;
|
||||
context: any;
|
||||
setState<K extends keyof S>(
|
||||
state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
|
||||
callback?: () => void
|
||||
): void;
|
||||
forceUpdate(callback?: () => void): void;
|
||||
render(): any;
|
||||
}
|
||||
|
||||
export type IGeneralConstructor<
|
||||
T = {
|
||||
[key: string]: any;
|
||||
}, S = {
|
||||
[key: string]: any;
|
||||
}, D = any
|
||||
> = new <TT = T, SS = S, DD = D>(props: TT, context: any) => IGeneralComponent<TT, SS, DD>;
|
||||
|
||||
/**
|
||||
* duck-typed History
|
||||
*
|
||||
* @see https://github.com/ReactTraining/history/tree/master/docs/api-reference.md
|
||||
*/
|
||||
interface IHistoryLike {
|
||||
readonly action: any;
|
||||
readonly location: ILocationLike;
|
||||
createHref: (to: any) => string;
|
||||
push: (to: any, state?: any) => void;
|
||||
replace: (to: any, state?: any) => void;
|
||||
go: (delta: any) => void;
|
||||
back: () => void;
|
||||
forward: () => void;
|
||||
listen: (listener: any) => () => void;
|
||||
block: (blocker: any) => () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* duck-typed History.Location
|
||||
*
|
||||
* @see https://github.com/remix-run/history/blob/dev/docs/api-reference.md#location
|
||||
*/
|
||||
export interface ILocationLike {
|
||||
pathname: any;
|
||||
search: any;
|
||||
state: any;
|
||||
hash: any;
|
||||
key?: any;
|
||||
}
|
||||
|
||||
export type IRendererAppHelper = Partial<{
|
||||
|
||||
/** 全局公共函数 */
|
||||
utils: Record<string, any>;
|
||||
|
||||
/** 全局常量 */
|
||||
constants: Record<string, any>;
|
||||
|
||||
/** react-router 的 location 实例 */
|
||||
location: ILocationLike;
|
||||
|
||||
/** react-router 的 history 实例 */
|
||||
history: IHistoryLike;
|
||||
|
||||
/** @deprecated 已无业务使用 */
|
||||
match: any;
|
||||
|
||||
/** @experimental 内部使用 */
|
||||
logParams: Record<string, any>;
|
||||
|
||||
/** @experimental 内部使用 */
|
||||
addons: Record<string, any>;
|
||||
|
||||
/** @experimental 内部使用 */
|
||||
requestHandlersMap: Record<string, RequestHandler<{
|
||||
data: unknown;
|
||||
}>>;
|
||||
}>;
|
||||
|
||||
/**
|
||||
* 渲染模块可用配置
|
||||
*
|
||||
* @see @todo @承虎
|
||||
*/
|
||||
export interface IRendererProps {
|
||||
|
||||
/** 符合低代码搭建协议的数据 */
|
||||
schema: IPublicTypeRootSchema | IPublicTypeNodeSchema;
|
||||
|
||||
/** 组件依赖的实例 */
|
||||
components: Record<string, IGeneralComponent>;
|
||||
|
||||
/** CSS 类名 */
|
||||
className?: string;
|
||||
|
||||
/** style */
|
||||
style?: CSSProperties;
|
||||
|
||||
/** id */
|
||||
id?: string | number;
|
||||
|
||||
/** 语言 */
|
||||
locale?: string;
|
||||
|
||||
/**
|
||||
* 多语言语料
|
||||
* 配置规范参见《低代码搭建组件描述协议》https://lowcode-engine.cn/lowcode 中 2.6 国际化多语言支持
|
||||
* */
|
||||
messages?: Record<string, any>;
|
||||
|
||||
/** 主要用于设置渲染模块的全局上下文，里面定义的内容可以在低代码中通过 this 来访问，比如 this.utils */
|
||||
appHelper?: IRendererAppHelper;
|
||||
|
||||
/**
|
||||
* 配置规范参见《低代码搭建组件描述协议》https://lowcode-engine.cn/lowcode
|
||||
* 主要在搭建场景中使用，用于提升用户搭建体验。
|
||||
*
|
||||
* > 在生产环境下不需要设置
|
||||
*/
|
||||
componentsMap?: { [key: string]: any };
|
||||
|
||||
/** 设计模式，可选值：live、design */
|
||||
designMode?: string;
|
||||
|
||||
/** 渲染模块是否挂起，当设置为 true 时，渲染模块最外层容器的 shouldComponentUpdate 将始终返回false，在下钻编辑或者多引擎渲染的场景会用到该参数。 */
|
||||
suspended?: boolean;
|
||||
|
||||
/** 组件获取 ref 时触发的钩子 */
|
||||
onCompGetRef?: (schema: IPublicTypeNodeSchema, ref: any) => void;
|
||||
|
||||
/** 组件 ctx 更新回调 */
|
||||
onCompGetCtx?: (schema: IPublicTypeNodeSchema, ref: any) => void;
|
||||
|
||||
/** 传入的 schema 是否有变更 */
|
||||
getSchemaChangedSymbol?: () => boolean;
|
||||
|
||||
/** 设置 schema 是否有变更 */
|
||||
setSchemaChangedSymbol?: (symbol: boolean) => void;
|
||||
|
||||
/** 自定义创建 element 的钩子 */
|
||||
customCreateElement?: (Component: any, props: any, children: any) => any;
|
||||
|
||||
/** 渲染类型，标识当前模块是以什么类型进行渲染的 */
|
||||
rendererName?: 'LowCodeRenderer' | 'PageRenderer' | string;
|
||||
|
||||
/** 当找不到组件时，显示的组件 */
|
||||
notFoundComponent?: IGeneralComponent;
|
||||
|
||||
/** 当组件渲染异常时，显示的组件 */
|
||||
faultComponent?: IGeneralComponent;
|
||||
|
||||
/** */
|
||||
faultComponentMap?: {
|
||||
[prop: string]: IGeneralComponent;
|
||||
};
|
||||
|
||||
/** 设备信息 */
|
||||
device?: string;
|
||||
|
||||
/**
|
||||
* @default true
|
||||
* JSExpression 是否只支持使用 this 来访问上下文变量
|
||||
*/
|
||||
thisRequiredInJSE?: boolean;
|
||||
|
||||
/**
|
||||
* @default false
|
||||
* 当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件
|
||||
*/
|
||||
enableStrictNotFoundMode?: boolean;
|
||||
}
|
||||
|
||||
export interface IRendererState {
|
||||
engineRenderError?: boolean;
|
||||
error?: Error;
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染内部模块可用配置
|
||||
*/
|
||||
export interface IBaseRendererProps {
|
||||
locale?: string;
|
||||
messages: Record<string, any>;
|
||||
__appHelper: IRendererAppHelper;
|
||||
__components: Record<string, any>;
|
||||
__ctx: Record<string, any>;
|
||||
__schema: IPublicTypeRootSchema;
|
||||
__host?: BuiltinSimulatorHost;
|
||||
__container?: BuiltinSimulatorRenderer;
|
||||
config?: Record<string, any>;
|
||||
designMode?: 'design';
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
id?: string | number;
|
||||
getSchemaChangedSymbol?: () => boolean;
|
||||
setSchemaChangedSymbol?: (symbol: boolean) => void;
|
||||
thisRequiredInJSE?: boolean;
|
||||
documentId?: string;
|
||||
getNode?: any;
|
||||
|
||||
/**
|
||||
* 设备类型，默认值：'default'
|
||||
*/
|
||||
device?: 'default' | 'mobile' | string;
|
||||
componentName?: string;
|
||||
}
|
||||
|
||||
export interface INodeInfo {
|
||||
schema?: IPublicTypeNodeSchema;
|
||||
Comp: any;
|
||||
componentInfo?: any;
|
||||
componentChildren?: any;
|
||||
}
|
||||
|
||||
export interface JSExpression {
|
||||
type: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
export interface DataSourceItem {
|
||||
id: string;
|
||||
isInit?: boolean | JSExpression;
|
||||
type?: string;
|
||||
options?: {
|
||||
uri: string | JSExpression;
|
||||
params?: IPublicTypeJSONObject | JSExpression;
|
||||
method?: string | JSExpression;
|
||||
shouldFetch?: string;
|
||||
willFetch?: string;
|
||||
fit?: string;
|
||||
didFetch?: string;
|
||||
};
|
||||
dataHandler?: JSExpression;
|
||||
}
|
||||
|
||||
export interface DataSource {
|
||||
list?: DataSourceItem[];
|
||||
dataHandler?: JSExpression;
|
||||
}
|
||||
|
||||
export interface IRuntime {
|
||||
[key: string]: any;
|
||||
Component: IGeneralConstructor;
|
||||
PureComponent: IGeneralConstructor;
|
||||
createElement: (...args: any) => any;
|
||||
createContext: (...args: any) => any;
|
||||
forwardRef: (...args: any) => any;
|
||||
findDOMNode: (...args: any) => any;
|
||||
}
|
||||
|
||||
export interface IRendererModules {
|
||||
BaseRenderer?: IBaseRenderComponent;
|
||||
PageRenderer: IBaseRenderComponent;
|
||||
ComponentRenderer: IBaseRenderComponent;
|
||||
BlockRenderer?: IBaseRenderComponent;
|
||||
AddonRenderer?: IBaseRenderComponent;
|
||||
TempRenderer?: IBaseRenderComponent;
|
||||
DivRenderer?: IBaseRenderComponent;
|
||||
}
|
||||
|
||||
export interface IBaseRendererContext {
|
||||
appHelper: IRendererAppHelper;
|
||||
components: Record<string, IGeneralComponent>;
|
||||
engine: IRuntime;
|
||||
pageContext?: IBaseRenderComponent;
|
||||
compContext?: IBaseRenderComponent;
|
||||
}
|
||||
|
||||
export type IBaseRendererInstance = IGeneralComponent<
|
||||
IBaseRendererProps,
|
||||
Record<string, any>,
|
||||
any
|
||||
>
|
||||
& {
|
||||
reloadDataSource(): Promise<any>;
|
||||
__beforeInit(props: IBaseRendererProps): void;
|
||||
__init(props: IBaseRendererProps): void;
|
||||
__afterInit(props: IBaseRendererProps): void;
|
||||
__executeLifeCycleMethod(method: string, args?: any[]): void;
|
||||
__bindCustomMethods(props: IBaseRendererProps): void;
|
||||
__generateCtx(ctx: Record<string, any>): void;
|
||||
__parseData(data: any, ctx?: any): any;
|
||||
__initDataSource(props: IBaseRendererProps): void;
|
||||
__render(): void;
|
||||
__getRef(ref: any): void;
|
||||
__getSchemaChildrenVirtualDom(
|
||||
schema: IPublicTypeNodeSchema | undefined,
|
||||
Comp: any,
|
||||
nodeChildrenMap?: any
|
||||
): any;
|
||||
__getComponentProps(schema: IPublicTypeNodeSchema | undefined, scope: any, Comp: any, componentInfo?: any): any;
|
||||
__createDom(): any;
|
||||
__createVirtualDom(schema: any, self: any, parentInfo: INodeInfo, idx: string | number): any;
|
||||
__createLoopVirtualDom(schema: any, self: any, parentInfo: INodeInfo, idx: number | string): any;
|
||||
__parseProps(props: any, self: any, path: string, info: INodeInfo): any;
|
||||
__initDebug?(): void;
|
||||
__debug(...args: any[]): void;
|
||||
__renderContextProvider(customProps?: object, children?: any): any;
|
||||
__renderContextConsumer(children: any): any;
|
||||
__renderContent(children: any): any;
|
||||
__checkSchema(schema: IPublicTypeNodeSchema | undefined, extraComponents?: string | string[]): any;
|
||||
__renderComp(Comp: any, ctxProps: object): any;
|
||||
$(filedId: string, instance?: any): any;
|
||||
};
|
||||
|
||||
export interface IBaseRenderComponent {
|
||||
new(
|
||||
props: IBaseRendererProps,
|
||||
context: any
|
||||
): IBaseRendererInstance;
|
||||
}
|
||||
|
||||
export interface IRenderComponent {
|
||||
displayName: string;
|
||||
defaultProps: IRendererProps;
|
||||
findDOMNode: (...args: any) => any;
|
||||
|
||||
new(props: IRendererProps, context: any): IGeneralComponent<IRendererProps, IRendererState> & {
|
||||
[x: string]: any;
|
||||
__getRef: (ref: any) => void;
|
||||
componentDidMount(): Promise<void> | void;
|
||||
componentDidUpdate(): Promise<void> | void;
|
||||
componentWillUnmount(): Promise<void> | void;
|
||||
componentDidCatch(e: any): Promise<void> | void;
|
||||
shouldComponentUpdate(nextProps: IRendererProps): boolean;
|
||||
isValidComponent(SetComponent: any): any;
|
||||
createElement(SetComponent: any, props: any, children?: any): any;
|
||||
getNotFoundComponent(): any;
|
||||
getFaultComponent(): any;
|
||||
};
|
||||
}
|
||||
@ -1,370 +0,0 @@
|
||||
/* eslint-disable no-console */
|
||||
/* eslint-disable no-new-func */
|
||||
import logger from './logger';
|
||||
import { IPublicTypeRootSchema, IPublicTypeNodeSchema, IPublicTypeJSSlot } from '@alilc/lowcode-types';
|
||||
import { isI18nData, isJSExpression } from '@alilc/lowcode-utils';
|
||||
import { isEmpty } from 'lodash';
|
||||
import IntlMessageFormat from 'intl-messageformat';
|
||||
import pkg from '../../package.json';
|
||||
|
||||
(window as any).sdkVersion = pkg.version;
|
||||
|
||||
export { pick, isEqualWith as deepEqual, cloneDeep as clone, isEmpty, throttle, debounce } from 'lodash';
|
||||
|
||||
const EXPRESSION_TYPE = {
|
||||
JSEXPRESSION: 'JSExpression',
|
||||
JSFUNCTION: 'JSFunction',
|
||||
JSSLOT: 'JSSlot',
|
||||
JSBLOCK: 'JSBlock',
|
||||
I18N: 'i18n',
|
||||
};
|
||||
|
||||
/**
|
||||
* check if schema passed in is a valid schema
|
||||
* @name isSchema
|
||||
* @returns boolean
|
||||
*/
|
||||
export function isSchema(schema: any): schema is IPublicTypeNodeSchema {
|
||||
if (isEmpty(schema)) {
|
||||
return false;
|
||||
}
|
||||
// Leaf and Slot should be valid
|
||||
if (schema.componentName === 'Leaf' || schema.componentName === 'Slot') {
|
||||
return true;
|
||||
}
|
||||
if (Array.isArray(schema)) {
|
||||
return schema.every((item) => isSchema(item));
|
||||
}
|
||||
// check if props is valid
|
||||
const isValidProps = (props: any) => {
|
||||
if (!props) {
|
||||
return false;
|
||||
}
|
||||
if (isJSExpression(props)) {
|
||||
return true;
|
||||
}
|
||||
return (typeof schema.props === 'object' && !Array.isArray(props));
|
||||
};
|
||||
return !!(schema.componentName && isValidProps(schema.props));
|
||||
}
|
||||
|
||||
/**
|
||||
* check if schema passed in is a container type, including : Component Block Page
|
||||
* @param schema
|
||||
* @returns boolean
|
||||
*/
|
||||
export function isFileSchema(schema: IPublicTypeNodeSchema): schema is IPublicTypeRootSchema {
|
||||
if (!isSchema(schema)) {
|
||||
return false;
|
||||
}
|
||||
return ['Page', 'Block', 'Component'].includes(schema.componentName);
|
||||
}
|
||||
|
||||
/**
|
||||
* check if current page is nested within another page with same host
|
||||
* @returns boolean
|
||||
*/
|
||||
export function inSameDomain() {
|
||||
try {
|
||||
return window.parent !== window && window.parent.location.host === window.location.host;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* get css styled name from schema`s fileName
|
||||
* FileName -> lce-file-name
|
||||
* @returns string
|
||||
*/
|
||||
export function getFileCssName(fileName: string) {
|
||||
if (!fileName) {
|
||||
return;
|
||||
}
|
||||
const name = fileName.replace(/([A-Z])/g, '-$1').toLowerCase();
|
||||
return (`lce-${name}`)
|
||||
.split('-')
|
||||
.filter((p) => !!p)
|
||||
.join('-');
|
||||
}
|
||||
|
||||
/**
|
||||
* check if a object is type of JSSlot
|
||||
* @returns string
|
||||
*/
|
||||
export function isJSSlot(obj: any): obj is IPublicTypeJSSlot {
|
||||
if (!obj) {
|
||||
return false;
|
||||
}
|
||||
if (typeof obj !== 'object' || Array.isArray(obj)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Compatible with the old protocol JSBlock
|
||||
return [EXPRESSION_TYPE.JSSLOT, EXPRESSION_TYPE.JSBLOCK].includes(obj.type);
|
||||
}
|
||||
|
||||
/**
|
||||
* get value from an object
|
||||
* @returns string
|
||||
*/
|
||||
export function getValue(obj: any, path: string, defaultValue = {}) {
|
||||
// array is not valid type, return default value
|
||||
if (Array.isArray(obj)) {
|
||||
return defaultValue;
|
||||
}
|
||||
|
||||
if (isEmpty(obj) || typeof obj !== 'object') {
|
||||
return defaultValue;
|
||||
}
|
||||
|
||||
const res = path.split('.').reduce((pre, cur) => {
|
||||
return pre && pre[cur];
|
||||
}, obj);
|
||||
if (res === undefined) {
|
||||
return defaultValue;
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
/**
|
||||
* 用于处理国际化字符串
|
||||
* @param {*} key 语料标识
|
||||
* @param {*} values 字符串模版变量
|
||||
* @param {*} locale 国际化标识，例如 zh-CN、en-US
|
||||
* @param {*} messages 国际化语言包
|
||||
*/
|
||||
export function getI18n(key: string, values = {}, locale = 'zh-CN', messages: Record<string, any> = {}) {
|
||||
if (!messages || !messages[locale] || !messages[locale][key]) {
|
||||
return '';
|
||||
}
|
||||
const formater = new IntlMessageFormat(messages[locale][key], locale);
|
||||
return formater.format(values);
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断当前组件是否能够设置ref
|
||||
* @param {*} Comp 需要判断的组件
|
||||
*/
|
||||
export function canAcceptsRef(Comp: any) {
|
||||
const hasSymbol = typeof Symbol === 'function' && Symbol.for;
|
||||
const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
|
||||
// eslint-disable-next-line max-len
|
||||
return Comp?.$$typeof === REACT_FORWARD_REF_TYPE || Comp?.prototype?.isReactComponent || Comp?.prototype?.setState || Comp._forwardRef;
|
||||
}
|
||||
|
||||
/**
|
||||
* transform array to a object
|
||||
* @param arr array to be transformed
|
||||
* @param key key of array item, which`s value will be used as key in result map
|
||||
* @param overwrite overwrite existing item in result or not
|
||||
* @returns object result map
|
||||
*/
|
||||
export function transformArrayToMap(arr: any[], key: string, overwrite = true) {
|
||||
if (isEmpty(arr) || !Array.isArray(arr)) {
|
||||
return {};
|
||||
}
|
||||
const res: any = {};
|
||||
arr.forEach((item) => {
|
||||
const curKey = item[key];
|
||||
if (item[key] === undefined) {
|
||||
return;
|
||||
}
|
||||
if (res[curKey] && !overwrite) {
|
||||
return;
|
||||
}
|
||||
res[curKey] = item;
|
||||
});
|
||||
return res;
|
||||
}
|
||||
|
||||
/**
|
||||
* transform string to a function
|
||||
* @param str function in string form
|
||||
* @returns funtion
|
||||
*/
|
||||
export function transformStringToFunction(str: string) {
|
||||
if (typeof str !== 'string') {
|
||||
return str;
|
||||
}
|
||||
if (inSameDomain() && (window.parent as any).__newFunc) {
|
||||
return (window.parent as any).__newFunc(`"use strict"; return ${str}`)();
|
||||
} else {
|
||||
return new Function(`"use strict"; return ${str}`)();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 对象类型JSExpression，支持省略this
|
||||
* @param str expression in string form
|
||||
* @param self scope object
|
||||
* @returns funtion
|
||||
*/
|
||||
|
||||
function parseExpression(options: {
|
||||
str: any; self: any; thisRequired?: boolean; logScope?: string;
|
||||
}): any;
|
||||
function parseExpression(str: any, self: any, thisRequired?: boolean): any;
|
||||
function parseExpression(a: any, b?: any, c = false) {
|
||||
let str;
|
||||
let self;
|
||||
let thisRequired;
|
||||
let logScope;
|
||||
if (typeof a === 'object' && b === undefined) {
|
||||
str = a.str;
|
||||
self = a.self;
|
||||
thisRequired = a.thisRequired;
|
||||
logScope = a.logScope;
|
||||
} else {
|
||||
str = a;
|
||||
self = b;
|
||||
thisRequired = c;
|
||||
}
|
||||
try {
|
||||
const contextArr = ['"use strict";', 'var __self = arguments[0];'];
|
||||
contextArr.push('return ');
|
||||
let tarStr: string;
|
||||
|
||||
tarStr = (str.value || '').trim();
|
||||
|
||||
// NOTE: use __self replace 'this' in the original function str
|
||||
// may be wrong in extreme case which contains '__self' already
|
||||
tarStr = tarStr.replace(/this(\W|$)/g, (_a: any, b: any) => `__self${b}`);
|
||||
tarStr = contextArr.join('\n') + tarStr;
|
||||
|
||||
// 默认调用顶层窗口的parseObj, 保障new Function的window对象是顶层的window对象
|
||||
if (inSameDomain() && (window.parent as any).__newFunc) {
|
||||
return (window.parent as any).__newFunc(tarStr)(self);
|
||||
}
|
||||
const code = `with(${thisRequired ? '{}' : '$scope || {}'}) { ${tarStr} }`;
|
||||
return new Function('$scope', code)(self);
|
||||
} catch (err) {
|
||||
logger.error(`${logScope || ''} parseExpression.error`, err, str, self?.__self ?? self);
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
parseExpression,
|
||||
};
|
||||
|
||||
export function parseThisRequiredExpression(str: any, self: any) {
|
||||
return parseExpression(str, self, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* capitalize first letter
|
||||
* @param word string to be proccessed
|
||||
* @returns string capitalized string
|
||||
*/
|
||||
export function capitalizeFirstLetter(word: string) {
|
||||
if (!word || !isString(word) || word.length === 0) {
|
||||
return word;
|
||||
}
|
||||
return word[0].toUpperCase() + word.slice(1);
|
||||
}
|
||||
|
||||
/**
|
||||
* check str passed in is a string type of not
|
||||
* @param str obj to be checked
|
||||
* @returns boolean
|
||||
*/
|
||||
export function isString(str: any): boolean {
|
||||
return {}.toString.call(str) === '[object String]';
|
||||
}
|
||||
|
||||
/**
|
||||
* check if obj is type of variable structure
|
||||
* @param obj object to be checked
|
||||
* @returns boolean
|
||||
*/
|
||||
export function isVariable(obj: any) {
|
||||
if (!obj || Array.isArray(obj)) {
|
||||
return false;
|
||||
}
|
||||
return typeof obj === 'object' && obj?.type === 'variable';
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 i18n 结构，降级解释为对 i18n 接口的调用
|
||||
* @param i18nInfo object
|
||||
* @param self context
|
||||
*/
|
||||
export function parseI18n(i18nInfo: any, self: any) {
|
||||
return parseExpression({
|
||||
type: EXPRESSION_TYPE.JSEXPRESSION,
|
||||
value: `this.i18n('${i18nInfo.key}')`,
|
||||
}, self);
|
||||
}
|
||||
|
||||
/**
|
||||
* for each key in targetObj, run fn with the value of the value, and the context paased in.
|
||||
* @param targetObj object that keys will be for each
|
||||
* @param fn function that process each item
|
||||
* @param context
|
||||
*/
|
||||
export function forEach(targetObj: any, fn: any, context?: any) {
|
||||
if (!targetObj || Array.isArray(targetObj) || isString(targetObj) || typeof targetObj !== 'object') {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.keys(targetObj).forEach((key) => fn.call(context, targetObj[key], key));
|
||||
}
|
||||
|
||||
interface IParseOptions {
|
||||
thisRequiredInJSE?: boolean;
|
||||
logScope?: string;
|
||||
}
|
||||
|
||||
export function parseData(schema: unknown, self: any, options: IParseOptions = {}): any {
|
||||
if (isJSExpression(schema)) {
|
||||
return parseExpression({
|
||||
str: schema,
|
||||
self,
|
||||
thisRequired: options.thisRequiredInJSE,
|
||||
logScope: options.logScope,
|
||||
});
|
||||
} else if (isI18nData(schema)) {
|
||||
return parseI18n(schema, self);
|
||||
} else if (typeof schema === 'string') {
|
||||
return schema.trim();
|
||||
} else if (Array.isArray(schema)) {
|
||||
return schema.map((item) => parseData(item, self, options));
|
||||
} else if (typeof schema === 'function') {
|
||||
return schema.bind(self);
|
||||
} else if (typeof schema === 'object') {
|
||||
// 对于undefined及null直接返回
|
||||
if (!schema) {
|
||||
return schema;
|
||||
}
|
||||
const res: any = {};
|
||||
forEach(schema, (val: any, key: string) => {
|
||||
if (key.startsWith('__')) {
|
||||
return;
|
||||
}
|
||||
res[key] = parseData(val, self, options);
|
||||
});
|
||||
return res;
|
||||
}
|
||||
return schema;
|
||||
}
|
||||
|
||||
/**
|
||||
* process params for using in a url query
|
||||
* @param obj params to be processed
|
||||
* @returns string
|
||||
*/
|
||||
export function serializeParams(obj: any) {
|
||||
let result: any = [];
|
||||
forEach(obj, (val: any, key: any) => {
|
||||
if (val === null || val === undefined || val === '') {
|
||||
return;
|
||||
}
|
||||
if (typeof val === 'object') {
|
||||
result.push(`${key}=${encodeURIComponent(JSON.stringify(val))}`);
|
||||
} else {
|
||||
result.push(`${key}=${encodeURIComponent(val)}`);
|
||||
}
|
||||
});
|
||||
return result.join('&');
|
||||
}
|
||||
@ -1,309 +0,0 @@
|
||||
/* eslint-disable no-console */
|
||||
/* eslint-disable max-len */
|
||||
/* eslint-disable object-curly-newline */
|
||||
import { isJSFunction } from '@alilc/lowcode-utils';
|
||||
import { transformArrayToMap, transformStringToFunction } from './common';
|
||||
import { jsonp, request, get, post } from './request';
|
||||
import logger from './logger';
|
||||
import { DataSource, DataSourceItem, IRendererAppHelper } from '../types';
|
||||
|
||||
const DS_STATUS = {
|
||||
INIT: 'init',
|
||||
LOADING: 'loading',
|
||||
LOADED: 'loaded',
|
||||
ERROR: 'error',
|
||||
};
|
||||
|
||||
type DataSourceType = 'fetch' | 'jsonp';
|
||||
|
||||
/**
|
||||
* do request for standard DataSourceType
|
||||
* @param {DataSourceType} type type of DataSourceItem
|
||||
* @param {any} options
|
||||
*/
|
||||
export function doRequest(type: DataSourceType, options: any) {
|
||||
// eslint-disable-next-line prefer-const
|
||||
let { uri, url, method = 'GET', headers, params, ...otherProps } = options;
|
||||
otherProps = otherProps || {};
|
||||
if (type === 'jsonp') {
|
||||
return jsonp(uri, params, otherProps);
|
||||
}
|
||||
|
||||
if (type === 'fetch') {
|
||||
switch (method.toUpperCase()) {
|
||||
case 'GET':
|
||||
return get(uri, params, headers, otherProps);
|
||||
case 'POST':
|
||||
return post(uri, params, headers, otherProps);
|
||||
default:
|
||||
return request(uri, method, params, headers, otherProps);
|
||||
}
|
||||
}
|
||||
|
||||
logger.log(`Engine default dataSource does not support type:[${type}] dataSource request!`, options);
|
||||
}
|
||||
|
||||
// TODO: according to protocol, we should implement errorHandler/shouldFetch/willFetch/requestHandler and isSync controll.
|
||||
export class DataHelper {
|
||||
/**
|
||||
* host object that will be "this" object when excuting dataHandler
|
||||
*
|
||||
* @type {*}
|
||||
* @memberof DataHelper
|
||||
*/
|
||||
host: any;
|
||||
|
||||
/**
|
||||
* data source config
|
||||
*
|
||||
* @type {DataSource}
|
||||
* @memberof DataHelper
|
||||
*/
|
||||
config: DataSource;
|
||||
|
||||
/**
|
||||
* a parser function which will be called to process config data
|
||||
* which eventually will call common/utils.processData() to process data
|
||||
* (originalConfig) => parsedConfig
|
||||
* @type {*}
|
||||
* @memberof DataHelper
|
||||
*/
|
||||
parser: any;
|
||||
|
||||
/**
|
||||
* config.list
|
||||
*
|
||||
* @type {any[]}
|
||||
* @memberof DataHelper
|
||||
*/
|
||||
ajaxList: any[];
|
||||
|
||||
ajaxMap: any;
|
||||
|
||||
dataSourceMap: any;
|
||||
|
||||
appHelper: IRendererAppHelper;
|
||||
|
||||
constructor(comp: any, config: DataSource, appHelper: IRendererAppHelper, parser: any) {
|
||||
this.host = comp;
|
||||
this.config = config || {};
|
||||
this.parser = parser;
|
||||
this.ajaxList = config?.list || [];
|
||||
this.ajaxMap = transformArrayToMap(this.ajaxList, 'id');
|
||||
this.dataSourceMap = this.generateDataSourceMap();
|
||||
this.appHelper = appHelper;
|
||||
}
|
||||
|
||||
// 更新config，只会更新配置，状态保存；
|
||||
updateConfig(config = {}) {
|
||||
this.config = config as DataSource;
|
||||
this.ajaxList = (config as DataSource)?.list || [];
|
||||
const ajaxMap: any = transformArrayToMap(this.ajaxList, 'id');
|
||||
// 删除已经移除的接口
|
||||
Object.keys(this.ajaxMap).forEach((key) => {
|
||||
if (!ajaxMap[key]) {
|
||||
delete this.dataSourceMap[key];
|
||||
}
|
||||
});
|
||||
this.ajaxMap = ajaxMap;
|
||||
// 添加未加入到dataSourceMap中的接口
|
||||
this.ajaxList.forEach((item) => {
|
||||
if (!this.dataSourceMap[item.id]) {
|
||||
this.dataSourceMap[item.id] = {
|
||||
status: DS_STATUS.INIT,
|
||||
load: (...args: any) => {
|
||||
// @ts-ignore
|
||||
return this.getDataSource(item.id, ...args);
|
||||
},
|
||||
};
|
||||
}
|
||||
});
|
||||
return this.dataSourceMap;
|
||||
}
|
||||
|
||||
generateDataSourceMap() {
|
||||
const res: any = {};
|
||||
this.ajaxList.forEach((item) => {
|
||||
res[item.id] = {
|
||||
status: DS_STATUS.INIT,
|
||||
load: (...args: any) => {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
return this.getDataSource(item.id, ...args);
|
||||
},
|
||||
};
|
||||
});
|
||||
return res;
|
||||
}
|
||||
|
||||
updateDataSourceMap(id: string, data: any, error: any) {
|
||||
this.dataSourceMap[id].error = error || undefined;
|
||||
this.dataSourceMap[id].data = data;
|
||||
this.dataSourceMap[id].status = error ? DS_STATUS.ERROR : DS_STATUS.LOADED;
|
||||
}
|
||||
|
||||
/**
|
||||
* get all dataSourceItems which marked as isInit === true
|
||||
* @private
|
||||
* @returns
|
||||
* @memberof DataHelper
|
||||
*/
|
||||
getInitDataSourseConfigs() {
|
||||
const initConfigs = this.parser(this.ajaxList).filter((item: DataSourceItem) => {
|
||||
// according to [spec](https://lowcode-engine.cn/lowcode), isInit should be boolean true to be working
|
||||
if (item.isInit === true) {
|
||||
this.dataSourceMap[item.id].status = DS_STATUS.LOADING;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
return initConfigs;
|
||||
}
|
||||
|
||||
/**
|
||||
* process all dataSourceItems which marked as isInit === true, and get dataSource request results.
|
||||
* @public
|
||||
* @returns
|
||||
* @memberof DataHelper
|
||||
*/
|
||||
getInitData() {
|
||||
const initSyncData = this.getInitDataSourseConfigs();
|
||||
// 所有 datasource 的 datahandler
|
||||
return this.asyncDataHandler(initSyncData).then((res) => {
|
||||
const { dataHandler } = this.config;
|
||||
return this.handleData(null, dataHandler, res, null);
|
||||
});
|
||||
}
|
||||
|
||||
getDataSource(id: string, params: any, otherOptions: any, callback: any) {
|
||||
const req = this.parser(this.ajaxMap[id]);
|
||||
const options = req.options || {};
|
||||
let callbackFn = callback;
|
||||
let otherOptionsObj = otherOptions;
|
||||
if (typeof otherOptions === 'function') {
|
||||
callbackFn = otherOptions;
|
||||
otherOptionsObj = {};
|
||||
}
|
||||
const { headers, ...otherProps } = otherOptionsObj || {};
|
||||
if (!req) {
|
||||
logger.warn(`getDataSource API named ${id} not exist`);
|
||||
return;
|
||||
}
|
||||
|
||||
return this.asyncDataHandler([
|
||||
{
|
||||
...req,
|
||||
options: {
|
||||
...options,
|
||||
// 支持参数为array的情况，当参数为array时，不做参数合并
|
||||
params:
|
||||
Array.isArray(options.params) || Array.isArray(params)
|
||||
? params || options.params
|
||||
: {
|
||||
...options.params,
|
||||
...params,
|
||||
},
|
||||
headers: {
|
||||
...options.headers,
|
||||
...headers,
|
||||
},
|
||||
...otherProps,
|
||||
},
|
||||
},
|
||||
])
|
||||
.then((res: any) => {
|
||||
try {
|
||||
callbackFn && callbackFn(res && res[id]);
|
||||
} catch (e) {
|
||||
logger.error('load请求回调函数报错', e);
|
||||
}
|
||||
return res && res[id];
|
||||
})
|
||||
.catch((err) => {
|
||||
try {
|
||||
callbackFn && callbackFn(null, err);
|
||||
} catch (e) {
|
||||
logger.error('load请求回调函数报错', e);
|
||||
}
|
||||
return err;
|
||||
});
|
||||
}
|
||||
|
||||
asyncDataHandler(asyncDataList: any[]) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const allReq: any[] = [];
|
||||
asyncDataList.forEach((req) => {
|
||||
const { id, type } = req;
|
||||
// TODO: need refactoring to remove 'legao' related logic
|
||||
if (!id || !type || type === 'legao') {
|
||||
return;
|
||||
}
|
||||
allReq.push(req);
|
||||
});
|
||||
|
||||
if (allReq.length === 0) {
|
||||
resolve({});
|
||||
}
|
||||
const res: any = {};
|
||||
Promise.all(
|
||||
allReq.map((item: any) => {
|
||||
return new Promise((innerResolve) => {
|
||||
const { type, id, dataHandler, options } = item;
|
||||
|
||||
const fetchHandler = (data: any, error: any) => {
|
||||
res[id] = this.handleData(id, dataHandler, data, error);
|
||||
this.updateDataSourceMap(id, res[id], error);
|
||||
innerResolve({});
|
||||
};
|
||||
|
||||
const doFetch = (innerType: string, innerOptions: any) => {
|
||||
doRequest(innerType as any, innerOptions)
|
||||
?.then((data: any) => {
|
||||
fetchHandler(data, undefined);
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
fetchHandler(undefined, err);
|
||||
});
|
||||
};
|
||||
|
||||
this.dataSourceMap[id].status = DS_STATUS.LOADING;
|
||||
doFetch(type, options);
|
||||
});
|
||||
}),
|
||||
).then(() => {
|
||||
resolve(res);
|
||||
}).catch((e) => {
|
||||
reject(e);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* process data using dataHandler
|
||||
*
|
||||
* @param {(string | null)} id request id, will be used in error message, can be null
|
||||
* @param {*} dataHandler
|
||||
* @param {*} data
|
||||
* @param {*} error
|
||||
* @returns
|
||||
* @memberof DataHelper
|
||||
*/
|
||||
handleData(id: string | null, dataHandler: any, data: any, error: any) {
|
||||
let dataHandlerFun = dataHandler;
|
||||
if (isJSFunction(dataHandler)) {
|
||||
dataHandlerFun = transformStringToFunction(dataHandler.value);
|
||||
}
|
||||
if (!dataHandlerFun || typeof dataHandlerFun !== 'function') {
|
||||
return data;
|
||||
}
|
||||
try {
|
||||
return dataHandlerFun.call(this.host, data, error);
|
||||
} catch (e) {
|
||||
if (id) {
|
||||
logger.error(`[${id}]单个请求数据处理函数运行出错`, e);
|
||||
} else {
|
||||
logger.error('请求数据处理函数运行出错', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
export * from './common';
|
||||
export * from './data-helper';
|
||||
export * from './request';
|
||||
@ -1,20 +0,0 @@
|
||||
import { IPublicTypeJSExpression } from '@alilc/lowcode-types';
|
||||
import { isJSExpression } from '@alilc/lowcode-utils';
|
||||
|
||||
// 1.渲染模式下，loop 是数组，则按照数组长度渲染组件
|
||||
// 2.设计模式下，loop 需要长度大于 0，按照循环模式渲染，防止无法设计的情况
|
||||
export default function isUseLoop(loop: null | any[] | IPublicTypeJSExpression, isDesignMode: boolean): boolean {
|
||||
if (isJSExpression(loop)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!isDesignMode) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (!Array.isArray(loop)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return loop.length > 0;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
import { Logger } from '@alilc/lowcode-utils';
|
||||
|
||||
export default new Logger({ level: 'warn', bizName: 'renderer' });
|
||||
@ -1,198 +0,0 @@
|
||||
import 'whatwg-fetch';
|
||||
import fetchJsonp from 'fetch-jsonp';
|
||||
import { serializeParams } from '.';
|
||||
|
||||
/**
|
||||
* this is a private method, export for testing purposes only.
|
||||
*
|
||||
* @export
|
||||
* @param {*} dataAPI
|
||||
* @param {*} params
|
||||
* @returns
|
||||
*/
|
||||
export function buildUrl(dataAPI: any, params: any) {
|
||||
const paramStr = serializeParams(params);
|
||||
if (paramStr) {
|
||||
return dataAPI.indexOf('?') > 0 ? `${dataAPI}&${paramStr}` : `${dataAPI}?${paramStr}`;
|
||||
}
|
||||
return dataAPI;
|
||||
}
|
||||
|
||||
/**
|
||||
* do Get request
|
||||
*
|
||||
* @export
|
||||
* @param {*} dataAPI
|
||||
* @param {*} [params={}]
|
||||
* @param {*} [headers={}]
|
||||
* @param {*} [otherProps={}]
|
||||
* @returns
|
||||
*/
|
||||
export function get(dataAPI: any, params = {}, headers = {}, otherProps = {}) {
|
||||
const processedHeaders = {
|
||||
Accept: 'application/json',
|
||||
...headers,
|
||||
};
|
||||
const url = buildUrl(dataAPI, params);
|
||||
return request(url, 'GET', null, processedHeaders, otherProps);
|
||||
}
|
||||
|
||||
/**
|
||||
* do Post request
|
||||
*
|
||||
* @export
|
||||
* @param {*} dataAPI
|
||||
* @param {*} [params={}]
|
||||
* @param {*} [headers={}]
|
||||
* @param {*} [otherProps={}]
|
||||
* @returns
|
||||
*/
|
||||
export function post(dataAPI: any, params = {}, headers: any = {}, otherProps = {}) {
|
||||
const processedHeaders = {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
...headers,
|
||||
};
|
||||
const body = processedHeaders['Content-Type'].indexOf('application/json') > -1 || Array.isArray(params)
|
||||
? JSON.stringify(params)
|
||||
: serializeParams(params);
|
||||
|
||||
return request(
|
||||
dataAPI,
|
||||
'POST',
|
||||
body,
|
||||
processedHeaders,
|
||||
otherProps,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* do request
|
||||
*
|
||||
* @export
|
||||
* @param {*} dataAPI
|
||||
* @param {string} [method='GET']
|
||||
* @param {*} data
|
||||
* @param {*} [headers={}]
|
||||
* @param {*} [otherProps={}]
|
||||
* @returns
|
||||
*/
|
||||
export function request(dataAPI: any, method = 'GET', data: any, headers = {}, otherProps: any = {}) {
|
||||
let processedHeaders = headers || {};
|
||||
let payload = data;
|
||||
if (method === 'PUT' || method === 'DELETE') {
|
||||
processedHeaders = {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
...processedHeaders,
|
||||
};
|
||||
payload = JSON.stringify(payload || {});
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
if (otherProps.timeout) {
|
||||
setTimeout(() => {
|
||||
reject(new Error('timeout'));
|
||||
}, otherProps.timeout);
|
||||
}
|
||||
fetch(dataAPI, {
|
||||
method,
|
||||
credentials: 'include',
|
||||
headers: processedHeaders,
|
||||
body: payload,
|
||||
...otherProps,
|
||||
})
|
||||
.then((response) => {
|
||||
switch (response.status) {
|
||||
case 200:
|
||||
case 201:
|
||||
case 202:
|
||||
return response.json();
|
||||
case 204:
|
||||
if (method === 'DELETE') {
|
||||
return {
|
||||
success: true,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
__success: false,
|
||||
code: response.status,
|
||||
};
|
||||
}
|
||||
case 400:
|
||||
case 401:
|
||||
case 403:
|
||||
case 404:
|
||||
case 406:
|
||||
case 410:
|
||||
case 422:
|
||||
case 500:
|
||||
return response
|
||||
.json()
|
||||
.then((res) => {
|
||||
return {
|
||||
__success: false,
|
||||
code: response.status,
|
||||
data: res,
|
||||
};
|
||||
})
|
||||
.catch(() => {
|
||||
return {
|
||||
__success: false,
|
||||
code: response.status,
|
||||
};
|
||||
});
|
||||
default:
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.then((json) => {
|
||||
if (!json) {
|
||||
reject(json);
|
||||
return;
|
||||
}
|
||||
if (json.__success !== false) {
|
||||
resolve(json);
|
||||
} else {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
delete json.__success;
|
||||
reject(json);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* do jsonp request
|
||||
*
|
||||
* @export
|
||||
* @param {*} dataAPI
|
||||
* @param {*} [params={}]
|
||||
* @param {*} [otherProps={}]
|
||||
* @returns
|
||||
*/
|
||||
export function jsonp(dataAPI: any, params = {}, otherProps = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const processedOtherProps = {
|
||||
timeout: 5000,
|
||||
...otherProps,
|
||||
};
|
||||
const url = buildUrl(dataAPI, params);
|
||||
fetchJsonp(url, processedOtherProps)
|
||||
.then((response) => {
|
||||
response.json();
|
||||
})
|
||||
.then((json) => {
|
||||
if (json) {
|
||||
resolve(json);
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -1,101 +0,0 @@
|
||||
// @ts-nocheck
|
||||
import adapter, { Env } from '../../src/adapter';
|
||||
|
||||
|
||||
|
||||
describe('test src/adapter ', () => {
|
||||
|
||||
it('adapter basic use works', () => {
|
||||
expect(adapter).toBeTruthy();
|
||||
|
||||
});
|
||||
|
||||
it('isValidRuntime works', () => {
|
||||
expect(adapter.isValidRuntime([] as any)).toBeFalsy();
|
||||
|
||||
expect(adapter.isValidRuntime('' as any)).toBeFalsy();
|
||||
|
||||
let invalidRuntime = {};
|
||||
expect(() => adapter.isValidRuntime(invalidRuntime as any)).toThrowError(/Component/);
|
||||
invalidRuntime = {
|
||||
Component: {},
|
||||
};
|
||||
expect(() => adapter.isValidRuntime(invalidRuntime as any)).toThrowError(/PureComponent/);
|
||||
invalidRuntime = {
|
||||
Component: {},
|
||||
PureComponent: {},
|
||||
};
|
||||
expect(() => adapter.isValidRuntime(invalidRuntime as any)).toThrowError(/createElement/);
|
||||
invalidRuntime = {
|
||||
Component: {},
|
||||
PureComponent: {},
|
||||
createElement: {},
|
||||
};
|
||||
expect(() => adapter.isValidRuntime(invalidRuntime as any)).toThrowError(/createContext/);
|
||||
invalidRuntime = {
|
||||
Component: {},
|
||||
PureComponent: {},
|
||||
createElement: {},
|
||||
createContext: {},
|
||||
};
|
||||
expect(() => adapter.isValidRuntime(invalidRuntime as any)).toThrowError(/forwardRef/);
|
||||
invalidRuntime = {
|
||||
Component: {},
|
||||
PureComponent: {},
|
||||
createElement: {},
|
||||
createContext: {},
|
||||
forwardRef: {},
|
||||
};
|
||||
expect(() => adapter.isValidRuntime(invalidRuntime as any)).toThrowError(/findDOMNode/);
|
||||
const validRuntime = {
|
||||
Component: {},
|
||||
PureComponent: {},
|
||||
createElement: {},
|
||||
createContext: {},
|
||||
forwardRef: {},
|
||||
findDOMNode: {},
|
||||
};
|
||||
|
||||
expect(adapter.isValidRuntime(validRuntime as any)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('setRuntime/getRuntime works', () => {
|
||||
const validRuntime = {
|
||||
Component: {},
|
||||
PureComponent: {},
|
||||
createElement: {},
|
||||
createContext: {},
|
||||
forwardRef: {},
|
||||
findDOMNode: {},
|
||||
};
|
||||
|
||||
adapter.setRuntime(validRuntime as any);
|
||||
expect(adapter.getRuntime()).toBe(validRuntime);
|
||||
|
||||
// won`t work when invalid runtime paased in.
|
||||
adapter.setRuntime([] as any);
|
||||
expect(adapter.getRuntime()).toBe(validRuntime);
|
||||
|
||||
|
||||
});
|
||||
|
||||
it('setEnv/.env/isReact works', () => {
|
||||
adapter.setEnv(Env.React);
|
||||
expect(adapter.env).toBe(Env.React);
|
||||
expect(adapter.isReact()).toBeTruthy();
|
||||
});
|
||||
|
||||
it('setRenderers/getRenderers works', () => {
|
||||
const mockRenderers = { BaseRenderer: {} as IBaseRenderComponent};
|
||||
adapter.setRenderers(mockRenderers);
|
||||
expect(adapter.getRenderers()).toBe(mockRenderers);
|
||||
adapter.setRenderers(undefined);
|
||||
expect(adapter.getRenderers()).toStrictEqual({});
|
||||
});
|
||||
|
||||
it('setConfigProvider/getConfigProvider works', () => {
|
||||
const mockConfigProvider = { a: 111 };
|
||||
adapter.setConfigProvider(mockConfigProvider);
|
||||
expect(adapter.getConfigProvider()).toBe(mockConfigProvider);
|
||||
});
|
||||
});
|
||||
@ -1,567 +0,0 @@
|
||||
export default {
|
||||
componentName: 'Page',
|
||||
id: 'node_dockcviv8fo1',
|
||||
props: {
|
||||
ref: 'outterView',
|
||||
autoLoading: true,
|
||||
style: {
|
||||
padding: '0 5px 0 5px',
|
||||
},
|
||||
},
|
||||
fileName: 'test',
|
||||
dataSource: {
|
||||
list: [],
|
||||
},
|
||||
state: {
|
||||
text: 'outter',
|
||||
isShowDialog: false,
|
||||
},
|
||||
css: 'body {font-size: 12px;} .botton{width:100px;color:#ff00ff}',
|
||||
lifeCycles: {
|
||||
componentDidMount: {
|
||||
type: 'JSFunction',
|
||||
value: "function() {\n console.log('did mount');\n }",
|
||||
},
|
||||
componentWillUnmount: {
|
||||
type: 'JSFunction',
|
||||
value: "function() {\n console.log('will umount');\n }",
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
testFunc: {
|
||||
type: 'JSFunction',
|
||||
value: "function() {\n console.log('test func');\n }",
|
||||
},
|
||||
onClick: {
|
||||
type: 'JSFunction',
|
||||
value: 'function() {\n this.setState({\n isShowDialog: true\n })\n }',
|
||||
},
|
||||
closeDialog: {
|
||||
type: 'JSFunction',
|
||||
value: 'function() {\n this.setState({\n isShowDialog: false\n })\n }',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Box',
|
||||
id: 'node_dockcy8n9xed',
|
||||
props: {
|
||||
style: {
|
||||
backgroundColor: 'rgba(31,56,88,0.1)',
|
||||
padding: '12px 12px 12px 12px',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Box',
|
||||
id: 'node_dockcy8n9xee',
|
||||
props: {
|
||||
style: {
|
||||
padding: '12px 12px 12px 12px',
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Breadcrumb',
|
||||
id: 'node_dockcy8n9xef',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
maxNode: 100,
|
||||
component: 'nav',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Breadcrumb.Item',
|
||||
id: 'node_dockcy8n9xeg',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
children: '首页',
|
||||
},
|
||||
},
|
||||
{
|
||||
componentName: 'Breadcrumb.Item',
|
||||
id: 'node_dockcy8n9xei',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
children: '品质中台',
|
||||
},
|
||||
},
|
||||
{
|
||||
componentName: 'Breadcrumb.Item',
|
||||
id: 'node_dockcy8n9xek',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
children: '商家品质页面管理',
|
||||
},
|
||||
},
|
||||
{
|
||||
componentName: 'Breadcrumb.Item',
|
||||
id: 'node_dockcy8n9xem',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
children: '质检知识条配置',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Box',
|
||||
id: 'node_dockcy8n9xeo',
|
||||
props: {
|
||||
style: {
|
||||
marginTop: '12px',
|
||||
backgroundColor: '#ffffff',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Form',
|
||||
id: 'node_dockcy8n9xep',
|
||||
props: {
|
||||
inline: true,
|
||||
style: {
|
||||
marginTop: '12px',
|
||||
marginRight: '12px',
|
||||
marginLeft: '12px',
|
||||
},
|
||||
__events: [],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockcy8n9xeq',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
},
|
||||
label: '类目名：',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
id: 'node_dockcy8n9xer',
|
||||
props: {
|
||||
mode: 'single',
|
||||
hasArrow: true,
|
||||
cacheValue: true,
|
||||
style: {
|
||||
width: '150px',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockcy8n9xes',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
},
|
||||
label: '项目类型：',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
id: 'node_dockcy8n9xet',
|
||||
props: {
|
||||
mode: 'single',
|
||||
hasArrow: true,
|
||||
cacheValue: true,
|
||||
style: {
|
||||
width: '200px',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockcy8n9xeu',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
},
|
||||
label: '项目 ID：',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Input',
|
||||
id: 'node_dockcy8n9xev',
|
||||
props: {
|
||||
hasBorder: true,
|
||||
size: 'medium',
|
||||
autoComplete: 'off',
|
||||
style: {
|
||||
width: '200px',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Button.Group',
|
||||
id: 'node_dockcy8n9xew',
|
||||
props: {},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Button',
|
||||
id: 'node_dockcy8n9xex',
|
||||
props: {
|
||||
type: 'primary',
|
||||
style: {
|
||||
margin: '0 5px 0 5px',
|
||||
},
|
||||
htmlType: 'submit',
|
||||
children: '搜索',
|
||||
},
|
||||
},
|
||||
{
|
||||
componentName: 'Button',
|
||||
id: 'node_dockcy8n9xe10',
|
||||
props: {
|
||||
type: 'normal',
|
||||
style: {
|
||||
margin: '0 5px 0 5px',
|
||||
},
|
||||
htmlType: 'reset',
|
||||
children: '清空',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Box',
|
||||
id: 'node_dockcy8n9xe1f',
|
||||
props: {
|
||||
style: {
|
||||
backgroundColor: '#ffffff',
|
||||
paddingBottom: '24px',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Button',
|
||||
id: 'node_dockd5nrh9p4',
|
||||
props: {
|
||||
type: 'primary',
|
||||
size: 'medium',
|
||||
htmlType: 'button',
|
||||
component: 'button',
|
||||
children: '新建配置',
|
||||
style: {},
|
||||
__events: [
|
||||
{
|
||||
type: 'componentEvent',
|
||||
name: 'onClick',
|
||||
relatedEventName: 'onClick',
|
||||
},
|
||||
],
|
||||
onClick: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(){ this.onClick() }',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Box',
|
||||
id: 'node_dockd5nrh9p5',
|
||||
props: {},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Table',
|
||||
id: 'node_dockjielosj1',
|
||||
props: {
|
||||
showMiniPager: true,
|
||||
showActionBar: true,
|
||||
actionBar: [
|
||||
{
|
||||
title: '新增',
|
||||
type: 'primary',
|
||||
},
|
||||
{
|
||||
title: '编辑',
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
dataKey: 'name',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
title: '姓名',
|
||||
editType: 'text',
|
||||
},
|
||||
{
|
||||
dataKey: 'age',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
title: '年龄',
|
||||
},
|
||||
{
|
||||
dataKey: 'email',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
title: '邮箱',
|
||||
},
|
||||
],
|
||||
data: [
|
||||
{
|
||||
name: '王小',
|
||||
id: '1',
|
||||
age: 15000,
|
||||
email: 'aaa@abc.com',
|
||||
},
|
||||
{
|
||||
name: '王中',
|
||||
id: '2',
|
||||
age: 25000,
|
||||
email: 'bbb@abc.com',
|
||||
},
|
||||
{
|
||||
name: '王大',
|
||||
id: '3',
|
||||
age: 35000,
|
||||
email: 'ccc@abc.com',
|
||||
},
|
||||
],
|
||||
actionTitle: '操作',
|
||||
actionWidth: 180,
|
||||
actionType: 'link',
|
||||
actionFixed: 'right',
|
||||
actionHidden: false,
|
||||
maxWebShownActionCount: 2,
|
||||
actionColumn: [
|
||||
{
|
||||
title: '编辑',
|
||||
callback: {
|
||||
type: 'JSFunction',
|
||||
value: '(rowData, action, table) => {\n return table.editRow(rowData).then((row) => {\n console.log(row);\n });\n }',
|
||||
},
|
||||
device: [
|
||||
'desktop',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '保存',
|
||||
callback: {
|
||||
type: 'JSFunction',
|
||||
value: '(rowData, action, table) => { \nreturn table.saveRow(rowData).then((row) => { \nconsole.log(row); \n}); \n}',
|
||||
},
|
||||
mode: 'EDIT',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
componentName: 'Box',
|
||||
id: 'node_dockd5nrh9pg',
|
||||
props: {
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Pagination',
|
||||
id: 'node_dockd5nrh9pf',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
type: 'normal',
|
||||
shape: 'normal',
|
||||
size: 'medium',
|
||||
defaultCurrent: 1,
|
||||
total: 100,
|
||||
pageShowCount: 5,
|
||||
pageSize: 10,
|
||||
pageSizePosition: 'start',
|
||||
showJump: true,
|
||||
style: {},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Dialog',
|
||||
id: 'node_dockcy8n9xe1h',
|
||||
props: {
|
||||
prefix: 'next-',
|
||||
footerAlign: 'right',
|
||||
footerActions: [
|
||||
'ok',
|
||||
'cancel',
|
||||
],
|
||||
closeable: 'esc,close',
|
||||
hasMask: true,
|
||||
align: 'cc cc',
|
||||
minMargin: 40,
|
||||
visible: {
|
||||
type: 'JSExpression',
|
||||
value: 'this.state.isShowDialog',
|
||||
},
|
||||
title: '标题',
|
||||
events: [],
|
||||
__events: [
|
||||
{
|
||||
type: 'componentEvent',
|
||||
name: 'onCancel',
|
||||
relatedEventName: 'closeDialog',
|
||||
},
|
||||
{
|
||||
type: 'componentEvent',
|
||||
name: 'onClose',
|
||||
relatedEventName: 'closeDialog',
|
||||
},
|
||||
{
|
||||
type: 'componentEvent',
|
||||
name: 'onOk',
|
||||
relatedEventName: 'testFunc',
|
||||
},
|
||||
],
|
||||
onCancel: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(){ this.closeDialog() }',
|
||||
},
|
||||
onClose: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(){ this.closeDialog() }',
|
||||
},
|
||||
onOk: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(){ this.testFunc() }',
|
||||
},
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Form',
|
||||
id: 'node_dockd5nrh9pi',
|
||||
props: {
|
||||
inline: false,
|
||||
labelAlign: 'top',
|
||||
labelTextAlign: 'right',
|
||||
size: 'medium',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockd5nrh9pj',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
minWidth: '200px',
|
||||
minHeight: '28px',
|
||||
},
|
||||
label: '商品类目',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
id: 'node_dockd5nrh9pk',
|
||||
props: {
|
||||
mode: 'single',
|
||||
hasArrow: true,
|
||||
cacheValue: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockd5nrh9pl',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
minWidth: '200px',
|
||||
minHeight: '28px',
|
||||
},
|
||||
label: '商品类目',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
id: 'node_dockd5nrh9pm',
|
||||
props: {
|
||||
mode: 'single',
|
||||
hasArrow: true,
|
||||
cacheValue: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockd5nrh9pn',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
minWidth: '200px',
|
||||
minHeight: '28px',
|
||||
},
|
||||
label: '商品类目',
|
||||
asterisk: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Select',
|
||||
id: 'node_dockd5nrh9po',
|
||||
props: {
|
||||
mode: 'single',
|
||||
hasArrow: true,
|
||||
cacheValue: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'Form.Item',
|
||||
id: 'node_dockd5nrh9pp',
|
||||
props: {
|
||||
style: {
|
||||
marginBottom: '0',
|
||||
minWidth: '200px',
|
||||
minHeight: '28px',
|
||||
},
|
||||
label: '商品类目',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: 'Input',
|
||||
id: 'node_dockd5nrh9pr',
|
||||
props: {
|
||||
hasBorder: true,
|
||||
size: 'medium',
|
||||
autoComplete: 'off',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
componentName: 'ErrorComponent',
|
||||
id: 'node_dockd5nrh9pr',
|
||||
props: {
|
||||
name: 'error',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -1,7 +0,0 @@
|
||||
if (!process.env.LISTENING_TO_UNHANDLED_REJECTION) {
|
||||
process.on('unhandledRejection', reason => {
|
||||
throw reason;
|
||||
});
|
||||
// Avoid memory leak by adding too many listeners
|
||||
process.env.LISTENING_TO_UNHANDLED_REJECTION = 'true';
|
||||
}
|
||||
@ -1,148 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`children this.props.children is array 1`] = `
|
||||
<div>
|
||||
<div
|
||||
content="content"
|
||||
>
|
||||
content
|
||||
</div>
|
||||
<div
|
||||
content="content"
|
||||
>
|
||||
content
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`lifecycle leaf change and make componentWillReceiveProps 1`] = `
|
||||
<div>
|
||||
<div
|
||||
__id="text6"
|
||||
__tag="222"
|
||||
componentId="text6"
|
||||
content="content new leaf"
|
||||
>
|
||||
content new leaf
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`lifecycle props change and make componentWillReceiveProps 1`] = `
|
||||
<div>
|
||||
<div
|
||||
content="content"
|
||||
>
|
||||
content
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`lifecycle props change and make componentWillReceiveProps 2`] = `
|
||||
<div>
|
||||
<div
|
||||
content="content 123"
|
||||
>
|
||||
content 123
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`lifecycle props change and make componentWillReceiveProps 3`] = `
|
||||
<div>
|
||||
<div
|
||||
__tag="111"
|
||||
content="content 123"
|
||||
>
|
||||
content 123
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`mini unit render leaf has a loop, render from parent 1`] = `
|
||||
<div>
|
||||
this is a new children
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`mini unit render make text props change 1`] = `
|
||||
<div>
|
||||
<div
|
||||
content="content"
|
||||
>
|
||||
content
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`mini unit render make text props change 2`] = `
|
||||
<div
|
||||
newPropKey="newPropValue"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`mini unit render parent is a mock leaf 1`] = `
|
||||
<div>
|
||||
<div
|
||||
content="new content to mock"
|
||||
>
|
||||
new content to mock
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`mini unit render props has new children 1`] = `
|
||||
<div>
|
||||
children 01
|
||||
children 02
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`onChildrenChange children is array string 1`] = `
|
||||
<div>
|
||||
onChildrenChange content 01
|
||||
onChildrenChange content 02
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`onPropChange change textNode [key:___condition___] props, but not hidden component 1`] = `
|
||||
<div>
|
||||
<div
|
||||
content="content"
|
||||
>
|
||||
content
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`onPropChange change textNode [key:___condition___] props, hide textNode component 1`] = `<div />`;
|
||||
|
||||
exports[`onPropChange change textNode [key:content], content in this.props but not in leaf.export result 1`] = `
|
||||
<div>
|
||||
<div
|
||||
content="content"
|
||||
>
|
||||
content
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`onPropChange change textNode [key:content], content in this.props but not in leaf.export result 2`] = `
|
||||
<div>
|
||||
<div
|
||||
content={null}
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`onVisibleChange visible is false 1`] = `<div />`;
|
||||
|
||||
exports[`onVisibleChange visible is true 1`] = `
|
||||
<div>
|
||||
<div
|
||||
content="content"
|
||||
>
|
||||
content
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,604 +0,0 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
import React from 'react';
|
||||
import { createElement } from 'react';
|
||||
import '../utils/react-env-init';
|
||||
import { leafWrapper } from '../../src/hoc/leaf';
|
||||
import components from '../utils/components';
|
||||
import Node from '../utils/node';
|
||||
import { parseData } from '../../src/utils';
|
||||
|
||||
let rerenderCount = 0;
|
||||
|
||||
const nodeMap = new Map();
|
||||
|
||||
const makeSnapshot = (component) => {
|
||||
let tree = component.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
}
|
||||
|
||||
const baseRenderer: any = {
|
||||
__debug () {},
|
||||
__getComponentProps (schema: any) {
|
||||
return schema.props;
|
||||
},
|
||||
__getSchemaChildrenVirtualDom (schema: any) {
|
||||
return schema.children;
|
||||
},
|
||||
context: {
|
||||
engine: {
|
||||
createElement,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
__host: {},
|
||||
getNode: (id) => nodeMap.get(id),
|
||||
__container: {
|
||||
rerender: () => {
|
||||
rerenderCount = 1 + rerenderCount;
|
||||
},
|
||||
autoRepaintNode: true,
|
||||
},
|
||||
documentId: '01'
|
||||
},
|
||||
__parseData (data, scope) {
|
||||
return parseData(data, scope, {});
|
||||
}
|
||||
}
|
||||
|
||||
let Div, DivNode, Text, TextNode, component, textSchema, divSchema;
|
||||
let id = 0;
|
||||
|
||||
beforeEach(() => {
|
||||
textSchema = {
|
||||
id: 'text' + id,
|
||||
props: {
|
||||
content: 'content'
|
||||
},
|
||||
};
|
||||
|
||||
divSchema = {
|
||||
id: 'div' + id,
|
||||
};
|
||||
|
||||
id++;
|
||||
|
||||
Div = leafWrapper(components.Div as any, {
|
||||
schema: divSchema,
|
||||
baseRenderer,
|
||||
componentInfo: {},
|
||||
scope: {},
|
||||
});
|
||||
|
||||
DivNode = new Node(divSchema);
|
||||
TextNode = new Node(textSchema);
|
||||
|
||||
nodeMap.set(divSchema.id, DivNode);
|
||||
nodeMap.set(textSchema.id, TextNode);
|
||||
|
||||
Text = leafWrapper(components.Text as any, {
|
||||
schema: textSchema,
|
||||
baseRenderer,
|
||||
componentInfo: {},
|
||||
scope: {},
|
||||
});
|
||||
|
||||
component = renderer.create(
|
||||
<Div _leaf={DivNode}>
|
||||
<Text _leaf={TextNode} content="content"></Text>
|
||||
</Div>
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
component.unmount(component);
|
||||
});
|
||||
|
||||
describe('onPropChange', () => {
|
||||
it('change textNode [key:content] props', () => {
|
||||
TextNode.emitPropChange({
|
||||
key: 'content',
|
||||
newValue: 'new content',
|
||||
} as any);
|
||||
|
||||
const root = component.root;
|
||||
expect(root.findByType(components.Text).props.content).toEqual('new content')
|
||||
});
|
||||
|
||||
it('change textNode [key:___condition___] props, hide textNode component', () => {
|
||||
// mock leaf?.export result
|
||||
TextNode.schema.condition = false;
|
||||
TextNode.emitPropChange({
|
||||
key: '___condition___',
|
||||
newValue: false,
|
||||
} as any);
|
||||
|
||||
makeSnapshot(component);
|
||||
});
|
||||
|
||||
it('change textNode [key:___condition___] props, but not hidden component', () => {
|
||||
TextNode.schema.condition = true;
|
||||
TextNode.emitPropChange({
|
||||
key: '___condition___',
|
||||
newValue: false,
|
||||
} as any);
|
||||
|
||||
makeSnapshot(component);
|
||||
});
|
||||
|
||||
it('change textNode [key:content], content in this.props but not in leaf.export result', () => {
|
||||
makeSnapshot(component);
|
||||
|
||||
delete TextNode.schema.props.content;
|
||||
TextNode.emitPropChange({
|
||||
key: 'content',
|
||||
newValue: null,
|
||||
} as any, true);
|
||||
|
||||
makeSnapshot(component);
|
||||
|
||||
const root = component.root;
|
||||
|
||||
const TextInst = root.findByType(components.Text);
|
||||
|
||||
expect(TextInst.props.content).toBeNull();
|
||||
});
|
||||
|
||||
it('change textNode [key:___loop___], make rerender', () => {
|
||||
expect(leafWrapper(components.Text as any, {
|
||||
schema: textSchema,
|
||||
baseRenderer,
|
||||
componentInfo: {},
|
||||
scope: {},
|
||||
})).toEqual(Text);
|
||||
|
||||
const nextRerenderCount = rerenderCount + 1;
|
||||
|
||||
TextNode.emitPropChange({
|
||||
key: '___loop___',
|
||||
newValue: 'new content',
|
||||
} as any);
|
||||
|
||||
expect(rerenderCount).toBe(nextRerenderCount);
|
||||
expect(leafWrapper(components.Text as any, {
|
||||
schema: textSchema,
|
||||
baseRenderer,
|
||||
componentInfo: {},
|
||||
scope: {},
|
||||
})).not.toEqual(Text);
|
||||
});
|
||||
});
|
||||
|
||||
describe('lifecycle', () => {
|
||||
it('props change and make componentWillReceiveProps', () => {
|
||||
makeSnapshot(component);
|
||||
|
||||
// 没有 __tag 标识
|
||||
component.update((
|
||||
<Div _leaf={DivNode}>
|
||||
<Text _leaf={TextNode} content="content 123"></Text>
|
||||
</Div>
|
||||
));
|
||||
|
||||
makeSnapshot(component);
|
||||
|
||||
// 有 __tag 标识
|
||||
component.update((
|
||||
<Div _leaf={DivNode}>
|
||||
<Text _leaf={TextNode} __tag="111" content="content 123"></Text>
|
||||
</Div>
|
||||
));
|
||||
|
||||
makeSnapshot(component);
|
||||
});
|
||||
|
||||
it('leaf change and make componentWillReceiveProps', () => {
|
||||
const newTextNodeLeaf = new Node(textSchema);
|
||||
nodeMap.set(textSchema.id, newTextNodeLeaf);
|
||||
component.update((
|
||||
<Div _leaf={DivNode}>
|
||||
<Text componentId={textSchema.id} __tag="222" content="content 123"></Text>
|
||||
</Div>
|
||||
));
|
||||
|
||||
newTextNodeLeaf.emitPropChange({
|
||||
key: 'content',
|
||||
newValue: 'content new leaf',
|
||||
});
|
||||
|
||||
makeSnapshot(component);
|
||||
});
|
||||
});
|
||||
|
||||
describe('mini unit render', () => {
|
||||
let miniRenderSchema, MiniRenderDiv, MiniRenderDivNode;
|
||||
beforeEach(() => {
|
||||
miniRenderSchema = {
|
||||
id: 'miniDiv' + id,
|
||||
};
|
||||
|
||||
MiniRenderDiv = leafWrapper(components.MiniRenderDiv as any, {
|
||||
schema: miniRenderSchema,
|
||||
baseRenderer,
|
||||
componentInfo: {},
|
||||
scope: {},
|
||||
});
|
||||
|
||||
MiniRenderDivNode = new Node(miniRenderSchema, {
|
||||
componentMeta: {
|
||||
isMinimalRenderUnit: true,
|
||||
},
|
||||
});
|
||||
|
||||
TextNode = new Node(textSchema, {
|
||||
parent: MiniRenderDivNode,
|
||||
});
|
||||
|
||||
nodeMap.set(miniRenderSchema.id, MiniRenderDivNode);
|
||||
nodeMap.set(textSchema.id, TextNode);
|
||||
|
||||
component = renderer.create(
|
||||
<MiniRenderDiv _leaf={MiniRenderDivNode}>
|
||||
<Text _leaf={TextNode} content="content"></Text>
|
||||
</MiniRenderDiv>
|
||||
);
|
||||
})
|
||||
|
||||
it('make text props change', () => {
|
||||
if (!MiniRenderDivNode.schema.props) {
|
||||
MiniRenderDivNode.schema.props = {};
|
||||
}
|
||||
MiniRenderDivNode.schema.props['newPropKey'] = 'newPropValue';
|
||||
|
||||
makeSnapshot(component);
|
||||
|
||||
const inst = component.root;
|
||||
|
||||
const TextInst = inst.findByType(Text).children[0];
|
||||
|
||||
TextNode.emitPropChange({
|
||||
key: 'content',
|
||||
newValue: 'new content',
|
||||
} as any);
|
||||
|
||||
expect((TextInst as any)?._fiber.stateNode.renderUnitInfo).toEqual({
|
||||
singleRender: false,
|
||||
minimalUnitId: 'miniDiv' + id,
|
||||
minimalUnitName: undefined,
|
||||
});
|
||||
|
||||
makeSnapshot(component);
|
||||
});
|
||||
|
||||
it('dont render mini render component', () => {
|
||||
const TextNode = new Node(textSchema, {
|
||||
parent: new Node({
|
||||
id: 'random',
|
||||
}, {
|
||||
componentMeta: {
|
||||
isMinimalRenderUnit: true,
|
||||
},
|
||||
}),
|
||||
});
|
||||
|
||||
nodeMap.set(textSchema.id, TextNode);
|
||||
|
||||
renderer.create(
|
||||
<div>
|
||||
<Text _leaf={TextNode} content="content"></Text>
|
||||
</div>
|
||||
);
|
||||
|
||||
const nextCount = rerenderCount + 1;
|
||||
|
||||
TextNode.emitPropChange({
|
||||
key: 'content',
|
||||
newValue: 'new content',
|
||||
} as any);
|
||||
|
||||
expect(rerenderCount).toBe(nextCount);
|
||||
});
|
||||
|
||||
it('leaf is a mock function', () => {
|
||||
const TextNode = new Node(textSchema, {
|
||||
parent: {
|
||||
isEmpty: () => false,
|
||||
}
|
||||
});
|
||||
|
||||
renderer.create(
|
||||
<div>
|
||||
<Text _leaf={TextNode} content="content"></Text>
|
||||
</div>
|
||||
);
|
||||
|
||||
TextNode.emitPropChange({
|
||||
key: 'content',
|
||||
newValue: 'new content',
|
||||
} as any);
|
||||
});
|
||||
|
||||
it('change component leaf isRoot is true', () => {
|
||||
const TextNode = new Node(textSchema, {
|
||||
isRoot: true,
|
||||
isRootNode: true,
|
||||
});
|
||||
|
||||
nodeMap.set(textSchema.id, TextNode);
|
||||
|
||||
const component = renderer.create(
|
||||
<Text _leaf={TextNode} content="content"></Text>
|
||||
);
|
||||
|
||||
const inst = component.root;
|
||||
|
||||
TextNode.emitPropChange({
|
||||
key: 'content',
|
||||
newValue: 'new content',
|
||||
} as any);
|
||||
|
||||
expect((inst.children[0] as any)?._fiber.stateNode.renderUnitInfo).toEqual({
|
||||
singleRender: true,
|
||||
});
|
||||
});
|
||||
|
||||
it('change component leaf parent isRoot is true', () => {
|
||||
const TextNode = new Node(textSchema, {
|
||||
parent: new Node({
|
||||
id: 'first-parent',
|
||||
}, {
|
||||
componentMeta: {
|
||||
isMinimalRenderUnit: true,
|
||||
},
|
||||
parent: new Node({
|
||||
id: 'rootId',
|
||||
}, {
|
||||
isRoot: true,
|
||||
isRootNode: true
|
||||
}),
|
||||
})
|
||||
});
|
||||
|
||||
nodeMap.set(textSchema.id, TextNode);
|
||||
|
||||
const component = renderer.create(
|
||||
<Text _leaf={TextNode} content="content"></Text>
|
||||
);
|
||||
|
||||
const inst = component.root;
|
||||
|
||||
TextNode.emitPropChange({
|
||||
key: 'content',
|
||||
newValue: 'new content',
|
||||
} as any);
|
||||
|
||||
expect((inst.children[0] as any)?._fiber.stateNode.renderUnitInfo).toEqual({
|
||||
singleRender: false,
|
||||
minimalUnitId: 'first-parent',
|
||||
minimalUnitName: undefined,
|
||||
});
|
||||
});
|
||||
|
||||
it('parent is a mock leaf', () => {
|
||||
const MiniRenderDivNode = {
|
||||
isMock: true,
|
||||
};
|
||||
|
||||
const component = renderer.create(
|
||||
<MiniRenderDiv _leaf={MiniRenderDivNode}>
|
||||
<Text _leaf={TextNode} content="content"></Text>
|
||||
</MiniRenderDiv>
|
||||
);
|
||||
|
||||
TextNode.emitPropChange({
|
||||
key: 'content',
|
||||
newValue: 'new content to mock',
|
||||
} as any);
|
||||
|
||||
makeSnapshot(component);
|
||||
});
|
||||
|
||||
it('props has new children', () => {
|
||||
MiniRenderDivNode.schema.props.children = [
|
||||
'children 01',
|
||||
'children 02',
|
||||
];
|
||||
|
||||
TextNode.emitPropChange({
|
||||
key: 'content',
|
||||
newValue: 'props'
|
||||
});
|
||||
|
||||
makeSnapshot(component);
|
||||
});
|
||||
|
||||
it('leaf has a loop, render from parent', () => {
|
||||
MiniRenderDivNode = new Node(miniRenderSchema, {});
|
||||
|
||||
TextNode = new Node(textSchema, {
|
||||
parent: MiniRenderDivNode,
|
||||
hasLoop: true,
|
||||
});
|
||||
|
||||
nodeMap.set(textSchema.id, TextNode);
|
||||
nodeMap.set(miniRenderSchema.id, MiniRenderDivNode);
|
||||
|
||||
component = renderer.create(
|
||||
<MiniRenderDiv _leaf={MiniRenderDivNode}>
|
||||
<Text _leaf={TextNode} content="content"></Text>
|
||||
</MiniRenderDiv>
|
||||
);
|
||||
|
||||
MiniRenderDivNode.schema.children = ['this is a new children'];
|
||||
|
||||
TextNode.emitPropChange({
|
||||
key: 'content',
|
||||
newValue: '1',
|
||||
});
|
||||
|
||||
makeSnapshot(component);
|
||||
});
|
||||
});
|
||||
|
||||
describe('component cache', () => {
|
||||
it('get different component with same is and different doc id', () => {
|
||||
const baseRenderer02 = {
|
||||
...baseRenderer,
|
||||
props: {
|
||||
...baseRenderer.props,
|
||||
documentId: '02',
|
||||
}
|
||||
}
|
||||
const Div3 = leafWrapper(components.Div as any, {
|
||||
schema: divSchema,
|
||||
baseRenderer: baseRenderer02,
|
||||
componentInfo: {},
|
||||
scope: {},
|
||||
});
|
||||
|
||||
expect(Div).not.toEqual(Div3);
|
||||
});
|
||||
|
||||
it('get component again and get ths cache component', () => {
|
||||
const Div2 = leafWrapper(components.Div as any, {
|
||||
schema: divSchema,
|
||||
baseRenderer,
|
||||
componentInfo: {},
|
||||
scope: {},
|
||||
});
|
||||
|
||||
expect(Div).toEqual(Div2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('onVisibleChange', () => {
|
||||
it('visible is false', () => {
|
||||
TextNode.emitVisibleChange(false);
|
||||
makeSnapshot(component);
|
||||
});
|
||||
|
||||
it('visible is true', () => {
|
||||
TextNode.emitVisibleChange(true);
|
||||
makeSnapshot(component);
|
||||
});
|
||||
});
|
||||
|
||||
describe('children', () => {
|
||||
it('this.props.children is array', () => {
|
||||
const component = renderer.create(
|
||||
<Div _leaf={DivNode}>
|
||||
<Text _leaf={TextNode} content="content"></Text>
|
||||
<Text _leaf={TextNode} content="content"></Text>
|
||||
</Div>
|
||||
);
|
||||
|
||||
makeSnapshot(component);
|
||||
});
|
||||
});
|
||||
|
||||
describe('onChildrenChange', () => {
|
||||
it('children is array string', () => {
|
||||
DivNode.schema.children = [
|
||||
'onChildrenChange content 01',
|
||||
'onChildrenChange content 02'
|
||||
]
|
||||
DivNode.emitChildrenChange();
|
||||
makeSnapshot(component);
|
||||
});
|
||||
|
||||
it('children is 0', () => {
|
||||
DivNode.schema.children = 0
|
||||
DivNode.emitChildrenChange();
|
||||
const componentInstance = component.root;
|
||||
expect(componentInstance.findByType(components.Div).props.children).toEqual(0);
|
||||
});
|
||||
|
||||
it('children is false', () => {
|
||||
DivNode.schema.children = false
|
||||
DivNode.emitChildrenChange();
|
||||
const componentInstance = component.root;
|
||||
expect(componentInstance.findByType(components.Div).props.children).toEqual(false);
|
||||
});
|
||||
|
||||
it('children is []', () => {
|
||||
DivNode.schema.children = []
|
||||
DivNode.emitChildrenChange();
|
||||
const componentInstance = component.root;
|
||||
expect(componentInstance.findByType(components.Div).props.children).toEqual([]);
|
||||
});
|
||||
|
||||
it('children is null', () => {
|
||||
DivNode.schema.children = null
|
||||
DivNode.emitChildrenChange();
|
||||
const componentInstance = component.root;
|
||||
expect(componentInstance.findByType(components.Div).props.children).toEqual(null);
|
||||
});
|
||||
|
||||
it('children is undefined', () => {
|
||||
DivNode.schema.children = undefined;
|
||||
DivNode.emitChildrenChange();
|
||||
const componentInstance = component.root;
|
||||
expect(componentInstance.findByType(components.Div).props.children).toEqual(undefined);
|
||||
});
|
||||
});
|
||||
|
||||
describe('not render leaf', () => {
|
||||
let miniRenderSchema, MiniRenderDiv, MiniRenderDivNode;
|
||||
beforeEach(() => {
|
||||
miniRenderSchema = {
|
||||
id: 'miniDiv' + id,
|
||||
};
|
||||
|
||||
MiniRenderDivNode = new Node(miniRenderSchema, {
|
||||
componentMeta: {
|
||||
isMinimalRenderUnit: true,
|
||||
},
|
||||
});
|
||||
|
||||
nodeMap.set(miniRenderSchema.id, MiniRenderDivNode);
|
||||
|
||||
MiniRenderDiv = leafWrapper(components.MiniRenderDiv as any, {
|
||||
schema: miniRenderSchema,
|
||||
baseRenderer,
|
||||
componentInfo: {},
|
||||
scope: {},
|
||||
});
|
||||
|
||||
TextNode = new Node(textSchema, {
|
||||
parent: MiniRenderDivNode,
|
||||
});
|
||||
|
||||
component = renderer.create(
|
||||
<Text _leaf={TextNode} content="content"></Text>
|
||||
);
|
||||
});
|
||||
|
||||
it('onPropsChange', () => {
|
||||
const nextCount = rerenderCount + 1;
|
||||
|
||||
MiniRenderDivNode.emitPropChange({
|
||||
key: 'any',
|
||||
newValue: 'any',
|
||||
});
|
||||
|
||||
expect(rerenderCount).toBe(nextCount);
|
||||
});
|
||||
|
||||
it('onChildrenChange', () => {
|
||||
const nextCount = rerenderCount + 1;
|
||||
|
||||
MiniRenderDivNode.emitChildrenChange({
|
||||
key: 'any',
|
||||
newValue: 'any',
|
||||
});
|
||||
|
||||
expect(rerenderCount).toBe(nextCount);
|
||||
});
|
||||
|
||||
it('onVisibleChange', () => {
|
||||
const nextCount = rerenderCount + 1;
|
||||
|
||||
MiniRenderDivNode.emitVisibleChange(true);
|
||||
|
||||
expect(rerenderCount).toBe(nextCount);
|
||||
});
|
||||
});
|
||||
@ -1,221 +0,0 @@
|
||||
const schema = {
|
||||
"componentName": "Page",
|
||||
"id": "node_ocl1djd9o41",
|
||||
"docId": "docl1djd9o4",
|
||||
"props": {
|
||||
"templateVersion": "1.0.0",
|
||||
"containerStyle": {},
|
||||
"pageStyle": {
|
||||
"backgroundColor": "#f2f3f5"
|
||||
},
|
||||
"className": "_css_pseudo_node_ocl1djd9o41"
|
||||
},
|
||||
"dataSource": {
|
||||
"offline": [],
|
||||
"globalConfig": {},
|
||||
"online": [
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH3NM0RF4XK61",
|
||||
"formUuid": "FORM-3KYJN7RV-J47BPFK63W2PHAGPO1VC3-B4H1WE5K-131",
|
||||
"name": "locale",
|
||||
"description": "当前语种（在 window.g_config 中设置）",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH3NM0RF4XK61",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
},
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH3SM0RF4XK71",
|
||||
"formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
|
||||
"name": "appType",
|
||||
"description": "应用的唯一 code",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH3SM0RF4XK71",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
},
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH3XM0RF4XK81",
|
||||
"formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
|
||||
"name": "version",
|
||||
"description": "应该版本，默认 0.1.0",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH3XM0RF4XK81",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
},
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH33N0RF4XK91",
|
||||
"formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
|
||||
"name": "apiPrefix",
|
||||
"description": "",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH33N0RF4XK91",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
}
|
||||
],
|
||||
"sync": true,
|
||||
"list": [
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH3NM0RF4XK61",
|
||||
"formUuid": "FORM-3KYJN7RV-J47BPFK63W2PHAGPO1VC3-B4H1WE5K-131",
|
||||
"name": "locale",
|
||||
"description": "当前语种（在 window.g_config 中设置）",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH3NM0RF4XK61",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
},
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH3SM0RF4XK71",
|
||||
"formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
|
||||
"name": "appType",
|
||||
"description": "应用的唯一 code",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH3SM0RF4XK71",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
},
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH3XM0RF4XK81",
|
||||
"formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
|
||||
"name": "version",
|
||||
"description": "应该版本，默认 0.1.0",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH3XM0RF4XK81",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
},
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH33N0RF4XK91",
|
||||
"formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
|
||||
"name": "apiPrefix",
|
||||
"description": "",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH33N0RF4XK91",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
}
|
||||
]
|
||||
},
|
||||
"methods": {},
|
||||
"hidden": false,
|
||||
"title": "",
|
||||
"isLocked": false,
|
||||
"condition": true,
|
||||
"conditionGroup": "",
|
||||
"children": [
|
||||
{
|
||||
"componentName": "RootHeader",
|
||||
"id": "node_ocl1djd9o42",
|
||||
"docId": "docl1djd9o4",
|
||||
"props": {},
|
||||
"hidden": false,
|
||||
"title": "",
|
||||
"isLocked": false,
|
||||
"condition": true,
|
||||
"conditionGroup": ""
|
||||
},
|
||||
{
|
||||
"componentName": "RootContent",
|
||||
"id": "node_ocl1djd9o43",
|
||||
"docId": "docl1djd9o4",
|
||||
"props": {
|
||||
"contentMargin": "20",
|
||||
"contentPadding": "20",
|
||||
"contentBgColor": "white"
|
||||
},
|
||||
"hidden": false,
|
||||
"title": "",
|
||||
"isLocked": false,
|
||||
"condition": true,
|
||||
"conditionGroup": "",
|
||||
"children": [
|
||||
{
|
||||
"componentName": "Div",
|
||||
"id": "node_ocl1djd9o45",
|
||||
"docId": "docl1djd9o4",
|
||||
"props": {
|
||||
"behavior": "NORMAL",
|
||||
"__style__": {},
|
||||
"fieldId": "div_l1djdj1n",
|
||||
"events": {
|
||||
"ignored": true
|
||||
},
|
||||
"useFieldIdAsDomId": false,
|
||||
"customClassName": "",
|
||||
"className": "_css_pseudo_node_ocl1djd9o45"
|
||||
},
|
||||
"hidden": false,
|
||||
"title": "",
|
||||
"isLocked": false,
|
||||
"condition": true,
|
||||
"conditionGroup": "",
|
||||
"loop": [
|
||||
1,
|
||||
2,
|
||||
3
|
||||
],
|
||||
"loopArgs": [
|
||||
null,
|
||||
null
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"componentName": "Div",
|
||||
"id": "node_ocl1djd9o46",
|
||||
"docId": "docl1djd9o4",
|
||||
"props": {
|
||||
"behavior": "NORMAL",
|
||||
"__style__": {},
|
||||
"fieldId": "div_l1djdj1o",
|
||||
"events": {
|
||||
"ignored": true
|
||||
},
|
||||
"useFieldIdAsDomId": false,
|
||||
"customClassName": "",
|
||||
"className": "_css_pseudo_node_ocl1djd9o46"
|
||||
},
|
||||
"hidden": false,
|
||||
"title": "",
|
||||
"isLocked": false,
|
||||
"condition": true,
|
||||
"conditionGroup": "",
|
||||
"loop": [
|
||||
1,
|
||||
2,
|
||||
3
|
||||
],
|
||||
"loopArgs": [
|
||||
null,
|
||||
null
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "RootFooter",
|
||||
"id": "node_ocl1djd9o44",
|
||||
"docId": "docl1djd9o4",
|
||||
"props": {},
|
||||
"hidden": false,
|
||||
"title": "",
|
||||
"isLocked": false,
|
||||
"condition": true,
|
||||
"conditionGroup": ""
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default schema;
|
||||
@ -1,184 +0,0 @@
|
||||
export const sampleSchema = {
|
||||
"componentName": "Page",
|
||||
"id": "node_ockyigdqxl1",
|
||||
"docId": "dockyigdqxl",
|
||||
"props": {
|
||||
"templateVersion": "1.0.0",
|
||||
"containerStyle": {},
|
||||
"pageStyle": {
|
||||
"backgroundColor": "#f2f3f5"
|
||||
},
|
||||
"className": "_css_pseudo_node_ockyigdqxl1"
|
||||
},
|
||||
"dataSource": {
|
||||
"offline": [],
|
||||
"globalConfig": {},
|
||||
"online": [
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH3NM0RF4XK61",
|
||||
"formUuid": "FORM-3KYJN7RV-J47BPFK63W2PHAGPO1VC3-B4H1WE5K-131",
|
||||
"name": "locale",
|
||||
"description": "当前语种（在 window.g_config 中设置）",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH3NM0RF4XK61",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
},
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH3SM0RF4XK71",
|
||||
"formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
|
||||
"name": "appType",
|
||||
"description": "应用的唯一 code",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH3SM0RF4XK71",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
},
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH3XM0RF4XK81",
|
||||
"formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
|
||||
"name": "version",
|
||||
"description": "应该版本，默认 0.1.0",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH3XM0RF4XK81",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
},
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH33N0RF4XK91",
|
||||
"formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
|
||||
"name": "apiPrefix",
|
||||
"description": "",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH33N0RF4XK91",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
}
|
||||
],
|
||||
"sync": true,
|
||||
"list": [
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH3NM0RF4XK61",
|
||||
"formUuid": "FORM-3KYJN7RV-J47BPFK63W2PHAGPO1VC3-B4H1WE5K-131",
|
||||
"name": "locale",
|
||||
"description": "当前语种（在 window.g_config 中设置）",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH3NM0RF4XK61",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
},
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH3SM0RF4XK71",
|
||||
"formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
|
||||
"name": "appType",
|
||||
"description": "应用的唯一 code",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH3SM0RF4XK71",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
},
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH3XM0RF4XK81",
|
||||
"formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
|
||||
"name": "version",
|
||||
"description": "应该版本，默认 0.1.0",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH3XM0RF4XK81",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
},
|
||||
{
|
||||
"gmtModified": 1639385418000,
|
||||
"initialData": "",
|
||||
"globalUid": "AY866BC1ERSVK0BE55NU364515LH33N0RF4XK91",
|
||||
"formUuid": "FORM-RFYJTWKV-D47BWO6R0QHA74R062FN2-R5IPXK4K-0H",
|
||||
"name": "apiPrefix",
|
||||
"description": "",
|
||||
"id": "AY866BC1ERSVK0BE55NU364515LH33N0RF4XK91",
|
||||
"protocal": "VALUE",
|
||||
"shareType": "APP"
|
||||
}
|
||||
]
|
||||
},
|
||||
"methods": {},
|
||||
"lifeCycles": {},
|
||||
"hidden": false,
|
||||
"title": "",
|
||||
"isLocked": false,
|
||||
"condition": true,
|
||||
"conditionGroup": "",
|
||||
"children": [
|
||||
{
|
||||
"componentName": "RootHeader",
|
||||
"id": "node_ockyigdqxl2",
|
||||
"docId": "dockyigdqxl",
|
||||
"props": {},
|
||||
"hidden": false,
|
||||
"title": "",
|
||||
"isLocked": false,
|
||||
"condition": true,
|
||||
"conditionGroup": ""
|
||||
},
|
||||
{
|
||||
"componentName": "RootContent",
|
||||
"id": "node_ockyigdqxl3",
|
||||
"docId": "dockyigdqxl",
|
||||
"props": {
|
||||
"contentMargin": "20",
|
||||
"contentPadding": "20",
|
||||
"contentBgColor": "white"
|
||||
},
|
||||
"hidden": false,
|
||||
"title": "",
|
||||
"isLocked": false,
|
||||
"condition": true,
|
||||
"conditionGroup": "",
|
||||
"children": [
|
||||
{
|
||||
"componentName": "Button",
|
||||
"id": "node_ockyigdqxl5",
|
||||
"docId": "dockyigdqxl",
|
||||
"props": {
|
||||
"content": "按 钮",
|
||||
"type": "primary",
|
||||
"size": "medium",
|
||||
"behavior": "NORMAL",
|
||||
"__style__": {},
|
||||
"fieldId": "button_kyige3yf",
|
||||
"events": {
|
||||
"ignored": true
|
||||
},
|
||||
"baseIcon": "",
|
||||
"otherIcon": "",
|
||||
"loading": false,
|
||||
"triggerEventsWhenLoading": false,
|
||||
"className": "_css_pseudo_node_ockyigdqxl5"
|
||||
},
|
||||
"hidden": false,
|
||||
"title": "",
|
||||
"isLocked": false,
|
||||
"condition": true,
|
||||
"conditionGroup": ""
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"componentName": "RootFooter",
|
||||
"id": "node_ockyigdqxl4",
|
||||
"docId": "dockyigdqxl",
|
||||
"props": {},
|
||||
"hidden": false,
|
||||
"title": "",
|
||||
"isLocked": false,
|
||||
"condition": true,
|
||||
"conditionGroup": ""
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -1,5 +0,0 @@
|
||||
module.exports = {
|
||||
process() {
|
||||
return '';
|
||||
},
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,222 +0,0 @@
|
||||
|
||||
import React, { Component, createElement, forwardRef, PureComponent, createContext } from 'react';
|
||||
const mockGetRenderers = jest.fn();
|
||||
const mockGetRuntime = jest.fn();
|
||||
const mockParseExpression = jest.fn();
|
||||
jest.mock('../../src/adapter', () => {
|
||||
return {
|
||||
getRenderers: () => { return mockGetRenderers();},
|
||||
getRuntime: () => { return mockGetRuntime();},
|
||||
};
|
||||
});
|
||||
jest.mock('../../src/utils', () => {
|
||||
const originalUtils = jest.requireActual('../../src/utils');
|
||||
return {
|
||||
...originalUtils,
|
||||
parseExpression: (...args) => { mockParseExpression(args);},
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
import baseRendererFactory from '../../src/renderer/base';
|
||||
import { IBaseRendererProps } from '../../src/types';
|
||||
import TestRenderer from 'react-test-renderer';
|
||||
import components from '../utils/components';
|
||||
import schema from '../fixtures/schema/basic';
|
||||
|
||||
|
||||
describe('Base Render factory', () => {
|
||||
it('customBaseRenderer logic works', () => {
|
||||
mockGetRenderers.mockReturnValue({BaseRenderer: {}});
|
||||
const baseRenderer = baseRendererFactory();
|
||||
expect(mockGetRenderers).toBeCalledTimes(1);
|
||||
expect(baseRenderer).toStrictEqual({});
|
||||
mockGetRenderers.mockClear();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Base Render methods', () => {
|
||||
let RendererClass;
|
||||
const mockRendererFactory = () => {
|
||||
return class extends Component {
|
||||
constructor(props: IBaseRendererProps, context: any) {
|
||||
super(props, context);
|
||||
}
|
||||
}
|
||||
}
|
||||
beforeEach(() => {
|
||||
const mockRnederers = {
|
||||
PageRenderer: mockRendererFactory(),
|
||||
ComponentRenderer: mockRendererFactory(),
|
||||
BlockRenderer: mockRendererFactory(),
|
||||
AddonRenderer: mockRendererFactory(),
|
||||
TempRenderer: mockRendererFactory(),
|
||||
DivRenderer: mockRendererFactory(),
|
||||
};
|
||||
mockGetRenderers.mockReturnValue(mockRnederers);
|
||||
mockGetRuntime.mockReturnValue({
|
||||
Component,
|
||||
createElement,
|
||||
PureComponent,
|
||||
createContext,
|
||||
forwardRef,
|
||||
});
|
||||
RendererClass = baseRendererFactory();
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
mockGetRenderers.mockClear();
|
||||
})
|
||||
|
||||
it('should excute lifecycle.getDerivedStateFromProps when defined', () => {
|
||||
const mockGetDerivedStateFromProps = {
|
||||
type: 'JSFunction',
|
||||
value: 'function() {\n console.log(\'did mount\');\n }',
|
||||
};
|
||||
const mockSchema = schema;
|
||||
(mockSchema.lifeCycles as any).getDerivedStateFromProps = mockGetDerivedStateFromProps;
|
||||
|
||||
// const originalUtils = jest.requireActual('../../src/utils');
|
||||
// mockParseExpression.mockImplementation(originalUtils.parseExpression);
|
||||
const component = TestRenderer.create(
|
||||
<RendererClass
|
||||
__schema={mockSchema}
|
||||
components={components as any}
|
||||
thisRequiredInJSE={false}
|
||||
a='1'
|
||||
/>);
|
||||
// console.log(component.root.props.a);
|
||||
// component.update(<RendererClasssnippets
|
||||
// schema={mockSchema}
|
||||
// components={components as any}
|
||||
// thisRequiredInJSE={false}
|
||||
// a='2'
|
||||
// />);
|
||||
// console.log(component.root.props.a);
|
||||
// expect(mockParseExpression).toHaveBeenCalledWith(mockGetDerivedStateFromProps, expect.anything())
|
||||
// test lifecycle.getDerivedStateFromProps is null
|
||||
|
||||
// test lifecycle.getDerivedStateFromProps is JSExpression
|
||||
|
||||
// test lifecycle.getDerivedStateFromProps is JSFunction
|
||||
|
||||
// test lifecycle.getDerivedStateFromProps is function
|
||||
|
||||
});
|
||||
|
||||
|
||||
// it('should excute lifecycle.getSnapshotBeforeUpdate when defined', () => {
|
||||
// });
|
||||
|
||||
// it('should excute lifecycle.componentDidMount when defined', () => {
|
||||
// });
|
||||
|
||||
// it('should excute lifecycle.componentDidUpdate when defined', () => {
|
||||
// });
|
||||
|
||||
// it('should excute lifecycle.componentWillUnmount when defined', () => {
|
||||
// });
|
||||
|
||||
// it('should excute lifecycle.componentDidCatch when defined', () => {
|
||||
// });
|
||||
|
||||
// it('__executeLifeCycleMethod should work', () => {
|
||||
// });
|
||||
|
||||
// it('reloadDataSource should work', () => {
|
||||
// });
|
||||
|
||||
// it('shouldComponentUpdate should work', () => {
|
||||
// });
|
||||
|
||||
|
||||
// it('_getComponentView should work', () => {
|
||||
// });
|
||||
|
||||
// it('__bindCustomMethods should work', () => {
|
||||
// });
|
||||
|
||||
// it('__generateCtx should work', () => {
|
||||
// });
|
||||
|
||||
// it('__parseData should work', () => {
|
||||
// });
|
||||
|
||||
// it('__initDataSource should work', () => {
|
||||
// });
|
||||
|
||||
// it('__initI18nAPIs should work', () => {
|
||||
// });
|
||||
|
||||
// it('__writeCss should work', () => {
|
||||
// });
|
||||
|
||||
// it('__render should work', () => {
|
||||
// });
|
||||
|
||||
// it('getSchemaChildren should work', () => {
|
||||
// });
|
||||
|
||||
// it('__createDom should work', () => {
|
||||
// });
|
||||
|
||||
// it('__createVirtualDom should work', () => {
|
||||
// });
|
||||
|
||||
// it('__componentHOCs should work', () => {
|
||||
// });
|
||||
|
||||
// it('__getSchemaChildrenVirtualDom should work', () => {
|
||||
// });
|
||||
|
||||
// it('__getComponentProps should work', () => {
|
||||
// });
|
||||
|
||||
// it('__createLoopVirtualDom should work', () => {
|
||||
// });
|
||||
|
||||
// it('__designModeIsDesign should work', () => {
|
||||
// });
|
||||
|
||||
// it('__parseProps should work', () => {
|
||||
// });
|
||||
|
||||
// it('$ should work', () => {
|
||||
// });
|
||||
|
||||
// it('__renderContextProvider should work', () => {
|
||||
// });
|
||||
|
||||
// it('__renderContextConsumer should work', () => {
|
||||
// });
|
||||
|
||||
// it('__getHOCWrappedComponent should work', () => {
|
||||
// });
|
||||
|
||||
// it('__renderComp should work', () => {
|
||||
// });
|
||||
|
||||
// it('__renderContent should work', () => {
|
||||
// });
|
||||
|
||||
// it('__checkSchema should work', () => {
|
||||
// });
|
||||
|
||||
// it('requestHandlersMap should work', () => {
|
||||
// });
|
||||
|
||||
// it('utils should work', () => {
|
||||
// });
|
||||
|
||||
// it('constants should work', () => {
|
||||
// });
|
||||
|
||||
// it('history should work', () => {
|
||||
// });
|
||||
|
||||
// it('location should work', () => {
|
||||
// });
|
||||
|
||||
// it('match should work', () => {
|
||||
// });
|
||||
});
|
||||
@ -1,447 +0,0 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import schema from '../fixtures/schema/basic';
|
||||
import '../utils/react-env-init';
|
||||
import rendererFactory from '../../src/renderer/renderer';
|
||||
import components from '../utils/components';
|
||||
|
||||
const Renderer = rendererFactory();
|
||||
|
||||
function getComp(schema, comp = null, others = {}): Promise<{
|
||||
component,
|
||||
inst,
|
||||
}> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const component = renderer.create(
|
||||
<Renderer
|
||||
schema={schema}
|
||||
components={components as any}
|
||||
{...others}
|
||||
/>);
|
||||
|
||||
const componentInstance = component.root;
|
||||
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
inst: comp ? componentInstance.findAllByType(comp) : null,
|
||||
component,
|
||||
});
|
||||
}, 20);
|
||||
})
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
|
||||
});
|
||||
|
||||
let componentSnapshot;
|
||||
|
||||
afterEach(() => {
|
||||
if (componentSnapshot) {
|
||||
let tree = componentSnapshot.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
componentSnapshot = null;
|
||||
}
|
||||
});
|
||||
|
||||
describe('Base Render', () => {
|
||||
it('renderComp', () => {
|
||||
const content = (
|
||||
<Renderer
|
||||
schema={schema as any}
|
||||
components={components as any}
|
||||
/>);
|
||||
const tree = renderer.create(content).toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('JSExpression', () => {
|
||||
it('base props', (done) => {
|
||||
const schema = {
|
||||
componentName: 'Page',
|
||||
props: {},
|
||||
children: [
|
||||
{
|
||||
componentName: "Div",
|
||||
props: {
|
||||
className: 'div-ut',
|
||||
text: "123",
|
||||
visible: true,
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
getComp(schema, components.Div).then(({ component, inst }) => {
|
||||
expect(inst[0].props.text).toBe('123');
|
||||
expect(inst[0].props.visible).toBeTruthy();
|
||||
|
||||
componentSnapshot = component;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('JSExpression props', (done) => {
|
||||
const schema = {
|
||||
componentName: 'Page',
|
||||
props: {},
|
||||
state: {
|
||||
isShowDialog: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: "Div",
|
||||
props: {
|
||||
className: "div-ut",
|
||||
visible: {
|
||||
type: 'JSExpression',
|
||||
value: 'this.state.isShowDialog',
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
getComp(schema, components.Div).then(({ component, inst }) => {
|
||||
expect(inst[0].props.visible).toBeTruthy();
|
||||
componentSnapshot = component;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('JSExpression props with loop', (done) => {
|
||||
const schema = {
|
||||
componentName: 'Page',
|
||||
props: {},
|
||||
state: {
|
||||
isShowDialog: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: "Div",
|
||||
loop: [
|
||||
{
|
||||
name: '1',
|
||||
},
|
||||
{
|
||||
name: '2'
|
||||
}
|
||||
],
|
||||
props: {
|
||||
className: "div-ut",
|
||||
name1: {
|
||||
type: 'JSExpression',
|
||||
value: 'this.item.name',
|
||||
},
|
||||
name2: {
|
||||
type: 'JSExpression',
|
||||
value: 'item.name',
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
getComp(schema, components.Div, {
|
||||
thisRequiredInJSE: false,
|
||||
}).then(({ component, inst }) => {
|
||||
// expect(inst[0].props.visible).toBeTruthy();
|
||||
expect(inst.length).toEqual(2);
|
||||
[1, 2].forEach((i) => {
|
||||
expect(inst[0].props[`name${i}`]).toBe('1');
|
||||
expect(inst[1].props[`name${i}`]).toBe('2');
|
||||
})
|
||||
componentSnapshot = component;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('JSExpression props with loop, and thisRequiredInJSE is true', (done) => {
|
||||
const schema = {
|
||||
componentName: 'Page',
|
||||
props: {},
|
||||
state: {
|
||||
isShowDialog: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: "Div",
|
||||
loop: [
|
||||
{
|
||||
name: '1',
|
||||
},
|
||||
{
|
||||
name: '2'
|
||||
}
|
||||
],
|
||||
props: {
|
||||
className: "div-ut",
|
||||
name1: {
|
||||
type: 'JSExpression',
|
||||
value: 'this.item.name',
|
||||
},
|
||||
name2: {
|
||||
type: 'JSExpression',
|
||||
value: 'item.name',
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
getComp(schema, components.Div).then(({ component, inst }) => {
|
||||
expect(inst.length).toEqual(2);
|
||||
[0, 1].forEach((i) => {
|
||||
expect(inst[i].props[`name1`]).toBe(i + 1 + '');
|
||||
expect(inst[i].props[`name2`]).toBe(undefined);
|
||||
})
|
||||
componentSnapshot = component;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
// it('JSFunction props with loop', (done) => {
|
||||
// const schema = {
|
||||
// componentName: 'Page',
|
||||
// props: {},
|
||||
// state: {
|
||||
// isShowDialog: true,
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// componentName: "Div",
|
||||
// loop: [
|
||||
// {
|
||||
// name: '1',
|
||||
// },
|
||||
// {
|
||||
// name: '2'
|
||||
// }
|
||||
// ],
|
||||
// props: {
|
||||
// className: "div-ut",
|
||||
// onClick1: {
|
||||
// type: 'JSFunction',
|
||||
// value: '() => this.item.name',
|
||||
// },
|
||||
// onClick2: {
|
||||
// type: 'JSFunction',
|
||||
// value: 'function(){ return this.item.name }',
|
||||
// },
|
||||
// onClick3: {
|
||||
// type: 'JSFunction',
|
||||
// value: 'function(){ return item.name }',
|
||||
// },
|
||||
// onClick4: {
|
||||
// type: 'JSFunction',
|
||||
// value: '() => item.name',
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
|
||||
// getComp(schema, components.Div).then(({ component, inst }) => {
|
||||
// // expect(inst[0].props.visible).toBeTruthy();
|
||||
// expect(inst.length).toEqual(2);
|
||||
// [1, 2, 3, 4].forEach((i) => {
|
||||
// expect(inst[0].props[`onClick${i}`]()).toBe('1');
|
||||
// expect(inst[1].props[`onClick${i}`]()).toBe('2');
|
||||
// })
|
||||
// componentSnapshot = component;
|
||||
// done();
|
||||
// });
|
||||
// });
|
||||
|
||||
it('JSFunction props', (done) => {
|
||||
const schema = {
|
||||
componentName: 'Page',
|
||||
props: {},
|
||||
state: {
|
||||
isShowDialog: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
componentName: "Div",
|
||||
props: {
|
||||
className: "div-ut",
|
||||
onClick: {
|
||||
type: 'JSFunction',
|
||||
value: 'function() {return this.state.isShowDialog}',
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
getComp(schema, components.Div).then(({ component, inst }) => {
|
||||
expect(!!inst[0].props.onClick).toBeTruthy();
|
||||
expect(inst[0].props.onClick()).toBeTruthy();
|
||||
|
||||
componentSnapshot = component;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('JSSlot has loop', (done) => {
|
||||
const schema = {
|
||||
componentName: "Page",
|
||||
props: {},
|
||||
children: [
|
||||
{
|
||||
componentName: "SlotComponent",
|
||||
id: "node_k8bnubvz",
|
||||
props: {
|
||||
mobileSlot: {
|
||||
type: "JSSlot",
|
||||
title: "mobile容器",
|
||||
name: "mobileSlot",
|
||||
value: [
|
||||
{
|
||||
condition: true,
|
||||
hidden: false,
|
||||
children: [
|
||||
{
|
||||
condition: true,
|
||||
hidden: false,
|
||||
loopArgs: [
|
||||
"item",
|
||||
"index"
|
||||
],
|
||||
isLocked: false,
|
||||
conditionGroup: "",
|
||||
componentName: "Text",
|
||||
id: "node_ocl1ao1o7w4",
|
||||
title: "",
|
||||
props: {
|
||||
maxLine: 0,
|
||||
showTitle: false,
|
||||
className: "text_l1ao7pfb",
|
||||
behavior: "NORMAL",
|
||||
content: "这是一个低代码业务组件~",
|
||||
__style__: ":root {\n font-size: 14px;\n color: #666;\n}",
|
||||
fieldId: "text_l1ao7lvp"
|
||||
}
|
||||
}
|
||||
],
|
||||
loop: {
|
||||
type: "JSExpression",
|
||||
value: "this.state.content"
|
||||
},
|
||||
loopArgs: [
|
||||
"item",
|
||||
"index"
|
||||
],
|
||||
isLocked: false,
|
||||
conditionGroup: "",
|
||||
componentName: "Div",
|
||||
id: "node_ocl1ao1o7w3",
|
||||
title: "",
|
||||
props: {
|
||||
useFieldIdAsDomId: false,
|
||||
customClassName: "",
|
||||
className: "div_l1ao7pfc",
|
||||
behavior: "NORMAL",
|
||||
__style__: ":root {\n padding: 12px;\n background: #f2f2f2;\n border: 1px solid #ddd;\n}",
|
||||
fieldId: "div_l1ao7lvq"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
state: {
|
||||
content: {
|
||||
type: "JSExpression",
|
||||
value: "[{}, {}, {}]",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
getComp(schema, components.Div).then(({ component, inst }) => {
|
||||
expect(inst.length).toBe(3);
|
||||
componentSnapshot = component;
|
||||
done();
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
describe("designMode", () => {
|
||||
it('designMode:default', (done) => {
|
||||
const schema = {
|
||||
componentName: 'Page',
|
||||
props: {},
|
||||
children: [
|
||||
{
|
||||
componentName: "Div",
|
||||
props: {
|
||||
className: 'div-ut',
|
||||
children: [
|
||||
{
|
||||
componentName: "Div",
|
||||
visible: true,
|
||||
props: {
|
||||
className: 'div-ut-children',
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
getComp(schema, components.Div).then(({ component, inst }) => {
|
||||
expect(inst.length).toBe(2);
|
||||
expect(inst[0].props.className).toBe('div-ut');
|
||||
expect(inst[1].props.className).toBe('div-ut-children');
|
||||
componentSnapshot = component;
|
||||
done();
|
||||
});
|
||||
});
|
||||
it('designMode:design', (done) => {
|
||||
const schema = {
|
||||
componentName: 'Page',
|
||||
props: {},
|
||||
children: [
|
||||
{
|
||||
componentName: "Div",
|
||||
id: '0',
|
||||
props: {
|
||||
className: 'div-ut',
|
||||
children: [
|
||||
{
|
||||
componentName: "Div",
|
||||
id: 'hiddenId',
|
||||
hidden: true,
|
||||
props: {
|
||||
className: 'div-ut-children',
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
getComp(schema, components.Div, {
|
||||
designMode: 'design',
|
||||
getNode: (id) => {
|
||||
if (id === 'hiddenId') {
|
||||
return {
|
||||
export() {
|
||||
return {
|
||||
hidden: true,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}).then(({ component, inst }) => {
|
||||
expect(inst.length).toBe(1);
|
||||
expect(inst[0].props.className).toBe('div-ut');
|
||||
done();
|
||||
});
|
||||
});
|
||||
})
|
||||
@ -1,14 +0,0 @@
|
||||
jest.mock('lodash', () => {
|
||||
const original = jest.requireActual('lodash');
|
||||
|
||||
return {
|
||||
...original,
|
||||
debounce: (fn) => (...args: any[]) => fn.apply(this, args),
|
||||
throttle: (fn) => (...args: any[]) => fn.apply(this, args),
|
||||
}
|
||||
})
|
||||
|
||||
export const mockConsoleWarn = jest.fn();
|
||||
console.warn = mockConsoleWarn;
|
||||
|
||||
process.env.NODE_ENV = 'production';
|
||||
@ -1,463 +0,0 @@
|
||||
import {
|
||||
isSchema,
|
||||
isFileSchema,
|
||||
inSameDomain,
|
||||
getFileCssName,
|
||||
isJSSlot,
|
||||
getValue,
|
||||
getI18n,
|
||||
transformArrayToMap,
|
||||
transformStringToFunction,
|
||||
isVariable,
|
||||
capitalizeFirstLetter,
|
||||
forEach,
|
||||
isString,
|
||||
serializeParams,
|
||||
parseExpression,
|
||||
parseThisRequiredExpression,
|
||||
parseI18n,
|
||||
parseData,
|
||||
} from '../../src/utils/common';
|
||||
import logger from '../../src/utils/logger';
|
||||
|
||||
describe('test isSchema', () => {
|
||||
it('should be false when empty value is passed', () => {
|
||||
expect(isSchema(null)).toBeFalsy();
|
||||
expect(isSchema(undefined)).toBeFalsy();
|
||||
expect(isSchema('')).toBeFalsy();
|
||||
expect(isSchema({})).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should be true when componentName is Leaf or Slot ', () => {
|
||||
expect(isSchema({ componentName: 'Leaf' })).toBeTruthy();
|
||||
expect(isSchema({ componentName: 'Slot' })).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should check each item of an array', () => {
|
||||
const validArraySchema = [
|
||||
{ componentName: 'Button', props: {}},
|
||||
{ componentName: 'Button', props: { type: 'JSExpression' }},
|
||||
{ componentName: 'Leaf' },
|
||||
{ componentName: 'Slot'},
|
||||
];
|
||||
const invalidArraySchema = [
|
||||
...validArraySchema,
|
||||
{ componentName: 'ComponentWithoutProps'},
|
||||
];
|
||||
expect(isSchema(validArraySchema)).toBeTruthy();
|
||||
expect(isSchema(invalidArraySchema)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('normal valid schema should contains componentName, and props of type object or JSExpression', () => {
|
||||
expect(isSchema({ componentName: 'Button', props: {}})).toBeTruthy();
|
||||
expect(isSchema({ componentName: 'Button', props: { type: 'JSExpression' }})).toBeTruthy();
|
||||
expect(isSchema({ xxxName: 'Button'})).toBeFalsy();
|
||||
expect(isSchema({ componentName: 'Button', props: null})).toBeFalsy();
|
||||
expect(isSchema({ componentName: 'Button', props: []})).toBeFalsy();
|
||||
expect(isSchema({ componentName: 'Button', props: 'props string'})).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('test isFileSchema ', () => {
|
||||
it('should be false when invalid schema is passed', () => {
|
||||
expect(isFileSchema({ xxxName: 'Button'})).toBeFalsy();
|
||||
expect(isFileSchema({ componentName: 'Button', props: null})).toBeFalsy();
|
||||
expect(isFileSchema({ componentName: 'Button', props: []})).toBeFalsy();
|
||||
expect(isFileSchema({ componentName: 'Button', props: 'props string'})).toBeFalsy();
|
||||
});
|
||||
it('should be true only when schema with root named Page || Block || Component is passed', () => {
|
||||
expect(isFileSchema({ componentName: 'Page', props: {}})).toBeTruthy();
|
||||
expect(isFileSchema({ componentName: 'Block', props: {}})).toBeTruthy();
|
||||
expect(isFileSchema({ componentName: 'Component', props: {}})).toBeTruthy();
|
||||
expect(isFileSchema({ componentName: 'Button', props: {}})).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('test inSameDomain ', () => {
|
||||
let windowSpy;
|
||||
|
||||
beforeEach(() => {
|
||||
windowSpy = jest.spyOn(window, "window", "get");
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
windowSpy.mockRestore();
|
||||
});
|
||||
it('should work', () => {
|
||||
|
||||
windowSpy.mockImplementation(() => ({
|
||||
parent: {
|
||||
location: {
|
||||
host: "example.com"
|
||||
},
|
||||
},
|
||||
location: {
|
||||
host: "example.com"
|
||||
}
|
||||
}));
|
||||
expect(inSameDomain()).toBeTruthy();
|
||||
|
||||
windowSpy.mockImplementation(() => ({
|
||||
parent: {
|
||||
location: {
|
||||
host: "example.com"
|
||||
},
|
||||
},
|
||||
location: {
|
||||
host: "another.com"
|
||||
}
|
||||
}));
|
||||
expect(inSameDomain()).toBeFalsy();
|
||||
|
||||
windowSpy.mockImplementation(() => ({
|
||||
parent: null,
|
||||
location: {
|
||||
host: "example.com"
|
||||
}
|
||||
}));
|
||||
|
||||
expect(inSameDomain()).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('test getFileCssName ', () => {
|
||||
it('should work', () => {
|
||||
expect(getFileCssName(null)).toBe(undefined);
|
||||
expect(getFileCssName(undefined)).toBe(undefined);
|
||||
expect(getFileCssName('')).toBe(undefined);
|
||||
expect(getFileCssName('FileName')).toBe('lce-file-name');
|
||||
expect(getFileCssName('Page1_abc')).toBe('lce-page1_abc');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('test isJSSlot ', () => {
|
||||
it('should work', () => {
|
||||
expect(isJSSlot(null)).toBeFalsy();
|
||||
expect(isJSSlot(undefined)).toBeFalsy();
|
||||
expect(isJSSlot('stringValue')).toBeFalsy();
|
||||
expect(isJSSlot([1, 2, 3])).toBeFalsy();
|
||||
expect(isJSSlot({ type: 'JSSlot' })).toBeTruthy();
|
||||
expect(isJSSlot({ type: 'JSBlock' })).toBeTruthy();
|
||||
expect(isJSSlot({ type: 'anyOtherType' })).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('test getValue ', () => {
|
||||
it('should check params', () => {
|
||||
expect(getValue(null, 'somePath')).toStrictEqual({});
|
||||
expect(getValue(undefined, 'somePath')).toStrictEqual({});
|
||||
// array is not valid input, return default
|
||||
expect(getValue([], 'somePath')).toStrictEqual({});
|
||||
expect(getValue([], 'somePath', 'aaa')).toStrictEqual('aaa');
|
||||
expect(getValue([1, 2, 3], 'somePath', 'aaa')).toStrictEqual('aaa');
|
||||
|
||||
expect(getValue({}, 'somePath')).toStrictEqual({});
|
||||
expect(getValue({}, 'somePath', 'default')).toStrictEqual('default');
|
||||
});
|
||||
it('should work normally', () => {
|
||||
// single segment path
|
||||
expect(getValue({ a: 'aValue' }, 'a')).toStrictEqual('aValue');
|
||||
expect(getValue({ a: 'aValue', f:null }, 'f')).toBeNull();
|
||||
expect(getValue({ a: { b: 'bValue' } }, 'a.b')).toStrictEqual('bValue');
|
||||
expect(getValue({ a: { b: 'bValue', c: { d: 'dValue' } } }, 'a.c.d')).toStrictEqual('dValue');
|
||||
expect(getValue({ a: { b: 'bValue', c: { d: 'dValue' } } }, 'e')).toStrictEqual({});
|
||||
});
|
||||
});
|
||||
|
||||
describe('test getI18n ', () => {
|
||||
it('should work', () => {
|
||||
const messages = {
|
||||
'zh-CN': {
|
||||
'key1': '啊啊啊',
|
||||
'key2': '哈哈哈',
|
||||
},
|
||||
};
|
||||
expect(getI18n('keyString', {}, 'zh-CN')).toStrictEqual('');
|
||||
expect(getI18n('keyString', {}, 'zh-CN', null)).toStrictEqual('');
|
||||
expect(getI18n('keyString', {}, 'en-US', messages)).toStrictEqual('');
|
||||
expect(getI18n('key3', {}, 'zh-CN', messages)).toStrictEqual('');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('test transformArrayToMap ', () => {
|
||||
it('should work', () => {
|
||||
expect(transformArrayToMap([])).toStrictEqual({});
|
||||
expect(transformArrayToMap('not a array')).toStrictEqual({});
|
||||
expect(transformArrayToMap({'not Array': 1})).toStrictEqual({});
|
||||
|
||||
let mockArray = [
|
||||
{
|
||||
name: 'jack',
|
||||
age: 2,
|
||||
},
|
||||
{
|
||||
name: 'jack',
|
||||
age: 20,
|
||||
}
|
||||
];
|
||||
// test override
|
||||
expect(transformArrayToMap(mockArray, 'name', true).jack.age).toBe(20);
|
||||
expect(transformArrayToMap(mockArray, 'name').jack.age).toBe(20);
|
||||
expect(transformArrayToMap(mockArray, 'name', false).jack.age).toBe(2);
|
||||
|
||||
mockArray = [
|
||||
{
|
||||
name: 'jack',
|
||||
age: 2,
|
||||
},
|
||||
{
|
||||
name: 'rose',
|
||||
age: 20,
|
||||
}
|
||||
];
|
||||
// normal case
|
||||
expect(transformArrayToMap(mockArray, 'name').jack.age).toBe(2);
|
||||
expect(transformArrayToMap(mockArray, 'name').jack.name).toBe('jack');
|
||||
expect(transformArrayToMap(mockArray, 'name').rose.age).toBe(20);
|
||||
// key not exists
|
||||
expect(transformArrayToMap(mockArray, 'nameEn')).toStrictEqual({});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
describe('test transformStringToFunction ', () => {
|
||||
it('should work', () => {
|
||||
const mockFun = jest.fn();
|
||||
expect(transformStringToFunction(mockFun)).toBe(mockFun);
|
||||
expect(transformStringToFunction(111)).toBe(111);
|
||||
|
||||
let mockFnStr = 'function(){return 111;}';
|
||||
let fn = transformStringToFunction(mockFnStr);
|
||||
expect(fn()).toBe(111);
|
||||
|
||||
mockFnStr = '() => { return 222; }';
|
||||
fn = transformStringToFunction(mockFnStr);
|
||||
expect(fn()).toBe(222);
|
||||
|
||||
mockFnStr = 'function getValue() { return 333; }';
|
||||
fn = transformStringToFunction(mockFnStr);
|
||||
expect(fn()).toBe(333);
|
||||
|
||||
mockFnStr = 'function getValue(aaa) {\
|
||||
return aaa; \
|
||||
}';
|
||||
fn = transformStringToFunction(mockFnStr);
|
||||
expect(fn(123)).toBe(123);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('test isVariable ', () => {
|
||||
it('should work', () => {
|
||||
expect(isVariable(null)).toBeFalsy();
|
||||
expect(isVariable(undefined)).toBeFalsy();
|
||||
expect(isVariable([1, 2, 3])).toBeFalsy();
|
||||
expect(isVariable({})).toBeFalsy();
|
||||
expect(isVariable({ type: 'any other type' })).toBeFalsy();
|
||||
expect(isVariable({ type: 'variable' })).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('test capitalizeFirstLetter ', () => {
|
||||
it('should work', () => {
|
||||
expect(capitalizeFirstLetter(null)).toBeNull();
|
||||
expect(capitalizeFirstLetter()).toBeUndefined();
|
||||
expect(capitalizeFirstLetter([1, 2, 3])).toStrictEqual([1, 2, 3]);
|
||||
expect(capitalizeFirstLetter({ a: 1 })).toStrictEqual({ a: 1 });
|
||||
expect(capitalizeFirstLetter('')).toStrictEqual('');
|
||||
expect(capitalizeFirstLetter('a')).toStrictEqual('A');
|
||||
expect(capitalizeFirstLetter('abcd')).toStrictEqual('Abcd');
|
||||
});
|
||||
});
|
||||
|
||||
describe('test forEach ', () => {
|
||||
it('should work', () => {
|
||||
const mockFn = jest.fn();
|
||||
|
||||
forEach(null, mockFn);
|
||||
expect(mockFn).toBeCalledTimes(0);
|
||||
|
||||
forEach(undefined, mockFn);
|
||||
expect(mockFn).toBeCalledTimes(0);
|
||||
|
||||
forEach([1, 2, 3], mockFn);
|
||||
expect(mockFn).toBeCalledTimes(0);
|
||||
|
||||
forEach('stringValue', mockFn);
|
||||
expect(mockFn).toBeCalledTimes(0);
|
||||
|
||||
forEach({ a: 1, b: 2, c: 3 }, mockFn);
|
||||
expect(mockFn).toBeCalledTimes(3);
|
||||
|
||||
const mockFn2 = jest.fn();
|
||||
forEach({ a: 1 }, mockFn2, { b: 'bbb' });
|
||||
expect(mockFn2).toHaveBeenCalledWith(1, 'a');
|
||||
|
||||
let sum = 0;
|
||||
const mockFn3 = function(value, key) { sum = value + this.b; };
|
||||
forEach({ a: 1 }, mockFn3, { b: 10 });
|
||||
expect(sum).toEqual(11);
|
||||
});
|
||||
});
|
||||
|
||||
describe('test isString ', () => {
|
||||
it('should work', () => {
|
||||
expect(isString(123)).toBeFalsy();
|
||||
expect(isString([])).toBeFalsy();
|
||||
expect(isString({})).toBeFalsy();
|
||||
expect(isString(null)).toBeFalsy();
|
||||
expect(isString(undefined)).toBeFalsy();
|
||||
expect(isString(true)).toBeFalsy();
|
||||
expect(isString('111')).toBeTruthy();
|
||||
expect(isString(new String('111'))).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('test serializeParams ', () => {
|
||||
it('should work', () => {
|
||||
const mockParams = { a: 1, b: 2, c: 'cvalue', d:[1, 'a', {}], e: {e1: 'value1', e2: 'value2'}};
|
||||
const result = serializeParams(mockParams);
|
||||
const decodedParams = decodeURIComponent(result);
|
||||
expect(result).toBe('a=1&b=2&c=cvalue&d=%5B1%2C%22a%22%2C%7B%7D%5D&e=%7B%22e1%22%3A%22value1%22%2C%22e2%22%3A%22value2%22%7D');
|
||||
expect(decodedParams).toBe('a=1&b=2&c=cvalue&d=[1,"a",{}]&e={"e1":"value1","e2":"value2"}');
|
||||
});
|
||||
});
|
||||
|
||||
describe('test parseExpression ', () => {
|
||||
it('can handle JSExpression', () => {
|
||||
const mockExpression = {
|
||||
"type": "JSExpression",
|
||||
"value": "function (params) { return this.scopeValue + params.param1 + 5;}"
|
||||
};
|
||||
const result = parseExpression(mockExpression, { scopeValue: 1 });
|
||||
expect(result({ param1: 2 })).toBe((1 + 2 + 5));
|
||||
});
|
||||
|
||||
it('[success] JSExpression handle without this use scopeValue', () => {
|
||||
const mockExpression = {
|
||||
"type": "JSExpression",
|
||||
"value": "state"
|
||||
};
|
||||
const result = parseExpression(mockExpression, { state: 1 });
|
||||
expect(result).toBe((1));
|
||||
});
|
||||
|
||||
it('[success] JSExpression handle without this use scopeValue', () => {
|
||||
const mockExpression = {
|
||||
"type": "JSExpression",
|
||||
"value": "this.state"
|
||||
};
|
||||
const result = parseExpression(mockExpression, { state: 1 });
|
||||
expect(result).toBe((1));
|
||||
});
|
||||
});
|
||||
|
||||
describe('test parseThisRequiredExpression', () => {
|
||||
it('can handle JSExpression', () => {
|
||||
const mockExpression = {
|
||||
"type": "JSExpression",
|
||||
"value": "function (params) { return this.scopeValue + params.param1 + 5;}"
|
||||
};
|
||||
const result = parseThisRequiredExpression(mockExpression, { scopeValue: 1 });
|
||||
expect(result({ param1: 2 })).toBe((1 + 2 + 5));
|
||||
});
|
||||
|
||||
it('[error] JSExpression handle without this use scopeValue', () => {
|
||||
const mockExpression = {
|
||||
"type": "JSExpression",
|
||||
"value": "state.text"
|
||||
};
|
||||
const fn = logger.error = jest.fn();
|
||||
parseThisRequiredExpression(mockExpression, { state: { text: 'text' } });
|
||||
expect(fn).toBeCalledWith(' parseExpression.error', new ReferenceError('state is not defined'), {"type": "JSExpression", "value": "state.text"}, {"state": {"text": "text"}});
|
||||
});
|
||||
|
||||
it('[success] JSExpression handle without this use scopeValue', () => {
|
||||
const mockExpression = {
|
||||
"type": "JSExpression",
|
||||
"value": "this.state"
|
||||
};
|
||||
const result = parseThisRequiredExpression(mockExpression, { state: 1 });
|
||||
expect(result).toBe((1));
|
||||
});
|
||||
})
|
||||
|
||||
describe('test parseI18n ', () => {
|
||||
it('can handle normal parseI18n', () => {
|
||||
const mockI18n = {
|
||||
"type": "i18n",
|
||||
"key": "keyA"
|
||||
};
|
||||
const mockI18nFun = (key) => { return 'hahaha' + key;};
|
||||
const result = parseI18n(mockI18n, { i18n: mockI18nFun });
|
||||
expect(result).toBe('hahahakeyA');
|
||||
});
|
||||
});
|
||||
|
||||
describe('test parseData ', () => {
|
||||
it('should work when isJSExpression === true', () => {
|
||||
const mockExpression = {
|
||||
"type": "JSExpression",
|
||||
"value": "function (params) { return this.scopeValue + params.param1 + 5;}"
|
||||
};
|
||||
const result = parseData(mockExpression, { scopeValue: 1 });
|
||||
expect(result({ param1: 2 })).toBe((1 + 2 + 5));
|
||||
});
|
||||
it('should work when isI18nData === true', () => {
|
||||
const mockI18n = {
|
||||
"type": "i18n",
|
||||
"key": "keyA"
|
||||
};
|
||||
const mockI18nFun = (key) => { return 'hahaha' + key;};
|
||||
const result = parseData(mockI18n, { i18n: mockI18nFun });
|
||||
expect(result).toBe('hahahakeyA');
|
||||
});
|
||||
it('should work when schema is string', () => {
|
||||
expect(parseData(' this is a normal string, will be trimmed only ')).toStrictEqual('this is a normal string, will be trimmed only');
|
||||
});
|
||||
|
||||
it('should work when schema is array', () => {
|
||||
const mockData = [
|
||||
{
|
||||
"type": "i18n",
|
||||
"key": "keyA"
|
||||
},
|
||||
' this is a normal string, will be trimmed only ',
|
||||
];
|
||||
|
||||
const mockI18nFun = (key) => { return 'hahaha' + key;};
|
||||
const result = parseData(mockData, { i18n: mockI18nFun });
|
||||
|
||||
expect(result[0]).toStrictEqual('hahahakeyA');
|
||||
expect(result[1]).toStrictEqual('this is a normal string, will be trimmed only');
|
||||
});
|
||||
it('should work when schema is function', () => {
|
||||
const mockFn = function() { return this.a; };
|
||||
const result = parseData(mockFn, { a: 111 });
|
||||
expect(result()).toBe(111);
|
||||
});
|
||||
it('should work when schema is null or undefined', () => {
|
||||
expect(parseData(null)).toBe(null);
|
||||
expect(parseData(undefined)).toBe(undefined);
|
||||
});
|
||||
it('should work when schema is normal object', () => {
|
||||
expect(parseData({})).toStrictEqual({});
|
||||
const mockI18nFun = (key) => { return 'hahaha' + key;};
|
||||
const result = parseData({
|
||||
key1: {
|
||||
"type": "i18n",
|
||||
"key": "keyA"
|
||||
},
|
||||
key2: ' this is a normal string, will be trimmed only ',
|
||||
__privateKey: 'any value',
|
||||
}, { i18n: mockI18nFun });
|
||||
expect(result.key1).toStrictEqual('hahahakeyA');
|
||||
expect(result.key2).toStrictEqual('this is a normal string, will be trimmed only');
|
||||
expect(result.__privateKey).toBeUndefined();
|
||||
|
||||
});
|
||||
});
|
||||
@ -1,38 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Box, Breadcrumb, Form, Select, Input, Button, Table, Pagination, Dialog } from '@alifd/next';
|
||||
|
||||
const Div = ({_leaf, ...rest}: any) => (<div {...rest}>{rest.children}</div>);
|
||||
|
||||
const MiniRenderDiv = ({_leaf, ...rest}: any) => {
|
||||
return (
|
||||
<div {...rest}>
|
||||
{rest.children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Text = ({_leaf, ...rest}: any) => (<div {...rest}>{rest.content}</div>);
|
||||
|
||||
const SlotComponent = (props: any) => props.mobileSlot;
|
||||
|
||||
const components = {
|
||||
Box,
|
||||
Breadcrumb,
|
||||
'Breadcrumb.Item': Breadcrumb.Item,
|
||||
Form,
|
||||
'Form.Item': Form.Item,
|
||||
Select,
|
||||
Input,
|
||||
Button,
|
||||
'Button.Group': Button.Group,
|
||||
Table,
|
||||
Pagination,
|
||||
Dialog,
|
||||
ErrorComponent: Select,
|
||||
Div,
|
||||
SlotComponent,
|
||||
Text,
|
||||
MiniRenderDiv,
|
||||
};
|
||||
|
||||
export default components;
|
||||
@ -1,559 +0,0 @@
|
||||
// @ts-nocheck
|
||||
const mockJsonp = jest.fn();
|
||||
const mockRequest = jest.fn();
|
||||
const mockGet = jest.fn();
|
||||
const mockPost = jest.fn();
|
||||
jest.mock('../../src/utils/request', () => {
|
||||
return {
|
||||
jsonp: (uri, params, headers, otherProps) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(mockJsonp(uri, params, headers, otherProps));
|
||||
});
|
||||
},
|
||||
request: (uri, params, headers, otherProps) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(mockRequest(uri, params, headers, otherProps));
|
||||
});
|
||||
},
|
||||
get: (uri, params, headers, otherProps) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(mockGet(uri, params, headers, otherProps));
|
||||
});
|
||||
},
|
||||
post: (uri, params, headers, otherProps) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(mockPost(uri, params, headers, otherProps));
|
||||
});
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
import { DataHelper, doRequest } from '../../src/utils/data-helper';
|
||||
import { parseData } from '../../src/utils/common';
|
||||
|
||||
describe('test DataHelper ', () => {
|
||||
beforeEach(() => {
|
||||
jest.resetModules();
|
||||
})
|
||||
it('can be inited', () => {
|
||||
const mockHost = {};
|
||||
let mockDataSourceConfig = {};
|
||||
const mockAppHelper = {};
|
||||
const mockParser = (config: any) => parseData(config);
|
||||
let dataHelper = new DataHelper(mockHost, mockDataSourceConfig, mockAppHelper, mockParser);
|
||||
|
||||
expect(dataHelper).toBeTruthy();
|
||||
expect(dataHelper.host).toBe(mockHost);
|
||||
expect(dataHelper.config).toBe(mockDataSourceConfig);
|
||||
expect(dataHelper.appHelper).toBe(mockAppHelper);
|
||||
expect(dataHelper.parser).toBe(mockParser);
|
||||
|
||||
|
||||
dataHelper = new DataHelper(mockHost, undefined, mockAppHelper, mockParser);
|
||||
expect(dataHelper.config).toStrictEqual({});
|
||||
expect(dataHelper.ajaxList).toStrictEqual([]);
|
||||
|
||||
mockDataSourceConfig = {
|
||||
list: [
|
||||
{
|
||||
id: 'ds1',
|
||||
}, {
|
||||
id: 'ds2',
|
||||
},
|
||||
]
|
||||
};
|
||||
dataHelper = new DataHelper(mockHost, mockDataSourceConfig, mockAppHelper, mockParser);
|
||||
expect(dataHelper.config).toBe(mockDataSourceConfig);
|
||||
expect(dataHelper.ajaxList.length).toBe(2);
|
||||
expect(dataHelper.ajaxMap.ds1).toStrictEqual({
|
||||
id: 'ds1',
|
||||
});
|
||||
});
|
||||
it('should handle generateDataSourceMap properly in constructor', () => {
|
||||
const mockHost = {};
|
||||
let mockDataSourceConfig = {};
|
||||
const mockAppHelper = {};
|
||||
const mockParser = (config: any) => parseData(config);
|
||||
let dataHelper = new DataHelper(mockHost, mockDataSourceConfig, mockAppHelper, mockParser);
|
||||
|
||||
// test generateDataSourceMap logic
|
||||
mockDataSourceConfig = {
|
||||
list: [
|
||||
{
|
||||
id: 'getInfo',
|
||||
isInit: true,
|
||||
type: 'fetch', // fetch/mtop/jsonp/custom
|
||||
options: {
|
||||
uri: 'mock/info.json',
|
||||
method: 'GET',
|
||||
params: { a: 1 },
|
||||
timeout: 5000,
|
||||
},
|
||||
}, {
|
||||
id: 'postInfo',
|
||||
isInit: true,
|
||||
type: 'fetch',
|
||||
options: {
|
||||
uri: 'mock/info.json',
|
||||
method: 'POST',
|
||||
params: { a: 1 },
|
||||
timeout: 5000,
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
dataHelper = new DataHelper(mockHost, mockDataSourceConfig, mockAppHelper, mockParser);
|
||||
expect(Object.keys(dataHelper.dataSourceMap).length).toBe(2);
|
||||
expect(dataHelper.dataSourceMap.getInfo.status).toBe('init');
|
||||
expect(typeof dataHelper.dataSourceMap.getInfo.load).toBe('function');
|
||||
});
|
||||
|
||||
it('getInitDataSourseConfigs should work', () => {
|
||||
const mockHost = {};
|
||||
let mockDataSourceConfig = {};
|
||||
const mockAppHelper = {};
|
||||
const mockParser = (config: any) => parseData(config);
|
||||
|
||||
// test generateDataSourceMap logic
|
||||
mockDataSourceConfig = {
|
||||
list: [
|
||||
{
|
||||
id: 'getInfo',
|
||||
isInit: true,
|
||||
type: 'fetch', // fetch/mtop/jsonp/custom
|
||||
options: {
|
||||
uri: 'mock/info.json',
|
||||
method: 'GET',
|
||||
params: { a: 1 },
|
||||
timeout: 5000,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'postInfo',
|
||||
isInit: false,
|
||||
type: 'fetch',
|
||||
options: {
|
||||
uri: 'mock/info.json',
|
||||
method: 'POST',
|
||||
params: { a: 1 },
|
||||
timeout: 5000,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'getInfoLater',
|
||||
isInit: false,
|
||||
type: 'fetch',
|
||||
options: {
|
||||
uri: 'mock/info.json',
|
||||
method: 'POST',
|
||||
params: { a: 1 },
|
||||
timeout: 5000,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'getInfoLater2',
|
||||
isInit: 'not a valid boolean',
|
||||
type: 'fetch',
|
||||
options: {
|
||||
uri: 'mock/info.json',
|
||||
method: 'POST',
|
||||
params: { a: 1 },
|
||||
timeout: 5000,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const dataHelper = new DataHelper(mockHost, mockDataSourceConfig, mockAppHelper, mockParser);
|
||||
expect(dataHelper.getInitDataSourseConfigs().length).toBe(1);
|
||||
expect(dataHelper.getInitDataSourseConfigs()[0].id).toBe('getInfo');
|
||||
});
|
||||
it('util function doRequest should work', () => {
|
||||
doRequest('jsonp', {
|
||||
uri: 'https://www.baidu.com',
|
||||
params: { a: 1 },
|
||||
otherStuff1: 'aaa',
|
||||
});
|
||||
expect(mockJsonp).toBeCalled();
|
||||
|
||||
// test GET
|
||||
doRequest('fetch', {
|
||||
uri: 'https://www.baidu.com',
|
||||
method: 'get',
|
||||
params: { a: 1 },
|
||||
otherStuff1: 'aaa',
|
||||
});
|
||||
expect(mockGet).toBeCalled();
|
||||
|
||||
mockGet.mockClear();
|
||||
doRequest('fetch', {
|
||||
uri: 'https://www.baidu.com',
|
||||
method: 'Get',
|
||||
params: { a: 1 },
|
||||
otherStuff1: 'aaa',
|
||||
});
|
||||
expect(mockGet).toBeCalled();
|
||||
|
||||
mockGet.mockClear();
|
||||
doRequest('fetch', {
|
||||
uri: 'https://www.baidu.com',
|
||||
method: 'GET',
|
||||
params: { a: 1 },
|
||||
otherStuff1: 'aaa',
|
||||
});
|
||||
expect(mockGet).toBeCalled();
|
||||
|
||||
mockGet.mockClear();
|
||||
|
||||
// test POST
|
||||
doRequest('fetch', {
|
||||
uri: 'https://www.baidu.com',
|
||||
method: 'post',
|
||||
params: { a: 1 },
|
||||
otherStuff1: 'aaa',
|
||||
});
|
||||
expect(mockPost).toBeCalled();
|
||||
mockPost.mockClear();
|
||||
|
||||
doRequest('fetch', {
|
||||
uri: 'https://www.baidu.com',
|
||||
method: 'POST',
|
||||
params: { a: 1 },
|
||||
otherStuff1: 'aaa',
|
||||
});
|
||||
expect(mockPost).toBeCalled();
|
||||
mockPost.mockClear();
|
||||
doRequest('fetch', {
|
||||
uri: 'https://www.baidu.com',
|
||||
method: 'Post',
|
||||
params: { a: 1 },
|
||||
otherStuff1: 'aaa',
|
||||
});
|
||||
expect(mockPost).toBeCalled();
|
||||
mockPost.mockClear();
|
||||
|
||||
// test default
|
||||
doRequest('fetch', {
|
||||
uri: 'https://www.baidu.com',
|
||||
method: 'whatever',
|
||||
params: { a: 1 },
|
||||
otherStuff1: 'aaa',
|
||||
});
|
||||
expect(mockRequest).toBeCalled();
|
||||
mockRequest.mockClear();
|
||||
mockGet.mockClear();
|
||||
|
||||
// method will be GET when not provided
|
||||
doRequest('fetch', {
|
||||
uri: 'https://www.baidu.com',
|
||||
params: { a: 1 },
|
||||
otherStuff1: 'aaa',
|
||||
});
|
||||
expect(mockRequest).toBeCalledTimes(0);
|
||||
expect(mockGet).toBeCalledTimes(1);
|
||||
|
||||
mockRequest.mockClear();
|
||||
mockGet.mockClear();
|
||||
mockPost.mockClear();
|
||||
mockJsonp.mockClear();
|
||||
|
||||
doRequest('someOtherType', {
|
||||
uri: 'https://www.baidu.com',
|
||||
params: { a: 1 },
|
||||
otherStuff1: 'aaa',
|
||||
});
|
||||
expect(mockRequest).toBeCalledTimes(0);
|
||||
expect(mockGet).toBeCalledTimes(0);
|
||||
expect(mockPost).toBeCalledTimes(0);
|
||||
expect(mockJsonp).toBeCalledTimes(0);
|
||||
});
|
||||
it('updateDataSourceMap should work', () => {
|
||||
const mockHost = {};
|
||||
const mockDataSourceConfig = {
|
||||
list: [
|
||||
{
|
||||
id: 'ds1',
|
||||
}, {
|
||||
id: 'ds2',
|
||||
},
|
||||
]
|
||||
};
|
||||
const mockAppHelper = {};
|
||||
const mockParser = (config: any) => parseData(config);
|
||||
const dataHelper = new DataHelper(mockHost, mockDataSourceConfig, mockAppHelper, mockParser);
|
||||
dataHelper.updateDataSourceMap('ds1', { a: 1 }, null);
|
||||
expect(dataHelper.dataSourceMap['ds1']).toBeTruthy();
|
||||
expect(dataHelper.dataSourceMap['ds1'].data).toStrictEqual({ a: 1 });
|
||||
expect(dataHelper.dataSourceMap['ds1'].error).toBeUndefined();
|
||||
expect(dataHelper.dataSourceMap['ds1'].status).toBe('loaded');
|
||||
dataHelper.updateDataSourceMap('ds2', { b: 2 }, new Error());
|
||||
expect(dataHelper.dataSourceMap['ds2']).toBeTruthy();
|
||||
expect(dataHelper.dataSourceMap['ds2'].data).toStrictEqual({ b: 2 });
|
||||
expect(dataHelper.dataSourceMap['ds2'].status).toBe('error');
|
||||
expect(dataHelper.dataSourceMap['ds2'].error).toBeTruthy();
|
||||
});
|
||||
|
||||
it('handleData should work', () => {
|
||||
const mockHost = { stateA: 'aValue'};
|
||||
const mockDataSourceConfig = {
|
||||
list: [
|
||||
{
|
||||
id: 'fullConfigGet',
|
||||
isInit: true,
|
||||
options: {
|
||||
params: {},
|
||||
method: 'GET',
|
||||
isCors: true,
|
||||
timeout: 5000,
|
||||
headers: {},
|
||||
uri: 'mock/info.json',
|
||||
},
|
||||
shouldFetch: {
|
||||
type: 'JSFunction',
|
||||
value: 'function() { return true; }',
|
||||
},
|
||||
dataHandler: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(res) { return res.data; }',
|
||||
},
|
||||
errorHandler: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(error) {}',
|
||||
},
|
||||
willFetch: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(options) { return options; }',
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
const mockAppHelper = {};
|
||||
const mockParser = (config: any) => parseData(config);
|
||||
const dataHelper = new DataHelper(mockHost, mockDataSourceConfig, mockAppHelper, mockParser);
|
||||
// test valid case
|
||||
let mockDataHandler = {
|
||||
type: 'JSFunction',
|
||||
value: 'function(res) { return res.data + \'+\' + this.stateA; }',
|
||||
};
|
||||
let result = dataHelper.handleData('fullConfigGet', mockDataHandler, { data: 'mockDataValue' }, null);
|
||||
expect(result).toBe('mockDataValue+aValue');
|
||||
|
||||
// test invalid datahandler
|
||||
mockDataHandler = {
|
||||
type: 'not a JSFunction',
|
||||
value: 'function(res) { return res.data + \'+\' + this.stateA; }',
|
||||
};
|
||||
result = dataHelper.handleData('fullConfigGet', mockDataHandler, { data: 'mockDataValue' }, null);
|
||||
expect(result).toStrictEqual({ data: 'mockDataValue' });
|
||||
|
||||
// exception with id
|
||||
mockDataHandler = {
|
||||
type: 'JSFunction',
|
||||
value: 'function(res) { return res.data + \'+\' + JSON.parse({a:1}); }',
|
||||
};
|
||||
result = dataHelper.handleData('fullConfigGet', mockDataHandler, { data: 'mockDataValue' }, null);
|
||||
expect(result).toBeUndefined();
|
||||
|
||||
// exception without id
|
||||
mockDataHandler = {
|
||||
type: 'JSFunction',
|
||||
value: 'function(res) { return res.data + \'+\' + JSON.parse({a:1}); }',
|
||||
};
|
||||
result = dataHelper.handleData(null, mockDataHandler, { data: 'mockDataValue' }, null);
|
||||
expect(result).toBeUndefined();
|
||||
});
|
||||
|
||||
it('updateConfig should work', () => {
|
||||
const mockHost = { stateA: 'aValue'};
|
||||
const mockDataSourceConfig = {
|
||||
list: [
|
||||
{
|
||||
id: 'ds1',
|
||||
}, {
|
||||
id: 'ds2',
|
||||
},
|
||||
{
|
||||
id: 'fullConfigGet',
|
||||
isInit: true,
|
||||
options: {
|
||||
params: {},
|
||||
method: 'GET',
|
||||
isCors: true,
|
||||
timeout: 5000,
|
||||
headers: {},
|
||||
uri: 'mock/info.json',
|
||||
},
|
||||
shouldFetch: {
|
||||
type: 'JSFunction',
|
||||
value: 'function() { return true; }',
|
||||
},
|
||||
dataHandler: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(res) { return res.data; }',
|
||||
},
|
||||
errorHandler: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(error) {}',
|
||||
},
|
||||
willFetch: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(options) { return options; }',
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
const mockAppHelper = {};
|
||||
const mockParser = (config: any) => parseData(config);
|
||||
const dataHelper = new DataHelper(mockHost, mockDataSourceConfig, mockAppHelper, mockParser);
|
||||
|
||||
expect(dataHelper.ajaxList.length).toBe(3);
|
||||
|
||||
let updatedConfig = {
|
||||
list: [
|
||||
{
|
||||
id: 'ds2',
|
||||
},
|
||||
{
|
||||
id: 'fullConfigGet',
|
||||
},
|
||||
]
|
||||
};
|
||||
dataHelper.updateConfig(updatedConfig);
|
||||
|
||||
expect(dataHelper.ajaxList.length).toBe(2);
|
||||
expect(dataHelper.dataSourceMap.ds1).toBeUndefined();
|
||||
|
||||
updatedConfig = {
|
||||
list: [
|
||||
{
|
||||
id: 'ds2',
|
||||
},
|
||||
{
|
||||
id: 'fullConfigGet',
|
||||
},
|
||||
{
|
||||
id: 'ds3',
|
||||
},
|
||||
]
|
||||
};
|
||||
dataHelper.updateConfig(updatedConfig);
|
||||
expect(dataHelper.ajaxList.length).toBe(3);
|
||||
expect(dataHelper.dataSourceMap.ds3).toBeTruthy();
|
||||
});
|
||||
|
||||
it('getInitData should work', () => {
|
||||
const mockHost = { stateA: 'aValue'};
|
||||
const mockDataSourceConfig = {
|
||||
list: [
|
||||
{
|
||||
id: 'ds1',
|
||||
}, {
|
||||
id: 'ds2',
|
||||
},
|
||||
{
|
||||
id: 'fullConfigGet',
|
||||
isInit: true,
|
||||
type: 'fetch',
|
||||
options: {
|
||||
params: {},
|
||||
method: 'GET',
|
||||
isCors: true,
|
||||
timeout: 5000,
|
||||
headers: {
|
||||
headerA: 1,
|
||||
},
|
||||
uri: 'mock/info.json',
|
||||
},
|
||||
shouldFetch: {
|
||||
type: 'JSFunction',
|
||||
value: 'function() { return true; }',
|
||||
},
|
||||
dataHandler: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(res) { return 123; }',
|
||||
},
|
||||
errorHandler: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(error) {}',
|
||||
},
|
||||
willFetch: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(options) { return options; }',
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
const mockAppHelper = {};
|
||||
const mockParser = (config: any) => parseData(config);
|
||||
const dataHelper = new DataHelper(mockHost, mockDataSourceConfig, mockAppHelper, mockParser);
|
||||
|
||||
expect(dataHelper.ajaxList.length).toBe(3);
|
||||
expect(mockGet).toBeCalledTimes(0);
|
||||
dataHelper.getInitData().then(res => {
|
||||
expect(mockGet).toBeCalledTimes(1);
|
||||
expect(mockGet).toBeCalledWith('mock/info.json', {}, {
|
||||
headerA: 1,
|
||||
}, expect.anything());
|
||||
mockGet.mockClear();
|
||||
});
|
||||
});
|
||||
|
||||
it('getDataSource should work', () => {
|
||||
const mockHost = { stateA: 'aValue'};
|
||||
const mockDataSourceConfig = {
|
||||
list: [
|
||||
{
|
||||
id: 'ds1',
|
||||
}, {
|
||||
id: 'ds2',
|
||||
},
|
||||
{
|
||||
id: 'fullConfigGet',
|
||||
isInit: true,
|
||||
type: 'fetch',
|
||||
options: {
|
||||
params: {},
|
||||
method: 'GET',
|
||||
isCors: true,
|
||||
timeout: 5000,
|
||||
headers: {
|
||||
headerA: 1,
|
||||
},
|
||||
uri: 'mock/info.json',
|
||||
},
|
||||
shouldFetch: {
|
||||
type: 'JSFunction',
|
||||
value: 'function() { return true; }',
|
||||
},
|
||||
dataHandler: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(res) { return 123; }',
|
||||
},
|
||||
errorHandler: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(error) {}',
|
||||
},
|
||||
willFetch: {
|
||||
type: 'JSFunction',
|
||||
value: 'function(options) { return options; }',
|
||||
},
|
||||
},
|
||||
]
|
||||
};
|
||||
const mockAppHelper = {};
|
||||
const mockParser = (config: any) => parseData(config);
|
||||
const dataHelper = new DataHelper(mockHost, mockDataSourceConfig, mockAppHelper, mockParser);
|
||||
|
||||
expect(dataHelper.ajaxList.length).toBe(3);
|
||||
expect(mockGet).toBeCalledTimes(0);
|
||||
const callbackFn = jest.fn();
|
||||
dataHelper.getDataSource('fullConfigGet', { param1: 'value1' }, {}, callbackFn).then(res => {
|
||||
expect(mockGet).toBeCalledTimes(1);
|
||||
expect(mockGet).toBeCalledWith('mock/info.json', { param1: 'value1' }, {
|
||||
headerA: 1,
|
||||
}, expect.anything());
|
||||
mockGet.mockClear();
|
||||
expect(callbackFn).toBeCalledTimes(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,31 +0,0 @@
|
||||
// @ts-nocheck
|
||||
import isUseLoop from '../../src/utils/is-use-loop';
|
||||
|
||||
describe('base test', () => {
|
||||
it('designMode is true', () => {
|
||||
expect(isUseLoop([], true)).toBeFalsy();
|
||||
expect(isUseLoop([{}], true)).toBeTruthy();
|
||||
expect(isUseLoop(null, true)).toBeFalsy();
|
||||
expect(isUseLoop(undefined, true)).toBeFalsy();
|
||||
expect(isUseLoop(0, true)).toBeFalsy();
|
||||
});
|
||||
|
||||
it('loop is expression', () => {
|
||||
expect(isUseLoop({
|
||||
"type": "JSExpression",
|
||||
"value": "function() { console.log('componentDidMount'); }"
|
||||
}, true)).toBeTruthy();
|
||||
expect(isUseLoop({
|
||||
"type": "JSExpression",
|
||||
"value": "function() { console.log('componentDidMount'); }"
|
||||
}, false)).toBeTruthy();
|
||||
});
|
||||
|
||||
it('designMode is false', () => {
|
||||
expect(isUseLoop([], false)).toBeTruthy();
|
||||
expect(isUseLoop([{}], false)).toBeTruthy();
|
||||
expect(isUseLoop(null, false)).toBeTruthy();
|
||||
expect(isUseLoop(undefined, false)).toBeTruthy();
|
||||
expect(isUseLoop(0, false)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,97 +0,0 @@
|
||||
import { IPublicTypePropChangeOptions } from "@ali/lowcode-designer";
|
||||
import EventEmitter from "events";
|
||||
|
||||
export default class Node {
|
||||
private emitter: EventEmitter;
|
||||
schema: any = {
|
||||
props: {},
|
||||
};
|
||||
|
||||
componentMeta = {};
|
||||
|
||||
parent;
|
||||
|
||||
hasLoop = () => this._hasLoop;
|
||||
|
||||
id;
|
||||
|
||||
_isRoot: false;
|
||||
|
||||
_hasLoop: false;
|
||||
|
||||
constructor(schema: any, info: any = {}) {
|
||||
this.emitter = new EventEmitter();
|
||||
const {
|
||||
componentMeta,
|
||||
parent,
|
||||
isRoot,
|
||||
hasLoop,
|
||||
} = info;
|
||||
this.schema = {
|
||||
props: {},
|
||||
...schema,
|
||||
};
|
||||
this.componentMeta = componentMeta || {};
|
||||
this.parent = parent;
|
||||
this.id = schema.id;
|
||||
this._isRoot = isRoot;
|
||||
this._hasLoop = hasLoop;
|
||||
}
|
||||
|
||||
isRoot = () => this._isRoot;
|
||||
|
||||
get isRootNode () {
|
||||
return this._isRoot;
|
||||
};
|
||||
|
||||
// componentMeta() {
|
||||
// return this.componentMeta;
|
||||
// }
|
||||
|
||||
// mockLoop() {
|
||||
// // this.hasLoop = true;
|
||||
// }
|
||||
|
||||
onChildrenChange(fn: any) {
|
||||
this.emitter.on('onChildrenChange', fn);
|
||||
return () => {
|
||||
this.emitter.off('onChildrenChange', fn);
|
||||
}
|
||||
}
|
||||
|
||||
emitChildrenChange() {
|
||||
this.emitter?.emit('onChildrenChange', {});
|
||||
}
|
||||
|
||||
onPropChange(fn: any) {
|
||||
this.emitter.on('onPropChange', fn);
|
||||
return () => {
|
||||
this.emitter.off('onPropChange', fn);
|
||||
}
|
||||
}
|
||||
|
||||
emitPropChange(val: IPublicTypePropChangeOptions, skip?: boolean) {
|
||||
if (!skip) {
|
||||
this.schema.props = {
|
||||
...this.schema.props,
|
||||
[val.key + '']: val.newValue,
|
||||
}
|
||||
}
|
||||
|
||||
this.emitter?.emit('onPropChange', val);
|
||||
}
|
||||
|
||||
onVisibleChange(fn: any) {
|
||||
this.emitter.on('onVisibleChange', fn);
|
||||
return () => {
|
||||
this.emitter.off('onVisibleChange', fn);
|
||||
}
|
||||
}
|
||||
|
||||
emitVisibleChange(val: boolean) {
|
||||
this.emitter?.emit('onVisibleChange', val);
|
||||
}
|
||||
export() {
|
||||
return this.schema;
|
||||
}
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
import React, { Component, PureComponent, createElement, createContext, forwardRef, ReactInstance, ContextType } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import {
|
||||
adapter,
|
||||
pageRendererFactory,
|
||||
componentRendererFactory,
|
||||
blockRendererFactory,
|
||||
addonRendererFactory,
|
||||
tempRendererFactory,
|
||||
// rendererFactory,
|
||||
// types,
|
||||
} from '../../src';
|
||||
import ConfigProvider from '@alifd/next/lib/config-provider';
|
||||
|
||||
(window as any).React = React;
|
||||
(window as any).ReactDom = ReactDOM;
|
||||
|
||||
adapter.setRuntime({
|
||||
Component,
|
||||
PureComponent,
|
||||
createContext,
|
||||
createElement,
|
||||
forwardRef,
|
||||
findDOMNode: ReactDOM.findDOMNode,
|
||||
});
|
||||
|
||||
adapter.setRenderers({
|
||||
PageRenderer: pageRendererFactory(),
|
||||
ComponentRenderer: componentRendererFactory(),
|
||||
BlockRenderer: blockRendererFactory(),
|
||||
AddonRenderer: addonRendererFactory(),
|
||||
TempRenderer: tempRendererFactory(),
|
||||
DivRenderer: blockRendererFactory(),
|
||||
});
|
||||
|
||||
adapter.setConfigProvider(ConfigProvider);
|
||||
|
||||
// function factory(): types.IRenderComponent {
|
||||
// const Renderer = rendererFactory();
|
||||
// return class ReactRenderer extends Renderer implements Component {
|
||||
// readonly props: types.IRendererProps;
|
||||
|
||||
// context: ContextType<any>;
|
||||
|
||||
// setState: (
|
||||
// state: types.IRendererState,
|
||||
// callback?: () => void,
|
||||
// ) => void;
|
||||
|
||||
// forceUpdate: (callback?: () => void) => void;
|
||||
|
||||
// refs: {
|
||||
// [key: string]: ReactInstance;
|
||||
// };
|
||||
|
||||
// constructor(props: types.IRendererProps, context: ContextType<any>) {
|
||||
// super(props, context);
|
||||
// }
|
||||
|
||||
// isValidComponent(obj: any) {
|
||||
// return obj?.prototype?.isReactComponent || obj?.prototype instanceof Component;
|
||||
// }
|
||||
// };
|
||||
// }
|
||||
|
||||
// export default factory();
|
||||
@ -1,159 +0,0 @@
|
||||
// @ts-nocheck
|
||||
const mockSerializeParams = jest.fn();
|
||||
jest.mock('../../src/utils/common', () => {
|
||||
return {
|
||||
serializeParams: (params) => {
|
||||
return mockSerializeParams(params);
|
||||
},
|
||||
};
|
||||
});
|
||||
const mockFetchJsonp = jest.fn();
|
||||
jest.mock('fetch-jsonp', () => {
|
||||
return (uri, otherProps) => {
|
||||
mockFetchJsonp(uri, otherProps);
|
||||
return Promise.resolve({
|
||||
json: () => {
|
||||
return Promise.resolve({ data: [1, 2, 3]});
|
||||
} ,
|
||||
ok: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
import { get, post, buildUrl, request, jsonp } from '../../src/utils/request';
|
||||
|
||||
|
||||
describe('test utils/request.ts ', () => {
|
||||
|
||||
it('buildUrl should be working properly', () => {
|
||||
mockSerializeParams.mockImplementation((params) => {
|
||||
return 'serializedParams=serializedParams';
|
||||
});
|
||||
expect(buildUrl('mockDataApi', { a: 1, b: 'a', c: []})).toBe('mockDataApi?serializedParams=serializedParams');
|
||||
expect(buildUrl('mockDataApi?existingParamA=valueA', { a: 1, b: 'a', c: []})).toBe('mockDataApi?existingParamA=valueA&serializedParams=serializedParams');
|
||||
mockSerializeParams.mockClear();
|
||||
|
||||
mockSerializeParams.mockImplementation((params) => {
|
||||
return undefined;
|
||||
});
|
||||
expect(buildUrl('mockDataApi', { a: 1, b: 'a', c: []})).toBe('mockDataApi');
|
||||
mockSerializeParams.mockClear();
|
||||
});
|
||||
|
||||
it('request should be working properly', () => {
|
||||
const fetchMock = jest
|
||||
.spyOn(global, 'fetch')
|
||||
.mockImplementation(() =>
|
||||
Promise.resolve({
|
||||
json: () => Promise.resolve([]) ,
|
||||
status: 200,
|
||||
})
|
||||
);
|
||||
|
||||
request('https://someradomurl/api/list', 'GET', {}, {}, {}).then((response) => {
|
||||
expect(fetchMock).toBeCalledWith('https://someradomurl/api/list', { body: {}, credentials: 'include', headers: {}, method: 'GET'});
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it('get should be working properly', () => {
|
||||
const fetchMock = jest
|
||||
.spyOn(global, 'fetch')
|
||||
.mockImplementation(() =>
|
||||
Promise.resolve({
|
||||
json: () => Promise.resolve([]) ,
|
||||
status: 200,
|
||||
})
|
||||
);
|
||||
|
||||
get('https://someradomurl/api/list', {}, {}, {}).then((response) => {
|
||||
expect(fetchMock).toBeCalledWith(
|
||||
'https://someradomurl/api/list',
|
||||
{
|
||||
body: null,
|
||||
headers: { Accept: 'application/json' },
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
});
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
it('post should be working properly', () => {
|
||||
const fetchMock = jest
|
||||
.spyOn(global, 'fetch')
|
||||
.mockImplementation(() =>
|
||||
Promise.resolve({
|
||||
json: () => Promise.resolve([]) ,
|
||||
status: 200,
|
||||
})
|
||||
);
|
||||
|
||||
post('https://someradomurl/api/list', { a: 1, b: 'a', c: [] }, { 'Content-Type': 'application/json' }, {}).then((response) => {
|
||||
expect(fetchMock).toBeCalledWith(
|
||||
'https://someradomurl/api/list',
|
||||
{
|
||||
body: '{"a":1,"b":"a","c":[]}',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
});
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
|
||||
post('https://someradomurl/api/list', [ 1, 2, 3, 4 ], {}, {}).then((response) => {
|
||||
expect(fetchMock).toBeCalledWith(
|
||||
'https://someradomurl/api/list',
|
||||
{
|
||||
body: '[1,2,3,4]',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
});
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
mockSerializeParams.mockImplementation((params) => {
|
||||
return 'serializedParams=serializedParams';
|
||||
});
|
||||
post('https://someradomurl/api/list', { a: 1, b: 'a', c: [] }, {}, {}).then((response) => {
|
||||
expect(fetchMock).toBeCalledWith(
|
||||
'https://someradomurl/api/list',
|
||||
{
|
||||
body: 'serializedParams=serializedParams',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
});
|
||||
mockSerializeParams.mockClear();
|
||||
}).catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
});
|
||||
it('jsonp should be working properly', () => {
|
||||
mockSerializeParams.mockImplementation((params) => {
|
||||
return 'params';
|
||||
});
|
||||
jsonp('https://someradomurl/api/list', {}, { otherParam1: '123'}).catch(() => {
|
||||
expect(mockFetchJsonp).toBeCalledWith('https://someradomurl/api/list?params', { timeout: 5000, otherParam1: '123' });
|
||||
mockSerializeParams.mockClear();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,8 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "lib",
|
||||
"jsx": "react"
|
||||
},
|
||||
"include": ["./src/"],
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import { useEvent } from '@alilc/renderer-core';
|
||||
|
||||
export type HistoryState = Record<string | number, any>;
|
||||
export type HistoryState = History['state'];
|
||||
export type HistoryLocation = string;
|
||||
|
||||
export enum NavigationType {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user