@pisell/materials 3.0.62 → 6.0.1

package/lowcode/form-item-date-picker/meta.ts

@@ -0,0 +1,435 @@
+import snippets from './snippets';
+import {
+  formItemGeneralDataGroup,
+  getFormItemGeneralInfoGroup,
+  generalItemMap,
+  getFormItemValidateGroup,
+} from '../_utils/defaultSchema';
+
+export default {
+  snippets,
+  componentName: 'FormItemDatePicker',
+  title: '日期输入',
+  category: '表单',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'FormItemDatePicker',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  generalProps: [
+    formItemGeneralDataGroup,
+    getFormItemGeneralInfoGroup([
+      generalItemMap['label'],
+      generalItemMap['placeholder'],
+      generalItemMap['tooltip'],
+      generalItemMap['extra'],
+      generalItemMap['hideLabel'],
+      generalItemMap['renderMode'],
+      {
+        name: 'defaultValue',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Default value',
+            'zh-CN': '默认值',
+          },
+          tip: {
+            type: 'i18n',
+            'en-US': 'Default value',
+            'zh-CN': '默认值',
+          },
+        },
+        setter: 'DateSetter',
+      },
+      {
+        name: 'format',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Format',
+            'zh-CN': '格式',
+          },
+          tip: {
+            type: 'i18n',
+            'en-US': 'Date format',
+            'zh-CN': '日期格式',
+          },
+        },
+        propType: 'string',
+        setter: {
+          componentName: 'SelectSetter',
+          props: {
+            options: [
+              {
+                title: 'YYYY',
+                value: 'YYYY',
+              },
+              {
+                title: 'YYYY-MM',
+                value: 'YYYY-MM',
+              },
+              {
+                title: 'YYYY-MM-DD',
+                value: 'YYYY-MM-DD',
+              },
+              {
+                title: 'MM/DD/YYYY',
+                value: 'MM/DD/YYYY',
+              },
+              {
+                title: 'DD/MM/YYYY',
+                value: 'DD/MM/YYYY',
+              },
+            ],
+          },
+        },
+        defaultValue: 'YYYY-MM-DD',
+      },
+      {
+        name: 'showTime',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Show Time',
+            'zh-CN': '显示时间',
+          },
+          tip: {
+            type: 'i18n',
+            'en-US': 'Whether to show time picker',
+            'zh-CN': '是否显示时间选择器',
+          },
+        },
+        propType: 'bool',
+        setter: 'BoolSetter',
+        defaultValue: false,
+        extraProps: {
+          setValue: (target: any, value: any) => {
+            if (value) {
+              return target.getProps().setPropValue('showTime.format', 'HH:mm');
+            }
+
+            return target.getProps().setPropValue('showTime', value);
+          },
+          getValue: (target: any) => {
+            return !!target.getProps().getPropValue('showTime');
+          },
+        },
+      },
+      {
+        name: 'showTime.format',
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Time Format',
+            'zh-CN': '时间格式',
+          },
+          tip: {
+            type: 'i18n',
+            'en-US': 'Time format',
+            'zh-CN': '时间格式',
+          },
+        },
+        propType: 'string',
+        condition: (target: any) => {
+          return target.getProps().getPropValue('showTime');
+        },
+        setter: {
+          componentName: 'SelectSetter',
+          props: {
+            options: [
+              {
+                title: 'HH:mm:ss',
+                value: 'HH:mm:ss',
+              },
+              {
+                title: 'HH:mm',
+                value: 'HH:mm',
+              },
+              {
+                title: 'HH',
+                value: 'HH',
+              },
+            ],
+          },
+        },
+        defaultValue: 'HH:mm',
+      },
+    ]),
+    getFormItemValidateGroup([generalItemMap['requiredobj']]),
+  ],
+  configure: {
+    props: [
+      {
+        title: '值设置',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'defaultValue',
+            title: {
+              label: '默认值',
+              tip: 'defaultValue | 默认值',
+            },
+            propType: 'date',
+            setter: 'DateSetter',
+          },
+          {
+            name: 'value',
+            title: {
+              label: '当前值',
+              tip: 'value | 当前值',
+            },
+            propType: 'date',
+            setter: 'DateSetter',
+          },
+        ],
+      },
+      {
+        title: '功能选项',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'size',
+            title: {
+              label: '尺寸',
+              tip: 'size | 输入框大小',
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['large', 'middle', 'small'],
+            },
+            setter: {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  {
+                    title: '大',
+                    value: 'large',
+                  },
+                  {
+                    title: '中',
+                    value: 'middle',
+                  },
+                  {
+                    title: '小',
+                    value: 'small',
+                  },
+                ],
+              },
+            },
+            defaultValue: 'middle',
+          },
+          {
+            name: 'picker',
+            title: {
+              label: '日期类型',
+              tip: 'picker | 选择器日期类型',
+            },
+            setter: {
+              componentName: 'SelectSetter',
+              props: {
+                options: [
+                  {
+                    title: '日期',
+                    value: 'date',
+                  },
+                  {
+                    title: '周',
+                    value: 'week',
+                  },
+                  {
+                    title: '月份',
+                    value: 'month',
+                  },
+                  {
+                    title: '季度',
+                    value: 'quarter',
+                  },
+                  {
+                    title: '年份',
+                    value: 'year',
+                  },
+                ],
+              },
+            },
+            propType: {
+              type: 'oneOf',
+              value: ['date', 'week', 'month', 'quarter', 'year'],
+            },
+          },
+          {
+            name: 'format',
+            title: {
+              label: '日期格式',
+              tip: 'format | 设置日期格式',
+            },
+            propType: 'string',
+            defaultValue: 'YYYY-MM-DD',
+            setter: 'StringSetter',
+          },
+          {
+            name: 'placeholder',
+            title: {
+              label: '提示文字',
+              tip: 'placeholder | 输入框提示文字',
+            },
+            propType: 'string',
+            setter: 'PisellI18nSetter',
+          },
+          {
+            name: 'allowClear',
+            title: {
+              label: '支持清除',
+              tip: 'allowClear | 是否允许清除',
+            },
+            propType: 'bool',
+            defaultValue: true,
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'bordered',
+            title: {
+              label: '显示边框',
+              tip: 'bordered | 是否有边框',
+            },
+            propType: 'bool',
+            defaultValue: true,
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'className',
+            title: { label: '选择器类名', tip: '选择器类名' },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+          {
+            name: 'showToday',
+            title: {
+              label: '展示今天按钮',
+              tip: 'showToday | 是否展示今天按钮',
+            },
+            propType: 'bool',
+            defaultValue: true,
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'autoFocus',
+            title: {
+              label: '自动聚焦',
+              tip: 'autoFocus | 自动获取焦点',
+            },
+            propType: 'bool',
+            defaultValue: false,
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'disabled',
+            title: {
+              label: '是否禁用',
+              tip: 'disabled | 是否为禁用状态',
+            },
+            propType: 'bool',
+            defaultValue: false,
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'inputReadOnly',
+            title: {
+              label: '是否只读',
+              tip: 'inputReadOnly | 避免在移动设备上打开虚拟键盘',
+            },
+            propType: 'bool',
+            defaultValue: false,
+            setter: 'BoolSetter',
+          },
+          {
+            name: 'showTime',
+            title: {
+              label: '时间选择',
+              tip: 'showTime | 是否能选择时间',
+            },
+            propType: 'bool',
+            defaultValue: false,
+            setter: 'BoolSetter',
+          },
+        ],
+      },
+      {
+        title: '高级',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'disabledDate',
+            title: {
+              label: '不可选日期',
+              tip: 'disabledDate | 不可选择的日期',
+            },
+            propType: 'func',
+            setter: [
+              {
+                componentName: 'FunctionSetter',
+                props: {
+                  template:
+                    'disabledDate(currentDate,${extParams}){\n// 设置不可选择的日期\nreturn true\n}',
+                },
+              },
+              'VariableSetter',
+            ],
+          },
+        ],
+      },
+      // {
+      //   name: 'dropdownClassName',
+      //   title: {
+      //     label: '额外的弹出日历 className',
+      //     tip: '额外的弹出日历 className',
+      //   },
+      //   setter: 'ClassNameSetter',
+      // },
+      // {
+      //   name: 'popupStyle',
+      //   title: { label: '额外的弹出日历样式', tip: '额外的弹出日历样式' },
+      //   setter: 'JsonSetter',
+      // },
+      // {
+      //   name: 'suffixIcon',
+      //   title: { label: '自定义的选择框后缀图标', tip: '自定义的选择框后缀图标' },
+      //   setter: 'IconSetter',
+      // },
+      // {
+      //   name: 'style',
+      //   title: { label: '自定义输入框样式', tip: '自定义输入框样式' },
+      //   setter: 'JsonSetter',
+      // },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(date,dateString,${extParams}){\n// 时间发生变化的回调\nconsole.log('onChange',date,dateString);}",
+        },
+        {
+          name: 'onOpenChange',
+          template:
+            "onOpenChange(open,${extParams}){\n// 弹出日历和关闭日历的回调\nconsole.log('onOpenChange',open);}",
+        },
+        {
+          name: 'onPanelChange',
+          template:
+            "onPanelChange(value,mode,${extParams}){\n// 日历面板切换的回调\nconsole.log('onPanelChange',value,mode);}",
+        },
+      ],
+    },
+  },
+};

