Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

More strict types #5

Merged
merged 2 commits into from
Jun 2, 2020
Merged

More strict types #5

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93fc2b9
more strict types
thompsongl Jun 2, 2020
ee7b0b7
Update src/components/color_picker/color_palette_picker/color_palette…
miukimiu Jun 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 61 additions & 26 deletions src/components/color_picker/color_palette_picker/color_palette_picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,29 +28,70 @@ import { ColorStop } from '../color_stops';

import { EuiSuperSelectProps } from '../../form/super_select';

export interface EuiColorPalettePickerPaletteProps {
interface EuiColorPalettePickerPaletteText {
/**
* For storing unique value of item
*/
value: string;
/**
* The name of your palette
*/
title?: string;
title: string;
/**
* Specify if the palette is
* `fixed`: individual color blocks; or
* `gradient`: each color fades into the next; or
* `text`: a text only option (a title is required).
*/
type: 'fixed' | 'gradient' | 'text';
type: 'text';
/**
* Array of color `strings` or `ColorStops` in the form of
* `{ stop: number, color: string }`. The stops must be numbers in an ordered range.
*/
palette?: string[] | ColorStop[];
}

interface EuiColorPalettePickerPaletteFixed {
/**
* For storing unique value of item
*/
value: string;
/**
* The name of your palette
*/
title?: string;
/**
* `fixed`: individual color blocks
*/
type: 'fixed';
/**
* Array of color `strings`.
*/
palette: string[];
}

interface EuiColorPalettePickerPaletteGradient {
/**
* For storing unique value of item
*/
value: string;
/**
* The name of your palette
*/
title?: string;
/**
* `gradient`: each color fades into the next
*/
type: 'gradient';
/**
* Array of color `strings` or `ColorStops` in the form of
* `{ stop: number, color: string }`. The stops must be numbers in an ordered range.
*/
palette: string[] | ColorStop[];
}

export type EuiColorPalettePickerPaletteProps =
| EuiColorPalettePickerPaletteText
| EuiColorPalettePickerPaletteFixed
| EuiColorPalettePickerPaletteGradient;

export type EuiColorPalettePickerProps<T extends string> = CommonProps &
Omit<
EuiSuperSelectProps<T>,
Expand Down Expand Up @@ -84,11 +125,15 @@ export const EuiColorPalettePicker: FunctionComponent<
selectionDisplay = 'palette',
...rest
}) => {
const getPalette = (palette: string[] | ColorStop[], type: string) => {
const getPalette = (
item:
| EuiColorPalettePickerPaletteFixed
| EuiColorPalettePickerPaletteGradient
) => {
const background =
type === 'fixed'
? getFixedLinearGradient(palette as string[])
: getLinearGradient(palette);
item.type === 'fixed'
? getFixedLinearGradient(item.palette)
: getLinearGradient(item.palette);

return (
<div
Expand All @@ -98,33 +143,23 @@ export const EuiColorPalettePicker: FunctionComponent<
);
};

const getInputDisplay = (
title: string,
palette: string[] | ColorStop[],
type: string
) => {
if (selectionDisplay === 'title') {
return title;
} else {
return type === 'text' ? title : getPalette(palette, type);
}
};

const paletteOptions = palettes.map(
(item: EuiColorPalettePickerPaletteProps) => {
const paletteForDisplay = item.type !== 'text' ? getPalette(item) : null;
return {
value: String(item.value),
inputDisplay: getInputDisplay(item.title!, item.palette!, item.type),
inputDisplay:
selectionDisplay === 'title' || item.type === 'text'
? item.title
: paletteForDisplay,
dropdownDisplay: (
<div className="euiColorPalettePicker__item">
{item.title && item.type !== 'text' && (
<div className="euiColorPalettePicker__itemTitle">
{item.title}
</div>
)}
{item.type !== 'text'
? getPalette(item.palette!, item.type)
: item.title}
{item.type === 'text' ? item.title : paletteForDisplay}
</div>
),
};
Expand Down