@rivtn/noseur 1.0.0

package/dist/esm/compose/exotic/ColorSlider.js

@@ -0,0 +1,99 @@
+import "../Composed.css";
+import React from "react";
+import { Classname } from "../../utils/Classname";
+import { ColorHelper } from "../../utils/ColorHelper";
+import { Slider } from "../../form/Slider";
+import { Orientation } from "../../constants/Orientation";
+export const ColorSliderGradient = {
+    TRANSPARENT: "linear-gradient(to top, transparent, var(--primaryColor, #ffffff))",
+    TRANSPARENT_VERTICAL: "linear-gradient(to top, transparent, var(--primaryColor, #ffffff))",
+    TRANSPARENT_HORIZONTAL: "linear-gradient(to left, transparent, var(--primaryColor, #ffffff))",
+    RAINBOW: "linear-gradient(to bottom, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%)",
+    RAINBOW_VERTICAL: "linear-gradient(to bottom, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%)",
+    RAINBOW_HORIZONTAL: "linear-gradient(to right, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%)",
+};
+class ColorSliderComponent extends React.Component {
+    static defaultProps = {
+        hue: "#ff0000",
+        attrsRelay: {},
+        allowedOverflow: 5,
+        primaryColor: "#ffffff",
+        orientation: Orientation.VERTICAL,
+        colorGradient: ColorSliderGradient.RAINBOW,
+    };
+    state = {
+        primaryColor: this.props.primaryColor,
+    };
+    alpha;
+    cachedAttrs = {};
+    hsb;
+    constructor(props) {
+        super(props);
+        this.alpha = 1;
+        this.hsb = ColorHelper.hexToHsb(this.props.hue);
+        this.onChange = this.onChange.bind(this);
+        this.onHandleDrag = this.onHandleDrag.bind(this);
+    }
+    componentDidUpdate(prevProps, _) {
+        if (this.props.primaryColor !== prevProps.primaryColor || this.props.hue !== prevProps.hue) {
+            this.hsb = (this.props.hue !== prevProps.hue ? ColorHelper.hexToHsb(this.props.hue) : this.hsb);
+            this.setState({ primaryColor: this.props.primaryColor });
+        }
+    }
+    onChange(evt) {
+        this.props.onChange && this.props.onChange(evt);
+        const value = evt.value + this.props.allowedOverflow;
+        this.alpha = (value / 100);
+    }
+    async onHandleDrag(evt) {
+        const { event } = evt;
+        setTimeout(() => {
+            let position = (event[this.cachedAttrs.page] !== undefined ? event[this.cachedAttrs.page] : (event.changedTouches !== undefined ? event.changedTouches[0][this.cachedAttrs.page] : 0));
+            const topOrLeft = (this.cachedAttrs.rect[this.cachedAttrs.topLeft] ?? 0) + (window[this.cachedAttrs.scrollXy] ?? document.documentElement[this.cachedAttrs.scrollTl] ?? document.body[this.cachedAttrs.scrollTl] ?? 0);
+            const hsb = ColorHelper.normalizeHsB({
+                s: this.hsb.s,
+                b: this.hsb.b,
+                h: Math.floor((360 * (Math.max(0, Math.min(224, position - topOrLeft)))) / 224),
+            });
+            const eventValue = { color: ColorHelper.hsbToColor(hsb, this.alpha), previousColor: ColorHelper.hsbToColor(this.hsb, this.alpha) };
+            if ((this.props.onSelectColor && this.props.onSelectColor(eventValue) === true))
+                return;
+            this.hsb = hsb;
+        }, 100);
+    }
+    renderRange() {
+        return (React.createElement("div", { className: Classname.build("noseur-color-slider-range", `noseur-color-slider-range-${this.props.orientation}`) }));
+    }
+    render() {
+        const range = this.renderRange();
+        const className = Classname.build("noseur-color-slider", `noseur-color-slider-${this.props.orientation}`, this.props.className, this.props.attrsRelay?.sliderProps?.className);
+        const style = {
+            ...(this.props.style ?? {}),
+            "--primaryColor": this.state.primaryColor,
+            "--noseurSchemeMainColor": this.props.colorGradient,
+            ...(this.props.attrsRelay?.sliderProps?.style ?? {}),
+        };
+        this.props.attrsRelay.sliderProps = {
+            ...(this.props.attrsRelay.sliderProps ?? {}),
+            attrsRelay: {
+                ...(this.props.attrsRelay?.sliderProps?.attrsRelay ?? {}),
+                dragSensorProps: {
+                    ...(this.props.attrsRelay?.sliderProps?.attrsRelay?.dragSensorProps ?? {}),
+                    [this.props.reportOnDrag ? `onDragEvent` : `onDragEventEnd`]: this.onHandleDrag,
+                    allowedOverflow: this.props.allowedOverflow,
+                }
+            }
+        };
+        return (React.createElement(Slider, { ...this.props.attrsRelay.sliderProps, range: range, onChange: this.onChange, orientation: this.props.orientation, id: this.props.id, key: this.props.key, className: className, style: style, ref: (e) => {
+                if (e) {
+                    this.cachedAttrs.rect = e.getBoundingClientRect();
+                    this.cachedAttrs.page = (this.props.orientation === Orientation.HORIZONTAL ? "pageX" : "pageY");
+                    this.cachedAttrs.topLeft = (this.props.orientation === Orientation.HORIZONTAL ? "left" : "top");
+                    this.cachedAttrs.scrollXy = (this.props.orientation === Orientation.HORIZONTAL ? "scrollX" : "scrollY");
+                    this.cachedAttrs.scrollTl = (this.props.orientation === Orientation.HORIZONTAL ? "scrollLeft" : "scrollTop");
+                }
+            } }));
+    }
+    ;
+}
+export const ColorSlider = ({ ref, ...props }) => (React.createElement(ColorSliderComponent, { ...props, forwardRef: ref }));

