@desynova-digital/components 8.19.8 → 8.19.10

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 +30 -27
  2. package/package.json +2 -2
package/molecules/table/table.js CHANGED
@@ -21,7 +21,7 @@ var _templateObject = _taggedTemplateLiteral(["\n border-bottom: 1px solid #303
21
21
  _templateObject9 = _taggedTemplateLiteral(["\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: #00cec6;\n }\n }\n\n ", " {\n margin: 0px;\n box-shadow: 0px 0px 0px transparent;\n ", ";\n }\n"], ["\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: #00cec6;\n }\n }\n\n ", " {\n margin: 0px;\n box-shadow: 0px 0px 0px transparent;\n ", ";\n }\n"]),
22
22
  _templateObject10 = _taggedTemplateLiteral(["\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: ", ";\n max-width: 200px;\n\n &.tableHolder{\n padding:0px;\n }\n\n .asset-play {\n cursor: pointer;\n background-color: transparent;\n border: none;\n color: #dddddd;\n &:hover, &:focus {\n outline: none;\n color: #00cec6;\n text-decoration: underline;\n }\n }\n\n .icon-circle {\n border-radius: 50%;\n width: 24px;\n height: 24px;\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n i {\n line-height: 0;\n }\n }\n\n // max-width: 0;\n // overflow: hidden;\n // text-overflow: ellipsis;\n // white-space: nowrap;\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 & > div.action-icons-cell{\n white-space: nowrap;\n\n .tooltip-block {\n top: -50px;\n }\n \n .action-item-btn {\n padding: 0 15px;\n cursor: pointer;\n background-color: transparent;\n\n &.nested {\n border-bottom: 1px solid #303f51;\n display: flex;\n padding: 10px;\n align-items: center;\n &>div:first-child{\n margin-right:10px;\n }\n &:last-child{\n border-bottom: 0px none;\n }\n }\n\n &:hover {\n transition: color 0.4s ease-out;\n color: #00cec6;\n path{\n fill: #00cec6;\n transition: fill 0.4s ease-out;\n }\n }\n }\n\n\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .more-action-holder {\n position: relative;\n\n &:hover {\n .more-action-list-box{\n display:block;\n }\n .more-action-icon{\n transition: all 0.4s ease-out;\n background: #00cec6;\n }\n }\n\n .more-action-icon{\n height: 24px;\n width: 24px;\n background: #303f51;\n border-radius: 50%;\n padding: 0px 10px;\n transform: translate(0px, -1px);\n }\n .more-action-list-box{\n position: absolute;\n z-index:100;\n display:none;\n //display:block;\n padding-top: 11px;\n transform: translate(-136px,-2px);\n \n .more-action-list {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n background: ", ";\n min-width: 200px;\n }\n\n &:before{\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n \n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid #00cec6;\n transform: translate(144px,-6px);\n }\n\n }\n\n }\n }\n\n .nested-table {\n background: #182738;\n border-left: 2px solid #00CEC6;\n }\n\n\n"], ["\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: ", ";\n max-width: 200px;\n\n &.tableHolder{\n padding:0px;\n }\n\n .asset-play {\n cursor: pointer;\n background-color: transparent;\n border: none;\n color: #dddddd;\n &:hover, &:focus {\n outline: none;\n color: #00cec6;\n text-decoration: underline;\n }\n }\n\n .icon-circle {\n border-radius: 50%;\n width: 24px;\n height: 24px;\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n i {\n line-height: 0;\n }\n }\n\n // max-width: 0;\n // overflow: hidden;\n // text-overflow: ellipsis;\n // white-space: nowrap;\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 & > div.action-icons-cell{\n white-space: nowrap;\n\n .tooltip-block {\n top: -50px;\n }\n \n .action-item-btn {\n padding: 0 15px;\n cursor: pointer;\n background-color: transparent;\n\n &.nested {\n border-bottom: 1px solid #303f51;\n display: flex;\n padding: 10px;\n align-items: center;\n &>div:first-child{\n margin-right:10px;\n }\n &:last-child{\n border-bottom: 0px none;\n }\n }\n\n &:hover {\n transition: color 0.4s ease-out;\n color: #00cec6;\n path{\n fill: #00cec6;\n transition: fill 0.4s ease-out;\n }\n }\n }\n\n\n &>button{\n margin-right: 15px;\n display: inline-flex;\n }\n &>button:last-child{\n margin-right: 0px;\n }\n\n .more-action-holder {\n position: relative;\n\n &:hover {\n .more-action-list-box{\n display:block;\n }\n .more-action-icon{\n transition: all 0.4s ease-out;\n background: #00cec6;\n }\n }\n\n .more-action-icon{\n height: 24px;\n width: 24px;\n background: #303f51;\n border-radius: 50%;\n padding: 0px 10px;\n transform: translate(0px, -1px);\n }\n .more-action-list-box{\n position: absolute;\n z-index:100;\n display:none;\n //display:block;\n padding-top: 11px;\n transform: translate(-136px,-2px);\n \n .more-action-list {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2);\n background: ", ";\n min-width: 200px;\n }\n\n &:before{\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n \n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid #00cec6;\n transform: translate(144px,-6px);\n }\n\n }\n\n }\n }\n\n .nested-table {\n background: #182738;\n border-left: 2px solid #00CEC6;\n }\n\n\n"]),
23
23
  _templateObject11 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n .detail-block {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 7px;\n }\n\n .status-color {\n width: 7px;\n height: 7px;\n margin-right: 6px;\n border-radius: 100%;\n background: rgba(255, 255, 255, 0.3);\n &.approved {\n background: #00cec6;\n }\n &.rejected {\n background: #ef5350;\n }\n }\n .language-name {\n text-transform: capitalize;\n font-size: 12px;\n font-family: SFUIText-Regular;\n color: #fff;\n }\n }\n"], ["\n display: flex;\n align-items: center;\n .detail-block {\n display: flex;\n justify-content: center;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 7px;\n }\n\n .status-color {\n width: 7px;\n height: 7px;\n margin-right: 6px;\n border-radius: 100%;\n background: rgba(255, 255, 255, 0.3);\n &.approved {\n background: #00cec6;\n }\n &.rejected {\n background: #ef5350;\n }\n }\n .language-name {\n text-transform: capitalize;\n font-size: 12px;\n font-family: SFUIText-Regular;\n color: #fff;\n }\n }\n"]),
24
- _templateObject12 = _taggedTemplateLiteral(["\nwidth: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;"], ["\nwidth: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;"]);
24
+ _templateObject12 = _taggedTemplateLiteral(["\nwidth: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;\n .input-select-all-button{\n height:0px;width:0px;display:none;\n }\n .label-select-all-button{position: relative;\n cursor: pointer;\n display: flex;\n margin: 0px;\n height: 20px;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n .span-select-all-button{\n display:", ";\n position: absolute;\n top: 10px;\n left: 5px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0 100%;\n animation:", " ;\n }\n }\n "], ["\nwidth: 20px;\n height: 20px;\n background: transparent;\n border: ", ";\n border-radius: 50%;\n cursor: pointer;\n position: absolute;\n left: 14px;\n z-index: 2;\n top: 75px;\n .input-select-all-button{\n height:0px;width:0px;display:none;\n }\n .label-select-all-button{position: relative;\n cursor: pointer;\n display: flex;\n margin: 0px;\n height: 20px;\n align-items: center;\n border-radius: 50%;\n background: ", ";\n .span-select-all-button{\n display:", ";\n position: absolute;\n top: 10px;\n left: 5px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0 100%;\n animation:", " ;\n }\n }\n "]);
25
25
 
26
26
  var _react = require("react");
27
27
 
@@ -200,6 +200,7 @@ var Table = function (_Component) {
200
200
 
201
201
  if (actionClickHandler) {
202
202
  actionClickHandler(action, items[idx], e);
203
+ _this.setState({ isAllRowsSelected: false });
203
204
  } else {
204
205
  console.log("pass func as props named 'actionClickHandler'... receive args as actionItem name and event obj. ");
205
206
  }
@@ -634,6 +635,11 @@ var Table = function (_Component) {
634
635
  selectedRows: []
635
636
  });
636
637
  }
638
+ if (prevProps.tableLoading !== this.props.tableLoading) {
639
+ this.setState({
640
+ isAllRowsSelected: false
641
+ });
642
+ }
637
643
  }
638
644
  }, {
639
645
  key: "toggleExtraDetails",
@@ -990,7 +996,8 @@ var Table = function (_Component) {
990
996
  downloadAvailable = _props2.downloadAvailable;
991
997
  var _state2 = this.state,
992
998
  nestedTable = _state2.nestedTable,
993
- searchedText = _state2.searchedText;
999
+ searchedText = _state2.searchedText,
1000
+ items = _state2.items;
994
1001
 
995
1002
 
996
1003
  var rows = this.state.items.map(function (item, index) {
@@ -1309,36 +1316,18 @@ var Table = function (_Component) {
1309
1316
  )
1310
1317
  )
1311
1318
  ),
1312
- this.state.showColumnArr[0] === 'rowChecked' && this.props.selectAllRows && _react2.default.createElement(
1319
+ rows.length && this.state.showColumnArr[0] === 'rowChecked' && this.props.selectAllRows ? _react2.default.createElement(
1313
1320
  SelectAllButton,
1314
1321
  { isActive: !this.state.isAllRowsSelected, onClick: function onClick(e) {
1315
1322
  _this4.execute(!_this4.state.isAllRowsSelected);
1316
1323
  } },
1324
+ _react2.default.createElement("input", { className: "input-select-all-button", type: "checkbox" }),
1317
1325
  _react2.default.createElement(
1318
- "div",
1319
- null,
1320
- _react2.default.createElement(
1321
- "label",
1322
- null,
1323
- _react2.default.createElement(
1324
- "span",
1325
- null,
1326
- this.state.isAllRowsSelected ? _react2.default.createElement("div", { style: { height: '19px', width: '19px', border: '1.2px solid #49dad0', borderRadius: '50%', background: '#49dad0' } }) : '',
1327
- this.state.isAllRowsSelected ? _react2.default.createElement("span", { style: {
1328
- content: "",
1329
- position: 'absolute',
1330
- top: '8px',
1331
- left: '4px',
1332
- borderRight: '2px solid transparent',
1333
- borderBottom: '2px solid transparent',
1334
- transform: 'rotate(45deg)',
1335
- transformOrigin: '0% 100%',
1336
- animation: 'checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards'
1337
- } }) : ''
1338
- )
1339
- )
1326
+ "label",
1327
+ { className: "label-select-all-button" },
1328
+ _react2.default.createElement("span", { className: "span-select-all-button" })
1340
1329
  )
1341
- ),
1330
+ ) : null,
1342
1331
  _react2.default.createElement(
1343
1332
  Table.Card,
1344
1333
  _extends({
@@ -1362,6 +1351,14 @@ var Table = function (_Component) {
1362
1351
  key: idx,
1363
1352
  onClick: function onClick(e) {
1364
1353
  if (_this4.props.commonActionClickHandler) {
1354
+ var uncheckedItems = items.map(function (ele) {
1355
+ return ele.rowChecked = false;
1356
+ });
1357
+ _this4.setState({ items: uncheckedItems,
1358
+ ingestedDbIdArray: [],
1359
+ isAllRowsSelected: false,
1360
+ commonActionsSelected: [],
1361
+ selectedRows: [] });
1365
1362
  _this4.props.commonActionClickHandler(item, e, _this4.state.ingestedDbIdArray, "common-action");
1366
1363
  } else {
1367
1364
  console.log("pass func as props named 'commonActionClickHandler'... receive args as actionItem name and event obj. ");
@@ -1468,7 +1465,13 @@ Table.Cell = _styledComponents2.default.td(_templateObject10, function (props) {
1468
1465
 
1469
1466
  var DubbingStatusStyles = _styledComponents2.default.div(_templateObject11);
1470
1467
  var SelectAllButton = _styledComponents2.default.div(_templateObject12, function (props) {
1471
- return props.isActive ? '1px solid #9E9E9E' : 'none';
1468
+ return props.isActive ? '1px solid #9E9E9E' : '';
1469
+ }, function (props) {
1470
+ return !props.isActive ? '#49dad0' : '';
1471
+ }, function (props) {
1472
+ return props.isActive ? 'inline' : '';
1473
+ }, function (props) {
1474
+ return !props.isActive ? 'checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards' : '';
1472
1475
  });
1473
1476
 
1474
1477
  Table.propTypes = {
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "8.19.8",
3
+ "version": "8.19.10",
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": "8.19.8",
10
+ "@desynova-digital/tokens": "8.19.10",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },