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

package/dist/types/components/TextField/useTextValidation.d.ts

@@ -2,6 +2,7 @@ import React, { ChangeEventHandler } from "react";
 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;
     /**

package/dist/types/components/index.d.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/dist/types/index.d.ts

@@ -1,12 +1,15 @@
+import * as Skeleton from "./components/Skeleton/classnames";
 import * as TypographyClassNames from "./components/Typography/classnames";
 import * as LegacyReplacements from "./legacy-replacements";
 declare const ClassNames: {
+    Skeleton: typeof Skeleton;
     Typography: typeof TypographyClassNames;
     Intent: {
         [key: string]: string;
     };
 };
 declare const HelperClasses: {
+    Skeleton: typeof Skeleton;
     Typography: typeof TypographyClassNames;
     Intent: {
         [key: string]: string;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "23.3.1",
+    "version": "23.4.0-rc.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { Classes as BlueprintClassNames } from "@blueprintjs/core";
-import CodeMirror, { Position } from "codemirror";
+import CodeMirror, { Editor as CodeMirrorEditor, Position } from "codemirror";
 import { debounce } from "lodash";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -8,13 +8,17 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { ContextOverlay, FieldItem, IconButton, Spinner, Toolbar, ToolbarSection } from "./../../";
 import { AutoSuggestionList } from "./AutoSuggestionList";
 //custom components
-import SingleLineCodeEditor, { IRange } from "./SingleLineCodeEditor";
+import ExtendedCodeEditor, { IRange } from "./ExtendedCodeEditor";
+
+const LINE_COLUMN_WIDTH = 29;
+const EXTRA_VERTICAL_PADDING = 10;
 
 export enum OVERWRITTEN_KEYS {
     ArrowUp = "ArrowUp",
     ArrowDown = "ArrowDown",
     Enter = "Enter",
     Tab = "Tab",
+    Escape = "Escape",
 }
 export type OverwrittenKeyTypes = (typeof OVERWRITTEN_KEYS)[keyof typeof OVERWRITTEN_KEYS];
 
@@ -128,6 +132,12 @@ export interface AutoSuggestionProps {
     /** Delay in ms before a validation request should be send after nothing is typed in anymore.
      * This should prevent the UI to send too many requests to the backend. */
     validationRequestDelay?: number;
+    /**
+     * multiline configuration
+     */
+    multiline?: boolean;
+    // The editor theme, e.g. "sparql"
+    mode?: string;
 }
 
 // @deprecated
@@ -138,8 +148,6 @@ interface RequestMetaData {
     requestId: string | undefined;
 }
 
