@teselagen/ui 0.3.43 → 0.3.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.3.43",
+  "version": "0.3.45",
   "main": "./src/index.js",
   "exports": {
     ".": {

package/src/DataTable/index.js

@@ -96,6 +96,10 @@ const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1;
 class DataTable extends React.Component {
   constructor(props) {
     super(props);
+    if (this.props.helperProp) {
+      this.props.helperProp.addEditableTableEntities =
+        this.addEditableTableEntities;
+    }
     this.hotkeyEnabler = withHotkeys({
       moveUpARow: {
         global: false,
@@ -897,7 +901,7 @@ class DataTable extends React.Component {
 
   getRowCopyText = (rowEl, { specificColumn } = {}) => {
     //takes in a row element
-    if (!rowEl) return;
+    if (!rowEl) return [];
     const textContent = [];
     const jsonText = [];
 
@@ -1704,16 +1708,23 @@ class DataTable extends React.Component {
               additionalBodyEl={
                 isCellEditable &&
                 !onlyShowRowsWErrors && (
-                  <Button
-                    icon="add"
-                    style={{ marginTop: "auto" }}
-                    onClick={() => {
-                      this.insertRows({ numRows: 10, appendToBottom: true });
+                  <div
+                    style={{
+                      width: "100%",
+                      display: "flex",
+                      justifyContent: "center"
                     }}
-                    minimal
                   >
-                    Add 10 Rows
-                  </Button>
+                    <Button
+                      icon="add"
+                      onClick={() => {
+                        this.insertRows({ numRows: 10, appendToBottom: true });
+                      }}
+                      minimal
+                    >
+                      Add 10 Rows
+                    </Button>
+                  </div>
                 )
               }
               className={classNames({
@@ -2961,6 +2972,35 @@ class DataTable extends React.Component {
     return stringText;
   };
 
+  addEditableTableEntities = incomingEnts => {
+    const { entities = [], reduxFormCellValidation } = computePresets(
+      this.props
+    );
+
+    this.updateEntitiesHelper(entities, entities => {
+      const newEntities = incomingEnts.map(e => ({
+        ...e,
+        id: e.id || nanoid(),
+        _isClean: false
+      }));
+
+      const { newEnts, validationErrors } = this.formatAndValidateEntities(
+        newEntities,
+        {
+          useDefaultValues: true,
+          indexToStartAt: entities.length
+        }
+      );
+
+      entities.splice(entities.length, 0, ...newEnts);
+
+      this.updateValidation(entities, {
+        ...reduxFormCellValidation,
+        ...validationErrors
+      });
+    });
+  };
+
   insertRows = ({ above, numRows = 1, appendToBottom } = {}) => {
     const { entities = [], reduxFormCellValidation } = computePresets(
       this.props

package/src/DataTable/style.css

@@ -457,9 +457,9 @@ body:not(.drag-active)
 .tg-dropdown-cell-edit-container .bp3-tag-input .bp3-button {
   margin: 0;
 }
-.tg-dropdown-cell-edit-container .bp3-tag-input .bp3-tag-input-values > * {
+/* .tg-dropdown-cell-edit-container .bp3-tag-input .bp3-tag-input-values > * {
   margin-bottom: 0;
-}
+} */
 .tg-dropdown-cell-edit-container:not(.tg-dropdown-cell-edit-container-multi)
   .bp3-tag-input {
   min-height: 0;

package/src/UploadCsvWizard.js

@@ -587,6 +587,7 @@ export const PreviewCsvData = observer(function (props) {
         isSimple
         keepDirtyOnReinitialize
         isCellEditable
+        initialEntities={(initialEntities ? initialEntities : data) || []}
         entities={(initialEntities ? initialEntities : data) || []}
         schema={validateAgainstSchema}
       ></DataTable>

package/src/autoTooltip.js

@@ -1,6 +1,22 @@
 import tippy, { followCursor } from "tippy.js";
 import "tippy.js/dist/tippy.css";
 
+let isDragging = false;
+let canSetDragging = false;
+document.addEventListener("mousedown", () => {
+  canSetDragging = true;
+  isDragging = false;
+});
+document.addEventListener("mousemove", () => {
+  if (canSetDragging) {
+    isDragging = true;
+  }
+});
+document.addEventListener("mouseup", () => {
+  canSetDragging = false;
+  isDragging = false;
+});
+
 let tippys = [];
 let recentlyHidden = false;
 let clearMe;
@@ -142,7 +158,11 @@ let clearMe;
           dataAvoid,
           dataAvoidBackup
         };
-        if (dataTip && !document.body.classList.contains("drag-active")) {
+        if (
+          dataTip &&
+          !document.body.classList.contains("drag-active") &&
+          !isDragging
+        ) {
           if (dataTipStop) break;
 
           inner(dataTip, el, opts);

package/style.css

@@ -9546,9 +9546,9 @@ body:not(.drag-active)
 .tg-dropdown-cell-edit-container .bp3-tag-input .bp3-button {
   margin: 0;
 }
-.tg-dropdown-cell-edit-container .bp3-tag-input .bp3-tag-input-values > * {
+/* .tg-dropdown-cell-edit-container .bp3-tag-input .bp3-tag-input-values > * {
   margin-bottom: 0;
-}
+} */
 .tg-dropdown-cell-edit-container:not(.tg-dropdown-cell-edit-container-multi)
   .bp3-tag-input {
   min-height: 0;