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

package/src/common/SwitchController.ts

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

@@ -0,0 +1,12 @@
+/**
+ * @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

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

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

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

package/src/interfaces/ToggleBaseProps.ts

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

package/src/main.ts

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