amis-editor 5.2.0-beta.1 → 5.2.0

package/src/plugin/Form/InputRange.tsx

@@ -0,0 +1,191 @@
+import {RendererAction, RendererEvent} from '../../event-action';
+import {defaultValue, getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+export class RangeControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-range';
+  $schema = '/schemas/RangeControlSchema.json';
+
+  // 组件名称
+  name = '滑块';
+  isBaseComponent = true;
+  icon = 'fa fa-sliders';
+  description = `选择某个值或者某个范围`;
+  docLink = '/amis/zh-CN/components/form/input-range';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-range',
+    label: '滑块',
+    name: 'range'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  // 事件定义
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '滑块值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '当前值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'focus',
+      eventLabel: '获取焦点',
+      description: '当设置 showInput 为 true 时，输入框获取焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '滑块当前值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'blur',
+      eventLabel: '失去焦点',
+      description: '当设置 showInput 为 true 时，输入框失去焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '滑块当前值'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清除输入框'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  panelTitle = '滑块';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+    {
+      type: 'input-number',
+      name: 'value',
+      label: '默认值',
+      validations: 'isNumeric',
+      visibleOn: 'typeof data.value !== "undefined" && !data.multiple',
+      pipeIn: (value: any) => {
+        return typeof value === 'number' ? value : 0;
+      },
+      pipeOut: (value: any, origin: any, data: any) => {
+        return (
+          (value < data.min && data.min) ||
+          (value > data.max && data.max) ||
+          value
+        );
+      }
+    },
+
+    {
+      type: 'combo',
+      name: 'value',
+      visibleOn: 'typeof data.value !== "undefined" && this.multiple',
+      items: [
+        {
+          type: 'input-number',
+          validations: 'isNumeric',
+          name: 'min',
+          label: '小值'
+        },
+
+        {
+          type: 'input-number',
+          validations: 'isNumeric',
+          name: 'max',
+          label: '大值'
+        }
+      ]
+    },
+
+    {
+      label: '最小值',
+      name: 'min',
+      type: 'input-number',
+      value: 0
+    },
+
+    {
+      label: '最大值',
+      name: 'max',
+      type: 'input-number',
+      value: 100
+    },
+
+    {
+      label: '步长',
+      name: 'step',
+      type: 'input-number',
+      value: 1
+    },
+
+    {
+      type: 'input-text',
+      name: 'unit',
+      label: '单位',
+      value: ''
+    },
+
+    getSchemaTpl('switch', {
+      name: 'showInput',
+      label: '是否显示输入框',
+      value: false
+    }),
+
+    getSchemaTpl('clearable'),
+    getSchemaTpl('multiple', {
+      pipeIn: defaultValue(false)
+    }),
+    getSchemaTpl('joinValues'),
+    getSchemaTpl('delimiter')
+  ];
+}
+
+registerEditorPlugin(RangeControlPlugin);

package/src/plugin/Form/InputRating.tsx

