@teamix/pro 1.0.25 → 1.1.0

package/lib/nocode/configurators/common.js

@@ -0,0 +1,325 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.actions = actions;
+exports.array = array;
+exports.filter = filter;
+
+function array(title, name, fields, main, arrayTitle) {
+  return {
+    title: title,
+    children: [{
+      name: name,
+      title: arrayTitle,
+      component: 'ArrayItems',
+      props: {
+        itemType: 'card'
+      },
+      items: [{
+        component: 'FormFlex',
+        children: [{
+          component: 'ArrayItems.SortHandle'
+        }, {
+          component: 'ArrayItems.Index'
+        }]
+      }, {
+        name: 'drawer',
+        component: 'Editable.Drawer',
+        type: 'void',
+        title: '编辑详情',
+        reactions: {
+          dependencies: [".drawer.layout.".concat(main ? main : fields[0].name)],
+          fulfill: {
+            schema: {
+              title: '{{$deps[0]}}'
+            }
+          }
+        },
+        children: [{
+          name: 'layout',
+          component: 'FormLayout',
+          props: {
+            layout: 'vertical',
+            labelAlign: 'left',
+            colon: false,
+            labelCol: 24,
+            wrapperCol: 24
+          },
+          children: fields
+        }]
+      }, {
+        component: 'ArrayItems.Remove'
+      }],
+      children: [{
+        title: '添加一条'
+      }]
+    }]
+  };
+}
+
+function actions(props) {
+  var _ref = props || {},
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '操作项' : _ref$title,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? 'actions' : _ref$name,
+      arrayTitle = _ref.arrayTitle;
+
+  return array(title, name, [{
+    name: 'children',
+    title: '文字',
+    component: 'Input',
+    default: '操作'
+  }, {
+    name: 'icon',
+    title: '图标',
+    component: 'IconPicker',
+    props: {
+      width: '100%'
+    }
+  }, {
+    name: 'type',
+    title: '按钮类型',
+    component: 'Select',
+    dataSource: [{
+      label: '普通',
+      value: 'normal'
+    }, {
+      label: '次要',
+      value: 'secondary'
+    }, {
+      label: '主要',
+      value: 'primary'
+    }]
+  }, {
+    name: 'config',
+    type: 'object',
+    children: [{
+      name: 'type',
+      title: '操作类型',
+      component: 'Select',
+      dataSource: [{
+        label: '数据请求',
+        value: 'request'
+      }, {
+        label: '跳转链接',
+        value: 'link'
+      }, {
+        label: '二次确认',
+        value: 'confirm'
+      }, {
+        label: '弹窗表单',
+        value: 'dialog-form'
+      }, {
+        label: '弹窗表格',
+        value: 'dialog-table'
+      }, {
+        label: '抽屉表单',
+        value: 'drawer-form'
+      }, {
+        label: '抽屉表格',
+        value: 'drawer-table'
+      }],
+      default: 'request'
+    }, {
+      name: 'to',
+      title: '链接地址',
+      component: 'Input',
+      reactions: {
+        dependencies: ['.type'],
+        fulfill: {
+          state: {
+            visible: "{{$deps[0] === 'link'}}"
+          }
+        }
+      }
+    }, {
+      name: 'blank',
+      title: '打开新页面',
+      component: 'Switch',
+      reactions: {
+        dependencies: ['.type'],
+        fulfill: {
+          state: {
+            visible: "{{$deps[0] === 'link'}}"
+          }
+        }
+      }
+    }, {
+      name: 'title',
+      title: '标题',
+      component: 'Input',
+      reactions: {
+        dependencies: ['.type'],
+        fulfill: {
+          state: {
+            visible: "{{$deps[0] !== 'link' && $deps[0] !== 'request'}}"
+          }
+        }
+      }
+    }, {
+      name: 'content',
+      title: '确认内容',
+      component: 'Input',
+      reactions: {
+        dependencies: ['.type'],
+        fulfill: {
+          state: {
+            visible: "{{$deps[0] === 'confirm'}}"
+          }
+        }
+      }
+    }, {
+      name: 'url',
+      title: '请求地址',
+      component: 'Input',
+      reactions: {
+        dependencies: ['.type'],
+        fulfill: {
+          state: {
+            visible: "{{$deps[0] !== 'link'}}"
+          }
+        }
+      }
+    }, {
+      name: 'method',
+      title: '请求方式',
+      component: 'Radio',
+      dataSource: [{
+        label: 'get',
+        value: 'get'
+      }, {
+        label: 'post',
+        value: 'post'
+      }],
+      reactions: {
+        dependencies: ['.type'],
+        fulfill: {
+          state: {
+            visible: "{{$deps[0] !== 'link'}}"
+          }
+        }
+      }
+    }, {
+      name: 'params',
+      title: '请求参数',
+      component: 'JsonInput',
+      reactions: {
+        dependencies: ['.type'],
+        fulfill: {
+          state: {
+            visible: "{{$deps[0] !== 'link'}}"
+          }
+        }
+      }
+    }, {
+      name: 'initialValues',
+      title: '表单初始值',
+      component: 'Input',
+      reactions: {
+        dependencies: ['.type'],
+        fulfill: {
+          state: {
+            visible: "{{$deps[0] === 'dialog-form' || $deps[0] === 'drawer-form'}}"
+          }
+        }
+      }
+    }, {
+      name: 'schema',
+      title: 'Schema',
+      component: 'JsonInput',
+      reactions: {
+        dependencies: ['.type'],
+        fulfill: {
+          state: {
+            visible: "{{$deps[0] !== 'link' && $deps[0] !== 'request' && $deps[0] !== 'confirm'}}"
+          }
+        }
+      }
+    }, {
+      name: 'successMsg',
+      title: '请求成功提示',
+      component: 'Input',
+      reactions: {
+        dependencies: ['.type'],
+        fulfill: {
+          state: {
+            visible: "{{$deps[0] !== 'link'}}"
+          }
+        }
+      }
+    }, {
+      name: 'onSuccess',
+      title: '请求成功回调',
+      component: 'Input',
+      reactions: {
+        dependencies: ['.type'],
+        fulfill: {
+          state: {
+            visible: "{{$deps[0] !== 'link'}}"
+          }
+        }
+      }
+    }]
+  }, {
+    name: 'visible',
+    title: '是否可见',
+    component: 'Input'
+  }, {
+    name: 'disabled',
+    title: '是否禁用',
+    component: 'Input'
+  }], 'children', arrayTitle);
+}
+
+function filter(name) {
+  return {
+    name: name,
+    type: 'object',
+    children: [array('表单项', 'schema', [{
+      name: 'name',
+      title: 'ID',
+      component: 'Input',
+      required: true
+    }, {
+      name: 'title',
+      title: '标题',
+      component: 'Input'
+    }, {
+      name: 'component',
+      title: '组件类型',
+      component: 'Select',
+      dataSource: [{
+        label: 'Input',
+        value: 'Input'
+      }, {
+        label: 'Select',
+        value: 'Select'
+      }]
+    }, array('数据源', 'dataSource', [{
+      name: 'value',
+      title: '值',
+      component: 'Input',
+      required: true
+    }, {
+      name: 'label',
+      title: '文案',
+      component: 'Input',
+      required: true
+    }, {
+      name: 'color',
+      title: '颜色',
+      component: 'ColorPicker'
+    }], undefined, '数据源'), {
+      name: 'required',
+      title: '是否必填',
+      component: 'Switch'
+    }, {
+      name: 'props',
+      title: '属性',
+      component: 'JsonInput'
+    }])]
+  };
+}

