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

package/src/range-slider/RangeSlider.tsx

@@ -0,0 +1,644 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+
+import {
+    FormComponentProps,
+    classNames,
+    Keys,
+    useDir,
+    useDraggable,
+    DraggableDragEvent,
+    getTabIndex,
+    createPropsContext,
+    usePropsContext
+} from '@progress/kendo-react-common';
+
+import { messages, sliderDragTitle } from './../messages';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { Direction } from '../interfaces/Direction';
+import { rangeReducer, RANGE_ACTION, RangeActionDispatch } from './range-raducer';
+import { validatePackage } from '@progress/kendo-react-common';
+import { packageMetadata } from '../package-metadata';
+
+/**
+ * The range object representing the value of the RangeSlider.
+ */
+export type Range = {
+    /**
+     * The start of the range.
+     */
+    start: number;
+    /**
+     * The end of the range.
+     */
+    end: number;
+};
+
+/**
+ * Represents the properties of [RangeSlider](% slug api_inputs_rangeslider %) component.
+ */
+export interface RangeSliderProps extends FormComponentProps {
+    /**
+     * Sets the `id` property of the top div element of the RangeSlider.
+     */
+    id?: string;
+    /**
+     * Sets additional CSS styles to the RangeSlider.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional classes to the RangeSlider.
+     */
+    className?: string;
+    /**
+     * The flexible values of type Range - `start and `end`.
+     */
+    value?: Range;
+    /**
+     * The default set values of type Range - `start` and `end`.
+     */
+    defaultValue?: Range;
+    /**
+     * Triggered after value change - gets outside access to the element, new values and the event type.
+     */
+    onChange?: (event: RangeSliderChangeEvent) => void;
+    /**
+     * Determines the children nodes.
+     */
+    children?: React.ReactNode;
+    /**
+     * The step by which the value is increment/decrement.
+     */
+    step?: number;
+    /**
+     * The minimum possible value of the RangeSlider.
+     */
+    min: number;
+    /**
+     * The maximum possible value of the RangeSlider.
+     */
+    max: number;
+    /**
+     * The RangeSlider orientation if true - vertical, else - horizontal.
+     */
+    vertical?: boolean;
+    /**
+     * Determines the disabled mode of the RangeSlider, if true - disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The RangeSlider direction `ltr` or `rtl`.
+     */
+    dir?: Direction;
+    /**
+     * Sets the `tabIndex` attribute to the `start` drag handle.
+     */
+    startTabIndex?: number;
+    /**
+     * Sets the `tabIndex` attribute to the `end` drag handle.
+     */
+    endTabIndex?: number;
+
+    /* eslint-disable max-len */
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    // tslint:enable:max-line-length
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+}
+
+/**
+ * @hidden
+ */
+const useRange = (
+    defaultValue: Range,
+    args: any,
+    callback: (newState: Range, event: React.SyntheticEvent<any> | DraggableDragEvent) => void
+): [Range, (action: RangeActionDispatch) => void] => {
+    const [state, setState] = React.useState(defaultValue);
+
+    const handleDispatchAction = React.useCallback(
+        (action: RangeActionDispatch) => {
+            const newState = rangeReducer(args.state || state, { ...action, ...args });
+
+            if (callback) {
+                callback(newState, action.event as React.SyntheticEvent<any> | DraggableDragEvent);
+            }
+
+            setState(newState);
+        },
+        [args, callback]
+    );
+
+    return [state, handleDispatchAction];
+};
+
+// const nbsp = String.fromCharCode(160);
+// const dash = String.fromCharCode(45);
+
+/**
+ * Represents the target(element and props) of the RangeSliderChangeEvent.
+ */
+export interface RangeSliderHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the RangeSlider.
+     */
+    props: RangeSliderProps;
+    /**
+     * The focus event callback.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represent the return type of RangeSliderChangeEvent.
+ */
+export interface RangeSliderChangeEvent {
+    /**
+     * The value from type Range - `start` and `end`.
+     */
+    value: Range;
+    /**
+     * The target of the RangeSliderChangeEvent from RangeSliderHandle.
+     */
+    target: RangeSliderHandle;
+    /**
+     * The event of the RangeSliderChangeEvent.
+     */
+    syntheticEvent: React.SyntheticEvent<any> | DraggableDragEvent;
+}
+
+/**
+ * Represents the PropsContext of the `RangeSlider` component.
+ * Used for global configuration of all `RangeSlider` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+export const RangeSliderPropsContext = createPropsContext<RangeSliderProps>();
+
+
+/**
+ * Represents the [KendoReact RangeSlider component]({% slug overview_rangeslider %}).
+ *
+ * Accepts properties of type [RangeSliderProps]({% slug api_inputs_rangesliderprops %}).
+ * Obtaining the `ref` returns an object of type [RangeSliderHandle]({% slug api_inputs_rangesliderhandle %}).
+ */
+export const RangeSlider = React.forwardRef<RangeSliderHandle | null, RangeSliderProps>((directProps, ref) => {
+    validatePackage(packageMetadata);
+
+    const props = usePropsContext<RangeSliderProps>(RangeSliderPropsContext, directProps);
+
+    const target = React.useRef<RangeSliderHandle | null>(null);
+    const sliderRef = React.useRef<HTMLDivElement>(null);
+    const sliderSelectionRef = React.useRef<HTMLDivElement>(null);
+    const startHandle = React.useRef<HTMLAnchorElement>(null);
+    const endHandle = React.useRef<HTMLAnchorElement>(null);
+
+    const focus = React.useCallback(
+        () => {
+            if (startHandle.current) {
+                startHandle.current.focus();
+            }
+        },
+        [startHandle]
+    );
+
+    React.useImperativeHandle(target, () => ({
+        element: sliderRef.current,
+        focus,
+        props
+    }));
+
+    React.useImperativeHandle<RangeSliderHandle | null, RangeSliderHandle | null>(ref, () => target.current);
+
+    const min = React.useMemo(
+        () => props.min,
+        [props.min]
+    );
+
+    const max = React.useMemo(
+        () => props.max,
+        [props.max]
+    );
+
+    const step = React.useMemo(
+        () => props.step !== undefined ? props.step : defaultProps.step,
+        [props.step, defaultProps.step]
+    );
+
+    const dir = useDir(sliderRef, props.dir);
+
+    const handleChange = (newValue: any, event: React.SyntheticEvent<any> | DraggableDragEvent) => {
+        if (props.onChange && target.current) {
+            props.onChange.call(undefined, {
+                value: newValue,
+                target: target.current,
+                syntheticEvent: event
+            });
+        }
+    };
+    const [currentDrag, setCurrentDrag] = React.useState('');
+
+    const [stateValue, dispatchStateValue] = useRange(
+        props.defaultValue || defaultProps.defaultValue,
+        {
+            min,
+            max,
+            step,
+            state: props.value
+        },
+        handleChange
+    );
+
+    const value: Range = React.useMemo(
+        () => props.value || stateValue,
+        [props.value, stateValue]
+    );
+
+    const sliderTrackRef = React.useRef<HTMLDivElement>(null);
+    const sliderTrackWrapRef = React.useRef<HTMLDivElement>(null);
+
+    const percentStart = React.useMemo(
+        () => ((value.start - min) / (max - min)) * 100,
+        [value.start, min, max]
+    );
+
+    const percentEnd = React.useMemo(
+        () => ((value.end - min) / (max - min)) * 100,
+        [value.end, min, max]
+    );
+
+    const sliderItemsStyle: React.CSSProperties = React.useMemo(
+        () => props.vertical ? { paddingTop: 0, height: '100%' } : {},
+        [props.vertical]
+    );
+
+    const trackStyles: React.CSSProperties = React.useMemo(
+        () => props.vertical
+            ? { marginTop: '0.5rem', marginBottom: '0.5rem' }
+            : { marginLeft: '0.5rem', marginRight: '0.5rem' },
+        [props.vertical]
+    );
+
+    const localization = useLocalization();
+
+    const calcNewDistance = React.useCallback(
+        (event: any) => {
+            if (!sliderTrackWrapRef.current) { return; }
+
+            const computed = sliderTrackWrapRef.current.getBoundingClientRect();
+            const distance = props.vertical
+                ? (computed.bottom - event.clientY)
+                : dir === 'rtl'
+                    ? (computed.right - event.clientX)
+                    : (event.clientX - computed.left);
+
+            const size = props.vertical ? computed.height : computed.width;
+            const percentage = (distance / size);
+            const payload = (min + percentage * (max - min));
+
+            return payload;
+        },
+        [
+            sliderTrackWrapRef,
+            props.vertical,
+            dir,
+            min,
+            max,
+            stateValue.start,
+            stateValue.end,
+            props.value && props.value.start,
+            props.value && props.value.end
+        ]);
+
+    const calcKey = React.useCallback(
+        (payload: any) => {
+            if (payload <= value.start) {
+                return 'start';
+            }
+            if (payload >= value.end) {
+                return 'end';
+            }
+            return (2 * payload < value.end + value.start) ? 'start' : 'end';
+        },
+        [
+            stateValue.start, stateValue.end,
+            props.value && props.value.start,
+            props.value && props.value.end
+        ]);
+
+    const handleStartKeyDown = React.useCallback(
+        (event: React.KeyboardEvent<HTMLAnchorElement>) => {
+            switch (event.keyCode) {
+                case Keys.right:
+                    event.preventDefault();
+                    dispatchStateValue({ type: dir === 'rtl' ? RANGE_ACTION.decrease : RANGE_ACTION.increase, key: 'start', event });
+                    break;
+                case Keys.up:
+                    event.preventDefault();
+                    dispatchStateValue({ type: RANGE_ACTION.increase, key: 'start', event });
+                    break;
+                case Keys.left:
+                    event.preventDefault();
+                    dispatchStateValue({ type: dir === 'rtl' ? RANGE_ACTION.increase : RANGE_ACTION.decrease, key: 'start', event });
+                    break;
+                case Keys.down:
+                    event.preventDefault();
+                    dispatchStateValue({ type: RANGE_ACTION.decrease, key: 'start', event });
+                    break;
+                case Keys.home:
+                    event.preventDefault();
+                    dispatchStateValue({ type: RANGE_ACTION.min, key: 'start', event });
+                    break;
+                case Keys.end:
+                    event.preventDefault();
+                    dispatchStateValue({ type: RANGE_ACTION.max, key: 'start', event });
+                    break;
+                default:
+                    break;
+            }
+        },
+        [dispatchStateValue]
+    );
+
+    const handleEndKeyDown = React.useCallback(
+        (event: React.KeyboardEvent<HTMLAnchorElement>) => {
+            switch (event.keyCode) {
+                case Keys.right:
+                    event.preventDefault();
+                    dispatchStateValue({ type: dir === 'rtl' ? RANGE_ACTION.decrease : RANGE_ACTION.increase, key: 'end', event });
+                    break;
+                case Keys.up:
+                    event.preventDefault();
+                    dispatchStateValue({ type: RANGE_ACTION.increase, key: 'end', event });
+                    break;
+                case Keys.left:
+                    event.preventDefault();
+                    dispatchStateValue({ type: dir === 'rtl' ? RANGE_ACTION.increase : RANGE_ACTION.decrease, key: 'end', event });
+                    break;
+                case Keys.down:
+                    event.preventDefault();
+                    dispatchStateValue({ type: RANGE_ACTION.decrease, key: 'end', event });
+                    break;
+                case Keys.home:
+                    event.preventDefault();
+                    dispatchStateValue({ type: RANGE_ACTION.min, key: 'end', event });
+                    break;
+                case Keys.end:
+                    event.preventDefault();
+                    dispatchStateValue({ type: RANGE_ACTION.max, key: 'end', event });
+                    break;
+                default:
+                    break;
+            }
+        },
+        [dispatchStateValue, dir]
+    );
+
+    const handleTrackPress = React.useCallback(
+        (event: any) => {
+            const payload = calcNewDistance(event);
+            const key = calcKey(payload);
+            setCurrentDrag(key);
+
+            key === 'end' ? endHandle.current!.focus() : startHandle.current!.focus();
+            const action = (key === 'end' ? RANGE_ACTION.end : RANGE_ACTION.start);
+            dispatchStateValue({ type: action, payload, event });
+        },
+        [props.vertical, min, max, dispatchStateValue]
+    );
+
+    const handleTrackDrag = (event: any) => {
+        const payload = calcNewDistance(event);
+        const action = currentDrag === 'end' ? RANGE_ACTION.end : RANGE_ACTION.start;
+
+        dispatchStateValue({ type: action, payload, event });
+    };
+
+    const handleTrackRelease = (event: any) => {
+        const payload = calcNewDistance(event);
+        const action = currentDrag === 'end' ? RANGE_ACTION.end : RANGE_ACTION.start;
+        dispatchStateValue({ type: action, payload, event });
+
+        setCurrentDrag('');
+    };
+
+    useDraggable(sliderTrackWrapRef, { onPress: handleTrackPress, onDrag: handleTrackDrag, onRelease: handleTrackRelease });
+
+    return (
+      <div
+        id={props.id}
+        style={props.style}
+        ref={sliderRef}
+        dir={dir}
+        className={classNames(
+                'k-widget k-slider',
+                {
+                    'k-rtl': dir === 'rtl',
+                    'k-disabled': props.disabled,
+                    'k-slider-vertical': props.vertical,
+                    'k-slider-horizontal': !props.vertical
+                },
+                props.className
+            )}
+        // onFocus={onFocus}
+        // onBlur={onBlur}
+        >
+        <div
+          ref={sliderTrackWrapRef}
+          className="k-slider-track-wrap"
+          style={{
+                        flexGrow: 1,
+                        position: 'relative',
+                        touchAction: 'none',
+                        ...trackStyles
+                    }}
+                >
+          {props.children && (
+            <ul
+              className="k-reset k-slider-items"
+              style={{ ...sliderItemsStyle }}
+                        >
+              {
+                                React.Children.map(props.children, (child: any) => {
+                                    return child && React.cloneElement(
+                                        child, {
+                                            position: 100 * (child.props.position - props.min) /
+                                            (props.max - props.min),
+                                            vertical: props.vertical
+                                        },
+                                        child.props.children
+                                    );
+                                })
+                            }
+            </ul>)
+                    }
+          <div
+            ref={sliderTrackRef}
+            className="k-slider-track"
+            style={props.vertical
+                            ? { bottom: 0, height: '100%' }
+                            : { [dir === 'rtl' ? 'right' : 'left']: 0, width: '100%' }}
+                    >
+            {(percentStart !== null && percentEnd !== null) && <div
+              data-selection={true}
+              ref={sliderSelectionRef}
+              title={`${value.start} - ${value.end}`}
+              className="k-slider-selection"
+              style={props.vertical
+                                ? { height: (percentEnd - percentStart) + '%', bottom: percentStart + '%' }
+                                : {
+                                    [dir === 'rtl' ? 'right' : 'left']: percentStart + '%',
+                                    width: (percentEnd - percentStart) + '%'
+                                }
+                            }
+                        />}
+            <span
+              ref={startHandle}
+
+              role="slider"
+              tabIndex={getTabIndex(props.startTabIndex, props.disabled, undefined)}
+              aria-valuemin={min}
+              aria-valuemax={Math.max(max, value.end)}
+              aria-valuenow={value.start}
+              aria-disabled={props.disabled ? 'true' : undefined}
+              aria-valuetext={`${value.start} - ${value.end}`}
+
+              className="k-draghandle"
+              title={localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle])}
+              style={props.vertical
+                                ? { bottom: 'calc(' + percentStart + '%)', zIndex: 1 }
+                                : dir === 'rtl' ? { right: 'calc(' + percentStart + '% - 13px)', zIndex: 1 }
+                                    : { left: 'calc(' + percentStart + '%)', zIndex: 1 }
+                            }
+              onKeyDown={handleStartKeyDown}
+                        />
+            <span
+              ref={endHandle}
+
+              role="slider"
+              tabIndex={getTabIndex(props.endTabIndex, props.disabled, undefined)}
+              aria-valuemin={Math.min(min, value.start)}
+              aria-valuemax={max}
+              aria-valuenow={value.end}
+              aria-disabled={props.disabled ? 'true' : undefined}
+              aria-valuetext={`${value.start} - ${value.end}`}
+
+              className="k-draghandle"
+              title={localization.toLanguageString(sliderDragTitle, messages[sliderDragTitle])}
+              style={props.vertical
+                                ? { bottom: 'calc(' + percentEnd + '%)', zIndex: 1 }
+                                : dir === 'rtl' ? { right: 'calc(' + percentEnd + '% - 13px)', zIndex: 1 }
+                                    : { left: 'calc(' + percentEnd + '%)', zIndex: 1 }
+                            }
+              onKeyDown={handleEndKeyDown}
+                        />
+          </div>
+        </div>
+      </div>
+    );
+});
+
+const propTypes = {
+    value: (props: RangeSliderProps, propName: string, componentName: string) => {
+        if (props.value) {
+            const start = props.value.start;
+            const end = props.value.end;
+            const min = props.min;
+            const max = props.max;
+            if (start > end || start > max || start < min || end > max || end < min || end < start) {
+                return new Error(
+                    `Invalid prop + ${propName} supplied to ${componentName}.
+                    The { start, end } value must be between the min & max value and { start, end } must be start < end.
+                    `
+                );
+            }
+        }
+        return null;
+    },
+    defaultValue: (props: RangeSliderProps, propName: string, componentName: string) => {
+        if (props.defaultValue) {
+            const start = props.defaultValue.start;
+            const end = props.defaultValue.end;
+            const min = props.min;
+            const max = props.max;
+            if (start > end || start > max || start < min || end > max || end < min || end < start) {
+                return new Error(
+                    `Invalid prop + ${propName} supplied to ${componentName}.
+                    The { start, end } value must be between the min & max value and { start, end } must be start < end.
+                    `
+                );
+            }
+        }
+        return null;
+    },
+    onChange: PropTypes.func,
+    step: PropTypes.number,
+    min: (props: RangeSliderProps, propName: string, componentName: string) => {
+        const prop: string = (props as any)[propName];
+        const min = props.min;
+        const max = props.max;
+        if (min === undefined) {
+            return new Error(
+                `Invalid prop + ${propName} supplied to ${componentName}.
+                ${propName} value can not be undefined.
+                `
+            );
+        }
+        if (prop && min >= max) {
+            return new Error(
+                `Invalid prop + ${propName} supplied to ${componentName}.
+                ${propName} value can not be equal to or bigger than the max value.
+                `
+            );
+        }
+        return null;
+    },
+    max: (props: RangeSliderProps, propName: string, componentName: string) => {
+        const prop: number = (props as any)[propName];
+        const min = props.min;
+        const max = props.max;
+        if (max === undefined) {
+            return new Error(
+                `Invalid prop + ${propName} supplied to ${componentName}.
+                ${propName} value can not be undefined.
+                `
+            );
+        }
+        if (prop && max <= min) {
+            return new Error(
+                `Invalid prop + ${propName} supplied to ${componentName}.
+                ${propName} value can not be equal to or smaller than the min value.
+                `
+            );
+        }
+        return null;
+    },
+    vertical: PropTypes.bool,
+    disabled: PropTypes.bool,
+    dir: PropTypes.oneOf(['ltr', 'rtl'])
+};
+
+const defaultProps = {
+    step: 1,
+    defaultValue: {
+        start: 0,
+        end: 0
+    },
+    vertical: false,
+    disabled: false
+};
+
+RangeSlider.displayName = 'KendoReactRangeSlider';
+// TODO: delete casting when @types/react is updated!
+(RangeSlider as any).propTypes = propTypes;
+RangeSlider.defaultProps = defaultProps;