Fix `react-color` bugs (#1190)

* fix color picker styles

* fix rgba stringify on color picker change
main
Michael Fix 4 years ago committed by GitHub
parent 0cf9fad135
commit 711210e034
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -5,7 +5,7 @@ import ColorPicker from './ColorPicker'
import Button from './Button' import Button from './Button'
import Popout, { managePopout } from './Popout' import Popout, { managePopout } from './Popout'
import { COLORS, DEFAULT_BG_COLOR } from '../lib/constants' import { COLORS, DEFAULT_BG_COLOR } from '../lib/constants'
import { stringifyRGBA } from '../lib/util' import { stringifyColor } from '../lib/util'
function validateColor(str) { function validateColor(str) {
if (/#\d{3,6}|rgba{0,1}\(.*?\)/gi.test(str) || /\w+/gi.test(str)) { if (/#\d{3,6}|rgba{0,1}\(.*?\)/gi.test(str) || /\w+/gi.test(str)) {
@ -20,7 +20,7 @@ class BackgroundSelect extends React.PureComponent {
} }
} }
handlePickColor = ({ rgb }) => this.props.onChange({ backgroundColor: stringifyRGBA(rgb) }) handlePickColor = color => this.props.onChange({ backgroundColor: stringifyColor(color) })
render() { render() {
const { const {

@ -2,6 +2,7 @@ import React from 'react'
import SketchPicker from 'react-color/lib/Sketch' import SketchPicker from 'react-color/lib/Sketch'
import { COLORS } from '../lib/constants' import { COLORS } from '../lib/constants'
import { stringifyColor } from '../lib/util'
const pickerStyle = { const pickerStyle = {
backgroundColor: COLORS.BLACK, backgroundColor: COLORS.BLACK,
@ -18,7 +19,7 @@ export default function ColorPicker(props) {
<SketchPicker <SketchPicker
styles={{ picker: style || pickerStyle }} styles={{ picker: style || pickerStyle }}
onChange={setColor} onChange={setColor}
color={color} color={typeof color === 'string' ? color : stringifyColor(color)}
onChangeComplete={onChange} onChangeComplete={onChange}
presetColors={presets} presetColors={presets}
disableAlpha={disableAlpha} disableAlpha={disableAlpha}
@ -26,21 +27,24 @@ export default function ColorPicker(props) {
<style jsx> <style jsx>
{` {`
/* react-color overrides */ /* react-color overrides */
:global(.sketch-picker > div:nth-child(3) > div > div > span) { :global(.sketch-picker > div:nth-child(3) > div > div > input) {
color: ${COLORS.SECONDARY} !important width: 100% !important;
box-shadow: none;
outline: none;
border-radius: 2px;
background: ${COLORS.DARK_GRAY};
color: #fff !important;
} }
:global(.sketch-picker > div:nth-child(3) > div > div > input) { :global(.sketch-picker
width: 100% !important > div:nth-child(2)
box-shadow: none > div:nth-child(1)
outline: none > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) {
border-radius: 2px background: #fff;
background: ${COLORS.DARK_GRAY}
color: #fff !important
} }
:global(.sketch-picker > div:nth-child(2) > div:nth-child(1) > div:nth-child(2), .sketch-picker > div:nth-child(2) > div:nth-child(2)) { :global(.sketch-picker label) {
background: #fff color: ${COLORS.SECONDARY} !important;
} }
`} `}
</style> </style>

@ -6,7 +6,7 @@ import ListSetting from '../ListSetting'
import Popout from '../Popout' import Popout from '../Popout'
import ColorPicker from '../ColorPicker' import ColorPicker from '../ColorPicker'
import { HIGHLIGHT_KEYS, COLORS } from '../../lib/constants' import { HIGHLIGHT_KEYS, COLORS } from '../../lib/constants'
import { stringifyRGBA, generateId } from '../../lib/util' import { stringifyColor, generateId } from '../../lib/util'
const colorPickerStyle = { const colorPickerStyle = {
backgroundColor: COLORS.BLACK, backgroundColor: COLORS.BLACK,
@ -135,7 +135,7 @@ const ThemeCreate = ({
<HighlightPicker <HighlightPicker
title={highlight} title={highlight}
color={highlights[highlight]} color={highlights[highlight]}
onChange={({ rgb }) => updateHighlights({ [highlight]: stringifyRGBA(rgb) })} onChange={color => updateHighlights({ [highlight]: stringifyColor(color) })}
/> />
)} )}
<style jsx> <style jsx>

@ -91,7 +91,7 @@ export const formatCode = async code => {
}) })
} }
export const stringifyRGBA = obj => `rgba(${obj.r},${obj.g},${obj.b},${obj.a})` export const stringifyColor = obj => `rgba(${obj.rgb.r},${obj.rgb.g},${obj.rgb.b},${obj.rgb.a})`
export const generateId = () => Math.random().toString(36).slice(2) export const generateId = () => Math.random().toString(36).slice(2)

Loading…
Cancel
Save