@desynova-digital/components 9.3.6 → 9.3.8

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.
Files changed (6) hide show
  1. package/atoms/cardV2/cardV2.js +8 -1
  2. package/atoms/cardV2/contentV2.js +33 -8
  3. package/atoms/icon/icons.json +30 -0
  4. package/molecules/table/table-header.js +148 -11
  5. package/molecules/table/table.js +706 -137
  6. package/package.json +2 -2
package/atoms/cardV2/cardV2.js CHANGED
@@ -99,7 +99,14 @@ CardV2.propTypes = {
99
99
  isCardv2: _propTypes["default"].bool,
100
100
  nestedDropdownData: _propTypes["default"].arrayOf(_propTypes["default"].object),
101
101
  onNestedDropdownSelect: _propTypes["default"].func,
102
- isSearchPageCard: _propTypes["default"].bool
102
+ isSearchPageCard: _propTypes["default"].bool,
103
+ match_details: _propTypes["default"].shape({
104
+ available: _propTypes["default"].bool,
105
+ top_fields: _propTypes["default"].arrayOf(_propTypes["default"].shape({
106
+ field: _propTypes["default"].string,
107
+ score: _propTypes["default"].number
108
+ }))
109
+ })
103
110
  };
104
111
  CardV2.defaultProps = {
105
112
  isSegment: false,
package/atoms/cardV2/contentV2.js CHANGED
@@ -32,10 +32,11 @@ var TitleStyles = (0, _styledComponents["default"])(function (props) {
32
32
  return isTitleClick ? 'pointer' : 'default';
33
33
  });
34
34
  var ContentBody = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n"])));
35
- var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n padding: ", ";\n background-color: ", ";\n border-radius: 0 0 10px 10px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n &.no-meta-row {\n ", "\n }\n\n &.no-meta-row .footer-row {\n margin-top: 10px;\n }\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: ' ';\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: ", ";\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container {\n position: absolute;\n bottom: 100%;\n margin-right: 110px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease-out;\n padding-bottom: 10px;\n\n .overlappig-popup {\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding: 12px;\n width: 300px;\n z-index: 10;\n\n .popup-pointer {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid ", ";\n\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n\n .overlapping-episod-list-container {\n max-height: 165px;\n overflow: scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n\n .divider {\n height: 1px;\n width: 100%;\n margin: 10px 0;\n background: #303f51;\n }\n .header-container {\n display: flex;\n position: relative;\n .thumbnail {\n width: 100px;\n height: 55px;\n background-size: cover !important;\n background-repeat: no-repeat !important;\n margin-right: 10px;\n border-radius: 2px;\n }\n .episod-title {\n font-size: 12px;\n margin-bottom: 8px;\n max-width: 180px;\n line-height: 14px;\n color: #fff;\n }\n .episod-details {\n font-size: 10px;\n color: #afb2ba;\n }\n }\n\n .overlappig-popup-title {\n font-size: 12px;\n line-height: 12px;\n color: #afb2ba;\n margin-bottom: 15px;\n }\n }\n }\n\n :hover {\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px;\n }\n }\n .meta-row {\n display: flex;\n align-items: center;\n margin-top: 6px;\n cursor: default;\n column-gap: 10px\n }\n .category-count {\n margin-top: 6px;\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 10px;\n line-height: 12px;\n }\n .meta-badge {\n ", "\n font-size: 8px;\n line-height: 12px;\n padding: 1px 3px;\n border-radius: 4px;\n font-family: SFUIText-Regular;\n min-height: 12px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .meta-text {\n color: ", ";\n font-family: SFUIText-Regular;\n font-size: 10px;\n font-style: normal;\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .footer-row {\n display: flex;\n align-items: center;\n margin-top: 16px;\n column-gap: 12px;\n position: relative;\n cursor: default;\n }\n .meta-row + .footer-row {\n margin-top: 10px;\n }\n .footer-text {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n }\n .footer-icons {\n margin-left: auto;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n .footer-icon {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 12px;\n display: inline-flex;\n align-items: center;\n }\n .footer-text-language {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n text-transform: capitalize;\n }\n"])), function (_ref2) {
35
+ var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n padding: ", ";\n background-color: ", ";\n border-radius: 0 0 10px 10px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n &.no-meta-row {\n ", "\n }\n\n &.no-meta-row .footer-row {\n margin-top: 10px;\n }\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: ' ';\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: ", ";\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container {\n position: absolute;\n bottom: 100%;\n margin-right: 110px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease-out;\n padding-bottom: 10px;\n\n .overlappig-popup {\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding: 12px;\n width: 300px;\n z-index: 10;\n\n .popup-pointer {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid ", ";\n\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n\n .overlapping-episod-list-container {\n max-height: 165px;\n overflow: scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n\n .divider {\n height: 1px;\n width: 100%;\n margin: 10px 0;\n background: #303f51;\n }\n .header-container {\n display: flex;\n position: relative;\n .thumbnail {\n width: 100px;\n height: 55px;\n background-size: cover !important;\n background-repeat: no-repeat !important;\n margin-right: 10px;\n border-radius: 2px;\n }\n .episod-title {\n font-size: 12px;\n margin-bottom: 8px;\n max-width: 180px;\n line-height: 14px;\n color: #fff;\n }\n .episod-details {\n font-size: 10px;\n color: #afb2ba;\n }\n }\n\n .overlappig-popup-title {\n font-size: 12px;\n line-height: 12px;\n color: #afb2ba;\n margin-bottom: 15px;\n }\n }\n }\n\n :hover {\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px;\n }\n }\n .meta-row {\n display: flex;\n align-items: center;\n margin-top: 6px;\n cursor: default;\n column-gap: 10px\n }\n .category-count {\n margin-top: 6px;\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 10px;\n line-height: 12px;\n }\n .meta-badge {\n ", "\n font-size: 8px;\n line-height: 12px;\n padding: 1px 3px;\n border-radius: 4px;\n font-family: SFUIText-Regular;\n min-height: 12px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .meta-text {\n color: ", ";\n font-family: SFUIText-Regular;\n font-size: 10px;\n font-style: normal;\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .footer-row {\n display: flex;\n align-items: center;\n margin-top: 16px;\n column-gap: 12px;\n position: relative;\n cursor: default;\n }\n .meta-row + .footer-row {\n margin-top: 10px;\n }\n .footer-text {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n }\n .footer-icons {\n margin-left: auto;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n .footer-icon {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 12px;\n display: inline-flex;\n align-items: center;\n }\n .footer-text-language {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n text-transform: capitalize;\n }\n .chip-row {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 5px;\n margin-top: 10px;\n overflow: hidden;\n }\n .chip {\n display: flex;\n min-width: 0;\n padding: 4px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 3px;\n background: ", ";\n color: ", ";\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n overflow: hidden;\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n }\n"])), function (_ref2) {
36
36
  var type = _ref2.type,
37
- width = _ref2.width;
38
- return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '74px' : '90px';
37
+ width = _ref2.width,
38
+ match_details = _ref2.match_details;
39
+ return type === 'search' || width === 'sm' || (match_details === null || match_details === void 0 ? void 0 : match_details.available) === true ? 'auto' : width === 'md' ? '74px' : '90px';
39
40
  }, function (_ref3) {
40
41
  var width = _ref3.width;
41
42
  return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
@@ -55,8 +56,9 @@ var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templ
55
56
  return type === 'search' ? 'transparent' : bgColor === 'secondary' && type !== 'search' ? '#0C141D' : '#15212F';
56
57
  }, function (_ref6) {
57
58
  var type = _ref6.type,
58
- width = _ref6.width;
59
- return type === 'search' || width === 'sm' ? 'height: auto;' : width === 'md' ? 'height: 62px;' : '';
59
+ width = _ref6.width,
60
+ match_details = _ref6.match_details;
61
+ return type === 'search' || width === 'sm' || (match_details === null || match_details === void 0 ? void 0 : match_details.available) === true ? 'height: auto;' : width === 'md' ? 'height: 62px;' : '';
60
62
  }, function (props) {
61
63
  return _tokens.colors[props.theme].filter.rgbthemeColor;
62
64
  }, function (props) {
@@ -70,6 +72,10 @@ var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templ
70
72
  }, function (_ref8) {
71
73
  var upload_type = _ref8.upload_type;
72
74
  return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
75
+ }, function (props) {
76
+ return _tokens.colors[props.theme].tag.background;
77
+ }, function (props) {
78
+ return _tokens.colors[props.theme].card.themeColor;
73
79
  });
74
80
  var SeasonEpisodeContainer = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-shrink: 0;\n padding: 3px 4px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.12);\n border: 1px solid rgba(255, 255, 255, 0.08);\n color: #fff;\n text-align: center;\n font-family: 'SFUIText-Regular';\n font-size: 10px;\n line-height: 10px;\n font-style: normal;\n font-weight: 400;\n height: auto;\n width: auto;\n margin-left: 6px;\n box-sizing: border-box;\n span {\n padding: 0px 2px;\n }\n"])));
75
81
  var formatCreationDate = function formatCreationDate(creation) {
@@ -110,7 +116,12 @@ var ContentV2 = function ContentV2(props) {
110
116
  creation = props.creation,
111
117
  extension = props.extension,
112
118
  season_id = props.season_id,
113
- isAdobe = props.isAdobe;
119
+ isAdobe = props.isAdobe,
120
+ match_details = props.match_details;
121
+ var shouldShowMatchFields = (match_details === null || match_details === void 0 ? void 0 : match_details.available) === true;
122
+ var displayChips = shouldShowMatchFields ? ((match_details === null || match_details === void 0 ? void 0 : match_details.top_fields) || []).map(function (item) {
123
+ return item === null || item === void 0 ? void 0 : item.field;
124
+ }).filter(Boolean) : [];
114
125
  var formattedCreation = formatCreationDate(creation);
115
126
  var displayCreation = date_count_label || formattedCreation;
116
127
  var boxId = Array.isArray(box_id) ? box_id[0] || '' : box_id || '';
@@ -311,7 +322,14 @@ var ContentV2 = function ContentV2(props) {
311
322
  })))), overlapping.length > 1 && /*#__PURE__*/_react["default"].createElement(ParaStyles, {
312
323
  theme: props.theme,
313
324
  margin: "0"
314
- }, overlapping.length)) || null));
325
+ }, overlapping.length)) || null), displayChips.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
326
+ className: "chip-row"
327
+ }, displayChips.map(function (chip, index) {
328
+ return /*#__PURE__*/_react["default"].createElement("span", {
329
+ className: "chip",
330
+ key: "".concat(chip, "-").concat(index)
331
+ }, chip);
332
+ })) : null);
315
333
  };
