@pisell/materials 1.0.1 → 1.0.2

package/lowcode/upload/meta.ts

@@ -0,0 +1,439 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'Upload',
+  title: '上传',
+  category: '表单',
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "Upload",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      title: '基本',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'defaultFileList',
+          title: {
+            label: '默认上传文件',
+            tip: 'defaultFileList | 默认已经上传的文件列表',
+          },
+          propType: { type: 'arrayOf', value: 'object' },
+          setter: {
+            componentName: 'ArraySetter',
+            props: {
+              itemSetter: {
+                componentName: 'ObjectSetter',
+                props: {
+                  config: {
+                    items: [
+                      {
+                        name: 'name',
+                        title: '文件名',
+                        setter: 'StringSetter',
+                      },
+                      {
+                        name: 'status',
+                        title: '状态',
+                        setter: {
+                          componentName: 'SelectSetter',
+                          props: {
+                            options: [
+                              'error',
+                              'success',
+                              'done',
+                              'uploading',
+                              'removed',
+                            ].map((v) => ({ label: v, value: v })),
+                          },
+                        },
+                      },
+                      {
+                        name: 'url',
+                        title: '下载地址',
+                        setter: 'StringSetter',
+                      },
+                      {
+                        name: 'url',
+                        title: '下载地址',
+                        setter: 'StringSetter',
+                      },
+                      {
+                        name: 'response',
+                        title: '错误信息',
+                        setter: 'StringSetter',
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          },
+        },
+        {
+          name: 'fileList',
+          title: {
+            label: '当前上传文件',
+            tip: 'fileList | 当前上传的文件列表（受控）',
+          },
+          propType: { type: 'arrayOf', value: 'object' },
+          setter: {
+            componentName: 'ArraySetter',
+            props: {
+              itemSetter: {
+                componentName: 'ObjectSetter',
+                props: {
+                  config: {
+                    items: [
+                      {
+                        name: 'name',
+                        title: '文件名',
+                        setter: 'StringSetter',
+                      },
+                      {
+                        name: 'status',
+                        title: '状态',
+                        setter: {
+                          componentName: 'SelectSetter',
+                          props: {
+                            options: [
+                              'error',
+                              'success',
+                              'done',
+                              'uploading',
+                              'removed',
+                            ].map((v) => ({ label: v, value: v })),
+                          },
+                        },
+                      },
+                      {
+                        name: 'url',
+                        title: '下载地址',
+                        setter: 'StringSetter',
+                      },
+                      {
+                        name: 'url',
+                        title: '下载地址',
+                        setter: 'StringSetter',
+                      },
+                      {
+                        name: 'response',
+                        title: '错误信息',
+                        setter: 'StringSetter',
+                      },
+                    ],
+                  },
+                },
+              },
+            },
+          },
+        },
+        {
+          name: 'multiple',
+          title: {
+            label: '支持多选文件',
+            tip: 'multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件',
+          },
+          propType: 'bool',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'maxCount',
+          title: {
+            label: '上传数量限制',
+            tip: 'maxCount | 限制上传数量。当为 1 时，始终用最新上传的文件代替当前文件',
+          },
+          propType: 'number',
+          setter: 'NumberSetter',
+        },
+        {
+          name: 'accept',
+          title: {
+            label: '上传文件类型',
+            tip: 'accept | 接受上传的文件类型, 例如 .doc,.docx,application/msword',
+          },
+          propType: 'string',
+          setter: 'StringSetter',
+        },
+        {
+          name: 'directory',
+          title: {
+            label: '文件夹上传',
+            tip: 'directory | 支持上传文件夹',
+          },
+          propType: 'bool',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'disabled',
+          title: { label: '是否禁用', tip: 'disabled | 是否为禁用状态' },
+          propType: 'bool',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+      ],
+    },
+    {
+      title: '高级',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'openFileDialogOnClick',
+          title: {
+            label: '打开文件对话框',
+            tip: 'openFileDialogOnClick | 点击打开文件对话框',
+          },
+          propType: 'bool',
+          defaultValue: true,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'showUploadList',
+          title: {
+            label: '显示上传列表',
+            tip: 'showUploadList | 是否显示上传的文件列表,',
+          },
+          propType: 'bool',
+          defaultValue: true,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'listType',
+          title: {
+            label: '上传列表样式',
+            tip:
+              'listType | 上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card`',
+          },
+          propType: {
+            type: 'oneOf',
+            value: ['text', 'picture', 'picture-card'],
+          },
+          defaultValue: 'text',
+          setter: [
+            {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  {
+                    title: '文本',
+                    value: 'text',
+                  },
+                  {
+                    title: '图片',
+                    value: 'picture',
+                  },
+                  {
+                    title: '图片卡片',
+                    value: 'picture-card',
+                  },
+                ],
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'iconRender',
+          title: { label: '自定义图标', tip: 'iconRender | 自定义显示 icon' },
+          propType: 'func',
+          setter: {
+            componentName: 'SlotSetter',
+            title: '自定义图标插槽',
+            initialValue: {
+              type: 'JSSlot',
+              params: ['file', 'listType'],
+              value: [],
+            },
+          },
+        },
+        {
+          name: 'itemRender',
+          title: {
+            label: '自定义列表项',
+            tip: 'itemRender | 自定义上传列表项',
+          },
+          propType: 'func',
+          setter: {
+            componentName: 'SlotSetter',
+            title: '自定义列表项插槽',
+            initialValue: {
+              type: 'JSSlot',
+              params: ['originNode', 'file', 'fileList', 'actions'],
+              value: [],
+            },
+          },
+        },
+        {
+          name: 'progress',
+          title: { label: '自定义进度条', tip: 'progress | 自定义进度条样式' },
+          propType: 'object',
+          setter: 'JsonSetter',
+        },
+      ],
+    },
+    {
+      title: '上传参数',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'action',
+          title: { label: '上传地址', tip: 'action | 上传的地址或方法' },
+          propType: { type: 'oneOfType', value: ['string', 'func'] },
+          setter: ['StringSetter', 'FunctionSetter', 'VariableSetter'],
+        },
+        {
+          name: 'name',
+          title: { label: '文件参数名', tip: 'name | 发到后台的文件参数名' },
+          propType: 'string',
+          setter: 'StringSetter',
+        },
+        {
+          name: 'method',
+          title: {
+            label: '请求Method',
+            tip: 'method | 上传请求的 http method',
+          },
+          propType: {
+            type: 'oneOf',
+            value: ['get', 'post', 'put', 'head', 'options', 'patch', 'delete'],
+          },
+          defaultValue: 'post',
+          setter: 'StringSetter',
+        },
+        {
+          name: 'headers',
+          title: {
+            label: '上传请求头',
+            tip: 'headers | 设置上传的请求头部，IE10 以上有效',
+          },
+          propType: 'object',
+          setter: 'JsonSetter',
+        },
+        {
+          name: 'withCredentials',
+          title: {
+            label: '携带Cookie',
+            tip: 'withCredentials | 上传请求时是否携带 cookie',
+          },
+          propType: 'bool',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'data',
+          title: {
+            label: '额外参数',
+            tip: 'data | 上传所需额外参数或返回上传额外参数的方法',
+          },
+          propType: { type: 'oneOfType', value: ['object', 'func'] },
+          setter: [
+            'JsonSetter',
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template: 'onData(file,${extParams}){\n// 上传所需额外参数\nreturn {};\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+      ],
+    },
+    {
+      title: '回调函数',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'beforeUpload',
+          title: {
+            label: '上传前回调',
+            tip: 'beforeUpload | 上传文件之前的回调函数',
+          },
+          propType: 'func',
+          setter: {
+            componentName: 'FunctionSetter',
+            props: {
+              template:
+                'beforeUpload(file,fileList,${extParams}){\n// 上传文件之前的钩子\nreturn false;\n}',
+            },
+          },
+        },
+        {
+          name: 'customRequest',
+          title: {
+            label: '自定义上传',
+            tip: 'customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现',
+          },
+          propType: 'func',
+          setter: 'FunctionSetter',
+        },
+        {
+          name: 'isImageUrl',
+          title: {
+            label: '是否为图片',
+            tip: 'isImageUrl | 自定义缩略图是否使用 <img /> 标签进行显示',
+          },
+          propType: 'func',
+          setter: {
+            componentName: 'FunctionSetter',
+            props: {
+              template: 'isImageUrl(file,${extParams}){\n// 判断是否为图片\nreturn true;\n}',
+            },
+          },
+        },
+        {
+          name: 'previewFile',
+          title: {
+            label: '自定义文件预览',
+            tip: 'previewFile | 自定义文件预览逻辑',
+          },
+          propType: 'func',
+          setter: 'FunctionSetter',
+        },
+      ],
+    },
+  ],
+  configure: {
+    component: { isContainer: true },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange({file,fileList,event},${extParams}){\n// 上传文件改变时的回调\nconsole.log('onChange',file,fileList,event);}",
+        },
+        {
+          name: 'onPreview',
+          template:
+            "onPreview(file,${extParams}){\n// 点击文件链接或预览图标时的回调\nconsole.log('onPreview',file);}",
+        },
+        {
+          name: 'onRemove',
+          template:
+            "onRemove(file,${extParams}){\n// 点击移除文件时的回调\nconsole.log('onRemove',file);}",
+        },
+        {
+          name: 'onDownload',
+          template:
+            "onDownload(file,${extParams}){\n// 点击下载文件时的回调\nconsole.log('onDownload',file);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/upload/snippets.ts

@@ -0,0 +1,16 @@
+export default [
+  {
+    title: '上传',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/upload-1.png',
+    schema: {
+      componentName: 'Upload',
+      props: {},
+      children: {
+        componentName: 'Button',
+        props: {
+          children: 'Upload',
+        },
+      },
+    },
+  },
+];

package/package.json

@@ -1,14 +1,40 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "devDependencies": {
-    "father": "^4.1.6"
+    "father": "^4.1.6",
+    "lodash": "^4.17.21",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@alib/build-scripts": "^0.1.32",
+    "@pisell/build-plugin-lowcode": "^1.0.3",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@alilc/lowcode-utils": "1.1.6",
+    "style-loader": "2.0.0",
+    "sass-loader": "7.3.1",
+    "@alilc/lowcode-react-renderer": "^1.1.7",
+    "@alilc/lowcode-types": "1.1.7"
   },
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "antd": "^5.6.3",
+    "@ant-design/icons": "^5.1.4",
+    "dayjs": "^1.11.8"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "componentConfig": {
+    "materialSchema": "https://unpkg.com/@pisell/materials@1.0.1/build/lowcode/assets-prod.json"
+  },
   "scripts": {
     "build": "father build",
-    "dev": "father dev"
+    "dev": "father dev",
+    "lowcode:build": "build-scripts build --config ./build.lowcode.js",
+    "lowcode:dev": "build-scripts start --config ./build.lowcode.js"
   }
 }

package/src/components/auto-complete/index.tsx

@@ -0,0 +1,6 @@
+import { AutoComplete as OriginalAutoComplete } from 'antd';
+import { withWrap } from '../../utils/hoc';
+
+const AutoComplete = withWrap(OriginalAutoComplete);
+
+export default AutoComplete;

package/src/components/button/index.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef, Ref } from 'react';
+import { Button as OriginalButton } from 'antd';
+
+const Button: any = (props: any, ref: Ref<any>) => {
+  const innerProps: any = {};
+  if (!props.href?.trim() || props.__designMode === 'design') {
+    // 解决低代码编辑器中按钮设置href属性造成按钮点击重定向问题
+    innerProps.href = undefined;
+  }
+  return <OriginalButton {...props} {...innerProps} ref={ref} />;
+};
+export default forwardRef(Button);

package/src/components/calendar/index.tsx

@@ -0,0 +1,10 @@
+import { Calendar as OriginalCalendar } from 'antd';
+import { withMomentProps } from '../../utils/hoc';
+
+const Calendar = withMomentProps(OriginalCalendar, [
+  'defaultValue',
+  'validRange',
+  'value.defaultValue',
+]);
+
+export default Calendar;

package/src/components/cascader/index.tsx

@@ -0,0 +1,6 @@
+import { Cascader as OriginalCascader } from 'antd';
+import { withWrap } from '../../utils/hoc';
+
+const Cascader = withWrap(OriginalCascader);
+
+export default Cascader;

package/src/components/checkbox/index.tsx

@@ -0,0 +1,7 @@
+import { Checkbox as OriginalCheckbok } from 'antd';
+import { withWrap } from '../../utils/hoc';
+
+const Checkbox = withWrap(OriginalCheckbok);
+(Checkbox as any).Group = OriginalCheckbok.Group;
+
+export default Checkbox;

package/src/components/config-provider/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ConfigProvider as OriginalConfigProvider } from 'antd';
+
+// 由于 antd 组件的默认文案是英文，所以需要修改为中文
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import zhCN from 'antd/locale/zh_CN';
+
+const ConfigProvider = (props: any) => {
+  const { locale, ...rest } = props;
+
+  let localeData = locale;
+  if (typeof locale === 'string') {
+    if (locale.toLowerCase() === 'zh-cn') {
+      dayjs.locale('zh-cn');
+      localeData = zhCN;
+    } else if (locale.toLowerCase() === 'en-us') {
+      dayjs.locale('en');
+      // 默认为英文
+      localeData = undefined;
+    }
+  }
+
+  return <OriginalConfigProvider locale={localeData} {...rest} />;
+};
+
+export default ConfigProvider;

