@progress/kendo-react-inputs 5.6.0-dev.202208251227 → 5.7.0-sig.202208281415

package/src/numerictextbox/NumericTextBox.tsx

@@ -0,0 +1,626 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+
+import {
+    useInternationalization,
+    useLocalization
+} from '@progress/kendo-react-intl';
+import {
+    classNames,
+    guid,
+    getTabIndex,
+    dispatchEvent,
+    createPropsContext,
+    usePropsContext,
+    kendoThemeMaps
+} from '@progress/kendo-react-common';
+import { FloatingLabel } from '@progress/kendo-react-labels';
+import { validatePackage } from '@progress/kendo-react-common';
+import { packageMetadata } from '../package-metadata';
+import { numericIncreaseValue, messages, numericDecreaseValue } from '../messages';
+import { NumericTextBoxProps } from './interfaces/NumericTextBoxProps';
+import { NumericTextBoxChangeEvent } from './interfaces/NumericTextBoxChangeEvent';
+import { NumericTextBoxFocusEvent } from './interfaces/NumericTextBoxFocusEvent';
+import { NumericTextBoxBlurEvent } from './interfaces/NumericTextBoxBlurEvent';
+import { NumericTextBoxState } from './interfaces/NumericTextBoxState';
+import { NumericTextBoxHandle } from './interfaces/NumericTextBoxHandle';
+import { formatValue, sanitizeNumber, rangeValue, increaseValue, decreaseValue, getStateOrPropsValue, getInitialState } from './utils';
+import { Button } from '@progress/kendo-react-buttons';
+
+const VALIDATION_MESSAGE: string = 'Please enter a valid value!';
+
+/**
+ * Represents the PropsContext of the `NumericTextBox` component.
+ * Used for global configuration of all `NumericTextBox` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+export const NumericTextBoxPropsContext = createPropsContext<NumericTextBoxProps>();
+
+/**
+ * Represents the [KendoReact NumericTextBox component]({% slug overview_numerictextbox %}).
+ */
+export const NumericTextBox = React.forwardRef<NumericTextBoxHandle | null, NumericTextBoxProps>((directProps, target) => {
+    validatePackage(packageMetadata);
+
+    const props: any = usePropsContext(NumericTextBoxPropsContext, directProps);
+
+    const calculatedId = React.useMemo(() => guid(), []);
+    const inputId: string = props.id || calculatedId;
+    const intlService = useInternationalization();
+    const localizationService = useLocalization();
+
+    const elementRef = React.useRef<HTMLInputElement>(null);
+    const valueDuringChangeRef = React.useRef<number | null | undefined>();
+
+    const [forceUpdate, setForceUpdate] = React.useState(false);
+    const stateRef = React.useRef<NumericTextBoxState>(getInitialState());
+    const isPasteRef = React.useRef<boolean>(false);
+    const prevLooseValueRef = React.useRef<string | undefined>();
+    const stateValueRef = React.useRef<number | null | undefined>(props.defaultValue);
+
+    const looseValue = formatValue(
+        stateRef.current.focused && !props.disabled ?
+            stateRef.current.currentLooseValue :
+            getStateOrPropsValue(props.value, stateValueRef.current),
+        props.format,
+        intlService
+    );
+
+    prevLooseValueRef.current = looseValue;
+
+    React.useEffect(
+        (): void => {
+            if (elementRef.current && elementRef.current.setCustomValidity) {
+                elementRef.current.setCustomValidity(
+                    validityGetter().valid
+                        ? ''
+                        : props.validationMessage || VALIDATION_MESSAGE
+                );
+            }
+        });
+
+    const focusElement = React.useCallback(
+        () => {
+            if (elementRef.current) {
+                elementRef.current.focus();
+            }
+        },
+        []
+    );
+
+    const valueGetter = React.useCallback(
+        () => {
+            if (valueDuringChangeRef.current !== undefined) {
+                return valueDuringChangeRef.current;
+            } else {
+                return getStateOrPropsValue(props.value, stateValueRef.current);
+            }
+        },
+        [props.value]
+    );
+
+    const nameGetter = React.useCallback(
+        () => {
+            return props.name;
+        },
+        [props.name]
+    );
+
+    const requiredGetter = React.useCallback(
+        () => {
+            return props.required;
+        },
+        [props.required]
+    );
+
+    const validityGetter = React.useCallback(
+        () => {
+            const customError = props.validationMessage !== undefined;
+            const currentValue = valueGetter();
+
+            const valid = props.valid !== undefined ?
+                props.valid :
+                !stateRef.current.valueIsOutOfRange &&
+                (!requiredGetter() || (currentValue !== null && currentValue !== undefined));
+
+            return {
+                customError,
+                valid,
+                valueMissing: currentValue === null || currentValue === undefined
+            };
+        },
+        [props.validationMessage, props.valid, valueGetter, requiredGetter]
+    );
+
+    const validityStylesGetter = React.useCallback(
+        () => {
+            return props.validityStyles;
+        },
+        [props.validityStyles]
+    );
+
+    const propsGetter = React.useCallback(
+        () => {
+            return props;
+        },
+        [props]
+    );
+
+    const getImperativeHandle = React.useCallback(
+        (): NumericTextBoxHandle => {
+            const options = {
+                element: elementRef.current,
+                focus: focusElement
+            };
+
+            Object.defineProperty(options, 'name', { get: nameGetter });
+            Object.defineProperty(options, 'value', { get: valueGetter });
+            Object.defineProperty(options, 'validity', { get: validityGetter });
+            Object.defineProperty(options, 'validityStyles', { get: validityStylesGetter });
+            Object.defineProperty(options, 'required', { get: requiredGetter });
+            Object.defineProperty(options, 'props', { get: propsGetter });
+
+            return options as NumericTextBoxHandle;
+        },
+        [nameGetter, valueGetter, validityGetter, validityStylesGetter, requiredGetter, focusElement, propsGetter]
+    );
+
+    React.useImperativeHandle(target, getImperativeHandle);
+
+    const getCurrentState = React.useCallback(
+        () => {
+            return {
+                eventValue: getStateOrPropsValue(props.value, stateValueRef.current),
+                prevLooseValue: prevLooseValueRef.current,
+                currentLooseValue: elementRef.current!.value,
+
+                selectionStart: elementRef.current!.selectionStart!,
+                selectionEnd: elementRef.current!.selectionEnd!,
+
+                decimalSelect: false,
+                valueIsCorrected: false,
+                valueIsOutOfRange: false,
+                isPaste: isPasteRef.current,
+
+                focused: stateRef.current.focused
+            };
+        },
+        [props.value]
+    );
+
+    const triggerChange = React.useCallback(
+        (event: any, newState: NumericTextBoxState) => {
+            if (props.disabled) {
+                return;
+            }
+
+            valueDuringChangeRef.current = newState.eventValue;
+            stateValueRef.current = newState.eventValue;
+
+            const formattedValue = formatValue(rangeValue(newState.eventValue!, props.min, props.max), props.format, intlService);
+            const rangedValue = rangeValue(intlService.parseNumber(formattedValue, props.format), props.min, props.max);
+
+            if (rangedValue !== newState.eventValue) {
+                newState.valueIsOutOfRange = true;
+                newState.eventValue = rangedValue;
+                stateValueRef.current = rangedValue;
+            }
+
+            const shouldFireEvent = props.value !== newState.eventValue;
+
+            if (shouldFireEvent) {
+                dispatchEvent<any, NumericTextBoxHandle>(
+                    props.onChange,
+                    event,
+                    getImperativeHandle(),
+                    { value: newState.eventValue }
+                );
+            }
+
+            valueDuringChangeRef.current = undefined;
+
+            stateRef.current = newState;
+            setForceUpdate(_x => !_x);
+        },
+        [props.value, props.onChange, props.disabled, setForceUpdate, getImperativeHandle]
+    );
+
+    const onChangeHandler: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(
+        (event) => {
+            const stateCandidate: NumericTextBoxState = getCurrentState();
+
+            isPasteRef.current = false;
+
+            triggerChange(event, sanitizeNumber(stateCandidate, props.format, intlService));
+        },
+        [props.format, props.onChange, intlService, triggerChange, getCurrentState]
+    );
+
+    const onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = React.useCallback(
+        (event) => {
+            let newState: NumericTextBoxState = getCurrentState();
+
+            const currentValue = intlService.parseNumber(String(newState.currentLooseValue), props.format);
+
+            // Select All
+            if (newState.selectionEnd! > newState.selectionStart! &&
+                newState.selectionEnd! - newState.selectionStart! === String(newState.currentLooseValue).length
+            ) {
+                isPasteRef.current = true;
+                return;
+            }
+
+            switch (event.keyCode) {
+                case 38:
+                // Arrow up
+                    increaseValue(
+                        currentValue,
+                        newState,
+                        props.step,
+                        props.min,
+                        props.max,
+                        props.format,
+                        intlService
+                    );
+
+                    break;
+                case 40:
+                // Arrow down
+                    decreaseValue(
+                        currentValue,
+                        newState,
+                        props.step,
+                        props.min,
+                        props.max,
+                        props.format,
+                        intlService
+                    );
+
+                    break;
+                case 13:
+                // Enter - range values
+                    if (props.rangeOnEnter === false) {
+                        return;
+                    }
+
+                    const formattedValue = formatValue(rangeValue(currentValue, props.min, props.max), props.format, intlService);
+                    const rangedValue = rangeValue(intlService.parseNumber(formattedValue, props.format), props.min, props.max);
+
+                    newState.eventValue = rangedValue;
+                    newState.currentLooseValue = formatValue(rangedValue, props.format, intlService);
+                    newState.selectionStart = newState.selectionEnd = newState.currentLooseValue.length;
+
+                    break;
+                case 110:
+                // Numpad decimal key
+                    const element = elementRef.current;
+                    const symbols = intlService.numberSymbols();
+
+                    if (element) {
+                        newState.currentLooseValue = newState.currentLooseValue!.slice(0, newState.selectionStart!) +
+                            symbols.decimal +
+                            newState.currentLooseValue!.slice(newState.selectionEnd!);
+                        newState.selectionStart = newState.selectionEnd = newState.selectionStart! + 1;
+
+                        newState = sanitizeNumber(newState, props.format, intlService);
+                    }
+                    break;
+                default:
+                    return;
+            }
+
+            event.preventDefault();
+
+            triggerChange(event, newState);
+        },
+        [props.format, props.min, props.max, props.step, props.onChange, props.rangeOnEnter, triggerChange, getCurrentState]
+    );
+
+    const onPasteHandler = React.useCallback(
+        () => {
+            isPasteRef.current = true;
+        },
+        []
+    );
+
+    const onIncrease = React.useCallback(
+        (event: any) => {
+            if (
+                props.readOnly ||
+                props.disabled
+            ) {
+                return;
+            }
+
+            const newState: NumericTextBoxState = getCurrentState();
+
+            increaseValue(
+                intlService.parseNumber(String(newState.currentLooseValue), props.format),
+                newState,
+                props.step,
+                props.min,
+                props.max,
+                props.format,
+                intlService
+            );
+
+            triggerChange(event, newState);
+        },
+        [props.format, props.min, props.max, props.step, props.onChange, props.readOnly, props.disabled, triggerChange, getCurrentState]
+    );
+
+    const onDecrease = React.useCallback(
+        (event: any) => {
+            if (
+                props.readOnly ||
+                props.disabled
+            ) {
+                return;
+            }
+
+            const newState: NumericTextBoxState = getCurrentState();
+
+            decreaseValue(
+                intlService.parseNumber(String(newState.currentLooseValue), props.format),
+                newState,
+                props.step,
+                props.min,
+                props.max,
+                props.format,
+                intlService
+            );
+
+            triggerChange(event, newState);
+        },
+        [props.format, props.min, props.max, props.step, props.onChange, props.readOnly, props.disabled, triggerChange, getCurrentState]
+    );
+
+    const onWheelHandler = React.useCallback(
+        (event: any) => {
+            if (
+                !document ||
+                document.activeElement !== elementRef.current ||
+                !elementRef.current ||
+                props.readOnly ||
+                props.disabled
+            ) {
+                return;
+            }
+
+            if (event.nativeEvent.deltaY < 0) {
+                onIncrease(event);
+            }
+            if (event.nativeEvent.deltaY > 0) {
+                onDecrease(event);
+            }
+        },
+        [onIncrease, onDecrease, props.disabled, props.readOnly]
+    );
+
+    const onFocus = React.useCallback(
+        (event: any) => {
+            stateRef.current.currentLooseValue = prevLooseValueRef.current;
+            stateRef.current.focused = true;
+
+            dispatchEvent<any, NumericTextBoxHandle>(
+                props.onFocus,
+                event,
+                getImperativeHandle(),
+                {}
+            );
+
+            setForceUpdate(x => !x);
+        },
+        [props.onFocus, setForceUpdate, getImperativeHandle]
+    );
+
+    const onBlur = React.useCallback(
+        (event: any) => {
+            stateRef.current = getInitialState();
+
+            dispatchEvent<any, NumericTextBoxHandle>(
+                props.onBlur,
+                event,
+                getImperativeHandle(),
+                {}
+            );
+
+            setForceUpdate(x => !x);
+        },
+        [props.onBlur, setForceUpdate, getImperativeHandle]
+    );
+
+    const onMouseDown = React.useCallback(
+        (e: React.MouseEvent<HTMLSpanElement>) => {
+            if (document && elementRef.current) {
+                e.preventDefault();
+                if (document.activeElement !== elementRef.current) {
+                    elementRef.current.focus();
+                }
+            }
+        },
+        []
+    );
+
+    React.useLayoutEffect(
+        () => {
+            if (elementRef.current && stateRef.current.selectionStart !== undefined && stateRef.current.selectionEnd !== undefined) {
+
+                elementRef.current.selectionStart = stateRef.current.selectionStart;
+                elementRef.current.selectionEnd = stateRef.current.selectionEnd;
+
+                stateRef.current.selectionStart = undefined;
+                stateRef.current.selectionEnd = undefined;
+            }
+        },
+        [forceUpdate]
+    );
+
+    const isValid = !validityStylesGetter() || validityGetter().valid;
+
+    const numerictextbox = (
+      <span
+        dir={props.dir}
+        style={!props.label
+                ? { width: props.width, ...props.style }
+                : props.style}
+        className={classNames(
+            'k-input',
+            'k-numerictextbox',
+            {
+                [`k-input-${kendoThemeMaps.sizeMap[props.size!] || props.size}`]: props.size,
+                [`k-input-${props.fillMode}`]: props.fillMode,
+                [`k-rounded-${kendoThemeMaps.roundedMap[props.rounded!] || props.rounded}`]: props.rounded,
+                'k-invalid': !isValid,
+                'k-required': props.required,
+                'k-disabled': props.disabled
+            },
+            props.className
+        )}
+        aria-disabled={props.disabled ? 'true' : undefined}
+      >
+        <input
+          value={looseValue === null ? '' : looseValue}
+          tabIndex={getTabIndex(props.tabIndex, props.disabled)}
+          accessKey={props.accessKey}
+          disabled={props.disabled}
+          title={props.title}
+          aria-valuemin={props.min}
+          aria-valuemax={props.max}
+          aria-label={props.ariaLabel}
+          aria-labelledby={props.ariaLabelledBy}
+          aria-describedby={props.ariaDescribedBy}
+          placeholder={props.placeholder}
+          spellCheck={false}
+          autoComplete={'off'}
+          autoCorrect={'off'}
+          type={props.inputType || 'tel'}
+          className={'k-input-inner'}
+          id={inputId}
+          name={props.name}
+          readOnly={props.readOnly}
+          style={props.inputStyle}
+
+          onChange={onChangeHandler}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onKeyDown={onKeyDown}
+          onPaste={onPasteHandler}
+          onWheel={onWheelHandler}
+
+          ref={elementRef}
+        />
+        {props.children}
+        {props.spinners &&
+            (
+            <span
+              className="k-input-spinner k-spin-button"
+              onMouseDown={onMouseDown}
+            >
+              <Button
+                tabIndex={-1}
+                type="button"
+                icon={'arrow-n'}
+                rounded={null}
+                className="k-spinner-increase"
+                aria-label={localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue])}
+                title={localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue])}
+                onClick={onIncrease}
+              />
+              <Button
+                tabIndex={-1}
+                type="button"
+                icon={'arrow-s'}
+                rounded={null}
+                className="k-spinner-decrease"
+                aria-label={localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue])}
+                title={localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue])}
+                onClick={onDecrease}
+              />
+            </span>
+            )
+        }
+      </span>
+    );
+
+    return props.label
+        ? (
+          <FloatingLabel
+            label={props.label}
+            editorId={inputId}
+            editorValue={looseValue === null ? '' : looseValue}
+            editorValid={isValid}
+            editorDisabled={props.disabled}
+            editorPlaceholder={props.placeholder}
+            children={numerictextbox}
+            style={{ width: props.width }}
+            dir={props.dir}
+            />
+        )
+        : numerictextbox;
+});
+
+(NumericTextBox as React.ComponentType).propTypes = {
+    value: PropTypes.number,
+    defaultValue: PropTypes.number,
+    step: PropTypes.number,
+    format: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+            style: PropTypes.oneOf(['decimal', 'currency', 'percent', 'scientific', 'accounting']),
+            currency: PropTypes.string,
+            currencyDisplay: PropTypes.oneOf(['symbol', 'code', 'name']),
+            useGrouping: PropTypes.bool,
+            minimumIntegerDigits: PropTypes.number,
+            minimumFractionDigits: PropTypes.number,
+            maximumFractionDigits: PropTypes.number
+        })
+    ]),
+    width: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]),
+    tabIndex: PropTypes.number,
+    accessKey: PropTypes.string,
+    title: PropTypes.string,
+    placeholder: PropTypes.string,
+    min: PropTypes.number,
+    max: PropTypes.number,
+    spinners: PropTypes.bool,
+    disabled: PropTypes.bool,
+    readOnly: PropTypes.bool,
+    dir: PropTypes.string,
+    name: PropTypes.string,
+    label: PropTypes.string,
+    validationMessage: PropTypes.string,
+    required: PropTypes.bool,
+    id: PropTypes.string,
+    rangeOnEnter: PropTypes.bool,
+    ariaLabelledBy: PropTypes.string,
+    ariaDescribedBy: PropTypes.string,
+    ariaLabel: PropTypes.string,
+
+    onChange: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    size: PropTypes.oneOf<NumericTextBoxProps['size']>([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf<NumericTextBoxProps['rounded']>([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf<NumericTextBoxProps['fillMode']>([null, 'solid', 'flat', 'outline'])
+};
+
+NumericTextBox.displayName = 'KendoNumericTextBox';
+NumericTextBox.defaultProps = {
+    step: 1,
+    spinners: true,
+    disabled: false,
+    required: false,
+    validityStyles: true,
+    rangeOnEnter: true,
+    onChange: (_: NumericTextBoxChangeEvent) => { return; },
+    onFocus: (_: NumericTextBoxFocusEvent) => { return; },
+    onBlur: (_: NumericTextBoxBlurEvent) => { return; },
+    size: 'medium' as NumericTextBoxProps['size'],
+    rounded: 'medium' as NumericTextBoxProps['rounded'],
+    fillMode: 'solid' as NumericTextBoxProps['fillMode']
+};

package/src/numerictextbox/interfaces/NumericTextBoxBlurEvent.tsx

@@ -0,0 +1,7 @@
+import { BaseEvent } from '@progress/kendo-react-common';
+import { NumericTextBoxHandle } from './NumericTextBoxHandle';
+
+/**
+ * The arguments for the `onBlur` NumericTextBox event.
+ */
+export interface NumericTextBoxBlurEvent extends BaseEvent<NumericTextBoxHandle> {}

package/src/numerictextbox/interfaces/NumericTextBoxChangeEvent.tsx

@@ -0,0 +1,12 @@
+import { BaseEvent } from '@progress/kendo-react-common';
+import { NumericTextBoxHandle } from './NumericTextBoxHandle';
+
+/**
+ * The arguments for the `change` event of the NumericTextBox.
+ */
+export interface NumericTextBoxChangeEvent extends BaseEvent<NumericTextBoxHandle> {
+    /**
+     * The current value of the NumericTextBox.
+     */
+    value: number | null;
+}

package/src/numerictextbox/interfaces/NumericTextBoxFocusEvent.tsx

@@ -0,0 +1,7 @@
+import { BaseEvent } from '@progress/kendo-react-common';
+import { NumericTextBoxHandle } from './NumericTextBoxHandle';
+
+/**
+ * The arguments for the `onFocus` NumericTextBox event.
+ */
+export interface NumericTextBoxFocusEvent extends BaseEvent<NumericTextBoxHandle> {}

package/src/numerictextbox/interfaces/NumericTextBoxHandle.tsx

@@ -0,0 +1,40 @@
+import { FormComponentValidity } from '@progress/kendo-react-common';
+import { NumericTextBoxProps } from './NumericTextBoxProps';
+
+/**
+ * The NumericTextBox ref.
+ */
+export interface NumericTextBoxHandle {
+    /**
+     * The NumericTextBox element.
+     */
+    element: HTMLInputElement | null;
+    /**
+     * Focus the NumericTextBox.
+     */
+    focus: () => void;
+    /**
+     * Gets the `name` property of the NumericTextBox.
+     */
+    name: string | undefined;
+    /**
+     * Gets the value of the NumericTextBox.
+     */
+    value: number | null;
+    /**
+     * Represents the validity state into which the NumericTextBox is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * @hidden
+     */
+    props: NumericTextBoxProps;
+    /**
+     * @hidden
+     */
+    validityStyles: boolean;
+    /**
+     * @hidden
+     */
+    required: boolean;
+}