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

package/src/common/SwitchController.ts

@@ -1,130 +0,0 @@
-import SwitchModel from './SwitchModel';
-
-/**
- * @hidden
- */
-const DEFAULT_THRESHOLD = 5;
-
-/**
- * @hidden
- */
-const noop = () => { /* noop*/ };
-
-/**
- * @hidden
- */
-class SwitchController {
-    private handlePosition: number;
-    private wrapperOffset: number;
-    private handleOffset: number;
-    private handleMargin: number;
-    private updateView: Function;
-    private onChange: Function;
-    private _checked: boolean = false;
-    private reverse: boolean = false;
-    private coords: any;
-    private lastPressX: number = 0;
-    private originalPressX: number = 0;
-
-    constructor(updateView: Function = noop, onChange: Function = noop) {
-        this.handlePosition = 0;
-        this.wrapperOffset = 0;
-        this.handleOffset = 0;
-        this.handleMargin = 4;
-
-        this.updateView = updateView;
-        this.onChange = onChange;
-    }
-
-    public overrideChecked = (checked: boolean) => {
-        this._checked = checked;
-    };
-    public updateState({ wrapperOffset, handleOffset, checked, animate = true, coords, handleMargin, reverse }: any) {
-        this.wrapperOffset = wrapperOffset;
-        this.handleOffset = handleOffset;
-        this.coords = coords;
-        this.handleMargin = handleMargin;
-
-        this._checked = checked;
-        this.reverse = reverse;
-
-        this.updateView(this.updateModel(checked ? this.constrain : 0, animate));
-    }
-    public change = (checked: boolean, event?: any) => {
-        this._checked = checked;
-
-        this.updateView(this.updateModel(checked ? this.constrain : 0));
-
-        this.onChange(checked, event);
-    };
-    public get isChecked(): boolean {
-        return this._checked;
-    }
-    public addAnimation = (model: any) => {
-        if (model.transition === true) {
-            model.transition = 'all 200ms ease-out';
-        } else {
-            model.transition = 'none';
-        }
-        return model;
-    };
-    public onPress = (event: any) => {
-        const { pageX } = event;
-        this.lastPressX = this.originalPressX = pageX;
-    };
-    public onRelease = (event: any) => {
-        const { pageX } = event;
-        const delta = Math.abs(this.originalPressX - pageX);
-        const snapPoint = this.constrain / 2;
-        const checked = delta < DEFAULT_THRESHOLD ? !this._checked : this.handlePosition > snapPoint;
-
-        this.change(checked, event);
-    };
-    public onDrag = (event: any) => {
-        const { pageX } = event;
-        const { left, right } = this.coords;
-        const overElement = pageX > left && pageX < right;
-
-        if (overElement) {
-            const delta = this.reverse ? this.lastPressX - pageX : pageX - this.lastPressX;
-            const position = this.limit(this.handlePosition + delta);
-
-            this.lastPressX = pageX;
-            this.handlePosition = position;
-            this.updateView(this.updateModel(this.handlePosition));
-        }
-        if (pageX > right) {
-            this.updateView(this.updateModel(this.reverse ? 0 : this.constrain));
-        }
-
-        if (pageX < left) {
-            this.updateView(this.updateModel(this.reverse ? 0 : this.constrain));
-        }
-    };
-
-    public updateModel(position: any, animate: boolean = true) {
-        let pos = this.reverse ? this.wrapperOffset / 2 - position : position;
-        return new SwitchModel(pos, animate);
-    }
-
-    private limit = (value: any) => {
-        if (value > this.constrain) {
-            return this.constrain;
-        }
-
-        if (value < 0) {
-            return 0;
-        }
-
-        return value;
-    };
-    public get constrain() {
-        return this.wrapperOffset - this.handleOffset - this.handleMargin;
-    }
-
-    public get checked() {
-        return this._checked;
-    }
-}
-
-export default SwitchController;

package/src/common/SwitchModel.ts

@@ -1,12 +0,0 @@
-/**
- * @hidden
- */
-export default class Model {
-    public handle: any;
-    constructor(value: number = 0, animate: boolean) {
-        this.handle = {
-            transform: 'translateX(' + value + 'px)',
-            transition: animate
-        };
-    }
-}

package/src/input/Input.tsx

@@ -1,346 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import {
-    guid,
-    classNames,
-    FormComponent,
-    FormComponentProps,
-    FormComponentValidity,
-    createPropsContext,
-    withPropsContext
-} from '@progress/kendo-react-common';
-
-import { FloatingLabel } from '@progress/kendo-react-labels';
-import { InputChangeEvent } from './interfaces/InputChangeEvent';
-
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-
-/**
- * @hidden
- */
-type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-
-/**
- * Represents the props of the [KendoReact Input component]({% slug overview_textbox %}).
- * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
- */
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>, FormComponentProps {
-    /**
-     * Renders a floating label for the Input component.
-     */
-    label?: string;
-    /**
-     * Represents the Input value.
-     */
-    value?: string | string[] | number;
-    /**
-     * Represents the Input default value.
-     */
-    defaultValue?: string | 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;
-    /**
-     * Identifies the element(s) which will label the component.
-     */
-    ariaLabelledBy?: string;
-    /**
-     * Defines a string value that labels an interactive element.
-     */
-    ariaLabel?: string;
-    /**
-     * Triggered after value change.
-     */
-    onChange?: (event: InputChangeEvent) => void;
-}
-
-/**
- * @hidden
- */
-export interface InputState {
-    value?: string | string[] | number;
-}
-
-/** @hidden */
-export class InputWithoutContext extends React.Component<InputProps, InputState> implements FormComponent {
-    static displayName = 'Input';
-    /**
-     * @hidden
-     */
-    static propTypes = {
-        label: PropTypes.string,
-        validationMessage: PropTypes.string,
-        required: PropTypes.bool,
-        validate: PropTypes.bool,
-        id: PropTypes.string,
-        ariaLabelledBy: PropTypes.string,
-        ariaDescribedBy: PropTypes.string,
-        ariaLabel: PropTypes.string
-    };
-
-    /**
-     * @hidden
-     */
-    static defaultProps = {
-        defaultValue: '',
-        required: false,
-        validityStyles: true
-    };
-
-    private _input: HTMLInputElement | null = null;
-    private _inputId: string = guid();
-    private valueDuringOnChange?: string;
-
-    constructor(props: InputProps) {
-        super(props);
-        validatePackage(packageMetadata);
-
-        this.state = {
-            value: this.props.defaultValue || InputWithoutContext.defaultProps.defaultValue
-        };
-    }
-
-    /**
-     * @hidden
-     */
-    public focus = (): void => {
-        if (this._input) {
-            this._input.focus();
-        }
-    };
-
-    /**
-     * Gets the native input element of the Input component.
-     */
-    public get element(): HTMLInputElement | null {
-        return this._input;
-    }
-
-    /**
-     * Gets the value of the Input.
-     */
-    public get value(): string | string[] | number | undefined {
-        return this.valueDuringOnChange !== undefined
-            ? this.valueDuringOnChange
-            : this.props.value !== undefined
-                ? this.props.value
-                : this.state.value;
-    }
-
-    /**
-     * Gets the `name` property of the Input.
-     */
-    public get name(): string | undefined {
-        return this.props.name;
-    }
-
-    /**
-     * Represents the validity state into which the Input is set.
-     */
-    public get validity(): FormComponentValidity {
-        const result = {
-            badInput: this._input ? this._input.validity.badInput : false,
-            patternMismatch: this._input
-                ? this._input.validity.patternMismatch
-                : false,
-            rangeOverflow: this._input ? this._input.validity.rangeOverflow : false,
-            rangeUnderflow: this._input ? this._input.validity.rangeUnderflow : false,
-            stepMismatch: this._input ? this._input.validity.stepMismatch : false,
-            tooLong: this._input ? this._input.validity.tooLong : false,
-            typeMismatch: this._input ? this._input.validity.typeMismatch : false,
-            valueMissing: this._input ? this._input.validity.valueMissing : false
-        };
-
-        return {
-            ...result,
-            customError: this.props.validationMessage !== undefined,
-            valid: this.props.valid !== undefined
-                ? this.props.valid
-                : this._input
-                    ? !this.isInvalid(result)
-                    : true
-        };
-    }
-
-    /**
-     * @hidden
-     */
-    protected get validityStyles(): boolean {
-        return this.props.validityStyles !== undefined
-            ? this.props.validityStyles
-            : InputWithoutContext.defaultProps.validityStyles;
-    }
-
-    /**
-     * @hidden
-     */
-    componentDidMount() {
-        this.forceUpdate();
-    }
-
-    /**
-     * @hidden
-     */
-    componentDidUpdate() {
-        this.setValidity();
-    }
-
-    /**
-     * @hidden
-     */
-    render() {
-        const {
-            className, label, id, validationMessage,
-            defaultValue, valid,
-            // Removed to support direct use in Form Field component
-            visited, touched, modified,
-            ariaLabelledBy, ariaDescribedBy,
-            validityStyles, style, ariaLabel, ...props } = this.props as any;
-        const inputId = id || this._inputId;
-        const isValid = !this.validityStyles || this.validity.valid;
-
-        const inputClassName = classNames(className, 'k-input k-input-md k-rounded-md k-input-solid');
-
-        const textbox = (
-          <input
-            aria-labelledby={ariaLabelledBy}
-            aria-describedby={ariaDescribedBy}
-            aria-disabled={this.props.disabled || undefined}
-            aria-invalid={!isValid || undefined}
-            aria-label={ariaLabel || undefined}
-            {...props}
-            style={!label
-                    ? style
-                    : undefined}
-            value={this.value}
-            id={inputId}
-            className={inputClassName}
-            onChange={this.handleChange}
-            onAnimationStart={this.handleAutoFill}
-            ref={(el) => {
-                    this._input = el;
-                }}
-            />
-        );
-
-        return label ?
-            (
-              <FloatingLabel
-                label={label}
-                editorId={inputId}
-                editorValue={String(this.value)}
-                editorValid={isValid}
-                editorDisabled={props.disabled}
-                editorPlaceholder={props.placeholder}
-                children={textbox}
-                style={style}
-                dir={props.dir}
-                />
-            )
-            : textbox;
-    }
-
-    protected isInvalid = (state: Object) => {
-        let result = false;
-
-        for (let prop in state) {
-            if (state.hasOwnProperty(prop)) {
-                result = result || Boolean(state[prop as keyof Object]);
-            }
-        }
-        return result;
-    };
-
-    /**
-     * @hidden
-     */
-    protected setValidity = (): void => {
-        if (this._input && this._input.setCustomValidity) {
-            this.validity.valid || !this.validityStyles
-                ? this._input.classList.remove('k-invalid')
-                : this._input.classList.add('k-invalid');
-
-            this._input.setCustomValidity(
-                this.validity.valid
-                    ? ''
-                    : this.props.validationMessage || ''
-            );
-        }
-    };
-
-    private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        this.setState({
-            value: event.target.value
-        });
-
-        this.valueDuringOnChange = event.target.value;
-        if (this.props.onChange) {
-            this.props.onChange.call(undefined, {
-                syntheticEvent: event,
-                nativeEvent: event.nativeEvent,
-                value: event.target.value,
-                target: this
-            } as InputChangeEvent);
-        }
-        this.valueDuringOnChange = undefined;
-    };
-
-    /**
-     * @hidden
-     */
-    private handleAutoFill = (e: React.AnimationEvent<HTMLInputElement>) => {
-        if (e.animationName === 'autoFillStart') {
-            let parent = (e.target as HTMLInputElement).parentNode as HTMLElement;
-            if (parent && parent.classList.contains('k-empty')) {
-                parent.classList.remove('k-empty');
-            }
-        }
-    };
-}
-
-/**
- * Represents the PropsContext of the `Input` component.
- * Used for global configuration of all `Input` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export const InputPropsContext = createPropsContext<InputProps>();
-
-/**
- * Represent the `ref` of the Input component.
- */
-export interface InputHandle extends Pick<InputWithoutContext, keyof InputWithoutContext> {
-    /**
-     * Gets the native input element of the Input component.
-     */
-    element: HTMLInputElement | null;
-    /**
-     * Gets the `name` property of the Input.
-     */
-    name: string | undefined;
-    /**
-     * Represents the validity state into which the Input is set.
-     */
-    validity: FormComponentValidity;
-    /**
-     * Gets the value of the Input.
-     */
-    value: string | string[] | number | undefined;
-};
-
-/** @hidden */
-export type Input = InputHandle;
-
-/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
-/**
- * Represents the [KendoReact Input component]({% slug overview_textbox %}).
- *
- * Accepts properties of type [InputProps]({% slug api_inputs_inputprops %}).
- * Obtaining the `ref` returns an object of type [InputHandle]({% slug api_inputs_inputhandle %}).
- */
-export const Input = withPropsContext(InputPropsContext, InputWithoutContext);
-Input.displayName = 'KendoReactInput';

package/src/input/interfaces/InputChangeEvent.tsx

@@ -1,12 +0,0 @@
-import { BaseEvent } from '@progress/kendo-react-common';
-import { Input } from '../../main';
-
-/**
- * The arguments for the `change` event of the Input.
- */
-export interface InputChangeEvent extends BaseEvent<Input> {
-    /**
-     * The current value of the Input.
-     */
-    value: string;
-}

package/src/interfaces/Direction.ts

@@ -1 +0,0 @@
-export type Direction = 'ltr' | 'rtl';

package/src/interfaces/ToggleBaseProps.ts

@@ -1,8 +0,0 @@
-/**
- * The props passed to the Checkbox and Switch components.
- */
-export interface ToggleBaseProps {
-    value?: any;
-    checked?: any;
-    defaultChecked?: any;
-}

package/src/main.ts

@@ -1,57 +0,0 @@
-
-import { FormComponentValidity } from '@progress/kendo-react-common';
-export { FormComponentValidity };
-
-import { InputChangeEvent } from './input/interfaces/InputChangeEvent';
-export { InputChangeEvent };
-
-export { ColorGradient, ColorGradientHandle, ColorGradientPropsContext, ColorGradientState } from './colors/ColorGradient';
-export { ColorPalette, ColorPaletteHandle, ColorPalettePropsContext, ColorPaletteState } from './colors/ColorPalette';
-export * from './colors/ColorPicker';
-export * from './colors/interfaces/ColorGradientChangeEvent';
-export * from './colors/interfaces/ColorGradientProps';
-export * from './colors/interfaces/ColorPaletteChangeEvent';
-export * from './colors/interfaces/ColorPaletteProps';
-export * from './colors/interfaces/ColorPickerBlurEvent';
-export * from './colors/interfaces/ColorPickerChangeEvent';
-export * from './colors/interfaces/ColorPickerFocusEvent';
-export * from './colors/interfaces/ColorPickerGradientSettings';
-export * from './colors/interfaces/ColorPickerPaletteSettings';
-export * from './colors/interfaces/ColorPickerPopupSettings';
-export * from './colors/interfaces/ColorPickerProps';
-export * from './colors/FlatColorPicker';
-export { Input, InputHandle, InputProps, InputPropsContext, InputState } from './input/Input';
-export { MaskedTextBox, MaskedTextBoxHandle, MaskedTextBoxPropsContext } from './maskedtextbox/MaskedTextBox';
-export * from './maskedtextbox/MaskedTextBoxProps';
-export * from './numerictextbox/NumericTextBox';
-export * from './numerictextbox/interfaces/NumericTextBoxHandle';
-export * from './numerictextbox/interfaces/NumericTextBoxChangeEvent';
-export * from './numerictextbox/interfaces/NumericTextBoxBlurEvent';
-export * from './numerictextbox/interfaces/NumericTextBoxFocusEvent';
-export * from './numerictextbox/interfaces/NumericTextBoxProps';
-export { Slider, SliderHandle, SliderProps, SliderPropsContext, SliderChangeEvent } from './slider/Slider';
-export * from './slider/SliderLabel';
-export * from './range-slider/RangeSlider';
-export * from './interfaces/ToggleBaseProps';
-export { Switch, SwitchHandle, SwitchProps, SwitchPropsContext, SwitchState, SwitchChangeEvent } from './switch/Switch';
-export * from './checkbox/interfaces/CheckboxProps';
-export * from './checkbox/interfaces/CheckboxChangeEvent';
-export * from './checkbox/interfaces/CheckboxFocusEvent';
-export * from './checkbox/Checkbox';
-export * from './radiobutton/RadioGroup';
-export * from './radiobutton/interfaces/RadioGroupProps';
-export * from './radiobutton/interfaces/RadioGroupChangeEvent';
-export * from './radiobutton/interfaces/RadioGroupFocusEvent';
-export * from './radiobutton/RadioButton';
-export * from './radiobutton/interfaces/RadioButtonProps';
-export * from './radiobutton/interfaces/RadioButtonChangeEvent';
-export * from './radiobutton/interfaces/RadioButtonFocusEvent';
-export * from './textarea/TextArea';
-export * from './textarea/interfaces/TextAreaProps';
-export * from './textarea/interfaces/TextAreaChangeEvent';
-export * from './textarea/interfaces/TextAreaFocusEvent';
-export * from './rating/Rating';
-export * from './rating/RatingItem';
-export * from './rating/models/index';
-export * from './signature/Signature';
-export * from './signature/interfaces';