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

amis主题编辑器

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

import { __spreadArray } from 'tslib';
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 ComponentStateFunc = function (visibleOn, state, type) {
  return [{
    type: 'amis-theme-wrapper',
    label: false,
    title: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
    visibleOn: visibleOn,
    body: [{
      type: 'amis-theme-color-picker',
      label: i18n("5b7183e64703529babab5caa6c50ea9b"),
      labelMode: 'input',
      name: "".concat(state, ".body.color"),
      options: '${colorOptions}'
    }, {
      type: 'amis-theme-color-picker',
      label: i18n("ca746b1ff10193a3ce20878dec04a733"),
      labelMode: 'input',
      name: "".concat(state, ".body.text-color"),
      options: '${colorOptions}'
    }, {
      type: 'amis-theme-color-picker',
      label: i18n("8e1b944f4389bdaab6f11d5bc83190c8"),
      labelMode: 'input',
      name: "".concat(state, ".body.bg-color"),
      options: '${colorOptions}'
    }]
  }];
};
var ComponentTypeConfig = function (type) {
  return getSchemaTpl('collapseGroup', [{
    title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
    body: [{
      type: 'input-text',
      label: i18n("d7ec2d3fea4756bc1642e0f10c180cf5"),
      disabled: true,
      name: 'label'
    }, {
      type: 'select',
      name: 'state',
      label: i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
      selectFirst: true,
      options: [{
        label: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
        value: 'default'
      }, {
        label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
        value: 'hover'
      }, {
        label: i18n("fad7c8a21fe3d7b3eb1db3d8a3212503"),
        value: 'active'
      }, {
        label: i18n("710ad08b11419332713360d2750cd707"),
        value: 'disabled'
      }]
    }]
  }, {
    title: i18n("9e4ab3933a0281a681412c59e51546cc"),
    body: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], ComponentStateFunc("${state == 'default' || !state}", 'default'), true), ComponentStateFunc("${state == 'hover'}", 'hover'), true), ComponentStateFunc("${state == 'active'}", 'active'), true), ComponentStateFunc("${state == 'disabled'}", 'disabled'), true), [{
      type: 'amis-theme-font-editor',
      label: false,
      visibleOn: "${state == 'default' || !state}",
      hasSenior: false,
      hideColor: true,
      hideFontFamily: true,
      name: 'default.body.font'
    }, {
      type: 'amis-theme-wrapper',
      label: false,
      title: i18n("2bcd5b5670c24afc461f2ba24dbd0ec5"),
      visibleOn: "${state == 'default' || !state}",
      body: [{
        type: 'amis-theme-select',
        name: 'default.body.point-size',
        label: i18n("5b7183e64703529babab5caa6c50ea9b"),
        options: '${sizesOptions}'
      }, {
        type: 'amis-theme-select',
        name: 'default.body.point-inner-size',
        label: i18n("e6b83f8e996ea466549d169d6f94eb05"),
        options: '${sizesOptions}'
      }]
    }, {
      type: 'amis-theme-wrapper',
      label: false,
      title: i18n("4e7f76261f8c4c6d78998f85fc1f4c6e"),
      visibleOn: "${state == 'default' || !state}",
      body: [{
        mode: 'default',
        type: 'amis-theme-padding-and-margin',
        name: 'default.body.padding-and-margin',
        source: '${sizesOptions}',
        hidePadding: true
      }]
    }, {
      type: 'amis-theme-wrapper',
      label: false,
      title: i18n("107fe92b267785861723a1dced25b34a"),
      visibleOn: "${state == 'default' || !state}",
      body: [{
        type: 'amis-theme-select',
        name: 'default.body.distance',
        label: i18n("60bac4c0a381a42b320a703227be59eb"),
        options: '${sizesOptions}'
      }]
    }], false)
  }]);
};
var ThemeRadiosCommon = function (props) {
  var title = props.title,
    edit = props.edit,
    body = props.body,
    activeId = props.activeId;
  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();
    }
  }, body)));
};
var ThemeRadios = function (props) {
  return {
    title: i18n("2033941fa24faa8ec2db2c17bb1e750e"),
    body: [{
      title: i18n("e1371d733ff347664655629011b4130f"),
      body: [{
        title: i18n("18c63459a2c069022c7790430f761214"),
        body: function (onEdit) {
          return React__default.createElement(ThemeRadiosCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: i18n("18c63459a2c069022c7790430f761214"),
            edit: {
              title: i18n("c51efb736b7b9d54241ab06fd71e68b4"),
              path: 'component.radio.base.default',
              body: ComponentTypeConfig()
            },
            body: React__default.createElement("div", {
              className: "theme-component-content-wrap"
            }, render({
              type: 'radios',
              name: 'default',
              label: i18n("22b777e6fcb613b8ba83ced9594cd07e"),
              options: [{
                label: 'OptionA',
                value: 'a'
              }, {
                label: 'OptionB',
                value: 'b'
              }, {
                label: 'OptionC',
                value: 'c'
              }]
            }), render({
              type: 'radios',
              name: 'hover',
              label: i18n("062d0b688adb10f3af5ebc2fd2667f1c"),
              selectFirst: true,
              itemClassName: 'themeEditor-radio-status--hover',
              options: [{
                label: 'OptionA',
                value: 'a'
              }, {
                label: 'OptionB',
                value: 'b'
              }]
            }), render({
              type: 'radios',
              name: 'active',
              label: i18n("4363c17ebb346b646af55bd8c8075915"),
              selectFirst: true,
              options: [{
                label: 'OptionA',
                value: 'a'
              }]
            }), render({
              type: 'radios',
              name: 'disabled',
              disabled: true,
              label: i18n("710ad08b11419332713360d2750cd707"),
              options: [{
                label: 'OptionA',
                value: 'a'
              }]
            }))
          });
        }
      }, {
        title: i18n("f99484b21ba7a64a748c60b52ea0401e"),
        body: function (onEdit) {
          return React__default.createElement(ThemeRadiosCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: i18n("f99484b21ba7a64a748c60b52ea0401e"),
            edit: {
              title: i18n("6a7d82ac2df03b7df35546daaded404c"),
              path: 'component.radio.base.vertical.body',
              body: getSchemaTpl('normal', [{
                type: 'amis-theme-wrapper',
                label: false,
                title: i18n("4e7f76261f8c4c6d78998f85fc1f4c6e"),
                body: [{
                  mode: 'default',
                  type: 'amis-theme-padding-and-margin',
                  name: 'padding-and-margin',
                  source: '${sizesOptions}',
                  hidePadding: true
                }]
              }])
            },
            body: render({
              type: 'radios',
              name: 'vertical',
              label: i18n("f99484b21ba7a64a748c60b52ea0401e"),
              inline: false,
              options: [{
                label: 'OptionA',
                value: 'a'
              }, {
                label: 'OptionB',
                value: 'b'
              }, {
                label: 'OptionC',
                value: 'c'
              }, {
                label: 'OptionD',
                value: 'd'
              }]
            })
          });
        }
      }]
    }]
  };
};
registerComponent('radios', {
  type: 'data-entry',
  label: i18n("9913107b19cb6012250134ff91377430"),
  key: 'radios',
  component: function () {
    return ThemeRadios;
  }
});