@desynova-digital/components 9.1.26 → 9.1.28

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 (2) hide show
  1. package/molecules/table/table.js +51 -53
  2. package/package.json +2 -2
package/molecules/table/table.js CHANGED
@@ -54,59 +54,53 @@ var Table = /*#__PURE__*/function (_Component) {
54
54
  field: "extra_columns",
55
55
  type: "extra_columns"
56
56
  };
57
- _this.columns = _this.columns.filter(function (item, idx) {
58
- if (item.type === "action_icon") {
59
- _this.actionIconCol.push(item);
60
- } else if (item.type === "table") {
61
- _this.nestedTable.push(item); // will maitain seperate table for nested
62
- } else {
63
- return item;
57
+ if (_this.props.preserveActionPosition) {
58
+ _this.columns = _this.columns.filter(function (item) {
59
+ if (item.type === "table") {
60
+ _this.nestedTable.push(item);
61
+ return false;
62
+ }
63
+ return true;
64
+ });
65
+ var allRegularColumns = (0, _toConsumableArray2["default"])(_this.columns);
66
+ _this.defaultShowColumns = (0, _toConsumableArray2["default"])(allRegularColumns);
67
+ _this.extraColumns = (0, _toConsumableArray2["default"])(allRegularColumns);
68
+ var maxRegularColumns = _this.props.maxShowNoOfColumns;
69
+ var needsTruncation = _this.columns.length > maxRegularColumns;
70
+ if (needsTruncation) {
71
+ _this.defaultShowColumns.splice(maxRegularColumns);
72
+ _this.defaultShowColumns.push(extraColumnsSchema);
73
+ _this.extraColumns.splice(0, maxRegularColumns);
74
+ }
75
+ } else {
76
+ _this.columns = _this.columns.filter(function (item) {
77
+ if (item.type === "action_icon") {
78
+ _this.actionIconCol.push(item);
79
+ return false;
80
+ } else if (item.type === "table") {
81
+ _this.nestedTable.push(item);
82
+ return false;
83
+ }
84
+ return true;
85
+ });
86
+ var _allRegularColumns = (0, _toConsumableArray2["default"])(_this.columns);
87
+ _this.defaultShowColumns = (0, _toConsumableArray2["default"])(_allRegularColumns);
88
+ _this.extraColumns = (0, _toConsumableArray2["default"])(_allRegularColumns);
89
+ var _maxRegularColumns = _this.props.showActions ? _this.props.maxShowNoOfColumns - 1 : _this.props.maxShowNoOfColumns;
90
+ var _needsTruncation = _this.columns.length > _maxRegularColumns;
91
+ if (_needsTruncation) {
92
+ _this.defaultShowColumns.splice(_maxRegularColumns);
93
+ if (_this.props.showActions && _this.actionIconCol.length > 0) {
94
+ var _this$defaultShowColu;
95
+ (_this$defaultShowColu = _this.defaultShowColumns).push.apply(_this$defaultShowColu, (0, _toConsumableArray2["default"])(_this.actionIconCol));
96
+ }
97
+ _this.defaultShowColumns.push(extraColumnsSchema);
98
+ _this.extraColumns.splice(0, _maxRegularColumns);
99
+ } else if (_this.props.showActions && _this.actionIconCol.length > 0) {
100
+ var _this$defaultShowColu2;
101
+ (_this$defaultShowColu2 = _this.defaultShowColumns).push.apply(_this$defaultShowColu2, (0, _toConsumableArray2["default"])(_this.actionIconCol));
64
102
  }
65
- });
66
- _this.defaultShowColumns = JSON.parse(JSON.stringify(_this.columns));
67
- _this.extraColumns = JSON.parse(JSON.stringify(_this.columns));
68
- if (_this.columns.length <= _this.props.maxShowNoOfColumns && !_this.props.showActions) {} else if (_this.columns.length <= _this.props.maxShowNoOfColumns - 1 && _this.props.showActions) {
69
- var _this$defaultShowColu;
70
- /*
71
- * console.log(this.columns);
72
- * this.defaultShowColumns.push({ title: '', field: 'video_src' });
73
- */
74
- if (_this.actionIconCol.length > 0) (_this$defaultShowColu = _this.defaultShowColumns).push.apply(_this$defaultShowColu, (0, _toConsumableArray2["default"])(_this.actionIconCol));
75
- } else if (_this.columns.length > _this.props.maxShowNoOfColumns - 1 && _this.props.showActions) {
76
- var _this$defaultShowColu2;
77
- _this.defaultShowColumns.splice(_this.props.maxShowNoOfColumns - 1, _this.defaultShowColumns.length);
78
-
79
- // this.defaultShowColumns.push({ title: '', field: 'video_src' });
80
- if (_this.actionIconCol.length > 0) (_this$defaultShowColu2 = _this.defaultShowColumns).push.apply(_this$defaultShowColu2, (0, _toConsumableArray2["default"])(_this.actionIconCol));
81
- _this.defaultShowColumns.push(extraColumnsSchema);
82
- _this.extraColumns.splice(0, _this.props.maxShowNoOfColumns - 1);
83
- } else if (_this.columns.length > _this.props.maxShowNoOfColumns && !_this.props.showActions) {
84
- _this.defaultShowColumns.splice(_this.props.maxShowNoOfColumns, _this.defaultShowColumns.length);
85
- _this.defaultShowColumns.push(extraColumnsSchema);
86
- _this.extraColumns.splice(0, _this.props.maxShowNoOfColumns);
87
103
  }
88
-
89
- /*
90
- * if (this.props.selectable) {
91
- * this.defaultShowColumns.splice(0, 0, {
92
- * title: (
93
- * <div>
94
- * <input type="checkbox" id={"forAll"} />
95
- * <label
96
- * onClick={(e) => {
97
- * this.allRowCheckChange(e, !this.state.isAllRowsSelected);
98
- * }}
99
- * htmlFor="forAll"
100
- * >
101
- * <span />
102
- * </label>{" "}
103
- * </div>
104
- * ),
105
- * field: "select_row",
106
- * });
107
- * }
108
- */
109
-
110
104
  return {
111
105
  defaultShowColumns: _this.defaultShowColumns,
112
106
  extraColumns: _this.extraColumns,
@@ -1366,7 +1360,7 @@ Table.Header = _tableHeader["default"];
1366
1360
  Table.Column = _tableColumn["default"];
1367
1361
  var SearchContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n border-bottom: 1px solid #303f51;\n display: flex;\n align-items: center;\n input:focus {\n outline: none;\n }\n .search-icon-wrapper {\n padding-right: 10px;\n }\n .input-field {\n border: none;\n color: #999999;\n min-width: 300px;\n margin-top: 0px;\n }\n .close-icon-wrapper {\n cursor: pointer;\n &:hover {\n path {\n fill: white;\n }\n }\n }\n"])));
1368
1362
  var AvatarBox = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n & .avatar-details {\n display: none;\n }\n\n .initial-placeholder {\n background: #78909c;\n width: 24px;\n height: 24px;\n text-align: center;\n border-radius: 100%;\n font-size: 12px;\n color: #fff;\n }\n"])));
1369
- var EditableColumn = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover .tooltip {\n display: flex;\n }\n"])));
1363
+ var EditableColumn = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n transition: all 0.2s ease;\n\n &:hover {\n svg path {\n fill: white;\n }\n .tooltip {\n display: flex;\n }\n }\n"])));
1370
1364
  var Tooltip = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n top: -35px; /* Adjust if needed */\n left: 50%;\n transform: translateX(-50%);\n display: none;\n width: max-content;\n height: 25px;\n padding: 5px 10px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 10px;\n flex-shrink: 0;\n background-color: #ffffff;\n color: #0c141d;\n font-family: \"SFUIText-Regular\";\n font-size: 12px;\n border-radius: 4px;\n z-index: 999;\n\n &:after {\n content: \"\";\n position: absolute;\n bottom: -6px;\n left: 50%;\n transform: translateX(-50%);\n border-top: 6px dashed #ffffff;\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n }\n"])));
1371
1365
  Table.SelectedAction = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n\n position: absolute;\n top: 0;\n left: 55px;\n width: 0px;\n overflow: hidden;\n transition: all 0.4s ease;\n height: 38px;\n background: ", ";//#ccc;\n display: flex;\n align-items: center;\n &.show{\n width: 146px;\n overflow: visible;\n }\n\n div.action-icons-common{\n white-space: nowrap;\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .tooltip-container{\n display: inline-block;\n margin: 0px 5px;\n }\n\n .action-button{\n // padding: 0px;\n // border-radius: 50%;\n // -webkit-appearance: none;\n // cursor:pointer;\n // align-items: center;\n // justify-content: center;\n // height: 25px;\n // width: 25px;\n\n &.default{\n //background: #666666;\n //border:1px solid #666666;\n &:hover{\n //background: #8e8e8e;\n //border:1px solid #8e8e8e;\n }\n }\n &.play{\n background: ", ";\n border:1px solid ", ";\n &:hover{\n background: #39cac2;\n border:1px solid #39cac2;\n }\n }\n }\n\n"])), function (props) {
1372
1366
  return _tokens.colors[props.theme].table.background;
@@ -1417,10 +1411,14 @@ Table.compare = {
1417
1411
  Table.Element = _styledComponents["default"].table(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n"])));
1418
1412
  var TableInner = {};
1419
1413
  TableInner.Element = _styledComponents["default"].table(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n border-spacing: 0;\n border-collapse: collapse;\n"])));
1420
- TableInner.Cell = _styledComponents["default"].td(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: \"SFUIText-Regular\";\n font-size: 12px;\n letter-spacing: 0.4px;\n color: ", ";\n padding: 7px 14px;\n border-top: 1px solid ", ";\n text-align: left;\n vertical-align: middle;\n line-height: 2;\n width: auto;\n"])), function (props) {
1414
+ TableInner.Cell = _styledComponents["default"].td(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: \"SFUIText-Regular\";\n font-size: 12px;\n letter-spacing: 0.4px;\n color: ", ";\n padding: 7px 14px;\n border-top: 1px solid ", ";\n text-align: left;\n vertical-align: middle;\n line-height: 2;\n width: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: ", ";\n max-width: ", ";\n\n & > div.text-box {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n &.text-linkexpired {\n color: #ff6c56;\n }\n }\n"])), function (props) {
1421
1415
  return _tokens.colors[props.theme].table.InnerTdColor;
1422
1416
  }, function (props) {
1423
1417
  return _tokens.colors[props.theme].table.border;
1418
+ }, function (props) {
1419
+ return props.column.width || "175px";
1420
+ }, function (props) {
1421
+ return props.maxWidth || "175px";
1424
1422
  });
1425
1423
  Table.Body = _styledComponents["default"].tbody(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])([""])));