@@ -0,0 +1,390 @@
+import {
+  defaultValue,
+  getSchemaTpl,
+  undefinedPipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin, BaseEventContext} from '../../plugin';
+import {formItemControl, tipedLabel} from '../../component/control/BaseControl';
+import {getEventControlConfig, isObject} from '../../util';
+import {ValidatorTag} from '../../component/validator';
+import {RendererAction, RendererEvent} from '../../event-action';
+
+export class RateControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-rating';
+  $schema = '/schemas/RatingControlSchema.json';
+
+  // 组件名称
+  name = '评分';
+  isBaseComponent = true;
+  icon = 'fa fa-star-o';
+  description = `支持只读、半星选择`;
+  docLink = '/amis/zh-CN/components/form/input-rating';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-rating',
+    label: '评分',
+    name: 'rating'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold,
+        value: 3
+      }
+    ]
+  };
+  notRenderFormZone = true;
+
+  panelTitle = '评分';
+
+  count = 5;
+
+  // 事件定义
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '评分值变化时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '评分值'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清空评分值'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '将值重置为resetValue，若没有配置resetValue，则清空'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新'
+    }
+  ];
+
+  panelJustify = true;
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          {
+            title: '基本',
+            body: [
+              getSchemaTpl('formItemName', {
+                required: true
+              }),
+
+              {
+                label: 'Label',
+                name: 'label',
+                type: 'input-text'
+              },
+
+              {
+                label: '最大值',
+                name: 'count',
+                type: 'input-number',
+                max: 10,
+                min: 1,
+                value: 5,
+                pipeIn: (value: number) => (this.count = value),
+                pipeOut: (value: number) => (this.count = value)
+              },
+
+              {
+                type: 'input-number',
+                name: 'value',
+                label: '默认值',
+                max: 10,
+                min: 0
+              },
+
+              getSchemaTpl('switch', {
+                name: 'allowClear',
+                label: tipedLabel('可清除', '是否允许再次点击后清除'),
+                value: false
+              }),
+
+              getSchemaTpl('switch', {
+                name: 'half',
+                label: '允许半星',
+                value: false
+              }),
+
+              getSchemaTpl('labelRemark'),
+
+              getSchemaTpl('remark'),
+
+              getSchemaTpl('combo-container', {
+                type: 'combo',
+                label: '描述',
+                mode: 'normal',
+                name: 'texts',
+                items: [
+                  {
+                    placeholder: 'Key',
+                    type: 'input-number',
+                    unique: true,
+                    name: 'key',
+                    columnClassName: 'w-xs flex-none',
+                    min: 0,
+                    step: 1,
+                    max: 10,
+                    precision: 0
+                  },
+
+                  {
+                    placeholder: '描述内容',
+                    type: 'input-text',
+                    name: 'value'
+                  }
+                ],
+                draggable: false,
+                multiple: true,
+                pipeIn: (value: any) => {
+                  if (!isObject(value)) {
+                    return Array.isArray(value) ? value : [];
+                  }
+
+                  const res = Object.keys(value).map((item: any) => {
+                    return {
+                      key: item || 0,
+                      value: value[item] || ''
+                    };
+                  }); //.filter((item: any) => item.key <= this.count);
+
+                  return res;
+                },
+                pipeOut: (value: any[]) => {
+                  if (!value.length) {
+                    return undefined;
+                  }
+
+                  const res: any = {};
+                  const findMinCanUsedKey = (
+                    keys: string[],
+                    max: number
+                  ): void | number => {
+                    for (let i = 1; i <= max; i++) {
+                      if (!keys.includes(String(i))) {
+                        return i;
+                      }
+                    }
+                  };
+
+                  value.forEach(item => {
+                    const key =
+                      item.key !== undefined
+                        ? Number(item.key)
+                        : findMinCanUsedKey(Object.keys(res), this.count);
+
+                    // && key <= this.count
+                    if (key) {
+                      res[key] = item?.value || '';
+                    }
+                  });
+
+                  return res;
+                }
+              })
+            ]
+          },
+          getSchemaTpl('status', {isFormItem: true, readonly: true}),
+          getSchemaTpl('validation', {
+            tag: ValidatorTag.Check
+          })
+        ])
+      },
+      {
+        title: '外观',
+        body: [
+          getSchemaTpl('collapseGroup', [
+            getSchemaTpl('style:formItem', {
+              renderer: context.info.renderer
+            }),
+            {
+              title: '图标',
+              body: [
+                {
+                  type: 'ae-switch-more',
+                  label: '自定义',
+                  bulk: true,
+                  mode: 'normal',
+                  value: false,
+                  formType: 'extend',
+                  form: {
+                    body: [
+                      {
+                        type: 'input-text',
+                        label: '字符',
+                        name: 'char'
+                      }
+                    ]
+                  },
+                  pipeIn: (value: string) => {
+                    if (typeof value === 'string' && value.length) {
+                      return {
+                        character: value
+                      };
+                    }
+                    return undefined;
+                  },
+                  pipeOut: (value: any) => {
+                    if (!isObject(value)) {
+                      return undefined;
+                    }
+                    return typeof value.character === 'string'
+                      ? value.character
+                      : undefined;
+                  }
+                },
+
+                {
+                  type: 'input-color',
+                  label: tipedLabel('未选中色值', '默认未选中色值为 #e7e7e8'),
+                  name: 'inactiveColor',
+                  pipeIn: defaultValue('#e7e7e8'),
+                  pipeOut: undefinedPipeOut
+                },
+
+                getSchemaTpl('combo-container', {
+                  type: 'combo',
+                  label: '选中色值',
+                  mode: 'normal',
+                  name: 'colors',
+                  items: [
+                    {
+                      placeholder: 'Key',
+                      type: 'input-number',
+                      unique: true,
+                      name: 'key',
+                      columnClassName: 'w-xs flex-none',
+                      min: 0,
+                      max: 10,
+                      step: 1,
+                      precision: 0
+                    },
+
+                    {
+                      placeholder: 'Value',
+                      type: 'input-color',
+                      name: 'value'
+                    }
+                  ],
+                  value: {
+                    2: '#abadb1',
+                    3: '#787b81',
+                    5: '#ffa900'
+                  },
+                  draggable: false,
+                  multiple: true,
+                  pipeIn: (value: any) => {
+                    if (!isObject(value)) {
+                      return Array.isArray(value) ? value : [];
+                    }
+
+                    const res = Object.keys(value).map((item: any) => {
+                      return {
+                        key: item,
+                        value: value[item] || ''
+                      };
+                    }); //.filter((item: any) => item.key <= this.count);
+
+                    return res;
+                  },
+                  pipeOut: (value: any[]) => {
+                    if (!value.length) {
+                      return undefined;
+                    }
+
+                    const res: any = {};
+                    const findMinCanUsedKey = (
+                      keys: string[],
+                      max: number
+                    ): void | number => {
+                      for (let i = 1; i <= max; i++) {
+                        if (!keys.includes(String(i))) {
+                          return i;
+                        }
+                      }
+                    };
+
+                    value.forEach(item => {
+                      const key =
+                        item.key !== undefined
+                          ? Number(item.key)
+                          : findMinCanUsedKey(Object.keys(res), this.count);
+
+                      if (key) {
+                        res[key] = item?.value || '';
+                      }
+                    });
+
+                    return res;
+                  }
+                })
+              ]
+            },
+            {
+              title: '描述',
+              body: [
+                getSchemaTpl('horizontal-align', {
+                  name: 'textPosition',
+                  pipeIn: defaultValue('right')
+                })
+              ]
+            },
+            getSchemaTpl('style:classNames', {
+              schema: [
+                getSchemaTpl('className', {
+                  label: '图标',
+                  name: 'charClassName'
+                }),
+
+                getSchemaTpl('className', {
+                  label: '评分描述',
+                  name: 'textClassName'
+                })
+              ]
+            })
+          ])
+        ]
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  };
+}
+
+registerEditorPlugin(RateControlPlugin);

package/src/plugin/Form/InputRepeat.tsx

@@ -0,0 +1,57 @@
+import {getSchemaTpl} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {BasePlugin} from '../../plugin';
+
+export class RepeatControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-repeat';
+  $schema = '/schemas/RepeatControlSchema.json';
+
+  // 组件名称
+  name = '重复周期选择';
+  isBaseComponent = true;
+  icon = 'fa fa-repeat';
+  description = `选择重复的频率，如每时、每天、每周等`;
+  docLink = '/amis/zh-CN/components/form/input-repeat';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-repeat',
+    label: '周期',
+    name: 'repeat'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '周期';
+  panelBody = [
+    getSchemaTpl('switchDefaultValue'),
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"'
+    },
+
+    {
+      name: 'options',
+      type: 'select',
+      label: '启用单位',
+      options: 'secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly'.split(
+        ','
+      ),
+      value: 'hourly,daily,weekly,monthly',
+      multiple: true
+    }
+  ];
+}
+
+registerEditorPlugin(RepeatControlPlugin);