amis-theme-editor/lib/component/Image.js

amis主题编辑器

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

'use strict';

var React = require('react');
var amisCore = require('amis-core');
var index = require('./index.js');
var cx = require('classnames');
var tpl = require('../tpl.js');
var i18nRuntime = require('i18n-runtime');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);

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["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
    className: "theme-component"
  }, React__default["default"].createElement("div", {
    className: "theme-component-title"
  }, title), React__default["default"].createElement("div", {
    className: cx__default["default"]('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: i18nRuntime.i18n("b6453aea1848b65a9a76cccca94715ec"),
  path: 'component.image.image.default',
  body: tpl.getSchemaTpl('collapseGroup', [{
    title: i18nRuntime.i18n("16a20243f9b741c08216dc9548de2968"),
    body: [{
      type: 'amis-theme-wrapper',
      label: false,
      title: i18nRuntime.i18n("e8ed49e9fde0bb778e2185876c2d2697"),
      body: [{
        mode: 'default',
        type: 'amis-theme-padding-and-margin',
        hideMargin: true,
        name: 'normal.body.padding-and-margin'
      }]
    }]
  }, {
    title: i18nRuntime.i18n("32c65d8d7431e76029678ec7bb73a5ab"),
    body: [{
      type: 'amis-theme-font-editor',
      label: false,
      hasSenior: false,
      hideFontFamily: true,
      hideLineHeight: true,
      hideFontWeight: true,
      name: 'normal.body.font'
    }, {
      type: 'amis-theme-wrapper',
      label: false,
      title: i18nRuntime.i18n("aaf20517d24c1f28f6e6d38e55af765a"),
      body: [{
        type: 'amis-theme-select',
        name: "normal.body.title-marginTop",
        label: false,
        extraUnit: ['px'],
        options: '${sizesOptions}'
      }]
    }]
  }, {
    title: i18nRuntime.i18n("3bdd08adab6ea90b9164b20a0e4151ac"),
    body: [{
      type: 'amis-theme-font-editor',
      label: false,
      hasSenior: false,
      hideFontFamily: true,
      hideLineHeight: true,
      hideFontWeight: true,
      name: 'description.body.font'
    }, {
      type: 'amis-theme-wrapper',
      label: false,
      title: i18nRuntime.i18n("d0ea59170f279c57dda7cc825f87ce32"),
      body: [{
        type: 'amis-theme-select',
        name: "description.body.marginTop",
        label: false,
        extraUnit: ['px'],
        options: '${sizesOptions}'
      }]
    }]
  }])
};
var imagesEdit = {
  title: i18nRuntime.i18n("3fca5e5be30a99b8ca5e14173773f47c"),
  path: 'component.image.images',
  body: tpl.getSchemaTpl('collapseGroup', [{
    title: i18nRuntime.i18n("3fca5e5be30a99b8ca5e14173773f47c"),
    body: [{
      label: i18nRuntime.i18n("e8ed49e9fde0bb778e2185876c2d2697"),
      mode: 'default',
      type: 'amis-theme-padding-and-margin',
      name: 'item.body.padding-and-margin',
      hidePadding: true
    }]
  }, {
    title: i18nRuntime.i18n("999bd6b9123e102268afd2dbb91ad2e4"),
    body: [{
      type: 'amis-theme-select',
      name: 'item.body.size',
      label: i18nRuntime.i18n("58f966670529f4753fb3c5a0647606be"),
      options: '${sizesOptions}'
    }, {
      type: 'amis-theme-color-picker',
      label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
      labelMode: 'input',
      name: 'item.body.color',
      options: '${colorOptions}'
    }]
  }, {
    title: i18nRuntime.i18n("b95351567e5445e1de3899b2661a22cc"),
    body: [{
      type: 'amis-theme-select',
      name: 'preview.body.radius',
      label: i18nRuntime.i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
      options: '${sizesOptions}'
    }, {
      type: 'amis-theme-color-picker',
      label: i18nRuntime.i18n("2f97db95d75280bfedc5afa72d2c717d"),
      labelMode: 'input',
      name: 'preview.body.bgColor',
      options: '${colorOptions}'
    }, {
      label: i18nRuntime.i18n("e8ed49e9fde0bb778e2185876c2d2697"),
      mode: 'default',
      type: 'amis-theme-padding-and-margin',
      name: 'preview.body.padding-and-margin',
      hideMargin: true
    }]
  }])
};
var ThemeImage = function (props) {
  return {
    title: i18nRuntime.i18n("7572d9baf4681e0c962268bc3e3470dc"),
    body: [{
      title: i18nRuntime.i18n("20def7942674282277c3714ed7ea6ce0"),
      body: function (onEdit) {
        return React__default["default"].createElement(ThemeImageCommon, {
          activeId: props.activeId,
          onEdit: onEdit,
          title: i18nRuntime.i18n("11bb6310326a93c191bce926a990bd41"),
          edit: imageBaseEdit,
          body: React__default["default"].createElement("div", null, amisCore.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: i18nRuntime.i18n("6a0b83890926debf2e24b3b3f49b339f"),
            imageCaption: i18nRuntime.i18n("40f55a65afcebaea209ad2373a0220fc")
          }))
        });
      }
    }, {
      title: i18nRuntime.i18n("e040fc4bf539dd1cf6ebca6b4bff857a"),
      body: [{
        title: i18nRuntime.i18n("e040fc4bf539dd1cf6ebca6b4bff857a"),
        body: function (onEdit) {
          return React__default["default"].createElement(ThemeImageCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: i18nRuntime.i18n("33618b4ab12dd6c8cc394e137b71b943"),
            edit: imagesEdit,
            body: React__default["default"].createElement("div", null, amisCore.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
              }]
            }))
          });
        }
      }]
    }]
  };
};
index.registerComponent('image', {
  type: 'data-show',
  label: i18nRuntime.i18n("20def7942674282277c3714ed7ea6ce0"),
  key: 'image',
  component: function () {
    return ThemeImage;
  }
});