1426
1424
  Table.Row = _styledComponents["default"].tr(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n .show-row {\n transform: rotate(-180deg);\n -webkit-transform: rotate(-180deg);\n -moz-transform: rotate(-180deg);\n -ms-transform: rotate(-180deg);\n -o-transform: rotate(-180deg);\n }\n .hide-row {\n transform: rotate(0deg);\n -webkit-transform: rotate(0deg);\n -moz-transform: rotate(0deg);\n -ms-transform: rotate(0deg);\n -o-transform: rotate(0deg);\n }\n .show-row,\n .hide-row {\n transition: transform 0.5s ease-in-out;\n -webkit-transition: transform 0.5s ease-in-out;\n -moz-transition: transform 0.5s ease-in-out;\n -ms-transition: transform 0.5s ease-in-out;\n -o-transition: transform 0.5s ease-in-out;\n text-align: right;\n cursor: pointer;\n }\n\n &.selected-row > td,\n &.selected-row:nth-child(even) > td {\n background: ", ";\n }\n\n &:nth-child(even) > td {\n background: ", ";\n }\n\n &:hover {\n .asset-play {\n color: ", ";\n }\n }\n\n ", " {\n margin: 0px;\n box-shadow: 0px 0px 0px transparent;\n ", ";\n }\n"])), function (props) {
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.1.26",
3
+ "version": "9.1.28",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "9.1.26",
10
+ "@desynova-digital/tokens": "9.1.28",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },