🤖 Merge PR #44867 [react-color] Fixed typings and added missing properties by @alexandercerutti

* Added missin styling properties for CustomPickerProps

* Removed unused imports from react

* Added className and styles also to ColorPickerProps

* Fixed Chrome Component interface to be coherent to the code

* Removed optionals from ChromePickerStylesProps as they are optionals for Classes from reactcss

* Adapted AlphaPicker Component to be coherent with code

* Adapted BlockPicker to be coherent with code

* Adapted CirclePicker to be coherent with code

* Adapted CompactPicker to be coherent with code

* Adapted GithubPickerStyles to be coherent with code

* Adapted HuePicker to be coherent with code

* Adapted Material component to be coherent with code

* Adapted PhotoshopPicker to be coherent with code

* Adapted SketchPicker to be coherent with code

* Adapted SliderPicker to be coherent with code

* Adapted SwatchedPicker to be coherent with code

* Adapted TwitterPicker to be coherent with code

* Changed all styles props to be Partial

* Updated react-color version and updated contributors

* Added tests for className

* Reverted react-color version to most recent

* Replaced tab indentation with spaces

* Applied the changes also to v2

* Applied changes from #44685 (was opened at the same time)
This commit is contained in:
Alexander Cerutti 2020-06-25 21:22:41 +02:00 committed by GitHub
parent 26bfa8065c
commit d1013f6013
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 312 additions and 249 deletions

View File

