@helpdice/ui 1.3.4 → 1.3.6

package/esm/checkbox/checkbox.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { InputHTMLAttributes } from 'react';
 import { NormalTypes } from '../utils/prop-types';
 export type CheckboxTypes = NormalTypes;
 export interface CheckboxEventTarget {
     checked: boolean;
 }
-export interface CheckboxEvent {
+export interface CheckboxEvent extends InputHTMLAttributes<any> {
     target: CheckboxEventTarget;
     stopPropagation: () => void;
     preventDefault: () => void;

package/esm/checkbox/checkbox.js

@@ -60,9 +60,9 @@ var CheckboxComponent = function CheckboxComponent(_ref) {
   var changeHandle = useCallback(function (ev) {
     if (isDisabled) return;
     var selfEvent = {
-      target: {
+      target: _extends({}, ev.target, {
         checked: !selfChecked
-      },
+      }),
       stopPropagation: ev.stopPropagation,
       preventDefault: ev.preventDefault,
       nativeEvent: ev

package/esm/form/FormPersist.js

@@ -0,0 +1,56 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import * as React from 'react';
+import connect from './connect';
+import { debounce } from 'lodash';
+import isEqual from 'react-fast-compare';
+var PersistImpl = /*#__PURE__*/function (_React$Component) {
+  function PersistImpl() {
+    var _this;
+    _classCallCheck(this, PersistImpl);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, PersistImpl, [].concat(args));
+    _defineProperty(_this, "saveForm", debounce(function (data) {
+      if (_this.props.isSessionStorage) {
+        window.sessionStorage.setItem(_this.props.name, JSON.stringify(data));
+      } else {
+        window.localStorage.setItem(_this.props.name, JSON.stringify(data));
+      }
+    }, _this.props.debounce));
+    return _this;
+  }
+  _inherits(PersistImpl, _React$Component);
+  return _createClass(PersistImpl, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (!isEqual(prevProps.formik, this.props.formik)) {
+        this.saveForm(this.props.formik);
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var maybeState = this.props.isSessionStorage ? window.sessionStorage.getItem(this.props.name) : window.localStorage.getItem(this.props.name);
+      if (maybeState && maybeState !== null) {
+        this.props.formik.setFormikState(JSON.parse(maybeState));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return null;
+    }
+  }]);
+}(React.Component);
+_defineProperty(PersistImpl, "defaultProps", {
+  debounce: 300
+});
+export var FormPersist = connect(PersistImpl);

package/esm/table/data-table.js

@@ -96,34 +96,6 @@ function DataTable(_ref) {
       }
     });
   }, [hideColumn, cols, rows]);
-
-  // const handleClick = (event: React.MouseEvent<HTMLTableRowElement, MouseEvent>, id: any) => {
-  //     if (readOnly) {
-  //         return true;
-  //     }
-  //     const selectedIndex = selected.indexOf(id as never);
-  //     let newSelected: never[] | ((prevState: never[]) => never[]) = [];
-  //     if (selectedIndex === -1) {
-  //         newSelected = newSelected.concat(selected, id);
-  //     } else if (selectedIndex === 0) {
-  //         newSelected = newSelected.concat(selected.slice(1));
-  //     } else if (selectedIndex === selected.length - 1) {
-  //         newSelected = newSelected.concat(selected.slice(0, -1));
-  //     } else if (selectedIndex > 0) {
-  //         newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
-  //     }
-  //     setSelected(newSelected);
-  // };
-
-  // const handleSelectAllClick = (event: { target: { checked: any } }) => {
-  //     if (event.target.checked) {
-  //         const newSelecteds = rows.map((n: { _id: any }) => n._id);
-  //         setSelected(newSelecteds as never[]);
-  //         return;
-  //     }
-  //     setSelected([]);
-  // };
-
   var handleHideColumnClick = function handleHideColumnClick(_event, id) {
     var selectedIndex = hideColumn.indexOf(id);
     var newSelected = [];
@@ -222,7 +194,7 @@ function DataTable(_ref) {
     },
     justify: "flex-end",
     alignContent: "center"
-  }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, selected.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
+  }, menu, !children && !readOnly ? /*#__PURE__*/React.createElement(React.Fragment, null, onSelectedEdit && selected.length === 1 ? /*#__PURE__*/React.createElement(Tooltip, {
     text: "Edit Selected",
     placement: "bottom",
     font: 0.8,
@@ -237,7 +209,7 @@ function DataTable(_ref) {
     auto: true,
     scale: 2 / 3,
     px: 0.6
-  })) : null, onSelectedDelete ? /*#__PURE__*/React.createElement(Tooltip, {
+  })) : null, onSelectedDelete && selected.length > 1 ? /*#__PURE__*/React.createElement(Tooltip, {
     text: "Delete Selected",
     placement: "bottom",
     font: 0.8,
@@ -252,7 +224,7 @@ function DataTable(_ref) {
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React.createElement(Delete, null)
-  })) : null), onRefresh ? /*#__PURE__*/React.createElement(Tooltip, {
+  })) : null, onRefresh ? /*#__PURE__*/React.createElement(Tooltip, {
     text: "Refresh",
     placement: "bottom",
     font: 0.8,

package/esm/table/table-body.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _JSXStyle from "../styled-jsx.es.js";
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import useTheme from '../use-theme';
 import TableCell from './table-cell';
 import { useTableContext } from './table-context';
 import useClasses from '../use-classes';
 import _ from 'lodash';
 import Placeholder from '../Placeholder';
+import DataTable from './data-table';
 var TableBody = function TableBody(_ref) {
   var data = _ref.data,
     emptyText = _ref.emptyText,
@@ -46,6 +47,9 @@ var TableBody = function TableBody(_ref) {
       newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
     }
     setSelected(newSelected);
+    if (newSelected.length > 0 && onSelected) {
+      onSelected(newSelected);
+    }
   };
 
   // const handleSelectAllClick = (event: { target: { checked: any } }) => {
@@ -58,11 +62,12 @@ var TableBody = function TableBody(_ref) {
   // };
 
   // Push Selected Rows
-  useEffect(function () {
-    if (selected.length > 0 && onSelected) {
-      onSelected(selected);
-    }
-  }, [selected]);
+  // useEffect(() => {
+  //   if (selected.length > 0 && onSelected) {
+  //     onSelected(selected);
+  //   }
+  // }, [selected]);
+
   function renderRow(cols, row, index) {
     var _row$style;
     var urid = _.uniqueId();
@@ -122,6 +127,7 @@ var TableBody = function TableBody(_ref) {
   return /*#__PURE__*/React.createElement("tbody", {
     className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
   }, data.map(function (row, index) {
+    var _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
     var qid = _.uniqueId();
     if (row === null || row === undefined) {
       var uid = _.uniqueId();
@@ -142,7 +148,17 @@ var TableBody = function TableBody(_ref) {
       },
       colSpan: columns.length,
       className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
-    })));
+    }, /*#__PURE__*/React.createElement(DataTable, {
+      readOnly: true,
+      stickyHeader: false,
+      style: _extends({
+        height: 'auto !important'
+      }, row === null || row === void 0 || (_row$table = row.table) === null || _row$table === void 0 ? void 0 : _row$table.style),
+      menu: (_row$table2 = row.table) === null || _row$table2 === void 0 ? void 0 : _row$table2.menu,
+      rows: (_row$table3 = row.table) === null || _row$table3 === void 0 ? void 0 : _row$table3.rows,
+      heading: (_row$table4 = row.table) === null || _row$table4 === void 0 ? void 0 : _row$table4.heading,
+      cols: (_row$table5 = row.table) === null || _row$table5 === void 0 ? void 0 : _row$table5.cols
+    }))));
 
     // return (
     //   <tr

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",