-type HorizontalShiftCallbackFunction = (shift: number) => any;
-
 /**
  * **Element is deprecated.**
  * Use `CodeAutocompleteField` as replacement.
@@ -165,10 +173,12 @@ export const AutoSuggestion = ({
     showScrollBar = true,
     autoCompletionRequestDelay = 1000,
     validationRequestDelay = 200,
+    mode = "null",
+    multiline = false,
 }: AutoSuggestionProps) => {
     const value = React.useRef<string>(initialValue);
     const cursorPosition = React.useRef(0);
-    const horizontalShiftSubscriber = React.useRef<HorizontalShiftCallbackFunction | undefined>(undefined);
+    const dropdownXYoffset = React.useRef<{ x: number; y: number }>({ x: 0, y: 0 });
     const [shouldShowDropdown, setShouldShowDropdown] = React.useState(false);
     const [suggestions, setSuggestions] = React.useState<ISuggestionWithReplacementInfo[]>([]);
     const [suggestionsPending, setSuggestionsPending] = React.useState(false);
@@ -182,6 +192,7 @@ export const AutoSuggestion = ({
     const [highlightedElement, setHighlightedElement] = useState<ISuggestionWithReplacementInfo | undefined>(undefined);
     const [editorInstance, setEditorInstance] = React.useState<CodeMirror.Editor>();
     const isFocused = React.useRef(false);
+    const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
     /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
     const [editorState] = React.useState<{
         index: number;
@@ -221,9 +232,10 @@ export const AutoSuggestion = ({
             const { from, length } = highlightedElement;
             if (length > 0 && selectedTextRanges.current.length === 0) {
                 const to = from + length;
+                const cursor = editorState.editorInstance?.getCursor();
                 const marker = editorInstance.markText(
-                    { line: 0, ch: from },
-                    { line: 0, ch: to },
+                    { line: cursor?.line ?? 0, ch: from },
+                    { line: cursor?.line ?? 0, ch: to },
                     { className: `${eccgui}-autosuggestion__text--highlighted` }
                 );
                 return () => marker.clear();
@@ -335,12 +347,15 @@ export const AutoSuggestion = ({
             suggestionRequestData.current.requestId = requestId;
             setSuggestionsPending(true);
             try {
-                const result: IPartialAutoCompleteResult | undefined = await fetchSuggestions(
-                    inputString,
-                    cursorPosition
-                );
-                if (value.current === inputString) {
-                    setSuggestionResponse(result);
+                const pos = editorState.editorInstance?.getCursor();
+                if (pos) {
+                    const result: IPartialAutoCompleteResult | undefined = await fetchSuggestions(
+                        inputString.split("\n")[pos.line],
+                        cursorPosition
+                    );
+                    if (value.current === inputString) {
+                        setSuggestionResponse(result);
+                    }
                 }
             } catch (e) {
                 setSuggestionResponse(undefined);
@@ -377,14 +392,30 @@ export const AutoSuggestion = ({
             handleEditorInputChange.cancel();
             handleEditorInputChange(value.current, cursorPosition.current);
         }
-        horizontalShiftSubscriber.current &&
-            horizontalShiftSubscriber.current(Math.min(coords.left, Math.max(coords.left - scrollinfo.left, 0)));
+
+        const boxOffsetHeight = autoSuggestionDivRef.current?.offsetHeight ?? 0;
+
+        setTimeout(() => {
+            dropdownXYoffset.current = {
+                x:
+                    Math.min(coords.left, Math.max(coords.left - scrollinfo.left, 0)) +
+                    (multiline ? LINE_COLUMN_WIDTH : 0),
+                y: multiline
+                    ? -(boxOffsetHeight - Math.min(coords.bottom, Math.max(coords.bottom - scrollinfo.top, 0))) +
+                      EXTRA_VERTICAL_PADDING
+                    : 0,
+            };
+        }, 1);
     };
 
     const handleInputEditorKeyPress = (event: KeyboardEvent) => {
         const overWrittenKeys: Array<string> = Object.values(OVERWRITTEN_KEYS);
         if (overWrittenKeys.includes(event.key) && (useTabForCompletions || event.key !== OVERWRITTEN_KEYS.Tab)) {
-            event.preventDefault();
+            //don't prevent when enter should create new line (multiline config) and dropdown isn't shown
+            const allowDefaultEnterKeyPressBehavior = multiline && !editorState.suggestions.length;
+            if (!allowDefaultEnterKeyPressBehavior) {
+                event.preventDefault();
+            }
             makeDropDownRespondToKeyPress(OVERWRITTEN_KEYS[event.key as keyof typeof OVERWRITTEN_KEYS]);
         }
     };
@@ -397,14 +428,15 @@ export const AutoSuggestion = ({
     const handleDropdownChange = (selectedSuggestion: ISuggestionWithReplacementInfo) => {
         if (selectedSuggestion && editorState.editorInstance) {
             const { from, length, value } = selectedSuggestion;
+            const cursor = editorState.editorInstance.getCursor();
             const to = from + length;
             editorState.editorInstance.replaceRange(
                 selectedSuggestion.value,
-                { line: 0, ch: from },
-                { line: 0, ch: to }
+                { line: cursor.line, ch: from },
+                { line: cursor.line, ch: to }
             );
             closeDropDown();
-            editorState.editorInstance.setCursor({ line: 0, ch: from + value.length });
+            editorState.editorInstance.setCursor({ line: cursor.line, ch: from + value.length });
             editorState.editorInstance.focus();
         }
     };
@@ -432,6 +464,18 @@ export const AutoSuggestion = ({
         }
     };
 
+    const handleInputMouseDown = React.useCallback((editor: CodeMirrorEditor) => {
+        const currentLine = editorState.editorInstance?.getCursor()?.line;
+        const clickedLine = editor.getCursor()?.line;
+        //Clicking on a different line other than the current line
+        //where the dropdown already suggests should close the dropdown
+        if (currentLine !== clickedLine) {
+            closeDropDown();
+            editorState.suggestions = [];
+            setSuggestions([]);
+        }
+    }, []);
+
     //keyboard handlers
     const handleArrowDown = () => {
         const lastSuggestionIndex = editorState.suggestions.length - 1;
@@ -452,6 +496,12 @@ export const AutoSuggestion = ({
         handleDropdownChange(editorState.suggestions[currentIndex()]);
     };
 
+    const handleEscapePressed = () => {
+        closeDropDown();
+        editorState.suggestions = [];
+        setSuggestions([]);
+    };
+
     const makeDropDownRespondToKeyPress = (keyPressedFromInput: OverwrittenKeyTypes) => {
         // React state unknown
         if (editorState.dropdownShown) {
@@ -468,6 +518,9 @@ export const AutoSuggestion = ({
                 case OVERWRITTEN_KEYS.Tab:
                     handleTabPressed();
                     break;
+                case OVERWRITTEN_KEYS.Escape:
+                    handleEscapePressed();
+                    break;
                 default:
                 //do nothing
             }
@@ -485,18 +538,15 @@ export const AutoSuggestion = ({
         []
     );
 
-    const subscribeToHorizontalShift = React.useMemo(
-        () => (callback: HorizontalShiftCallbackFunction) => {
-            horizontalShiftSubscriber.current = callback;
-        },
-        []
-    );
-
     const hasError = !!value.current && !pathIsValid && !pathValidationPending;
     const autoSuggestionInput = (
-        <div id={id} className={`${eccgui}-autosuggestion` + (className ? ` ${className}` : "")}>
+        <div
+            id={id}
+            ref={autoSuggestionDivRef}
+            className={`${eccgui}-autosuggestion` + (className ? ` ${className}` : "")}
+        >
             <div
-                className={`${eccgui}-autosuggestion__inputfield ${BlueprintClassNames.INPUT_GROUP} ${
+                className={` ${eccgui}-autosuggestion__inputfield ${BlueprintClassNames.INPUT_GROUP} ${
                     BlueprintClassNames.FILL
                 } ${hasError ? BlueprintClassNames.INTENT_DANGER : ""}`}
             >
@@ -505,12 +555,13 @@ export const AutoSuggestion = ({
                     fill
                     isOpen={shouldShowDropdown}
                     placement="bottom-start"
+                    modifiers={{ flip: { enabled: false } }}
                     openOnTargetFocus={false}
                     autoFocus={false}
                     content={
                         <AutoSuggestionList
                             id={id + "__dropdown"}
-                            registerForHorizontalShift={subscribeToHorizontalShift}
+                            offsetValues={dropdownXYoffset.current}
                             loading={suggestionsPending}
                             options={suggestions}
                             isOpen={!suggestionsPending && shouldShowDropdown}
@@ -520,8 +571,8 @@ export const AutoSuggestion = ({
                         />
                     }
                 >
-                    <SingleLineCodeEditor
-                        mode="null"
+                    <ExtendedCodeEditor
+                        mode={mode}
                         setEditorInstance={setEditorInstance}
                         onChange={handleChange}
                         onCursorChange={handleCursorChange}
@@ -532,6 +583,8 @@ export const AutoSuggestion = ({
                         placeholder={placeholder}
                         onSelection={onSelection}
                         showScrollBar={showScrollBar}
+                        multiline={multiline}
+                        onMouseDown={handleInputMouseDown}
                     />
                 </ContextOverlay>
                 {!!value.current && (

package/src/components/AutoSuggestion/AutoSuggestionList.tsx

@@ -24,38 +24,30 @@ export interface AutoSuggestionListProps extends Omit<React.HTMLAttributes<HTMLD
     isOpen: boolean;
     // If the drop down should show a loading state
     loading?: boolean;
-    // Register for changes in horizontal shift
-    registerForHorizontalShift?: (callback: HorizontalShiftCallbackFunction) => any
     // The item from the drop down that is active
     currentlyFocusedIndex: number;
     // Callback indicating what item should currently being highlighted, i.e. is either active or is hovered over
     itemToHighlight: (item: ISuggestionWithReplacementInfo | undefined) => any;
+    /** horizontal and vertical offset values in relation to the cursor */
+    offsetValues?: { x: number; y: number };
 }
 
 // @deprecated
 export type IDropdownProps = AutoSuggestionListProps;
 
