@stokr/components-library 2.1.4 → 2.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -41,7 +41,11 @@ var ChartLegend = function ChartLegend(props) {
|
|
|
41
41
|
}
|
|
42
42
|
}, /*#__PURE__*/_react.default.createElement(_ChartLegend.ColorLabel, {
|
|
43
43
|
itemColor: item.color
|
|
44
|
-
}), /*#__PURE__*/_react.default.createElement(_ChartLegend.NameCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, null, item.name), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.subname)), /*#__PURE__*/_react.default.createElement(_ChartLegend.
|
|
44
|
+
}), /*#__PURE__*/_react.default.createElement(_ChartLegend.NameCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, null, 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, {
|
|
45
|
+
isPositive: item.isPositive
|
|
46
|
+
}, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, {
|
|
47
|
+
isPositive: item.isPositive
|
|
48
|
+
}, item.marketValue), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.marketInfo)), item.details && /*#__PURE__*/_react.default.createElement(_ChartLegend.Arrow, {
|
|
45
49
|
isOpened: activeItems[itemKey]
|
|
46
50
|
})), item.details && /*#__PURE__*/_react.default.createElement(_reactCollapse.Collapse, {
|
|
47
51
|
isOpened: activeItems[itemKey]
|
|
@@ -55,7 +59,11 @@ ChartLegend.propTypes = {
|
|
|
55
59
|
name: _propTypes.default.string,
|
|
56
60
|
color: _propTypes.default.string,
|
|
57
61
|
subname: _propTypes.default.string,
|
|
58
|
-
info: _propTypes.default.string
|
|
62
|
+
info: _propTypes.default.string,
|
|
63
|
+
details: _propTypes.default.any,
|
|
64
|
+
isPositive: _propTypes.default.bool,
|
|
65
|
+
marketValue: _propTypes.default.string,
|
|
66
|
+
marketInfo: _propTypes.default.string
|
|
59
67
|
})).isRequired
|
|
60
68
|
};
|
|
61
69
|
var _default = ChartLegend;
|
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.ValueCol = exports.SmallText = exports.NameCol = exports.LargeText = exports.Items = exports.Item = exports.Head = exports.ColorLabel = exports.Body = exports.Arrow = void 0;
|
|
6
|
+
exports.ValueCol = exports.SmallText = exports.NameCol = exports.MarketDataCol = exports.LargeText = exports.Items = exports.Item = exports.Head = exports.ColorLabel = exports.Body = exports.Arrow = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _theme = _interopRequireDefault(require("../../styles/theme"));
|
|
8
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
10
|
var Items = _styledComponents.default.div.withConfig({
|
|
10
11
|
displayName: "ChartLegendstyles__Items",
|
|
@@ -36,7 +37,7 @@ exports.ColorLabel = ColorLabel;
|
|
|
36
37
|
var NameCol = _styledComponents.default.div.withConfig({
|
|
37
38
|
displayName: "ChartLegendstyles__NameCol",
|
|
38
39
|
componentId: "sc-gh1vwu-5"
|
|
39
|
-
})(["width:
|
|
40
|
+
})(["width:40%;display:inline-block;vertical-align:top;"]);
|
|
40
41
|
exports.NameCol = NameCol;
|
|
41
42
|
var ValueCol = _styledComponents.default.div.withConfig({
|
|
42
43
|
displayName: "ChartLegendstyles__ValueCol",
|
|
@@ -46,18 +47,31 @@ exports.ValueCol = ValueCol;
|
|
|
46
47
|
var LargeText = _styledComponents.default.div.withConfig({
|
|
47
48
|
displayName: "ChartLegendstyles__LargeText",
|
|
48
49
|
componentId: "sc-gh1vwu-7"
|
|
49
|
-
})(["font-weight:300;font-size:22px;line-height:28px;"])
|
|
50
|
+
})(["font-weight:300;font-size:22px;line-height:28px;", " ", ""], function (props) {
|
|
51
|
+
return props.isPositive && "\n color: ".concat(_theme.default.cProgressDone, ";\n ");
|
|
52
|
+
}, function (props) {
|
|
53
|
+
return props.isPositive === false && "\n color: ".concat(_theme.default.cWarning, ";\n ");
|
|
54
|
+
});
|
|
50
55
|
exports.LargeText = LargeText;
|
|
51
56
|
var SmallText = _styledComponents.default.div.withConfig({
|
|
52
57
|
displayName: "ChartLegendstyles__SmallText",
|
|
53
58
|
componentId: "sc-gh1vwu-8"
|
|
54
59
|
})(["font-size:11px;line-height:12px;margin-top:4px;font-style:italic;"]);
|
|
55
60
|
exports.SmallText = SmallText;
|
|
61
|
+
var MarketDataCol = _styledComponents.default.div.withConfig({
|
|
62
|
+
displayName: "ChartLegendstyles__MarketDataCol",
|
|
63
|
+
componentId: "sc-gh1vwu-9"
|
|
64
|
+
})(["width:20%;display:inline-block;vertical-align:top;position:relative;", "{position:relative;left:-20px;}&::before{display:block;position:absolute;content:'';top:30%;left:-20px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;", " ", "}"], SmallText, function (props) {
|
|
65
|
+
return props.isPositive && "\n border-bottom: 7px solid\n ".concat(_theme.default.cProgressDone, ";\n ");
|
|
66
|
+
}, function (props) {
|
|
67
|
+
return props.isPositive === false && "\n border-top: 7px solid\n ".concat(_theme.default.cWarning, ";\n ");
|
|
68
|
+
});
|
|
69
|
+
exports.MarketDataCol = MarketDataCol;
|
|
56
70
|
var Arrow = _styledComponents.default.i.attrs({
|
|
57
71
|
className: 'ion ion-ios-arrow-down'
|
|
58
72
|
}).withConfig({
|
|
59
73
|
displayName: "ChartLegendstyles__Arrow",
|
|
60
|
-
componentId: "sc-gh1vwu-
|
|
74
|
+
componentId: "sc-gh1vwu-10"
|
|
61
75
|
})(["&&&{position:absolute;top:14px;right:24px;transition:0.3s transform;transform:rotate(0);text-align:center;font-size:16px;line-height:16px;height:16px;margin-top:-8px;", "}"], function (props) {
|
|
62
76
|
return props.isOpened && "\n transform: rotate(180deg);\n ";
|
|
63
77
|
});
|