Merge pull request #14589 from LKay/lkay/react-color-update

Update definitions for react-color

react-color/index.d.ts

@@ -1,249 +1,58 @@
-// Type definitions for react-color v2.3.4
-// Project: https://casesandberg.github.io/react-color/
+// Type definitions for react-color 2.11
+// Project: https://github.com/casesandberg/react-color/
 // Definitions by: Karol Janyst <https://github.com/LKay>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.1
 
-///<reference types="react" />
+import { ComponentClass, ClassAttributes, StatelessComponent, ReactNode } from "react";
 
-declare namespace ReactColor {
-    interface HSLColor {
-        a?: number
-        h: number
-        l: number
-        s: number
-    }
-
-    interface RGBColor {
-        a?: number
-        b: number
-        g: number
-        r: number
-    }
-
-    type Color = string | HSLColor | RGBColor
-
-    interface ColorResult {
-        hex: string
-        hsl: HSLColor
-        rgb: RGBColor
-    }
-
-    type ColorChangeHandler = (color: ColorResult) => void
-
-    interface ColorPickerProps<A> extends React.ClassAttributes<A> {
-        color?: Color
-        onChange?: ColorChangeHandler
-        onChangeComplete?: ColorChangeHandler
-    }
-
-    /* Predefined pickers */
-    interface AlphaPickerProps extends ColorPickerProps<AlphaPicker> {
-        height?: string
-        width?: string
-    }
-    interface AlphaPicker extends React.ComponentClass<AlphaPickerProps> {}
-    const AlphaPicker: AlphaPicker
-
-    interface BlockPickerProps extends ColorPickerProps<BlockPicker> {
-        colors?: Array<string>
-        width?: string
-    }
-    interface BlockPicker extends React.ComponentClass<BlockPickerProps> {}
-    const BlockPicker: BlockPicker
-
-    interface ChromePickerProps extends ColorPickerProps<ChromePicker> {
-        disableAlpha?: boolean
-    }
-    interface ChromePicker extends React.ComponentClass<ChromePickerProps> {}
-    const ChromePicker: ChromePicker
-
-    interface CirclePickerProps extends ColorPickerProps<CirclePicker> {
-        colors?: Array<string>
-        width?: string
-    }
-    interface CirclePicker extends React.ComponentClass<CirclePickerProps> {}
-    const CirclePicker: CirclePicker
-
-    interface CompactPickerProps extends ColorPickerProps<CompactPicker> {
-        colors?: Array<string>
-    }
-    interface CompactPicker extends React.ComponentClass<CompactPickerProps> {}
-    const CompactPicker: CompactPicker
-
-    interface GithubPickerProps extends ColorPickerProps<GithubPicker> {
-        colors?: Array<string>
-        width?: string
-    }
-    interface GithubPicker extends React.ComponentClass<GithubPickerProps> {}
-    const GithubPicker: GithubPicker
-
-    interface HuePickerProps extends ColorPickerProps<HuePicker> {
-        height?: string
-        width?: string
-    }
-    interface HuePicker extends React.ComponentClass<HuePickerProps> {}
-    const HuePicker: HuePicker
-
-    interface MaterialPickerProps extends ColorPickerProps<MaterialPicker> {}
-    interface MaterialPicker extends React.ComponentClass<MaterialPickerProps> {}
-    const MaterialPicker: MaterialPicker
-
-    interface PhotoshopPickerProps extends ColorPickerProps<PhotoshopPicker> {
-        header?: string
-        onAccept?: ColorChangeHandler
-        onCancel?: ColorChangeHandler
-    }
-    interface PhotoshopPicker extends React.ComponentClass<PhotoshopPickerProps> {}
-    const PhotoshopPicker: PhotoshopPicker
-
-    interface SketchPickerProps extends ColorPickerProps<SketchPicker> {
-        disableAlpha?: boolean
-        presetColors?: Array<string>
-        width?: string
-    }
-    interface SketchPicker extends React.ComponentClass<SketchPickerProps> {}
-    const SketchPicker: SketchPicker
-
-    interface SliderPickerProps extends ColorPickerProps<SliderPicker> {}
-    interface SliderPicker extends React.ComponentClass<SliderPickerProps> {}
-    const SliderPicker: SliderPicker
-
-    interface SwatchesPickerProps extends ColorPickerProps<SwatchesPicker> {
-        colors?: Array<Array<string>>
-        height?: number
-        width?: number
-    }
-    interface SwatchesPicker extends React.ComponentClass<SwatchesPickerProps> {}
-    const SwatchesPicker: SwatchesPicker
-
-    interface TwitterPickerProps extends ColorPickerProps<TwitterPicker> {}
-    interface TwitterPicker extends React.ComponentClass<TwitterPickerProps> {}
-    const TwitterPicker: TwitterPicker
-
-    /* For custom picker */
-    interface InjectedColorProps {
-        hex?: string
-        hsl?: HSLColor
-        rgb?: RGBColor
-        onChange?: ColorChangeHandler
-    }
-
-    function CustomPicker<A>(component: React.ComponentClass<A> | React.StatelessComponent<A>): React.ComponentClass<A & InjectedColorProps>
-
-    interface CustomPickerProps<A> extends React.ClassAttributes<A> {
-        color?: Color
-        pointer?: React.ReactNode
-        onChange?: ColorChangeHandler
-    }
-
-    interface AlphaProps extends CustomPickerProps<Alpha> {}
-    interface Alpha extends React.ComponentClass<AlphaProps> {}
-    const Alpha: Alpha
-
-    interface EditableInputStyles {
-        input?: React.CSSProperties
-        label?: React.CSSProperties
-        wrap?: React.CSSProperties
-    }
-    interface EditableInputProps extends React.ClassAttributes<Alpha> {
-        color?: Color
-        label?: string
-        onChange?: ColorChangeHandler
-        styles?: EditableInputStyles
-        value?: any
-    }
-    interface EditableInput extends React.ComponentClass<EditableInputProps> {}
-    const EditableInput: EditableInput
-
-    interface HueProps extends CustomPickerProps<Hue> {
-        direction?: "horizontal" | "vertical"
-    }
-    interface Hue extends React.ComponentClass<HueProps> {}
-    const Hue: Hue
-
-    interface SaturationProps extends CustomPickerProps<Saturation> {}
-    interface Saturation extends React.ComponentClass<SaturationProps> {}
-    const Saturation: Saturation
-
-    interface CheckboardProps extends React.ClassAttributes<Checkboard> {
-        grey?: string
-        size?: number
-        white?: string
-    }
-    interface Checkboard extends React.ComponentClass<CheckboardProps> {}
-    const Checkboard: Checkboard
+export interface HSLColor {
+    a?: number;
+    h: number;
+    l: number;
+    s: number;
 }
 
-declare module "react-color/lib/components/common/Alpha" { export default ReactColor.Alpha }
-declare module "react-color/lib/components/common/Checkboard" { export default ReactColor.Checkboard }
-declare module "react-color/lib/components/common/EditableInput" { export default ReactColor.EditableInput }
-declare module "react-color/lib/components/common/Hue" { export default ReactColor.Hue }
-declare module "react-color/lib/components/common/Saturation" { export default ReactColor.Saturation }
-declare module "react-color/lib/components/common/ColorWrap" { export default ReactColor.CustomPicker }
-
-declare module "react-color/lib/components/common" {
-    import Alpha from "react-color/lib/components/common/Alpha"
-    import Checkboard from "react-color/lib/components/common/Checkboard"
-    import EditableInput from "react-color/lib/components/common/EditableInput"
-    import Hue from "react-color/lib/components/common/Hue"
-    import Saturation from "react-color/lib/components/common/Saturation"
-
-    export {
-        Alpha,
-        Checkboard,
-        EditableInput,
-        Hue,
-        Saturation
-    }
+export interface RGBColor {
+    a?: number;
+    b: number;
+    g: number;
+    r: number;
 }
 
-declare module "react-color/lib/components/alpha/Alpha" { export default ReactColor.AlphaPicker }
-declare module "react-color/lib/components/block/Block" { export default ReactColor.BlockPicker }
-declare module "react-color/lib/components/chrome/Chrome" { export default ReactColor.ChromePicker }
-declare module "react-color/lib/components/circle/Circle" { export default ReactColor.CirclePicker }
-declare module "react-color/lib/components/compact/Compact" { export default ReactColor.CompactPicker }
-declare module "react-color/lib/components/github/Github" { export default ReactColor.GithubPicker }
-declare module "react-color/lib/components/hue/Hue" { export default ReactColor.HuePicker }
-declare module "react-color/lib/components/meterial/Material" { export default ReactColor.MaterialPicker }
-declare module "react-color/lib/components/photoshop/Photoshop" { export default ReactColor.PhotoshopPicker }
-declare module "react-color/lib/components/sketch/Sketch" { export default ReactColor.SketchPicker }
-declare module "react-color/lib/components/slider/Slider" { export default ReactColor.SliderPicker }
-declare module "react-color/lib/components/swatches/Swatches" { export default ReactColor.SwatchesPicker }
-declare module "react-color/lib/components/twitter/Twitter" { export default ReactColor.TwitterPicker }
+export type Color = string | HSLColor | RGBColor;
 
-declare module "react-color" {
-    import AlphaPicker from "react-color/lib/components/alpha/Alpha"
-    import BlockPicker from "react-color/lib/components/block/Block"
-    import ChromePicker from "react-color/lib/components/chrome/Chrome"
-    import CirclePicker from "react-color/lib/components/circle/Circle"
-    import CompactPicker from "react-color/lib/components/compact/Compact"
-    import GithubPicker from "react-color/lib/components/github/Github"
-    import HuePicker from "react-color/lib/components/hue/Hue"
-    import MaterialPicker from "react-color/lib/components/meterial/Material"
-    import PhotoshopPicker from "react-color/lib/components/photoshop/Photoshop"
-    import SketchPicker from "react-color/lib/components/sketch/Sketch"
-    import SliderPicker from "react-color/lib/components/slider/Slider"
-    import SwatchesPicker from "react-color/lib/components/swatches/Swatches"
-    import TwitterPicker from "react-color/lib/components/twitter/Twitter"
-    import CustomPicker from "react-color/lib/components/common/ColorWrap"
-
-    export type CustomPickerProps<A> = ReactColor.CustomPickerProps<A>
-
-    export {
-        AlphaPicker,
-        BlockPicker,
-        ChromePicker,
-        CirclePicker,
-        CompactPicker,
-        GithubPicker,
-        HuePicker,
-        MaterialPicker,
-        PhotoshopPicker,
-        SketchPicker,
-        SliderPicker,
-        SwatchesPicker,
-        TwitterPicker,
-        CustomPicker
-    }
+export interface ColorResult {
+    hex: string;
+    hsl: HSLColor;
+    rgb: RGBColor;
 }
+
+export type ColorChangeHandler = (color: ColorResult) => void;
+
+export interface ColorPickerProps<A> extends ClassAttributes<A> {
+    color?: Color;
+    onChange?: ColorChangeHandler;
+    onChangeComplete?: ColorChangeHandler;
+}
+
+export interface CustomPickerProps<A> extends ClassAttributes<A> {
+    color?: Color;
+    pointer?: ReactNode;
+    onChange: ColorChangeHandler;
+}
+
+export { default as AlphaPicker, AlphaPickerProps } from "react-color/lib/components/alpha/Alpha";
+export { default as BlockPicker, BlockPickerProps } from "react-color/lib/components/block/Block";
+export { default as ChromePicker, ChromePickerProps } from "react-color/lib/components/chrome/Chrome";
+export { default as CirclePicker, CirclePickerProps } from "react-color/lib/components/circle/Circle";
+export { default as CompactPicker, CompactPickerProps } from "react-color/lib/components/compact/Compact";
+export { default as GithubPicker, GithubPickerProps } from "react-color/lib/components/github/Github";
+export { default as HuePicker, HuePickerProps } from "react-color/lib/components/hue/Hue";
+export { default as MaterialPicker, MaterialPickerProps } from "react-color/lib/components/material/Material";
+export { default as PhotoshopPicker, PhotoshopPickerProps } from "react-color/lib/components/photoshop/Photoshop";
+export { default as SketchPicker, SketchPickerProps } from "react-color/lib/components/sketch/Sketch";
+export { default as SliderPicker, SliderPickerProps } from "react-color/lib/components/slider/Slider";
+export { default as SwatchesPicker, SwatchesPickerProps } from "react-color/lib/components/swatches/Swatches";
+export { default as TwitterPicker, TwitterPickerProps } from "react-color/lib/components/twitter/Twitter";
+export { default as CustomPicker, InjectedColorProps } from "react-color/lib/components/common/ColorWrap";

react-color/lib/components/alpha/Alpha.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "react";
+import { ColorPickerProps } from "react-color";
+
+export interface AlphaPickerProps extends ColorPickerProps<AlphaPicker> {
+    height?: string;
+    width?: string;
+}
+
+export default class AlphaPicker extends Component<AlphaPickerProps, any> {}

react-color/lib/components/block/Block.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "react";
+import { ColorPickerProps } from "react-color";
+
+export interface BlockPickerProps extends ColorPickerProps<BlockPicker> {
+    colors?: string[];
+    width?: string;
+}
+
+export default class BlockPicker extends Component<BlockPickerProps, any> {}

react-color/lib/components/chrome/Chrome.d.ts

@@ -0,0 +1,8 @@
+import { Component } from "react";
+import { ColorPickerProps } from "react-color";
+
+export interface ChromePickerProps extends ColorPickerProps<ChromePicker> {
+    disableAlpha?: boolean;
+}
+
+export default class ChromePicker extends Component<ChromePickerProps, any> {}

react-color/lib/components/circle/Circle.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "react";
+import { ColorPickerProps } from "react-color";
+
+export interface CirclePickerProps extends ColorPickerProps<CirclePicker> {
+    colors?: string[];
+    width?: string;
+}
+
+export default class CirclePicker extends Component<CirclePickerProps, any> {}

react-color/lib/components/common/Alpha.d.ts

@@ -0,0 +1,6 @@
+import { Component } from "react";
+import { CustomPickerProps } from "react-color";
+
+export type AlphaProps = CustomPickerProps<Alpha>;
+
+export default class Alpha extends Component<AlphaProps, any> {}

react-color/lib/components/common/Checkboard.d.ts

@@ -0,0 +1,9 @@
+import { Component, ClassAttributes } from "react";
+
+export interface CheckboardProps extends ClassAttributes<Checkboard> {
+    grey?: string;
+    size?: number;
+    white?: string;
+}
+
+export default class Checkboard extends Component<CheckboardProps, any> {}

react-color/lib/components/common/ColorWrap.d.ts

@@ -0,0 +1,11 @@
+import { ComponentClass, StatelessComponent } from "react";
+import { HSLColor, RGBColor, ColorChangeHandler } from "react-color";
+
+export interface InjectedColorProps {
+    hex?: string;
+    hsl?: HSLColor;
+    rgb?: RGBColor;
+    onChange?: ColorChangeHandler;
+}
+
+export default function CustomPicker<A>(component: ComponentClass<A> | StatelessComponent<A>): ComponentClass<A & InjectedColorProps>;

react-color/lib/components/common/EditableInput.d.ts

@@ -0,0 +1,19 @@
+import { Component, ClassAttributes, CSSProperties } from "react";
+import { Color, ColorChangeHandler } from "react-color";
+
+export interface EditableInputStyles {
+    input?: CSSProperties;
+    label?: CSSProperties;
+    wrap?: CSSProperties;
+}
+
+export interface EditableInputProps extends ClassAttributes<EditableInput> {
+    color?: Color;
+    label?: string;
+    onChange?: ColorChangeHandler;
+    styles?: EditableInputStyles;
+    value?: any;
+}
+
+export default class EditableInput extends Component<EditableInputProps, any> {}
+

react-color/lib/components/common/Hue.d.ts

@@ -0,0 +1,8 @@
+import { Component } from "react";
+import { CustomPickerProps } from "react-color";
+
+export interface HueProps extends CustomPickerProps<Hue> {
+    direction?: "horizontal" | "vertical";
+}
+
+export default class Hue extends Component<HueProps, any> {}

react-color/lib/components/common/Saturation.d.ts

@@ -0,0 +1,6 @@
+import { Component } from "react";
+import { CustomPickerProps } from "react-color";
+
+export type SaturationProps = CustomPickerProps<Saturation>;
+
+export default class Saturation extends Component<SaturationProps, any> {}

react-color/lib/components/common/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Alpha } from "react-color/lib/components/common/Alpha";
+export { default as Checkboard } from "react-color/lib/components/common/Checkboard";
+export { default as EditableInput } from "react-color/lib/components/common/EditableInput";
+export { default as Hue } from "react-color/lib/components/common/Hue";
+export { default as Saturation } from "react-color/lib/components/common/Saturation";

react-color/lib/components/compact/Compact.d.ts

@@ -0,0 +1,8 @@
+import { Component } from "react";
+import { ColorPickerProps } from "react-color";
+
+export interface CompactPickerProps extends ColorPickerProps<CompactPicker> {
+    colors?: string[];
+}
+
+export default class CompactPicker extends Component<CompactPickerProps, any> {}

react-color/lib/components/github/Github.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "react";
+import { ColorPickerProps } from "react-color";
+
+export interface GithubPickerProps extends ColorPickerProps<GithubPicker> {
+    colors?: string[];
+    width?: string;
+}
+
+export default class GithubPicker extends Component<GithubPickerProps, any> {}

react-color/lib/components/hue/Hue.d.ts

@@ -0,0 +1,9 @@
+import { Component } from "react";
+import { ColorPickerProps } from "react-color";
+
+export interface HuePickerProps extends ColorPickerProps<HuePicker> {
+    height?: string;
+    width?: string;
+}
+
+export default class HuePicker extends Component<HuePickerProps, any> {}

react-color/lib/components/material/Material.d.ts

@@ -0,0 +1,6 @@
+import { Component } from "react";
+import { ColorPickerProps } from "react-color";
+
+export type MaterialPickerProps = ColorPickerProps<MaterialPicker>;
+
+export default class MaterialPicker extends Component<MaterialPickerProps, any> {}

react-color/lib/components/photoshop/Photoshop.d.ts

@@ -0,0 +1,10 @@
+import { Component } from "react";
+import { ColorChangeHandler, ColorPickerProps } from "react-color";
+
+export interface PhotoshopPickerProps extends ColorPickerProps<PhotoshopPicker> {
+    header?: string;
+    onAccept?: ColorChangeHandler;
+    onCancel?: ColorChangeHandler;
+}
+
+export default class PhotoshopPicker extends Component<PhotoshopPickerProps, any> {}

react-color/lib/components/sketch/Sketch.d.ts

@@ -0,0 +1,10 @@
+import { Component } from "react";
+import { ColorPickerProps } from "react-color";
+
+export interface SketchPickerProps extends ColorPickerProps<SketchPicker> {
+    disableAlpha?: boolean;
+    presetColors?: string[];
+    width?: string;
+}
+
+export default class SketchPicker extends Component<SketchPickerProps, any> {}

react-color/lib/components/slider/Slider.d.ts

@@ -0,0 +1,6 @@
+import { Component } from "react";
+import { ColorPickerProps } from "react-color";
+
+export type SliderPickerProps = ColorPickerProps<SliderPicker>;
+
+export default class SliderPicker extends Component<SliderPickerProps, any> {}

react-color/lib/components/swatches/Swatches.d.ts

@@ -0,0 +1,10 @@
+import { Component } from "react";
+import { ColorPickerProps } from "react-color";
+
+export interface SwatchesPickerProps extends ColorPickerProps<SwatchesPicker> {
+    colors?: string[][];
+    height?: number;
+    width?: number;
+}
+
+export default class SwatchesPicker extends Component<SwatchesPickerProps, any> {}

react-color/lib/components/twitter/Twitter.d.ts

@@ -0,0 +1,6 @@
+import { Component } from "react";
+import { ColorPickerProps } from "react-color";
+
+export type TwitterPickerProps = ColorPickerProps<TwitterPicker>;
+
+export default class TwitterPicker extends Component<TwitterPickerProps, any> {}

react-color/react-color-tests.tsx

@@ -5,16 +5,19 @@ import {
     AlphaPicker, BlockPicker, ChromePicker, CirclePicker,
     CompactPicker, GithubPicker, HuePicker, MaterialPicker,
     PhotoshopPicker, SketchPicker, SliderPicker, SwatchesPicker,
-    TwitterPicker, CustomPicker
+    TwitterPicker, CustomPicker, InjectedColorProps, ColorResult,
+    Color
 } from "react-color"
 import { Alpha, Checkboard, EditableInput, Hue, Saturation } from "react-color/lib/components/common"
 
-interface CustomProps extends ReactColor.InjectedColorProps {
-    color?: ReactColor.Color
+interface CustomProps extends InjectedColorProps {
+    color?: Color
 }
 
 var CustomComponent: StatelessComponent<CustomProps> = (props: CustomProps) => {
-    function onChange (color: ReactColor.ColorResult) {}
+    function onChange (color: ColorResult) {
+        console.log(color)
+    }
 
     return (
         <div>

react-color/tsconfig.json

@@ -15,10 +15,32 @@
         "types": [],
         "noEmit": true,
         "forceConsistentCasingInFileNames": true,
-        "jsx": "react"
+        "jsx": "react",
+        "noUnusedParameters": true,
+        "noUnusedLocals": true
     },
     "files": [
         "index.d.ts",
+        "lib/components/alpha/Alpha.d.ts",
+        "lib/components/block/Block.d.ts",
+        "lib/components/chrome/Chrome.d.ts",
+        "lib/components/circle/Circle.d.ts",
+        "lib/components/common/Alpha.d.ts",
+        "lib/components/common/Checkboard.d.ts",
+        "lib/components/common/ColorWrap.d.ts",
+        "lib/components/common/EditableInput.d.ts",
+        "lib/components/common/Hue.d.ts",
+        "lib/components/common/index.d.ts",
+        "lib/components/common/Saturation.d.ts",
+        "lib/components/compact/Compact.d.ts",
+        "lib/components/github/Github.d.ts",
+        "lib/components/hue/Hue.d.ts",
+        "lib/components/material/Material.d.ts",
+        "lib/components/photoshop/Photoshop.d.ts",
+        "lib/components/sketch/Sketch.d.ts",
+        "lib/components/slider/Slider.d.ts",
+        "lib/components/swatches/Swatches.d.ts",
+        "lib/components/twitter/Twitter.d.ts",
         "react-color-tests.tsx"
     ]
-}
+}

react-color/tslint.json

@@ -0,0 +1 @@
+{ "extends": "../tslint.json" }