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

package/src/slider/Slider.tsx

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

@@ -1,69 +0,0 @@
-
-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>
-    );
-};