From e1e63171f35eee97be4fa0d75f1d1b8f678b1c3c Mon Sep 17 00:00:00 2001 From: Erick Tamayo Date: Thu, 6 Jun 2019 13:55:09 -0600 Subject: [PATCH] react-color - Implemented the types for v2.17.3 (latest in npm) (#35844) * implemented typings for react-color v2.17.3 * fixed pointer types * removed unused imports * fixed errors * moved changes to v2 * removed updated files in the root --- types/react-color/index.d.ts | 8 +- types/react-color/v2/index.d.ts | 83 ++++++ .../v2/lib/components/alpha/Alpha.d.ts | 13 + .../v2/lib/components/block/Block.d.ts | 26 ++ .../v2/lib/components/chrome/Chrome.d.ts | 39 +++ .../v2/lib/components/circle/Circle.d.ts | 22 ++ .../v2/lib/components/common/Alpha.d.ts | 21 ++ .../v2/lib/components/common/Checkboard.d.ts | 11 + .../v2/lib/components/common/ColorWrap.d.ts | 24 ++ .../lib/components/common/EditableInput.d.ts | 20 ++ .../v2/lib/components/common/Hue.d.ts | 11 + .../v2/lib/components/common/Saturation.d.ts | 19 ++ .../v2/lib/components/common/index.d.ts | 5 + .../v2/lib/components/compact/Compact.d.ts | 20 ++ .../v2/lib/components/github/Github.d.ts | 36 +++ .../v2/lib/components/hue/Hue.d.ts | 22 ++ .../v2/lib/components/material/Material.d.ts | 26 ++ .../lib/components/photoshop/Photoshop.d.ts | 28 ++ .../v2/lib/components/sketch/Sketch.d.ts | 31 ++ .../v2/lib/components/slider/Slider.d.ts | 19 ++ .../v2/lib/components/swatches/Swatches.d.ts | 24 ++ .../v2/lib/components/twitter/Twitter.d.ts | 36 +++ types/react-color/v2/react-color-tests.tsx | 279 ++++++++++++++++++ types/react-color/v2/tsconfig.json | 46 +++ types/react-color/v2/tslint.json | 3 + 25 files changed, 870 insertions(+), 2 deletions(-) create mode 100644 types/react-color/v2/index.d.ts create mode 100644 types/react-color/v2/lib/components/alpha/Alpha.d.ts create mode 100644 types/react-color/v2/lib/components/block/Block.d.ts create mode 100644 types/react-color/v2/lib/components/chrome/Chrome.d.ts create mode 100644 types/react-color/v2/lib/components/circle/Circle.d.ts create mode 100644 types/react-color/v2/lib/components/common/Alpha.d.ts create mode 100644 types/react-color/v2/lib/components/common/Checkboard.d.ts create mode 100644 types/react-color/v2/lib/components/common/ColorWrap.d.ts create mode 100644 types/react-color/v2/lib/components/common/EditableInput.d.ts create mode 100644 types/react-color/v2/lib/components/common/Hue.d.ts create mode 100644 types/react-color/v2/lib/components/common/Saturation.d.ts create mode 100644 types/react-color/v2/lib/components/common/index.d.ts create mode 100644 types/react-color/v2/lib/components/compact/Compact.d.ts create mode 100644 types/react-color/v2/lib/components/github/Github.d.ts create mode 100644 types/react-color/v2/lib/components/hue/Hue.d.ts create mode 100644 types/react-color/v2/lib/components/material/Material.d.ts create mode 100644 types/react-color/v2/lib/components/photoshop/Photoshop.d.ts create mode 100644 types/react-color/v2/lib/components/sketch/Sketch.d.ts create mode 100644 types/react-color/v2/lib/components/slider/Slider.d.ts create mode 100644 types/react-color/v2/lib/components/swatches/Swatches.d.ts create mode 100644 types/react-color/v2/lib/components/twitter/Twitter.d.ts create mode 100644 types/react-color/v2/react-color-tests.tsx create mode 100644 types/react-color/v2/tsconfig.json create mode 100644 types/react-color/v2/tslint.json diff --git a/types/react-color/index.d.ts b/types/react-color/index.d.ts index 3e0b0f3989..19caf3e120 100644 --- a/types/react-color/index.d.ts +++ b/types/react-color/index.d.ts @@ -5,7 +5,8 @@ // Matthieu Montaudouin , // Nokogiri , // 0815Strohhut , -// Daniel Fürst +// Daniel Fürst , +// Erick Tamayo // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 @@ -56,7 +57,10 @@ export { default as CompactPicker, CompactPickerProps } from "./lib/components/c export { default as GithubPicker, GithubPickerProps } from "./lib/components/github/Github"; export { default as HuePicker, HuePickerProps } from "./lib/components/hue/Hue"; export { default as MaterialPicker, MaterialPickerProps } from "./lib/components/material/Material"; -export { default as PhotoshopPicker, PhotoshopPickerProps } from "./lib/components/photoshop/Photoshop"; +export { + default as PhotoshopPicker, + PhotoshopPickerProps +} from "./lib/components/photoshop/Photoshop"; export { default as SketchPicker, SketchPickerProps } from "./lib/components/sketch/Sketch"; export { default as SliderPicker, SliderPickerProps } from "./lib/components/slider/Slider"; export { default as SwatchesPicker, SwatchesPickerProps } from "./lib/components/swatches/Swatches"; diff --git a/types/react-color/v2/index.d.ts b/types/react-color/v2/index.d.ts new file mode 100644 index 0000000000..9f3bac13f3 --- /dev/null +++ b/types/react-color/v2/index.d.ts @@ -0,0 +1,83 @@ +// Type definitions for react-color 2.17 +// Project: https://github.com/casesandberg/react-color/, http://casesandberg.github.io/react-color +// Definitions by: Karol Janyst , +// Marks Polakovs , +// Matthieu Montaudouin , +// Nokogiri , +// 0815Strohhut , +// Daniel Fürst , +// Erick Tamayo +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import { ComponentClass, ClassAttributes, StatelessComponent, ReactNode } from "react"; + +export interface HEXColor { + hex: string; + source?: string; +} + +export interface HSLColor { + a?: number; + h: number; + l: number; + s: number; + source?: string; +} + +export interface RGBColor { + a?: number; + b: number; + g: number; + r: number; + source?: string; +} + +export interface HSVColor { + a?: number; + h: number; + s: number; + v: number; + source?: string; +} + +export type Color = HEXColor | HSLColor | RGBColor | HSVColor; + +export interface ColorState { + hex: string; + hsl: HSLColor; + hsv: HSVColor; + rgb: RGBColor; + oldHue: number; + source: string; +} + +export interface RenderersProps { + renderers?: { + canvas: any; + }; +} +export type ColorChangeHandler = (color: Color) => void; + +export { default as AlphaPicker, AlphaPickerProps } from "./lib/components/alpha/Alpha"; +export { default as BlockPicker, BlockPickerProps } from "./lib/components/block/Block"; +export { default as Checkboard, CheckboardProps } from "./lib/components/common/Checkboard"; +export { default as ChromePicker, ChromePickerProps } from "./lib/components/chrome/Chrome"; +export { default as CirclePicker, CirclePickerProps } from "./lib/components/circle/Circle"; +export { default as CompactPicker, CompactPickerProps } from "./lib/components/compact/Compact"; +export { default as GithubPicker, GithubPickerProps } from "./lib/components/github/Github"; +export { default as HuePicker, HuePickerProps } from "./lib/components/hue/Hue"; +export { default as MaterialPicker, MaterialPickerProps } from "./lib/components/material/Material"; +export { + default as PhotoshopPicker, + PhotoshopPickerProps +} from "./lib/components/photoshop/Photoshop"; +export { default as SketchPicker, SketchPickerProps } from "./lib/components/sketch/Sketch"; +export { default as SliderPicker, SliderPickerProps } from "./lib/components/slider/Slider"; +export { default as SwatchesPicker, SwatchesPickerProps } from "./lib/components/swatches/Swatches"; +export { default as TwitterPicker, TwitterPickerProps } from "./lib/components/twitter/Twitter"; +export { + default as CustomPicker, + CustomPickerInjectedProps, + CustomPickerProps +} from "./lib/components/common/ColorWrap"; diff --git a/types/react-color/v2/lib/components/alpha/Alpha.d.ts b/types/react-color/v2/lib/components/alpha/Alpha.d.ts new file mode 100644 index 0000000000..f8bd30045e --- /dev/null +++ b/types/react-color/v2/lib/components/alpha/Alpha.d.ts @@ -0,0 +1,13 @@ +import { Component, ComponentType } from "react"; +import { RenderersProps, CustomPickerProps } from "../../.."; + +export interface AlphaPickerProps extends RenderersProps, CustomPickerProps { + width?: string; + height?: string; + direction?: "horizontal" | "vertical"; + style?: any; + pointer?: ComponentType; + className?: string; +} + +export default class AlphaPicker extends Component {} diff --git a/types/react-color/v2/lib/components/block/Block.d.ts b/types/react-color/v2/lib/components/block/Block.d.ts new file mode 100644 index 0000000000..5b70a9af58 --- /dev/null +++ b/types/react-color/v2/lib/components/block/Block.d.ts @@ -0,0 +1,26 @@ +import { Component, CSSProperties } from "react"; +import { CustomPickerProps, ColorState } from "../../.."; + +export interface BlockPickerDefaultStyles { + card?: CSSProperties; + head?: CSSProperties; + body?: CSSProperties; + label?: CSSProperties; + triangle?: CSSProperties; + input?: CSSProperties; +} + +export interface BlockPickerStyles { + default?: BlockPickerDefaultStyles; +} + +export interface BlockPickerProps extends CustomPickerProps { + onSwatchHover?: (color: ColorState, event: MouseEvent) => void; + colors?: string[]; + width?: string; + triangle?: "hide" | "top"; + styles?: BlockPickerStyles; + className?: string; +} + +export default class BlockPicker extends Component {} diff --git a/types/react-color/v2/lib/components/chrome/Chrome.d.ts b/types/react-color/v2/lib/components/chrome/Chrome.d.ts new file mode 100644 index 0000000000..bd089b9e7e --- /dev/null +++ b/types/react-color/v2/lib/components/chrome/Chrome.d.ts @@ -0,0 +1,39 @@ +import { Component, CSSProperties } from "react"; +import { RenderersProps, CustomPickerProps } from "../../.."; + +export interface ChromePickerDefaultStyles { + picker?: CSSProperties; + saturation?: CSSProperties; + Saturation?: CSSProperties; + body?: CSSProperties; + controls?: CSSProperties; + color?: CSSProperties; + swatch?: CSSProperties; + active?: CSSProperties; + toggles?: CSSProperties; + hue?: CSSProperties; + Hue?: CSSProperties; + alpha?: CSSProperties; + Alpha?: CSSProperties; +} + +export interface ChromePickerDisableAlphaStyles { + color?: CSSProperties; + alpha?: CSSProperties; + hue?: CSSProperties; + swatch?: CSSProperties; +} + +export interface ChromePickerStyles { + default?: ChromePickerDefaultStyles; + disableAlpha?: ChromePickerDisableAlphaStyles; +} + +export interface ChromePickerProps extends RenderersProps, CustomPickerProps { + width?: string; + disableAlpha?: boolean; + styles?: ChromePickerStyles; + className?: string; +} + +export default class ChromePicker extends Component {} diff --git a/types/react-color/v2/lib/components/circle/Circle.d.ts b/types/react-color/v2/lib/components/circle/Circle.d.ts new file mode 100644 index 0000000000..9bbf0a68da --- /dev/null +++ b/types/react-color/v2/lib/components/circle/Circle.d.ts @@ -0,0 +1,22 @@ +import { Component, CSSProperties } from "react"; +import { CustomPickerProps, ColorState } from "../../.."; + +export interface CirclePickerDefaultStyles { + card?: CSSProperties; +} + +export interface CirclePickerStyles { + default?: CirclePickerDefaultStyles; +} + +export interface CirclePickerProps extends CustomPickerProps { + colors?: string[]; + width?: string; + circleSize?: number; + circleSpacing?: number; + onSwatchHover?: (color: ColorState, event: MouseEvent) => void; + styles?: CirclePickerStyles; + className?: string; +} + +export default class CirclePicker extends Component {} diff --git a/types/react-color/v2/lib/components/common/Alpha.d.ts b/types/react-color/v2/lib/components/common/Alpha.d.ts new file mode 100644 index 0000000000..8f4ee5087c --- /dev/null +++ b/types/react-color/v2/lib/components/common/Alpha.d.ts @@ -0,0 +1,21 @@ +import { Component, ComponentType, CSSProperties } from "react"; +import { CustomPickerInjectedProps, RenderersProps } from "../../.."; + +export interface AlphaStyle { + alpha?: CSSProperties; + checkboard?: CSSProperties; + gradient?: CSSProperties; + container?: CSSProperties; + pointer?: CSSProperties; + slider?: CSSProperties; +} + +export interface AlphaProps extends RenderersProps, CustomPickerInjectedProps { + pointer?: ComponentType; + radius?: string; + shadow?: string; + direction?: "vertical" | "horizontal"; + style?: AlphaStyle; +} + +export default class Alpha extends Component {} diff --git a/types/react-color/v2/lib/components/common/Checkboard.d.ts b/types/react-color/v2/lib/components/common/Checkboard.d.ts new file mode 100644 index 0000000000..ebec9bb58d --- /dev/null +++ b/types/react-color/v2/lib/components/common/Checkboard.d.ts @@ -0,0 +1,11 @@ +import { Component } from "react"; +import { RenderersProps } from "../../.."; +export interface CheckboardProps extends RenderersProps { + white?: string; + grey?: string; + size?: number; + borderRadius?: string; + boxShadow?: string; +} + +export default class Checkboard extends Component {} diff --git a/types/react-color/v2/lib/components/common/ColorWrap.d.ts b/types/react-color/v2/lib/components/common/ColorWrap.d.ts new file mode 100644 index 0000000000..ff62bf8ee6 --- /dev/null +++ b/types/react-color/v2/lib/components/common/ColorWrap.d.ts @@ -0,0 +1,24 @@ +import { ComponentType } from "react"; +import { Color, ColorState, ColorChangeHandler } from "../../.."; + +type SetDifference = A extends B ? never : A; + +type Diff = Pick>; + +export type OnChangeHandler = (colorState: ColorState) => void; + +export interface CustomPickerInjectedProps extends Partial { + onChange: ColorChangeHandler; +} + +export interface CustomPickerProps { + color?: Color; + onChange?: OnChangeHandler; + onChangeComplete?: OnChangeHandler; +} + +export default function CustomPicker( + component: ComponentType +): ComponentType & CustomPickerProps>; + +export {}; diff --git a/types/react-color/v2/lib/components/common/EditableInput.d.ts b/types/react-color/v2/lib/components/common/EditableInput.d.ts new file mode 100644 index 0000000000..18a01d9a00 --- /dev/null +++ b/types/react-color/v2/lib/components/common/EditableInput.d.ts @@ -0,0 +1,20 @@ +import { Component, CSSProperties } from "react"; +import { CustomPickerInjectedProps } from "../../.."; + +export interface EditableInputStyles { + input?: CSSProperties; + label?: CSSProperties; + wrap?: CSSProperties; +} + +export interface EditableInputProps extends CustomPickerInjectedProps { + label?: string; + arrowOffset?: number; + placeholder?: string; + value?: string | number; + style?: EditableInputStyles; + dragLabel?: boolean; + dragMax?: number; +} + +export default class EditableInput extends Component {} diff --git a/types/react-color/v2/lib/components/common/Hue.d.ts b/types/react-color/v2/lib/components/common/Hue.d.ts new file mode 100644 index 0000000000..eab0f54bfb --- /dev/null +++ b/types/react-color/v2/lib/components/common/Hue.d.ts @@ -0,0 +1,11 @@ +import { Component, ComponentType } from "react"; +import { CustomPickerInjectedProps } from "../../.."; + +export interface HueProps extends CustomPickerInjectedProps { + direction?: "horizontal" | "vertical"; + pointer?: ComponentType; + radius?: string; + shadow?: string; +} + +export default class Hue extends Component {} diff --git a/types/react-color/v2/lib/components/common/Saturation.d.ts b/types/react-color/v2/lib/components/common/Saturation.d.ts new file mode 100644 index 0000000000..7b5509ec33 --- /dev/null +++ b/types/react-color/v2/lib/components/common/Saturation.d.ts @@ -0,0 +1,19 @@ +import { Component, CSSProperties, ComponentType } from "react"; +import { CustomPickerInjectedProps } from "../../.."; + +export interface SaturationStyle { + color?: CSSProperties; + white?: CSSProperties; + black?: CSSProperties; + pointer?: CSSProperties; + circle?: CSSProperties; +} + +export interface SaturationProps extends CustomPickerInjectedProps { + radius?: string; + shadow?: string; + style?: SaturationStyle; + pointer?: ComponentType; +} + +export default class Saturation extends Component {} diff --git a/types/react-color/v2/lib/components/common/index.d.ts b/types/react-color/v2/lib/components/common/index.d.ts new file mode 100644 index 0000000000..3830fd27dd --- /dev/null +++ b/types/react-color/v2/lib/components/common/index.d.ts @@ -0,0 +1,5 @@ +export { default as Alpha } from "./Alpha"; +export { default as Checkboard } from "./Checkboard"; +export { default as EditableInput } from "./EditableInput"; +export { default as Hue } from "./Hue"; +export { default as Saturation } from "./Saturation"; diff --git a/types/react-color/v2/lib/components/compact/Compact.d.ts b/types/react-color/v2/lib/components/compact/Compact.d.ts new file mode 100644 index 0000000000..df744e259c --- /dev/null +++ b/types/react-color/v2/lib/components/compact/Compact.d.ts @@ -0,0 +1,20 @@ +import { Component, CSSProperties } from "react"; +import { CustomPickerProps, ColorState } from "../../.."; + +export interface CompactPickerDefaultStyles { + Compact?: CSSProperties; + compact?: CSSProperties; + clear?: CSSProperties; +} +export interface CompactPickerStyles { + default?: CompactPickerDefaultStyles; +} + +export interface CompactPickerProps extends CustomPickerProps { + colors?: string[]; + onSwatchHover?(color: ColorState, event: MouseEvent): void; + styles?: CompactPickerStyles; + className?: string; +} + +export default class CompactPicker extends Component {} diff --git a/types/react-color/v2/lib/components/github/Github.d.ts b/types/react-color/v2/lib/components/github/Github.d.ts new file mode 100644 index 0000000000..27b12edc68 --- /dev/null +++ b/types/react-color/v2/lib/components/github/Github.d.ts @@ -0,0 +1,36 @@ +import { Component, CSSProperties } from "react"; +import { CustomPickerProps, ColorState } from "../../.."; + +export interface GithubPickerDefaultStyles { + card?: CSSProperties; + triangle?: CSSProperties; + triangleShadow?: CSSProperties; +} + +export interface GithubPickerTriangleStyles { + triangle?: CSSProperties; + triangleShadow?: CSSProperties; +} + +export interface GithubPickerHideTriangleStyles { + triangle?: CSSProperties; + "top-left-triangle"?: GithubPickerTriangleStyles; + "top-right-triangle"?: GithubPickerTriangleStyles; + "bottom-left-triangle"?: GithubPickerTriangleStyles; + "bottom-right-triangle"?: GithubPickerTriangleStyles; +} + +export interface GithubPickerStyles { + default?: GithubPickerDefaultStyles; +} + +export interface GithubPickerProps extends CustomPickerProps { + colors?: string[]; + width?: string; + triangle?: "hide" | "top-left" | "top-right" | "bottom-left" | "bottom-right"; + onSwatchHover?(color: ColorState, event: MouseEvent): void; + className?: string; + styles?: GithubPickerStyles; +} + +export default class GithubPicker extends Component {} diff --git a/types/react-color/v2/lib/components/hue/Hue.d.ts b/types/react-color/v2/lib/components/hue/Hue.d.ts new file mode 100644 index 0000000000..b662d9cc76 --- /dev/null +++ b/types/react-color/v2/lib/components/hue/Hue.d.ts @@ -0,0 +1,22 @@ +import { Component, ComponentType, CSSProperties } from "react"; +import { CustomPickerProps } from "../../.."; + +export interface HuePickerDefaultStyle { + picker?: CSSProperties; + hue?: CSSProperties; +} + +export interface HuePickerStyle { + default?: HuePickerDefaultStyle; +} + +export interface HuePickerProps extends CustomPickerProps { + height?: string; + width?: string; + direction?: "vertical" | "horizontal"; + pointer?: ComponentType; + styles?: HuePickerStyle; + className?: string; +} + +export default class HuePicker extends Component {} diff --git a/types/react-color/v2/lib/components/material/Material.d.ts b/types/react-color/v2/lib/components/material/Material.d.ts new file mode 100644 index 0000000000..6d0f14f16a --- /dev/null +++ b/types/react-color/v2/lib/components/material/Material.d.ts @@ -0,0 +1,26 @@ +import { Component, CSSProperties } from "react"; +import { CustomPickerProps } from "../../.."; + +export interface MaterialPickerDefaultStyles { + material?: CSSProperties; + HEXwrap?: CSSProperties; + HEXinput?: CSSProperties; + HEXlabel?: CSSProperties; + Hex?: CSSProperties; + RGBwrap?: CSSProperties; + RGBinput?: CSSProperties; + RGBlabel?: CSSProperties; + split?: CSSProperties; + third?: CSSProperties; +} + +export interface MaterialPickerStyles { + default?: MaterialPickerDefaultStyles; +} + +export interface MaterialPickerProps extends CustomPickerProps { + styles?: MaterialPickerStyles; + className?: string; +} + +export default class MaterialPicker extends Component {} diff --git a/types/react-color/v2/lib/components/photoshop/Photoshop.d.ts b/types/react-color/v2/lib/components/photoshop/Photoshop.d.ts new file mode 100644 index 0000000000..a16bc67b35 --- /dev/null +++ b/types/react-color/v2/lib/components/photoshop/Photoshop.d.ts @@ -0,0 +1,28 @@ +import { Component, MouseEvent, CSSProperties } from "react"; +import { CustomPickerProps } from "../../.."; + +export interface PhotoshopPickerDefaultStyles { + picker?: CSSProperties; + head?: CSSProperties; + body?: CSSProperties; + saturation?: CSSProperties; + hue?: CSSProperties; + controls?: CSSProperties; + top?: CSSProperties; + preview?: CSSProperties; + actions?: CSSProperties; +} + +export interface PhotoshopPickerStyles { + default?: PhotoshopPickerDefaultStyles; +} + +export interface PhotoshopPickerProps extends CustomPickerProps { + header?: string; + onAccept?: (event: MouseEvent) => void; + onCancel?: (event: MouseEvent) => void; + styles?: PhotoshopPickerStyles; + className?: string; +} + +export default class PhotoshopPicker extends Component {} diff --git a/types/react-color/v2/lib/components/sketch/Sketch.d.ts b/types/react-color/v2/lib/components/sketch/Sketch.d.ts new file mode 100644 index 0000000000..3bd662ddc8 --- /dev/null +++ b/types/react-color/v2/lib/components/sketch/Sketch.d.ts @@ -0,0 +1,31 @@ +import { Component, CSSProperties } from "react"; +import { CustomPickerProps, ColorState, RenderersProps } from "../../.."; + +export interface SketchPickerDefaultStyles { + picker?: CSSProperties; + saturation?: CSSProperties; + Saturation?: CSSProperties; + controls?: CSSProperties; + sliders?: CSSProperties; + color?: CSSProperties; + activeColor?: CSSProperties; + hue?: CSSProperties; + Hue?: CSSProperties; + alpha?: CSSProperties; + Alpha?: CSSProperties; +} + +export interface SketchPickerStyles { + default?: SketchPickerDefaultStyles; +} + +export interface SketchPickerProps extends RenderersProps, CustomPickerProps { + disableAlpha?: boolean; + presetColors?: string[]; + width?: string; + onSwatchHover?(color: ColorState, event: MouseEvent): void; + styles?: SketchPickerStyles; + className?: string; +} + +export default class SketchPicker extends Component {} diff --git a/types/react-color/v2/lib/components/slider/Slider.d.ts b/types/react-color/v2/lib/components/slider/Slider.d.ts new file mode 100644 index 0000000000..51432c0382 --- /dev/null +++ b/types/react-color/v2/lib/components/slider/Slider.d.ts @@ -0,0 +1,19 @@ +import { Component, ComponentType, CSSProperties } from "react"; +import { CustomPickerProps } from "../../.."; + +export interface SliderPickerDefaultStyles { + hue?: CSSProperties; + Hue?: CSSProperties; +} + +export interface SliderPickerStyles { + default?: SliderPickerDefaultStyles; +} + +export interface SliderPickerProps extends CustomPickerProps { + pointer?: ComponentType; + styles?: SliderPickerStyles; + className?: string; +} + +export default class SliderPicker extends Component {} diff --git a/types/react-color/v2/lib/components/swatches/Swatches.d.ts b/types/react-color/v2/lib/components/swatches/Swatches.d.ts new file mode 100644 index 0000000000..41e0686a47 --- /dev/null +++ b/types/react-color/v2/lib/components/swatches/Swatches.d.ts @@ -0,0 +1,24 @@ +import { Component, CSSProperties } from "react"; +import { CustomPickerProps, ColorState } from "../../.."; + +export interface SwatchesPickerDefaultStyles { + picker?: CSSProperties; + overflow?: CSSProperties; + body?: CSSProperties; + clear?: CSSProperties; +} + +export interface SwatchesPickerStyles { + default?: SwatchesPickerDefaultStyles; +} + +export interface SwatchesPickerProps extends CustomPickerProps { + colors?: string[][]; + height?: string; + width?: string; + onSwatchHover?(color: ColorState, event: MouseEvent): void; + styles?: SwatchesPickerStyles; + className?: string; +} + +export default class SwatchesPicker extends Component {} diff --git a/types/react-color/v2/lib/components/twitter/Twitter.d.ts b/types/react-color/v2/lib/components/twitter/Twitter.d.ts new file mode 100644 index 0000000000..0a1234f22f --- /dev/null +++ b/types/react-color/v2/lib/components/twitter/Twitter.d.ts @@ -0,0 +1,36 @@ +import { Component, CSSProperties } from "react"; +import { CustomPickerProps, ColorState } from "../../.."; + +export interface TwitterPickerDefaultStyle { + card?: CSSProperties; + body?: CSSProperties; + label?: CSSProperties; + triangle?: CSSProperties; + triangleShadow?: CSSProperties; + hash?: CSSProperties; + input?: CSSProperties; + swatch?: CSSProperties; + clear?: CSSProperties; +} + +export interface TwitterPickerTriangleStyle { + triangle?: CSSProperties; + triangleShadow?: CSSProperties; +} + +export interface TwitterPickerStyle { + default?: TwitterPickerDefaultStyle; + "top-left-triangle"?: TwitterPickerTriangleStyle; + "top-right-triangle"?: TwitterPickerTriangleStyle; +} + +export interface TwitterPickerProps extends CustomPickerProps { + colors?: string[]; + width?: string; + triangle?: "hide" | "top-left" | "top-right"; + onSwatchHover?(color: ColorState, event: MouseEvent): void; + styles?: TwitterPickerStyle; + className?: string; +} + +export default class TwitterPicker extends Component {} diff --git a/types/react-color/v2/react-color-tests.tsx b/types/react-color/v2/react-color-tests.tsx new file mode 100644 index 0000000000..8047a45685 --- /dev/null +++ b/types/react-color/v2/react-color-tests.tsx @@ -0,0 +1,279 @@ +import * as React from "react"; +import { render } from "react-dom"; +import { + AlphaPicker, + BlockPicker, + ChromePicker, + CirclePicker, + CompactPicker, + GithubPicker, + HuePicker, + MaterialPicker, + PhotoshopPicker, + SketchPicker, + SliderPicker, + SwatchesPicker, + TwitterPicker, + CustomPicker, + CustomPickerInjectedProps +} from "react-color"; +import { + Alpha, + Checkboard, + EditableInput, + Hue, + Saturation +} from "react-color/lib/components/common"; + +interface CustomProps extends CustomPickerInjectedProps { + customProp: string; +} + +const CustomComponent: React.ComponentType = (props: CustomProps) => { + const { customProp } = props; + return ( +
+ {customProp} +
} + {...props} + /> + + +
} + radius="25px" + shadow="5px 10px" + {...props} + /> +
} + style={{ circle: { display: "block" } }} + {...props} + /> +
+ ); +}; +const Custom = CustomPicker(CustomComponent); + +const color = { hex: "#000000" }; +const colors = ["#000", "#333"]; + +render( +
} + color={color} + onChange={() => {}} + onChangeComplete={() => {}} + renderers={{ canvas: {} }} + />, + document.getElementById("main") +); + +render( + {}} + onChangeComplete={() => {}} + onSwatchHover={() => {}} + />, + document.getElementById("main") +); + +render( + {}} + onChangeComplete={() => {}} + renderers={{ canvas: {} }} + />, + document.getElementById("main") +); + +render( + {}} + onChangeComplete={() => {}} + onSwatchHover={() => {}} + />, + document.getElementById("main") +); + +render( + {}} + onChangeComplete={() => {}} + onSwatchHover={() => {}} + />, + document.getElementById("main") +); + +render( + {}} + onChangeComplete={() => {}} + onSwatchHover={() => {}} + />, + document.getElementById("main") +); + +render( +
} + color={color} + onChange={() => {}} + onChangeComplete={() => {}} + />, + document.getElementById("main") +); + +render( + {}} + onChangeComplete={() => {}} + />, + document.getElementById("main") +); + +render( + {}} + onChangeComplete={() => {}} + onAccept={() => {}} + onCancel={() => {}} + />, + document.getElementById("main") +); + +render( + {}} + onChangeComplete={() => {}} + renderers={{ canvas: {} }} + onSwatchHover={() => {}} + />, + document.getElementById("main") +); + +render( +
} + color={color} + onChange={() => {}} + onChangeComplete={() => {}} + />, + document.getElementById("main") +); + +render( + {}} + onChangeComplete={() => {}} + onSwatchHover={() => {}} + />, + document.getElementById("main") +); + +render( + {}} + onChangeComplete={() => {}} + onSwatchHover={() => {}} + />, + document.getElementById("main") +); + +render( + {}} + onChangeComplete={() => {}} + />, + document.getElementById("main") +); diff --git a/types/react-color/v2/tsconfig.json b/types/react-color/v2/tsconfig.json new file mode 100644 index 0000000000..af4b15d09e --- /dev/null +++ b/types/react-color/v2/tsconfig.json @@ -0,0 +1,46 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": ["es6", "dom"], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../../", + "typeRoots": ["../../"], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true, + "jsx": "react", + "noUnusedParameters": true, + "noUnusedLocals": true, + "paths": { + "react-color": ["react-color/v2"], + "react-color/*": ["react-color/v2/*"] + } + }, + "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" + ] +} diff --git a/types/react-color/v2/tslint.json b/types/react-color/v2/tslint.json new file mode 100644 index 0000000000..f93cf8562a --- /dev/null +++ b/types/react-color/v2/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +}