@stokr/components-library
Version:
STOKR - Components Library
60 lines (59 loc) • 3.66 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ChartLegend = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactCollapse = require("react-collapse");
var _ChartLegend = require("./ChartLegend.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const ChartLegend = props => {
const {
data
} = props;
const [activeItems, setActiveItems] = (0, _react.useState)(data.map(() => false));
const toggleItem = key => {
let newActiveItems = data.map((item, itemKey) => {
return itemKey === key ? !activeItems[itemKey] : activeItems[itemKey];
});
setActiveItems(newActiveItems);
};
return /*#__PURE__*/_react.default.createElement(_ChartLegend.Items, null, data.map((item, itemKey) => /*#__PURE__*/_react.default.createElement(_ChartLegend.Item, {
key: item.name
}, /*#__PURE__*/_react.default.createElement(_ChartLegend.Head, {
onClick: () => toggleItem(itemKey)
}, /*#__PURE__*/_react.default.createElement(_ChartLegend.ColorLabel, {
itemColor: item.color
}), /*#__PURE__*/_react.default.createElement(_ChartLegend.NameCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, {
onClick: e => {
item.onNameClick && item.onNameClick(e, item);
},
isLink: !!item.onNameClick
}, item.name), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.subname)), /*#__PURE__*/_react.default.createElement(_ChartLegend.NameCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, null, item.value), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.info)), /*#__PURE__*/_react.default.createElement(_ChartLegend.MarketDataCol, {
isPositive: item.isPositive
}, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, {
isPositive: item.isPositive
}, item.marketValue), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.marketInfo)), item.details && /*#__PURE__*/_react.default.createElement(_ChartLegend.Arrow, {
isOpened: activeItems[itemKey]
})), item.details && /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
isOpened: activeItems[itemKey]
}, /*#__PURE__*/_react.default.createElement(_ChartLegend.Body, null, item.details)))));
};
exports.ChartLegend = ChartLegend;
ChartLegend.propTypes = {
data: _propTypes.default.arrayOf(_propTypes.default.shape({
value: _propTypes.default.number.isRequired,
name: _propTypes.default.string,
onNameClick: _propTypes.default.func,
color: _propTypes.default.string,
subname: _propTypes.default.string,
info: _propTypes.default.string,
details: _propTypes.default.any,
isPositive: _propTypes.default.bool,
marketValue: _propTypes.default.string,
marketInfo: _propTypes.default.string
})).isRequired
};
var _default = exports.default = ChartLegend;