diff --git a/react-color/index.d.ts b/react-color/index.d.ts index bed3ae46ff..798f44d6eb 100644 --- a/react-color/index.d.ts +++ b/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 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.1 -/// +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 extends React.ClassAttributes { - color?: Color - onChange?: ColorChangeHandler - onChangeComplete?: ColorChangeHandler - } - - /* Predefined pickers */ - interface AlphaPickerProps extends ColorPickerProps { - height?: string - width?: string - } - interface AlphaPicker extends React.ComponentClass {} - const AlphaPicker: AlphaPicker - - interface BlockPickerProps extends ColorPickerProps { - colors?: Array - width?: string - } - interface BlockPicker extends React.ComponentClass {} - const BlockPicker: BlockPicker - - interface ChromePickerProps extends ColorPickerProps { - disableAlpha?: boolean - } - interface ChromePicker extends React.ComponentClass {} - const ChromePicker: ChromePicker - - interface CirclePickerProps extends ColorPickerProps { - colors?: Array - width?: string - } - interface CirclePicker extends React.ComponentClass {} - const CirclePicker: CirclePicker - - interface CompactPickerProps extends ColorPickerProps { - colors?: Array - } - interface CompactPicker extends React.ComponentClass {} - const CompactPicker: CompactPicker - - interface GithubPickerProps extends ColorPickerProps { - colors?: Array - width?: string - } - interface GithubPicker extends React.ComponentClass {} - const GithubPicker: GithubPicker - - interface HuePickerProps extends ColorPickerProps { - height?: string - width?: string - } - interface HuePicker extends React.ComponentClass {} - const HuePicker: HuePicker - - interface MaterialPickerProps extends ColorPickerProps {} - interface MaterialPicker extends React.ComponentClass {} - const MaterialPicker: MaterialPicker - - interface PhotoshopPickerProps extends ColorPickerProps { - header?: string - onAccept?: ColorChangeHandler - onCancel?: ColorChangeHandler - } - interface PhotoshopPicker extends React.ComponentClass {} - const PhotoshopPicker: PhotoshopPicker - - interface SketchPickerProps extends ColorPickerProps { - disableAlpha?: boolean - presetColors?: Array - width?: string - } - interface SketchPicker extends React.ComponentClass {} - const SketchPicker: SketchPicker - - interface SliderPickerProps extends ColorPickerProps {} - interface SliderPicker extends React.ComponentClass {} - const SliderPicker: SliderPicker - - interface SwatchesPickerProps extends ColorPickerProps { - colors?: Array> - height?: number - width?: number - } - interface SwatchesPicker extends React.ComponentClass {} - const SwatchesPicker: SwatchesPicker - - interface TwitterPickerProps extends ColorPickerProps {} - interface TwitterPicker extends React.ComponentClass {} - const TwitterPicker: TwitterPicker - - /* For custom picker */ - interface InjectedColorProps { - hex?: string - hsl?: HSLColor - rgb?: RGBColor - onChange?: ColorChangeHandler - } - - function CustomPicker(component: React.ComponentClass | React.StatelessComponent): React.ComponentClass - - interface CustomPickerProps extends React.ClassAttributes { - color?: Color - pointer?: React.ReactNode - onChange?: ColorChangeHandler - } - - interface AlphaProps extends CustomPickerProps {} - interface Alpha extends React.ComponentClass {} - const Alpha: Alpha - - interface EditableInputStyles { - input?: React.CSSProperties - label?: React.CSSProperties - wrap?: React.CSSProperties - } - interface EditableInputProps extends React.ClassAttributes { - color?: Color - label?: string - onChange?: ColorChangeHandler - styles?: EditableInputStyles - value?: any - } - interface EditableInput extends React.ComponentClass {} - const EditableInput: EditableInput - - interface HueProps extends CustomPickerProps { - direction?: "horizontal" | "vertical" - } - interface Hue extends React.ComponentClass {} - const Hue: Hue - - interface SaturationProps extends CustomPickerProps {} - interface Saturation extends React.ComponentClass {} - const Saturation: Saturation - - interface CheckboardProps extends React.ClassAttributes { - grey?: string - size?: number - white?: string - } - interface Checkboard extends React.ComponentClass {} - 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 = ReactColor.CustomPickerProps - - 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 extends ClassAttributes { + color?: Color; + onChange?: ColorChangeHandler; + onChangeComplete?: ColorChangeHandler; +} + +export interface CustomPickerProps extends ClassAttributes { + 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"; diff --git a/react-color/lib/components/alpha/Alpha.d.ts b/react-color/lib/components/alpha/Alpha.d.ts new file mode 100644 index 0000000000..2856f077b9 --- /dev/null +++ b/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 { + height?: string; + width?: string; +} + +export default class AlphaPicker extends Component {} diff --git a/react-color/lib/components/block/Block.d.ts b/react-color/lib/components/block/Block.d.ts new file mode 100644 index 0000000000..edb3c72347 --- /dev/null +++ b/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 { + colors?: string[]; + width?: string; +} + +export default class BlockPicker extends Component {} diff --git a/react-color/lib/components/chrome/Chrome.d.ts b/react-color/lib/components/chrome/Chrome.d.ts new file mode 100644 index 0000000000..fa214d1b14 --- /dev/null +++ b/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 { + disableAlpha?: boolean; +} + +export default class ChromePicker extends Component {} diff --git a/react-color/lib/components/circle/Circle.d.ts b/react-color/lib/components/circle/Circle.d.ts new file mode 100644 index 0000000000..204842d72a --- /dev/null +++ b/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 { + colors?: string[]; + width?: string; +} + +export default class CirclePicker extends Component {} diff --git a/react-color/lib/components/common/Alpha.d.ts b/react-color/lib/components/common/Alpha.d.ts new file mode 100644 index 0000000000..da20010497 --- /dev/null +++ b/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; + +export default class Alpha extends Component {} diff --git a/react-color/lib/components/common/Checkboard.d.ts b/react-color/lib/components/common/Checkboard.d.ts new file mode 100644 index 0000000000..40d8f26913 --- /dev/null +++ b/react-color/lib/components/common/Checkboard.d.ts @@ -0,0 +1,9 @@ +import { Component, ClassAttributes } from "react"; + +export interface CheckboardProps extends ClassAttributes { + grey?: string; + size?: number; + white?: string; +} + +export default class Checkboard extends Component {} diff --git a/react-color/lib/components/common/ColorWrap.d.ts b/react-color/lib/components/common/ColorWrap.d.ts new file mode 100644 index 0000000000..94a8f5b789 --- /dev/null +++ b/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(component: ComponentClass | StatelessComponent): ComponentClass; diff --git a/react-color/lib/components/common/EditableInput.d.ts b/react-color/lib/components/common/EditableInput.d.ts new file mode 100644 index 0000000000..78df9473f2 --- /dev/null +++ b/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 { + color?: Color; + label?: string; + onChange?: ColorChangeHandler; + styles?: EditableInputStyles; + value?: any; +} + +export default class EditableInput extends Component {} + diff --git a/react-color/lib/components/common/Hue.d.ts b/react-color/lib/components/common/Hue.d.ts new file mode 100644 index 0000000000..1f61841107 --- /dev/null +++ b/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 { + direction?: "horizontal" | "vertical"; +} + +export default class Hue extends Component {} diff --git a/react-color/lib/components/common/Saturation.d.ts b/react-color/lib/components/common/Saturation.d.ts new file mode 100644 index 0000000000..c90a7d9685 --- /dev/null +++ b/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; + +export default class Saturation extends Component {} diff --git a/react-color/lib/components/common/index.d.ts b/react-color/lib/components/common/index.d.ts new file mode 100644 index 0000000000..ed5af44bdf --- /dev/null +++ b/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"; diff --git a/react-color/lib/components/compact/Compact.d.ts b/react-color/lib/components/compact/Compact.d.ts new file mode 100644 index 0000000000..3f9ff74f60 --- /dev/null +++ b/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 { + colors?: string[]; +} + +export default class CompactPicker extends Component {} diff --git a/react-color/lib/components/github/Github.d.ts b/react-color/lib/components/github/Github.d.ts new file mode 100644 index 0000000000..fd1479abad --- /dev/null +++ b/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 { + colors?: string[]; + width?: string; +} + +export default class GithubPicker extends Component {} diff --git a/react-color/lib/components/hue/Hue.d.ts b/react-color/lib/components/hue/Hue.d.ts new file mode 100644 index 0000000000..6aab83baea --- /dev/null +++ b/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 { + height?: string; + width?: string; +} + +export default class HuePicker extends Component {} diff --git a/react-color/lib/components/material/Material.d.ts b/react-color/lib/components/material/Material.d.ts new file mode 100644 index 0000000000..4ae849b910 --- /dev/null +++ b/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; + +export default class MaterialPicker extends Component {} diff --git a/react-color/lib/components/photoshop/Photoshop.d.ts b/react-color/lib/components/photoshop/Photoshop.d.ts new file mode 100644 index 0000000000..c3abaf0ccd --- /dev/null +++ b/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 { + header?: string; + onAccept?: ColorChangeHandler; + onCancel?: ColorChangeHandler; +} + +export default class PhotoshopPicker extends Component {} diff --git a/react-color/lib/components/sketch/Sketch.d.ts b/react-color/lib/components/sketch/Sketch.d.ts new file mode 100644 index 0000000000..229b2b2b51 --- /dev/null +++ b/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 { + disableAlpha?: boolean; + presetColors?: string[]; + width?: string; +} + +export default class SketchPicker extends Component {} diff --git a/react-color/lib/components/slider/Slider.d.ts b/react-color/lib/components/slider/Slider.d.ts new file mode 100644 index 0000000000..913f30692a --- /dev/null +++ b/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; + +export default class SliderPicker extends Component {} diff --git a/react-color/lib/components/swatches/Swatches.d.ts b/react-color/lib/components/swatches/Swatches.d.ts new file mode 100644 index 0000000000..22e9d1704c --- /dev/null +++ b/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 { + colors?: string[][]; + height?: number; + width?: number; +} + +export default class SwatchesPicker extends Component {} diff --git a/react-color/lib/components/twitter/Twitter.d.ts b/react-color/lib/components/twitter/Twitter.d.ts new file mode 100644 index 0000000000..b4e6bb2308 --- /dev/null +++ b/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; + +export default class TwitterPicker extends Component {} diff --git a/react-color/react-color-tests.tsx b/react-color/react-color-tests.tsx index 7969047569..e4e6f2348b 100644 --- a/react-color/react-color-tests.tsx +++ b/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 = (props: CustomProps) => { - function onChange (color: ReactColor.ColorResult) {} + function onChange (color: ColorResult) { + console.log(color) + } return (
diff --git a/react-color/tsconfig.json b/react-color/tsconfig.json index a88182ffbc..26e01d85c6 100644 --- a/react-color/tsconfig.json +++ b/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" ] -} \ No newline at end of file +} diff --git a/react-color/tslint.json b/react-color/tslint.json new file mode 100644 index 0000000000..377cc837d4 --- /dev/null +++ b/react-color/tslint.json @@ -0,0 +1 @@ +{ "extends": "../tslint.json" }