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

package/src/rating/RatingItem.tsx

@@ -0,0 +1,268 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { classNames, useDir } from '@progress/kendo-react-common';
+import { RatingItemMouseEvent, RatingItemFocusEvent, RatingItemKeyboardEvent } from './models';
+
+/**
+ * Represents the properties of [RatingItem](% slug api_inputs_ratingitem %) component.
+ */
+export interface RatingItemProps {
+    /**
+     * Sets the `id` property of the top div element of the RatingItem.
+     */
+    id?: string;
+    /**
+     * Sets additional classes to the RatingItem.
+     */
+    className?: string;
+    /**
+     * Sets the `tabIndex` attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Determines if icon is partly selected.
+     */
+    half?: boolean;
+    /**
+     * Sets additional CSS styles to the RatingItem.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Determines the children nodes.
+     */
+    children?: React.ReactNode;
+    /**
+     * Determines the RatingItem direction `ltr` - by default, or `rtl`.
+     */
+    dir?: string;
+    /**
+     * Sets the current value of the RatingItem, used in controlled mode.
+     */
+    value: number;
+    /**
+     * Sets the title of current RatingItem component. [See example]({% slug controlled_rating %})
+     */
+    title?: string;
+    /**
+     * Sets the icon of current RatingItem component. [See example]({% slug label_rating %})
+     */
+    icon?: any;
+    /**
+     * Determines if current RatingItem is selected. [See example]({% slug item_customization_ratingitem %})
+     */
+    selected?: boolean;
+    /**
+     * Determines if current RatingItem is hovered.
+     */
+    hovered?: boolean;
+    /**
+     * Triggered after `onClick` event. Gets outside access to the target element, the new value and the event type.
+     */
+    onClick?: (event: RatingItemMouseEvent) => void;
+    /**
+     * Triggered after `onKeyDown` event. Gets outside access to the target element, the new value and the event type.
+     */
+    onKeyDown?: (event: RatingItemKeyboardEvent) => void;
+    /**
+     * Triggered after `onFocus` event. Gets outside access to the target element and the event type.
+     */
+    onFocus?: (event: RatingItemFocusEvent) => void;
+    /**
+     * Triggered after `onBlur` event. Gets outside access to the target element and the event type.
+     */
+    onBlur?: (event: RatingItemFocusEvent) => void;
+    /**
+     * Triggered after `onMouseEnter` event. Gets outside access to the target element and the event type.
+     */
+    onMouseEnter?: (event: RatingItemMouseEvent) => void;
+    /**
+     * Triggered after `onMouseLeave` event. Gets outside access to the target element and the event type.
+     */
+    onMouseLeave?: (event: RatingItemMouseEvent) => void;
+    /**
+     * Triggered after `onMouseMove` event. Gets outside access to the target element and the event type.
+     */
+    onMouseMove?: (event: RatingItemMouseEvent) => void;
+}
+
+/**
+ * Represents the target(value, element and props) of The RatingItem.
+ */
+export interface RatingItemHandle {
+    /**
+     * The current RatingItem value.
+     */
+    value: number;
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props value of the RatingItem.
+     */
+    props: RatingItemProps;
+}
+
+/**
+ * Represents the RatingItem component.
+ */
+export const RatingItem = React.forwardRef<RatingItemHandle | null, RatingItemProps>((props, ref) => {
+    const target = React.useRef<RatingItemHandle | null>(null);
+    const element = React.useRef<HTMLDivElement>(null);
+    const dir = useDir(element, props.dir);
+
+    React.useImperativeHandle(target, () => ({
+        element: element.current,
+        props,
+        value: props.value
+    }));
+    React.useImperativeHandle<RatingItemHandle | null, RatingItemHandle | null>(ref, () => target.current);
+
+    const handleClick = React.useCallback(
+        (event: React.MouseEvent<any>) => {
+            if (props.onClick) {
+                props.onClick.call(
+                    undefined, {
+                        value: props.value,
+                        target: target.current,
+                        syntheticEvent: event
+                    } as RatingItemMouseEvent);
+            }
+        },
+        [props.onClick, props.value]
+    );
+
+    const handleKeyDown = React.useCallback(
+        (event: React.KeyboardEvent) => {
+            if (props.onKeyDown) {
+                props.onKeyDown.call(
+                    undefined,
+                    {
+                        target: target.current,
+                        syntheticEvent: event
+                    } as RatingItemKeyboardEvent);
+            }
+        },
+        [props.onKeyDown]
+    );
+
+    const handleFocus = React.useCallback(
+        (event: React.FocusEvent) => {
+            if (props.onFocus) {
+                props.onFocus.call(
+                    undefined,
+                    {
+                        target: target.current,
+                        syntheticEvent: event
+                    } as RatingItemFocusEvent);
+            }
+        },
+        [props.onFocus]
+    );
+
+    const handleBlur = React.useCallback(
+        (event: React.FocusEvent) => {
+            if (props.onBlur) {
+                props.onBlur.call(
+                    undefined,
+                    {
+                        target: target.current,
+                        syntheticEvent: event
+                    } as RatingItemFocusEvent);
+            }
+        },
+        [props.onBlur]
+    );
+
+    const handleMouseMove = React.useCallback(
+        (event: React.MouseEvent) => {
+            if (props.onMouseMove) {
+                props.onMouseMove.call(
+                    undefined,
+                    {
+                        target: target.current,
+                        syntheticEvent: event
+                    } as RatingItemMouseEvent);
+            }
+        },
+        [props.onMouseMove]
+    );
+
+    const handleMouseEnter = React.useCallback(
+        (event: React.MouseEvent) => {
+            if (props.onMouseEnter) {
+                props.onMouseEnter.call(
+                    undefined,
+                    {
+                        target: target.current,
+                        syntheticEvent: event
+                    } as RatingItemMouseEvent);
+            }
+        },
+        [props.onMouseEnter]
+    );
+
+    const handleMouseLeave = React.useCallback(
+        (event: React.MouseEvent) => {
+            if (props.onMouseLeave) {
+                props.onMouseLeave.call(
+                    undefined,
+                    {
+                        target: target.current,
+                        syntheticEvent: event
+                    } as RatingItemMouseEvent);
+            }
+        },
+        [props.onMouseLeave]
+    );
+
+    return (
+      <span
+        id={props.id}
+        ref={element}
+        dir={dir}
+        data-half={props.half}
+        tabIndex={props.tabIndex}
+        title={props.title}
+        style={props.style}
+        className={classNames(
+                'k-rating-item',
+                {
+                    'k-rtl': dir === 'rtl',
+                    'k-selected': props.selected,
+                    'k-hover': props.hovered
+                },
+                props.className
+            )}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onMouseMove={handleMouseMove}
+        >
+        {props.children}
+      </span>
+    );
+});
+
+const propTypes = {
+    id: PropTypes.string,
+    icon: PropTypes.any,
+    dir: PropTypes.oneOf(['ltr', 'rtl']),
+    title: PropTypes.string,
+    value: PropTypes.number,
+    half: PropTypes.bool,
+    selected: PropTypes.bool,
+    hovered: PropTypes.bool
+};
+
+const defaultProps = {
+    dir: 'ltr'
+};
+
+RatingItem.displayName = 'KendoReactRatingItem';
+// TODO: delete casting when @types/react is updated!
+(RatingItem as any).propTypes = propTypes;
+RatingItem.defaultProps = defaultProps;

package/src/rating/models/index.tsx

@@ -0,0 +1,91 @@
+import { RatingItemHandle } from './../RatingItem';
+import { RatingHandle } from './../Rating';
+
+/**
+ * Represents the return type of the RatingItemMouseEvent.
+ */
+export interface RatingItemMouseEvent {
+    /**
+     * The target of the RatingItemMouseEvent from RatingItemHandle.
+     */
+    target: RatingItemHandle;
+    /**
+     * The event of the RatingItemMouseEvent.
+     */
+    syntheticEvent: React.MouseEvent<any>;
+
+    /**
+     * @hidden
+     */
+    value?: number | null;
+}
+
+/**
+ * Represents the return type of the RatingItemKeyboardEvent.
+ */
+export interface RatingItemKeyboardEvent {
+    /**
+     * The target of the RatingItemKeyboardEvent from RatingItemHandle.
+     */
+    target: RatingItemHandle;
+    /**
+     * The event of the RatingItemKeyboardEvent.
+     */
+    syntheticEvent: React.KeyboardEvent<any>;
+}
+
+/**
+ * Represents the return type of the RatingItemFocusEvent.
+ */
+export interface RatingItemFocusEvent {
+    /**
+     * The target of the RatingItemFocusEvent from RatingItemHandle.
+     */
+    target: RatingItemHandle;
+    /**
+     * The event of the RatingItemFocusEvent.
+     */
+    syntheticEvent: React.FocusEvent<any>;
+}
+
+/**
+ * Represents the return type of the RatingMouseEvent.
+ */
+export interface RatingMouseEvent {
+    /**
+     * The target of the RatingMouseEvent from RatingHandle.
+     */
+    target: RatingHandle;
+    /**
+     * The event of the RatingMouseEvent.
+     */
+    syntheticEvent: React.MouseEvent<any>;
+}
+
+/**
+ * Represents the return type of the RatingKeyboardEvent.
+ */
+export interface RatingKeyboardEvent {
+    /**
+     * The target of the RatingKeyboardEvent from RatingHandle.
+     */
+    target: RatingHandle;
+    /**
+     * The event of the RatingKeyboardEvent.
+     */
+    syntheticEvent: React.KeyboardEvent<any>;
+}
+
+/**
+ * Represents the return type od the RatingFocusEvent.
+ */
+export interface RatingFocusEvent {
+    /**
+     * The target of the RatingFocusEvent from RatingHandle.
+     */
+    target: RatingHandle;
+    /**
+     * The event of the RatingFocusEvent.
+     */
+    syntheticEvent: React.FocusEvent<any>;
+}

package/src/rating/rating-reducer.tsx

@@ -0,0 +1,70 @@
+import { toRound } from './utils';
+
+/**
+ * @hidden
+ */
+export enum RATING_ACTION {
+    select = 'select',
+    deselect = 'deselect',
+    increase = 'increase',
+    decrease = 'decrease',
+    min = 'min',
+    max = 'max',
+    reset = 'reset'
+}
+
+/**
+ * @hidden
+ */
+export type RatingActionDispatch = {
+    type: RATING_ACTION;
+    payload?: number;
+    event?: React.SyntheticEvent<any>;
+};
+
+/**
+ * @hidden
+ */
+export type RatingAction = {
+    min: number;
+    max: number;
+    step?: number;
+};
+
+/**
+ * @hidden
+ */
+export const ratingReducer = (state: any, action: RatingAction & RatingActionDispatch) => {
+    switch (action.type) {
+        case RATING_ACTION.select:
+            if (action.payload === undefined || action.step === undefined) { return state; }
+            if (action.payload === state) { return null; }
+            return action.payload >= action.min
+                ? action.payload < action.max
+                    ? toRound(action.payload, action.step)
+                    : action.max
+                : action.min;
+        case RATING_ACTION.deselect:
+            return null;
+        case RATING_ACTION.increase:
+            if (action.step === undefined) { return state; }
+            if (state < action.min) { return action.min; }
+            return state + action.step < action.max
+                ? toRound(state + action.step, action.step)
+                : action.max;
+        case RATING_ACTION.decrease:
+            if (action.step === undefined) { return state; }
+            return toRound(state - action.step, action.step) >= action.min
+                ? toRound(state - action.step, action.step)
+                : action.min;
+        case RATING_ACTION.min:
+            if (action.step === undefined) { return state; }
+            return action.min;
+        case RATING_ACTION.max:
+            return action.max;
+        case RATING_ACTION.reset:
+            return null;
+        default:
+            return state;
+    }
+};

package/src/rating/utils/index.tsx

@@ -0,0 +1,65 @@
+/**
+ * @hidden
+ */
+export const toRound = (num: number, base: number) => {
+    if (num % 1) {
+        const percent = Math.pow(10, (base.toString().split('.')[1] || base.toString().split('.')[0]).length);
+        return Math.round(num * percent) / percent;
+    }
+    return num;
+};
+
+// Opting out of JS `modulo` calculation due to floating-point problems in JS
+// We're looking for the reminder - R.
+// x / y = a + R
+// R = (x / y) - a | *y
+// R = x - (y * a)
+// : a = Math.floor(x /y );
+/**
+ * @hidden
+ */
+export const getRemainder = (x: number, y: number) => x - (y * Math.floor(x / y));
+
+/**
+ * @hidden
+ */
+export const isHalf = (index: number, value: number, step: number) => {
+    return (toRound(index - step, step) < value) && (value < index);
+};
+
+/**
+ * @hidden
+ */
+export const isSelected = (index: number, value: number | null, step: number, selection: 'single' | 'continues'): boolean => {
+    if (value === null) { return false; }
+    if (selection === 'continues') {
+        return isHalf(index, value, step)
+            ? toRound(index - step / 2, step / 2) <= value
+            : index <= value;
+    }
+    if (selection === 'single') {
+        return isHalf(index, value, step)
+            ? toRound(index - step / 2, step / 2) === value
+            : index === value;
+    }
+    return false;
+};
+
+/**
+ * @hidden
+ */
+export const calcIsFirstHalf = (dir: string, rect: any, clientX: number) => {
+    return dir === 'ltr'
+        ? clientX < (rect.x + (rect.width / 2))
+        : clientX > (rect.x + (rect.width / 2));
+};
+
+/**
+ * @hidden
+ */
+export const isCorrectValue = (min: number, max: number, step: number, value: number) => {
+    for (let i = min; i <= max; i += step) {
+        if (value === i) { return true; }
+    }
+    return false;
+};