@ -6,11 +6,13 @@
// Nokogiri <https://github.com/nkgrnkgr>,
// 0815Strohhut <https://github.com/0815Strohhut>,
// Daniel Fürst <https://github.com/dnlfrst>,
// Erick Tamayo <https://github.com/ericktamayo>
// Erick Tamayo <https://github.com/ericktamayo>,
// Alexander P. Cerutti <https://github.com/alexandercerutti>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
import { ComponentClass, ClassAttributes, StatelessComponent, ReactNode } from "react";
import { ClassAttributes, ReactNode } from "react";
import { Classes } from "reactcss";
export interface HSLColor {
a?: number;
@ -38,6 +40,8 @@ export type ColorChangeHandler = (color: ColorResult, event: React.ChangeEvent<H
export interface ColorPickerProps<A> extends ClassAttributes<A> {
color?: Color;
className?: string;
styles?: Partial<Classes<any>>;
onChange?: ColorChangeHandler;
onChangeComplete?: ColorChangeHandler;
}
@ -45,6 +49,8 @@ export interface ColorPickerProps<A> extends ClassAttributes<A> {
export interface CustomPickerProps<A> extends ClassAttributes<A> {
color?: Color;
pointer?: ReactNode;
className?: string;
styles?: Partial<Classes<any>>;
onChange: ColorChangeHandler;
}

View File

@ -1,9 +1,16 @@
import { Component } from "react";
import { Component, CSSProperties } from "react";
import { ColorPickerProps } from "../../..";
import { Classes } from "reactcss";
export interface AlphaPickerStylesProps {
picker: CSSProperties;
alpha: CSSProperties;
}
export interface AlphaPickerProps extends ColorPickerProps<AlphaPicker> {
height?: string;
width?: string;
styles?: Partial<Classes<AlphaPickerStylesProps>>;
}
export default class AlphaPicker extends Component<AlphaPickerProps> {}
export default class AlphaPicker extends Component<AlphaPickerProps> { }

View File

@ -1,11 +1,22 @@
import { Component } from "react";
import { Component, CSSProperties } from "react";
import { ColorPickerProps, ColorResult } from "../../..";
import { Classes } from "reactcss";
export interface BlockPickerStylesProps {
card: CSSProperties;
head: CSSProperties;
body: CSSProperties;
label: CSSProperties;
triangle: CSSProperties;
input: CSSProperties;
}
export interface BlockPickerProps extends ColorPickerProps<BlockPicker> {
colors?: string[];
width?: string;
triangle?: 'hide' | 'top';
styles?: Partial<Classes<BlockPickerStylesProps>>;
onSwatchHover?(color: ColorResult, event: MouseEvent): void;
}
export default class BlockPicker extends Component<BlockPickerProps> {}
export default class BlockPicker extends Component<BlockPickerProps> { }

View File

@ -1,37 +1,26 @@
import { Component, CSSProperties } from "react";
import { ColorPickerProps } from "../../..";
import { Classes } from "reactcss";
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 ChromePickerStylesProps {
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 ChromePickerProps extends ColorPickerProps<ChromePicker> {
disableAlpha?: boolean;
styles?: ChromePickerStyles;
styles?: Partial<Classes<ChromePickerStylesProps>>;
}
export default class ChromePicker extends Component<ChromePickerProps> {}
export default class ChromePicker extends Component<ChromePickerProps> { }

View File

@ -1,12 +1,18 @@
import { Component } from "react";
import { Component, CSSProperties } from "react";
import { ColorPickerProps, ColorResult } from "../../..";
import { Classes } from "reactcss";
export interface CirclePickerStylesProps {
card: CSSProperties;
}
export interface CirclePickerProps extends ColorPickerProps<CirclePicker> {
colors?: string[];
width?: string;
circleSize?: number;
circleSpacing?: number;
styles?: Partial<Classes<CirclePickerStylesProps>>;
onSwatchHover?(color: ColorResult, event: MouseEvent): void;
}
export default class CirclePicker extends Component<CirclePickerProps> {}
export default class CirclePicker extends Component<CirclePickerProps> { }

View File

@ -1,9 +1,17 @@
import { Component } from "react";
import { Component, CSSProperties } from "react";
import { ColorPickerProps, ColorResult } from "../../..";
import { Classes } from "reactcss";
export interface CompactPickerStylesProps {
Compact: CSSProperties;
compact: CSSProperties;
clear: CSSProperties;
}
export interface CompactPickerProps extends ColorPickerProps<CompactPicker> {
colors?: string[];
styles?: Partial<Classes<CompactPickerStylesProps>>;
onSwatchHover?(color: ColorResult, event: MouseEvent): void;
}
export default class CompactPicker extends Component<CompactPickerProps> {}
export default class CompactPicker extends Component<CompactPickerProps> { }

View File

@ -1,11 +1,19 @@
import { Component } from "react";
import { Component, CSSProperties } from "react";
import { ColorPickerProps, ColorResult } from "../../..";
import { Classes } from "reactcss";
export interface GithubPickerStylesProps {
card: CSSProperties;
triangle: CSSProperties;
triangleShadow: CSSProperties;
}
export interface GithubPickerProps extends ColorPickerProps<GithubPicker> {
colors?: string[];
width?: string;
triangle?: 'hide' | 'top-left' | 'top-right';
styles?: Partial<Classes<GithubPickerStylesProps>>;
onSwatchHover?(color: ColorResult, event: MouseEvent): void;
}
export default class GithubPicker extends Component<GithubPickerProps> {}
export default class GithubPicker extends Component<GithubPickerProps> { }

View File

@ -1,9 +1,16 @@
import { Component } from "react";
import { Component, CSSProperties } from "react";
import { ColorPickerProps } from "../../..";
import { Classes } from "reactcss";
export interface HuePickerStylesProps {
picker: CSSProperties;
hue: CSSProperties;
}
export interface HuePickerProps extends ColorPickerProps<HuePicker> {
height?: string;
width?: string;
styles?: Partial<Classes<HuePickerStylesProps>>;
}
export default class HuePicker extends Component<HuePickerProps> {}
export default class HuePicker extends Component<HuePickerProps> { }

View File

@ -1,6 +1,22 @@
import { Component } from "react";
import { Component, CSSProperties } from "react";
import { ColorPickerProps } from "../../..";
import { Classes } from "reactcss";
export type MaterialPickerProps = ColorPickerProps<MaterialPicker>;
export interface MaterialPickerStylesProps {
material: CSSProperties;
HEXwrap: CSSProperties;
HEXinput: CSSProperties;
HEXlabel: CSSProperties;
Hex: CSSProperties;
RGBwrap: CSSProperties;
RGBinput: CSSProperties;
RGBlabel: CSSProperties;
split: CSSProperties;
third: CSSProperties;
}
export default class MaterialPicker extends Component<MaterialPickerProps> {}
export interface MaterialPickerProps extends ColorPickerProps<MaterialPicker> {
styles?: Partial<Classes<MaterialPickerStylesProps>>;
}
export default class MaterialPicker extends Component<MaterialPickerProps> { }

View File

@ -1,10 +1,24 @@
import { Component } from "react";
import { Component, CSSProperties } from "react";
import { ColorChangeHandler, ColorPickerProps } from "../../..";
import { Classes } from "reactcss";
export interface PhotoshopPickerStylesProps {
picker: CSSProperties;
head: CSSProperties;
body: CSSProperties;
saturation: CSSProperties;
hue: CSSProperties;
controls: CSSProperties;
top: CSSProperties;
previews: CSSProperties;
actions: CSSProperties;
}
export interface PhotoshopPickerProps extends ColorPickerProps<PhotoshopPicker> {
header?: string;
styles?: Partial<Classes<PhotoshopPickerStylesProps>>;
onAccept?: ColorChangeHandler;
onCancel?: ColorChangeHandler;
}
export default class PhotoshopPicker extends Component<PhotoshopPickerProps> {}
export default class PhotoshopPicker extends Component<PhotoshopPickerProps> { }

View File

@ -1,11 +1,27 @@
import { Component } from "react";
import { Component, CSSProperties } from "react";
import { ColorPickerProps, ColorResult } from "../../..";
import { Classes } from "reactcss";
export interface SketchPickerStylesProps {
picker: CSSProperties;
saturation: CSSProperties;
Saturation: CSSProperties;
controls: CSSProperties;
sliders: CSSProperties;
color: CSSProperties;
activeColor: CSSProperties;
hue: CSSProperties;
Hue: CSSProperties;
alpha: CSSProperties;
Alpha: CSSProperties;
}
export interface SketchPickerProps extends ColorPickerProps<SketchPicker> {
disableAlpha?: boolean;
presetColors?: string[];
width?: string;
styles?: Partial<Classes<SketchPickerStylesProps>>;
onSwatchHover?(color: ColorResult, event: MouseEvent): void;
}
export default class SketchPicker extends Component<SketchPickerProps> {}
export default class SketchPicker extends Component<SketchPickerProps> { }

View File

@ -1,6 +1,14 @@
import { Component } from "react";
import { Component, CSSProperties } from "react";
import { ColorPickerProps } from "../../..";
import { Classes } from "reactcss";
export type SliderPickerProps = ColorPickerProps<SliderPicker>;
export interface SliderPickerStylesProps {
hue: CSSProperties;
Hue: CSSProperties;
}
export default class SliderPicker extends Component<SliderPickerProps> {}
export interface SliderPickerProps extends ColorPickerProps<SliderPicker> {
styles?: Partial<Classes<SliderPickerStylesProps>>;
}
export default class SliderPicker extends Component<SliderPickerProps> { }

View File

@ -1,11 +1,20 @@
import { Component } from "react";
import { Component, CSSProperties } from "react";
import { ColorPickerProps, ColorResult } from "../../..";
import { Classes } from "reactcss";
export interface SwatchesPickerStylesProps {
picker: CSSProperties;
overflow: CSSProperties;
body: CSSProperties;
clear: CSSProperties;
}
export interface SwatchesPickerProps extends ColorPickerProps<SwatchesPicker> {
colors?: string[][];
height?: number;
width?: number;
styles?: Partial<Classes<SwatchesPickerStylesProps>>;
onSwatchHover?(color: ColorResult, event: MouseEvent): void;
}
export default class SwatchesPicker extends Component<SwatchesPickerProps> {}
export default class SwatchesPicker extends Component<SwatchesPickerProps> { }

View File

@ -1,11 +1,25 @@
import { Component } from "react";
import { Component, CSSProperties } from "react";
import { ColorPickerProps, ColorResult } from "../../..";
import { Classes } from "reactcss";
export interface TwitterPickerStylesProps {
card: CSSProperties;
body: CSSProperties;
label: CSSProperties;
triangle: CSSProperties;
triangleShadow: CSSProperties;
hash: CSSProperties;
input: CSSProperties;
swatch: CSSProperties;
clear: CSSProperties;
}
export interface TwitterPickerProps extends ColorPickerProps<TwitterPicker> {
colors?: string[];
width?: string;
triangle?: 'hide' | 'top-left' | 'top-right';
styles?: Partial<Classes<TwitterPickerStylesProps>>;
onSwatchHover?(color: ColorResult, event: MouseEvent): void;
}
export default class TwitterPicker extends Component<TwitterPickerProps> {}
export default class TwitterPicker extends Component<TwitterPickerProps> { }

View File

@ -21,11 +21,11 @@ const CustomComponent: StatelessComponent<CustomProps> = (props: CustomProps) =>
return (
<div>
<Alpha color={ props.color } onChange={ onChange } />
<Checkboard size={ 10 } white="transparent" grey="#333" />
<EditableInput value={ props.color } label="Test" onChange={ onChange } />
<Hue color={ props.color } direction="horizontal" onChange={ onChange } />
<Saturation color={ props.color } onChange={ onChange } />
<Alpha color={props.color} onChange={onChange} />
<Checkboard size={10} white="transparent" grey="#333" />
<EditableInput value={props.color} label="Test" onChange={onChange} />
<Hue color={props.color} direction="horizontal" onChange={onChange} />
<Saturation color={props.color} onChange={onChange} />
</div>
);
};
@ -33,17 +33,17 @@ const Custom = CustomPicker(CustomComponent);
const colors = ["#000", "#333"];
render(<AlphaPicker height="100px" width="100px" />, document.getElementById("main"));
render(<BlockPicker colors={ colors } width="100px" />, document.getElementById("main"));
render(<ChromePicker disableAlpha styles={{ default: { picker: { width: 200 }}}} />, document.getElementById("main"));
render(<CirclePicker colors={ colors } width="100px" />, document.getElementById("main"));
render(<CompactPicker colors={ colors } />, document.getElementById("main"));
render(<GithubPicker colors={ colors } width="100px" />, document.getElementById("main"));
render(<HuePicker height="100px" width="100px" />, document.getElementById("main"));
render(<MaterialPicker />, document.getElementById("main"));
render(<PhotoshopPicker header="Test" />, document.getElementById("main"));
render(<SketchPicker disableAlpha presetColors={ colors } />, document.getElementById("main"));
render(<SliderPicker />, document.getElementById("main"));
render(<SwatchesPicker colors={ [colors] } height={ 100 } width={ 100 } />, document.getElementById("main"));
render(<TwitterPicker />, document.getElementById("main"));
render(<AlphaPicker className="custom-cn" height="100px" width="100px" />, document.getElementById("main"));
render(<BlockPicker className="custom-cn" colors={colors} width="100px" />, document.getElementById("main"));
render(<ChromePicker className="custom-cn" disableAlpha styles={{ default: { picker: { width: 200 } } }} />, document.getElementById("main"));
render(<CirclePicker className="custom-cn" colors={colors} width="100px" />, document.getElementById("main"));
render(<CompactPicker className="custom-cn" colors={colors} />, document.getElementById("main"));
render(<GithubPicker className="custom-cn" colors={colors} width="100px" />, document.getElementById("main"));
render(<HuePicker className="custom-cn" height="100px" width="100px" />, document.getElementById("main"));
render(<MaterialPicker className="custom-cn" />, document.getElementById("main"));
render(<PhotoshopPicker className="custom-cn" header="Test" />, document.getElementById("main"));
render(<SketchPicker className="custom-cn" disableAlpha presetColors={colors} />, document.getElementById("main"));
render(<SliderPicker className="custom-cn" />, document.getElementById("main"));
render(<SwatchesPicker className="custom-cn" colors={[colors]} height={100} width={100} />, document.getElementById("main"));
render(<TwitterPicker className="custom-cn" />, document.getElementById("main"));
render(<Custom />, document.getElementById("main"));

View File

@ -1,5 +1,6 @@
import { Component, ComponentType } from "react";
import { Component, ComponentType, CSSProperties } from "react";
import { RenderersProps, CustomPickerProps } from "../../..";
import { Classes } from "reactcss";
export interface AlphaPickerProps extends RenderersProps, CustomPickerProps {
width?: string;
@ -7,7 +8,13 @@ export interface AlphaPickerProps extends RenderersProps, CustomPickerProps {
direction?: "horizontal" | "vertical";
style?: any;
pointer?: ComponentType;
styles?: Partial<Classes<AlphaPickerStylesProps>>;
className?: string;
}
export default class AlphaPicker extends Component<AlphaPickerProps> {}
export default class AlphaPicker extends Component<AlphaPickerProps> { }
export interface AlphaPickerStylesProps {
picker: CSSProperties;
alpha: CSSProperties;
}

View File

@ -1,17 +1,14 @@
import { Component, CSSProperties } from "react";
import { CustomPickerProps, ColorState } from "../../..";
import { Classes } from "reactcss";
export interface BlockPickerDefaultStyles {
card?: CSSProperties;
head?: CSSProperties;
body?: CSSProperties;
label?: CSSProperties;
triangle?: CSSProperties;
input?: CSSProperties;
}
export interface BlockPickerStyles {
default?: BlockPickerDefaultStyles;
export interface BlockPickerStylesProps {
card: CSSProperties;
head: CSSProperties;
body: CSSProperties;
label: CSSProperties;
triangle: CSSProperties;
input: CSSProperties;
}
export interface BlockPickerProps extends CustomPickerProps {
@ -19,8 +16,8 @@ export interface BlockPickerProps extends CustomPickerProps {
colors?: string[];
width?: string;
triangle?: "hide" | "top";
styles?: BlockPickerStyles;
styles?: Partial<Classes<BlockPickerStylesProps>>;
className?: string;
}
export default class BlockPicker extends Component<BlockPickerProps> {}
export default class BlockPicker extends Component<BlockPickerProps> { }

View File

@ -1,20 +1,21 @@
import { Component, CSSProperties } from "react";
import { RenderersProps, CustomPickerProps } from "../../..";
import { Classes } from "reactcss";
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 ChromePickerStylesProps {
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 {
@ -24,16 +25,11 @@ export interface ChromePickerDisableAlphaStyles {
swatch?: CSSProperties;
}
export interface ChromePickerStyles {
default?: ChromePickerDefaultStyles;
disableAlpha?: ChromePickerDisableAlphaStyles;
}
export interface ChromePickerProps extends RenderersProps, CustomPickerProps {
width?: string;
disableAlpha?: boolean;
styles?: ChromePickerStyles;
styles?: Partial<Classes<ChromePickerStylesProps>>;
className?: string;
}
export default class ChromePicker extends Component<ChromePickerProps> {}
export default class ChromePicker extends Component<ChromePickerProps> { }

View File

@ -1,12 +1,9 @@
import { Component, CSSProperties } from "react";
import { CustomPickerProps, ColorState } from "../../..";
import { Classes } from "reactcss";
export interface CirclePickerDefaultStyles {
card?: CSSProperties;
}
export interface CirclePickerStyles {
default?: CirclePickerDefaultStyles;
export interface CirclePickerStylesProps {
card: CSSProperties;
}
export interface CirclePickerProps extends CustomPickerProps {
@ -15,8 +12,7 @@ export interface CirclePickerProps extends CustomPickerProps {
circleSize?: number;
circleSpacing?: number;
onSwatchHover?: (color: ColorState, event: MouseEvent) => void;
styles?: CirclePickerStyles;
className?: string;
styles?: Partial<Classes<CirclePickerStylesProps>>;
}
export default class CirclePicker extends Component<CirclePickerProps> {}
export default class CirclePicker extends Component<CirclePickerProps> { }

View File

@ -1,5 +1,6 @@
import { ComponentType } from "react";
import { Color, ColorState, ColorChangeHandler } from "../../..";
import { Classes } from "reactcss";
type SetDifference<A, B> = A extends B ? never : A;
@ -13,6 +14,8 @@ export interface CustomPickerInjectedProps extends Partial<ColorState> {
export interface CustomPickerProps {
color?: Color;
className?: string;
styles?: Partial<Classes<any>>;
onChange?: OnChangeHandler;
onChangeComplete?: OnChangeHandler;
}
@ -21,4 +24,4 @@ export default function CustomPicker<A>(
component: ComponentType<A & CustomPickerInjectedProps>
): ComponentType<Diff<A, CustomPickerProps> & CustomPickerProps>;
export {};
export { };

View File

@ -1,20 +1,17 @@
import { Component, CSSProperties } from "react";
import { CustomPickerProps, ColorState } from "../../..";
import { Classes } from "reactcss";
export interface CompactPickerDefaultStyles {
export interface CompactPickerStylesProps {
Compact?: CSSProperties;
compact?: CSSProperties;
clear?: CSSProperties;
}
export interface CompactPickerStyles {
default?: CompactPickerDefaultStyles;
}
export interface CompactPickerProps extends CustomPickerProps {
colors?: string[];
styles?: Partial<Classes<CompactPickerStylesProps>>;
onSwatchHover?(color: ColorState, event: MouseEvent): void;
styles?: CompactPickerStyles;
className?: string;
}
export default class CompactPicker extends Component<CompactPickerProps> {}
export default class CompactPicker extends Component<CompactPickerProps> { }

View File

@ -1,27 +1,11 @@
import { Component, CSSProperties } from "react";
import { CustomPickerProps, ColorState } from "../../..";
import { Classes } from "reactcss";
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 GithubPickerStylesProps {
card: CSSProperties;
triangle: CSSProperties;
triangleShadow: CSSProperties;
}
export interface GithubPickerProps extends CustomPickerProps {
@ -29,8 +13,7 @@ export interface GithubPickerProps extends CustomPickerProps {
width?: string;
triangle?: "hide" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
onSwatchHover?(color: ColorState, event: MouseEvent): void;
className?: string;
styles?: GithubPickerStyles;
styles?: Partial<Classes<GithubPickerStylesProps>>;
}
export default class GithubPicker extends Component<GithubPickerProps> {}
export default class GithubPicker extends Component<GithubPickerProps> { }

View File

@ -1,13 +1,10 @@
import { Component, ComponentType, CSSProperties } from "react";
import { CustomPickerProps } from "../../..";
import { Classes } from "reactcss";
export interface HuePickerDefaultStyle {
picker?: CSSProperties;
hue?: CSSProperties;
}
export interface HuePickerStyle {
default?: HuePickerDefaultStyle;
export interface HuePickerStylesProps {
picker: CSSProperties;
hue: CSSProperties;
}
export interface HuePickerProps extends CustomPickerProps {
@ -15,8 +12,7 @@ export interface HuePickerProps extends CustomPickerProps {
width?: string;
direction?: "vertical" | "horizontal";
pointer?: ComponentType;
styles?: HuePickerStyle;
className?: string;
styles?: Partial<Classes<HuePickerStylesProps>>;
}
export default class HuePicker extends Component<HuePickerProps> {}
export default class HuePicker extends Component<HuePickerProps> { }

View File

@ -1,26 +1,22 @@
import { Component, CSSProperties } from "react";
import { CustomPickerProps } from "../../..";
import { Classes } from "reactcss";
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 MaterialPickerStylesProps {
material: CSSProperties;
HEXwrap: CSSProperties;
HEXinput: CSSProperties;
HEXlabel: CSSProperties;
Hex: CSSProperties;
RGBwrap: CSSProperties;
RGBinput: CSSProperties;
RGBlabel: CSSProperties;
split: CSSProperties;
third: CSSProperties;
}
export interface MaterialPickerProps extends CustomPickerProps {
styles?: MaterialPickerStyles;
className?: string;
styles?: Partial<Classes<MaterialPickerStylesProps>>;
}
export default class MaterialPicker extends Component<MaterialPickerProps> {}
export default class MaterialPicker extends Component<MaterialPickerProps> { }

View File

@ -1,28 +1,25 @@
import { Component, MouseEvent, CSSProperties } from "react";
import { CustomPickerProps } from "../../..";
import { Classes } from "reactcss";
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 PhotoshopPickerStylesProps {
picker: CSSProperties;
head: CSSProperties;
body: CSSProperties;
saturation: CSSProperties;
hue: CSSProperties;
controls: CSSProperties;
top: CSSProperties;
preview: CSSProperties;
actions: CSSProperties;
}
export interface PhotoshopPickerProps extends CustomPickerProps {
header?: string;
onAccept?: (event: MouseEvent<HTMLDivElement, MouseEvent>) => void;
onCancel?: (event: MouseEvent<HTMLDivElement, MouseEvent>) => void;
styles?: PhotoshopPickerStyles;
styles?: Partial<Classes<PhotoshopPickerStylesProps>>;
className?: string;
}
export default class PhotoshopPicker extends Component<PhotoshopPickerProps> {}
export default class PhotoshopPicker extends Component<PhotoshopPickerProps> { }

View File

@ -1,23 +1,19 @@
import { Component, CSSProperties } from "react";
import { CustomPickerProps, ColorState, RenderersProps } from "../../..";
import { Classes } from "reactcss";
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 SketchPickerStylesProps {
picker: CSSProperties;
saturation: CSSProperties;
Saturation: CSSProperties;
controls: CSSProperties;
sliders: CSSProperties;
color: CSSProperties;
activeColor: CSSProperties;
hue: CSSProperties;
Hue: CSSProperties;
alpha: CSSProperties;
Alpha: CSSProperties;
}
type PresetColor = { color: string; title: string } | string;
@ -25,11 +21,10 @@ export interface SketchPickerProps extends RenderersProps, CustomPickerProps {
disableAlpha?: boolean;
presetColors?: PresetColor[];
width?: string;
styles?: Partial<Classes<SketchPickerStylesProps>>;
onSwatchHover?: (color: ColorState, event: MouseEvent) => void;
styles?: SketchPickerStyles;
className?: string;
}
export default class SketchPicker extends Component<SketchPickerProps> {}
export default class SketchPicker extends Component<SketchPickerProps> { }
export {};
export { };

View File

@ -1,19 +1,15 @@
import { Component, ComponentType, CSSProperties } from "react";
import { CustomPickerProps } from "../../..";
import { Classes } from "reactcss";
export interface SliderPickerDefaultStyles {
hue?: CSSProperties;
Hue?: CSSProperties;
}
export interface SliderPickerStyles {
default?: SliderPickerDefaultStyles;
export interface SliderPickerStylesProps {
hue: CSSProperties;
Hue: CSSProperties;
}
export interface SliderPickerProps extends CustomPickerProps {
pointer?: ComponentType;
styles?: SliderPickerStyles;
className?: string;
styles?: Partial<Classes<SliderPickerStylesProps>>;
}
export default class SliderPicker extends Component<SliderPickerProps> {}
export default class SliderPicker extends Component<SliderPickerProps> { }

View File

@ -1,24 +1,20 @@
import { Component, CSSProperties } from "react";
import { CustomPickerProps, ColorState } from "../../..";
import { Classes } from "reactcss";
export interface SwatchesPickerDefaultStyles {
export interface SwatchesPickerStylesProps {
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;
styles?: Partial<Classes<SwatchesPickerStylesProps>>;
}
export default class SwatchesPicker extends Component<SwatchesPickerProps> {}
export default class SwatchesPicker extends Component<SwatchesPickerProps> { }

View File

@ -1,7 +1,8 @@
import { Component, CSSProperties } from "react";
import { CustomPickerProps, ColorState } from "../../..";
import { Classes } from "reactcss";
export interface TwitterPickerDefaultStyle {
export interface TwitterPickerStylesProps {
card?: CSSProperties;
body?: CSSProperties;
label?: CSSProperties;
@ -13,24 +14,12 @@ export interface TwitterPickerDefaultStyle {
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";
styles?: Partial<Classes<TwitterPickerStylesProps>>;
onSwatchHover?(color: ColorState, event: MouseEvent): void;
styles?: TwitterPickerStyle;
className?: string;
}
export default class TwitterPicker extends Component<TwitterPickerProps> {}
export default class TwitterPicker extends Component<TwitterPickerProps> { }