@rivtn/noseur 1.0.0

package/dist/esm/form/Dropdown.js

@@ -0,0 +1,360 @@
+import "./Form.css";
+import React from 'react';
+import { Scheme } from "../constants/Scheme";
+import { DOMHelper } from "../utils/DOMUtils";
+import { Classname } from "../utils/Classname";
+import { BoolHelper } from "../utils/BoolHelper";
+import { TypeChecker } from "../utils/TypeChecker";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { Popover } from "../overlay/Popover";
+import { Position } from "../constants/Alignment";
+import { FunctionStackManager } from "../utils/FunctionStackManager";
+import { FormControl } from "../compose/form/FormControl";
+import { TextInput } from "./Input";
+// TODO implements keyboard and mouse shortcuts
+class DropdownComponent extends React.Component {
+    static defaultProps = {
+        disabled: false,
+        highlight: false,
+        popoverProps: {},
+        borderless: false,
+        textInputProps: {},
+        formControlProps: {},
+        responsiveWidth: true,
+        selectedOptionIndex: -1,
+        scheme: Scheme.SECONDARY,
+        iconPosition: Position.LEFT,
+        togglePosition: Position.RIGHT,
+        optionGroupChildrenKey: "items",
+        toggleIcons: {
+            hide: 'fa fa-angle-up',
+            show: 'fa fa-angle-down',
+        },
+    };
+    state = {
+        popoverVisible: false,
+        options: this.props.options,
+        selectedOptionIndex: this.props.selectedOptionIndexes || { primaryIndex: this.props.selectedOptionIndex, secondaryIndex: this.props.selectedOptionIndex },
+    };
+    optionTemplate;
+    compoundElement;
+    optionGroupTemplate;
+    internalPopoverElement;
+    internalTextInputElement;
+    internalManageRefCache;
+    functionStackManager = new FunctionStackManager();
+    constructor(props) {
+        super(props);
+        this.optionTemplate = this.props.optionTemplate ?? this.buildSingleOption;
+        this.optionGroupTemplate = this.props.optionGroupTemplate ?? this.buildSingleOption;
+        this.togglePopover = this.togglePopover.bind(this);
+        this.onDropdownShow = this.onDropdownShow.bind(this);
+        this.onDropdownHide = this.onDropdownHide.bind(this);
+    }
+    componentDidMount() {
+        this.internalManageRefCache = {
+            toggle: this.togglePopover,
+            changeOptions: (options) => {
+                this.setState({ options });
+            },
+            hideDropDown: (e) => { if (this.state.popoverVisible) {
+                this.togglePopover(e, true);
+            } },
+            showDropDown: (e) => { if (!this.state.popoverVisible) {
+                this.togglePopover(e, true);
+            } },
+        };
+        ObjectHelper.resolveManageRef(this, this.internalManageRefCache);
+    }
+    componentDidUpdate(prevProps, _) {
+        const optionsChanged = !BoolHelper.deepEqual(this.props, prevProps, ["options"]);
+        const selectedOptionIndexChanged = !BoolHelper.deepEqual(this.props, prevProps, ["selectedOptionIndex"]);
+        if (optionsChanged || selectedOptionIndexChanged) {
+            let options = this.state.options;
+            if (optionsChanged)
+                options = this.props.options;
+            const newState = { options };
+            if (selectedOptionIndexChanged) {
+                const selectedOptionIndex = this.props.selectedOptionIndexes
+                    ?? { primaryIndex: this.props.selectedOptionIndex, secondaryIndex: this.props.selectedOptionIndex };
+                if (selectedOptionIndex.primaryIndex === -1) {
+                    if (this.props.renderOptionAsPlaceholder)
+                        this.internalTextInputElement.placeholder = this.props.placeholder;
+                    else
+                        this.internalTextInputElement.value = "";
+                }
+                else {
+                    newState.selectedOptionIndex = selectedOptionIndex;
+                    if (optionsChanged || this.props.forceUpdateIfSelectedIndexChanges) {
+                        this.selectOption(null, newState.selectedOptionIndex, newState.options.find((_, i) => i === selectedOptionIndex.primaryIndex), true);
+                    }
+                }
+            }
+            this.setState(newState);
+        }
+    }
+    componentWillUnmount() {
+        ObjectHelper.resolveManageRef(this, null);
+    }
+    togglePopover(e, ignoreEditable = true) {
+        e.stopPropagation();
+        if (!this.internalPopoverElement || (!ignoreEditable && this.props.editable && e.target === this.internalTextInputElement))
+            return;
+        this.internalPopoverElement.toggle(e, this.compoundElement);
+    }
+    onDropdownHide() {
+        this.setState({ popoverVisible: false });
+        if (this.props.onDropdownHide)
+            this.props.onDropdownHide();
+    }
+    onDropdownShow() {
+        this.setState({ popoverVisible: true });
+        if (this.props.onDropdownShow)
+            this.props.onDropdownShow();
+    }
+    selectOption(e, selectedOptionIndex, option, skipReport) {
+        if (!skipReport && selectedOptionIndex.primaryIndex === -1) {
+            if (this.props.onDeSelectOption)
+                this.props.onDeSelectOption(e);
+        }
+        ;
+        if (selectedOptionIndex.primaryIndex === -1 || (skipReport || !this.props.onSelectOption || this.props.onSelectOption(option, e) !== true)) {
+            if (!skipReport)
+                this.setState({ selectedOptionIndex: selectedOptionIndex });
+            const optionLabel = option ? this.resolveOptionLabel(option) : (this.props.renderOptionAsPlaceholder ? this.props.placeholder : "");
+            if (this.props.renderOptionAsPlaceholder) {
+                this.internalTextInputElement.placeholder = optionLabel;
+            }
+            else {
+                this.internalTextInputElement.value = optionLabel;
+            }
+            if (!this.props.fill && this.props.responsiveWidth) {
+                const sidePaddings = parseInt(DOMHelper.getElementStyle(this.internalTextInputElement).paddingLeft) + parseInt(DOMHelper.getElementStyle(this.internalTextInputElement).paddingRight);
+                this.internalTextInputElement.style.width = `${DOMHelper.getTextWidth(optionLabel, this.internalTextInputElement) + sidePaddings}px`;
+            }
+        }
+        if (skipReport)
+            return;
+        return this.togglePopover(e, false);
+    }
+    resolveOptionLabel(option) {
+        if (!option)
+            return;
+        const optionMap = this.props.optionMap;
+        if (!optionMap || !optionMap.label)
+            return option.label ? option.label : "";
+        if (optionMap.label.indexOf('{') < 0) {
+            return option[optionMap.label] || optionMap.label;
+        }
+        return ObjectHelper.expandStringTemplate(optionMap.label, option);
+    }
+    resolveOptionIcon(option) {
+        if (!option || this.props.noIcon)
+            return null;
+        const optionMap = this.props.optionMap;
+        let icon = option.icon;
+        if (optionMap && optionMap.icon) {
+            if (optionMap.icon.indexOf && optionMap.icon.indexOf('{') >= 0) {
+                icon = ObjectHelper.expandStringTemplate(optionMap.icon, option);
+            }
+            else {
+                icon = option[optionMap.icon];
+            }
+        }
+        return option ? (TypeChecker.isString(icon) ? React.createElement("img", { src: icon }) : icon) : null;
+    }
+    buildSingleOption(option) {
+        const icon = this.resolveOptionIcon(option);
+        const label = this.resolveOptionLabel(option);
+        return (React.createElement("span", { className: "noseur-dropdown-popover-li-item" },
+            icon,
+            label));
+    }
+    getSelectedOption() {
+        if (!this.state.options || this.state.selectedOptionIndex == null || this.state.selectedOptionIndex.primaryIndex == null ||
+            this.state.selectedOptionIndex.primaryIndex < 0 || this.state.selectedOptionIndex.primaryIndex >= Object.keys(this.state.options).length) {
+            return null;
+        }
+        const childrenKey = this.props.optionGroupChildrenKey;
+        const selectedOption = this.state.options[this.state.selectedOptionIndex.primaryIndex];
+        return (TypeChecker.isArray(selectedOption) && childrenKey in selectedOption)
+            ? selectedOption[childrenKey][this.state.selectedOptionIndex.secondaryIndex || 0]
+            : selectedOption;
+    }
+    buildListItem(option, isGroupTitle = false, groupIndex = null, index = -1, isSelected = false, className = "noseur-dropdown-popover-li-grp") {
+        if (isGroupTitle) {
+            return (React.createElement("li", { key: `${groupIndex || -2}-${index}`, "aria-label": option.label, role: "group", className: className, onClick: (_) => { } }, this.optionGroupTemplate(option)));
+        }
+        const optionElement = this.optionTemplate(option);
+        const refProps = {};
+        if (isSelected)
+            refProps.ref = (r) => r && this.functionStackManager.register("POPOVER_REFED", (popOverElement) => {
+                popOverElement.scrollTop = r.offsetTop - popOverElement.offsetTop;
+            });
+        return (React.createElement("li", { key: `${groupIndex || -1}-${index}`, "aria-label": option.label, role: "option", "aria-selected": isSelected, className: className, ref: (r) => r && isSelected && r.scrollIntoView(), ...refProps, onClick: (e) => {
+                if (this.props.disabled)
+                    return;
+                this.selectOption(e, {
+                    secondaryIndex: (groupIndex == null ? -1 : index),
+                    primaryIndex: (groupIndex == null ? index : groupIndex),
+                }, option);
+            } }, optionElement));
+    }
+    renderOption(options, groupIndex = null, isSelectedGroup = false) {
+        const listItems = [];
+        const isGroupOptions = !!groupIndex;
+        const selectedOptionIndex = this.state.selectedOptionIndex;
+        options.forEach((option, index) => {
+            const trueSelectedIndex = isGroupOptions ? (isSelectedGroup ? selectedOptionIndex.secondaryIndex : -1) : selectedOptionIndex.primaryIndex;
+            const isSelected = index === trueSelectedIndex;
+            const isGroup = (this.props.optionGroupChildrenKey in option);
+            if (isGroup) {
+                listItems.push(this.buildListItem(option, true, index));
+                listItems.push(...this.renderOption(option[this.props.optionGroupChildrenKey], index, isSelected));
+                return;
+            }
+            const className = Classname.build((this.props.scheme && isSelected ? this.props.scheme : null), (this.props.scheme && !this.props.disabled ? `${this.props.scheme}-bg-hv` : null), {
+                'default-style': !this.props.scheme,
+                'noseur-disabled': option.not_selectable,
+            }, "noseur-dropdown-popover-li-item", this.props.optionsClassName, option.className);
+            listItems.push(this.buildListItem(option, false, groupIndex, index, isSelected, className));
+        });
+        return listItems;
+    }
+    buildSelectedOption(selectedOption) {
+        if (selectedOption && this.props.selectedOptionTemplate)
+            return this.props.selectedOptionTemplate(selectedOption);
+        let selectedOptionLabel = this.resolveOptionLabel(selectedOption);
+        if (this.props.translateSelectionLabel)
+            selectedOptionLabel = this.props.translateSelectionLabel(selectedOptionLabel, selectedOption);
+        let defaultValue = selectedOptionLabel;
+        const placeholder = (this.props.renderOptionAsPlaceholder && selectedOptionLabel ? selectedOptionLabel : this.props.placeholder);
+        if (defaultValue && this.props.renderOptionAsPlaceholder)
+            defaultValue = null;
+        if (!defaultValue)
+            defaultValue = this.props.textInputProps.defaultValue;
+        if (!defaultValue)
+            defaultValue = this.props.defaultInputValue;
+        const inputProps = {
+            placeholder,
+            defaultValue,
+            noStyle: true,
+            borderless: true,
+            id: this.props.id,
+            fill: this.props.fill,
+            scheme: this.props.scheme,
+            ...this.props.textInputProps,
+            disabled: this.props.disabled,
+            readOnly: !this.props.editable,
+            highlight: this.props.highlight,
+            onInputComplete: this.props.onInputComplete,
+            style: { ...(this.props.style ?? {}), ...(this.props.textInputProps?.style ?? {}) },
+            ref: (el) => {
+                if (!el)
+                    return;
+                this.internalTextInputElement = el;
+                if (!this.props.fill && this.props.responsiveWidth) {
+                    const sidePaddings = parseInt(DOMHelper.getElementStyle(el).paddingLeft) + parseInt(DOMHelper.getElementStyle(el).paddingRight);
+                    el.style.width = `${DOMHelper.getTextWidth((defaultValue ? defaultValue : placeholder), el) + sidePaddings}px`;
+                }
+                if (!this.props.textInputRef)
+                    return;
+                if (this.props.textInputRef instanceof Function)
+                    this.props.textInputRef(el);
+                else
+                    this.props.textInputRef.current = el;
+            },
+            className: Classname.build('noseur-dropdown-inputtext', {
+                'noseur-cursor-pointer': !this.props.editable,
+            }, (this.props.textInputProps ?? {}).className, this.props.className),
+        };
+        if (!this.props.editable) {
+            inputProps.style.cursor = "pointer";
+        }
+        else if (this.props.onSearch) {
+            inputProps.onInput = (e) => {
+                if (this.props.onSearch) {
+                    const options = this.props.onSearch(e, this.internalManageRefCache);
+                    if (options === null)
+                        return;
+                    this.setState({ options });
+                }
+            };
+        }
+        return (React.createElement(TextInput, { ...inputProps, onClick: (e) => this.togglePopover(e, false) }));
+    }
+    renderPopover() {
+        let listItems;
+        const popoverProps = this.props.popoverProps ?? {};
+        popoverProps.matchTargetSize = !this.props.dontMatchTargetSize;
+        popoverProps.className = Classname.build("noseur-dropdown-popover", popoverProps.className);
+        if (this.state.options) {
+            if (!this.state.options.length && this.props.emptyTemplate)
+                listItems = this.props.emptyTemplate();
+            else
+                listItems = this.renderOption(this.state.options);
+        }
+        else {
+            listItems = this.props.loadingTemplate ? this.props.loadingTemplate() : (React.createElement("div", { className: "noseur-dropdown-popover-empty" },
+                React.createElement("i", { style: { fontSize: 30 }, className: "fa fa-spinner fa-spin" })));
+        }
+        const popoverHeader = (this.props.popoverHeaderTemplate) ? this.props.popoverHeaderTemplate() : null;
+        const popoverFooter = (this.props.popoverFooterTemplate) ? this.props.popoverFooterTemplate() : null;
+        const popoverItemsRef = (r) => {
+            r && this.functionStackManager.popSmoke("POPOVER_REFED", r);
+        };
+        return (React.createElement(Popover, { pointingArrowClassName: null, ...popoverProps, manageRef: (r) => this.internalPopoverElement = r, ref: this.props.popoverRef, onCloseFocusRef: this.props.textInputRef, onShow: this.onDropdownShow, onHide: this.onDropdownHide },
+            popoverHeader,
+            React.createElement("ul", { ref: popoverItemsRef, role: "listbox", className: "noseur-dropdown-popover-list" }, listItems),
+            popoverFooter));
+    }
+    renderToggleIcon() {
+        if (this.props.noToggleIcons)
+            return null;
+        const toggleIcon = this.props.toggleIcons[this.state.popoverVisible ? "hide" : "show"];
+        return TypeChecker.isString(toggleIcon)
+            ? React.createElement("i", { className: Classname.build(toggleIcon, (this.props.scheme ? `${this.props.scheme}-tx` : null)) })
+            : toggleIcon;
+    }
+    renderLeftContent(selectedOption, formControlProps) {
+        const icon = this.props.iconPosition === Position.LEFT && !this.props.noSelectionIcon ? this.resolveOptionIcon(selectedOption) : null;
+        const leftContent = this.props.selectedOptionTemplate ? null : icon ?? formControlProps.leftContent;
+        const toggleIcon = this.props.togglePosition === Position.LEFT ? this.renderToggleIcon() : null;
+        if (!toggleIcon && !leftContent)
+            return null;
+        return (React.createElement("div", { className: "noseur-dropdown-left-content" },
+            toggleIcon,
+            leftContent));
+    }
+    renderRightContent(selectedOption, optionIsSelected) {
+        let closeIconClassname;
+        if (this.props.clearable && optionIsSelected) {
+            closeIconClassname = (React.createElement("i", { className: Classname.build("fa fa-close", `${Scheme.DANGER}-tx-hv`), onClick: (e) => {
+                    e.stopPropagation();
+                    this.selectOption(e, { primaryIndex: -1, secondaryIndex: -1 });
+                    if (this.internalTextInputElement && this.props.renderOptionAsPlaceholder)
+                        this.internalTextInputElement.placeholder = this.props.placeholder;
+                } }));
+        }
+        const icon = this.props.iconPosition === Position.RIGHT && !this.props.noSelectionIcon ? this.resolveOptionIcon(selectedOption) : null;
+        const toggleIcon = this.props.togglePosition === Position.RIGHT ? this.renderToggleIcon() : null;
+        if (!closeIconClassname && !toggleIcon && !icon)
+            return null;
+        return (React.createElement("div", { className: "noseur-dropdown-right-content" },
+            closeIconClassname,
+            icon,
+            toggleIcon));
+    }
+    render() {
+        const popover = this.renderPopover();
+        const selectedOption = this.getSelectedOption();
+        const formControlProps = (this.props.formControlProps || {});
+        const selectedOptionElement = this.buildSelectedOption(selectedOption);
+        const className = Classname.build('noseur-dropdown', this.props.formControlProps?.className, { "noseur-disabled": this.props.disabled });
+        return (React.createElement(React.Fragment, null,
+            React.createElement(FormControl, { ...formControlProps, className: className, borderless: this.props.borderless, leftContent: this.renderLeftContent(selectedOption, formControlProps), rightContent: this.renderRightContent(selectedOption, !!selectedOption), contentStyle: { width: "initial", ...(formControlProps.style || {}) }, fill: this.props.fill, scheme: this.props.scheme || formControlProps.scheme, ref: (r) => this.compoundElement = r, onClick: this.togglePopover }, selectedOptionElement),
+            popover));
+    }
+}
+export const Dropdown = ({ ref, ...props }) => (React.createElement(DropdownComponent, { ...props, forwardRef: ref }));
+// TODO adapt size of selected label to input width

