amis-theme-editor/lib/component/Combo.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 tpl = require('../tpl.js');
var cx = require('classnames');
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 ThemeComboCommon = 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-collapse-content', activeId === edit.path && 'theme-component-content--active'),
    onClick: function () {
      handleEdit();
    }
  }, refreshToken === edit.path ? null : body)));
};
var ThemeCombo = function (props) {
  return {
    title: i18nRuntime.i18n("bfc11572b8e9040c30a819a719b13dc0"),
    body: [{
      title: i18nRuntime.i18n("e1371d733ff347664655629011b4130f"),
      body: [{
        title: i18nRuntime.i18n("18c63459a2c069022c7790430f761214"),
        body: function (onEdit) {
          return React__default["default"].createElement(ThemeComboCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: i18nRuntime.i18n("18c63459a2c069022c7790430f761214"),
            edit: {
              title: i18nRuntime.i18n("c51efb736b7b9d54241ab06fd71e68b4"),
              path: 'component.combo.base.body',
              body: tpl.getSchemaTpl('normal', [{
                type: 'amis-theme-wrapper',
                label: false,
                title: false,
                body: [{
                  type: 'amis-theme-color-picker',
                  label: i18nRuntime.i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
                  labelMode: 'input',
                  name: 'bg-color',
                  options: '${colorOptions}'
                }]
              }, {
                type: 'amis-theme-wrapper',
                label: false,
                title: i18nRuntime.i18n("961534b4ea37e4e88aada736b299d063"),
                body: [{
                  mode: 'default',
                  type: 'amis-theme-border',
                  name: 'vertical-border'
                }]
              }, {
                type: 'amis-theme-wrapper',
                label: false,
                title: i18nRuntime.i18n("9fc1105215d759d88e70ac45bc7cfbe8"),
                body: [{
                  mode: 'default',
                  type: 'amis-theme-border',
                  name: 'vertical-hover-border'
                }]
              }, {
                type: 'amis-theme-wrapper',
                label: false,
                title: i18nRuntime.i18n("0103eb2d3dca70270d1a74e9ec987ac9"),
                body: [{
                  mode: 'default',
                  type: 'amis-theme-radius',
                  disableBorder: true,
                  name: 'vertical-border'
                }]
              }, {
                type: 'amis-theme-wrapper',
                label: false,
                title: i18nRuntime.i18n("841d77223f0ec8cd0b530ed8e0775b20"),
                body: [{
                  mode: 'default',
                  type: 'amis-theme-padding-and-margin',
                  name: 'vertical-padding-and-margin',
                  source: '${sizesOptions}',
                  hideMargin: true
                }]
              }])
            },
            body: amisCore.render({
              type: 'combo',
              name: 'combo1',
              label: false,
              multiLine: true,
              items: [{
                name: 'text',
                label: i18nRuntime.i18n("97d07614380da93d257f9fbf81aa56fb"),
                type: 'input-text'
              }, {
                name: 'select',
                label: i18nRuntime.i18n("ea15ae2b7fba76c83eec6d0986d15197"),
                type: 'select',
                options: ['a', 'b', 'c']
              }]
            })
          });
        }
      }, {
        title: i18nRuntime.i18n("93dee976f68681ec6950380d757d8c18"),
        body: function (onEdit) {
          return React__default["default"].createElement(ThemeComboCommon, {
            activeId: props.activeId,
            refreshToken: props.refreshToken,
            onEdit: onEdit,
            title: i18nRuntime.i18n("93dee976f68681ec6950380d757d8c18"),
            edit: {
              title: i18nRuntime.i18n("5f912a0a8e501c948fd42da54201d664"),
              path: 'component.combo.multi.body',
              body: tpl.getSchemaTpl('collapseGroup', [{
                title: i18nRuntime.i18n("a3a36a013c7e5e647062a8467940b618"),
                body: [{
                  type: 'amis-theme-wrapper',
                  label: false,
                  title: false,
                  body: [{
                    type: 'amis-theme-color-picker',
                    label: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
                    labelMode: 'input',
                    name: 'delBtn-color',
                    options: '${colorOptions}'
                  }, {
                    type: 'amis-theme-color-picker',
                    label: i18nRuntime.i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
                    labelMode: 'input',
                    name: 'delBtn-hover-color',
                    options: '${colorOptions}'
                  }]
                }]
              }])
            },
            body: amisCore.render({
              type: 'combo',
              name: 'combo2',
              label: false,
              multiple: true,
              items: [{
                name: 'text',
                label: i18nRuntime.i18n("97d07614380da93d257f9fbf81aa56fb"),
                type: 'input-text'
              }, {
                name: 'select',
                label: i18nRuntime.i18n("ea15ae2b7fba76c83eec6d0986d15197"),
                type: 'select',
                options: ['a', 'b', 'c']
              }]
            })
          });
        }
      }]
    }]
  };
};
index.registerComponent('combo', {
  type: 'data-entry',
  label: i18nRuntime.i18n("254bb8aa6b92d588d957a383df24db1e"),
  key: 'combo',
  component: function () {
    return ThemeCombo;
  }
});