316
334
  ContentV2.propTypes = {
317
335
  title: _propTypes["default"].string,
@@ -327,7 +345,14 @@ ContentV2.propTypes = {
327
345
  type: _propTypes["default"].string,
328
346
  titleClick: _propTypes["default"].func,
329
347
  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
330
- isAdobe: _propTypes["default"].bool
348
+ isAdobe: _propTypes["default"].bool,
349
+ match_details: _propTypes["default"].shape({
350
+ available: _propTypes["default"].bool,
351
+ top_fields: _propTypes["default"].arrayOf(_propTypes["default"].shape({
352
+ field: _propTypes["default"].string,
353
+ score: _propTypes["default"].number
354
+ }))
355
+ })
331
356
  };
332
357
  ContentV2.defaultProps = {
333
358
  theme: 'dark',
package/atoms/icon/icons.json CHANGED
@@ -1,5 +1,35 @@
1
1
  {
2
2
  "icons": {
3
+ "right-arrow-chevron": {
4
+ "paths": [
5
+ "M3.33398 2L8.66732 6L3.33398 10"
6
+ ],
7
+ "width": 12,
8
+ "height": 12,
9
+ "strokeWidth": 1.5
10
+ },
11
+ "down-arrow-chevron": {
12
+ "paths": [
13
+ "M10 3.33594L6 8.66927L2 3.33594"
14
+ ],
15
+ "width": 12,
16
+ "height": 12,
17
+ "strokeWidth": 1.5
18
+ },
19
+ "filled-pin": {
20
+ "paths": [
21
+ "M11.8977 2.88488C12.1969 2.5848 11.8175 1.71827 11.0486 0.949485C10.2889 0.189597 9.43651 -0.188166 9.12662 0.0927162L9.12059 0.0869294L4.86194 3.91261C4.07459 3.22621 2.88396 3.24963 2.13394 3.99926C2.00772 4.12572 1.93657 4.29709 1.93657 4.47587C1.93657 4.65467 2.00769 4.82609 2.13394 4.95233L4.06593 6.88456L0.0956572 11.367C-0.0305468 11.5092 -0.0333415 11.7264 0.0960249 11.8722C0.235492 12.0292 0.475936 12.0436 0.633299 11.9039L5.10915 7.92825L5.30135 8.12022L6.29669 9.11582L7.04038 9.8595C7.16663 9.98571 7.33797 10.0566 7.51656 10.0566C7.69498 10.0566 7.86644 9.98556 7.99262 9.85909C8.74183 9.10942 8.76544 7.9181 8.07938 7.1307L11.8842 2.89285C11.8881 2.88947 11.8942 2.88871 11.8977 2.88488Z"
22
+ ],
23
+ "width": 12,
24
+ "height": 12
25
+ },
26
+ "stroke-pin": {
27
+ "paths": [
28
+ "M7.31789 6.851e-07C7.37433 -0.000100124 7.43024 0.0109251 7.48242 0.0324462C7.5346 0.0539672 7.58203 0.085562 7.62199 0.125424L11.8742 4.37779C11.9548 4.45834 12 4.56758 12 4.68147C12 4.79537 11.9548 4.9046 11.8742 4.98515C11.4619 5.39751 10.9534 5.49028 10.5831 5.49028C10.4311 5.49028 10.2953 5.47482 10.1879 5.45678L7.49571 8.14909C7.56658 8.43465 7.61257 8.72582 7.63316 9.01932C7.67267 9.62239 7.60567 10.4686 7.01465 11.0596C6.9341 11.1401 6.82487 11.1854 6.71098 11.1854C6.59708 11.1854 6.48785 11.1401 6.40731 11.0596L3.97708 8.63017L1.24361 11.3637C1.0761 11.5312 0.196444 12.1386 0.028931 11.9711C-0.138582 11.8036 0.46876 10.923 0.636273 10.7564L3.36974 8.02281L0.940373 5.59251C0.85985 5.51196 0.814615 5.40273 0.814615 5.28883C0.814615 5.17494 0.85985 5.0657 0.940373 4.98515C1.53139 4.39412 2.37755 4.32625 2.98059 4.36663C3.27409 4.38719 3.56525 4.43318 3.8508 4.50408L6.54304 1.81263C6.52056 1.68181 6.50907 1.54934 6.50867 1.4166C6.50867 1.0472 6.60145 0.538634 7.01465 0.125424C7.09515 0.0451282 7.20419 2.48411e-05 7.31789 6.851e-07ZM7.42269 1.81263V1.81435C7.4475 1.88992 7.45084 1.97089 7.43233 2.04825C7.41383 2.12561 7.37421 2.19631 7.31789 2.25247L4.28118 5.2884C4.22476 5.34459 4.15383 5.38398 4.07631 5.40218C3.9988 5.42039 3.91775 5.41669 3.84221 5.39149H3.84049L3.82847 5.38806C3.74674 5.36357 3.66423 5.3418 3.58106 5.32277C3.36496 5.27236 3.14523 5.23904 2.9239 5.22311C2.56138 5.19906 2.20574 5.22999 1.91453 5.35197L6.64784 10.0846C6.76896 9.79248 6.79989 9.43769 6.77584 9.07516C6.75395 8.76824 6.69865 8.46463 6.6109 8.16971L6.60746 8.15854C6.5821 8.08288 6.57831 8.0008 6.59651 7.92311C6.61472 7.84542 6.65421 7.77434 6.71055 7.71784L9.74812 4.68104C9.80661 4.62219 9.8809 4.58154 9.962 4.56401C10.0431 4.54648 10.1275 4.55282 10.2051 4.58225L10.2876 4.60115C10.3623 4.61576 10.4663 4.63036 10.5831 4.63036C10.681 4.63036 10.7807 4.62091 10.8778 4.596L7.40294 1.12194C7.37802 1.21901 7.36857 1.31952 7.36857 1.4166C7.36899 1.55008 7.3869 1.68294 7.42184 1.81177L7.42269 1.81263Z"
29
+ ],
30
+ "width": 12,
31
+ "height": 12
32
+ },
3
33
  "add": {
4
34
  "paths": [
5
35
  "M110 23 104 23 104 29 102 29 102 23 96 23 96 21 102 21 102 15 104 15 104 21 110 21 Z"
package/molecules/table/table-header.js CHANGED
@@ -1,18 +1,103 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports["default"] = void 0;
8
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
9
- var _react = _interopRequireDefault(require("react"));
10
+ var _react = _interopRequireWildcard(require("react"));
10
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
12
  var _styledComponents = _interopRequireDefault(require("styled-components"));
12
13
  var _tokens = require("@desynova-digital/tokens");
14
+ var _icon = _interopRequireDefault(require("../../atoms/icon"));
13
15
  var _tableColumn = _interopRequireDefault(require("./table-column"));
14
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
16
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
17
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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); }
18
+ /**
19
+ * Smallest width (px) a column can be dragged down to.
20
+ */
21
+ var MIN_COLUMN_WIDTH = 60;
22
+
23
+ /**
24
+ * Columns that own a fixed layout slot and must not be resized by the user.
25
+ */
26
+ var NON_RESIZABLE_FIELDS = ["extra_columns", "rowChecked"];
27
+ var isFixedWidthColumn = function isFixedWidthColumn(column) {
28
+ return NON_RESIZABLE_FIELDS.includes(column.field) || column.type === "action_icon";
29
+ };
15
30
  var _TableHeader = function TableHeader(props) {
31
+ var stopDragRef = (0, _react.useRef)(null);
32
+ (0, _react.useEffect)(function () {
33
+ return function () {
34
+ if (stopDragRef.current) {
35
+ stopDragRef.current();
36
+ }
37
+ };
38
+ }, []);
39
+
40
+ /**
41
+ * Starts a resize drag on the column whose handle was pressed.
42
+ */
43
+ var startResize = (0, _react.useCallback)(function (event, column) {
44
+ var headerCell = event.currentTarget.closest("th");
45
+ if (!headerCell) {
46
+ return;
47
+ }
48
+ event.preventDefault();
49
+ event.stopPropagation();
50
+ var startX = event.clientX;
51
+ var startWidth = headerCell.getBoundingClientRect().width;
52
+ var currentWidth = Math.round(startWidth);
53
+ var frame = null;
54
+ var applyWidth = function applyWidth(clientX) {
55
+ frame = null;
56
+ var nextWidth = Math.max(MIN_COLUMN_WIDTH, Math.round(startWidth + (clientX - startX)));
57
+ if (nextWidth === currentWidth) {
58
+ return;
59
+ }
60
+ currentWidth = nextWidth;
61
+ props.onColumnResize(column.field, nextWidth);
62
+ };
63
+ var handleMouseMove = function handleMouseMove(moveEvent) {
64
+ var clientX = moveEvent.clientX;
65
+ if (frame !== null) {
66
+ return;
67
+ }
68
+ frame = window.requestAnimationFrame(function () {
69
+ return applyWidth(clientX);
70
+ });
71
+ };
72
+ var stopDrag = function stopDrag() {
73
+ if (frame !== null) {
74
+ window.cancelAnimationFrame(frame);
75
+ frame = null;
76
+ }
77
+ document.removeEventListener("mousemove", handleMouseMove);
78
+ document.removeEventListener("mouseup", handleMouseUp);
79
+ document.body.style.cursor = "";
80
+ document.body.style.userSelect = "";
81
+ stopDragRef.current = null;
82
+ };
83
+ function handleMouseUp() {
84
+ stopDrag();
85
+ props.onColumnResizeEnd(column.field, currentWidth);
86
+ }
87
+ document.addEventListener("mousemove", handleMouseMove);
88
+ document.addEventListener("mouseup", handleMouseUp);
89
+ document.body.style.cursor = "col-resize";
90
+ document.body.style.userSelect = "none";
91
+ stopDragRef.current = stopDrag;
92
+ }, [props.onColumnResize, props.onColumnResizeEnd]);
93
+ var renderFiller = function renderFiller(key) {
94
+ return /*#__PURE__*/_react["default"].createElement(_TableHeader.Cell, {
95
+ key: key,
96
+ theme: props.theme,
97
+ column: {},
98
+ displayAs: props.displayAs
99
+ });
100
+ };
16
101
  var cells = props.columns.map(function (column, index) {
17
102
  var sortIndicator;
18
103
  if (column.sort) {
@@ -22,34 +107,66 @@ var _TableHeader = function TableHeader(props) {
22
107
  onClick: props.onSort(column)
23
108
  }, icon);
24
109
  }
110
+ var filler = index === props.fillerColumnIndex ? renderFiller("header-filler") : null;
25
111
  if (props.selectedColumns.indexOf(column.field) > -1) {
26
- return /*#__PURE__*/_react["default"].createElement(_TableHeader.Cell, {
112
+ var isResizable = props.resizableColumns && !isFixedWidthColumn(column);
113
+ var pinned = props.getPinnedPlacement(column);
114
+ var showPinIcon = !!pinned && pinned.side === "left" && !pinned.structural;
115
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
116
+ key: "row-header-" + index + column.key
117
+ }, filler, /*#__PURE__*/_react["default"].createElement(_TableHeader.Cell, {
27
118
  theme: props.theme,
28
- key: "row-header-" + index + column.key,
29
119
  column: column,
30
- displayAs: props.displayAs
31
- }, column.title, sortIndicator);
120
+ displayAs: props.displayAs,
121
+ className: props.getColumnClassName(column),
122
+ style: props.getColumnStyle(column)
123
+ }, showPinIcon && /*#__PURE__*/_react["default"].createElement(_TableHeader.PinIcon, null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
124
+ name: "filled-pin",
125
+ width: 10,
126
+ height: 10,
127
+ color: _tokens.colors[props.theme].label.text
128
+ })), column.title, sortIndicator, isResizable && /*#__PURE__*/_react["default"].createElement(_TableHeader.ResizeHandle, {
129
+ className: "table-header-resize-handle",
130
+ onMouseDown: function onMouseDown(event) {
131
+ return startResize(event, column);
132
+ }
133
+ })));
32
134
  }
135
+ return filler;
33
136
  });