package/dist/esm/compose/form/ComposedPassword.d.ts

@@ -0,0 +1,25 @@
+import "../Composed.css";
+import React from "react";
+import { FormControlProps } from "./FormControl";
+import { ComponentBaseProps } from "../../core/ComponentBaseProps";
+import { NoseurElement, NumberRange, ToggleIcons } from "../../constants/Types";
+import { InputOnInputCompleteHandler, InputProps } from "../../form/Input";
+import { ProgressBarProps } from "../../misc/ProgressBar";
+export type ComposedPasswordEventHandler = () => void;
+export type ComposedPasswordStrengthHandler = (value: string) => NumberRange<0, 100>;
+export interface ComposedPasswordProps extends ComponentBaseProps<HTMLDivElement> {
+    hidden: boolean;
+    toggleMask: boolean;
+    borderless: boolean;
+    toggleIcons: ToggleIcons;
+    inputProps: Partial<InputProps>;
+    progressProps: Partial<ProgressBarProps>;
+    strengthIndicator: boolean | NoseurElement;
+    formControlProps: Partial<FormControlProps>;
+    onShow: ComposedPasswordEventHandler;
+    onHide: ComposedPasswordEventHandler;
+    strengthComputer: ComposedPasswordStrengthHandler;
+    onInputComplete: InputOnInputCompleteHandler | undefined;
+}
+export declare const ComposedPassword: ({ ref, ...props }: Partial<ComposedPasswordProps>) => React.JSX.Element;
+export declare function composedPasswordDefaultStrengthComputer(value: string): NumberRange<0, 100>;

package/dist/esm/compose/form/ComposedPassword.js

