@desynova-digital/components 8.19.7 → 8.19.9

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 +27 -34
  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",
@@ -770,7 +776,7 @@ var Table = function (_Component) {
770
776
  });
771
777
  var commonActions = this.findCommon(this.state.items);
772
778
  var commonDisplayActions = commonActions.filter(function (value) {
773
- return _this2.props.dashboard_common_actions_2.includes(value);
779
+ return _this2.props.dashboard_common_actions.includes(value);
774
780
  });
775
781
  var n = this.state.items.length;
776
782
  var numberArray = [];
@@ -797,8 +803,8 @@ var Table = function (_Component) {
797
803
  this.execute(true);
798
804
  } else {
799
805
  var _props = this.props,
800
- dashboard_common_actions_2 = _props.dashboard_common_actions_2,
801
- dashboard_common_actions = _props.dashboard_common_actions;
806
+ dashboard_common_actions = _props.dashboard_common_actions,
807
+ common_actions = _props.common_actions;
802
808
 
803
809
  var table = e.target.closest("table");
804
810
  var checkboxNodes = table.querySelectorAll('thead tr th input[type="checkbox"]');
@@ -819,14 +825,13 @@ var Table = function (_Component) {
819
825
  /**
820
826
  * finalAns is an array of all selected asset items common Actions
821
827
  */
822
- console.log(dashboard_common_actions_2);
823
828
  var finalAns = this.findCommon(selected_row_items);
824
829
  if (finalAns.length != 0) {
825
- var intersectionDashboardCommonActions = dashboard_common_actions.filter(function (item) {
830
+ var intersectionDashboardCommonActions = common_actions.filter(function (item) {
826
831
  return finalAns.includes(item);
827
832
  });
828
833
  var commonActions = intersectionDashboardCommonActions.filter(function (value) {
829
- return dashboard_common_actions_2.includes(value);
834
+ return dashboard_common_actions.includes(value);
830
835
  });
831
836
  this.setState({ commonActionsSelected: commonActions, ingestedDbIdArray: arrayIngestDbId });
832
837
  } else {
@@ -865,11 +870,11 @@ var Table = function (_Component) {
865
870
  var _finalAns = this.findCommon(_selected_row_items);
866
871
 
867
872
  if (_finalAns.length != 0) {
868
- var _intersectionDashboardCommonActions = dashboard_common_actions.filter(function (item) {
873
+ var _intersectionDashboardCommonActions = common_actions.filter(function (item) {
869
874
  return _finalAns.includes(item);
870
875
  });
871
876
  var _commonActions = _intersectionDashboardCommonActions.filter(function (value) {
872
- return dashboard_common_actions_2.includes(value);
877
+ return dashboard_common_actions.includes(value);
873
878
  });
874
879
  this.setState({ commonActionsSelected: _commonActions, ingestedDbIdArray: _arrayIngestDbId });
875
880
  } else {
@@ -1310,36 +1315,18 @@ var Table = function (_Component) {
1310
1315
  )
1311
1316
  )
1312
1317
  ),
1313
- this.state.showColumnArr[0] === 'rowChecked' && this.props.selectAllRows && _react2.default.createElement(
1318
+ rows.length && this.state.showColumnArr[0] === 'rowChecked' && this.props.selectAllRows ? _react2.default.createElement(
1314
1319
  SelectAllButton,
1315
1320
  { isActive: !this.state.isAllRowsSelected, onClick: function onClick(e) {
1316
1321
  _this4.execute(!_this4.state.isAllRowsSelected);
1317
1322
  } },
1323
+ _react2.default.createElement("input", { className: "input-select-all-button", type: "checkbox" }),
1318
1324
  _react2.default.createElement(
1319
- "div",
1320
- null,
1321
- _react2.default.createElement(
1322
- "label",
1323
- null,
1324
- _react2.default.createElement(
1325
- "span",
1326
- null,
1327
- this.state.isAllRowsSelected ? _react2.default.createElement("div", { style: { height: '19px', width: '19px', border: '1.2px solid #49dad0', borderRadius: '50%', background: '#49dad0' } }) : '',
1328
- this.state.isAllRowsSelected ? _react2.default.createElement("span", { style: {
1329
- content: "",
1330
- position: 'absolute',
1331
- top: '8px',
1332
- left: '4px',
1333
- borderRight: '2px solid transparent',
1334
- borderBottom: '2px solid transparent',
1335
- transform: 'rotate(45deg)',
1336
- transformOrigin: '0% 100%',
1337
- animation: 'checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards'
1338
- } }) : ''
1339
- )
1340
- )
1325
+ "label",
1326
+ { className: "label-select-all-button" },
1327
+ _react2.default.createElement("span", { className: "span-select-all-button" })
1341
1328
  )
1342
- ),
1329
+ ) : null,
1343
1330
  _react2.default.createElement(
1344
1331
  Table.Card,
1345
1332
  _extends({
@@ -1469,7 +1456,13 @@ Table.Cell = _styledComponents2.default.td(_templateObject10, function (props) {
1469
1456
 
1470
1457
  var DubbingStatusStyles = _styledComponents2.default.div(_templateObject11);
1471
1458
  var SelectAllButton = _styledComponents2.default.div(_templateObject12, function (props) {
1472
- return props.isActive ? '1px solid #9E9E9E' : 'none';
1459
+ return props.isActive ? '1px solid #9E9E9E' : '';
1460
+ }, function (props) {
1461
+ return !props.isActive ? '#49dad0' : '';
1462
+ }, function (props) {
1463
+ return props.isActive ? 'inline' : '';
1464
+ }, function (props) {
1465
+ return !props.isActive ? 'checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards' : '';
1473
1466
  });
1474
1467
 
1475
1468
  Table.propTypes = {
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "8.19.7",
3
+ "version": "8.19.9",
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.7",
10
+ "@desynova-digital/tokens": "8.19.9",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },