Skip to content

Commit

Permalink
fix: changed Sketch component to Class component and added componentD…
Browse files Browse the repository at this point in the history 
…idUpdate and Ref
  • Loading branch information
Ricardo Tornero committed Jan 25, 2023
1 parent bc9a0e1 commit e6abd11
Showing 1 changed file with 159 additions and 119 deletions.
278 changes: 159 additions & 119 deletions src/components/sketch/Sketch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,133 +7,173 @@ import { ColorWrap, Saturation, Hue, Alpha, Checkboard } from '../common'
import SketchFields from './SketchFields'
import SketchPresetColors from './SketchPresetColors'

export const Sketch = ({ width, rgb, hex, hsv, hsl, onChange, onSwatchHover,
disableAlpha, presetColors, renderers, styles: passedStyles = {}, className = '' }) => {
const styles = reactCSS(merge({
'default': {
picker: {
width,
padding: '10px 10px 0',
boxSizing: 'initial',
background: '#fff',
borderRadius: '4px',
boxShadow: '0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)',
},
saturation: {
width: '100%',
paddingBottom: '75%',
position: 'relative',
overflow: 'hidden',
},
Saturation: {
radius: '3px',
shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
controls: {
display: 'flex',
},
sliders: {
padding: '4px 0',
flex: '1',
},
color: {
width: '24px',
height: '24px',
position: 'relative',
marginTop: '4px',
marginLeft: '4px',
borderRadius: '3px',
},
activeColor: {
absolute: '0px 0px 0px 0px',
borderRadius: '2px',
background: `rgba(${ rgb.r },${ rgb.g },${ rgb.b },${ rgb.a })`,
boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
hue: {
position: 'relative',
height: '10px',
overflow: 'hidden',
},
Hue: {
radius: '2px',
shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
class Sketch extends React.Component {
constructor(props) {
super(props)
this.state = {
styles: {},
}

alpha: {
position: 'relative',
height: '10px',
marginTop: '4px',
overflow: 'hidden',
},
Alpha: {
radius: '2px',
shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
...passedStyles,
},
'disableAlpha': {
color: {
height: '10px',
},
hue: {
height: '10px',
this.container = null

this.containerRef = (element) => {
this.container = element
}
}

componentDidUpdate(prevProps) {
if (prevProps.presetColors.lenght !== this.props.presetColors.lenght) {
const { presetColors } = this.props

if (this.ref.current !== null) {
const saturationBlackContainer = this.ref.current.querySelector('.saturation-white')
const flexBoxFixContainers = this.ref.current.querySelectorAll('.flexbox-fix')

if (saturationBlackContainer) {
saturationBlackContainer.onclick = (e) => {
e.stopPropagation()
e.preventDefault()
}

flexBoxFixContainers.forEach((container) => {
if (container.children.length !== presetColors.length) {
container.onclick = (e) => {
e.stopPropagation()
e.preventDefault()
}
}
})
}
}
}
}
render() {
const { width, rgb, hex, hsv, hsl, onChange, onSwatchHover, disableAlpha, presetColors, renderers, styles: passedStyles = {}, className = '' } = this.props

const styles = reactCSS(merge({
'default': {
picker: {
width,
padding: '10px 10px 0',
boxSizing: 'initial',
background: '#fff',
borderRadius: '4px',
boxShadow: '0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)',
},
saturation: {
width: '100%',
paddingBottom: '75%',
position: 'relative',
overflow: 'hidden',
},
Saturation: {
radius: '3px',
shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
controls: {
display: 'flex',
},
sliders: {
padding: '4px 0',
flex: '1',
},
color: {
width: '24px',
height: '24px',
position: 'relative',
marginTop: '4px',
marginLeft: '4px',
borderRadius: '3px',
},
activeColor: {
absolute: '0px 0px 0px 0px',
borderRadius: '2px',
background: `rgba(${ rgb.r },${ rgb.g },${ rgb.b },${ rgb.a })`,
boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
hue: {
position: 'relative',
height: '10px',
overflow: 'hidden',
},
Hue: {
radius: '2px',
shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
alpha: {
position: 'relative',
height: '10px',
marginTop: '4px',
overflow: 'hidden',
},
Alpha: {
radius: '2px',
shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
},
...passedStyles,
},
alpha: {
display: 'none',
'disableAlpha': {
color: {
height: '10px',
},
hue: {
height: '10px',
},
alpha: {
display: 'none',
},
},
},
}, passedStyles), { disableAlpha })
}, passedStyles), { disableAlpha })

return (
<div style={ styles.picker } className={ `sketch-picker ${ className }` }>
<div style={ styles.saturation }>
<Saturation
style={ styles.Saturation }
hsl={ hsl }
hsv={ hsv }
onChange={ onChange }
/>
</div>
<div style={ styles.controls } className="flexbox-fix">
<div style={ styles.sliders }>
<div style={ styles.hue }>
<Hue
style={ styles.Hue }
hsl={ hsl }
onChange={ onChange }
/>
return (
<div style={ styles.picker } className={ `sketch-picker ${ className }` } ref={ this.containerRef }>
<div style={ styles.saturation }>
<Saturation
style={ styles.Saturation }
hsl={ hsl }
hsv={ hsv }
onChange={ onChange }
/>
</div>
<div style={ styles.controls } className="flexbox-fix">
<div style={ styles.sliders }>
<div style={ styles.hue }>
<Hue
style={ styles.Hue }
hsl={ hsl }
onChange={ onChange }
/>
</div>
<div style={ styles.alpha }>
<Alpha
style={ styles.Alpha }
rgb={ rgb }
hsl={ hsl }
renderers={ renderers }
onChange={ onChange }
/>
</div>
</div>
<div style={ styles.alpha }>
<Alpha
style={ styles.Alpha }
rgb={ rgb }
hsl={ hsl }
renderers={ renderers }
onChange={ onChange }
/>
<div style={ styles.color }>
<Checkboard />
<div style={ styles.activeColor } />
</div>
</div>
<div style={ styles.color }>
<Checkboard />
<div style={ styles.activeColor } />
</div>
<SketchFields
rgb={ rgb }
hsl={ hsl }
hex={ hex }
onChange={ onChange }
disableAlpha={ disableAlpha }
/>
<SketchPresetColors
colors={ presetColors }
onClick={ onChange }
onSwatchHover={ onSwatchHover }
/>
</div>

<SketchFields
rgb={ rgb }
hsl={ hsl }
hex={ hex }
onChange={ onChange }
disableAlpha={ disableAlpha }
/>
<SketchPresetColors
colors={ presetColors }
onClick={ onChange }
onSwatchHover={ onSwatchHover }
/>
</div>
)
)
}
}

Sketch.propTypes = {
Expand Down

0 comments on commit e6abd11

Please sign in to comment.