amis-theme-editor/esm/renderers/ThemeWrapper.js

amis主题编辑器

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

import { __extends, __assign, __decorate } from 'tslib';
import React__default from 'react';
import { Renderer, render, Icon } from 'amis';
import '../icons/index.js';
import cx from 'classnames';
import { pick } from 'lodash';
import { TooltipWrapper } from 'amis-ui';
import { i18n } from 'i18n-runtime';

/**
 * @file ThemeWrapper.tsx
 * @description 收缩展开容器
 */
function ThemeWrapperHeader(props) {
  var hasSenior = props.hasSenior,
    hasOpen = props.hasOpen,
    senior = props.senior,
    toggleSenior = props.toggleSenior,
    open = props.open,
    toggleOpen = props.toggleOpen,
    title = props.title;
  return React__default.createElement("div", {
    className: "Theme-Wrapper"
  }, React__default.createElement("div", {
    className: "Theme-Wrapper-header"
  }, React__default.createElement("div", {
    className: "Theme-Wrapper-header-left"
  }, title), React__default.createElement("div", {
    className: "Theme-Wrapper-header-right"
  }, hasSenior && React__default.createElement(TooltipWrapper, {
    tooltip: i18n("e4e625f8f933ccfd0fe44a41fb02655f"),
    tooltipTheme: "dark",
    placement: "left"
  }, React__default.createElement(Icon, {
    icon: "custom",
    className: "common-icon",
    onClick: function () {
      return toggleSenior && toggleSenior(!senior);
    }
  })), hasOpen && React__default.createElement(Icon, {
    icon: "right-arrow-bold",
    className: cx('arrow-icon', open ? 'arrow-icon-reverse' : ''),
    onClick: function () {
      return toggleOpen && toggleOpen(!open);
    }
  }))));
}
function ThemeWrapperControl(props) {
  var _a = props.hasSenior,
    hasSenior = _a === void 0 ? false : _a,
    _b = props.hasOpen,
    hasOpen = _b === void 0 ? false : _b,
    body = props.body,
    seniorBody = props.seniorBody,
    title = props.title;
  var _c = React__default.useState(true),
    open = _c[0],
    toggleOpen = _c[1];
  var _d = React__default.useState(false),
    senior = _d[0],
    toggleSenior = _d[1];
  var bodyProps = pick(props, ['data', 'formMode', 'formLabelAlign', 'formLabelWidth', 'formHorizontal', 'onChange']);
  return React__default.createElement("div", {
    className: "Theme-Wrapper"
  }, title || title === '' ? React__default.createElement(ThemeWrapperHeader, {
    hasSenior: hasSenior,
    hasOpen: hasOpen,
    senior: senior,
    toggleSenior: toggleSenior,
    open: open,
    toggleOpen: toggleOpen,
    title: title
  }) : null, React__default.createElement("div", {
    className: "Theme-Wrapper-body",
    style: {
      display: open ? 'block' : 'none'
    }
  }, body ? render(body, bodyProps) : null, React__default.createElement("div", {
    className: "Theme-Wrapper-senior",
    style: {
      display: senior ? 'block' : 'none'
    }
  }, seniorBody ? render(seniorBody, bodyProps) : null)));
}
/** @class */(function (_super) {
  __extends(ThemeWrapperRenderer, _super);
  function ThemeWrapperRenderer() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
  Object.defineProperty(ThemeWrapperRenderer.prototype, "render", {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function () {
      return React__default.createElement(ThemeWrapperControl, __assign({}, this.props));
    }
  });
  ThemeWrapperRenderer = __decorate([Renderer({
    type: 'amis-theme-wrapper'
  })], ThemeWrapperRenderer);
  return ThemeWrapperRenderer;
})(React__default.Component);

export { ThemeWrapperHeader };