update DataTable and FormComponents

CHANGELOG.md

@@ -53,6 +53,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Added menu item to allow user to export DNA as FASTA when looking at a protein sequence to resolve https://github.com/TeselaGen/tg-oss/issues/61 [`#61`](https://github.com/TeselaGen/tg-oss/issues/61)
 - Added fix for clipboard commands when there are multiple editors on a page to resolve https://github.com/TeselaGen/tg-oss/issues/24 [`#24`](https://github.com/TeselaGen/tg-oss/issues/24)
 - closes #35 [`#35`](https://github.com/TeselaGen/tg-oss/issues/35)
+- update DataTable and FormComponents [`36ef724`](https://github.com/TeselaGen/tg-oss/commit/36ef72405d115a3829da3fe0a0a6fb8e02f0c5bb)
 - updating yarn lock [`ff41df0`](https://github.com/TeselaGen/tg-oss/commit/ff41df0b49b8051fcba084f7eaa44cf23284926d)
 - updating deps, moving to lodash-es, moving all packages to type: module [`bc7312c`](https://github.com/TeselaGen/tg-oss/commit/bc7312ccbe27c2d9a11cf2563ba978199428b50a)
-- fix: upgrade react-dom [`5af38fa`](https://github.com/TeselaGen/tg-oss/commit/5af38fa54bbbb6c251b6a05734db3f42a242152e)

example-demos/oveViteDemo/src/index.jsx

@@ -1,6 +1,6 @@
 import "./shimGlobal";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { Loading } from "@teselagen/ui";
 
@@ -10,14 +10,16 @@ import App from "./App";
 
 import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(
+const domNode = document.getElementById("root");
+const root = createRoot(domNode);
+
+root.render(
   <React.StrictMode>
     <Provider store={store}>
       <Loading />
       <App />
     </Provider>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
 
 // If you want your app to work offline and load faster, you can change

example-demos/oveWebpackDemo/src/index.js → example-demos/oveWebpackDemo/src/index.jsx

@@ -1,15 +1,17 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import store from "./store";
 import "./index.css";
 import App from "./App";
 
-ReactDOM.render(
+const domNode = document.getElementById("root");
+const root = createRoot(domNode);
+
+root.render(
   <React.StrictMode>
     <Provider store={store}>
       <App />
     </Provider>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );

helperUtils/renderDemo.jsx

@@ -0,0 +1,3 @@
+import { createRoot } from "react-dom/client";
+const root = createRoot(document.querySelector("#demo"));
+export default Demo => root.render(<Demo />);

package.json

@@ -53,16 +53,16 @@
     "popper.js": "^1.16.1",
     "prop-types": "^15.6.2",
     "qs": "^6.9.6",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-color": "^2.19.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-draggable": "4.4.5",
     "react-dropzone": "^11.4.2",
     "react-markdown": "8.0.7",
     "react-measure": "^2.5.2",
     "react-redux": "^8.0.5",
     "react-rnd": "^10.2.4",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "4",
     "react-sizeme": "^2.6.12",
     "react-transition-group": "^2.4.0",
     "recompose": "npm:[email protected]",
@@ -122,7 +122,7 @@
     "chai-things": "0.2.0",
     "chance": "^1.1.11",
     "concurrently": "^8.2.2",
-    "cypress": "13.10.0",
+    "cypress": "^13.14.1",
     "cypress-vite": "^1.4.0",
     "esbuild": "^0.21.3",
     "eslint": "~8.53.0",

packages/ove/demo/src/EditorDemo/AddEditFeatureOverrideExample.js

@@ -126,7 +126,11 @@ export class AddOrEditFeatureDialog extends React.Component {
       sequenceData = { sequence: "" },
       handleSubmit,
       locations,
-      upsertFeature
+      upsertFeature,
+      start,
+      end,
+      forward,
+      type
     } = this.props;
     const sequenceLength = sequenceData.sequence.length;
     return (
@@ -158,12 +162,12 @@ export class AddOrEditFeatureDialog extends React.Component {
           // format={value => (value ? "true" : "false")}
           name="forward"
           label="Strand:"
-          defaultValue={true}
+          defaultValue={forward ?? true}
         />
         <ReactSelectField
           inlineLabel
           tooltipError
-          defaultValue="misc_feature"
+          defaultValue={type ?? "misc_feature"}
           options={getFeatureTypes().map(type => {
             return {
               label: (
@@ -198,7 +202,7 @@ export class AddOrEditFeatureDialog extends React.Component {
             <NumericInputField
               inlineLabel
               tooltipError
-              defaultValue={1}
+              defaultValue={start ?? 1}
               min={1}
               max={sequenceLength || 1}
               name="start"
@@ -207,7 +211,7 @@ export class AddOrEditFeatureDialog extends React.Component {
             <NumericInputField
               inlineLabel
               tooltipError
-              defaultValue={1}
+              defaultValue={end ?? 1}
               min={1}
               max={sequenceLength || 1}
               name="end"
@@ -372,5 +376,5 @@ export default compose(
       return errors;
     }
   }),
-  tgFormValues("start", "end", "locations")
+  tgFormValues("start", "end", "locations", "forward", "type")
 )(AddOrEditFeatureDialog);

packages/ove/demo/src/utils/renderToggle.js

@@ -68,34 +68,25 @@ export default function renderToggle({
     }
   }
   if (isButton) {
-    toggleOrButton = (
-      <Button
-        {...{
-          ...sharedProps,
-          onClick: onClick || hook
-        }}
-      />
-    );
+    toggleOrButton = <Button {...sharedProps} onClick={onClick || hook} />;
   } else if (isSelect) {
     const { style, label, ...rest } = sharedProps;
     toggleOrButton = (
       <div key={type + "iwuhwp"} style={sharedProps.style}>
         {label && <span>{label} &nbsp;</span>}
         <EnhancedSelect
-          {...{
-            options,
-            ...rest,
-            didMount: () => {
-              hook && hook((that.state || {})[type], true);
-            },
-            value: (that.state || {})[type],
-            disabled: disabled,
-            onChange: newType => {
-              hook && hook(newType.target.value);
-              that.setState({
-                [type]: newType.target.value
-              });
-            }
+          options={options}
+          {...rest}
+          didMount={() => {
+            hook && hook((that.state || {})[type], true);
+          }}
+          value={(that.state || {})[type]}
+          disabled={disabled}
+          onChange={newType => {
+            hook && hook(newType.target.value);
+            that.setState({
+              [type]: newType.target.value
+            });
           }}
         />
       </div>
@@ -109,15 +100,13 @@ export default function renderToggle({
     };
     toggleOrButton = (
       <EnhancedSwitch
-        {...{
-          ...sharedProps,
-          didMount: () => {
-            hook && hook(!!(that.state || {})[type]);
-          },
-          checked: (that.state || {})[type],
-          disabled: disabled,
-          onChange: switchOnChange
+        {...sharedProps}
+        didMount={() => {
+          hook && hook(!!(that.state || {})[type]);
         }}
+        checked={(that.state || {})[type]}
+        disabled={disabled}
+        onChange={switchOnChange}
       />
     );
   }
@@ -127,23 +116,20 @@ export default function renderToggle({
       style={{ display: "flex", alignItems: "center", margin: "5px 5px" }}
       className="toggle-button-holder"
     >
-      <ShowInfo {...{ description, info, type }}></ShowInfo>
+      <ShowInfo description={description} info={info} type={type} />
       {toggleOrButton}
       {switchOnChange && hotkey && (
-        <React.Fragment>
-          <HandleHotkeys
-            onKeyDown={switchOnChange}
-            combo={hotkey}
-          ></HandleHotkeys>
+        <>
+          <HandleHotkeys onKeyDown={switchOnChange} combo={hotkey} />
           <div
             style={{
               marginLeft: 5,
               transform: "scale(0.8)"
             }}
           >
-            <KeyCombo minimal combo={hotkey}></KeyCombo>
+            <KeyCombo minimal combo={hotkey} />
           </div>
-        </React.Fragment>
+        </>
       )}
     </div>
   );
@@ -166,7 +152,7 @@ function HandleHotkeys({ combo, onKeyDown }) {
 function ShowInfo({ description, info, type }) {
   const [isOpen, setOpen] = useState(false);
   return (
-    <React.Fragment>
+    <>
       <Dialog
         onClose={() => {
           setOpen(false);
@@ -190,12 +176,12 @@ function ShowInfo({ description, info, type }) {
             }}
             minimal
             icon="info-sign"
-          ></Button>
+          />
         </div>
       ) : (
-        <div style={{ minWidth: 30, width: 30, height: 30 }}></div>
+        <div style={{ minWidth: 30, width: 30, height: 30 }} />
       )}
-    </React.Fragment>
+    </>
   );
 }
 

packages/ove/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.5.32",
+  "version": "0.7.1",
   "main": "./src/index.js",
   "type": "module",
   "exports": {