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

amis主题编辑器

/**
 * amis-theme-editor v2.0.11-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: '状态 Status',
    body: [{
      title: 'Status',
      body: [{
        title: i18n("4af1215ffa45b8245f055eb676fd6970"),
        body: function (onEdit) {
          return React__default.createElement(ThemeStatusCommon, {
            activeId: props.activeId,
            onEdit: onEdit,
            title: "\u57FA\u7840\u7528\u6CD5",
            edit: {
              title: i18n("2f1448085b4bec952ffdb627d136cf78"),
              path: 'component.status.base.body',
              body: getSchemaTpl('normal', [{
                type: 'amis-theme-wrapper',
                label: false,
                title: '状态icon尺寸',
                body: [{
                  type: 'amis-theme-select',
                  name: 'icon-size',
                  label: false,
                  options: '${sizesOptions}'
                }]
              }, {
                type: 'amis-theme-font-editor',
                label: false,
                hasSenior: false,
                hideFontFamily: true,
                hideLineHeight: true,
                hideColor: true,
                hideFontWeight: true,
                name: "font"
              }, {
                type: 'amis-theme-wrapper',
                label: false,
                title: '字体边距',
                body: [{
                  type: 'amis-theme-select',
                  name: 'text-margin',
                  label: false,
                  options: '${sizesOptions}'
                }]
              }])
            },
            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: '不同的状态',
      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;
  }
});