@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.20

package/components/numberControl/NumberControl.js

@@ -1,125 +1,113 @@
-import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import NumberInput, { defaultProps, convertNonIntegerToDefault } from '../numberInput/NumberInput';
-const INITIAL_TICK = 700;
-const TICK_TIME = 50;
-const DEFAULT_DIGIT_PRECISION = 3;
-const NumberControl = forwardRef((props, ref) => {
-    const { min = defaultProps.min, max = defaultProps.max, step = defaultProps.step, value, onChange, onValueChanged = () => { }, disabled, bsSize, className, unit, inputAddon, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder } = props, remainingProps = __rest(props, ["min", "max", "step", "value", "onChange", "onValueChanged", "disabled", "bsSize", "className", "unit", "inputAddon", "digitPrecision", "placeholder"]);
-    // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
-    const callback = onChange || onValueChanged;
-    const timeout = useRef();
-    const [isHoldingDownInc, setIsHoldingDownInc] = useState(false);
-    const [isHoldingDownDec, setIsHoldingDownDec] = useState(false);
-    const [internalValue, setInternalValue] = useState(value);
-    const initialTimeout = callback => {
-        clearTimeout(timeout.current);
-        timeout.current = setTimeout(() => {
-            callback();
-        }, INITIAL_TICK);
-    };
-    const recursiveTimeout = callback => {
-        timeout.current = setTimeout(() => {
-            callback();
-        }, TICK_TIME);
-    };
-    // Update internal state if external value has changed
-    useEffect(() => {
-        if (internalValue !== value) {
-            setInternalValue(value);
-        }
-    }, [value]);
-    // Notify external component if internal value has changed
-    useEffect(() => {
-        if (internalValue !== value) {
-            callback(internalValue);
-        }
-    }, [internalValue]);
-    useEffect(() => {
-        // Call increment function for a loop when button is holding down
-        if (isHoldingDownInc && !disabled) {
-            initialTimeout(incrementRecusively);
-        }
-        // Call decrement function for a loop when button is holding down
-        if (isHoldingDownDec && !disabled) {
-            initialTimeout(decrementRecursively);
-        }
-    }, [isHoldingDownInc, isHoldingDownDec]);
-    const incrementInternalValue = () => {
-        setInternalValue(val => {
-            const currentValue = convertNonIntegerToDefault(val);
-            const newValue = Number((currentValue + step).toFixed(digitPrecision));
-            const newValueLimited = newValue <= max ? newValue : val;
-            return newValueLimited;
-        });
-    };
-    const decrementInternalValue = () => {
-        setInternalValue(val => {
-            const currentValue = convertNonIntegerToDefault(val);
-            const newValue = Number((currentValue - step).toFixed(digitPrecision));
-            const newValueLimited = newValue >= min ? newValue : val;
-            return newValueLimited;
-        });
-    };
-    const incrementRecusively = () => {
-        incrementInternalValue();
-        recursiveTimeout(incrementRecusively);
-    };
-    const decrementRecursively = () => {
-        decrementInternalValue();
-        recursiveTimeout(decrementRecursively);
-    };
-    const handleMouseDownOnIncrement = () => {
-        if (disabled) {
-            return;
-        }
-        setIsHoldingDownInc(true);
-        // increment for first click
-        incrementInternalValue();
-    };
-    const handleMouseDownOnDecrement = () => {
-        if (disabled) {
-            return;
-        }
-        setIsHoldingDownDec(true);
-        // decrement for first click
-        decrementInternalValue();
-    };
-    const handleStopHolding = () => {
-        clearTimeout(timeout.current);
-        setIsHoldingDownInc(false);
-        setIsHoldingDownDec(false);
-    };
-    const handleUpdatedNumberInputValue = value => {
-        // Set the internal value when the value of the actual input has changed,
-        // for instance the user has typed in a number manually and to
-        // use this number as base to increase or decrease from.
-        // Ignore empty value in case the user has removed it
-        if (value !== undefined && !(isHoldingDownDec && isHoldingDownInc)) {
-            setInternalValue(Number(value));
-        }
-        callback(value);
-    };
-    const classes = classNames('NumberControl', 'form-group', className);
-    const inputGroupClassNames = classNames('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
-    return (_jsx("div", Object.assign({}, remainingProps, { className: classes }, { children: _jsxs("div", Object.assign({ className: inputGroupClassNames }, { children: [inputAddon && (_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: inputAddon }) }))), _jsx(NumberInput, { ref: ref, min: min, max: max, value: internalValue, step: step, disabled: disabled, onChange: handleUpdatedNumberInputValue, digitPrecision: digitPrecision, placeholder: placeholder }), _jsxs("div", Object.assign({ className: 'input-group-addon' }, { children: [unit && _jsx("div", Object.assign({ className: 'margin-right-5' }, { children: unit })), _jsx("div", Object.assign({ onMouseDown: handleMouseDownOnDecrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'decrement-button', className: 'decrementButton text-color-gray hover-text-color-dark' }, { children: _jsx("div", { className: 'rioglyph rioglyph-minus scale-90' }) })), _jsx("div", Object.assign({ onMouseDown: handleMouseDownOnIncrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'increment-button', className: 'incrementButton text-color-gray hover-text-color-dark margin-left-5' }, { children: _jsx("div", { className: 'rioglyph rioglyph-plus scale-90' }) }))] }))] })) })));
-});
-NumberControl.propTypes = {
-    min: PropTypes.number,
-    max: PropTypes.number,
-    value: PropTypes.number,
-    step: PropTypes.number,
-    disabled: PropTypes.bool,
-    onChange: PropTypes.func,
-    onValueChanged: PropTypes.func,
-    bsSize: PropTypes.string,
-    className: PropTypes.string,
-    unit: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    inputAddon: PropTypes.string,
-    digitPrecision: PropTypes.number,
-    placeholder: PropTypes.string,
-};
-export default NumberControl;
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, forwardRef } from 'react';
+import classNames from 'classnames';
+import NumberInput, { DEFAULT_STEP, DEFAULT_MIN, DEFAULT_MAX, DEFAULT_VALUE, convertNonIntegerToDefault, } from '../numberInput/NumberInput';
+const INITIAL_TICK = 700;
+const TICK_TIME = 50;
+const DEFAULT_DIGIT_PRECISION = 3;
+const NumberControl = forwardRef((props, ref) => {
+    const { id, min = DEFAULT_MIN, max = DEFAULT_MAX, step = DEFAULT_STEP, value, onChange, onValueChanged = () => { }, disabled, bsSize, className, unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder } = props, remainingProps = __rest(props, ["id", "min", "max", "step", "value", "onChange", "onValueChanged", "disabled", "bsSize", "className", "unit", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace", "digitPrecision", "placeholder"]);
+    // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
+    const callback = onChange || onValueChanged;
+    const timeout = useRef(null);
+    const [isHoldingDownInc, setIsHoldingDownInc] = useState(false);
+    const [isHoldingDownDec, setIsHoldingDownDec] = useState(false);
+    const [internalValue, setInternalValue] = useState(value);
+    const initialTimeout = (callbackFn) => {
+        if (timeout.current !== null) {
+            clearTimeout(timeout.current);
+        }
+        timeout.current = setTimeout(() => {
+            callbackFn();
+        }, INITIAL_TICK);
+    };
+    const recursiveTimeout = (callbackFn) => {
+        timeout.current = setTimeout(() => {
+            callbackFn();
+        }, TICK_TIME);
+    };
+    // Update internal state if external value has changed
+    useEffect(() => {
+        if (internalValue !== value) {
+            setInternalValue(value);
+        }
+    }, [value]);
+    // Notify external component if internal value has changed
+    useEffect(() => {
+        if (internalValue !== value) {
+            callback(internalValue);
+        }
+    }, [internalValue]);
+    useEffect(() => {
+        // Call increment function for a loop when button is holding down
+        if (isHoldingDownInc && !disabled) {
+            initialTimeout(incrementRecursively);
+        }
+        // Call decrement function for a loop when button is holding down
+        if (isHoldingDownDec && !disabled) {
+            initialTimeout(decrementRecursively);
+        }
+    }, [isHoldingDownInc, isHoldingDownDec]);
+    const incrementInternalValue = () => {
+        setInternalValue(val => {
+            const currentValue = convertNonIntegerToDefault(val, DEFAULT_VALUE);
+            const newValue = Number((currentValue + step).toFixed(digitPrecision));
+            const newValueLimited = newValue <= max ? newValue : val;
+            return newValueLimited;
+        });
+    };
+    const decrementInternalValue = () => {
+        setInternalValue(val => {
+            const currentValue = convertNonIntegerToDefault(val, DEFAULT_VALUE);
+            const newValue = Number((currentValue - step).toFixed(digitPrecision));
+            const newValueLimited = newValue >= min ? newValue : val;
+            return newValueLimited;
+        });
+    };
+    const incrementRecursively = () => {
+        incrementInternalValue();
+        recursiveTimeout(incrementRecursively);
+    };
+    const decrementRecursively = () => {
+        decrementInternalValue();
+        recursiveTimeout(decrementRecursively);
+    };
+    const handleMouseDownOnIncrement = () => {
+        if (disabled) {
+            return;
+        }
+        setIsHoldingDownInc(true);
+        // increment for first click
+        incrementInternalValue();
+    };
+    const handleMouseDownOnDecrement = () => {
+        if (disabled) {
+            return;
+        }
+        setIsHoldingDownDec(true);
+        // decrement for first click
+        decrementInternalValue();
+    };
+    const handleStopHolding = () => {
+        if (timeout.current !== null) {
+            clearTimeout(timeout.current);
+        }
+        setIsHoldingDownInc(false);
+        setIsHoldingDownDec(false);
+    };
+    const handleUpdatedNumberInputValue = (newValue) => {
+        // Set the internal value when the value of the actual input has changed,
+        // for instance the user has typed in a number manually and to
+        // use this number as base to increase or decrease from.
+        // Ignore empty value in case the user has removed it
+        if (newValue !== undefined && !(isHoldingDownDec && isHoldingDownInc)) {
+            setInternalValue(Number(newValue));
+        }
+        callback(newValue);
+    };
+    const classes = classNames('NumberControl', className);
+    const controls = (_jsxs("div", Object.assign({ className: 'display-flex padding-left-10' }, { children: [_jsx("div", Object.assign({ onMouseDown: handleMouseDownOnDecrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'decrement-button', className: 'decrementButton text-color-gray hover-text-color-dark' }, { children: _jsx("div", { className: 'rioglyph rioglyph-minus scale-90' }) })), _jsx("div", Object.assign({ onMouseDown: handleMouseDownOnIncrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'increment-button', className: 'incrementButton text-color-gray hover-text-color-dark margin-left-5' }, { children: _jsx("div", { className: 'rioglyph rioglyph-plus scale-90' }) }))] })));
+    return (_jsx("div", Object.assign({}, remainingProps, { className: classes }, { children: _jsx(NumberInput, { id: id, ref: ref, min: min, max: max, value: internalValue, step: step, bsSize: bsSize, disabled: disabled, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace, controls: controls, unit: unit, onChange: handleUpdatedNumberInputValue, digitPrecision: digitPrecision, placeholder: placeholder }) })));
+});
+export default NumberControl;

package/components/numberInput/NumberInput.d.ts

@@ -1,10 +1,99 @@
-export namespace defaultProps {
-    export const min: number;
-    export const max: number;
-    export { DEFAULT_STEP as step };
-}
-export function convertNonIntegerToDefault(value: any): any;
-export default NumberInput;
-declare const DEFAULT_STEP: 1;
-declare const NumberInput: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";
+import React from 'react';
+export declare const DEFAULT_VALUE = 0;
+export declare const DEFAULT_STEP = 1;
+export declare const DEFAULT_MIN = 0;
+export declare const DEFAULT_MAX: number;
+export declare const convertNonIntegerToDefault: (value: number | undefined, fallback: number) => number;
+export type NumberInputProps = {
+    /**
+     * A native input id attribute. Passed through as HTML attribute to the input element.
+     */
+    id?: string;
+    /**
+     * The minimum value of the input.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * The maximum value of the input.
+     * @default Number.MAX_VALUE
+     */
+    max?: number;
+    /**
+     * The initial value of the input. Used to control the component from the outside.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * The size of increment or decrement (only works with number type).
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Enables or disabled the input.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback function triggered when the input value changes.
+     *
+     * When the value is removed by the user, the input is kept empty but it
+     * triggers the callback without any value since the user has finished his input.
+     * @param value
+     * @returns
+     */
+    onChange?: (value?: number) => void;
+    /**
+     * Note: "onChange" should replace "onValueChanged" in the future but it's still widely used
+     * @deprecated Please use `onChange`
+     * @param value
+     * @returns
+     */
+    onValueChanged?: (value?: number) => void;
+    /**
+     * Defines the size of the input to be rendered.
+     * @default 'md'
+     */
+    bsSize?: 'sm' | 'md' | 'lg';
+    /**
+     * A unit for this value. This will be shown in a dedicated input addon.
+     */
+    unit?: string | React.ReactNode;
+    /**
+     * A rioglyph icon tio be shown in front of the input.
+     */
+    inputAddon?: string;
+    /**
+     * Input error message.
+     */
+    errorMessage?: string | React.ReactNode;
+    /**
+     * Input warning message.
+     */
+    warningMessage?: string | React.ReactNode;
+    /**
+     * Feedback message width.
+     */
+    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';
+    /**
+     * This prop is used by the NumberControl component to pass on
+     * the +/- spinner controls.
+     * @internal
+     */
+    controls?: React.ReactNode;
+    /**
+     * The input placeholder if no value is given.
+     */
+    placeholder?: string;
+    /**
+     * Number of digits after the comma the value should be fixed to.
+     * @default 3
+     */
+    digitPrecision?: number;
+    /**
+     * Additional classes to be set on the component.
+     */
+    className?: string;
+};
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export default NumberInput;