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

package/src/colors/ColorGradient.tsx

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

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