ze-react-component-library
Version:
ZeroETP React Component Library
167 lines (140 loc) • 6.68 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("antd/lib/button/style");
var _button = _interopRequireDefault(require("antd/lib/button"));
require("antd/lib/tooltip/style");
var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));
require("antd/lib/dropdown/style");
var _dropdown = _interopRequireDefault(require("antd/lib/dropdown"));
var _react = _interopRequireWildcard(require("react"));
var _icons = require("@ant-design/icons");
var _representations = _interopRequireDefault(require("./representations"));
var _useLocale = _interopRequireDefault(require("../hooks/useLocale"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__assign || function () {
__assign = Object.assign || function (t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
}
return t;
};
return __assign.apply(this, arguments);
};
var graphicOptions = [{
label: "全部",
value: "all",
tip: ""
}, {
label: /*#__PURE__*/_react.default.createElement(_icons.LineChartOutlined, null),
value: "basic",
tip: "基础图形"
}, {
label: /*#__PURE__*/_react.default.createElement(_icons.GlobalOutlined, null),
value: "advanced",
tip: "高级图形"
}];
var RepresentationChanger = function RepresentationChanger(_a) {
var representationType = _a.representationType,
onChange = _a.onChange,
_b = _a.scrollElement,
scrollElement = _b === void 0 ? window : _b,
result = _a.result;
var _c = (0, _react.useState)(false),
visible = _c[0],
setVisible = _c[1];
var _d = (0, _react.useState)(representationType),
value = _d[0],
setValue = _d[1];
var _e = (0, _react.useState)("all"),
type = _e[0],
setType = _e[1];
var t = (0, _useLocale.default)().t;
(0, _react.useEffect)(function () {
setValue(representationType);
}, [representationType]);
var onScroll = (0, _react.useCallback)(function () {
setVisible(false);
}, []);
(0, _react.useEffect)(function () {
scrollElement.addEventListener("scroll", onScroll);
return function () {
scrollElement.removeEventListener("scroll", onScroll);
};
}, []);
return /*#__PURE__*/_react.default.createElement(_dropdown.default, {
overlay: /*#__PURE__*/_react.default.createElement("div", {
className: "ze-graphics-drop-down"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "ze-graphics-drop-down-left"
}, graphicOptions.map(function (d) {
return /*#__PURE__*/_react.default.createElement(_tooltip.default, __assign({
placement: "right",
key: d.value
}, d.tip ? {
title: t(d.tip)
} : {
open: false,
title: ""
}), /*#__PURE__*/_react.default.createElement("div", {
onMouseEnter: function onMouseEnter() {
setType(d.value);
},
className: "ze-graphics-drop-down-left-item " + (d.value === type ? "ze-graphics-drop-down-left-item-active" : "")
}, typeof d.label === "string" ? t(d.label) : d.label));
})), /*#__PURE__*/_react.default.createElement("div", {
className: "ze-graphics-drop-down-right"
}, _representations.default.filter(function (d) {
return type === "all" ? true : d.type === type;
}).map(function (d) {
var disabled = !d.valid(result);
return /*#__PURE__*/_react.default.createElement("div", {
key: d.key,
className: "ze-graphics-drop-down-right-item-wrapper " + (disabled ? "ze-graphics-drop-down-right-item-disabled" : "") + " " + (d.key === value ? "ze-graphics-drop-down-right-item-active" : "")
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, __assign({
placement: "bottom"
}, d.tip && visible ? {
title: t(d.tip)
} : {
open: false,
title: ""
}), /*#__PURE__*/_react.default.createElement("div", {
onClick: function onClick() {
if (!disabled) {
setValue(d.key);
onChange === null || onChange === void 0 ? void 0 : onChange(d.key);
setVisible(false);
}
},
className: "ze-graphics-drop-down-right-item"
}, /*#__PURE__*/_react.default.createElement("img", {
src: d.icon,
alt: d.key,
className: "ze-graphics-drop-down-right-item-img"
}))), /*#__PURE__*/_react.default.createElement("span", {
className: "ze-graphics-drop-down-right-item-title"
}, t(d.title)));
}))),
trigger: ["click"],
open: visible,
onOpenChange: function onOpenChange(v) {
setVisible(v);
if (!v) {
setType("all");
}
},
placement: "bottom"
}, /*#__PURE__*/_react.default.createElement(_button.default, {
icon: /*#__PURE__*/_react.default.createElement(_icons.PieChartOutlined, null)
}));
};
var _default = RepresentationChanger;
exports.default = _default;