Class ImagesPlugin

packages/amis-editor/src/plugin/Images.tsx:6–274

import {mockValue} from 'amis-editor-core';

export class ImagesPlugin extends BasePlugin {
  static id = 'ImagesPlugin';
  static scene = ['layout'];
  // 关联渲染器名字
  rendererName = 'images';
  $schema = '/schemas/ImagesSchema.json';

  // 组件名称
  name = '图片集';
  isBaseComponent = true;
  description = '展示多张图片';
  docLink = '/amis/zh-CN/components/images';
  tags = ['展示'];
  icon = 'fa fa-clone';
  pluginIcon = 'images-plugin';
  scaffold = {
    type: 'images',
    imageGallaryClassName: 'app-popover :AMISCSSWrapper',
    displayMode: 'thumb' // 默认缩略图模式
  };
  previewSchema = {
    ...this.scaffold,
    listClassName: 'nowrap',
    thumbMode: 'cover',
    value: [
      {
        title: '图片1',
        image: mockValue({type: 'image'}),
        src: mockValue({type: 'image'})
      },
      {
        title: '图片2',
        image: mockValue({type: 'image'}),
        src: mockValue({type: 'image'})
      }
    ]
  };

  panelTitle = '图片集';
  panelJustify = true;
  panelBodyCreator = (context: BaseEventContext) => {
    const isUnderField = /\/field\/\w+$/.test(context.path as string);
    const i18nEnabled = getI18nEnabled();
    return getSchemaTpl('tabs', [
      {
        title: '属性',
        body: getSchemaTpl('collapseGroup', [
          {
            title: '基本',
            body: (isUnderField
              ? []
              : [
                  {
                    type: 'formula',
                    name: '__mode',
                    autoSet: false,
                    formula:
                      '!this.name && !this.source && Array.isArray(this.options) ? 2 : 1'