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

amis主题编辑器

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

import { __assign, __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 StatusStateFunc = function (title) {
  if (title === 'pending') {
    return [{
      type: 'amis-theme-color-picker',
      label: 'before',
      labelMode: 'input',
      name: "before-color",
      options: '${colorOptions}'
    }, {
      type: 'amis-theme-color-picker',
      label: 'after',
      labelMode: 'input',
      name: "after-color",
      options: '${colorOptions}'
    }];
  }
  return [{
    type: 'amis-theme-color-picker',
    label: i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
    labelMode: 'input',
    name: "color",
    options: '${colorOptions}'
  }];
};
var ThemeStatusColor = function (props) {
  var onEdit = props.onEdit;
  var content = [{
    type: 'fail',
    title: 'fail',
    key: 'fail',
    value: 'fail'
  }, {
    type: 'success',
    title: 'success',
    key: 'success',
    value: 'success'
  }, {
    type: 'queue',
    title: 'queue',
    key: 'queue',
    value: 'queue'
  }, {
    type: 'schedule',
    title: 'schedule',
    key: 'schedule',
    value: 'schedule'
  }, {
    type: 'pending',
    title: 'pending',
    key: 'pending',
    value: 'pending'
  }];
  function handleEdit(index, title) {
    onEdit({
      title: title + i18n("224e2ccda861c2514faa683b3683c361"),
      path: "component.status.color.".concat(index, ".body"),
      body: getSchemaTpl('normal', [{
        type: 'amis-theme-wrapper',
        label: false,
        title: i18n("a1c76c6e1bd796959e536718e04d10ca"),
        body: __spreadArray([], StatusStateFunc(title), true)
      }])
    });
  }
  return React__default.createElement("div", {
    className: "Theme-Status-wrap"
  }, content.map(function (status, i) {
    return React__default.createElement("div", {
      key: status.key,
      className: "theme-component"
    }, React__default.createElement("div", {
      className: "theme-component-title"
    }, status.title), React__default.createElement("div", {
      className: "theme-component-content",
      onClick: function () {
        return handleEdit(i, status.title);
      }
    }, render({
      type: 'status',
      className: 'mr-4',
      value: status.value
    })));
  }));
};
var ThemeStatusCommon = 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 ThemeStatus = function (props) {
  return {
    title: i18n("566894e6c347b5ee768d07d454149c66"),
    body: [{
      title: 'Status',
      body: [{
        title: i18n("4af1215ffa45b8245f055eb676fd6970"),
        body: function (onEdit) {
          return React__default.createElement(ThemeStatusCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: i18n("4af1215ffa45b8245f055eb676fd6970"),
            edit: {
              title: i18n("2f1448085b4bec952ffdb627d136cf78"),
              path: 'component.status.base.body',
              body: getSchemaTpl('collapseGroup', [{
                title: i18n("5ef69f62dc668c1a3e68b51c50a2530a"),
                body: [{
                  type: 'amis-theme-wrapper',
                  label: false,
                  title: false,
                  body: [{
                    type: 'amis-theme-select',
                    name: 'icon-size',
                    label: i18n("c8339fd2a85af4ba66084d28df808de4"),
                    options: '${sizesOptions}'
                  }, {
                    type: 'amis-theme-select',
                    name: 'text-margin',
                    label: i18n("31e3752986d64c8b36897c8641c8628d"),
                    options: '${sizesOptions}'
                  }]
                }]
              }, {
                title: i18n("ca746b1ff10193a3ce20878dec04a733"),
                body: [{
                  type: 'amis-theme-wrapper',
                  label: false,
                  title: false,
                  body: [{
                    type: 'amis-theme-select',
                    name: 'fontSize',
                    label: i18n("93ab99d761c9ca97dc926e6db10469a3"),
                    options: '${fontSizeOptions}'
                  }]
                }]
              }])
            },
            body: React__default.createElement("div", {
              className: "theme-component-content-wrap theme-status-default-content"
            }, render({
              type: 'status',
              className: 'mr-4',
              value: 0
            }), render({
              type: 'status',
              className: 'mr-4',
              value: 'fail'
            }), render({
              type: 'status',
              className: 'mr-4',
              value: 1
            }), render({
              type: 'status',
              className: 'mr-4',
              value: 'success'
            }), render({
              type: 'status',
              className: 'mr-4',
              value: 'pending'
            }), render({
              type: 'status',
              className: 'mr-4',
              value: 'queue'
            }), render({
              type: 'status',
              className: 'mr-4',
              value: 'schedule'
            }))
          });
        }
      }]
    }, {
      title: i18n("a5eb20164cdaa49fac13c24f990bec82"),
      body: function (onEdit) {
        return React__default.createElement(ThemeStatusColor, __assign({}, props, {
          onEdit: onEdit
        }));
      }
    }]
  };
};
registerComponent('status', {
  type: 'data-show',
  label: i18n("3fea7ca76cdece641436d7ab0d02ab1b"),
  key: 'status',
  component: function () {
    return ThemeStatus;
  }
});