mirror of https://github.com/grafana/grafana
Grafana-UI: replace react-color with react-colorful (#33267)
* Grafana-UI: replace react-color with react-colorful * Throttle onChange from SpectrumPalettepull/33329/head
Giordano Ricci
4 years ago
committed by
GitHub
parent
d76c056656
commit
ec1c85acca
@ -1,101 +1,67 @@ |
|||||||
import React from 'react'; |
import React, { useMemo, useState } from 'react'; |
||||||
import { CustomPicker, ColorResult } from 'react-color'; |
|
||||||
|
|
||||||
import { Saturation, Hue, Alpha } from 'react-color/lib/components/common'; |
import { RgbaStringColorPicker } from 'react-colorful'; |
||||||
import tinycolor from 'tinycolor2'; |
import tinycolor from 'tinycolor2'; |
||||||
import ColorInput from './ColorInput'; |
import ColorInput from './ColorInput'; |
||||||
import { Themeable } from '../../types'; |
|
||||||
import SpectrumPalettePointer, { SpectrumPalettePointerProps } from './SpectrumPalettePointer'; |
|
||||||
import { GrafanaTheme, getColorForTheme } from '@grafana/data'; |
import { GrafanaTheme, getColorForTheme } from '@grafana/data'; |
||||||
|
import { css, cx } from '@emotion/css'; |
||||||
|
import { useStyles, useTheme } from '../../themes'; |
||||||
|
import { useThrottleFn } from 'react-use'; |
||||||
|
|
||||||
export interface SpectrumPaletteProps extends Themeable { |
export interface SpectrumPaletteProps { |
||||||
color: string; |
color: string; |
||||||
onChange: (color: string) => void; |
onChange: (color: string) => void; |
||||||
} |
} |
||||||
|
|
||||||
// eslint-disable-next-line react/display-name
|
const SpectrumPalette: React.FunctionComponent<SpectrumPaletteProps> = ({ color, onChange }) => { |
||||||
const renderPointer = (theme: GrafanaTheme) => (props: SpectrumPalettePointerProps) => ( |
const [currentColor, setColor] = useState(color); |
||||||
<SpectrumPalettePointer {...props} theme={theme} /> |
useThrottleFn(onChange, 500, [currentColor]); |
||||||
); |
|
||||||
|
|
||||||
// @ts-ignore
|
const theme = useTheme(); |
||||||
const SpectrumPicker = CustomPicker<Themeable>(({ rgb, hsl, onChange, theme }) => { |
const styles = useStyles(getStyles); |
||||||
return ( |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
display: 'flex', |
|
||||||
width: '100%', |
|
||||||
flexDirection: 'column', |
|
||||||
}} |
|
||||||
> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
display: 'flex', |
|
||||||
}} |
|
||||||
> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
display: 'flex', |
|
||||||
flexGrow: 1, |
|
||||||
flexDirection: 'column', |
|
||||||
}} |
|
||||||
> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
position: 'relative', |
|
||||||
height: '100px', |
|
||||||
width: '100%', |
|
||||||
}} |
|
||||||
> |
|
||||||
{/* |
|
||||||
// @ts-ignore */}
|
|
||||||
<Saturation onChange={onChange} hsl={hsl} hsv={tinycolor(hsl).toHsv()} /> |
|
||||||
</div> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
width: '100%', |
|
||||||
height: '16px', |
|
||||||
marginTop: '16px', |
|
||||||
position: 'relative', |
|
||||||
background: 'white', |
|
||||||
}} |
|
||||||
> |
|
||||||
{/* |
|
||||||
// @ts-ignore */}
|
|
||||||
<Alpha rgb={rgb} hsl={hsl} a={rgb.a} onChange={onChange} pointer={renderPointer(theme)} /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div |
const rgbaString = useMemo(() => { |
||||||
style={{ |
return currentColor.startsWith('rgba') |
||||||
position: 'relative', |
? currentColor |
||||||
width: '16px', |
: tinycolor(getColorForTheme(currentColor, theme)).toRgbString(); |
||||||
height: '100px', |
}, [currentColor, theme]); |
||||||
marginLeft: '16px', |
|
||||||
}} |
|
||||||
> |
|
||||||
{/* |
|
||||||
// @ts-ignore */}
|
|
||||||
<Hue onChange={onChange} hsl={hsl} direction="vertical" pointer={renderPointer(theme)} /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}); |
|
||||||
|
|
||||||
const SpectrumPalette: React.FunctionComponent<SpectrumPaletteProps> = ({ color, onChange, theme }) => { |
|
||||||
return ( |
return ( |
||||||
<div> |
<> |
||||||
<SpectrumPicker |
<RgbaStringColorPicker className={cx(styles.root)} color={rgbaString} onChange={setColor} /> |
||||||
color={tinycolor(getColorForTheme(color, theme)).toRgb()} |
|
||||||
onChange={(a: ColorResult) => { |
<ColorInput theme={theme} color={currentColor} onChange={setColor} className={styles.colorInput} /> |
||||||
onChange(tinycolor(a.rgb).toString()); |
</> |
||||||
}} |
|
||||||
theme={theme} |
|
||||||
/> |
|
||||||
<ColorInput theme={theme} color={color} onChange={onChange} style={{ marginTop: '16px' }} /> |
|
||||||
</div> |
|
||||||
); |
); |
||||||
}; |
}; |
||||||
|
|
||||||
|
const getStyles = (theme: GrafanaTheme) => ({ |
||||||
|
root: css` |
||||||
|
&.react-colorful { |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.react-colorful { |
||||||
|
&__saturation { |
||||||
|
border-radius: ${theme.border.radius.sm} ${theme.border.radius.sm} 0 0; |
||||||
|
} |
||||||
|
&__alpha { |
||||||
|
border-radius: 0 0 ${theme.border.radius.sm} ${theme.border.radius.sm}; |
||||||
|
} |
||||||
|
&__alpha, |
||||||
|
&__hue { |
||||||
|
height: ${theme.spacing.md}; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
&__pointer { |
||||||
|
height: ${theme.spacing.md}; |
||||||
|
width: ${theme.spacing.md}; |
||||||
|
} |
||||||
|
} |
||||||
|
`,
|
||||||
|
colorInput: css` |
||||||
|
margin-top: ${theme.spacing.md}; |
||||||
|
`,
|
||||||
|
}); |
||||||
|
|
||||||
export default SpectrumPalette; |
export default SpectrumPalette; |
||||||
|
|||||||
@ -1,77 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { Themeable } from '../../types'; |
|
||||||
|
|
||||||
export interface SpectrumPalettePointerProps extends Themeable { |
|
||||||
direction?: string; |
|
||||||
} |
|
||||||
|
|
||||||
const SpectrumPalettePointer: React.FunctionComponent<SpectrumPalettePointerProps> = ({ theme, direction }) => { |
|
||||||
const styles = { |
|
||||||
picker: { |
|
||||||
width: '16px', |
|
||||||
height: '16px', |
|
||||||
transform: direction === 'vertical' ? 'translate(0, -8px)' : 'translate(-8px, 0)', |
|
||||||
}, |
|
||||||
}; |
|
||||||
|
|
||||||
const pointerColor = theme.colors.text; |
|
||||||
|
|
||||||
let pointerStyles: React.CSSProperties = { |
|
||||||
position: 'absolute', |
|
||||||
left: '6px', |
|
||||||
width: '0', |
|
||||||
height: '0', |
|
||||||
borderStyle: 'solid', |
|
||||||
background: 'none', |
|
||||||
}; |
|
||||||
|
|
||||||
let topArrowStyles: React.CSSProperties = { |
|
||||||
top: '-7px', |
|
||||||
borderWidth: '6px 3px 0px 3px', |
|
||||||
borderColor: `${pointerColor} transparent transparent transparent`, |
|
||||||
}; |
|
||||||
|
|
||||||
let bottomArrowStyles: React.CSSProperties = { |
|
||||||
bottom: '-7px', |
|
||||||
borderWidth: '0px 3px 6px 3px', |
|
||||||
borderColor: ` transparent transparent ${pointerColor} transparent`, |
|
||||||
}; |
|
||||||
|
|
||||||
if (direction === 'vertical') { |
|
||||||
pointerStyles = { |
|
||||||
...pointerStyles, |
|
||||||
left: 'auto', |
|
||||||
}; |
|
||||||
topArrowStyles = { |
|
||||||
borderWidth: '3px 0px 3px 6px', |
|
||||||
borderColor: `transparent transparent transparent ${pointerColor}`, |
|
||||||
left: '-7px', |
|
||||||
top: '7px', |
|
||||||
}; |
|
||||||
bottomArrowStyles = { |
|
||||||
borderWidth: '3px 6px 3px 0px', |
|
||||||
borderColor: `transparent ${pointerColor} transparent transparent`, |
|
||||||
right: '-7px', |
|
||||||
top: '7px', |
|
||||||
}; |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div style={styles.picker}> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
...pointerStyles, |
|
||||||
...topArrowStyles, |
|
||||||
}} |
|
||||||
/> |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
...pointerStyles, |
|
||||||
...bottomArrowStyles, |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default SpectrumPalettePointer; |
|
||||||
Loading…
Reference in new issue