AlphaPicker.js

import {Component, h} from 'preact'; // eslint-disable-line no-unused-vars
import React from 'react';
import Select from 'react-select';
import { CompactPicker } from 'react-color';
import {AlphaPicker} from 'react-color';
import reactCSS from 'reactcss';
import Style from './Style';


class MyTestColorPicker extends React.Component {

     
  render({color,displayColorPicker,handleclicked,handleColorChange}){

        let rgbcolor = {
            r:color[0],
            g:color[1],
            b:color[2],
            a:color[3]
        }

    
        let styles = reactCSS({
            'default': {
              color: {
                width: '36px',
                height: '14px',
                borderRadius: '2px',
                background: `rgba(${color[0] }, ${ color[1] }, ${ color[2] }, ${color[3] })`,
              },
              swatch: {
                padding: '5px',
                background: '#fff',
                borderRadius: '1px',
                boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
                display: 'inline-block',
                cursor: 'pointer',
              },
              popover: {
                position: 'absolute',
                zIndex: '3',
              },
              cover: {
                position: 'fixed',
                top: '0px',
                right: '0px',
                bottom: '0px',
                left: '0px',
              },
            },
        });

      
        
        return(
                
                  
                     <div>
                      
                        <AlphaPicker width="100px" height='10px' onChange={handleColorChange} color={rgbcolor}  />

                                           
                      
                            <div style={styles.swatch} onClick={handleclicked} >
                                  <div style={ styles.color } />
                              </div>
                               { displayColorPicker ? 
                                    <div style={ styles.popover} >
                                       <div style={ styles.cover } onClick={handleclicked} />
                                                   <CompactPicker color={rgbcolor} onChange={handleColorChange}/>
                                     </div> : null 
                                 }
                        
                     
                     </div>  
                                   
          )
      

  }
}


export default MyTestColorPicker;