amis-theme-editor/esm/component/InputTag.js

amis主题编辑器

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

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

var ThemeInputTagCommon = 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', activeId === edit.path && 'theme-component-content--active'),
    onClick: function () {
      handleEdit();
    }
  }, refreshToken === edit.path ? null : body)));
};
var ThemeInputTag = function (props) {
  return {
    title: i18n("2411e6a4b03f859794603606f5f4b8a4"),
    body: [{
      title: i18n("b6453aea1848b65a9a76cccca94715ec"),
      body: [{
        title: i18n("3e0fe687ac1d7bc5dea7b369c5e3dca2"),
        body: function (onEdit) {
          return React__default.createElement(ThemeInputTagCommon, {
            activeId: props.activeId,
            refreshToken: props.refreshToken,
            onEdit: onEdit,
            title: i18n("3e0fe687ac1d7bc5dea7b369c5e3dca2"),
            edit: {
              title: i18n("3e0fe687ac1d7bc5dea7b369c5e3dca2"),
              path: 'component.inputTag.option.body',
              body: getSchemaTpl('normal', [{
                type: 'amis-theme-wrapper',
                label: false,
                title: false,
                body: [{
                  type: 'amis-theme-select',
                  name: 'height',
                  label: i18n("785812ea5aa89fb6f9df4ca1aca0c1e4"),
                  options: '${sizesOptions}'
                }]
              }, {
                type: 'amis-theme-font-editor',
                label: false,
                hasSenior: false,
                hideFontFamily: true,
                name: 'font'
              }, {
                type: 'amis-theme-wrapper',
                label: false,
                title: i18n("841d77223f0ec8cd0b530ed8e0775b20"),
                body: [{
                  mode: 'default',
                  type: 'amis-theme-padding-and-margin',
                  name: 'padding-and-margin',
                  source: '${sizesOptions}',
                  hideMargin: true
                }]
              }, {
                type: 'amis-theme-wrapper',
                label: false,
                title: i18n("14d342362f66aa86e2aa1c1e11aa1204"),
                body: [{
                  type: 'amis-theme-color-picker',
                  label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
                  name: 'bg-color',
                  labelMode: 'input',
                  options: '${colorOptions}'
                }, {
                  type: 'amis-theme-color-picker',
                  label: i18n("c0b513c835e841fbdbb0a117e8769161"),
                  name: 'hover-color',
                  labelMode: 'input',
                  options: '${colorOptions}'
                }, {
                  type: 'amis-theme-color-picker',
                  label: i18n("8b47539aaa82598d99b28094547418a8"),
                  name: 'hover-bg-color',
                  labelMode: 'input',
                  options: '${colorOptions}'
                }]
              }])
            },
            body: render({
              type: 'input-tag',
              name: 'tag',
              label: false,
              options: ['optionA', 'optionB', 'optionC']
            })
          });
        }
      }]
    }]
  };
};
registerComponent('input-tag', {
  type: 'data-entry',
  label: i18n("a0d2d27fe320721bd5b0157fd5466b9d"),
  key: 'input-tag',
  component: function () {
    return ThemeInputTag;
  }
});