34
137
  return /*#__PURE__*/_react["default"].createElement(_TableHeader.Element, null, /*#__PURE__*/_react["default"].createElement(_TableHeader.Row, {
35
138
  theme: props.theme
36
- }, cells));
139
+ }, cells, props.fillerColumnIndex >= props.columns.length && renderFiller("header-filler-end")));
37
140
  };
38
141
  _TableHeader.Element = _styledComponents["default"].thead(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
39
142
  _TableHeader.Row = _styledComponents["default"].tr(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n"])), function (props) {
40
143
  return _tokens.colors[props.theme].table.thColor;
41
144
  });
42
- _TableHeader.Cell = _styledComponents["default"].th(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: \"SFUIText-Medium\";\n font-size: 12px;\n padding: 7px 14px;\n border-bottom: ", "px\n solid ", ";\n text-align: left;\n vertical-align: bottom;\n line-height: 2;\n cursor: ", ";\n"])), function (props) {
145
+ _TableHeader.Cell = _styledComponents["default"].th(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: \"SFUIText-Medium\";\n font-size: 12px;\n padding: 7px 14px;\n border-bottom: ", "px\n solid ", ";\n text-align: left;\n vertical-align: bottom;\n line-height: 2;\n cursor: ", ";\n position: relative;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n &.pinned-column {\n background: ", ";\n z-index: 1;\n }\n\n &.pinned-left-edge {\n box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.55);\n }\n\n &.pinned-right-edge {\n box-shadow: -6px 0 8px -6px rgba(0, 0, 0, 0.55);\n }\n\n &:hover .table-header-resize-handle {\n border-right-color: ", ";\n }\n"])), function (props) {
43
146
  return props.displayAs === "extraDetails" ? "1" : "2";
44
147
  }, function (props) {
45
148
  return _tokens.colors[props.theme].table.border;
46
149
  }, function (props) {
47
150
  return props.column.sortable || props.column.sort ? "pointer" : "auto";
151
+ }, function (props) {
152
+ return _tokens.colors[props.theme].card.background;
153
+ }, function (props) {
154
+ return _tokens.colors[props.theme].table.border;
48
155
  });