@@ -0,0 +1,103 @@
+import "../Composed.css";
+import React from "react";
+import { Classname } from "../../utils/Classname";
+import { TypeChecker } from "../../utils/TypeChecker";
+import { MicroBuilder } from "../../utils/MicroBuilder";
+import { ObjectHelper } from "../../utils/ObjectHelper";
+import { FormControl } from "./FormControl";
+import { TextInput } from "../../form/Input";
+import { ProgressBar } from "../../misc/ProgressBar";
+;
+class ComposedPasswordComponent extends React.Component {
+    static defaultProps = {
+        hidden: true,
+        toggleMask: true,
+        inputProps: {},
+        progressProps: {},
+        formControlProps: {},
+        toggleIcons: {
+            show: 'fa fa-eye',
+            hide: 'fa fa-eye-slash'
+        },
+        strengthComputer: composedPasswordDefaultStrengthComputer
+    };
+    state = {
+        hidden: true,
+    };
+    progressBarComponent;
+    constructor(props) {
+        super(props);
+        this.onInput = this.onInput.bind(this);
+        this.onToggle = this.onToggle.bind(this);
+    }
+    onInput(e) {
+        const value = e.target.value;
+        if (this.props.onInput)
+            this.props.onInput(e);
+        if (!TypeChecker.isBoolean(this.props.strengthIndicator) || !this.props.strengthIndicator || !this.progressBarComponent)
+            return;
+        this.progressBarComponent?.setValue(this.props.strengthComputer(value));
+    }
+    onToggle(_) {
+        if (this.state.hidden && this.props.onShow)
+            this.props.onShow();
+        else if (this.props.onHide)
+            this.props.onHide();
+        this.setState({ hidden: !this.state.hidden });
+    }
+    renderToggleIcon() {
+        if (!this.props.toggleMask || !this.props.toggleIcons)
+            return;
+        const icon = this.state.hidden ? this.props.toggleIcons.show : this.props.toggleIcons.hide;
+        return MicroBuilder.buildIcon(icon, { scheme: this.props.scheme, className: "noseur-cursor-pointer" }, {
+            onClick: this.onToggle
+        });
+    }
+    renderStrengthIndictor() {
+        if (!TypeChecker.isBoolean(this.props.strengthIndicator) || !this.props.strengthIndicator)
+            return this.props.strengthIndicator;
+        const cachedSelfRef = this.props.progressProps.manageRef;
+        const progressProps = {
+            ...this.props.progressProps,
+            manageRef: (r) => {
+                this.progressBarComponent = r;
+                ObjectHelper.resolveRef(cachedSelfRef, r);
+            }
+        };
+        return (React.createElement(ProgressBar, { ...progressProps, noLabel: progressProps.noLabel || true, scheme: progressProps.scheme || this.props.scheme }));
+    }
+    render() {
+        const icon = this.renderToggleIcon();
+        const strengthIndicator = this.renderStrengthIndictor();
+        const inputType = (this.state.hidden ? "password" : "text");
+        const className = Classname.build("noseur-composed-password", this.props.className);
+        const onInputComplete = (value) => {
+            this.props.onInputComplete?.(value);
+            this.props.inputProps?.onInputComplete?.(value);
+        };
+        return (React.createElement("div", { className: className, style: this.props.style },
+            React.createElement(FormControl, { ...this.props.formControlProps, rightContent: icon, scheme: this.props.formControlProps.scheme ?? this.props.scheme, borderless: this.props.formControlProps.borderless ?? this.props.borderless },
+                React.createElement(TextInput, { ...this.props.inputProps, type: inputType, id: this.props.id, name: this.props.name, onInputComplete: onInputComplete, noStyle: this.props.inputProps.noStyle || true, scheme: this.props.inputProps.scheme || this.props.scheme, onInput: this.onInput })),
+            strengthIndicator));
+    }
+}
+export const ComposedPassword = ({ ref, ...props }) => (React.createElement(ComposedPasswordComponent, { ...props, forwardRef: ref }));
+// 20% symbol
+// 20% number
+// 20% lowercase
+// 20% uppercase
+// 20% less than 6 char long
+export function composedPasswordDefaultStrengthComputer(value) {
+    let progressValue = 100;
+    if (value.length < 6)
+        progressValue -= 20;
+    if (!(/\d/.test(value)))
+        progressValue -= 20;
+    if (!(/[a-z]/.test(value)))
+        progressValue -= 20;
+    if (!(/[A-Z]/.test(value)))
+        progressValue -= 20;
+    if (!(/[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(value)))
+        progressValue -= 20;
+    return progressValue;
+}

package/dist/esm/compose/form/DateTimeInput.d.ts

@@ -0,0 +1,28 @@
+import "../Composed.css";
+import React from 'react';
+import { BareInputManageRef, InputProps } from "../../form/Input";
+import { DateTimePickerProps } from "./DateTimePicker";
+import { FormControlProps } from "./FormControl";
+export interface DateTimeInputManageRef extends BareInputManageRef<string> {
+}
+export interface DateTimeInputProps extends DateTimePickerProps<HTMLInputElement, DateTimeInputManageRef> {
+    fill: boolean;
+    leftContent: any;
+    rightContent: any;
+    separator: string;
+    editable: boolean;
+    highlight: boolean;
+    borderless: boolean;
+    placeholder: string;
+    value: Date | Date[];
+    textInputProps: Partial<InputProps>;
+    formControlProps: Partial<FormControlProps>;
+    dateTimePickerProps: Partial<DateTimePickerProps>;
+    textInputRef: React.ForwardedRef<HTMLInputElement>;
+    formatDate: (date: Date, locale?: string, dateFormat?: Intl.DateTimeFormatOptions) => string;
+}
+export declare const DateTimeInput: ({ ref, ...props }: Partial<DateTimeInputProps>) => React.JSX.Element;
+export declare const YearInput: ({ ref, ...props }: Partial<DateTimeInputProps>) => React.JSX.Element;
+export declare const MonthInput: ({ ref, ...props }: Partial<DateTimeInputProps>) => React.JSX.Element;
+export declare const DateInput: ({ ref, ...props }: Partial<DateTimeInputProps>) => React.JSX.Element;
+export declare const TimeInput: ({ ref, ...props }: Partial<DateTimeInputProps>) => React.JSX.Element;

package/dist/esm/compose/form/DateTimeInput.js

@@ -0,0 +1,154 @@
+import "../Composed.css";
+import React from 'react';
+import { TextInput } from "../../form/Input";
+import { DateTimePicker, DateTimePickerDefaultProps, DateTimePickerLayoutElement, DateTimePickerLayout, DateTimePickerMode, DateTimePickerSelectionMode } from "./DateTimePicker";
+import { FormControl } from "./FormControl";
+import { Classname } from "../../utils/Classname";
+import { ObjectHelper } from "../../utils/ObjectHelper";
+import { BoolHelper } from "../../utils/BoolHelper";
+import { ComponentRenderType } from "../../core/ComponentBaseProps";
+class DateTimeInputComponent extends React.Component {
+    static defaultProps = {
+        ...DateTimePickerDefaultProps,
+        separator: " - ",
+        formControlProps: {},
+        dateFormat: undefined,
+    };
+    state = {
+        selectedDates: (this.props.value instanceof Array ? this.props.value : (this.props.value ? [this.props.value] : this.props.selectedDates)),
+    };
+    compoundElement;
+    internalTextInputElement;
+    dateTimePickerManageRef;
+    constructor(props) {
+        super(props);
+        this.onIncreaseOrDecrease = this.onIncreaseOrDecrease.bind(this);
+        this.toggleDateTimePicker = this.toggleDateTimePicker.bind(this);
+    }
+    componentDidMount() {
+        ObjectHelper.resolveManageRef(this, {
+            clear: () => this.dateTimePickerManageRef?.clear(),
+            value: () => {
+                return this.dateTimePickerManageRef?.formattedValue();
+            },
+            setValue: (value) => {
+                this.setState({ selectedDates: (typeof value === "string" ? [new Date(value)] : value.map((v) => new Date(v))) });
+            },
+        });
+    }
+    componentWillUnmount() {
+        ObjectHelper.resolveManageRef(this, null);
+    }
+    toggleDateTimePicker(e) {
+        e.stopPropagation();
+        this.dateTimePickerManageRef?.toggle(e);
+    }
+    formatDateInputValue(date) {
+        if (this.props.formatDate)
+            return this.props.formatDate(date, this.props.locale, this.props.dateFormat);
+        return date.toLocaleString(this.props.locale, this.props.dateFormat);
+    }
+    getFineDateValue(selectedDates) {
+        if (!selectedDates.length)
+            return "";
+        switch (this.props.selectionMode) {
+            case DateTimePickerSelectionMode.SINGLE:
+                return this.formatDateInputValue(selectedDates[0]);
+            case DateTimePickerSelectionMode.MULTIPLE:
+                return selectedDates.map((selectedDate) => this.formatDateInputValue(selectedDate)).join(this.props.separator);
+            case DateTimePickerSelectionMode.RANGE:
+                return selectedDates.slice(0, 2).map((selectedDate) => this.formatDateInputValue(selectedDate)).join(this.props.separator);
+        }
+    }
+    onIncreaseOrDecrease(activeDate, layoutElement) {
+        if (!this.dateTimePickerManageRef || !(BoolHelper.equalsAny(layoutElement, [
+            DateTimePickerLayoutElement.HourElement,
+            DateTimePickerLayoutElement.MinutesElement,
+            DateTimePickerLayoutElement.SecondsElement,
+            DateTimePickerLayoutElement.MeridianElement,
+        ])))
+            return;
+        this.setState({ selectedDates: [activeDate] });
+    }
+    renderInput() {
+        let defaultValue = this.getFineDateValue(this.state.selectedDates ?? []);
+        const inputProps = {
+            defaultValue,
+            noStyle: true,
+            borderless: true,
+            id: this.props.id,
+            fill: this.props.fill,
+            scheme: this.props.scheme,
+            onInput: this.props.onInput,
+            ...this.props.textInputProps,
+            disabled: this.props.disabled,
+            readOnly: !this.props.editable,
+            highlight: this.props.highlight,
+            placeholder: this.props.placeholder,
+            style: { ...(this.props.style || {}) },
+            ref: (el) => {
+                if (!el)
+                    return;
+                this.internalTextInputElement = el;
+                ObjectHelper.resolveRef(this.props.textInputRef, el);
+            },
+            className: Classname.build('noseur-date-time-input-inputtext', {
+                'noseur-cursor-pointer': !this.props.editable,
+            }, (this.props.textInputProps ?? {}).className, this.props.className),
+        };
+        if (!this.props.editable) {
+            inputProps.style.cursor = "pointer";
+        }
+        if (this.internalTextInputElement && this.internalTextInputElement.value !== defaultValue) {
+            this.internalTextInputElement.value = defaultValue;
+        }
+        return (React.createElement(TextInput, { ...inputProps, onClick: this.toggleDateTimePicker }));
+    }
+    renderDateTimePicker() {
+        const className = Classname.build("noseur-date-time-input-date-time-picker", this.props.dateTimePickerProps);
+        const cachedOnClear = this.props.onClear;
+        const cachedOnIncrease = this.props.onIncrease;
+        const cachedOnDecrease = this.props.onDecrease;
+        const cachedOnSelectDate = this.props.onSelectDate;
+        const onSelectDate = (options) => {
+            if (!options.selectedDate)
+                return;
+            cachedOnSelectDate?.(options);
+            this.setState({ selectedDates: options.selectedDates });
+        };
+        const onClear = () => {
+            cachedOnClear && cachedOnClear();
+            this.internalTextInputElement.value = "";
+        };
+        const onIncrease = (activeDate, layoutElement) => {
+            this.onIncreaseOrDecrease(activeDate, layoutElement);
+            cachedOnIncrease && cachedOnIncrease(activeDate, layoutElement);
+        };
+        const onDecrease = (activeDate, layoutElement) => {
+            this.onIncreaseOrDecrease(activeDate, layoutElement);
+            cachedOnDecrease && cachedOnDecrease(activeDate, layoutElement);
+        };
+        return (React.createElement(DateTimePicker, { ...this.props, manageRef: (m) => this.dateTimePickerManageRef = m, type: ComponentRenderType.POPOVER, className: className, onClear: onClear, onIncrease: onIncrease, onDecrease: onDecrease, onSelectDate: onSelectDate, selectedDates: this.state.selectedDates, id: this.props.dateTimePickerProps?.id, style: this.props.dateTimePickerProps?.style, popoverProps: { pointingArrowClassName: "" } }));
+    }
+    render() {
+        const input = this.renderInput();
+        const dateTimePIcker = this.renderDateTimePicker();
+        const formControlProps = (this.props.formControlProps || {});
+        const className = Classname.build('noseur-date-time-input', this.props.formControlProps?.className, { "noseur-disabled": this.props.disabled });
+        return (React.createElement(React.Fragment, null,
+            React.createElement(FormControl, { ...formControlProps, className: className, fill: this.props.fill, contentStyle: { width: "initial", ...(formControlProps.style || {}) }, borderless: this.props.borderless, leftContent: this.props.leftContent || this.props.formControlProps.leftContent, scheme: this.props.scheme || formControlProps.scheme, ref: (r) => this.compoundElement = r, rightContent: this.props.rightContent || this.props.formControlProps.rightContent, onClick: this.toggleDateTimePicker }, input),
+            dateTimePIcker));
+    }
+}
+export const DateTimeInput = ({ ref, ...props }) => (React.createElement(DateTimeInputComponent, { ...props, dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: !props.hourFormat || props.hourFormat === "12" }, showTime: true, forwardRef: ref }));
+export const YearInput = ({ ref, ...props }) => (React.createElement(DateTimeInputComponent, { forwardRef: ref, dateFormat: { year: 'numeric' }, ...props, showTime: false, mode: DateTimePickerMode.YEAR }));
+export const MonthInput = ({ ref, ...props }) => (React.createElement(DateTimeInputComponent, { forwardRef: ref, dateFormat: { month: 'long' }, ...props, showTime: false, mode: DateTimePickerMode.MONTH }));
+export const DateInput = ({ ref, ...props }) => (React.createElement(DateTimeInputComponent, { forwardRef: ref, dateFormat: { day: '2-digit', month: '2-digit', year: 'numeric' }, ...props, showTime: false }));
+export const TimeInput = ({ ref, ...props }) => {
+    const hourFormat12 = !props.hourFormat || props.hourFormat === "12";
+    const dateFormat = { hour: '2-digit', minute: '2-digit', hour12: hourFormat12 };
+    const timeLayout = props.timeLayout || hourFormat12 ? props.timeLayout : DateTimePickerLayout.TIME_LAYOUT_WITHOUT_MERIDIAN;
+    return (React.createElement(DateTimeInputComponent, { ...props, forwardRef: ref, showTime: true, timeOnly: true, timeLayout: timeLayout, dateFormat: dateFormat, layout: DateTimePickerLayoutElement.TimeElement, attrsRelay: {
+            popover: { pointingArrowClassName: "", ...(props?.attrsRelay?.popover ?? {}) }
+        } }));
+};