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

package/src/colors/ColorGradient.tsx

@@ -0,0 +1,450 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import {
+    Draggable, DraggableDragEvent,
+    guid, classNames, focusFirstFocusableChild, getTabIndex, createPropsContext, withPropsContext
+} from '@progress/kendo-react-common';
+
+import { validatePackage } from '@progress/kendo-react-common';
+import { packageMetadata } from '../package-metadata';
+
+import { Slider, SliderChangeEvent, NumericTextBoxChangeEvent } from './../main';
+import { fitIntoBounds, isPresent } from './utils/misc';
+import { HSVA } from './models/hsva';
+import { OutputFormat } from './models/output-format';
+import { getColorFromHue, parseColor, getHSV, getColorFromHSV, getRGBA, getColorFromRGBA } from './utils/color-parser';
+import {
+    cacheHsva, removeCachedColor, getCachedHsva, getCachedRgba, getCachedHex,
+    cacheRgba, cacheHex
+} from './utils/color-cache';
+import ColorInput from './ColorInput';
+import { RGBA } from './models/rgba';
+import { ColorGradientProps } from './interfaces/ColorGradientProps';
+import { ColorGradientChangeEvent } from './interfaces/ColorGradientChangeEvent';
+import {ColorContrastLabels} from './ColorContrastLabels';
+import {ColorContrastSvg} from './ColorContrastSvg';
+import { LocalizationService, provideLocalizationService } from '@progress/kendo-react-intl';
+import { messages, colorGradientHueSliderLabel, colorGradientAlphaSliderLabel } from './../messages';
+
+const FORMAT: OutputFormat = 'rgba';
+const DEFAULT_SELECTED_COLOR: string = 'rgba(255, 255, 255, 1)';
+
+/**
+ * @hidden
+ */
+export interface ColorGradientState {
+    hsva: HSVA;
+    backgroundColor: string;
+    rgba: RGBA;
+    hex: string;
+    isFirstRender: boolean;
+    guid: string;
+}
+
+/** @hidden */
+export class ColorGradientWithoutContext extends React.Component<ColorGradientProps, ColorGradientState> {
+    static displayName = 'ColorGradient';
+    /**
+     * @hidden
+     */
+    static propTypes = {
+        defaultValue: PropTypes.string,
+        value: PropTypes.string,
+        onChange: PropTypes.func,
+        onFocus: PropTypes.func,
+        opacity: PropTypes.bool,
+        backgroundColor: PropTypes.string,
+        disabled: PropTypes.bool,
+        style: PropTypes.any,
+        id: PropTypes.string,
+        ariaLabelledBy: PropTypes.string,
+        ariaDescribedBy: PropTypes.string
+    };
+
+    /**
+     * @hidden
+     */
+    static defaultProps = {
+        opacity: true
+    };
+
+    /**
+     * @hidden
+     */
+    wrapper: HTMLDivElement | null = null;
+
+    private gradientWrapper: any;
+    private alphaSlider: any;
+
+    constructor(props: ColorGradientProps) {
+        super(props);
+        validatePackage(packageMetadata);
+
+        const value = props.value || props.defaultValue || parseColor(DEFAULT_SELECTED_COLOR, FORMAT)!;
+        this.state = Object.assign({}, ColorGradientWithoutContext.getStateFromValue(value), { isFirstRender: true, guid: guid() });
+    }
+
+    /**
+     * @hidden
+     */
+    static getDerivedStateFromProps(props: ColorGradientProps, state: ColorGradientState) {
+        if (props.value && !state.isFirstRender) {
+            // The component is in controlled mode.
+            return ColorGradientWithoutContext.getStateFromValue(props.value, state.guid);
+        }
+        return null;
+    }
+
+    /**
+     * @hidden
+     */
+    componentDidMount() {
+        this.setAlphaSliderBackground(this.state.backgroundColor);
+
+        if (this.state.isFirstRender) {
+            this.setState({ isFirstRender: false });
+        }
+    }
+
+    /**
+     * @hidden
+     */
+    componentWillUnmount() {
+        removeCachedColor(this.state.guid);
+    }
+
+    /**
+     * @hidden
+     */
+    componentDidUpdate(_: ColorGradientProps, prevState: ColorGradientState) {
+        if (prevState.backgroundColor !== this.state.backgroundColor) {
+            this.setAlphaSliderBackground(this.state.backgroundColor);
+        }
+    }
+
+    /**
+     * @hidden
+     */
+    onHexChange = (hex: string, value: string, event: any) => {
+        if (this.isUncontrolled) {
+            const hsva = getHSV(value!);
+            this.setState({ hsva, backgroundColor: getColorFromHue(hsva.h!), rgba: getRGBA(value!), hex });
+        } else {
+            cacheHex(this.state.guid, value!, hex);
+        }
+
+        this.dispatchChangeEvent(value!, event, event.nativeEvent);
+    };
+
+    /**
+     * @hidden
+     */
+    onRgbaChange = (rgba: RGBA, event: NumericTextBoxChangeEvent) => {
+        const value = getColorFromRGBA(rgba);
+
+        if (this.isUncontrolled) {
+            const hsva = getHSV(value);
+            const hex = parseColor(value, 'hex')!;
+            this.setState({ hsva, backgroundColor: getColorFromHue(hsva.h!), rgba, hex });
+        } else {
+            cacheRgba(this.state.guid, value, rgba);
+        }
+
+        this.dispatchChangeEvent(value, event.syntheticEvent, event.nativeEvent);
+    };
+
+    /**
+     * @hidden
+     */
+    onAlphaSliderChange = (event: SliderChangeEvent) => {
+        this.handleHsvaChange(
+            Object.assign({}, this.state.hsva, { a: event.value / 100 }),
+            event.syntheticEvent,
+            event.nativeEvent
+        );
+    };
+
+    /**
+     * @hidden
+     */
+    onHueSliderChange = (event: SliderChangeEvent) => {
+        this.handleHsvaChange(
+            Object.assign({}, this.state.hsva, { h: event.value }),
+            event.syntheticEvent,
+            event.nativeEvent
+        );
+    };
+
+    /**
+     * @hidden
+     */
+    onDrag = (e: DraggableDragEvent) => {
+        this.gradientWrapper.classList.add('k-dragging');
+        this.changePosition(e.event);
+    };
+
+    /**
+     * @hidden
+     */
+    onRelease = () => {
+        this.gradientWrapper.classList.remove('k-dragging');
+    };
+
+    /**
+     * @hidden
+     */
+    onGradientWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {
+        this.changePosition(event);
+    };
+
+    /**
+     * @hidden
+     */
+    renderRectangleDragHandle() {
+        let style: any = {};
+        if (!this.state.isFirstRender) {
+            const gradientRectMetrics = this.getGradientRectMetrics();
+            const top = (1 - this.state.hsva.v!) * gradientRectMetrics.height;
+            const left = this.state.hsva.s! * gradientRectMetrics.width;
+
+            style.top = `${top}px`;
+            style.left = `${left}px`;
+        }
+
+        return <div className="k-hsv-draghandle k-draghandle" style={style} />;
+    }
+
+    /**
+     * @hidden
+     */
+    changePosition = (event: any) => {
+        const gradientRectMetrics = this.getGradientRectMetrics();
+
+        const deltaX = event.clientX - gradientRectMetrics.left;
+        const deltaY = event.clientY - gradientRectMetrics.top;
+
+        const left = fitIntoBounds(deltaX, 0, gradientRectMetrics.width);
+        const top = fitIntoBounds(deltaY, 0, gradientRectMetrics.height);
+
+        const hsva = Object.assign(
+            {},
+            this.state.hsva,
+            { s: left / gradientRectMetrics.width, v: 1 - top / gradientRectMetrics.height }
+        );
+
+        this.handleHsvaChange(hsva, event, event.nativeEvent);
+    };
+
+    /**
+     * @hidden
+     */
+    handleHsvaChange(hsva: HSVA, syntheticEvent: React.SyntheticEvent<any>, nativeEvent: any) {
+        const value = getColorFromHSV(hsva);
+
+        if (this.isUncontrolled) {
+            const hex = parseColor(value, 'hex')!;
+            this.setState({ hsva, backgroundColor: getColorFromHue(hsva.h!), rgba: getRGBA(value), hex });
+        } else {
+            cacheHsva(this.state.guid, value, hsva);
+        }
+
+        this.dispatchChangeEvent(value, syntheticEvent, nativeEvent);
+    }
+
+    /**
+     * @hidden
+     */
+    dispatchChangeEvent(value: string, syntheticEvent: React.SyntheticEvent<any>, nativeEvent: any) {
+        if (this.props.onChange) {
+            this.props.onChange.call(
+                undefined,
+                { syntheticEvent, nativeEvent, target: this, value } as ColorGradientChangeEvent
+            );
+        }
+    }
+
+    /**
+     * @hidden
+     */
+    onFocus = (nativeEvent: any) => {
+        if (this.props.onFocus) {
+            this.props.onFocus.call(
+                undefined,
+                { nativeEvent, target: this }
+            );
+        }
+    };
+
+    /**
+     * @hidden
+     */
+    static getStateFromValue(value: string, componentGuid?: string) {
+        if (!isPresent(parseColor(value, 'hex'))) {
+            // Validate/sanitize the input.
+            value = DEFAULT_SELECTED_COLOR;
+        }
+
+        const hsva = getCachedHsva(componentGuid, value) || getHSV(value);
+        const rgba = getCachedRgba(componentGuid, value) || getRGBA(value);
+        const hex = getCachedHex(componentGuid, value) || parseColor(value, 'hex');
+        const backgroundColor = getColorFromHue(hsva.h!);
+
+        return { hsva, backgroundColor, rgba, hex };
+    }
+
+    /**
+     * @hidden
+     */
+    setAlphaSliderBackground(backgroundColor: string) {
+        if (this.props.opacity && this.alphaSlider && this.alphaSlider.sliderTrack) {
+            this.alphaSlider.sliderTrack.style.background = `linear-gradient(to top, transparent, ${backgroundColor})`;
+        }
+    }
+
+    /**
+     * @hidden
+     */
+    get isUncontrolled(): boolean {
+        return this.props.value === undefined;
+    }
+
+    /**
+     * @hidden
+     */
+    getGradientRectMetrics(): ClientRect {
+        return this.gradientWrapper.getBoundingClientRect();
+    }
+
+    /**
+     * @hidden
+     */
+    focus = (): void => {
+        focusFirstFocusableChild(this.wrapper);
+    };
+
+    /**
+     * @hidden
+     */
+    render() {
+        const lS: LocalizationService = provideLocalizationService(this);
+        const className = classNames('k-colorgradient', { 'k-disabled': this.props.disabled });
+
+        return (
+          <div
+            id={this.props.id}
+            className={className}
+            aria-disabled={this.props.disabled ? 'true' : undefined}
+            style={this.props.style}
+            ref={el => this.wrapper = el}
+            tabIndex={getTabIndex(this.props.tabIndex, this.props.disabled)}
+            aria-labelledby={this.props.ariaLabelledBy}
+            aria-describedby={this.props.ariaDescribedBy}
+            onFocus={this.onFocus}
+            >
+            <div className="k-colorgradient-canvas k-hstack">
+              <div className="k-hsv-rectangle" style={{ background: this.state.backgroundColor }}>
+                <Draggable
+                  onDrag={this.onDrag}
+                  onRelease={this.onRelease}
+                  ref={el => this.gradientWrapper = el ? el.element : undefined}
+                        >
+                  <div
+                    className="k-hsv-gradient"
+                    style={{ touchAction: 'none' }}
+                    onClick={this.onGradientWrapperClick}
+                            >
+                    {this.renderRectangleDragHandle()}
+                  </div>
+                </Draggable>
+                {this.props.backgroundColor && !this.state.isFirstRender &&
+                <ColorContrastSvg
+                  metrics={this.gradientWrapper ? this.getGradientRectMetrics() : undefined}
+                  hsva={this.state.hsva}
+                  backgroundColor={this.props.backgroundColor}
+                 />}
+              </div>
+              <div className="k-hsv-controls k-hstack">
+                <Slider
+                  value={this.state.hsva.h}
+                  buttons={false}
+                  vertical={true}
+                  min={0}
+                  max={360}
+                  step={5}
+                  onChange={this.onHueSliderChange}
+                  className="k-hue-slider k-colorgradient-slider"
+                  disabled={this.props.disabled}
+                  ariaLabel={lS.toLanguageString(colorGradientHueSliderLabel, messages[colorGradientHueSliderLabel])}
+                />
+                {this.props.opacity &&
+                <Slider
+                  value={isPresent(this.state.hsva.a) ? this.state.hsva.a! * 100 : 100}
+                  buttons={false}
+                  vertical={true}
+                  min={0}
+                  max={100}
+                  step={1}
+                  ariaLabel={lS.toLanguageString(colorGradientAlphaSliderLabel, messages[colorGradientAlphaSliderLabel])}
+                  onChange={this.onAlphaSliderChange}
+                  className="k-alpha-slider k-colorgradient-slider"
+                  disabled={this.props.disabled}
+                  ref={el => this.alphaSlider = el}
+                />}
+              </div>
+            </div>
+            <ColorInput
+              rgba={this.state.rgba}
+              onRgbaChange={this.onRgbaChange}
+              hex={this.state.hex}
+              onHexChange={this.onHexChange}
+              opacity={this.props.opacity!}
+              disabled={this.props.disabled}
+                />
+            {this.props.backgroundColor && (
+            <ColorContrastLabels
+              bgColor={getRGBA(this.props.backgroundColor)}
+              rgba={this.state.rgba}
+                    />
+                )}
+          </div>
+        );
+    }
+}
+
+
+/**
+ * Represents the PropsContext of the `ColorGradient` component.
+ * Used for global configuration of all `ColorGradient` instances.
+ *
+ * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
+ */
+export const ColorGradientPropsContext = createPropsContext<ColorGradientProps>();
+
+/**
+ * Represent the `ref` of the ColorGradient component.
+ */
+export interface ColorGradientHandle extends Pick<ColorGradientWithoutContext, keyof ColorGradientWithoutContext> { }
+
+/** @hidden */
+export type ColorGradient = ColorGradientHandle;
+
+/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
+/**
+ * Represents the [KendoReact ColorGradient component]({% slug overview_colorgradient %}).
+ *
+ * Accepts properties of type [ColorGradientProps]({% slug api_inputs_colorgradientprops %}).
+ * Obtaining the `ref` returns an object of type [ColorGradientHandle]({% slug api_inputs_colorgradienthandle %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *     render() {
+ *         return <ColorGradient />;
+ *     }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export const ColorGradient = withPropsContext(ColorGradientPropsContext, ColorGradientWithoutContext);
+
+ColorGradient.displayName = 'KendoReactColorGradient';

package/src/colors/ColorInput.tsx

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { NumericTextBox, NumericTextBoxChangeEvent } from '../main';
+import { RGBA } from './models/rgba';
+import HexInput from './HexInput';
+
+import { Button } from '@progress/kendo-react-buttons';
+import { Label } from '@progress/kendo-react-labels';
+import {
+    registerForIntl, registerForLocalization,
+    LocalizationService, provideLocalizationService
+} from '@progress/kendo-react-intl';
+import {
+    messages, colorGradientR, colorGradientHex,
+    colorGradientA, colorGradientB, colorGradientG,
+    colorGradientToggleInputsButton
+} from '../messages';
+
+/**
+ * @hidden
+ */
+export interface ColorInputProps {
+    rgba: RGBA;
+    onRgbaChange: (rgba: RGBA, event: NumericTextBoxChangeEvent) => void;
+    hex: string;
+    onHexChange: any;
+    opacity: boolean;
+    disabled?: boolean;
+
+}
+
+/**
+ * @hidden
+ */
+const modes = [ 'rgba', 'rgb', 'hex' ];
+
+/**
+ * @hidden
+ */
+export default class ColorInput extends React.Component<ColorInputProps, {}> {
+    state = {
+        inputMode: modes[1]
+    };
+
+    render() {
+        const localizationService: LocalizationService = provideLocalizationService(this);
+
+        const hexMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientHex]);
+        const rMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientR]);
+        const gMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientG]);
+        const bMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientB]);
+        const aMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientA]);
+        const toggleButtonMessage = localizationService.toLanguageString(colorGradientToggleInputsButton, messages[colorGradientToggleInputsButton]);
+
+        return (
+          <div className="k-colorgradient-inputs k-hstack">
+            <div className="k-vstack">
+              <Button
+                aria-label={toggleButtonMessage}
+                fillMode={'flat'}
+                icon={'arrows-kpi'}
+                className="k-colorgradient-toggle-mode k-icon-button"
+                onClick={this.onToggleModeChange.bind(this)} />
+            </div>
+
+            {this.state.inputMode === 'hex' &&
+              <div className="k-vstack k-flex-1">
+                <span className="k-hex-value k-textbox k-input">
+                  <HexInput
+                    hex={this.props.hex}
+                    onHexChange={this.props.onHexChange}
+                    disabled={this.props.disabled}
+                      />
+                </span>
+                <Label className="k-colorgradient-input-label">{hexMessage}</Label>
+              </div >
+            }
+
+            { (this.state.inputMode === 'rgb' || this.state.inputMode === 'rgba') &&
+            <>
+              <div className="k-vstack">
+                <NumericTextBox
+                  inputType={'number'}
+                  value={this.props.rgba.r}
+                  ariaLabel={String(this.props.rgba.r)}
+                  min={0}
+                  max={255}
+                  spinners={false}
+                  format="n"
+                  onChange={this.onRgbaRChange}
+                  disabled={this.props.disabled}
+                    />
+                <Label className="k-colorgradient-input-label">{rMessage}</Label>
+              </div>
+              <div className="k-vstack">
+                <NumericTextBox
+                  inputType={'number'}
+                  value={this.props.rgba.g}
+                  ariaLabel={String(this.props.rgba.g)}
+                  min={0}
+                  max={255}
+                  spinners={false}
+                  format="n"
+                  onChange={this.onRgbaGChange}
+                  disabled={this.props.disabled}
+                    />
+                <Label className="k-colorgradient-input-label">{gMessage}</Label>
+              </div>
+              <div className="k-vstack">
+                <NumericTextBox
+                  inputType={'number'}
+                  value={this.props.rgba.b}
+                  ariaLabel={String(this.props.rgba.b)}
+                  min={0}
+                  max={255}
+                  spinners={false}
+                  format="n"
+                  onChange={this.onRgbaBChange}
+                  disabled={this.props.disabled}
+                    />
+                <Label className="k-colorgradient-input-label">{bMessage}</Label>
+              </div>
+              </>
+            }
+
+            { this.state.inputMode === 'rgba' &&
+              <div className="k-vstack">
+                {this.props.opacity &&
+                <NumericTextBox
+                  inputType={'number'}
+                  value={this.props.rgba.a}
+                  ariaLabel={String(this.props.rgba.a)}
+                  min={0}
+                  max={1}
+                  step={0.01}
+                  spinners={false}
+                  format="n2"
+                  onChange={this.onRgbaAChange}
+                  disabled={this.props.disabled}
+                      />}
+                {this.props.opacity && (<Label className="k-colorgradient-input-label">{aMessage}</Label>)}
+              </div>
+            }
+          </div>
+        );
+    }
+
+    private onRgbaRChange = (event: NumericTextBoxChangeEvent) => {
+        this.dispatchRgbaChange({ r: event.value! }, event);
+    };
+    private onRgbaGChange = (event: NumericTextBoxChangeEvent) => {
+        this.dispatchRgbaChange({ g: event.value! }, event);
+    };
+    private onRgbaBChange = (event: NumericTextBoxChangeEvent) => {
+        this.dispatchRgbaChange({ b: event.value! }, event);
+    };
+    private onRgbaAChange = (event: NumericTextBoxChangeEvent) => {
+        this.dispatchRgbaChange({ a: event.value! }, event);
+    };
+
+    private dispatchRgbaChange(newValue: RGBA, event: NumericTextBoxChangeEvent) {
+        let rgba = { ...this.props.rgba };
+
+        if (newValue.r !== undefined) {
+            rgba.r = newValue.r;
+        }
+        if (newValue.g !== undefined) {
+            rgba.g = newValue.g;
+        }
+        if (newValue.b !== undefined) {
+            rgba.b = newValue.b;
+        }
+        if (newValue.a !== undefined) {
+            rgba.a = newValue.a;
+        }
+
+        this.props.onRgbaChange(rgba, event);
+    };
+
+    private onToggleModeChange() {
+        const index = modes.length - 1 === modes.indexOf(this.state.inputMode) ? 0 : modes.indexOf(this.state.inputMode) + 1;
+
+        if (!this.props.opacity) {
+            const nextIndex = modes[index] === 'rgba' ? index + 1 : index;
+            this.setState({ inputMode: modes[nextIndex] });
+        } else {
+            this.setState({ inputMode: modes[index] });
+        }
+    }
+}
+
+registerForIntl(ColorInput);
+registerForLocalization(ColorInput);