@nu-art/thunderstorm-frontend 0.400.5

package/components/TS_EditableItemController/TS_EditableItemController.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './TS_EditableItemController.scss';
+import { BadImplementationException, exists, resolveContent } from '@nu-art/ts-common';
+import { EditableDBItemV3 } from '../../utils/EditableItem.js';
+import { ComponentSync } from '../../core/ComponentSync.js';
+/**
+ * Item_EditorController class handles the editing of a specific db item
+ * and encapsulate logic to load the item from the local cache and uses the EditableItem to
+ * and TS_EditableContent for rendering and editing the db item.
+ *
+ * @template Proto - The database prototype def to be edited
+ * @template Props - The Props this class component takes
+ */
+export class TS_EditableItemController extends ComponentSync {
+    static DefaultAutoSave = (item) => {
+        return !!item?._id;
+    };
+    constructor(p) {
+        super(p);
+        const method = p.module.defaultDispatcher.method;
+        // @ts-ignore
+        this[method] = this.__onItemUpdated;
+    }
+    __onItemUpdated = (...params) => {
+        const itemId = this.state.editable.get('_id');
+        if (!itemId)
+            return;
+        let updatedItem;
+        if (!(params[0] === 'upsert-all' && (updatedItem = params[1].find(item => item._id === itemId))))
+            return;
+        this.state.editable?.setConflictingItem(updatedItem);
+    };
+    deriveStateFromProps(nextProps, state) {
+        const _state = (state || {});
+        let item = typeof nextProps.item === 'string' ? nextProps.module.cache.unique(nextProps.item) : nextProps.item;
+        if (!exists(item))
+            item = this.props.createInitialInstance?.();
+        if (!item)
+            throw new BadImplementationException('in order to use this component to create an item you need to provide a createInitialInstance callback');
+        _state.editable = new EditableDBItemV3(item, nextProps.module, nextProps.onError)
+            .setOnChanged(async (editable) => {
+            this.setState({ editable });
+        })
+            .setAutoSave(resolveContent(nextProps.autoSave || TS_EditableItemController.DefaultAutoSave, item) || false)
+            .setOnSaveCompleted(this.props.onSave);
+        if (nextProps.saveAction)
+            _state.editable.setSaveAction(nextProps.saveAction);
+        return _state;
+    }
+    render() {
+        const Editor = this.props.editor;
+        return _jsx(Editor, { editable: this.state.editable, ...(this.props.editorProps || {}) });
+    }
+}

package/components/TS_EditableItemController/TS_EditableItemController.scss

@@ -0,0 +1,3 @@
+.t-s--editable-item-controller {
+
+}

package/components/TS_EditableItemController/index.d.ts

@@ -0,0 +1 @@
+export * from './TS_EditableItemController.js';

package/components/TS_EditableItemController/index.js

@@ -0,0 +1 @@
+export * from './TS_EditableItemController.js';

