@teamix/pro 1.0.22 → 1.1.0

package/es/nocode/configurators/common.js

@@ -0,0 +1,314 @@
+export 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: '添加一条'
+      }]
+    }]
+  };
+}
+export 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);
+}
+export 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/es/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/es/nocode/configurators/index.js

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react';
+import ProForm, { createForm } from '../../form';
+export var initConfigurator = function initConfigurator(schema, defaultInitialValues, defaultValues) {
+  return function (props) {
+    var initialValues = props.initialValues,
+        onValuesChange = props.onValuesChange;
+    var form = useMemo(function () {
+      return createForm({
+        initialValues: Object.assign({}, defaultValues, initialValues || defaultInitialValues)
+      });
+    }, []);
+
+    var onChange = function onChange(values) {
+      onValuesChange && onValuesChange(values);
+    };
+
+    return /*#__PURE__*/React.createElement(ProForm, {
+      labelCol: 6,
+      wrapperCol: 18,
+      labelAlign: "left",
+      colon: false,
+      form: form,
+      schema: schema,
+      onChange: onChange
+    });
+  };
+};

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

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

package/es/nocode/configurators/map.js

@@ -0,0 +1,8 @@
+import Card from './Card';
+import PageHeader from './PageHeader';
+import ProTable from './ProTable';
+export var ComponentConfiguratorMap = {
+  Card: Card,
+  PageHeader: PageHeader,
+  ProTable: ProTable
+};

package/es/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/es/nocode/index.js

@@ -0,0 +1,11 @@
+import './index.scss';
+import PageContainer from '../page-container';
+export { PageContainer }; // 配置器，每个 pro 组件对应一个配置器
+
+export * from './configurators';
+export * from './configurators/map'; // 页面编辑器
+// 页面渲染器
+
+export * from './pages'; // 提供组件和页面编辑的页面布局
+
+export * from './playground';

package/es/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/es/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/es/nocode/pages/editor.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import SVG from '@teamix/svg';
+import { baseClass } from '@teamix/utils';
+import { PagePlayground } from './playground';
+import { PageMap, PageDefaultInitialValues } from '.';
+var cls = baseClass('teamix-pro-pager');
+export 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.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.createElement("div", {
+      className: cls('empty')
+    }, /*#__PURE__*/React.createElement(SVG.Status404, {
+      width: 160,
+      height: 160
+    }), /*#__PURE__*/React.createElement("p", null, "\u9519\u8BEF\u7684\u9875\u9762\u7C7B\u578B"));
+  }
+
+  return /*#__PURE__*/React.createElement(PagePlayground, {
+    page: Page,
+    initialValues: values,
+    onValuesChange: onValuesChange,
+    configuratorMap: configuratorMap
+  });
+};

package/es/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;

package/es/nocode/pages/index.js

@@ -0,0 +1,41 @@
+import { FormPage, DetailPage, ListPage } from '../../templates';
+export * from './editor';
+export * from './playground';
+export * from './renderer'; // 全部页面模板
+
+export var PageMap = {
+  LIST: ListPage,
+  DETAIL: DetailPage,
+  FORM: FormPage
+}; // 全部页面模板默认初始值
+
+export var PageDefaultInitialValues = {
+  LIST: {
+    header: {
+      title: '页面标题'
+    },
+    content: {
+      header: {
+        title: '表格标题'
+      },
+      columns: [{
+        dataIndex: 'instanceName',
+        title: '实例ID/实例名称'
+      }, {
+        dataIndex: 'organizationName',
+        title: '组织',
+        tooltip: '我这一列是可以被复制的～',
+        render: {
+          copy: true
+        }
+      }],
+      url: 'https://oneapi.alibaba-inc.com/mock/teamix-pro/api/getTableResource',
+      formatResult: {
+        data: 'data',
+        total: 'pageInfo.total'
+      }
+    }
+  },
+  DETAIL: {},
+  FORM: {}
+};

package/es/nocode/pages/playground.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PageProps } from '../../page-container';
+import { ConfiguratorMap } from '../configurators';
+interface PagePlayGroundProps<T = any> {
+    initialValues: T;
+    page: React.FC<PageProps<T>>;
+    onValuesChange?: (values: any) => void;
+    configuratorMap?: ConfiguratorMap;
+}
+export declare const PagePlayground: (props: PagePlayGroundProps) => JSX.Element;
+export {};