itsa-react-table 16.7.0 → 16.8.0

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/lib/component.jsx +100 -23
  2. package/package.json +1 -1
package/lib/component.jsx CHANGED
@@ -450,9 +450,12 @@ class Table extends React.Component {
450
450
  _blurActiveCell() {
451
451
  const instance = this,
452
452
  state = instance.state,
453
- textareaNode = instance['_textarea_'+state.editableRow+'_'+state.editableCol];
454
- if (textareaNode && (document.activeElement===textareaNode)) {
455
- textareaNode.blur();
453
+ textareaNode = instance['_textarea_'+state.editableRow+'_'+state.editableCol],
454
+ componentContainerNode = instance['_component_'+state.editableRow+'_'+state.editableCol],
455
+ componentNode = componentContainerNode && componentContainerNode.itsa_getElement('button'),
456
+ focussableNode = textareaNode || componentNode;
457
+ if (focussableNode && ((document.activeElement===focussableNode) || document.activeElement.contains(focussableNode))) {
458
+ focussableNode.blur();
456
459
  }
457
460
  }
458
461
 
@@ -461,7 +464,9 @@ class Table extends React.Component {
461
464
  async(() => {
462
465
  let length;
463
466
  const state = instance.state,
464
- textareaNode = instance['_textarea_'+state.editableRow+'_'+state.editableCol];
467
+ textareaNode = instance['_textarea_'+state.editableRow+'_'+state.editableCol],
468
+ componentContainerNode = instance['_component_'+state.editableRow+'_'+state.editableCol],
469
+ componentNode = componentContainerNode && componentContainerNode.itsa_getElement('button');
465
470
  if (textareaNode && (document.activeElement!==textareaNode)) {
466
471
  instance._editValueBeforeEdit = textareaNode.value || '';
467
472
  textareaNode.focus();
@@ -470,6 +475,9 @@ class Table extends React.Component {
470
475
  textareaNode.setSelectionRange(0, length);
471
476
  }
472
477
  }
478
+ else if (componentNode) {
479
+ componentNode.focus();
480
+ }
473
481
  });
474
482
  }
475
483
 
@@ -628,6 +636,17 @@ class Table extends React.Component {
628
636
  key={field} />
629
637
  );
630
638
  }
639
+ else if (Object.itsa_isObject(value)) {
640
+ return (
641
+ <td
642
+ className={classname}
643
+ data-colid={j}
644
+ key={field}
645
+ ref={node => instance['_component_'+i+'_'+j] = node}>
646
+ {value}
647
+ </td>
648
+ );
649
+ }
631
650
  else if (fullEditable || ((editable===true) && (state.editableRow===i) && (state.editableCol===j)) && colIsEditable(j)) {
632
651
  classname += EDITABLE_CELL_CLASS_SPACED;
633
652
  (typeof value==='number') || value || (value='');
@@ -638,6 +657,9 @@ class Table extends React.Component {
638
657
  else {
639
658
  textAreaValue = value;
640
659
  }
660
+ if ((textAreaValue===null) || (textAreaValue===undefined)) {
661
+ textAreaValue = '';
662
+ }
641
663
  fullEditable && (onBlur=instance.implementCellChanges.bind(instance, i, field));
642
664
  cellContent = (
643
665
  <textarea
@@ -687,7 +709,8 @@ class Table extends React.Component {
687
709
  <td
688
710
  className={classname}
689
711
  data-colid={j}
690
- key={field}>
712
+ key={field}
713
+ ref={node => instance['_component_'+i+'_'+j] = node}>
691
714
  {value}
692
715
  </td>
693
716
  );
@@ -713,6 +736,17 @@ class Table extends React.Component {
713
736
  cellContent = value;
714
737
  cells.push((<td className={classname} dangerouslySetInnerHTML={{__html: cellContent}} data-colid={colCount} key={key} />));
715
738
  }
739
+ else if (Object.itsa_isObject(value)) {
740
+ return (
741
+ <td
742
+ className={classname}
743
+ data-colid={j}
744
+ key={field}
745
+ ref={node => instance['_component_'+i+'_'+j] = node}>
746
+ {value}
747
+ </td>
748
+ );
749
+ }
716
750
  else if (fullEditable || ((editable===true) && (state.editableRow===i) && (state.editableCol===colCount))) {
717
751
  classname += EDITABLE_CELL_CLASS_SPACED;
718
752
  (typeof value==='number') || value || (value='');
@@ -723,6 +757,9 @@ class Table extends React.Component {
723
757
  else {
724
758
  textAreaValue = value;
725
759
  }
760
+ if ((textAreaValue===null) || (textAreaValue===undefined)) {
761
+ textAreaValue = '';
762
+ }
726
763
  fullEditable && (onBlur=instance.implementCellChanges.bind(instance, i, field));
727
764
  cellContent = (
728
765
  <textarea
@@ -760,7 +797,7 @@ class Table extends React.Component {
760
797
  cells.push((<td className={classname} dangerouslySetInnerHTML={{__html: cellContent}} data-colid={colCount} key={key} />));
761
798
  }
762
799
  else {
763
- cells.push((<td className={classname} data-colid={colCount} key={key}>{value}</td>));
800
+ cells.push((<td className={classname} data-colid={colCount} key={key} ref={node => instance['_component_'+i+'_'+j] = node}>{value}</td>));
764
801
  }
765
802
  }
766
803
  });
@@ -789,8 +826,8 @@ class Table extends React.Component {
789
826
  }
790
827
 
791
828
  refocus(e) {
792
- let focusRow, focusCol, match, maxRow, maxCol, firstItem, item, editValue, colChangedByRow,
793
- prevRowIndex, prevColIndex, field, editDirectionDown, arrowDown, arrowUp;
829
+ let focusRow, focusCol, match, maxRow, maxCol, firstItem, item, editValue, colChangedByRow, isSelectComponent, less,
830
+ prevRowIndex, prevColIndex, field, editDirectionDown, arrowDown, arrowUp, node, trNode, trParentNode, tds, trs;
794
831
  const instance = this,
795
832
  props = instance.props,
796
833
  state = instance.state,
@@ -819,12 +856,24 @@ class Table extends React.Component {
819
856
  return;
820
857
  }
821
858
  }
859
+
822
860
  match = (
823
861
  (keyCode===9) ||
824
862
  (keyCode===13) ||
825
863
  (cursorNav && ((keyCode===40) || (keyCode===38))) ||
826
864
  (cursorNav && ctrlKey && ((keyCode===37) || (keyCode===39)))
827
865
  ); // 40=arrowDown, 38=arrowUp
866
+
867
+ // we need to ignore MOVING DOWN in case the focus lies on a button component
868
+ if ((document.activeElement.tagName==='BUTTON') && (keyCode===13)) {
869
+ match = false;
870
+ }
871
+
872
+ isSelectComponent = (document.activeElement.itsa_hasClass('itsa-select') || document.activeElement.itsa_inside('.itsa-select'));
873
+ if (isSelectComponent && ((keyCode===13) || (cursorNav && ((keyCode===38) || (keyCode===40))))) {
874
+ match = false;
875
+ }
876
+
828
877
  if (match) {
829
878
  e.preventDefault();
830
879
  arrowDown = (keyCode===40);
@@ -837,8 +886,34 @@ class Table extends React.Component {
837
886
  firstItem = data[0];
838
887
  maxCol = firstItem ? firstItem.itsa_size()-1 : 0;
839
888
  }
840
- focusRow = prevRowIndex = state.editableRow;
841
- focusCol = prevColIndex = state.editableCol;
889
+
890
+ if (isSelectComponent) {
891
+ // we need to catch editableRow and editableCol because thay are not set
892
+ less = 0;
893
+ if (props.removeableY) {
894
+ less++;
895
+ }
896
+ if (props.extendableY==='full') {
897
+ less++;
898
+ }
899
+
900
+ node = document.activeElement;
901
+ while (node && (node.tagName!=='TD')) {
902
+ node = node.parentNode;
903
+ }
904
+ trNode = node.parentNode;
905
+ tds = trNode.childNodes;
906
+ prevColIndex = Array.prototype.indexOf.call(tds, node) - less;
907
+ trParentNode = trNode.parentNode;
908
+ trs = trParentNode.childNodes;
909
+ prevRowIndex = Array.prototype.indexOf.call(trs, trNode);
910
+ }
911
+ else {
912
+ prevRowIndex = state.editableRow;
913
+ prevColIndex = state.editableCol;
914
+ }
915
+ focusRow = prevRowIndex;
916
+ focusCol = prevColIndex;
842
917
 
843
918
  if (((keyCode===9) && shiftKey) || ((keyCode===37) && ctrlKey) || arrowUp) {
844
919
  // backwards
@@ -920,19 +995,21 @@ class Table extends React.Component {
920
995
  (focusRow>maxRow) && (focusRow=0);
921
996
  }
922
997
  item = props.data[focusRow];
923
- editValue = hasColumns ? item[retrieveFieldName(columns[focusCol])] : item[retrieveFieldName(instance._columns[focusCol])];
924
- this.setState({
925
- editableRow: focusRow,
926
- editableCol: focusCol,
927
- editValue,
928
- selectedRangeStart: {
929
- x: focusCol,
930
- y: focusRow
931
- },
932
- selectedRange: null
933
- });
934
- instance._focusActiveCell();
935
- implementChanges();
998
+ if (item) {
999
+ editValue = hasColumns ? item[retrieveFieldName(columns[focusCol])] : item[retrieveFieldName(instance._columns[focusCol])];
1000
+ this.setState({
1001
+ editableRow: focusRow,
1002
+ editableCol: focusCol,
1003
+ editValue,
1004
+ selectedRangeStart: {
1005
+ x: focusCol,
1006
+ y: focusRow
1007
+ },
1008
+ selectedRange: null
1009
+ });
1010
+ instance._focusActiveCell();
1011
+ implementChanges();
1012
+ }
936
1013
  }
937
1014
  }
938
1015
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "itsa-react-table",
3
- "version": "16.7.0",
3
+ "version": "16.8.0",
4
4
  "description": "Editable React.js table",
5
5
  "author": [
6
6
  {