eapp-amis-theme-editor/lib/component/Progress.js

amis主题编辑器

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

'use strict';

var tslib = require('tslib');
var amisCore = require('amis-core');
var React = require('react');
var cx = require('classnames');
var tpl = require('../tpl.js');
var index = require('./index.js');
var i18nRuntime = require('i18n-runtime');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);

var ThemeProgressContent = function (props) {
  var onEdit = props.onEdit,
    activeId = props.activeId;
  function handleEditDefault() {
    onEdit({
      title: '常规用法配置',
      path: "component.progress.base.line",
      body: tpl.getSchemaTpl('collapseGroup', [{
        title: i18nRuntime.i18n("6b36c6f7ec834692ec6c8e3816349fdd"),
        body: [{
          type: 'amis-theme-color-picker',
          label: '底色',
          labelMode: 'input',
          name: 'body.bg',
          options: '${colorOptions}'
        }, {
          type: 'amis-theme-color-picker',
          label: '主题色',
          labelMode: 'input',
          name: 'body.theme-color',
          options: '${colorOptions}'
        }]
      }, {
        title: '文本',
        body: [{
          type: 'amis-theme-font-editor',
          label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
          mode: 'default',
          hasSenior: false,
          hideFontFamily: true,
          hideLineHeight: true,
          hideFontWeight: true,
          name: 'body.font'
        }]
      }])
    });
  }
  function handleEditLabel() {
    onEdit({
      title: '圆形进度条配置',
      path: "component.progress.base.circle",
      body: tpl.getSchemaTpl('collapseGroup', [{
        title: '文本',
        body: [{
          type: 'amis-theme-font-editor',
          label: i18nRuntime.i18n("ca746b1ff10193a3ce20878dec04a733"),
          mode: 'default',
          hasSenior: false,
          hideFontFamily: true,
          hideLineHeight: true,
          hideFontWeight: true,
          name: 'body.font'
        }]
      }])
    });
  }
  return React__default["default"].createElement("div", {
    className: "Theme-InputRange"
  }, React__default["default"].createElement("div", {
    className: "Theme-InputRange-item"
  }, React__default["default"].createElement("div", {
    className: "Theme-InputRange-item-title"
  }, "\u5E38\u89C4\u7528\u6CD5"), React__default["default"].createElement("div", {
    className: cx__default["default"]('Theme-InputRange-item-content', activeId === "component.progress.base.line" && 'Theme-InputRange-item-content--active'),
    onClick: function () {
      return handleEditDefault();
    }
  }, amisCore.render({
    type: 'progress',
    value: 60
  }))), React__default["default"].createElement("div", {
    className: "Theme-InputRange-item"
  }, React__default["default"].createElement("div", {
    className: "Theme-InputRange-item-title"
  }, "\u5706\u5F62\u8FDB\u5EA6\u6761"), React__default["default"].createElement("div", {
    className: cx__default["default"]('Theme-InputRange-item-content', activeId === "component.progress.base.circle" && 'Theme-InputRange-item-content--active'),
    onClick: function () {
      return handleEditLabel();
    }
  }, amisCore.render({
    type: 'progress',
    value: 60,
    mode: 'circle'
  }))));
};
var ThemeProgress = function (props) {
  return {
    title: '进度条 Progress',
    body: [{
      title: '进度条样式',
      body: function (onEdit) {
        return React__default["default"].createElement(ThemeProgressContent, tslib.__assign({}, props, {
          onEdit: onEdit
        }));
      }
    }]
  };
};
index.registerComponent('progress', {
  type: 'data-entry',
  label: '进度条',
  key: 'progress',
  component: function () {
    return ThemeProgress;
  }
});