@carbonorm/carbonreact 4.0.2 → 4.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbonorm/carbonreact",
   "license": "MIT",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "browser": "dist/index.umd.js",
   "module": "dist/index.esm.js",
   "main": "dist/index.cjs.js",

package/src/CarbonReact.tsx

@@ -48,22 +48,30 @@ export function isJsonString(str: string) {
     return true;
 }
 
-abstract class CarbonReact<P = {}, S extends { [key: string]: any; } = typeof initialCarbonReactState> extends Component<{
+abstract class CarbonReact<P = {}, S extends iCarbonReactState = iCarbonReactState> extends Component<{
     children?: ReactNode | ReactNode[],
     instanceId?: string,
-    websocket?: Omit<iCarbonWebSocketProps, "instance"> | boolean
+    websocket?: Omit<iCarbonWebSocketProps<P,S>, "instance"> | false
 } & P, S> {
 
     private static persistentStateMap = new Map<string, { [key: string]: any; }>();
 
-    context: Context<S> = createContext(this.state);
-
-    // Private static member
-    // we actually implement this in the constructor todo - test this
-    protected static instance: CarbonReact;
+    // Context is for functional components to access the state of this class efficiently
+    context: Context<S & iCarbonReactState> = createContext(this.state);
 
     protected target: typeof CarbonReact;
 
+    protected static _instance: typeof this;
+
+    static get instance()  {
+        return this;
+    }
+
+    static set instance(instance: typeof this) {
+        this._instance = instance;
+    }
+
+
     protected updateRestfulObjectArrays = <ObjectType extends { [key: string]: any; } = {}>
     (rest: Omit<iUpdateRestfulObjectArrays<ObjectType, S, P>, "instance">) => updateRestfulObjectArrays<ObjectType, S, P>({
         instance: this,
@@ -86,7 +94,7 @@ abstract class CarbonReact<P = {}, S extends { [key: string]: any; } = typeof in
     protected constructor(props: {
         children?: ReactNode | ReactNode[];
         shouldStatePersist?: boolean | undefined;
-        websocket?: boolean | iCarbonWebSocketProps | undefined;
+        websocket?: boolean | iCarbonWebSocketProps<P,S> | undefined;
     } & P) {
 
         super(props);
@@ -98,7 +106,7 @@ abstract class CarbonReact<P = {}, S extends { [key: string]: any; } = typeof in
         // this is the magic that allows each class that's extends this to have a static instance - a singleton pattern
         // new.target is a meta-property introduced in ES6 that references the constructor that was directly invoked with the new keyword.
         Object.assign(new.target, {
-            instance: this
+            _instance: this
         })
 
         if (this.props.instanceId && CarbonReact.persistentStateMap.has(this.props.instanceId)) {
@@ -169,7 +177,7 @@ abstract class CarbonReact<P = {}, S extends { [key: string]: any; } = typeof in
 
             return <>
                 {nest}
-                <BackendThrowable instance={CarbonReact.instance}/>
+                <BackendThrowable instance={this}/>
             </>;
 
         }
@@ -179,8 +187,8 @@ abstract class CarbonReact<P = {}, S extends { [key: string]: any; } = typeof in
         return <>
             <GlobalHistory/>
             {this.props.websocket &&
-                <CarbonWebSocket {...(true === this.props.websocket ? {} : this.props.websocket)}
-                                 instance={CarbonReact.instance}/>}
+                <CarbonWebSocket<P,S> {...(false !== this.props.websocket ? this.props.websocket : {})}
+                                 instance={this}/>}
             <Context value={this.state}>
                 {this.props.children}
             </Context>

package/src/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import CarbonReact from "CarbonReact";
+import CarbonReact, {iCarbonReactState} from "CarbonReact";
 import {ReactNode} from "react";
 import Popup from "components/Popup/Popup";
 import getStyles from "hoc/getStyles";
@@ -18,10 +18,10 @@ export interface iAlertButtonOptions {
     color: "default" | "primary" | "secondary" | "inherit" | "danger" | "info" | "success" | "warning" | undefined,
 }
 
-export interface iAlert {
+export interface iAlert<P,S> {
     title: string,
     text: string,
-    instance: CarbonReact,
+    instance: CarbonReact<P,S>,
     component?: ReactNode,
     icon?: "warning" | "error" | "success" | "info" | "question" | null,
     buttons?: (iAlertButtonOptions)[] | undefined, //['No thanks!', 'Yes, Delete it'],
@@ -33,23 +33,21 @@ export interface iAlert {
     backendThrowable?: { [key: string]: any },
 }
 
-export function addAlert(props: iAlert) {
-
+export function addAlert<P, S extends Partial<iCarbonReactState>>(props: iAlert<P, S>) {
     props.instance.setState(previousState => ({
         alertsWaiting: previousState.alertsWaiting.length === 0
             ? [props]
             : [...previousState.alertsWaiting, props]
-    }))
-
+    }));
 }
 
-export default function Alert({
+export default function Alert<P,S extends Partial<iCarbonReactState>>({
                                   instance
-                              }: { instance:   CarbonReact }) {
+                              }: { instance:   CarbonReact<P,S> }) {
 
     const {alertsWaiting, backendThrowable} = instance.state
 
-    let alert: iAlert | undefined = undefined;
+    let alert: iAlert<P,S> | undefined = undefined;
 
     const alertWaiting = alertsWaiting.length + backendThrowable.length
 

package/src/components/Errors/BackendThrowable.tsx

@@ -1,10 +1,10 @@
 import styles from './style.module.scss';
 import OutsideClickHandler from 'react-outside-click-handler';
-import CarbonReact from "../../CarbonReact";
+import CarbonReact, {iCarbonReactState} from "../../CarbonReact";
 import {ReactElement} from "react";
 
-export default (props: {
-    instance: CarbonReact,
+export default <P,S extends Partial<iCarbonReactState>>(props: {
+    instance: CarbonReact<P,S>,
 }): ReactElement => {
 
     const {instance} = props;

package/src/components/WebSocket/CarbonWebSocket.tsx

@@ -1,14 +1,14 @@
-import  CarbonReact, {isJsonString} from "CarbonReact";
+import CarbonReact, {iCarbonReactState, isJsonString} from "CarbonReact";
 import {addAlert} from "../Alert/Alert";
 import {useEffectOnce} from "../../api/hoc/useEffectOnce";
 import {tC6Tables, tC6RestApi} from "@carbonorm/carbonnode";
 
 
-export interface iCarbonWebSocketProps {
+export interface iCarbonWebSocketProps<P,S> {
     url?: string,
     timeoutSeconds?: number,
     heartbeatSeconds?: number,
-    instance: CarbonReact,
+    instance: CarbonReact<P,S>,
     TABLES?: tC6Tables,
     WsLiveUpdates?: tC6RestApi,
 }
@@ -17,7 +17,7 @@ export interface iCarbonWebSocketProps {
  * @function connect
  * This function establishes a connection with the websocket and also ensures constant reconnection if connection closes
  **/
-export function initiateWebsocket(props: iCarbonWebSocketProps) {
+export function initiateWebsocket<P,S extends Partial<iCarbonReactState>>(props: iCarbonWebSocketProps<P,S>) {
 
     let {
         instance,
@@ -34,7 +34,7 @@ export function initiateWebsocket(props: iCarbonWebSocketProps) {
     if (!("WebSocket" in window)) {
 
         // todo - store that this has been shown in the state
-        addAlert({
+        addAlert<P,S>({
             title: 'Browser does not support websockets, live updates will fail. You may need to refresh the page to see the newest content.',
             text: 'Please use a modern browser.',
             icon: 'warning',
@@ -286,7 +286,7 @@ export function initiateWebsocket(props: iCarbonWebSocketProps) {
 
 }
 
-export default function (props: iCarbonWebSocketProps) {
+export default function <P,S extends Partial<iCarbonReactState>>(props: iCarbonWebSocketProps<P,S>) {
 
     useEffectOnce(() => {
 

package/src/hoc/deleteRestfulObjectArrays.tsx

@@ -5,7 +5,7 @@ export interface iDeleteRestfulObjectArrays<
     ObjectType extends {
         [key: string]: any
     } = {},
-    S extends { [key: string]: any; } = CarbonReact['state'],
+    S = CarbonReact['state'],
     P = CarbonReact['props']
 > {
     instance: CarbonReact<P, S>,
@@ -19,7 +19,7 @@ export default function deleteRestfulObjectArrays<
     ObjectType extends {
         [key: string]: any
     } = {},
-    S extends { [key: string]: any; } = CarbonReact['state'],
+    S = CarbonReact['state'],
     P = CarbonReact['props']
 >({
       instance,

package/src/hoc/updateRestfulObjectArrays.tsx

@@ -12,7 +12,7 @@ export interface iUpdateRestfulObjectArrays<
     ObjectType extends {
         [key: string]: any;
     } = {},
-    S extends { [key: string]: any; } = CarbonReact['state'],
+    S extends CarbonReact['state'] = CarbonReact['state'],
     P =  CarbonReact['props']
 > {
     instance: CarbonReact<P, S>;
@@ -36,7 +36,7 @@ export default function updateRestfulObjectArrays<
     ObjectType extends {
         [key: string]: any;
     } = {},
-    S extends { [key: string]: any; } = CarbonReact['state'],
+    S extends iCarbonReactState = CarbonReact['state'],
     P  = CarbonReact['props']
 >({
       instance,
@@ -52,7 +52,7 @@ export default function updateRestfulObjectArrays<
     type ValidObject = SubsetMatching<S & iCarbonReactState, tStatefulApiData<ObjectType>>;
 
     instance.setState((
-            previousBootstrapState: Readonly<S & iCarbonReactState>,
+            previousBootstrapState: Readonly<S>,
             props: Readonly<P>
         ): Pick<S & iCarbonReactState, keyof S> | null => {
 

package/src/variables/C6.tsx

@@ -1,3 +1,4 @@
+import { tStatefulApiData } from "CarbonReact";
 
 export interface stringMap {
     [key: string]: string;