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

package/src/colors/ColorPalette.tsx

@@ -1,329 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { ColorPaletteService } from './utils/color-palette.service';
-import { TableCell } from './models/table-cell';
-import { classNames, Keys, dispatchEvent, guid, getTabIndex, withPropsContext, createPropsContext } from '@progress/kendo-react-common';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-import { PALETTEPRESETS } from './models/palette-presets';
-import { isPresent } from './utils/misc';
-import { parseColor } from './utils/color-parser';
-import { ColorPaletteProps } from './interfaces/ColorPaletteProps';
-
-/**
- * @hidden
- */
-export const DEFAULT_TILE_SIZE = 24;
-/**
- * @hidden
- */
-export const DEFAULT_COLUMNS_COUNT = 10;
-/**
- * @hidden
- */
-export const DEFAULT_PRESET = 'office';
-
-/**
- * @hidden
- */
-export interface ColorPaletteState {
-    selectedColor?: string;
-    focusedColor?: string;
-    isFirstRender: boolean;
-}
-
-/** @hidden */
-export class ColorPaletteWithoutContext extends React.Component<ColorPaletteProps, ColorPaletteState> {
-    static displayName = 'ColorPalette';
-    /**
-     * @hidden
-     */
-    static propTypes = {
-        palette: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.string]),
-        columns: PropTypes.number,
-        tileSize: PropTypes.any,
-        defaultValue: PropTypes.string,
-        value: PropTypes.string,
-        disabled: PropTypes.bool,
-        tabIndex: PropTypes.number,
-        onChange: PropTypes.func,
-        onFocus: PropTypes.func,
-        id: PropTypes.string,
-        ariaLabelledBy: PropTypes.string,
-        ariaDescribedBy: PropTypes.string
-    };
-
-    /**
-     * @hidden
-     */
-    static defaultProps = {
-        palette: DEFAULT_PRESET,
-        tileSize: DEFAULT_TILE_SIZE
-    };
-
-    /**
-     * @hidden
-     */
-    wrapper: HTMLDivElement | null = null;
-
-    private paletteService: ColorPaletteService | null = null;
-    private guid = guid();
-
-    constructor(props: ColorPaletteProps) {
-        super(props);
-        validatePackage(packageMetadata);
-
-        // The empty string for the `value` prop means no selection but controlled mode.
-        this.state = {
-            selectedColor: this.props.value !== undefined ? this.props.value : this.props.defaultValue,
-            isFirstRender: true
-        };
-    }
-
-    /**
-     * @hidden
-     */
-    focus = () => {
-        if (this.wrapper) {
-            this.wrapper.focus();
-        }
-    };
-
-    /**
-     * @hidden
-     */
-    render() {
-        const paletteInfo = this.getPaletteInfo();
-        const svc = this.paletteService = new ColorPaletteService();
-        svc.setColorMatrix(paletteInfo.colors, paletteInfo.columns);
-        const selectedCellCoords = svc.getCellCoordsFor(this.state.selectedColor);
-        const focusedCellCoords = svc.getCellCoordsFor(this.state.focusedColor);
-        const className = classNames('k-colorpalette', { 'k-disabled': this.props.disabled });
-
-        if (paletteInfo.colors.length) {
-            return (
-              <div
-                id={this.props.id}
-                className={className}
-                onFocus={this.onFocus}
-                onBlur={this.onBlur}
-                onKeyDown={this.onKeyDown}
-                aria-disabled={this.props.disabled ? 'true' : undefined}
-                aria-labelledby={this.props.ariaLabelledBy}
-                aria-describedby={this.props.ariaDescribedBy}
-                tabIndex={getTabIndex(this.props.tabIndex, this.props.disabled)}
-                ref={el => this.wrapper = el}
-                >
-                <div className="k-colorpalette-table-wrap" role="grid">
-                  <table className="k-colorpalette-table k-palette" role="presentation">
-                    <tbody role="rowgroup">
-                      {this.renderRows(svc.colorRows, selectedCellCoords, focusedCellCoords)}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            );
-        } else {
-            // In this way, the code prevents an eventual focus of the component when no cells are available.
-            // This is needed because upon focus the first cell gets focused.
-            return '';
-        }
-    }
-
-    /**
-     * @hidden
-     */
-    static getDerivedStateFromProps(props: ColorPaletteProps, state: ColorPaletteState) {
-        if (!state.isFirstRender && props.value !== undefined) {
-            // The component is in controlled mode.
-            if (props.value === '' && state.selectedColor !== undefined) {
-                // The selection has to be removed.
-                return { selectedColor: undefined };
-            } else if (props.value !== '' && props.value !== state.selectedColor) {
-                return { selectedColor: props.value };
-            }
-        } else if (state.isFirstRender) {
-            return { isFirstRender: false };
-        }
-
-        return null;
-    }
-
-    private onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
-        switch (event.keyCode) {
-            case Keys.down: this.handleCellNavigation(0, 1); break;
-            case Keys.up: this.handleCellNavigation(0, -1); break;
-            case Keys.right: this.handleCellNavigation(1, 0); break;
-            case Keys.left: this.handleCellNavigation(-1, 0); break;
-            case Keys.enter: this.handleEnter(event); break;
-            default: return;
-        }
-
-        event.preventDefault();
-    };
-
-    private onColorClick = (color: string, event: React.SyntheticEvent<any>) => {
-        if (this.isUncontrolled) {
-            this.setState({ selectedColor: color, focusedColor: color });
-        } else {
-            this.setState({ focusedColor: color });
-        }
-        this.dispatchChangeEvent(color, event);
-    };
-
-    private onFocus = (nativeEvent: any) => {
-        if (!this.paletteService) {
-            return;
-        }
-        this.setState({ focusedColor: this.state.selectedColor || this.paletteService.colorRows[0][0] });
-        if (this.props.onFocus) {
-            this.props.onFocus.call(
-                undefined,
-                nativeEvent
-            );
-        }
-    };
-
-    private onBlur = () => {
-        this.setState({ focusedColor: undefined });
-    };
-
-    private handleCellNavigation(horizontalStep: number, verticalStep: number): void {
-        if (!this.paletteService) {
-            return;
-        }
-        if (this.focusedColorCooridanates) {
-            const newCoords = this.paletteService.getNextCell(
-                this.focusedColorCooridanates,
-                horizontalStep,
-                verticalStep
-            );
-
-            this.setState({ focusedColor: this.paletteService.getColorAt(newCoords) });
-        } else {
-            this.setState({ focusedColor: this.paletteService.colorRows[0][0] });
-        }
-    }
-
-    private handleEnter(event: React.KeyboardEvent<HTMLElement>): void {
-        if (this.isUncontrolled) {
-            this.setState({ selectedColor: this.state.focusedColor });
-        }
-        this.dispatchChangeEvent(this.state.focusedColor!, event);
-    }
-
-    private dispatchChangeEvent(value: string, event: React.SyntheticEvent<any>) {
-        dispatchEvent(this.props.onChange, event, this, { value, rgbaValue: parseColor(value, 'rgba')! });
-    }
-
-    private get focusedColorCooridanates(): TableCell | undefined {
-        return this.state.focusedColor && this.paletteService ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : undefined;
-    }
-
-    private get isUncontrolled(): boolean {
-        return this.props.value === undefined;
-    }
-
-    private getPaletteInfo() {
-        if (typeof this.props.palette === 'string') {
-            const preset = PALETTEPRESETS[this.props.palette as keyof typeof PALETTEPRESETS];
-            if (isPresent(preset)) {
-                return {
-                    colors: preset.colors,
-                    columns: this.props.columns || preset.columns || DEFAULT_COLUMNS_COUNT
-                };
-            } else {
-                return { colors: [], columns: 0 };
-            }
-        } else {
-            return { colors: this.props.palette || [], columns: this.props.columns || DEFAULT_COLUMNS_COUNT };
-        }
-    }
-
-    private renderRows(rows: string[][], selectedCellCoords?: TableCell, focusedCellCoords?: TableCell) {
-        return rows.map((row, i) => {
-            return <tr role="row" key={i}>{this.renderColumns(row, i, selectedCellCoords, focusedCellCoords)}</tr>;
-        });
-    }
-
-    private renderColumns(
-        columns: string[],
-        rowIndex: number,
-        selectedCellCoords?: TableCell,
-        focusedCellCoords?: TableCell
-    ) {
-        const rowIsSelected = selectedCellCoords !== undefined && selectedCellCoords.row === rowIndex;
-        const selectedColumn = selectedCellCoords && selectedCellCoords.col;
-        const rowIsFocused = focusedCellCoords !== undefined && focusedCellCoords.row === rowIndex;
-        const focusedColumn = focusedCellCoords && focusedCellCoords.col;
-        const tileSize = typeof this.props.tileSize !== 'number' ?
-            this.props.tileSize : { width: this.props.tileSize, height: this.props.tileSize };
-        const width = tileSize!.width + 'px';
-        const height = tileSize!.height + 'px';
-
-        return columns.map((color, i) => {
-            const isSelected = rowIsSelected && selectedColumn === i;
-            const className = classNames(
-                'k-colorpalette-tile',
-                {
-                    'k-selected': isSelected,
-                    'k-focus': rowIsFocused && focusedColumn === i
-                }
-            );
-
-            return (
-              <td
-                role="gridcell"
-                className={className}
-                aria-label={color}
-                aria-selected={isSelected ? true : this.props.disabled ? undefined : false}
-                style={{ backgroundColor: color, width, height, minWidth: width }}
-                onClick={event => this.onColorClick(color, event)}
-                id={this.createCellId({ row: rowIndex, col: i })}
-                key={i}
-                />
-            );
-        });
-    }
-
-    private createCellId(cellCoords: TableCell) {
-        return `${this.guid}_${cellCoords.row}_${cellCoords.col}`;
-    }
-}
-
-/**
- * Represents the PropsContext of the `ColorPalette` component.
- * Used for global configuration of all `ColorPalette` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-export const ColorPalettePropsContext = createPropsContext<ColorPaletteProps>();
-
-/**
- * Represent the `ref` of the ColorPalette component.
- */
-export interface ColorPaletteHandle extends Pick<ColorPaletteWithoutContext, keyof ColorPaletteWithoutContext> { }
-
-/** @hidden */
-export type ColorPalette = ColorPaletteHandle;
-
-/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
-
-
-/**
- * Represents the [KendoReact ColorPalette component]({% slug overview_colorpalette %}).
- *
- * Accepts properties of type [ColorPaletteProps]({% slug api_inputs_colorpaletteprops %}).
- * Obtaining the `ref` returns an object of type [ColorPaletteHandle]({% slug api_inputs_colorpalettehandle %}).
- *
- * ```jsx
- * class App extends React.Component {
- *     render() {
- *         return <ColorPalette palette='basic' />;
- *     }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export const ColorPalette = withPropsContext(ColorPalettePropsContext, ColorPaletteWithoutContext);
-ColorPalette.displayName = 'KendoReactColorPalette';