package/lowcode/form-item-date-picker/snippets.ts

@@ -0,0 +1,53 @@
+export default [
+  {
+    title: '日期输入',
+    screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-1.png',
+    schema: {
+      title: '日期输入',
+      componentName: 'FormItemDatePicker',
+      props: {
+        showTime: false
+      },
+    },
+  },
+  // {
+  //   title: '选择周',
+  //   screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-2.png',
+  //   schema: {
+  //     componentName: 'FormItemDatePicker',
+  //     props: {
+  //       picker: 'week',
+  //     },
+  //   },
+  // },
+  // {
+  //   title: '选择月份',
+  //   screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-3.png',
+  //   schema: {
+  //     componentName: 'FormItemDatePicker',
+  //     props: {
+  //       picker: 'month',
+  //     },
+  //   },
+  // },
+  // {
+  //   title: '选择季度',
+  //   screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-4.png',
+  //   schema: {
+  //     componentName: 'FormItemDatePicker',
+  //     props: {
+  //       picker: 'quarter',
+  //     },
+  //   },
+  // },
+  // {
+  //   title: '选择年份',
+  //   screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/date-picker-5.png',
+  //   schema: {
+  //     componentName: 'FormItemDatePicker',
+  //     props: {
+  //       picker: 'year',
+  //     },
+  //   },
+  // },
+];