@pisell/materials 3.0.61 → 6.0.1

package/lowcode/data-source-table/snippets.ts

@@ -0,0 +1,90 @@
+export default [
+  {
+    title: '表格',
+    screenshot:
+      'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/table-1.png',
+    schema: {
+      componentName: 'DataSourceTable',
+      props: {
+        style: {
+          padding: '24px',
+        },
+        dataSource: [],
+        columns: [],
+        rowKey: 'id',
+        pagination: {
+          pageSize: 10,
+          total: 15,
+          current: 1,
+          localPagination: false,
+        },
+        view: {
+          defaultViewMode: 'grid',
+          multiple: false,
+        },
+        columnSetting: {
+          show: true,
+          storageMode: 'localStorage',
+        },
+        sort: {
+          show: false,
+          storageMode: 'localStorage',
+        },
+        dataSourceGroup: {
+          show: false,
+          storageMode: '',
+        },
+        filter: {
+          show: false,
+          sortButtonShow: false,
+          storageMode: '',
+          quickFilterMaxLength: 3,
+          list: [],
+        },
+        gallery: {
+          cardMinWidth: 260,
+          cardMaxWidth: 340,
+          horizontalGutter: 32,
+          verticalGutter: 32,
+          cover: {
+            show: true,
+            height: 230,
+            objectFit: 'fill',
+          },
+          title: {
+            line: 2,
+          },
+          header: {
+            fields: {
+              show: false,
+            },
+          },
+          content: {},
+          footer: {},
+        },
+        exportImport: {
+          show: false,
+          selectLists: [],
+          templateFileUrl: '',
+          title: '',
+          hiddenKeys: [],
+          otherParams: {},
+        },
+        showDeleteButton: false,
+        loading: false,
+        showHeader: true,
+        bordered: true,
+        size: 'default',
+        tableLayout: 'auto',
+        virtual: true,
+        scroll: {
+          autoCalc: false,
+          scrollToFirstRowOnChange: true,
+        },
+        dragSort: false,
+        showTitle: true,
+        showSubTitle: true,
+      },
+    },
+  },
+];

package/lowcode/data-source-table/utils.tsx

@@ -0,0 +1,484 @@
+import {
+  nocobaseCpt2PisellCptMap,
+  systemFields,
+} from '../data-source-form/constants';
+import { clearVariables, createFormItemSchema, createFormGroup } from '../data-source-form/utils';
+import {
+  getVariable,
+  getAllVariables,
+  createSubmitButton,
+  fields2ChildrenSchemas,
+} from '../data-source-form/utils';
+import { omit } from '../_utils/utils';
+
+const createRenderSchema = (field: any) => {
+  let props: Record<string, any> = {
+    mode: 'view',
+    noStyle: true,
+    value: {
+      type: 'JSExpression',
+      value: 'this.text',
+    },
+  };
+
+  let componentName = field.uiSchema['x-component'];
+
+  if (
+    field.uiSchema['x-validator'] &&
+    field.uiSchema['x-validator'] !== 'integer'
+  ) {
+    props.typeobj = {
+      type: field.uiSchema['x-validator'],
+      enabled: true,
+    };
+  }
+  if (field.uiSchema['x-component'] === 'Input.JSON') {
+    props.normalize = {
+      type: 'JSExpression',
+      value:
+        '(value) => {\n  try {\n    return JSON.parse(value);\n  } catch(error) {\n    console.log(error)\n  }\n  return value\n}',
+    };
+    props.getValueProps = {
+      type: 'JSExpression',
+      value:
+        '(value) => {\n  try {\n   return { value: value != "" && typeof value === \'object\' ? JSON.stringify(value) : value};\n  } catch(error) {\n    console.log(error)\n  }\n  return {value: value}\n}',
+    };
+    props.validator = {
+      type: 'JSExpression',
+      value:
+        "async (value) => {\n try {\n    if (typeof value === 'string' && value.trim() !== '') {\n      JSON.parse(value);\n    }\n  } catch (err) {\n    return Promise.reject(new Error(err.message));\n  }\n}",
+    };
+  }
+
+  if (
+    ['Select', 'Radio.Group', 'Checkbox.Group'].includes(
+      field.uiSchema['x-component']
+    ) &&
+    field.uiSchema?.enum?.length > 0
+  ) {
+    if (
+      ['Radio.Group', 'Checkbox.Group'].includes(field.uiSchema['x-component'])
+    ) {
+      props.direction = 'horizontal';
+    }
+    props.options = field?.uiSchema?.enum || [];
+  }
+
+  // 如果设置了x-read-pretty，则设置为只读
+  if (field.uiSchema['x-read-pretty']) {
+    props.renderMode = 'view';
+  }
+
+  if (field.uiSchema['x-component'] === 'ColorPicker') {
+    props.defaultValue = field.uiSchema.default;
+  }
+
+  return {
+    componentName: nocobaseCpt2PisellCptMap[componentName],
+    props,
+  };
+};
+
+export const fields2Columns = (fields: any[]) => {
+  if (!fields || !fields.length) return [];
+
+  return fields
+    .filter((field) => !systemFields.includes(field.name))
+    .map((field) => ({
+      title: field.uiSchema.title,
+      dataIndex: field.name,
+      key: field.name,
+      align: 'left',
+      fixed: '',
+      // render: {
+      //   type: 'JSSlot',
+      //   params: ['text', 'record', 'index'],
+      //   value: [createRenderSchema(field)],
+      //   id: 'node_ocm49b0bm71',
+      // },
+      fieldComponent: createFormItemSchema(field, 'edit').componentName === 'JsonWrapper' ? 'FormItemInput.JSON' : createFormItemSchema(field, 'edit').componentName,
+      // fieldProps
+    }));
+};
+
+export const columns2Options = (columns: any[], allFields: any[] = []) => {
+  const showFields: any[] = [];
+
+  const hiddenFields: any[] = [];
+
+  const columnsMap = columns.reduce((acc, column) => {
+    acc[column.dataIndex] = column;
+    return acc;
+  }, {});
+
+  allFields.forEach((field) => {
+    if (columnsMap[field.name]) {
+      showFields.push({
+        isGroup: false,
+        label: field.uiSchema.title,
+        value: field.name,
+        isShow: true,
+        children: [],
+      });
+    } else {
+      hiddenFields.push({
+        isGroup: false,
+        label: field.uiSchema.title,
+        value: field.name,
+        isShow: false,
+        children: [],
+      });
+    }
+  });
+
+  return [
+    {
+      isGroup: true,
+      label: '显示',
+      value: 'show',
+      isShow: true,
+      children: showFields,
+    },
+    {
+      isGroup: true,
+      label: '隐藏',
+      value: 'hidden',
+      children: hiddenFields,
+    },
+  ];
+};
+
+// 生成数据源的值的key
+export const genDataSourceValueKey = (target: any, key: string) => {
+  return `{{${target.node.id}.value.${key}}}`;
+};
+
+// 获取当前target下的所有columns的dataIndex
+export const getColumnsDataIndex = (target: any) => {
+  return target
+    .getProps()
+    .getPropValue('columns')
+    .map((column: any) => column.dataIndex);
+};
+
+// 重置表格的props
+export const resetTableProps = (target: any) => {
+  target.getProps().setPropValue('columns', []);
+  target.getProps().setPropValue('title', '');
+  target.getProps().setPropValue('operationContent', {});
+  target.getProps().setPropValue('filter', {
+    show: false,
+    sortButtonShow: false,
+    storageMode: '',
+    quickFilterMaxLength: 3,
+    list: [],
+  });
+  target.getProps().setPropValue('sort', {
+    show: false,
+    storageMode: 'localStorage',
+  });
+  target.getProps().setPropValue('search', {
+    show: false,
+    placeholder: {
+      type: 'i18n',
+      'en': 'Search',
+      'zh-CN': '搜索',
+      'zh-HK': '搜索',
+    },
+  });
+  target.getProps().setPropValue('titleButtons', {
+    show: false,
+    items: [],
+    maxCount: 3,
+  });
+  clearVariables(target);
+};
+
+export const getJsSlot = () => {
+  return {
+    type: 'JSSlot',
+    params: [],
+    value: [],
+  };
+};
+
+const toastTitleMap: Record<'add' | 'edit', any> = {
+  add: {
+    type: 'i18n',
+    en: 'Added successfully',
+    'zh-CN': '添加成功',
+    'zh-HK': '添加成功',
+  },
+  edit: {
+    type: 'i18n',
+    en: 'Updated successfully',
+    'zh-CN': '更新成功',
+    'zh-HK': '更新成功',
+  },
+}
+
+export const getFormContent = (target: any, mode: 'add' | 'edit' | 'view') => {
+  const fields = getVariable(target, 'currentFields');
+  let childrenSchemas = [createFormGroup(fields2ChildrenSchemas(fields, mode))];
+  const titleMap = {
+    add: '表单(添加)',
+    edit: '编辑',
+    view: '详情',
+  };
+  const title = titleMap[mode];
+
+  if (['add', 'edit'].includes(mode)) {
+    childrenSchemas = childrenSchemas.concat(
+      createSubmitButton({
+        afterSubmitType: 'close',
+        toastConfig: {
+          enable: true,
+          showAfterSubmit: true,
+          title: toastTitleMap[mode as 'add' | 'edit'],
+        },
+      })
+    );
+  }
+
+  // 过滤不需要继承的变量
+  const variables = omit(getAllVariables(target), [
+    'currentValueVariables',
+    'dataSourceVariables',
+  ]);
+
+  return {
+    type: 'JSSlot',
+    params: [],
+    value: [
+      {
+        componentName: 'DataSourceForm',
+        title,
+        props: {
+          _variables: variables,
+          dataSource: genDataSourceValueKey(target, 'currentDataSource'),
+          showTitle: false,
+          showDescription: false,
+          groupInfoPosition: 'top',
+          layout: 'vertical',
+          size: 'large',
+          renderMode: mode,
+          currentValue:
+            mode !== 'add'
+              ? genDataSourceValueKey(target, 'currentRecord')
+              : undefined,
+        },
+        children: childrenSchemas,
+      },
+    ],
+  };
+};
+
+// 生成默认的operation和content
+export const setDefaultOperationAndTitleButtons = (target: any) => {
+  const operation = {
+    show: true,
+    title: {
+      type: 'i18n',
+      'en': 'Operation',
+      'zh-CN': '操作',
+      'zh-HK': '操作',
+    },
+    align: 'center',
+    fixed: false,
+    type: 'link',
+    items: [
+      {
+        label: {
+          type: 'i18n',
+          'en': 'View',
+          'zh-CN': '查看',
+          'zh-HK': '查看',
+        },
+        openMode: 'drawer',
+        openContentSize: 'middle',
+        openTitle: {
+          type: 'i18n',
+          'en': 'Detail',
+          'zh-CN': '详情',
+          'zh-HK': '詳情',
+        },
+        actionType: 'view',
+        key: 'view',
+      },
+      {
+        label: {
+          type: 'i18n',
+          'en': 'Edit',
+          'zh-CN': '编辑',
+          'zh-HK': '編輯',
+        },
+        openMode: 'drawer',
+        openContentSize: 'middle',
+        openTitle: {
+          type: 'i18n',
+          'en': 'Edit',
+          'zh-CN': '编辑',
+          'zh-HK': '編輯',
+        },
+        actionType: 'edit',
+        key: 'edit',
+      },
+      {
+        label: {
+          type: 'i18n',
+          'en': 'Delete',
+          'zh-CN': '删除',
+          'zh-HK': '刪除',
+        },
+        actionType: 'delete',
+      },
+    ],
+  };
+
+  const titleButtons = {
+    show: true,
+    items: [
+      {
+        label: {
+          type: 'i18n',
+          'en': 'Add',
+          'zh-CN': '添加',
+          'zh-HK': '添加',
+        },
+        openMode: 'drawer',
+        openContentSize: 'middle',
+        openTitle: {
+          type: 'i18n',
+          'en': 'Add',
+          'zh-CN': '添加',
+          'zh-HK': '添加',
+        },
+        actionType: 'add',
+        key: 'add',
+        buttonProps: {
+          type: 'primary',
+          title: {
+            type: 'i18n',
+            'en': 'Add',
+            'zh-CN': '添加',
+            'zh-HK': '添加',
+          },
+        },
+      },
+    ],
+    maxCount: 3,
+  };
+
+  target.getProps().setPropValue('titleButtons', titleButtons);
+  target.getProps().setPropValue('operation', operation);
+
+  const operationContent = {
+    view: getFormContent(target, 'view'),
+    edit: getFormContent(target, 'edit'),
+    add: getFormContent(target, 'add'),
+  };
+
+  target.getProps().setPropValue('operationContent', operationContent);
+};
+
+// 默认显示的filter组件
+const defaultShowFilterComponent = [
+  'Select',
+  'DatePicker',
+  'Checkbox',
+  'Radio.Group',
+  'Checkbox.Group',
+]
+
+// 选择数据源后 生成默认的filter
+export const setDefaultSearchFilter = (target: any, fields: any[]) => {
+  const filterFields = fields
+    .filter(
+      (field) => !systemFields.includes(field.name) && field.type !== 'json'
+    )
+    .map((field) => {
+      return {
+        name: field.name,
+        isCustom: false,
+        label: field.uiSchema.title,
+        value: field.name,
+        isHidden: defaultShowFilterComponent.includes(field.uiSchema['x-component']) ? false : true,
+      };
+    });
+
+  target.getProps().setPropValue('search', {
+    show: true,
+    placeholder: {
+      type: 'i18n',
+      'en': 'Search',
+      'zh-CN': '搜索',
+      'zh-HK': '搜索',
+    },
+  });
+
+  target.getProps().setPropValue('filter', {
+    show: true,
+    storageMode: 'localStorage',
+    mode: 'simple',
+    quickFilterMaxLength: 3,
+    items: filterFields,
+  });
+};
+
+const sortTypeMap: Record<string, string> = {
+  float: 'number',
+  bigInt: 'number',
+};
+
+// 生成默认的排序
+export const setDefaultSort = (target: any, fields: any[]) => {
+  target.getProps().setPropValue('sort', {
+    show: true,
+    type: 'simple',
+    storageMode: 'localStorage',
+    list: fields
+      .filter(
+        (field) =>
+          !systemFields.includes(field.name) &&
+          ['string', 'number', 'date', 'bigInt', 'float'].includes(field.type)
+      )
+      .map((field) => ({
+        label: field.uiSchema.title,
+        type: sortTypeMap[field.type] || field.type,
+        name: field.name,
+        isHidden: false,
+        localFilter: false,
+      })),
+  });
+};
+
+// 根据当前fields格式化 filter筛选字段的select options
+export const fields2TableFilterOptions = (
+  fields: any[],
+  useFields: string[]
+) => {
+  if (!fields || !fields.length) return [];
+
+  return fields
+    .filter((field) => !systemFields.includes(field.name))
+    .map((field) => ({
+      title: field.uiSchema.title,
+      value: field.name,
+      disabled: useFields.includes(field.name),
+    }));
+};
+
+export const filterTypes = [
+  {
+    label: '输入框',
+    value: 'Input',
+  },
+  {
+    label: '日期范围选择',
+    value: 'DateRangePicker',
+  },
+  {
+    label: '下拉选择',
+    value: 'Select',
+  },
+];

package/lowcode/data-source-typography/meta.ts

@@ -0,0 +1,54 @@
+
+const DataSourceTypographyMeta = {
+  "componentName": "DataSourceTypography",
+  "title": "DataSourceTypography",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@pisell/materials",
+    "version": "3.0.55",
+    "exportName": "DataSourceTypography",
+    "main": "src/index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    "props": [
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "dataSourceKey",
+            "zh-CN": "dataSourceKey"
+          }
+        },
+        "name": "dataSourceKey",
+        "setter": {
+          "componentName": "StringSetter",
+          "isRequired": true,
+          "initialValue": ""
+        }
+      }
+    ],
+    "supports": {
+      "style": true
+    },
+    "component": {}
+  }
+};
+const snippets = [
+  {
+    "title": "DataSourceTypography",
+    "screenshot": "",
+    "schema": {
+      "componentName": "DataSourceTypography",
+      "props": {}
+    }
+  }
+];
+
+export default {
+  ...DataSourceTypographyMeta,
+  snippets
+};