@teselagen/ui 0.3.42 → 0.3.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.3.42",
+  "version": "0.3.44",
   "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,
@@ -434,7 +438,8 @@ class DataTable extends React.Component {
       reduxFormCellValidation
     } = this.props;
     const { newEnts, validationErrors } = this.formatAndValidateEntities(
-      initialEntities || entities || _origEntities
+      initialEntities ||
+        (entities && entities.length ? entities : _origEntities)
     );
     change("reduxFormEntities", newEnts);
     const toKeep = {};
@@ -896,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 = [];
 
@@ -1703,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({
@@ -2960,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/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>