-type HorizontalShiftCallbackFunction = (shift: number) => any
-
 const ListItem = ({ item }: any, ref: any) => {
     const listItem = (
         <OverviewItem densityHigh={true}>
             <OverviewItemDescription>
                 <OverviewItemLine>
                     <OverflowText ellipsis="reverse">
-                        <Highlighter
-                            label={item.value}
-                            searchValue={item.query}
-                        />
+                        <Highlighter label={item.value} searchValue={item.query} />
                     </OverflowText>
                 </OverviewItemLine>
                 {item.description ? (
                     <OverviewItemLine small={true}>
                         <OverflowText>
-                            <Highlighter
-                                label={item.description}
-                                searchValue={item.query}
-                            />
+                            <Highlighter label={item.description} searchValue={item.query} />
                         </OverflowText>
                     </OverviewItemLine>
                 ) : null}
@@ -82,18 +74,15 @@ export const AutoSuggestionList = ({
     options,
     loading,
     onItemSelectionChange,
-    registerForHorizontalShift,
     currentlyFocusedIndex,
     itemToHighlight,
     style,
+    offsetValues,
     ...otherDivProps
 }: AutoSuggestionListProps) => {
-    const [hoveredItem, setHoveredItem] = React.useState<
-        ISuggestionWithReplacementInfo | undefined
-    >(undefined);
-    const [left, setLeft] = React.useState(0)
+    const [hoveredItem, setHoveredItem] = React.useState<ISuggestionWithReplacementInfo | undefined>(undefined);
     // Refs of list items
-    const [refs] = React.useState<React.RefObject<Element>[]>([])
+    const [refs] = React.useState<React.RefObject<Element>[]>([]);
     const dropdownRef = React.useRef<HTMLDivElement>(null);
     const generateRef = (index: number) => {
         if (!refs[index]) {
@@ -102,15 +91,6 @@ export const AutoSuggestionList = ({
         return refs[index];
     };
 
-    React.useEffect(() => {
-        if(registerForHorizontalShift) {
-            const callback = (shift: number) => {
-                setTimeout(() => setLeft(shift), 1)
-            }
-            registerForHorizontalShift(callback)
-        }
-    }, [registerForHorizontalShift])
-
     React.useEffect(() => {
         const listIndexNode = refs[currentlyFocusedIndex];
         if (dropdownRef?.current && listIndexNode?.current) {
@@ -126,18 +106,12 @@ export const AutoSuggestionList = ({
         }
     }, [currentlyFocusedIndex, refs]);
 
-    const focusedItem = options[currentlyFocusedIndex]
+    const focusedItem = options[currentlyFocusedIndex];
 
     // Decide which item to highlight
     React.useEffect(() => {
         itemToHighlight(!isOpen ? undefined : hoveredItem || focusedItem);
-    }, [
-        currentlyFocusedIndex,
-        itemToHighlight,
-        focusedItem,
-        isOpen,
-        hoveredItem,
-    ]);
+    }, [currentlyFocusedIndex, itemToHighlight, focusedItem, isOpen, hoveredItem]);
 
     const Loader = (
         <OverviewItem hasSpacing>
@@ -153,7 +127,7 @@ export const AutoSuggestionList = ({
         <div
             {...otherDivProps}
             className={`${eccgui}-autosuggestion__dropdown`}
-            style={{ ...style, left }}
+            style={{ ...style, left: offsetValues?.x ?? 0, top: offsetValues?.y ?? 0 }}
             ref={dropdownRef}
         >
             {loading ? (
@@ -166,12 +140,7 @@ export const AutoSuggestionList = ({
                             active={currentlyFocusedIndex === index}
                             onMouseDown={(e: any) => e.preventDefault()}
                             onClick={() => onItemSelectionChange(item)}
-                            text={(
-                                <Item
-                                    ref={generateRef(index)}
-                                    item={item}
-                                />
-                            )}
+                            text={<Item ref={generateRef(index)} item={item} />}
                             onMouseEnter={() => setHoveredItem(item)}
                             onMouseLeave={() => setHoveredItem(undefined)}
                             onMouseOver={() => {

package/src/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -0,0 +1,129 @@
+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, EditorChange } from "codemirror";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface IRange {
+    from: number;
+    to: number;
+}
+
+export interface ExtendedCodeEditorProps {
+    // 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;
+    // function invoked when any click occurs
+    onMouseDown?: (editor: CodeMirrorEditor) => 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;
+    //show scrollbar
+    showScrollBar?: boolean;
+    /** allow multiline entries when new line characters are entered */
+    multiline?: boolean;
+}
+
+export type IEditorProps = ExtendedCodeEditorProps;
+
+/** A single-line code editor. */
+export const ExtendedCodeEditor = ({
+    setEditorInstance,
+    onChange,
+    onCursorChange,
+    mode,
+    initialValue = "",
+    onFocusChange,
+    onKeyDown,
+    onSelection,
+    enableTab = false,
+    placeholder,
+    showScrollBar = true,
+    multiline = false,
+    onMouseDown,
+}: ExtendedCodeEditorProps) => {
+    const initialContent = React.useRef(multiline ? initialValue : initialValue.replace(/[\r\n]/g, " "));
+
+    const extendedEditorProps = {
+        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);
+        },
+        onBeforeChange: (_editor: CodeMirrorEditor, data: EditorChange, _: string, next: () => any) => {
+            // Reduce multiple lines to a single line
+            if (data.text.length > 1) {
+                _editor.setValue(data.text.join(""));
+            }
+            next();
+        },
+    };
+
+    const extraEditorProps = multiline
+        ? {
+              editorDidMount: (editor: any) => {
+                  setEditorInstance(editor);
+              },
+          }
+        : extendedEditorProps;
+
+    return (
+        <div className={`${eccgui}-${multiline ? "codeeditor" : `singlelinecodeeditor ${BlueprintClassNames.INPUT}`}`}>
+            <UnControlledEditor
+                value={initialContent.current}
+                onFocus={() => onFocusChange(true)}
+                onBlur={() => onFocusChange(false)}
+                options={{
+                    mode: mode,
+                    lineNumbers: multiline,
+                    lineWrapping: multiline,
+                    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());
+                }}
+                onChange={(_editor, _data, value) => {
+                    onChange(value);
+                }}
+                onMouseDown={(editor) => onMouseDown && onMouseDown(editor)}
+                onKeyDown={(_, event) => onKeyDown(event)}
+                {...extraEditorProps}
+            />
+        </div>
+    );
+};
+
+export default ExtendedCodeEditor;

package/src/components/AutoSuggestion/index.ts

@@ -1,15 +1,7 @@
 import { AutoSuggestion, AutoSuggestionProps } from "./AutoSuggestion";
 import { AutoSuggestionList, AutoSuggestionListProps } from "./AutoSuggestionList";
-import { SingleLineCodeEditor, SingleLineCodeEditorProps } from "./SingleLineCodeEditor";
+import { ExtendedCodeEditor, ExtendedCodeEditorProps } from "./ExtendedCodeEditor";
 
-export {
-    AutoSuggestion,
-    AutoSuggestionList,
-    SingleLineCodeEditor,
-};
+export { AutoSuggestion, AutoSuggestionList, ExtendedCodeEditor };
 
-export type {
-    AutoSuggestionProps,
-    AutoSuggestionListProps,
-    SingleLineCodeEditorProps,
-};
+export type { AutoSuggestionProps, AutoSuggestionListProps, ExtendedCodeEditorProps };