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

amis主题编辑器

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

import { __assign } from 'tslib';
import { render } from 'amis-core';
import React__default from 'react';
import cx from 'classnames';
import { getSchemaTpl } from '../tpl.js';
import { registerComponent } from './index.js';
import { i18n } from 'i18n-runtime';

var ThemeProgressContent = function (props) {
  var onEdit = props.onEdit,
    activeId = props.activeId;
  function handleEditDefault() {
    onEdit({
      title: '常规用法配置',
      path: "component.progress.base.line",
      body: getSchemaTpl('collapseGroup', [{
        title: 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: 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: getSchemaTpl('collapseGroup', [{
        title: '文本',
        body: [{
          type: 'amis-theme-font-editor',
          label: i18n("ca746b1ff10193a3ce20878dec04a733"),
          mode: 'default',
          hasSenior: false,
          hideFontFamily: true,
          hideLineHeight: true,
          hideFontWeight: true,
          name: 'body.font'
        }]
      }])
    });
  }
  return React__default.createElement("div", {
    className: "Theme-InputRange"
  }, React__default.createElement("div", {
    className: "Theme-InputRange-item"
  }, React__default.createElement("div", {
    className: "Theme-InputRange-item-title"
  }, "\u5E38\u89C4\u7528\u6CD5"), React__default.createElement("div", {
    className: cx('Theme-InputRange-item-content', activeId === "component.progress.base.line" && 'Theme-InputRange-item-content--active'),
    onClick: function () {
      return handleEditDefault();
    }
  }, render({
    type: 'progress',
    value: 60
  }))), React__default.createElement("div", {
    className: "Theme-InputRange-item"
  }, React__default.createElement("div", {
    className: "Theme-InputRange-item-title"
  }, "\u5706\u5F62\u8FDB\u5EA6\u6761"), React__default.createElement("div", {
    className: cx('Theme-InputRange-item-content', activeId === "component.progress.base.circle" && 'Theme-InputRange-item-content--active'),
    onClick: function () {
      return handleEditLabel();
    }
  }, render({
    type: 'progress',
    value: 60,
    mode: 'circle'
  }))));
};
var ThemeProgress = function (props) {
  return {
    title: '进度条 Progress',
    body: [{
      title: '进度条样式',
      body: function (onEdit) {
        return React__default.createElement(ThemeProgressContent, __assign({}, props, {
          onEdit: onEdit
        }));
      }
    }]
  };
};
registerComponent('progress', {
  type: 'data-entry',
  label: '进度条',
  key: 'progress',
  component: function () {
    return ThemeProgress;
  }
});