package/src/components/date-picker/index.tsx

@@ -0,0 +1,22 @@
+import { DatePicker as OriginalDatePicker } from 'antd';
+import { withMomentProps } from '../../utils/hoc';
+
+const OriginalRangePicker = OriginalDatePicker.RangePicker;
+
+const DatePicker = withMomentProps(OriginalDatePicker, [
+  'defaultPickerValue',
+  'defaultValue',
+  'showTime.defaultValue',
+  'value',
+]);
+
+const RangePicker = withMomentProps(OriginalRangePicker, [
+  'defaultPickerValue',
+  'defaultValue',
+  'showTime.defaultValue',
+  'value',
+]);
+
+(DatePicker as any).RangePicker = RangePicker;
+
+export default DatePicker;

package/src/components/drawer/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Drawer as OriginalDrawer } from 'antd';
+
+const Drawer: any = (props: any) => {
+  const innerProps: any = {};
+  if (props.__designMode === 'design') {
+    // 低代码编辑态中强制显示，将控制权交给引擎侧
+    innerProps.open = true;
+  }
+  console.log(props,'Drawer props',innerProps);
+  return <OriginalDrawer {...props} {...innerProps} />;
+};
+export default Drawer;

package/src/components/dropdown/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Dropdown as OriginalDropdown } from 'antd';
+import { withSingleChild } from '../../utils/hoc';
+
+const Dropdown: any = (props: any) => {
+  const innerProps: any = {};
+  if (props.__designMode === 'design') {
+    // 低代码编辑态中强制显示，将控制权交给引擎侧
+    innerProps.open = true;
+  }
+  return <OriginalDropdown {...props} {...innerProps} />;
+};
+export default withSingleChild(Dropdown, ['children', 'overlay']);