@stokr/components-library 2.1.3 → 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.
@@ -57,14 +57,15 @@ var ReactTableWrapper = function ReactTableWrapper(props) {
57
57
  var memoizedSubColumns = _react.default.useMemo(function () {
58
58
  return makeNewColumns(props.subColumns);
59
59
  }, []);
60
- return /*#__PURE__*/_react.default.createElement(ReactTable, {
60
+ return /*#__PURE__*/_react.default.createElement(ReactTable, _extends({
61
61
  columns: memoizedColumns,
62
62
  data: memoizedData,
63
63
  subColumns: memoizedSubColumns,
64
64
  blue: props.blue,
65
65
  withSubTable: props.withSubTable,
66
- calculateSubData: props.calculateSubData
67
- });
66
+ calculateSubData: props.calculateSubData,
67
+ noPagination: props.noPagination
68
+ }, props));
68
69
  };
69
70
  exports.ReactTableWrapper = ReactTableWrapper;
70
71
  function ReactTable(props) {
@@ -168,7 +169,7 @@ ReactTable.propTypes = {
168
169
  };
169
170
  ReactTable.defaultProps = {
170
171
  blue: false,
171
- noPagination: false,
172
+ noPagination: true,
172
173
  withSubTable: false,
173
174
  isSubTable: false
174
175
  };
@@ -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.ValueCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, null, item.value), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.info)), item.details && /*#__PURE__*/_react.default.createElement(_ChartLegend.Arrow, {
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;
@@ -83,6 +83,9 @@ ChartLegendFull.args = {
83
83
  subname: 'Sub Name',
84
84
  info: 'information',
85
85
  price: 10000,
86
+ isPositive: false,
87
+ marketValue: '20 %',
88
+ marketInfo: '(30d change)',
86
89
  details: Table(1560, 'USD', 10000, 'some link', 'some label')
87
90
  }]
88
91
  };
@@ -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:50%;display:inline-block;vertical-align:top;"]);
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-9"
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
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stokr/components-library",
3
- "version": "2.1.3",
3
+ "version": "2.1.5",
4
4
  "description": "STOKR - Components Library",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",