amis-editor 4.1.0-beta.2 → 4.1.0-beta.20

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,175 @@
+import {relativeValueRe} from 'amis';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+import moment from 'moment';
+
+export class DateControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-date';
+  $schema = '/schemas/DateControlSchema.json';
+
+  order = -450;
+
+  // 组件名称
+  icon = 'fa fa-calendar';
+  name = '日期框';
+  isBaseComponent = true;
+  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
+      }
+    ]
+  };
+
+  panelTitle = '日期配置';
+  panelBody = [
+    getSchemaTpl('placeholder', {
+      pipeIn: defaultValue('请选择日期')
+    }),
+
+    {
+      type: 'input-text',
+      name: 'format',
+      label: '值格式',
+      description:
+        '请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。',
+      pipeIn: defaultValue('X'),
+      onChange: (value: any, oldValue: any, model: any, form: any) => {
+        form.setValueByName('value', '');
+        form.setValueByName('minDate', '');
+        form.setValueByName('maxDate', '');
+      }
+    },
+
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"',
+      placeholder: '请输入相对值',
+      description: '支持 <code>now、+1day、-2weeks</code>这种相对值用法'
+    },
+
+    {
+      type: 'fieldSet',
+      title: '使用固定值',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      visibleOn: 'typeof this.value !== "undefined"',
+      body: [
+        {
+          type: 'input-date',
+          name: 'value',
+          pipeIn: (value: any) =>
+            moment(
+              relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
+                ? ''
+                : value
+            ).format('X'),
+          pipeOut: (value: any, old: any, data: any) => {
+            return moment(parseInt(value, 10), 'X').format(data.format);
+          }
+        }
+      ]
+    },
+    getSchemaTpl('clearable', {
+      pipeIn: defaultValue(true)
+    }),
+
+    {
+      type: 'input-text',
+      name: 'minDate',
+      label: '最小日期',
+      placeholder: '请输入相对值',
+      description:
+        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
+    },
+
+    {
+      type: 'fieldSet',
+      title: '使用固定值',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      body: [
+        {
+          type: 'input-date',
+          name: 'minDate',
+          pipeIn: (value: any) =>
+            moment(
+              relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
+                ? ''
+                : value
+            ).format('X'),
+          pipeOut: (value: any, old: any, data: any) => {
+            return moment(parseInt(value, 10), 'X').format(data.format);
+          }
+        }
+      ]
+    },
+
+    {
+      type: 'divider'
+    },
+
+    {
+      type: 'input-text',
+      name: 'maxDate',
+      label: '最大日期',
+      placeholder: '请输入相对值',
+      description:
+        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
+    },
+
+    {
+      type: 'fieldSet',
+      title: '使用固定值',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      body: [
+        {
+          type: 'input-date',
+          name: 'maxDate',
+          pipeIn: (value: any) =>
+            moment(
+              relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
+                ? ''
+                : value
+            ).format('X'),
+          pipeOut: (value: any, old: any, data: any) => {
+            return moment(parseInt(value, 10), 'X').format(data.format);
+          }
+        }
+      ]
+    }
+  ];
+}
+
+registerEditorPlugin(DateControlPlugin);

package/src/plugin/Form/InputDateRange.tsx