package/lib/nocode/configurators/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare type ConfiguratorSchema = any[];
+export interface Configurator<T = any> {
+    schema: ConfiguratorSchema;
+    initialValues?: T;
+    defaultValues?: T;
+}
+export declare type ConfiguratorMap = {
+    [key: string]: Configurator;
+};
+export interface ConfiguratorProps<T = any> {
+    initialValues?: T;
+    onValuesChange?: (values: T) => void;
+}
+export declare const initConfigurator: <T>(schema: ConfiguratorSchema, defaultInitialValues?: T, defaultValues?: T) => React.FC<ConfiguratorProps<T>>;

package/lib/nocode/configurators/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.initConfigurator = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _form = _interopRequireWildcard(require("../../form"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var initConfigurator = function initConfigurator(schema, defaultInitialValues, defaultValues) {
+  return function (props) {
+    var initialValues = props.initialValues,
+        onValuesChange = props.onValuesChange;
+    var form = (0, _react.useMemo)(function () {
+      return (0, _form.createForm)({
+        initialValues: Object.assign({}, defaultValues, initialValues || defaultInitialValues)
+      });
+    }, []);
+
+    var onChange = function onChange(values) {
+      onValuesChange && onValuesChange(values);
+    };
+
+    return /*#__PURE__*/_react.default.createElement(_form.default, {
+      labelCol: 6,
+      wrapperCol: 18,
+      labelAlign: "left",
+      colon: false,
+      form: form,
+      schema: schema,
+      onChange: onChange
+    });
+  };
+};
+
+exports.initConfigurator = initConfigurator;

package/lib/nocode/configurators/map.d.ts

@@ -0,0 +1,2 @@
+import { ConfiguratorMap } from '.';
+export declare const ComponentConfiguratorMap: ConfiguratorMap;

package/lib/nocode/configurators/map.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComponentConfiguratorMap = void 0;
+
+var _Card = _interopRequireDefault(require("./Card"));
+
+var _PageHeader = _interopRequireDefault(require("./PageHeader"));
+
+var _ProTable = _interopRequireDefault(require("./ProTable"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ComponentConfiguratorMap = {
+  Card: _Card.default,
+  PageHeader: _PageHeader.default,
+  ProTable: _ProTable.default
+};
+exports.ComponentConfiguratorMap = ComponentConfiguratorMap;

package/lib/nocode/index.d.ts

@@ -0,0 +1,8 @@
+import './index.scss';
+import PageContainer from '../page-container';
+export { PageContainer };
+export type { PageProps } from '../page-container';
+export * from './configurators';
+export * from './configurators/map';
+export * from './pages';
+export * from './playground';

package/lib/nocode/index.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  PageContainer: true
+};
+Object.defineProperty(exports, "PageContainer", {
+  enumerable: true,
+  get: function get() {
+    return _pageContainer.default;
+  }
+});
+
+require("./index.scss");
+
+var _pageContainer = _interopRequireDefault(require("../page-container"));
+
+var _configurators = require("./configurators");
+
+Object.keys(_configurators).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _configurators[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _configurators[key];
+    }
+  });
+});
+
+var _map = require("./configurators/map");
+
+Object.keys(_map).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _map[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _map[key];
+    }
+  });
+});
+
+var _pages = require("./pages");
+
+Object.keys(_pages).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _pages[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _pages[key];
+    }
+  });
+});
+
+var _playground = require("./playground");
+
+Object.keys(_playground).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _playground[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _playground[key];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/nocode/index.scss

@@ -0,0 +1,93 @@
+.teamix-nocode {
+  &-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+
+    p {
+      color: var(--color-text1-8, #848484);
+    }
+  }
+
+  &-playground {
+    display: flex;
+    position: relative;
+    border: 1px solid var(--color-line1-1, #eaeaea);
+
+    &-component {
+      padding: 20px;
+      flex-grow: 1;
+      border-right: 1px solid var(--color-line1-1, #eaeaea);
+
+      &>.teamix-pro-page-container {
+        padding: 0;
+      }
+    }
+
+    &-configurator {
+      padding: 0;
+      flex-shrink: 0;
+      width: 360px;
+      overflow: auto;
+
+      --tab-item-margin-lr-size-m: 8px;
+
+      ul.next-tabs-nav {
+        padding: 0 16px;
+        --tab-item-text-size-m: 13px;
+      }
+
+      .next-collapse-panel-content {
+        padding: 16px 16px 0 !important;
+      }
+
+      .next-table-empty {
+        padding: 8px 0;
+      }
+
+      & > .next-formily-layout {
+        height: 100%;
+        & > form {
+          height: 100%;
+          & > .next-tabs {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            & > .next-tabs-bar {
+              flex-shrink: 0;
+            }
+            & > .next-tabs-content {
+              flex-grow: 1;
+              overflow: auto;
+            }
+          }
+        }
+      }
+
+      .teamix-pro-field-icon {
+        button {
+          width: 100%;
+        }
+      }
+    }
+
+    &-tools {
+      position: absolute;
+      right: 20px;
+      bottom: 20px;
+
+      &>i {
+        cursor: pointer;
+        color: var(--color-text1-8, #848484);
+        background-color: rgba(0, 0, 0, 0.06);
+        padding: 8px;
+        border-radius: 4px;
+        &:hover {
+          color: var(--color-text1-3, #333333);
+        }
+      }
+    }
+  }
+}

package/lib/nocode/pages/editor.d.ts

@@ -0,0 +1,12 @@
+import { Field } from '@alicloudfe/components';
+import { ConfiguratorMap } from '../configurators';
+import { PageMap, PageType, PageDefaultInitialValues } from '.';
+export interface PageEditorProps {
+    type: PageType;
+    initialValues?: any;
+    field?: Field;
+    configuratorMap?: ConfiguratorMap;
+    pageMap?: PageMap;
+    pageDefaultInitialValues?: PageDefaultInitialValues;
+}
+export declare const PageEditor: (props: PageEditorProps) => JSX.Element;

package/lib/nocode/pages/editor.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PageEditor = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _svg = _interopRequireDefault(require("@teamix/svg"));
+
+var _utils = require("@teamix/utils");
+
+var _playground = require("./playground");
+
+var _ = require(".");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var cls = (0, _utils.baseClass)('teamix-pro-pager');
+
+var PageEditor = function PageEditor(props) {
+  var type = props.type,
+      initialValues = props.initialValues,
+      field = props.field,
+      configuratorMap = props.configuratorMap,
+      pageMap = props.pageMap,
+      pageDefaultInitialValues = props.pageDefaultInitialValues;
+  var values = initialValues || _.PageDefaultInitialValues[type] || (pageDefaultInitialValues === null || pageDefaultInitialValues === void 0 ? void 0 : pageDefaultInitialValues[type]);
+
+  _react.default.useEffect(function () {
+    field && field.setValues(values);
+  }, []);
+
+  var onValuesChange = function onValuesChange(values) {
+    field && field.setValues(values);
+  };
+
+  var Page = _.PageMap[type] || (pageMap === null || pageMap === void 0 ? void 0 : pageMap[type]);
+
+  if (!Page) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: cls('empty')
+    }, /*#__PURE__*/_react.default.createElement(_svg.default.Status404, {
+      width: 160,
+      height: 160
+    }), /*#__PURE__*/_react.default.createElement("p", null, "\u9519\u8BEF\u7684\u9875\u9762\u7C7B\u578B"));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_playground.PagePlayground, {
+    page: Page,
+    initialValues: values,
+    onValuesChange: onValuesChange,
+    configuratorMap: configuratorMap
+  });
+};
+
+exports.PageEditor = PageEditor;

package/lib/nocode/pages/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { PageProps } from '../../page-container';
+export * from './editor';
+export * from './playground';
+export * from './renderer';
+export declare type PageType = 'LIST' | 'DETAIL' | 'FORM' | string;
+export declare type PageMap = {
+    [key in PageType]: React.FC<PageProps>;
+};
+export declare const PageMap: PageMap;
+export declare type PageDefaultInitialValues = {
+    [key in PageType]: any;
+};
+export declare const PageDefaultInitialValues: PageDefaultInitialValues;