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

package/src/range-slider/RangeSlider.tsx

@@ -1,644 +0,0 @@
-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;