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

package/src/slider/Slider.tsx

@@ -0,0 +1,470 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import {
+    FormComponentProps,
+    BaseEvent,
+    dispatchEvent,
+    Keys,
+    classNames,
+    Draggable,
+    DraggableDragEvent,
+    DraggablePressEvent,
+    getTabIndex,
+    createPropsContext,
+    withPropsContext
+} from '@progress/kendo-react-common';
+import {
+    registerForLocalization,
+    LocalizationService,
+    provideLocalizationService
+} from '@progress/kendo-react-intl';
+import { messages, sliderIncreaseValue, sliderDecreaseValue, sliderDragTitle } from './../messages';
+import { SLIDER_LABEL_ATTRIBUTE } from './SliderLabel';
+import { Direction } from '../interfaces/Direction';
+import { validatePackage } from '@progress/kendo-react-common';
+import { packageMetadata } from '../package-metadata';
+import { Button } from '@progress/kendo-react-buttons';
+
+/**
+ * The arguments for the `onChange` Slider event.
+ */
+export interface SliderChangeEvent extends BaseEvent<Slider> {
+    /**
+     * The current value of the Slider.
+     */
+    value: number;
+}
+
+/**
+ * Represents the props of the [KendoReact Slider component]({% slug overview_slider %}).
+ */
+export interface SliderProps extends FormComponentProps {
+    children?: React.ReactNode;
+    /**
+     * The value of the Slider.
+     */
+    value?: number;
+    /**
+     * The default value of the Slider.
+     */
+    defaultValue?: number;
+    /**
+     * The minimum value of the Slider.
+     */
+    min: number;
+    /**
+     * The maximum value of the Slider.
+     */
+    max: number;
+    /**
+     * Specifies the step of the value increase and decrease.
+     */
+    step?: number;
+    /**
+     * Determines the event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: SliderChangeEvent) => void;
+    /**
+     * The styles that are applied to the Slider.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Sets additional classes to the Slider.
+     */
+    className?: string;
+    /**
+     * Renders the arrow side buttons of the Slider if set to true.
+     */
+    buttons?: boolean;
+    /**
+     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
+     * of the Slider.
+     */
+    tabIndex?: number;
+    /**
+     * Determines whether the Slider is disabled.
+     *
+     * @example
+     * ```jsx
+     * class App extends React.Component {
+     *    render() {
+     *       return (
+     *           <Slider disabled={true} min={0} max={10} defaultValue={5} />
+     *       );
+     *    }
+     * }
+     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * If `vertical` is set to `true`, the orientation of the Slider changes from horizontal to vertical
+     * ([see example]({% slug orientation_slider %})).
+     */
+    vertical?: boolean;
+
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+
+    /* 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;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
+    dir?: Direction;
+}
+
+/**
+ * @hidden
+ */
+interface SliderState {
+    value: number;
+    focused: boolean;
+    dir?: Direction;
+}
+
+/** @hidden */
+export class SliderWithoutContext extends React.Component<SliderProps, SliderState> {
+    static displayName = 'Slider';
+    /**
+     * @hidden
+     */
+    static propTypes = {
+        min: PropTypes.number.isRequired,
+        max: PropTypes.number.isRequired,
+        value: PropTypes.number,
+        vertical: PropTypes.bool,
+        id: PropTypes.string,
+        ariaLabelledBy: PropTypes.string,
+        ariaDescribedBy: PropTypes.string,
+        ariaLabel: PropTypes.string
+        // TODO: validation when buttons is set to true, but no step is provided
+    };
+
+    /**
+     * @hidden
+     */
+    static getDerivedStateFromProps(props: SliderProps, state: SliderState) {
+        const value = props.value !== undefined ? props.value : state.value;
+        const { min, max } = props;
+
+        return value === undefined ? null :
+            { value: Math.min(Math.max(value, min), max) };
+    }
+
+    /**
+     * @hidden
+     */
+    state = {
+        value: this.props.defaultValue === undefined ? this.props.min : this.props.defaultValue,
+        focused: false,
+        dir: this.props.dir
+    };
+
+    private _sliderTrack: HTMLDivElement | null = null;
+    private _element: HTMLDivElement | null = null;
+
+    constructor(props: SliderProps) {
+        super(props);
+        validatePackage(packageMetadata);
+    }
+
+    /**
+     * @hidden
+     */
+    componentDidMount() {
+        if (!this.state.dir && window && this._element) {
+            // Note: getComputedStyle forces reflow
+            const direction = window.getComputedStyle(this._element)!.direction as Direction;
+
+            if (direction) {
+                this.setState({ dir: direction });
+            }
+        }
+    }
+
+    /**
+     * @hidden
+     */
+    buttons = (props: any) => {
+        if (!props.enabled) {
+            return props.children;
+        }
+
+        return (
+          <React.Fragment>
+            <Button
+              className="k-button-decrease k-rounded-full"
+            //   rounded={'full'}
+              icon={this.props.vertical ? 'arrow-s' : 'arrow-w'}
+              title={props.decrementTitle}
+              onClick={props.decrement}
+                 />
+            {props.children}
+            <Button
+              className="k-button-increase k-rounded-full"
+            //   rounded={'full'}
+              icon={this.props.vertical ? 'arrow-n' : 'arrow-e'}
+              title={props.incrementTitle}
+              onClick={props.increment}
+                 />
+          </React.Fragment>
+        );
+    };
+
+    /**
+     * @hidden
+     */
+    render() {
+        const lS: LocalizationService = provideLocalizationService(this);
+        const percentValue = ((this.state.value - this.props.min) / (this.props.max - this.props.min)) * 100;
+
+        const trackStyles: React.CSSProperties = this.props.vertical
+            ? { marginTop: '0.5rem', marginBottom: '0.5rem' }
+            : { marginLeft: '0.5rem', marginRight: '0.5rem' };
+
+        const sliderItemsStyle: React.CSSProperties = this.props.vertical
+            ? { paddingTop: 0, height: '100%' }
+            : {};
+
+        return (
+          <div
+            ref={el => this._element = el}
+            dir={this.state.dir}
+            id={this.props.id}
+            style={{gap: 0, ...this.props.style}}
+
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+            onKeyDown={this.onKeyDown}
+            className={classNames(
+                    'k-slider k-widget',
+                    {
+                        'k-focus': this.state.focused,
+                        'k-disabled': this.props.disabled,
+                        'k-slider-horizontal': !this.props.vertical,
+                        'k-slider-vertical': this.props.vertical
+                    },
+                    this.props.className
+                )}
+            >
+            <this.buttons
+              enabled={this.props.buttons}
+              decrement={this.decrement}
+              increment={this.increment}
+              incrementTitle={lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue])}
+              decrementTitle={lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue])}
+                    >
+              <Draggable onDrag={this.dragOver} onPress={this.dragStart}>
+                <div
+                  className="k-slider-track-wrap"
+                  style={{
+                                    flexGrow: 1,
+                                    position: 'relative',
+                                    touchAction: 'none',
+                                    ...trackStyles
+                                }}
+                            >
+                  {this.props.children && (
+                    <ul
+                      className="k-reset k-slider-items"
+                      style={{ margin: 0, ...sliderItemsStyle }}
+                                    >
+                      {
+                                            React.Children.map(this.props.children, (child: any) => {
+                                                return child && React.cloneElement(
+                                                    child, {
+                                                        position: 100 * (child.props.position - this.props.min) /
+                                                        (this.props.max - this.props.min),
+                                                        vertical: this.props.vertical
+                                                    },
+                                                    child.props.children
+                                                );
+                                            })
+                                        }
+                    </ul>)
+                                }
+                  <div
+                    className="k-slider-track"
+                    style={this.props.vertical
+                                        ? { bottom: 0, height: '100%' }
+                                        : { [this.state.dir === 'rtl' ? 'right' : 'left']: 0, width: '100%' }}
+                    ref={el => this._sliderTrack = el}
+                                >
+                    <div
+                      className="k-slider-selection"
+                      style={this.props.vertical
+                                            ? { height: percentValue + '%' }
+                                            : { width: percentValue + '%' }}
+                                    />
+                    <span
+                      role="slider"
+                      aria-valuemin={this.props.min}
+                      aria-valuemax={this.props.max}
+                      aria-valuenow={this.state.value}
+                      aria-valuetext={String(this.state.value)}
+                      aria-orientation={this.props.vertical? 'vertical' : undefined}
+                      aria-disabled={this.props.disabled ? 'true' : undefined}
+                      aria-labelledby={this.props.ariaLabelledBy}
+                      aria-describedby={this.props.ariaDescribedBy}
+                      aria-label={this.props.ariaLabel}
+                      tabIndex={getTabIndex(this.props.tabIndex, this.props.disabled, undefined)}
+                      className="k-draghandle"
+                      title={lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle])}
+                      style={this.props.vertical
+                                            ? { bottom: 'calc(' + percentValue + '%)', zIndex: 1 }
+                                            : this.state.dir === 'rtl' ? { right: 'calc(' + percentValue + '% - 13px)', zIndex: 1 }
+                                                : { left: 'calc(' + percentValue + '%)', zIndex: 1 }
+                                        }
+                                    />
+                  </div>
+                </div>
+              </Draggable>
+            </this.buttons>
+          </div>
+        );
+    }
+
+    /**
+     * @hidden
+     */
+    public focus = (): void => {
+        if (this._element) {
+            this._element.focus();
+        }
+    };
+
+    /**
+     * @hidden
+     */
+    public get sliderTrack(): HTMLDivElement | null {
+        return this._sliderTrack;
+    }
+
+    private isLabel = (target: EventTarget | null): boolean => {
+        let currentTarget: any = target;
+
+        while (currentTarget) {
+            if (Boolean(currentTarget.getAttribute(SLIDER_LABEL_ATTRIBUTE))) {
+                return true;
+            }
+
+            currentTarget = currentTarget.parentElement;
+        }
+
+        return false;
+    };
+
+    private onFocus = () => {
+        this.setState({ focused: true });
+    };
+
+    private onBlur = () => {
+        this.setState({ focused: false });
+    };
+
+    private onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        let newValue: number | undefined = undefined;
+
+        if (e.keyCode === Keys.left || e.keyCode === Keys.down) {
+            newValue = this.state.value - (this.props.step || 0);
+        } else if (e.keyCode === Keys.right || e.keyCode === Keys.up) {
+            newValue = this.state.value + (this.props.step || 0);
+        } else if (e.keyCode === Keys.home) {
+            newValue = this.props.min;
+        } else if (e.keyCode === Keys.end) {
+            newValue = this.props.max;
+        }
+
+        if (newValue !== undefined) {
+            e.preventDefault();
+            this.change(e, newValue);
+        }
+    };
+
+    private decrement = (e: React.MouseEvent<HTMLAnchorElement>): void => {
+        e.preventDefault();
+        this.change(e, this.state.value - (this.props.step || 0));
+    };
+
+    private increment = (e: React.MouseEvent<HTMLAnchorElement>): void => {
+        e.preventDefault();
+        this.change(e, this.state.value + (this.props.step || 0));
+    };
+
+    private dragStart = (e: DraggablePressEvent) => {
+        if (!this.isLabel(e.event.originalEvent.target)) {
+            if (e.event.isTouch) {
+                e.event.originalEvent.preventDefault();
+            }
+
+            this.drag(e);
+        }
+    };
+
+    private dragOver = (e: DraggableDragEvent) => {
+        e.event.originalEvent.preventDefault();
+
+        this.drag(e);
+    };
+
+    private drag = (e: any) => {
+        const computed = e.element.getBoundingClientRect();
+
+        const distance = this.props.vertical
+            ? (computed.bottom - e.event.clientY)
+            : (this.state.dir === 'rtl'
+                ? computed.right - e.event.clientX
+                : e.event.clientX - computed.left
+            );
+        const size = this.props.vertical ? computed.height : computed.width;
+        const percentage = (distance / size);
+        this.change(e, this.props.min + percentage * (this.props.max - this.props.min));
+    };
+
+    private change(e: any, value: number) {
+        value = Math.min(Math.max(value, this.props.min), this.props.max);
+        this.setState({ value: value });
+        dispatchEvent(this.props.onChange, e, this, { value: value });
+    }
+}
+
+/**
+ * Represents the PropsContext of the `Slider` component.
+ * Used for global configuration of all `Slider` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+export const SliderPropsContext = createPropsContext<SliderProps>();
+
+/**
+ * Represent the `ref` of the Slider component.
+ */
+export interface SliderHandle extends Pick<SliderWithoutContext, keyof SliderWithoutContext> { }
+
+/** @hidden */
+export type Slider = SliderHandle;
+
+/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
+/**
+ * Represents the [KendoReact Slider component]({% slug overview_slider %}).
+ *
+ * Accepts properties of type [SliderProps]({% slug api_inputs_sliderprops %}).
+ * Obtaining the `ref` returns an object of type [SliderHandle]({% slug api_inputs_sliderhandle %}).
+ */
+export const Slider = withPropsContext(SliderPropsContext, SliderWithoutContext);
+Slider.displayName = 'KendoReactSlider';
+
+registerForLocalization(SliderWithoutContext as any);

