@eccenca/gui-elements 23.3.1 → 23.4.0-rc.0

package/src/components/TextField/useTextValidation.ts

@@ -1,18 +1,20 @@
-import React, {ChangeEventHandler} from "react";
-import chars from "../../common/utils/characters"
+import React, { ChangeEventHandler } from "react";
+
+import chars from "../../common/utils/characters";
 
 export interface InvisibleCharacterWarningProps {
     /**
      * If set, the function is called after every value change what invisible characters have been detected.
+     * The input component must be controlled for this callback to be triggered.
      */
-    callback: (detectedCodePoints: Set<number>) => any
+    callback: (detectedCodePoints: Set<number>) => any;
     /**
      * The delay in milliseconds after which an input string should be checked. Only the most recent value will be checked.
      * A higher value will reduce the probability that the typing stalls.
      *
      * Default: 500
      */
-    callbackDelay?: number
+    callbackDelay?: number;
 }
 
 interface Props<T = Element> {
@@ -20,84 +22,96 @@ interface Props<T = Element> {
     value?: string | ReadonlyArray<string> | number | undefined;
     readOnly?: boolean | undefined;
     disabled?: boolean | undefined;
-    onChange?: ChangeEventHandler<T>
+    onChange?: ChangeEventHandler<T>;
     /**
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
-    invisibleCharacterWarning?: InvisibleCharacterWarningProps
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps;
 }
 
 /** Validates the string value for invisible characters. */
-export const useTextValidation = <T>({value, onChange, invisibleCharacterWarning}: Props<T>) => {
-    const callback = invisibleCharacterWarning?.callback
-    const callbackDelay = invisibleCharacterWarning?.callbackDelay
+export const useTextValidation = <T>({ value, onChange, invisibleCharacterWarning }: Props<T>) => {
+    const callback = invisibleCharacterWarning?.callback;
+    const callbackDelay = invisibleCharacterWarning?.callbackDelay;
     const state = React.useRef<{
-        checkedValue?: string | ReadonlyArray<string> | number,
-        timeout?: number,
-        detectedCodePoints: Set<number>
-    }>({detectedCodePoints: new Set()})
+        checkedValue?: string | ReadonlyArray<string> | number;
+        timeout?: number;
+        detectedCodePoints: Set<number>;
+    }>({ detectedCodePoints: new Set() });
     const clearState = React.useCallback(() => {
-        state.current.timeout && clearTimeout(state.current.timeout)
-        state.current.checkedValue = undefined
-        state.current.detectedCodePoints = new Set()
-    }, [])
-    const detectionRegex = React.useMemo(() => chars.invisibleZeroWidthCharacters.createRegex(), [])
-    const detectIssues = React.useCallback((value: string): void => {
-        detectionRegex.lastIndex = 0
-        let matchArray = detectionRegex.exec(value)
-        while(matchArray) {
-            const codePoint = matchArray[0].codePointAt(0)
-            if(codePoint) {
-                state.current.detectedCodePoints.add(codePoint)
+        state.current.timeout && clearTimeout(state.current.timeout);
+        state.current.checkedValue = undefined;
+        state.current.detectedCodePoints = new Set();
+    }, []);
+    const detectionRegex = React.useMemo(() => chars.invisibleZeroWidthCharacters.createRegex(), []);
+    const detectIssues = React.useCallback(
+        (value: string): void => {
+            detectionRegex.lastIndex = 0;
+            let matchArray = detectionRegex.exec(value);
+            while (matchArray) {
+                const codePoint = matchArray[0].codePointAt(0);
+                if (codePoint) {
+                    state.current.detectedCodePoints.add(codePoint);
+                }
+                matchArray = detectionRegex.exec(value);
             }
-            matchArray = detectionRegex.exec(value)
-        }
-    }, [detectionRegex])
+        },
+        [detectionRegex]
+    );
     // Checks if the value contains any problematic characters with a small delay.
-    const checkValue = React.useCallback((value: string | ReadonlyArray<string> | number) => {
-        state.current.detectedCodePoints = new Set()
-        if(typeof value === "number") {
-            clearState()
-        } else if(typeof value === "string") {
-            detectIssues(value)
-        } else {
-            value.forEach((arrayValue) => detectIssues(arrayValue))
-        }
-        callback?.(state.current.detectedCodePoints)
-    }, [callback, clearState, detectIssues])
-    const scheduleCheck = React.useCallback((value: string | ReadonlyArray<string> | number) => {
-        if(state.current.checkedValue === value) {
-            return
-        }
-        state.current.checkedValue = value
-        state.current.timeout = window.setTimeout(() => {
-            if(state.current.checkedValue === value) {
-                checkValue(value)
-                clearState()
+    const checkValue = React.useCallback(
+        (value: string | ReadonlyArray<string> | number) => {
+            state.current.detectedCodePoints = new Set();
+            if (typeof value === "number") {
+                clearState();
+            } else if (typeof value === "string") {
+                detectIssues(value);
+            } else {
+                value.forEach((arrayValue) => detectIssues(arrayValue));
+            }
+            callback?.(state.current.detectedCodePoints);
+        },
+        [callback, clearState, detectIssues]
+    );
+    const scheduleCheck = React.useCallback(
+        (value: string | ReadonlyArray<string> | number) => {
+            if (state.current.checkedValue === value) {
+                return;
             }
-        }, callbackDelay ?? 500)
-    }, [checkValue, clearState, callbackDelay])
+            state.current.checkedValue = value;
+            state.current.timeout = window.setTimeout(() => {
+                if (state.current.checkedValue === value) {
+                    checkValue(value);
+                    clearState();
+                }
+            }, callbackDelay ?? 500);
+        },
+        [checkValue, clearState, callbackDelay]
+    );
     // Do check via onChange handler
-    const wrappedOnChangeHandler: ChangeEventHandler<T> = React.useCallback((event) => {
-        const {value} = event.target as any
-        if(value != null && typeof value === "string") {
-            scheduleCheck(value)
-        } else {
-            clearState()
-        }
-        onChange?.(event)
-    }, [clearState, onChange, scheduleCheck])
+    const wrappedOnChangeHandler: ChangeEventHandler<T> = React.useCallback(
+        (event) => {
+            const { value } = event.target as any;
+            if (value != null && typeof value === "string") {
+                scheduleCheck(value);
+            } else {
+                clearState();
+            }
+            onChange?.(event);
+        },
+        [clearState, onChange, scheduleCheck]
+    );
     // No callback, return
-    if(!callback) {
-        return onChange
+    if (!callback) {
+        return onChange;
     }
-    if(value == null && onChange == null) {
-        return onChange
+    if (value == null && onChange == null) {
+        return onChange;
     }
-    if(value != null) {
-        scheduleCheck(value)
-        return onChange
+    if (value != null) {
+        scheduleCheck(value);
+        return onChange;
     } else {
-        return wrappedOnChangeHandler
+        return wrappedOnChangeHandler;
     }
-}
+};

package/src/components/index.scss

@@ -22,6 +22,7 @@
 @import "./RadioButton/radiobutton";
 @import "./Select/select";
 @import "./Separation/separation";
+@import "./Skeleton/skeleton";
 @import "./Spinner/spinner";
 @import "./Structure/titles";
 @import "./Table/table";

package/src/components/index.ts

@@ -34,6 +34,7 @@ export * from "./RadioButton/RadioButton";
 export * from "./Select/Select";
 export * from "./Separation/Divider";
 export * from "./Separation/Spacing";
+export * from "./Skeleton/Skeleton";
 export * from "./Spinner/Spinner";
 export * from "./Structure";
 export * from "./Switch/Switch";

package/src/extensions/codemirror/_codemirror.scss

@@ -9,6 +9,7 @@
     .CodeMirror {
         clip-path: unset !important; // we may check later why they set inset(0) now
         border-radius: $pt-border-radius;
+        height: 290px;
 
         // get them a "border" like input boxes from blueprintjs
         box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;

package/src/index.ts

@@ -1,8 +1,10 @@
 import { ClassNames as IntentClassNames } from "./common/Intent";
+import * as Skeleton from "./components/Skeleton/classnames";
 import * as TypographyClassNames from "./components/Typography/classnames";
 import * as LegacyReplacements from "./legacy-replacements";
 
 const ClassNames = {
+    Skeleton,
     Typography: TypographyClassNames,
     Intent: IntentClassNames,
 };

package/dist/cjs/components/AutoSuggestion/SingleLineCodeEditor.js

@@ -1,53 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SingleLineCodeEditor = void 0;
-require("codemirror/addon/display/placeholder.js");
-require("codemirror/mode/sparql/sparql.js");
-const react_1 = __importDefault(require("react"));
-const react_codemirror2_1 = require("react-codemirror2");
-const core_1 = require("@blueprintjs/core");
-const constants_1 = require("../../configuration/constants");
-/** A single-line code editor. */
-const SingleLineCodeEditor = ({ setEditorInstance, onChange, onCursorChange, mode, initialValue, onFocusChange, onKeyDown, onSelection, enableTab = false, placeholder, showScrollBar = true }) => {
-    const singleLineInitialContent = react_1.default.useRef(initialValue.replace(/[\r\n]/g, " "));
-    return (react_1.default.createElement("div", { className: `${constants_1.CLASSPREFIX}-singlelinecodeeditor ${core_1.Classes.INPUT}` },
-        react_1.default.createElement(react_codemirror2_1.UnControlled, { editorDidMount: (editor) => {
-                editor.on("beforeChange", (_, change) => {
-                    // Prevent the user from entering new-line characters, since this is supposed to be a one-line editor.
-                    if (change.update && typeof change.update === "function" && change.text.length > 1) {
-                        change.update(change.from, change.to, [change.text.join("")]);
-                    }
-                    return true;
-                });
-                setEditorInstance(editor);
-            }, value: singleLineInitialContent.current, onFocus: () => onFocusChange(true), onBlur: () => onFocusChange(false), options: {
-                mode: mode,
-                lineNumbers: false,
-                theme: "xq-light",
-                extraKeys: enableTab ? undefined : { Tab: false },
-                placeholder,
-                scrollbarStyle: showScrollBar ? "native" : "null"
-            }, onSelection: (_editor, data) => {
-                if (Array.isArray(data === null || data === void 0 ? void 0 : data.ranges)) {
-                    onSelection(data.ranges
-                        .map((r) => ({ from: r.from().ch, to: r.to().ch }))
-                        .filter((r) => r.from !== r.to));
-                }
-            }, onCursor: (editor, data) => {
-                onCursorChange(data, editor.cursorCoords(true, "local"), editor.getScrollInfo());
-            }, onBeforeChange: (_editor, data, _, next) => {
-                // Reduce multiple lines to a single line
-                if (data.text.length > 1) {
-                    _editor.setValue(data.text.join(""));
-                }
-                next();
-            }, onChange: (_editor, _data, value) => {
-                onChange(value);
-            }, onKeyDown: (_, event) => onKeyDown(event) })));
-};
-exports.SingleLineCodeEditor = SingleLineCodeEditor;
-exports.default = exports.SingleLineCodeEditor;
-//# sourceMappingURL=SingleLineCodeEditor.js.map

package/dist/cjs/components/AutoSuggestion/SingleLineCodeEditor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SingleLineCodeEditor.js","sourceRoot":"","sources":["../../../../src/components/AutoSuggestion/SingleLineCodeEditor.tsx"],"names":[],"mappings":";;;;;;AAAA,mDAAgD;AAChD,4CAA0C;AAC1C,kDAA0B;AAC1B,yDAAqE;AACrE,4CAAiE;AAEjE,6DAAoE;AAiCpE,iCAAiC;AAC1B,MAAM,oBAAoB,GAAG,CAAC,EACjC,iBAAiB,EACjB,QAAQ,EACR,cAAc,EACd,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,SAAS,EACT,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,aAAa,GAAG,IAAI,EACI,EAAE,EAAE;IAC5B,MAAM,wBAAwB,GAAG,eAAK,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAA;IACnF,OAAO,CACH,uCAAK,SAAS,EAAE,GAAG,uBAAM,yBAAyB,cAAmB,CAAC,KAAK,EAAE;QACzE,8BAAC,gCAAkB,IACvB,cAAc,EAAE,CAAC,MAAW,EAAE,EAAE;gBAC9B,MAAM,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC,CAAM,EAAE,MAAW,EAAE,EAAE;oBAChD,sGAAsG;oBACtG,IAAI,MAAM,CAAC,MAAM,IAAI,OAAO,MAAM,CAAC,MAAM,KAAK,UAAU,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;wBAClF,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;qBAC/D;oBACD,OAAO,IAAI,CAAC;gBACd,CAAC,CAAC,CAAC;gBACH,iBAAiB,CAAC,MAAM,CAAC,CAAC;YAC5B,CAAC,EACD,KAAK,EAAE,wBAAwB,CAAC,OAAO,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAClC,OAAO,EAAE;gBACL,IAAI,EAAE,IAAI;gBACV,WAAW,EAAE,KAAK;gBAClB,KAAK,EAAE,UAAU;gBACjB,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAC;gBAC/C,WAAW;gBACX,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;aACpD,EACD,WAAW,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE;gBAC7B,IAAG,KAAK,CAAC,OAAO,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,EAAE;oBAC9B,WAAW,CAAC,IAAI,CAAC,MAAM;yBAClB,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAC,CAAC,CAAC;yBACrD,MAAM,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;iBAC1C;YACH,CAAC,EACD,QAAQ,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;gBACzB,cAAc,CACV,IAAI,EACJ,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,EAClC,MAAM,CAAC,aAAa,EAAE,CACzB,CAAC;YACJ,CAAC,EACD,cAAc,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE;gBACvC,yCAAyC;gBACzC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;oBACtB,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;iBACvC;gBACD,IAAI,EAAE,CAAA;YACV,CAAC,EACD,QAAQ,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;gBAChC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC,EAED,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,GACzC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAnEW,QAAA,oBAAoB,wBAmE/B;AAEF,kBAAe,4BAAoB,CAAC"}

package/dist/esm/components/AutoSuggestion/SingleLineCodeEditor.js

@@ -1,47 +0,0 @@
-import "codemirror/addon/display/placeholder.js";
-import "codemirror/mode/sparql/sparql.js";
-import React from "react";
-import { UnControlled as UnControlledEditor } from "react-codemirror2";
-import { Classes as BlueprintClassNames } from "@blueprintjs/core";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
-/** A single-line code editor. */
-export var SingleLineCodeEditor = function (_a) {
-    var setEditorInstance = _a.setEditorInstance, onChange = _a.onChange, onCursorChange = _a.onCursorChange, mode = _a.mode, initialValue = _a.initialValue, onFocusChange = _a.onFocusChange, onKeyDown = _a.onKeyDown, onSelection = _a.onSelection, _b = _a.enableTab, enableTab = _b === void 0 ? false : _b, placeholder = _a.placeholder, _c = _a.showScrollBar, showScrollBar = _c === void 0 ? true : _c;
-    var singleLineInitialContent = React.useRef(initialValue.replace(/[\r\n]/g, " "));
-    return (React.createElement("div", { className: eccgui + "-singlelinecodeeditor " + BlueprintClassNames.INPUT },
-        React.createElement(UnControlledEditor, { editorDidMount: function (editor) {
-                editor.on("beforeChange", function (_, change) {
-                    // Prevent the user from entering new-line characters, since this is supposed to be a one-line editor.
-                    if (change.update && typeof change.update === "function" && change.text.length > 1) {
-                        change.update(change.from, change.to, [change.text.join("")]);
-                    }
-                    return true;
-                });
-                setEditorInstance(editor);
-            }, value: singleLineInitialContent.current, onFocus: function () { return onFocusChange(true); }, onBlur: function () { return onFocusChange(false); }, options: {
-                mode: mode,
-                lineNumbers: false,
-                theme: "xq-light",
-                extraKeys: enableTab ? undefined : { Tab: false },
-                placeholder: placeholder,
-                scrollbarStyle: showScrollBar ? "native" : "null"
-            }, onSelection: function (_editor, data) {
-                if (Array.isArray(data === null || data === void 0 ? void 0 : data.ranges)) {
-                    onSelection(data.ranges
-                        .map(function (r) { return ({ from: r.from().ch, to: r.to().ch }); })
-                        .filter(function (r) { return r.from !== r.to; }));
-                }
-            }, onCursor: function (editor, data) {
-                onCursorChange(data, editor.cursorCoords(true, "local"), editor.getScrollInfo());
-            }, onBeforeChange: function (_editor, data, _, next) {
-                // Reduce multiple lines to a single line
-                if (data.text.length > 1) {
-                    _editor.setValue(data.text.join(""));
-                }
-                next();
-            }, onChange: function (_editor, _data, value) {
-                onChange(value);
-            }, onKeyDown: function (_, event) { return onKeyDown(event); } })));
-};
-export default SingleLineCodeEditor;
-//# sourceMappingURL=SingleLineCodeEditor.js.map

package/dist/esm/components/AutoSuggestion/SingleLineCodeEditor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SingleLineCodeEditor.js","sourceRoot":"","sources":["../../../../src/components/AutoSuggestion/SingleLineCodeEditor.tsx"],"names":[],"mappings":"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"}

package/src/components/AutoSuggestion/SingleLineCodeEditor.tsx

@@ -1,110 +0,0 @@
-import "codemirror/addon/display/placeholder.js"
-import "codemirror/mode/sparql/sparql.js";
-import React from "react";
-import {UnControlled as UnControlledEditor} from "react-codemirror2";
-import {Classes as BlueprintClassNames} from "@blueprintjs/core";
-import {Editor as CodeMirrorEditor} from "codemirror";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
-
-export interface IRange {
-  from: number
-  to: number
-}
-
-export interface SingleLineCodeEditorProps {
-    // Is called with the editor instance that allows access via the CodeMirror API
-    setEditorInstance: (editor: CodeMirrorEditor) => any
-    // Called whenever the editor content changes
-    onChange: (value: string) => any
-    // Called when the cursor position changes
-    onCursorChange: (pos: any, coords: any, scrollinfo: any) => any
-    // The editor theme, e.g. "sparql"
-    mode?: string
-    // The initial value of the editor
-    initialValue: string
-    // Called when the focus status changes
-    onFocusChange: (focused: boolean) => any
-    // Called when the user presses a key
-    onKeyDown: (event: KeyboardEvent) => any
-    // Called when the user selects text
-    onSelection: (ranges: IRange[]) => any
-    // If the <Tab> key is enabled as normal input, i.e. it won't have the behavior of changing to the next input element, expected in a web app.
-    enableTab?: boolean
-    /** Placeholder tobe shown when no text has been entered, yet. */
-    placeholder?: string
-    showScrollBar?: boolean
-}
-
-export type IEditorProps = SingleLineCodeEditorProps;
-
-/** A single-line code editor. */
-export const SingleLineCodeEditor = ({
-    setEditorInstance,
-    onChange,
-    onCursorChange,
-    mode,
-    initialValue,
-    onFocusChange,
-    onKeyDown,
-    onSelection,
-    enableTab = false,
-    placeholder,
-    showScrollBar = true
-}: SingleLineCodeEditorProps) => {
-    const singleLineInitialContent = React.useRef(initialValue.replace(/[\r\n]/g, " "))
-    return (
-        <div className={`${eccgui}-singlelinecodeeditor ${BlueprintClassNames.INPUT}`}>
-            <UnControlledEditor
-        editorDidMount={(editor: any) => {
-          editor.on("beforeChange", (_: any, change: any) => {
-            // Prevent the user from entering new-line characters, since this is supposed to be a one-line editor.
-            if (change.update && typeof change.update === "function" && change.text.length > 1) {
-              change.update(change.from, change.to, [change.text.join("")]);
-            }
-            return true;
-          });
-          setEditorInstance(editor);
-        }}
-        value={singleLineInitialContent.current}
-        onFocus={() => onFocusChange(true)}
-        onBlur={() => onFocusChange(false)}
-        options={{
-            mode: mode,
-            lineNumbers: false,
-            theme: "xq-light",
-            extraKeys: enableTab ? undefined : {Tab: false},
-            placeholder,
-            scrollbarStyle: showScrollBar ? "native" : "null"
-        }}
-        onSelection={(_editor, data) => {
-          if(Array.isArray(data?.ranges)) {
-            onSelection(data.ranges
-                .map((r: any) => ({from: r.from().ch, to: r.to().ch}))
-                .filter((r: any) => r.from !== r.to))
-          }
-        }}
-        onCursor={(editor, data) => {
-          onCursorChange(
-              data,
-              editor.cursorCoords(true, "local"),
-              editor.getScrollInfo()
-          );
-        }}
-        onBeforeChange={(_editor, data, _, next) => {
-            // Reduce multiple lines to a single line
-            if (data.text.length > 1) {
-                _editor.setValue(data.text.join(""))
-            }
-            next()
-        }}
-        onChange={(_editor, _data, value) => {
-            onChange(value);
-        }
-        }
-        onKeyDown={(_, event) => onKeyDown(event)}
-      />
-    </div>
-  );
-};
-
-export default SingleLineCodeEditor;