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

amis主题编辑器

/**
 * amis-theme-editor v2.0.11-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';

/**
 * @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: "\u6269\u5C55\u914D\u7F6E", 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 };