package/components/TS_EditableItemControllerProto/TS_EditableItemControllerProto.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import './TS_EditableItemControllerProto.scss';
+import { DB_Object, DBProto, ResolvableContent } from '@nu-art/ts-common';
+import { ModuleFE_BaseApi } from '../../modules/db-api-gen/ModuleFE_BaseApi.js';
+import { ProtoDef_Selection } from '../Page_ItemsEditor/index.js';
+import { ProtoComponent } from '../../core/proto-component/index.js';
+import { InferProps, InferState } from '../../utils/types.js';
+import { EditableRef } from '../TS_EditableContent/types.js';
+export type Props_EditableItemControllerProto<Proto extends DBProto<any>, EditorProps extends {} = {}> = ProtoDef_Selection['props'] & {
+    item?: Readonly<Partial<Proto['uiType']>> | string;
+    module: ModuleFE_BaseApi<Proto>;
+    onError?: (item: Partial<Proto['uiType']>, err: Error) => any | Promise<any>;
+    autoSave?: ResolvableContent<boolean, [Readonly<Proto['uiType']>]>;
+    editor: React.ComponentType<EditableRef<Proto['uiType']> & EditorProps>;
+    createInitialInstance?: () => Readonly<Partial<Proto['uiType']>>;
+    editorProps?: EditorProps;
+};
+/**
+ * Item_EditorController class handles the editing of a specific db item
+ * and encapsulate logic to load the item from the local cache and uses the EditableItem to
+ * and TS_EditableContent for rendering and editing the db item.
+ *
+ * @template Proto - The database prototype def to be edited
+ * @template Props - The Props this class component takes
+ */
+export declare class TS_EditableItemControllerProto<Proto extends DBProto<any>, EditorProps extends {} = {}, Props extends Props_EditableItemControllerProto<Proto, EditorProps> = Props_EditableItemControllerProto<Proto, EditorProps>> extends ProtoComponent<ProtoDef_Selection, Props, EditableRef<Proto['uiType']>> {
+    static DefaultAutoSave: (item?: Partial<DB_Object>) => boolean;
+    constructor(p: InferProps<TS_EditableItemControllerProto<Proto, EditorProps, Props>>);
+    private __onItemUpdated;
+    protected deriveStateFromProps(nextProps: InferProps<this>, state: InferState<this>): InferState<this>;
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/components/TS_EditableItemControllerProto/TS_EditableItemControllerProto.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './TS_EditableItemControllerProto.scss';
+import { asArray, BadImplementationException, deepClone, exists, resolveContent } from '@nu-art/ts-common';
+import { EditableDBItemV3 } from '../../utils/EditableItem.js';
+import { ProtoComponent } from '../../core/proto-component/index.js';
+/**
+ * Item_EditorController class handles the editing of a specific db item
+ * and encapsulate logic to load the item from the local cache and uses the EditableItem to
+ * and TS_EditableContent for rendering and editing the db item.
+ *
+ * @template Proto - The database prototype def to be edited
+ * @template Props - The Props this class component takes
+ */
+export class TS_EditableItemControllerProto extends ProtoComponent {
+    static DefaultAutoSave = (item) => {
+        return !!item?._id;
+    };
+    constructor(p) {
+        super(p);
+        const method = p.module.defaultDispatcher.method;
+        // @ts-ignore
+        this[method] = this.__onItemUpdated;
+    }
+    __onItemUpdated = (...params) => {
+        const itemId = this.state.editable.get('_id');
+        if (!itemId)
+            return;
+        if (!(params[0] === 'update' && params[1]._id === itemId))
+            return;
+        this.state.editable?.setConflictingItem(deepClone(asArray(params[1]))[0]);
+    };
+    deriveStateFromProps(nextProps, state) {
+        const _state = (state || {});
+        const selectedId = this.getQueryParam('selected')?.[this.props.module.dbDef.dbKey];
+        let item = typeof nextProps.item === 'string' ? nextProps.module.cache.unique(nextProps.item) : nextProps.item;
+        if (!exists(item))
+            item = nextProps.module.cache.unique(selectedId);
+        if (!exists(item))
+            item = this.props.createInitialInstance?.();
+        if (!item)
+            throw new BadImplementationException('in order to use this component to create an item you need to provide a createInitialInstance callback');
+        _state.editable = new EditableDBItemV3(item, nextProps.module, nextProps.onError)
+            .setOnChanged(async () => {
+            this.forceUpdate();
+        })
+            .setAutoSave(resolveContent(nextProps.autoSave || TS_EditableItemControllerProto.DefaultAutoSave, item) || false);
+        return _state;
+    }
+    render() {
+        const Editor = this.props.editor;
+        return _jsx(Editor, { editable: this.state.editable, ...(this.props.editorProps || {}) });
+    }
+}

package/components/TS_EditableItemControllerProto/TS_EditableItemControllerProto.scss

@@ -0,0 +1,3 @@
+.t-s--editable-item-controller {
+
+}

package/components/TS_EditableItemControllerProto/index.d.ts

@@ -0,0 +1 @@
+export * from './TS_EditableItemControllerProto.js';

package/components/TS_EditableItemControllerProto/index.js

@@ -0,0 +1 @@
+export * from './TS_EditableItemControllerProto.js';

package/components/TS_EditableItemStatus/TS_EditableItemStatus.d.ts

@@ -0,0 +1,20 @@
+import { TS_EditableContent } from '../TS_EditableContent/TS_EditableContent.js';
+import { EditableItem_Status, EditableItemStatusListener } from '../../utils/EditableItem.js';
+import { InferProps, InferState } from '../../utils/types.js';
+type Props = {
+    labels: {
+        [K in EditableItem_Status]: string;
+    };
+};
+type State = {
+    statusLabel: string;
+};
+export declare class TS_EditableItemStatus extends TS_EditableContent<any, Props, State> implements EditableItemStatusListener {
+    static defaultProps: Props;
+    protected deriveStateFromProps(nextProps: InferProps<this>, _state: InferState<this>): InferState<this>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onEditableItemStatusChanged(newStatus: EditableItem_Status): any;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/components/TS_EditableItemStatus/TS_EditableItemStatus.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TS_EditableContent } from '../TS_EditableContent/TS_EditableContent.js';
+import { EditableItemStatus_Creating, EditableItemStatus_ErrorSaving, EditableItemStatus_FailedValidation, EditableItemStatus_Saved, EditableItemStatus_SavedWithErrors, EditableItemStatus_Saving, EditableItemStatus_Unknown, EditableItemStatus_UnsavedChanges } from '../../utils/EditableItem.js';
+export class TS_EditableItemStatus extends TS_EditableContent {
+    static defaultProps = {
+        labels: {
+            [EditableItemStatus_Saving]: 'Saving...',
+            [EditableItemStatus_SavedWithErrors]: 'Saved With Errors',
+            [EditableItemStatus_FailedValidation]: 'Validation Error',
+            [EditableItemStatus_ErrorSaving]: 'Saving Failed',
+            [EditableItemStatus_UnsavedChanges]: 'Unsaved Changes',
+            [EditableItemStatus_Creating]: 'Creating New',
+            [EditableItemStatus_Saved]: 'Saved',
+            [EditableItemStatus_Unknown]: 'Not Implemented',
+        }
+    };
+    deriveStateFromProps(nextProps, _state) {
+        const state = super.deriveStateFromProps(nextProps, _state);
+        state.statusLabel = this.props.labels[_state.editable.getStatus()] ?? 'Missing Status';
+        return state;
+    }
+    componentDidMount() {
+        setTimeout(() => this.props.editable.addStatusListener(this), 0);
+    }
+    componentWillUnmount() {
+        this.props.editable.removeStatusListener(this);
+    }
+    onEditableItemStatusChanged(newStatus) {
+        this.reDeriveState({});
+    }
+    render() {
+        return _jsx("div", { className: 'ts-editable-item-status', children: this.state.statusLabel });
+    }
+}

package/components/TS_EditableText/TS_EditableText.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_EditableText.scss';
+type Props = {
+    text: string;
+    shownText?: string;
+    className?: string;
+    editMode?: boolean;
+    disableEdit?: boolean;
+    onTextSaved?: ((text: string) => void | Promise<void>);
+    onCancel?: () => void;
+    highlightText?: string;
+    hideReset?: boolean;
+    readMore?: boolean;
+    readMoreCollapseHeight?: number;
+    renderers?: {
+        cancelButton?: React.ReactNode;
+        saveButton?: React.ReactNode;
+        resetButton?: React.ReactNode;
+    };
+};
+type State = {
+    original: string;
+    text: string;
+    isEditing: boolean;
+    parentRef: React.RefObject<HTMLDivElement>;
+};
+declare class TS_EditableText_Base extends ComponentSync<Props, State> {
+    protected deriveStateFromProps(nextProps: Props): State;
+    protected onEnableEdit: () => void;
+    protected onTextChange: (text: string) => void;
+    protected onSubmitChanges: (e: React.MouseEvent | React.KeyboardEvent) => Promise<void>;
+    protected onCancelChanges: (e?: React.MouseEvent) => void;
+    protected onResetChanges: (e: React.MouseEvent) => void;
+    protected onGeneralClick: (e: React.MouseEvent) => void;
+    protected handleBlur: (e: React.FocusEvent) => void;
+    protected renderText: () => import("react/jsx-runtime").JSX.Element;
+    protected renderButton: {
+        reset: () => import("react/jsx-runtime").JSX.Element;
+        cancel: () => import("react/jsx-runtime").JSX.Element;
+        accept: () => import("react/jsx-runtime").JSX.Element;
+    };
+}
+declare class TS_EditableText_TextArea extends TS_EditableText_Base {
+    private renderButtons;
+    private renderTextArea;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+declare class TS_EditableText_Input extends TS_EditableText_Base {
+    private renderInput;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export declare const TS_EditableText: {
+    TextArea: typeof TS_EditableText_TextArea;
+    Input: typeof TS_EditableText_Input;
+};
+export {};

package/components/TS_EditableText/TS_EditableText.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ComponentSync } from '../../core/ComponentSync.js';
+import './TS_EditableText.scss';
+import { TS_Input, TS_TextArea } from '../TS_Input/index.js';
+import { _className, stopPropagation, stringReplacer } from '../../utils/tools.js';
+import { TS_ReadMore } from '../TS_ReadMore/index.js';
+import { Button } from '../Button/Button.js';
+class TS_EditableText_Base extends ComponentSync {
+    // ######################## Life Cycle ########################
+    deriveStateFromProps(nextProps) {
+        const state = { ...this.state };
+        state.original = nextProps.text;
+        state.text ||= nextProps.text;
+        state.isEditing = nextProps.editMode ?? false;
+        state.parentRef ||= React.createRef();
+        return state;
+    }
+    // ######################## Logic ########################
+    onEnableEdit = () => {
+        if (this.props.disableEdit || this.props.editMode !== undefined)
+            return;
+        this.setState({ text: this.state.original, isEditing: true });
+    };
+    onTextChange = (text) => {
+        this.setState({ text });
+    };
+    onSubmitChanges = async (e) => {
+        stopPropagation(e);
+        const text = this.state.text;
+        if (!this.props.onTextSaved)
+            this.setState({ original: text, isEditing: false });
+        await this.props.onTextSaved?.(text);
+        this.setState({ original: text });
+    };
+    onCancelChanges = (e) => {
+        if (e)
+            stopPropagation(e);
+        const original = this.state.original;
+        if (!this.props.onCancel)
+            this.setState({ text: original, isEditing: false });
+        this.setState({ text: original });
+        this.props.onCancel?.();
+    };
+    onResetChanges = (e) => {
+        stopPropagation(e);
+        const original = this.state.original;
+        this.setState({ text: original });
+    };
+    onGeneralClick = (e) => {
+        if (this.state.isEditing)
+            stopPropagation(e);
+    };
+    handleBlur = (e) => {
+        e.persist();
+        //e.relatedTarget can be null if lost focus due to Enter
+        if (e.relatedTarget === null || this.state.parentRef.current === e.relatedTarget || this.state.parentRef.current.contains(e.relatedTarget))
+            return;
+        this.onCancelChanges();
+    };
+    // ######################## Render ########################
+    renderText = () => {
+        const textToShow = this.props.shownText ?? this.state.original;
+        return _jsxs("div", { className: 'ts-editable-text__text', onClick: this.onEnableEdit, children: [this.props.readMore && _jsx(TS_ReadMore, { collapsedHeight: this.props.readMoreCollapseHeight, text: textToShow }), !this.props.readMore && (this.props.highlightText
+                    ? stringReplacer(textToShow, this.props.highlightText, (match, i) => _jsx("i", { className: 'ts-editable-text__highlight', children: match }, i))
+                    : textToShow)] });
+    };
+    renderButton = {
+        reset: () => _jsx(Button, { className: 'ts-editable-text__buttons__reset', onClick: this.onResetChanges, children: this.props.renderers?.resetButton || 'Reset' }),
+        cancel: () => _jsx(Button, { className: 'ts-editable-text__buttons__cancel', onClick: this.onCancelChanges, children: this.props.renderers?.cancelButton || 'Cancel' }),
+        accept: () => _jsx(Button, { className: 'ts-editable-text__buttons__save', onClick: this.onSubmitChanges, children: this.props.renderers?.saveButton || 'Save' })
+    };
+}
+class TS_EditableText_TextArea extends TS_EditableText_Base {
+    renderButtons = () => {
+        return _jsxs("div", { className: 'ts-editable-text-area__buttons', children: [!this.props.hideReset && this.renderButton.reset(), this.renderButton.cancel(), this.renderButton.accept()] });
+    };
+    renderTextArea = () => {
+        return _jsxs("div", { className: 'ts-editable-text-area__edit', children: [_jsx(TS_TextArea, { className: 'ts-editable-text-area__text-area', type: 'text', focus: true, value: this.state.isEditing ? this.state.text : this.props.shownText, onChange: this.onTextChange, onAccept: (val, e) => this.onSubmitChanges(e) }), this.renderButtons()] });
+    };
+    render() {
+        const Renderer = this.state.isEditing ? this.renderTextArea : this.renderText;
+        const className = _className('ts-editable-text-area', this.props.className);
+        return _jsx("div", { className: className, onBlur: this.handleBlur, tabIndex: 1, onClick: this.onGeneralClick, ref: this.state.parentRef, children: _jsx(Renderer, {}) });
+    }
+}
+class TS_EditableText_Input extends TS_EditableText_Base {
+    renderInput = () => {
+        return _jsxs("div", { className: 'ts-editable-text-input__edit', children: [this.renderButton.reset(), _jsx(TS_Input, { className: 'ts-editable-text-input__input', type: 'text', focus: true, value: this.state.text, onChange: this.onTextChange, onAccept: (val, e) => this.onSubmitChanges(e) }), _jsxs("div", { className: 'ts-editable-text-input__buttons', children: [this.renderButton.cancel(), this.renderButton.accept()] })] });
+    };
+    render() {
+        const Renderer = this.state.isEditing ? this.renderInput : this.renderText;
+        const className = _className('ts-editable-text-input', this.props.className);
+        return _jsx("div", { className: className, tabIndex: 1, onBlur: this.handleBlur, onClick: this.onGeneralClick, ref: this.state.parentRef, children: _jsx(Renderer, {}) });
+    }
+}
+export const TS_EditableText = {
+    TextArea: TS_EditableText_TextArea,
+    Input: TS_EditableText_Input,
+};

package/components/TS_EditableText/TS_EditableText.scss

@@ -0,0 +1,90 @@
+.ts-editable-text-area,
+.ts-editable-text-input {
+  .ts-button {
+    min-width: unset;
+    min-height: unset;
+    padding: 4px 8px;
+    margin: 0;
+    font: {
+      size: 14px;
+      weight: bold;
+    }
+  }
+
+  .ts-editable-text__buttons__reset {
+    background: #3ca0c6;
+    margin-right: auto;
+  }
+
+  .ts-editable-text__buttons__cancel {
+    background-color: #D0312D;
+  }
+
+  .ts-editable-text__buttons__save {
+    background-color: #3CB043;
+  }
+}
+
+.ts-editable-text-area {
+  //What's rendered when not editing
+  .ts-editable-text-area__text {
+    height: 100%;
+    white-space: pre-wrap;
+  }
+
+  //What's rendered when editing
+  .ts-editable-text-area__edit {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    //The text-area itself
+    .ts-editable-text-area__text-area {
+      flex-grow: 1;
+    }
+
+    //The actions buttons
+    .ts-editable-text-area__buttons {
+      flex-shrink: 0;
+      display: flex;
+      gap: 8px;
+
+      .ts-editable-text__buttons__reset {
+        background: #3ca0c6;
+        margin-right: auto;
+      }
+    }
+  }
+}
+
+.ts-editable-text-input {
+  .ts-editable-text-input__edit {
+    height: 32px;
+    display: flex;
+    border: 1px solid black;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .ts-editable-text-input__input {
+      border: none;
+      height: 100%;
+      min-height: unset;
+      flex-grow: 1;
+    }
+
+    .ts-editable-text-input__buttons {
+      height: 100%;
+      display: flex;
+      flex-shrink: 0;
+      width: 60px;
+    }
+
+    .ts-button {
+      height: 100%;
+      flex-shrink: 0;
+      border-radius: 0;
+      width: 30px;
+    }
+  }
+}

package/components/TS_EditableText/index.d.ts

@@ -0,0 +1 @@
+export * from './TS_EditableText.js';

package/components/TS_EditableText/index.js

@@ -0,0 +1 @@
+export * from './TS_EditableText.js';

package/components/TS_ErrorBoundary/TS_ErrorBoundary.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import './TS_ErrorBoundary.scss';
+import { Logger } from '@nu-art/ts-common';
+import { BaseComponent } from '../../core/ComponentBase.js';
+type State = {
+    error?: Error;
+    controlled?: boolean;
+    errorInfo?: React.ErrorInfo;
+};
+type Props = React.PropsWithChildren<{
+    logger?: Logger;
+    component?: BaseComponent;
+    onClick?: (e: any) => void;
+    renderer?: (e: any) => ReactNode;
+    error?: Error;
+}>;
+export declare class TS_ErrorBoundary extends React.Component<Props, State> {
+    constructor(props: Props);
+    /**
+     * Called on changes in props.
+     * @param props
+     * @param state
+     */
+    static getDerivedStateFromProps(props: Props, state: State): State;
+    /**
+     * Called when a descendant component throws an error (and there isn't an error boundary in the way already)
+     * used to return a state based on the error
+     * @param error
+     */
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    /**
+     * Called when a descendant component throws an error (and there isn't an error boundary in the way already)
+     * Can be used to return a state based on the error, but will be deprecated at some point, so watch out.
+     * @param error
+     * @param errorInfo
+     */
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    /**
+     * Returns true.
+     * This component's props will not change unless an error has occurred, but the children component might need to
+     * because their props might have changed. therefore, inorder not to block their lifecycle, this component must always update.
+     * @param nextProps
+     * @param nextState
+     * @param nextContext
+     */
+    shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any): boolean;
+    private defaultRenderer;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    protected onErrorBoundaryClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+export {};

package/components/TS_ErrorBoundary/TS_ErrorBoundary.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as React from 'react';
+import './TS_ErrorBoundary.scss';
+export class TS_ErrorBoundary extends React.Component {
+    //######################### Life Cycle #########################
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+    /**
+     * Called on changes in props.
+     * @param props
+     * @param state
+     */
+    static getDerivedStateFromProps(props, state) {
+        //Check if the boundary is controlled (gets the error from outside)
+        if (!state.controlled)
+            state.controlled = !!props.error;
+        state.error = state.controlled ? props.error : state.error;
+        return state;
+    }
+    /**
+     * Called when a descendant component throws an error (and there isn't an error boundary in the way already)
+     * used to return a state based on the error
+     * @param error
+     */
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    /**
+     * Called when a descendant component throws an error (and there isn't an error boundary in the way already)
+     * Can be used to return a state based on the error, but will be deprecated at some point, so watch out.
+     * @param error
+     * @param errorInfo
+     */
+    componentDidCatch(error, errorInfo) {
+        this.setState({ error, errorInfo });
+    }
+    /**
+     * Returns true.
+     * This component's props will not change unless an error has occurred, but the children component might need to
+     * because their props might have changed. therefore, inorder not to block their lifecycle, this component must always update.
+     * @param nextProps
+     * @param nextState
+     * @param nextContext
+     */
+    shouldComponentUpdate(nextProps, nextState, nextContext) {
+        return true;
+    }
+    //######################### Render #########################
+    defaultRenderer = () => {
+        const titleMessage = randomMessages[Math.floor(Math.random() * randomMessages.length)];
+        return _jsxs("div", { className: 'ts-error-boundary', onClick: this.props.onClick ?? this.onErrorBoundaryClick, children: [_jsx("div", { className: 'ts-error-boundary__pic', children: "(\u30CE\u0CA0\u76CA\u0CA0\u30CE)" }), _jsx("div", { className: 'ts-error-boundary__title', children: titleMessage })] });
+    };
+    render() {
+        if (!this.state.error)
+            return this.props.children;
+        if (this.props.renderer)
+            return this.props.renderer(this.state.error);
+        return this.defaultRenderer();
+    }
+    onErrorBoundaryClick = (e) => {
+        const component = this.props.component;
+        if (!component)
+            return;
+        // @ts-ignore
+        const logInfo = component.logInfo;
+        // @ts-ignore
+        const reDeriveState = component.reDeriveState;
+        if (e.metaKey)
+            return logInfo('Component props and state', component.props, component.state);
+        if (e.shiftKey) {
+            logInfo('Re-deriving state');
+            return reDeriveState();
+        }
+        component.forceUpdate();
+    };
+}
+const randomMessages = [
+    'Jeepers Creepers! An error!',
+    'Something went wrong.. we\'re on it!',
+    'This component is having a bad day',
+];