@pisell/materials 3.0.62 → 6.0.2

package/lowcode/form-item-upload/meta.ts

@@ -0,0 +1,432 @@
+import snippets from './snippets';
+import {
+  formItemGeneralDataGroup,
+  getFormItemGeneralInfoGroup,
+  generalItemMap,
+  getFormItemValidateGroup,
+} from '../_utils/defaultSchema';
+import { presetTypeTreeData } from './utils';
+
+export default {
+  snippets,
+  componentName: 'FormItemUpload',
+  title: '多媒体文件上传',
+  category: '表单',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'FormItemUpload',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  generalProps: [
+    formItemGeneralDataGroup,
+    getFormItemGeneralInfoGroup([
+      generalItemMap['label'],
+      generalItemMap['tooltip'],
+      generalItemMap['extra'],
+      generalItemMap['hideLabel'],
+      generalItemMap['renderMode'],
+    ]),
+    {
+      title: {
+        type: 'i18n',
+        'en-US': 'Operation',
+        'zh-CN': '操作',
+      },
+      display: 'accordion',
+      type: 'group',
+      items: [
+        // {
+        //   name: 'allowMediaLibrary',
+        //   title: {
+        //     type: 'i18n',
+        //     'en-US': 'Allow Media Library',
+        //     'zh-CN': '允许从媒体库上传',
+        //   },
+        //   propType: 'bool',
+        //   defaultValue: true,
+        //   setter: 'BoolSetter'
+        // },
+        // {
+        //   name: 'allowLocalUpload',
+        //   title: {
+        //     type: 'i18n',
+        //     'en-US': 'Allow Local Upload',
+        //     'zh-CN': '允许从本地上传',
+        //   },
+        //   propType: 'bool',
+        //   defaultValue: true,
+        //   setter: 'BoolSetter'
+        // },
+        {
+          name: 'allowPreview',
+          title: {
+            type: 'i18n',
+            'en-US': 'Allow Preview',
+            'zh-CN': '允许预览',
+          },
+          propType: 'bool',
+          defaultValue: true,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'enableMultilingual',
+          title: {
+            type: 'i18n',
+            'en-US': 'Allow Multilingual',
+            'zh-CN': '允许多语言',
+          },
+          propType: 'bool',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+      ],
+    },
+    {
+      title: {
+        type: 'i18n',
+        'en-US': 'Upload Settings',
+        'zh-CN': '上传设置',
+      },
+      display: 'accordion',
+      type: 'group',
+      items: [
+        // {
+        //   name: 'maxSize',
+        //   title: {
+        //     type: 'i18n',
+        //     'en-US': 'Max File Size(MB)',
+        //     'zh-CN': '单文件最大上传大小(MB)',
+        //   },
+        //   propType: 'number',
+        //   defaultValue: 3,
+        //   setter: 'NumberSetter',
+        // },
+        {
+          name: 'multiple',
+          title: {
+            type: 'i18n',
+            'en-US': 'Allow Multiple Files',
+            'zh-CN': '允许上传多个文件',
+          },
+          propType: 'bool',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'minCount',
+          title: {
+            type: 'i18n',
+            'en-US': 'Min File Count',
+            'zh-CN': '最小上传文件个数',
+          },
+          propType: 'number',
+          defaultValue: 1,
+          setter: 'NumberSetter',
+          condition: (target: any) => {
+            return target.getProps().getPropValue('multiple');
+          },
+        },
+        {
+          name: 'maxCount',
+          title: {
+            type: 'i18n',
+            'en-US': 'Max File Count',
+            'zh-CN': '最大上传文件个数',
+          },
+          propType: 'number',
+          defaultValue: 9,
+          setter: 'PisellMediaMaxCountSetter',
+          condition: (target: any) => {
+            return target.getProps().getPropValue('multiple');
+          },
+        },
+      ],
+    },
+    {
+      title: {
+        type: 'i18n',
+        'en-US': 'File Types',
+        'zh-CN': '文件类型',
+      },
+      display: 'accordion',
+      type: 'group',
+      items: [
+        {
+          name: 'enablePresetType',
+          title: {
+            type: 'i18n',
+            'en-US': 'Enable Preset Types',
+            'zh-CN': '启用预设类型',
+          },
+          propType: 'bool',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'presetType',
+          title: {
+            type: 'i18n',
+            'en-US': 'Preset Types',
+            'zh-CN': '预设类型',
+          },
+          condition: (target: any) => {
+            return target.getProps().getPropValue('enablePresetType');
+          },
+          setter: {
+            componentName: 'PisellMediaPresetTypeSetter',
+          },
+        },
+        {
+          name: 'enableCustomType',
+          title: {
+            type: 'i18n',
+            'en-US': 'Enable Custom Types',
+            'zh-CN': '启用自定义类型',
+          }, 
+          propType: 'bool',
+          defaultValue: false,
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'customType',
+          title: {
+            label: {
+              type: 'i18n',
+            'en-US': 'Custom Types',
+            'zh-CN': '自定义类型',
+            },
+            tip: {
+              type: 'i18n',
+              'en-US': 'Input file suffix, such as .pdf, and press Enter',
+              'zh-CN': '输入文件后缀名，例如.pdf，并点击回车键',
+            },
+          },
+          propType: 'string',
+          condition: (target: any) => {
+            return target.getProps().getPropValue('enableCustomType');
+          },
+          setter: {
+            componentName: 'PisellSelectSetter',
+            props: {
+              options: [],
+              mode: 'tags',
+            },
+          },
+        },
+      ],
+    },
+    getFormItemValidateGroup([generalItemMap['requiredobj']]),
+  ],
+  props: [
+    {
+      name: 'defaultValue',
+      title: { label: '默认值', tip: '默认内容' },
+      propType: 'string',
+      setter: 'StringSetter',
+    },
+    {
+      name: 'value',
+      title: { label: '当前值', tip: '当前值' },
+      propType: 'string',
+      setter: 'StringSetter',
+    },
+    {
+      name: 'allowClear',
+      title: { label: '支持清除', tip: '是否允许清除' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'bordered',
+      title: { label: '显示边框', tip: '是否有边框' },
+      propType: 'bool',
+      defaultValue: true,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否为禁用状态' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'readOnly',
+      title: { label: '是否只读', tip: '是否为只读状态' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+    },
+    {
+      name: 'placeholder',
+      title: { label: '占位提示', tip: '占位提示' },
+      propType: 'string',
+      defaultValue: '请输入',
+      setter: 'PisellI18nSetter',
+    },
+    // {
+    //   name: 'id',
+    //   title: { label: '输入框ID', tip: '输入框的ID' },
+    //   propType: 'string',
+    // },
+    {
+      name: 'maxLength',
+      title: { label: '最大长度', tip: '最大长度' },
+      propType: 'number',
+      setter: 'NumberSetter',
+    },
+    {
+      name: 'size',
+      title: { label: '控件大小', tip: '控件大小' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '大',
+              value: 'large',
+            },
+            {
+              title: '中',
+              value: 'middle',
+            },
+            {
+              title: '小',
+              value: 'small',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['large', 'middle', 'small'] },
+      defaultValue: 'middle',
+    },
+    {
+      name: 'addonAfter',
+      title: { label: '后置标签', tip: '后置标签' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+      setter: ['PisellI18nSetter', 'SlotSetter'],
+    },
+    {
+      name: 'addonBefore',
+      title: { label: '前置标签', tip: '前置标签' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+      setter: ['PisellI18nSetter', 'SlotSetter'],
+    },
+    {
+      name: 'prefix',
+      title: { label: '前缀', tip: '前缀' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+      setter: ['PisellI18nSetter', 'SlotSetter'],
+    },
+    {
+      name: 'suffix',
+      title: { label: '后缀', tip: '后缀' },
+      propType: { type: 'oneOfType', value: ['string', 'node'] },
+      setter: ['PisellI18nSetter', 'SlotSetter'],
+    },
+    {
+      name: 'onChange',
+      title: { label: '输入框内容变化时的回调', tip: '输入框内容变化时的回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onPressEnter',
+      title: { label: '按下回车的回调', tip: '按下回车的回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onFocus',
+      title: { label: '获取焦点回调', tip: '获取焦点回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onKeyDown',
+      title: { label: '按键按下时的回调', tip: '按键按下时的回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onKeyPress',
+      title: { label: '按键按下后的回调', tip: '按键按下之后释放之前的回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onKeyUp',
+      title: { label: '按键释放回调', tip: '按键释放之后的回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onBlur',
+      title: { label: '失去焦点回调', tip: '失去焦点回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onClick',
+      title: { label: '点击回调', tip: '点击回调' },
+      propType: 'func',
+    },
+    {
+      name: 'onClear',
+      title: { label: '按下清除按钮的回调', tip: '按下清除按钮的回调' },
+      propType: 'func',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(event,${extParams}){\n// 输入框内容变化时的回调\nconsole.log('onChange',event);}",
+        },
+        {
+          name: 'onPressEnter',
+          template:
+            "onPressEnter(event,${extParams}){\n// 按下回车的回调\nconsole.log('onPressEnter',event);}",
+        },
+        {
+          name: 'onFocus',
+          template:
+            "onFocus(event,${extParams}){\n// 获取焦点回调\nconsole.log('onFocus',event);}",
+        },
+        {
+          name: 'onKeyDown',
+          template:
+            "onKeyDown(event,${extParams}){\n// 按键按下时的回调\nconsole.log('onKeyDown',event);}",
+        },
+        {
+          name: 'onKeyPress',
+          template:
+            "onKeyPress(event,${extParams}){\n// 按键按下后的回调\nconsole.log('onKeyPress',event);}",
+        },
+        {
+          name: 'onKeyUp',
+          template:
+            "onKeyUp(event,${extParams}){\n// 按键释放回调\nconsole.log('onKeyUp',event);}",
+        },
+        {
+          name: 'onBlur',
+          template:
+            "onBlur(event,${extParams}){\n// 按键释放回调\nconsole.log('onBlur',event);}",
+        },
+        {
+          name: 'onClick',
+          template:
+            "onClick(event,${extParams}){\n// 点击回调\nconsole.log('onClick',event);}",
+        },
+        {
+          name: 'onClear',
+          template:
+            "onClear(event,${extParams}){\n// 按下清除按钮的回调\nconsole.log('onClear',event);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/form-item-upload/snippets.ts

@@ -0,0 +1,12 @@
+export default [
+  {
+    title: '多媒体文件上传',
+    screenshot: require('./__screenshots__/upload.png'),
+    schema: {
+      componentName: 'FormItemUpload',
+      title: '多媒体文件上传',
+      props: {
+      },
+    },
+  },
+];

package/lowcode/form-item-upload/utils.ts

@@ -0,0 +1,230 @@
+
+export const presetTypeData = [
+  {
+    title: '文档',
+    key: 'documents',
+    children: [
+      {
+        key: 'pdf',
+        title: 'PDF',
+        types: ['.pdf'],
+        color: 'red',
+      },
+      {
+        key: 'word',
+        title: 'Word文档',
+        types: ['.doc', '.docx'],
+        color: 'blueDark',
+      },
+      {
+        key: 'excel',
+        title: 'Excel工作簿',
+        types: ['.xls', '.xlsx'],
+        color: 'green600',
+      },
+      {
+        key: 'powerPoint',
+        title: 'PowerPoint演示文稿',
+        types: ['.ppt', '.pptx'],
+        color: 'orangeDark',
+      },
+      {
+        key: 'textFile',
+        title: '文本文件',
+        types: ['.txt'],
+        color: 'gray700',
+      },
+      {
+        key: 'richFile',
+        title: '富文本格式',
+        types: ['.rtf'],
+        color: 'gray500',
+      },
+      {
+        key: 'csv',
+        title: 'CSV',
+        types: ['.csv'],
+        color: 'green600',
+      },
+    ],
+  },
+  {
+    title: '图片',
+    key: 'images',
+    children: [
+      {
+        key: 'jpg',
+        title: 'JPG',
+        types: ['.jpg', '.jpeg'],
+        color: 'img',
+      },
+      {
+        key: 'png',
+        title: 'PNG',
+        types: ['.png'],
+        color: 'img',
+      },
+      {
+        key: 'gif',
+        title: 'GIF',
+        types: ['.gif'],
+        color: 'img',
+      },
+      {
+        key: 'bmp',
+        title: 'BMP',
+        types: ['.bmp'],
+        color: 'img',
+      },
+      {
+        key: 'tiff',
+        title: 'TIFF',
+        types: ['tif', '.tiff'],
+        color: 'img',
+      },
+      {
+        key: 'svg',
+        title: 'SVG',
+        types: ['.svg'],
+        color: 'img',
+      },
+      {
+        key: 'webp',
+        title: 'WEBP',
+        types: ['.webp'],
+        color: 'img',
+      },
+    ],
+  },
+  {
+    title: '音频',
+    key: 'audio',
+    children: [
+      {
+        key: 'mp3',
+        title: 'MP3',
+        types: ['.mp3'],
+        color: 'pink600',
+      },
+      {
+        key: 'wav',
+        title: 'WAV',
+        types: ['.wav'],
+        color: 'pink600',
+      },
+      {
+        key: 'flac',
+        title: 'FLAC',
+        color: 'pink600',
+        types: ['.flac'],
+      },
+      {
+        key: 'aac',
+        title: 'AAC',
+        color: 'pink600',
+        types: ['.aac', '.m4a'],
+      },
+      {
+        key: 'ogg',
+        title: 'OGG',
+        types: ['.ogg'],
+        color: 'pink600',
+      },
+    ],
+  },
+  {
+    title: '视频',
+    key: 'video',
+    children: [
+      {
+        key: 'mp4',
+        title: 'MP4',
+        types: ['.mp4'],
+        color: 'blueDark',
+      },
+      {
+        key: 'avi',
+        title: 'AVI',
+        types: ['.avi'],
+        color: 'blueDark',
+      },
+      {
+        key: 'mkv',
+        title: 'MKV',
+        types: ['.mkv'],
+        color: 'blueDark',
+      },
+      {
+        key: 'mov',
+        title: 'MOV',
+        types: ['.mov'],
+        color: 'blueDark',
+      },
+      {
+        key: 'wmv',
+        title: 'WMV',
+        types: ['.wmv'],
+        color: 'blueDark',
+      },
+      {
+        key: 'flv',
+        title: 'FLV',
+        types: ['.flv'],
+        color: 'blueDark',
+      },
+    ],
+  },
+  {
+    title: '压缩文件',
+    key: 'compressedFiles',
+    children: [
+      {
+        key: 'zip',
+        title: 'ZIP',
+        types: ['.zip'],
+        color: 'gray700',
+      },
+      {
+        key: 'rar',
+        title: 'RAR',
+        types: ['.rar'],
+        color: 'gray700',
+      },
+      {
+        key: '7z',
+        title: '7Z',
+        types: ['.7z'],
+        color: 'gray700',
+      },
+      {
+        key: 'tar',
+        title: 'TAR',
+        types: ['.tar'],
+        color: 'gray700',
+      },
+      {
+        key: 'gz',
+        title: 'GZ',
+        types: ['.gz'],
+        color: 'gray700',
+      },
+    ],
+  },
+];
+
+
+export const presetTypeTreeData = presetTypeData.map((item) => {
+  return {
+    label: item.title,
+    key: item.key,
+    value: item.key,
+    children: item.children.map((i) => {
+      return {
+        label: `${i.title} (${i.types.join(',')})`,
+        key: i.key,
+        value: i.key,
+      };
+    }),
+  };
+});
+