amis-theme-editor/esm/component/Spinner.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 ThemeSpinnerCommon = 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', 'theme-component-content-steps', activeId === edit.path && 'theme-component-content--active'),
    onClick: function () {
      handleEdit();
    }
  }, body)));
};
var ThemeSpinner = function (props) {
  return {
    title: i18n("5578cb0a3bbcddee19497debcf900ab2"),
    body: [{
      title: i18n("e1371d733ff347664655629011b4130f"),
      body: [{
        title: i18n("e1371d733ff347664655629011b4130f"),
        body: function (onEdit) {
          return React__default.createElement(ThemeSpinnerCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: i18n("0796ba76b4b553687e5ffaeb78512ccb"),
            edit: {
              title: i18n("b6453aea1848b65a9a76cccca94715ec"),
              path: 'component.spinner.base.body',
              body: getSchemaTpl('collapseGroup', [{
                title: i18n("4092ed98e9035652d4c9ca9441701ed7"),
                body: [{
                  type: 'amis-theme-font-editor',
                  label: false,
                  title: i18n("ca746b1ff10193a3ce20878dec04a733"),
                  hasSenior: false,
                  hideLineHeight: true,
                  hideFontFamily: true,
                  name: 'font'
                }, {
                  type: 'amis-theme-wrapper',
                  label: false,
                  title: i18n("2aa762be727d1828e507931e418ba065"),
                  body: [{
                    type: 'amis-theme-select',
                    name: 'tip-size',
                    label: i18n("60bac4c0a381a42b320a703227be59eb"),
                    options: '${sizesOptions}'
                  }]
                }]
              }])
            },
            body: render({
              type: 'spinner',
              value: 1,
              tip: i18n("26b5bd4947df8be257c59dde927b400c")
            })
          });
        }
      }]
    }, {
      title: i18n("c8339fd2a85af4ba66084d28df808de4"),
      body: [{
        title: i18n("e1371d733ff347664655629011b4130f"),
        body: function (onEdit) {
          return React__default.createElement(ThemeSpinnerCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: i18n("391b8fa9c747a1799353ab856e666ad5"),
            edit: {
              title: i18n("4ea51786a01ad5701c6c1957f106cfdd"),
              path: 'component.spinner.small.body',
              body: getSchemaTpl('collapseGroup', [{
                title: i18n("37ae4f181d4f139be90fb80cae3fc493"),
                body: [{
                  type: 'amis-theme-wrapper',
                  label: false,
                  title: false,
                  body: [{
                    type: 'amis-theme-select',
                    name: 'size',
                    label: i18n("c8339fd2a85af4ba66084d28df808de4"),
                    options: '${sizesOptions}'
                  }]
                }]
              }])
            },
            body: React__default.createElement("div", {
              className: "theme-component-content-wrap"
            }, render({
              type: 'spinner',
              size: 'sm'
            }))
          });
        }
      }, {
        title: i18n("e1371d733ff347664655629011b4130f"),
        body: function (onEdit) {
          return React__default.createElement(ThemeSpinnerCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: i18n("18c63459a2c069022c7790430f761214"),
            edit: {
              title: i18n("b966a7fa5b60bb5c973dc31aeace5ca7"),
              path: 'component.spinner.normal.body',
              body: getSchemaTpl('collapseGroup', [{
                title: i18n("37ae4f181d4f139be90fb80cae3fc493"),
                body: [{
                  type: 'amis-theme-wrapper',
                  label: false,
                  title: i18n("c8339fd2a85af4ba66084d28df808de4"),
                  body: [{
                    type: 'amis-theme-select',
                    name: 'size',
                    label: false,
                    options: '${sizesOptions}'
                  }]
                }]
              }])
            },
            body: React__default.createElement("div", {
              className: "theme-component-content-wrap"
            }, render({
              type: 'spinner'
            }))
          });
        }
      }, {
        title: i18n("e1371d733ff347664655629011b4130f"),
        body: function (onEdit) {
          return React__default.createElement(ThemeSpinnerCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: i18n("ab18e30c0dc4093ceeda8961fac3d1f4"),
            edit: {
              title: i18n("e368f8115109ead633d9d4c66a26aa54"),
              path: 'component.spinner.large.body',
              body: getSchemaTpl('collapseGroup', [{
                title: i18n("37ae4f181d4f139be90fb80cae3fc493"),
                body: [{
                  type: 'amis-theme-wrapper',
                  label: false,
                  title: i18n("c8339fd2a85af4ba66084d28df808de4"),
                  body: [{
                    type: 'amis-theme-select',
                    name: 'size',
                    label: false,
                    options: '${sizesOptions}'
                  }]
                }]
              }])
            },
            body: React__default.createElement("div", {
              className: "theme-component-content-wrap"
            }, render({
              type: 'spinner',
              size: 'lg'
            }))
          });
        }
      }]
    }]
  };
};
registerComponent('spinner', {
  type: 'feedback',
  label: i18n("f013ea9dcba3f5ca1278aa850931fec8"),
  key: 'spinner',
  component: function () {
    return ThemeSpinner;
  }
});