@@ -0,0 +1,225 @@
+import {relativeValueRe} from 'amis';
+import {
+  defaultValue,
+  getSchemaTpl,
+  valuePipeOut
+} from '../../component/schemaTpl';
+import {registerEditorPlugin} from '../../manager';
+import {
+  BasePlugin,
+  BasicSubRenderInfo,
+  RendererEventContext,
+  SubRendererInfo
+} from '../../plugin';
+import moment from 'moment';
+
+export class DateRangeControlPlugin extends BasePlugin {
+  // 关联渲染器名字
+  rendererName = 'input-date-range';
+  $schema = '/schemas/DateRangeControlSchema.json';
+
+  order = -440;
+
+  // 组件名称
+  icon = 'fa fa-calendar';
+  name = '日期范围';
+  isBaseComponent = true;
+  description =
+    '日期范围选择，可通过<code>minDate</code>、<code>maxDate</code>设定最小、最大日期';
+  docLink = '/amis/zh-CN/components/form/input-date-range';
+  tags = ['表单项'];
+  scaffold = {
+    type: 'input-date-range',
+    label: '日期范围',
+    name: 'date-range'
+  };
+  previewSchema: any = {
+    type: 'form',
+    className: 'text-left',
+    mode: 'horizontal',
+    wrapWithPanel: false,
+    body: [
+      {
+        ...this.scaffold
+      }
+    ]
+  };
+
+  panelTitle = '日期范围';
+  panelBody = [
+    getSchemaTpl('placeholder', {
+      pipeIn: defaultValue('请选择日期范围')
+    }),
+
+    {
+      type: 'input-text',
+      name: 'format',
+      label: '值格式',
+      description:
+        '请参考 <a href="https://momentjs.com/" target="_blank">moment</a> 中的格式用法。',
+      pipeIn: defaultValue('X'),
+      onChange: (value: any, oldValue: any, model: any, form: any) => {
+        form.setValueByName('value', '');
+        form.setValueByName('minDate', '');
+        form.setValueByName('maxDate', '');
+      }
+    },
+
+    getSchemaTpl('switchDefaultValue'),
+
+    {
+      type: 'input-text',
+      name: 'value',
+      label: '默认值',
+      visibleOn: 'typeof this.value !== "undefined"',
+      placeholder: '请输入相对值',
+      description:
+        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，由于包含开始和结束时间，请用逗号隔开。'
+    },
+
+    {
+      type: 'fieldSet',
+      title: '使用固定值',
+      visibleOn: 'typeof this.value !== "undefined"',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      body: [
+        {
+          type: 'input-date-range',
+          name: 'value',
+          pipeIn: (value: any) =>
+            value
+              ? value
+                  .split(',')
+                  .map((item: any) =>
+                    moment(
+                      relativeValueRe.test(item) ||
+                        ~['now', 'today'].indexOf(item)
+                        ? ''
+                        : item
+                    ).format('X')
+                  )
+              : '',
+          pipeOut: (value: any, old: any, data: any) => {
+            let {format} = data;
+            if (format) {
+              let val = value.split(',');
+              value = val
+                .map((item: string) =>
+                  moment(parseInt(item, 10), 'X').format(format)
+                )
+                .join(',');
+            }
+            return value;
+          }
+        }
+      ]
+    },
+    getSchemaTpl('clearable', {
+      pipeIn: defaultValue(true)
+    }),
+    {
+      type: 'input-text',
+      name: 'minDate',
+      label: '最小日期',
+      placeholder: '请输入相对值',
+      description:
+        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
+    },
+
+    {
+      type: 'fieldSet',
+      title: '使用固定值',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      body: [
+        {
+          type: 'input-date',
+          name: 'minDate',
+          pipeIn: (value: any) =>
+            moment(
+              relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
+                ? ''
+                : value
+            ).format('X'),
+          pipeOut: (value: any, old: any, data: any) => {
+            return moment(parseInt(value, 10), 'X').format(data.format);
+          }
+        }
+      ]
+    },
+
+    {
+      type: 'divider'
+    },
+
+    {
+      type: 'input-text',
+      name: 'maxDate',
+      label: '最大日期',
+      placeholder: '请输入相对值',
+      description:
+        '支持 <code>now、+1day、-2weeks</code>这种相对值用法，同时支持变量如<code>\\${start_date}</code>'
+    },
+
+    {
+      type: 'fieldSet',
+      title: '使用固定值',
+      collapsed: true,
+      collapsable: true,
+      className: 'fieldset',
+      body: [
+        {
+          type: 'input-date',
+          name: 'maxDate',
+          pipeIn: (value: any) =>
+            moment(
+              relativeValueRe.test(value) || ~['now', 'today'].indexOf(value)
+                ? ''
+                : value
+            ).format('X'),
+          pipeOut: (value: any, old: any, data: any) => {
+            return moment(parseInt(value, 10), 'X').format(data.format);
+          }
+        }
+      ]
+    },
+    {
+      type: 'input-text',
+      name: 'minDuration',
+      label: '限制最小跨度',
+      description: '比如 2days'
+    },
+    {
+      type: 'input-text',
+      name: 'ranges',
+      label: '日期范围快捷键',
+      description:
+        '比如 today, yesterday, 1dayago, 7daysago, 90daysago, prevweek, thismonth, prevmonth, prevquarter, thisquarter'
+    },
+    {
+      type: 'input-text',
+      name: 'maxDuration',
+      label: '限制最大跨度',
+      description: '比如 1year'
+    },
+    {
+      name: 'utc',
+      label: '是否使用 UTC 时间',
+      type: 'switch',
+      mode: 'inline',
+      className: 'block'
+    },
+    {
+      name: 'embed',
+      label: '是否内嵌模式',
+      type: 'switch',
+      mode: 'inline',
+      className: 'block'
+    }
+  ];
+}
+
+registerEditorPlugin(DateRangeControlPlugin);