package/dist/esm/form/FileInput.d.ts

@@ -0,0 +1,134 @@
+import "./Form.css";
+import React from 'react';
+import { BareInputManageRef } from "./Input";
+import { Alignment } from "../constants/Alignment";
+import { Orientation } from "../constants/Orientation";
+import { NoseurElement, NoseurObject } from "../constants/Types";
+import { ButtonProps } from "./Button";
+import { ComponentBaseProps, ComponentElementBasicAttributes } from "../core/ComponentBaseProps";
+export declare enum FileInputMode {
+    BUTTON = 0,
+    PREVIEW = 1,
+    ELEMENT = 2,
+    CONTROLLED = 3
+}
+export declare enum FileInputPreviewType {
+    PDF = "PDF",
+    AUTO = "AUTO",
+    NONE = "NONE",
+    HTML = "HTML",
+    TEXT = "TEXT",
+    IMAGE = "IMAGE",
+    VIDEO = "VIDEO",
+    AUDIO = "AUDIO",
+    BINARY = "BINARY",
+    CUSTOM = "CUSTOM"
+}
+export interface FileInputFixtureOptions {
+    className: string;
+    props: FileInputProps;
+    clearControl: NoseurElement;
+    selectControl: NoseurElement;
+    actionControl: NoseurElement;
+}
+export interface FileInputItemOptions {
+    file: File;
+    url: string;
+    index: number;
+    className: string;
+    props: FileInputProps;
+    formattedSize: string;
+    previewElement: NoseurElement;
+    onRemove: FileInputFileEventHandler;
+}
+export interface DragAndDropRefOptions {
+    count: number;
+    interval: number;
+}
+export type FileInputDialogEventHandler = (event: any) => void;
+export type FileInputValidationHandler = (file: File) => string;
+export type FileInputSelectFileHandler = (files: File[]) => void;
+export type FileInputDragEventHandler = (event: DragEvent) => boolean;
+export type FileInputFileEventHandler = (file: File, event?: Event) => void;
+export type FileInputValidationEventHandler = (file: File, error: string) => boolean;
+export type FileInputItemTemplateHandler = (options: FileInputItemOptions) => NoseurElement;
+export type FileInputFixtureTemplateHandler = (options: FileInputFixtureOptions) => NoseurElement;
+export type FileInputMountHandler = (onSelect?: (e?: any) => void, onDrop?: React.DragEventHandler<any>, onDragOver?: React.DragEventHandler<any>) => void;
+export type FileInputEmptyTemplateHandler = (onSelect?: (e?: any) => void, onDrop?: React.DragEventHandler<any>, onDragOver?: React.DragEventHandler<any>) => NoseurElement;
+export type FileInputAttributesRelays = {
+    control?: {
+        alignment?: Alignment;
+    } & ComponentElementBasicAttributes;
+    previews?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    preview?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+};
+export interface FileInputManageRef extends BareInputManageRef<File> {
+    files: () => File[];
+    resolve: () => void;
+    select: (e?: Event) => void;
+    changeFiles: (files: File[]) => void;
+}
+export interface FileInputProps extends ComponentBaseProps<HTMLInputElement, FileInputManageRef, FileInputAttributesRelays> {
+    accepts: string;
+    rounded: boolean;
+    multiple: boolean;
+    selectOnly: boolean;
+    maxFileSize: number;
+    mode: FileInputMode;
+    defaultFiles: File[];
+    control: NoseurElement;
+    noDragAndDrop: boolean;
+    clickToChange: boolean;
+    stickyPreview: boolean;
+    concatNewFile: boolean;
+    orientation: Orientation;
+    controlIsManaged: boolean;
+    previewType: FileInputPreviewType;
+    buttonProps: Partial<ButtonProps>;
+    relayToAttachFileInputOnly: boolean;
+    elementProps: Partial<NoseurObject<any>>;
+    clearControl: Partial<ButtonProps> | NoseurElement;
+    selectControl: Partial<ButtonProps> | NoseurElement;
+    actionControl: Partial<ButtonProps> | NoseurElement;
+    dragAndDropRefOptions: Partial<DragAndDropRefOptions>;
+    dragAndDropRefs: React.MutableRefObject<HTMLElement>[];
+    attachFileInputManageRef: React.RefObject<FileInputManageRef | null>;
+    onMount: FileInputMountHandler;
+    onUnMount: FileInputMountHandler;
+    onDrop: React.DragEventHandler<any>;
+    onAction: FileInputSelectFileHandler;
+    onDragOver: React.DragEventHandler<any>;
+    onRemoveFile: FileInputFileEventHandler;
+    onBeforeDrop: FileInputDragEventHandler;
+    onDragBegin: React.DragEventHandler<any>;
+    validateFile: FileInputValidationHandler;
+    onSelectFiles: FileInputSelectFileHandler;
+    itemTemplate: FileInputItemTemplateHandler;
+    onDragComplete: React.DragEventHandler<any>;
+    onCancelDialog: FileInputDialogEventHandler;
+    emptyTemplate: FileInputEmptyTemplateHandler;
+    onConfirmDialog: FileInputDialogEventHandler;
+    headerTemplate: FileInputFixtureTemplateHandler;
+    footerTemplate: FileInputFixtureTemplateHandler;
+    onValidationFail: FileInputValidationEventHandler;
+}
+export declare const FileInput: ({ ref, ...props }: Partial<FileInputProps>) => React.JSX.Element;
+export interface FileInputPreviewOption {
+    file?: File;
+    alt?: string;
+    url?: string;
+    formattedSize?: string;
+    style?: React.CSSProperties;
+    ref?: React.ForwardedRef<any>;
+    previewType?: FileInputPreviewType;
+    onRemove?: FileInputFileEventHandler;
+    removeButton?: React.ReactElement<ButtonProps, string | React.JSXElementConstructor<ButtonProps>>;
+}
+export declare function fileInputBuildFileInputPreview(options: FileInputPreviewOption): React.JSX.Element;
+export declare function fileInputFileFromUrl(url: string, name?: string, type?: string): File;