amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Form/InputCity.tsx

@@ -0,0 +1,93 @@
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+
+export class CityControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-city';
+  $schema = '/schemas/CityControlSchema.json';
+
+  // 组件名称
+  name = '城市选择';
+  isBaseComponent = true;
+  icon = 'fa fa-building-o';
+  description = '可配置是否选择区域或者城市';
+  docLink = '/amis/zh-CN/components/form/input-city';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-city',
+    label: '城市选择',
+    name: 'city'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    wrapWithPanel: false,
+    mode: 'horizontal',
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '城市选择';
+  panelBody = [
+    {
+      type: 'switch',
+      name: 'allowDistrict',
+      label: '允许选择区域',
+      mode: 'inline',
+      className: 'w-full',
+      pipeIn: defaultValue(true)
+    },
+
+    {
+      type: 'switch',
+      name: 'allowCity',
+      label: '允许选择城市',
+      mode: 'inline',
+      className: 'w-full',
+      pipeIn: defaultValue(true)
+    },
+
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      name: 'value',
+      type: 'input-city',
+      label: '默认值',
+      visibleOn: 'typeof data.value !== "undefined"',
+      validations: 'isNumeric',
+      labelRemark: {
+        trigger: 'click',
+        className: 'm-l-xs',
+        rootClose: true,
+        content: '城市编码',
+        placement: 'left'
+      }
+    },
+
+    {
+      type: 'switch',
+      name: 'searchable',
+      label: '是否出搜索框',
+      mode: 'inline',
+      className: 'w-full',
+      pipeIn: defaultValue(false)
+    },
+
+    getSchemaTpl('extractValue')
+  ];
+}
+
+registerEditorPlugin(CityControlPlugin);

package/src/plugin/Form/InputColor.tsx

@@ -0,0 +1,123 @@
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+
+export class ColorControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-color';
+  $schema = '/schemas/ColorControlSchema.json';
+
+  // 组件名称
+  name = '颜色框';
+  isBaseComponent = true;
+  icon = 'fa fa-eyedropper';
+  description =
+    '支持<code>hex、hls、rgb、rgba</code>格式，默认为<code>hex</code>格式';
+  docLink = '/amis/zh-CN/components/form/input-color';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-color',
+    label: '颜色',
+    name: 'color'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+  getConditionalColorPanel(format: string) {
+    return {
+      type: 'input-color',
+      name: 'value',
+      format,
+      visibleOn: `typeof this.value !== "undefined" && this.format==="${format}"`,
+      label: '默认值'
+    };
+  }
+  getConditionalColorArray(format: string) {
+    return {
+      type: 'input-array',
+      name: 'presetColors',
+      label: '选择器中颜色默认值',
+      addable: true,
+      removable: true,
+      visibleOn: `typeof this.presetColors !== "undefined" && this.format === "${format}"`,
+      items: {
+        type: 'input-color',
+        format
+      },
+      value: [
+        '#D0021B',
+        '#F5A623',
+        '#F8E71C',
+        '#8B572A',
+        '#7ED321',
+        '#417505',
+        '#BD10E0',
+        '#9013FE',
+        '#4A90E2',
+        '#50E3C2',
+        '#B8E986',
+        '#000000',
+        '#4A4A4A',
+        '#9B9B9B',
+        '#FFFFFF'
+      ]
+    };
+  }
+  panelTitle = '颜色框';
+  panelBody = [
+    {
+      label: '格式',
+      name: 'format',
+      type: 'button-group-select',
+      size: 'sm',
+      value: 'hex',
+      options: ['hex', 'hsl', 'rgb', 'rgba'],
+      onChange: (value: any, oldValue: any, model: any, form: any) => {
+        form.setValueByName('value', '');
+        form.setValueByName('presetColors', '');
+      }
+    },
+
+    getSchemaTpl('switchDefaultValue'),
+
+    this.getConditionalColorPanel('hex'),
+    this.getConditionalColorPanel('hsl'),
+    this.getConditionalColorPanel('rgb'),
+    this.getConditionalColorPanel('rgba'),
+
+    getSchemaTpl('switchDefaultValue', {
+      name: 'presetColors',
+      label: '设置选择器中颜色默认值',
+      description: '为空时不显示选择器中的默认值'
+    }),
+
+    this.getConditionalColorArray('hex'),
+    this.getConditionalColorArray('hsl'),
+    this.getConditionalColorArray('rgb'),
+    this.getConditionalColorArray('rgba'),
+
+    getSchemaTpl('clearable', {
+      label: '显示清除按钮',
+      pipeIn: defaultValue(true)
+    })
+  ];
+}
+
+registerEditorPlugin(ColorControlPlugin);

