eapp-amis-theme-editor/esm/component/Image.js

amis主题编辑器

/**
 * amis-theme-editor v2.0.11-beta.2
 * Copyright 2018-2023 @fex
 */

import React__default from 'react';
import { render } from 'amis-core';
import { registerComponent } from './index.js';
import cx from 'classnames';
import { getSchemaTpl } from '../tpl.js';
import { i18n } from 'i18n-runtime';

var ThemeImageCommon = function (props) {
  var title = props.title,
    edit = props.edit,
    body = props.body,
    activeId = props.activeId,
    refreshToken = props.refreshToken;
  function handleEdit() {
    props.onEdit(edit);
  }
  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
    className: "theme-component"
  }, React__default.createElement("div", {
    className: "theme-component-title"
  }, title), React__default.createElement("div", {
    className: cx('theme-component-content', 'theme-component-content-transfer', activeId === edit.path && 'theme-component-content--active'),
    onClick: function () {
      handleEdit();
    }
  }, refreshToken === edit.path ? null : body)));
};
var imageBaseEdit = {
  title: i18n("b6453aea1848b65a9a76cccca94715ec"),
  path: 'component.image.image.default',
  body: getSchemaTpl('collapseGroup', [{
    title: '整体',
    body: [{
      type: 'amis-theme-wrapper',
      label: false,
      title: i18n("e8ed49e9fde0bb778e2185876c2d2697"),
      body: [{
        mode: 'default',
        type: 'amis-theme-padding-and-margin',
        hideMargin: true,
        name: 'normal.body.padding-and-margin'
      }]
    }]
  }, {
    title: i18n("32c65d8d7431e76029678ec7bb73a5ab"),
    body: [{
      type: 'amis-theme-font-editor',
      label: false,
      hasSenior: false,
      hideFontFamily: true,
      hideLineHeight: true,
      hideFontWeight: true,
      name: 'normal.body.font'
    }]
  }, {
    title: i18n("3bdd08adab6ea90b9164b20a0e4151ac"),
    body: [{
      type: 'amis-theme-font-editor',
      label: false,
      hasSenior: false,
      hideFontFamily: true,
      hideLineHeight: true,
      hideFontWeight: true,
      name: 'description.body.font'
    }]
  }])
};
var imagesEdit = {
  title: '图片项',
  path: 'component.image.images',
  body: getSchemaTpl('collapseGroup', [{
    title: '图片项',
    body: [{
      label: i18n("e8ed49e9fde0bb778e2185876c2d2697"),
      mode: 'default',
      type: 'amis-theme-padding-and-margin',
      name: 'item.body.padding-and-margin',
      hidePadding: true
    }]
  }, {
    title: '图片预览 切换箭头',
    body: [{
      type: 'amis-theme-select',
      name: 'item.body.size',
      label: i18n("58f966670529f4753fb3c5a0647606be"),
      options: '${sizesOptions}'
    }, {
      type: 'amis-theme-color-picker',
      label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
      labelMode: 'input',
      name: 'item.body.color',
      options: '${colorOptions}'
    }]
  }, {
    title: '图片预览 工具栏',
    body: [{
      type: 'amis-theme-select',
      name: 'preview.body.radius',
      label: i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
      options: '${sizesOptions}'
    }, {
      type: 'amis-theme-color-picker',
      label: i18n("2f97db95d75280bfedc5afa72d2c717d"),
      labelMode: 'input',
      name: 'preview.body.bgColor',
      options: '${colorOptions}'
    }, {
      label: i18n("e8ed49e9fde0bb778e2185876c2d2697"),
      mode: 'default',
      type: 'amis-theme-padding-and-margin',
      name: 'preview.body.padding-and-margin',
      hideMargin: true
    }]
  }])
};
var ThemeImage = function (props) {
  return {
    title: '图片 Image',
    body: [{
      title: '图片',
      body: function (onEdit) {
        return React__default.createElement(ThemeImageCommon, {
          activeId: props.activeId,
          onEdit: onEdit,
          title: "\u6807\u9898\u548C\u8BF4\u660E",
          edit: imageBaseEdit,
          body: React__default.createElement("div", null, render({
            type: 'image',
            src: 'https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80',
            title: '这是标题',
            imageCaption: '这是一段说明'
          }))
        });
      }
    }, {
      title: '图片集',
      body: [{
        title: '图片集',
        body: function (onEdit) {
          return React__default.createElement(ThemeImageCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: "\u56FE\u7247\u96C6\u9884\u89C8",
            edit: imagesEdit,
            body: React__default.createElement("div", null, render({
              type: 'page',
              data: {
                imageList: ['https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80', 'https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80', 'https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80', 'https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80', 'https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80']
              },
              body: [{
                type: 'images',
                name: 'imageList',
                enlargeAble: true,
                showToolbar: true
              }]
            }))
          });
        }
      }]
    }]
  };
};
registerComponent('image', {
  type: 'data-show',
  label: '图片',
  key: 'image',
  component: function () {
    return ThemeImage;
  }
});