@qn-pandora/pandora-visualization/es/modules/base-dashboard/VariableWrapper/index.js

Pandora 通用可视化库

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import * as React from 'react';
import PropTypes from 'prop-types';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import classnames from 'classnames';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import { FontIcon } from '../../../components/Common';
import bind from '../../../utils/bind';
import { variableTypeMapping } from '../constants';
import { fontIconMapping } from './constants';
import { formatString } from '../../../services/language';
import { BaseLocale } from '../../../constants/language/base/type';
import * as style from './style.mless';
export * from './transform';
var VariableWrapper = /** @class */ (function (_super) {
    __extends(VariableWrapper, _super);
    function VariableWrapper() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.copied = false;
        return _this;
    }
    VariableWrapper.prototype.handleCopySuccess = function () {
        this.copied = true;
    };
    VariableWrapper.prototype.handleNameTooltipVisibleChange = function (visible) {
        if (!visible) {
            this.copied = false;
        }
    };
    VariableWrapper.prototype.handleEditClick = function () {
        var _a = this.props, variable = _a.variable, onEditClick = _a.onEditClick;
        onEditClick(variable);
    };
    VariableWrapper.prototype.handleDeleteClick = function () {
        var _a = this.props, variable = _a.variable, onDeleteClick = _a.onDeleteClick;
        onDeleteClick(variable);
    };
    VariableWrapper.prototype.render = function () {
        var _a = this.context.baseDashboardStore, isEditing = _a.isEditing, theme = _a.theme;
        var _b = this.props, className = _b.className, variable = _b.variable, children = _b.children;
        var name = variable.name, type = variable.type, displayName = variable.displayName;
        var rootCls = classnames(style.root, className, style[theme]);
        return (React.createElement("div", { className: rootCls },
            React.createElement("div", { className: style.label },
                React.createElement(Tooltip, { title: formatString(variableTypeMapping[type]) },
                    React.createElement(FontIcon, { className: style.icon, type: fontIconMapping[type] })),
                React.createElement(Tooltip, { title: this.copied
                        ? formatString(BaseLocale.copy.success)
                        : formatString(BaseLocale.copy.click_to_copy) + ":$" + name, onOpenChange: this.handleNameTooltipVisibleChange },
                    React.createElement(CopyToClipboard, { className: style.name, text: "$" + name, onCopy: this.handleCopySuccess },
                        React.createElement("span", null, displayName || name)))),
            React.createElement("div", { className: style.content }, children),
            isEditing && (React.createElement(EditOutlined, { className: classnames(style.action, style.edit), onClick: this.handleEditClick })),
            isEditing && (React.createElement(DeleteOutlined, { className: classnames(style.action, style.remove), onClick: this.handleDeleteClick }))));
    };
    VariableWrapper.contextTypes = {
        baseDashboardStore: PropTypes.object
    };
    __decorate([
        observable,
        __metadata("design:type", Object)
    ], VariableWrapper.prototype, "copied", void 0);
    __decorate([
        bind,
        action,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], VariableWrapper.prototype, "handleCopySuccess", null);
    __decorate([
        bind,
        action,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Boolean]),
        __metadata("design:returntype", void 0)
    ], VariableWrapper.prototype, "handleNameTooltipVisibleChange", null);
    __decorate([
        bind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], VariableWrapper.prototype, "handleEditClick", null);
    __decorate([
        bind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], VariableWrapper.prototype, "handleDeleteClick", null);
    VariableWrapper = __decorate([
        observer
    ], VariableWrapper);
    return VariableWrapper;
}(React.Component));
export default VariableWrapper;