package/src/plugin/Form/InputDate.tsx

@@ -0,0 +1,398 @@
+import {registerEditorPlugin} from '../../manager';
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {BasePlugin, BaseEventContext} from '../../plugin';
+
+import {tipedLabel} from '../../component/control/BaseControl';
+import {ValidatorTag} from '../../component/validator';
+import {getEventControlConfig} from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
+
+const formatX = [
+  {
+    label: 'X(时间戳)',
+    value: 'X'
+  },
+  {
+    label: 'x(毫秒时间戳)',
+    value: 'x'
+  }
+];
+
+const DateType: {
+  [key: string]: {
+    format: string;
+    placeholder: string;
+    formatOptions: Array<{label: string; value: string; timeFormat?: string}>;
+  };
+} = {
+  date: {
+    format: 'YYYY-MM-DD',
+    placeholder: '请选择日期',
+    formatOptions: [
+      ...formatX,
+      {
+        label: 'YYYY-MM-DD',
+        value: 'YYYY-MM-DD'
+      },
+      {
+        label: 'YYYY/MM/DD',
+        value: 'YYYY/MM/DD'
+      },
+      {
+        label: 'YYYY年MM月DD日',
+        value: 'YYYY年MM月DD日'
+      }
+    ]
+  },
+  datetime: {
+    format: 'YYYY-MM-DD HH:mm:ss',
+    placeholder: '请选择日期以及时间',
+    formatOptions: [
+      ...formatX,
+      {
+        label: 'YYYY-MM-DD HH:mm:ss',
+        value: 'YYYY-MM-DD HH:mm:ss'
+      },
+      {
+        label: 'YYYY/MM/DD HH:mm:ss',
+        value: 'YYYY/MM/DD HH:mm:ss'
+      },
+      {
+        label: 'YYYY年MM月DD日 HH时mm分ss秒',
+        value: 'YYYY年MM月DD日 HH时mm分ss秒'
+      }
+    ]
+  },
+  time: {
+    format: 'HH:mm',
+    placeholder: '请选择时间',
+    formatOptions: [
+      {
+        label: 'HH:mm',
+        value: 'HH:mm',
+        timeFormat: 'HH:mm'
+      },
+      {
+        label: 'HH:mm:ss',
+        value: 'HH:mm:ss',
+        timeFormat: 'HH:mm'
+      },
+      {
+        label: 'HH时mm分',
+        value: 'HH时mm分',
+        timeFormat: 'HH:mm'
+      },
+      {
+        label: 'HH时mm分ss秒',
+        value: 'HH时mm分ss秒',
+        timeFormat: 'HH:mm:ss'
+      }
+    ]
+  },
+  month: {
+    format: 'YYYY-MM',
+    placeholder: '请选择月份',
+    formatOptions: [
+      ...formatX,
+      {
+        label: 'YYYY-MM',
+        value: 'YYYY-MM'
+      },
+      {
+        label: 'MM',
+        value: 'MM'
+      },
+      {
+        label: 'M',
+        value: 'M'
+      }
+    ]
+  },
+  quarter: {
+    format: 'YYYY [Q]Q',
+    placeholder: '请选择季度',
+    formatOptions: [
+      ...formatX,
+      {
+        label: 'YYYY-[Q]Q',
+        value: 'YYYY-[Q]Q'
+      },
+      {
+        label: 'Q',
+        value: 'Q'
+      }
+    ]
+  },
+  year: {
+    format: 'YYYY',
+    placeholder: '请选择年',
+    formatOptions: [
+      ...formatX,
+      {
+        label: 'YYYY',
+        value: 'YYYY'
+      }
+    ]
+  }
+};
+
+const tipedLabelText =
+  '支持 <code>now、+1day、-2weeks、+1hours、+2years</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>';
+
+export class DateControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-date';
+  $schema = '/schemas/DateControlSchema.json';
+
+  order = -450;
+
+  // 组件名称
+  icon = 'fa fa-calendar';
+  name = '日期';
+  isBaseComponent = true;
+  // 添加源对应组件中文名称 & type字段
+  searchKeywords =
+    '日期框、input-datetime、日期时间框、input-time、时间框、input-month、月份框、input-quarter、季度框、input-year、年框';
+  description = '年月日选择，支持相对值设定，如<code>+2days</code>两天后';
+  docLink = '/amis/zh-CN/components/form/input-date';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-date',
+    label: '日期',
+    name: 'date'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  notRenderFormZone = true;
+
+  panelTitle = '日期配置';
+
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '时间值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '时间值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'focus',
+      eventLabel: '获取焦点',
+      description: '输入框获取焦点(非内嵌模式)时触发'
+    },
+    {
+      eventName: 'blur',
+      eventLabel: '失去焦点',
+      description: '输入框失去焦点(非内嵌模式)时触发'
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清空输入框内容'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  panelJustify = true;
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    const renderer: any = context.info.renderer;
+
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+              getSchemaTpl('label'),
+              getSchemaTpl('selectDateType', {
+                value: this.scaffold.type,
+                onChange: (
+                  value: string,
+                  oldValue: any,
+                  model: any,
+                  form: any
+                ) => {
+                  let type: string = value.split('-')[1];
+
+                  form.setValues({
+                    inputFormat: DateType[type]?.format,
+                    placeholder: DateType[type]?.placeholder,
+                    format: type === 'time' ? 'HH:mm' : 'X',
+                    minDate: '',
+                    maxDate: '',
+                    value: ''
+                  });
+                }
+              }),
+              {
+                type: 'input-text',
+                name: 'format',
+                label: tipedLabel(
+                  '值格式',
+                  '提交数据前将根据设定格式化数据，请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。'
+                ),
+                pipeIn: defaultValue('X')
+              },
+              {
+                type: 'input-text',
+                name: 'inputFormat',
+                label: tipedLabel(
+                  '显示格式',
+                  '请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。'
+                ),
+                pipeIn: defaultValue('YYYY-MM-DD'),
+                clearable: true,
+                onChange: (
+                  value: string,
+                  oldValue: any,
+                  model: any,
+                  form: any
+                ) => {
+                  const type = form.data.type.split('-')[1];
+                  model.setOptions(DateType[type].formatOptions);
+                  // 时间日期类组件 input-time 需要更加关注 timeFormat 和 inputFormat 属性区别
+                  // inputFormat 表示输入框内的显示格式； timeFormat表示选择下拉弹窗中展示"HH、mm、ss"的组合
+                  if (type === 'time') {
+                    const timeFormatObj = DateType[type].formatOptions.find(
+                      item => item.value === value
+                    );
+                    const timeFormat = timeFormatObj
+                      ? (timeFormatObj as any).timeFormat
+                      : 'HH:mm:ss';
+                    form.setValues({
+                      timeFormat: timeFormat
+                    });
+                  }
+                },
+                options:
+                  DateType[this.scaffold.type.split('-')[1]].formatOptions
+              },
+              getSchemaTpl('utc'),
+              getSchemaTpl('clearable', {
+                pipeIn: defaultValue(true)
+              }),
+              getSchemaTpl('formulaControl', {
+                name: 'value',
+                label: tipedLabel(
+                  '默认值',
+                  '支持 <code>now、+1day、-2weeks、+1hours、+2years</code>等这种相对值用法'
+                ),
+                placeholder: '请输入相对值',
+                inputClassName: 'is-inline'
+              }),
+              getSchemaTpl('formulaControl', {
+                name: 'minDate',
+                label: tipedLabel('最小值', tipedLabelText),
+                placeholder: '请输入最小值',
+                inputClassName: 'is-inline'
+              }),
+              getSchemaTpl('formulaControl', {
+                name: 'maxDate',
+                label: tipedLabel('最大值', tipedLabelText),
+                placeholder: '请输入最大值',
+                inputClassName: 'is-inline'
+              }),
+              getSchemaTpl('placeholder', {
+                pipeIn: defaultValue('请选择日期')
+              }),
+              // getSchemaTpl('remark'),
+              // getSchemaTpl('labelRemark'),
+              getSchemaTpl('description')
+            ]
+          },
+          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('validation', {
+            tag: ValidatorTag.Date
+          })
+        ])
+      },
+      {
+        title: '外观',
+        body: getSchemaTpl('collapseGroup', [
+          getSchemaTpl('style:formItem', renderer),
+          getSchemaTpl('style:classNames', [
+            getSchemaTpl('className', {
+              label: '描述',
+              name: 'descriptionClassName',
+              visibleOn: 'this.description'
+            }),
+            getSchemaTpl('className', {
+              name: 'addOn.className',
+              label: 'AddOn',
+              visibleOn: 'this.addOn && this.addOn.type === "text"'
+            })
+          ]),
+          getSchemaTpl('style:others', [
+            {
+              name: 'embed',
+              type: 'button-group-select',
+              size: 'md',
+              label: '模式',
+              mode: 'row',
+              value: false,
+              options: [
+                {
+                  label: '浮层',
+                  value: false
+                },
+                {
+                  label: '内嵌',
+                  value: true
+                }
+              ]
+            }
+          ])
+        ])
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  };
+}
+
+registerEditorPlugin(DateControlPlugin);