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

amis主题编辑器

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

'use strict';

var tslib = require('tslib');
var amisCore = require('amis-core');
var React = require('react');
var cx = require('classnames');
var tpl = require('../tpl.js');
var index = require('./index.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 ThemePanelBase = function (props) {
  var onEdit = props.onEdit,
    activeId = props.activeId;
  function handleEdit() {
    onEdit({
      title: i18nRuntime.i18n("0fd8c6a15323966b5ec33c28c62d01a8"),
      path: "component.panel",
      body: tpl.getSchemaTpl('collapseGroup', [{
        title: i18nRuntime.i18n("cd6f79e7bff1337c12c86a15ceedd6da"),
        body: [{
          type: 'amis-theme-wrapper',
          label: false,
          title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
          body: [{
            label: false,
            type: 'amis-theme-border',
            name: 'panel.body.border'
          }]
        }, {
          type: 'amis-theme-wrapper',
          label: false,
          title: i18nRuntime.i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
          body: [{
            mode: 'default',
            type: 'amis-theme-radius',
            name: 'panel.body.border'
          }]
        }, {
          type: 'amis-theme-wrapper',
          label: false,
          title: i18nRuntime.i18n("4e7f76261f8c4c6d78998f85fc1f4c6e"),
          body: [{
            mode: 'default',
            hidePadding: true,
            type: 'amis-theme-padding-and-margin',
            name: 'panel.body.margin',
            source: '${sizesOptions}'
          }]
        }, {
          type: 'amis-theme-shadow-editor',
          name: 'panel.body.boxShadow',
          label: false,
          hasSenior: false
        }]
      }, {
        title: i18nRuntime.i18n("030c8cb75e9707285b28c4931bfeddc5"),
        body: [{
          type: 'amis-theme-font-editor',
          label: false,
          hasSenior: false,
          hideFontFamily: true,
          name: 'heading.body.font'
        }, {
          type: 'amis-theme-wrapper',
          label: false,
          title: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
          body: [{
            label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
            type: 'amis-theme-color-picker',
            name: 'heading.body.bg',
            options: '${colorOptions}',
            labelMode: 'input'
          }]
        }, {
          type: 'amis-theme-wrapper',
          label: false,
          title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
          body: [{
            label: false,
            type: 'amis-theme-border',
            name: 'heading.body.border'
          }]
        }, {
          type: 'amis-theme-wrapper',
          label: false,
          title: i18nRuntime.i18n("841d77223f0ec8cd0b530ed8e0775b20"),
          body: [{
            mode: 'default',
            hideMargin: true,
            type: 'amis-theme-padding-and-margin',
            name: 'heading.body.padding',
            source: '${sizesOptions}'
          }]
        }]
      }, {
        title: i18nRuntime.i18n("132a78bdf68d6d17bde00aa807bbf032"),
        body: [{
          type: 'amis-theme-wrapper',
          label: false,
          title: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
          body: [{
            label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
            type: 'amis-theme-color-picker',
            name: 'panel.body.bg',
            options: '${colorOptions}',
            labelMode: 'input'
          }]
        }, {
          type: 'amis-theme-wrapper',
          label: false,
          title: i18nRuntime.i18n("841d77223f0ec8cd0b530ed8e0775b20"),
          body: [{
            mode: 'default',
            hideMargin: true,
            type: 'amis-theme-padding-and-margin',
            name: 'body.body.padding',
            source: '${sizesOptions}'
          }]
        }]
      }, {
        title: i18nRuntime.i18n("b3b287010ea79586507a77e0580d9cad"),
        body: [{
          type: 'amis-theme-wrapper',
          label: false,
          title: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
          body: [{
            label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
            type: 'amis-theme-color-picker',
            name: 'footer.body.bg',
            options: '${colorOptions}',
            labelMode: 'input'
          }]
        }, {
          type: 'amis-theme-wrapper',
          label: false,
          title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
          body: [{
            label: false,
            type: 'amis-theme-border',
            name: 'footer.body.border'
          }]
        }, {
          type: 'amis-theme-wrapper',
          label: false,
          title: i18nRuntime.i18n("841d77223f0ec8cd0b530ed8e0775b20"),
          body: [{
            mode: 'default',
            hideMargin: true,
            type: 'amis-theme-padding-and-margin',
            name: 'footer.body.padding',
            source: '${sizesOptions}'
          }]
        }, {
          type: 'amis-theme-wrapper',
          label: false,
          title: i18nRuntime.i18n("fa966345577ba81af19408f203db968f"),
          body: [{
            type: 'amis-theme-select',
            name: 'footer.body.buttonSpace',
            label: i18nRuntime.i18n("60bac4c0a381a42b320a703227be59eb"),
            options: '${sizesOptions}'
          }]
        }]
      }])
    });
  }
  return React__default["default"].createElement("div", {
    className: "Theme-Panel-base"
  }, React__default["default"].createElement("div", {
    className: "Theme-Panel-base-item"
  }, React__default["default"].createElement("div", {
    className: cx__default["default"]('Theme-Panel-base-item-content', 'Theme-Panel-base-item-content--', activeId === 'component.panel' && 'Theme-Panel-base-item-content--active'),
    onClick: function () {
      return handleEdit();
    }
  }, amisCore.render({
    type: 'panel',
    title: i18nRuntime.i18n("1ddb54c8369b5a8706fdd6b64a3f4484"),
    body: i18nRuntime.i18n("e5a88d6b4826a7e0d3fcd9e84e0be275"),
    actions: [{
      type: 'button',
      label: i18nRuntime.i18n("a5681e29ad7dedd3068a0570751b665e"),
      actionType: 'dialog',
      dialog: {
        title: i18nRuntime.i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
        body: i18nRuntime.i18n("930dcc01ce6501d2ece3235288bafcb2"),
        className: 'themeEditor-DialogView'
      }
    }, {
      type: 'button',
      label: i18nRuntime.i18n("b1ec0d9e3a470f5bc919edf8a2287003"),
      actionType: 'dialog',
      dialog: {
        title: i18nRuntime.i18n("02d9819ddaaaeb1b7b22b12608c7e5ca"),
        body: i18nRuntime.i18n("930dcc01ce6501d2ece3235288bafcb2"),
        className: 'themeEditor-DialogView'
      }
    }]
  }))));
};
var ThemePanel = function (props) {
  return {
    title: i18nRuntime.i18n("ded3b8a54c8c5b475fdfd4fc9872c784"),
    body: [{
      title: i18nRuntime.i18n("d614b4f0555dbb3c7eb13e778fd77293"),
      body: function (onEdit) {
        return React__default["default"].createElement(ThemePanelBase, tslib.__assign({}, props, {
          onEdit: onEdit
        }));
      }
    }]
  };
};
index.registerComponent('panel', {
  type: 'layout',
  label: i18nRuntime.i18n("cd6f79e7bff1337c12c86a15ceedd6da"),
  key: 'panel',
  component: function () {
    return ThemePanel;
  }
});