package/src/slider/SliderLabel.tsx

@@ -0,0 +1,69 @@
+
+import * as React from 'react';
+import { useDir } from '@progress/kendo-react-common';
+
+/**
+ * @hidden
+ */
+export const SLIDER_LABEL_ATTRIBUTE = 'data-slider-label';
+
+/**
+ * Represents the props of the KendoReact SliderLabel component.
+ */
+export interface SliderLabelProps {
+    /**
+     * The position in relative to the start of the SliderLabel component.
+     */
+    position: number;
+    /**
+     * The onClick event of the SliderLabel component.
+     */
+    onClick?: (event: React.MouseEvent<HTMLLIElement>) => void;
+    /**
+     * The title of the SliderLabel component.
+     */
+    title?: string;
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * @hidden
+     */
+    vertical?: boolean;
+}
+
+/**
+ * Represents the KendoReact SliderLabel component.
+ */
+export const SliderLabel = (props: SliderLabelProps) => {
+    const sliderLabelRef = React.useRef<HTMLLIElement>(null);
+    const dir = useDir(sliderLabelRef);
+
+    const style: React.CSSProperties = props.vertical
+        ? { bottom: `${props.position}%`}
+        : { [dir === 'rtl' ? 'right' : 'left']: `${props.position}%`};
+
+    const tickStyle = props.vertical ? 'k-tick-vertical' : 'k-tick-horizontal';
+
+    return (
+      <li
+        ref={sliderLabelRef}
+        className={`k-tick k-tick-large ${tickStyle}`}
+        title={props.title}
+        style={{
+                zIndex: 1,
+                position: 'absolute',
+                ...style
+            }}
+        >
+        <span
+          {...{ [SLIDER_LABEL_ATTRIBUTE]: true }}
+          className="k-label"
+          onClick={props.onClick}
+            >
+          {props.children}
+        </span>
+      </li>
+    );
+};