49
- _TableHeader.SortIndicator = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n padding-left: 8px;\n"])));
156
+ _TableHeader.ResizeHandle = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 8px;\n border-right: 2px solid transparent;\n cursor: col-resize;\n"])));
157
+ _TableHeader.PinIcon = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n margin-right: 6px;\n vertical-align: middle;\n position: relative;\n top: -1px;\n opacity: 0.5;\n"])));
158
+ _TableHeader.SortIndicator = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n padding-left: 8px;\n"])));
50
159
  _TableHeader.propTypes = {
51
160
  columns: _propTypes["default"].arrayOf(_tableColumn["default"]),
52
- onSort: _propTypes["default"].func
161
+ onSort: _propTypes["default"].func,
162
+ resizableColumns: _propTypes["default"].bool,
163
+ getColumnWidth: _propTypes["default"].func,
164
+ getColumnStyle: _propTypes["default"].func,
165
+ getColumnClassName: _propTypes["default"].func,
166
+ getPinnedPlacement: _propTypes["default"].func,
167
+ fillerColumnIndex: _propTypes["default"].number,
168
+ onColumnResize: _propTypes["default"].func,
169
+ onColumnResizeEnd: _propTypes["default"].func
53
170
  };
54
171
  _TableHeader.defaultProps = {
55
172
  onSort: function onSort(column) {
@@ -57,6 +174,26 @@ _TableHeader.defaultProps = {
57
174
  return null;
58
175
  };
59
176
  },
60
- theme: "light"
177
+ theme: "light",
178
+ resizableColumns: false,
179
+ getColumnWidth: function getColumnWidth() {
180
+ return undefined;
181
+ },
182
+ getColumnStyle: function getColumnStyle() {
183
+ return undefined;
184
+ },
185
+ getColumnClassName: function getColumnClassName() {
186
+ return undefined;
187
+ },
188
+ getPinnedPlacement: function getPinnedPlacement() {
189
+ return undefined;
190
+ },
191
+ fillerColumnIndex: -1,
192
+ onColumnResize: function onColumnResize() {
193
+ return null;
194
+ },
195
+ onColumnResizeEnd: function onColumnResizeEnd() {
196
+ return null;
197
+ }
61
198
  };
62
199
  var _default = exports["default"] = _TableHeader;