This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

TIP 👉 boohoo! Although chu three households can destroy qin, there is no open China! ____ Lu You “Golden Mistake Knife Trip”

preface

Web Component is an area that the front-end world has been very enthusiastic about. To implement it with third-party componentized frameworks, you need to rely on a lot of things in the framework itself. Most of the time we just have a few simple components, not too big, not too many, so in order to keep the components lightweight, Simple, we don’t really want to use a third party framework at this point.

ColorPicker ColorPicker

import

import ColorPicker from '@/components/ColorPicker/ColorPicker';
Copy the code

Props

1. value

• Type: string
• Default value: “#999”
• Description: color value

2. onChange

• Type: func (required)
• Default value: none
• Color picker click “OK” button after the callback function, input parameter:
  • {string} color Specifies the selected color value

3. className

• Type: string | array | object (key: style name, value: bool)
• Default value: none
• Description: Outermost element style

<ColorPicker className = {'my-class'}></ColorPicker>
<ColorPicker className = {['my-class1', 'my-class2']}></ColorPicker>
<ColorPicker className = {{'my-class1': true}}></ColorPicker>
Copy the code

Implement ColorPicker. Js

/** * color picker component */
import React from 'react';
import PropTypes from 'prop-types';
import { SketchPicker } from 'react-color';
import Button from "@/components/Button/Button.js";
// To ensure that test cases run, the utils module built into Webpack is not used
import utils from '.. /.. /js/common/utils/index.js';
import './colorPicker.scss';

class ColorPicker extends React.Component {
    // Check the input type
    static propTypes = {
        // Color value, e.g. '#666666'
        value: PropTypes.string,
        /** * Callback function * after clicking "OK" button in color picker@param {string} Color Indicates the selected color value */
        onChange: PropTypes.func.isRequired,
        // Outermost element style
        className: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.array,
            PropTypes.objectOf(PropTypes.bool)
        ])
    }

    // Enter the default value
    static defaultProps = {
        value: '# 999'
    }

    constructor(props) {
        super(props);
        this.state = {
            color: props.value || '# 999'.// Whether to display the color picker float
            isShow : false.// Whether to enable the float effect of the color picker
            animate: false}}componentDidUpdate(prevProps, prevState) {
        if (this.props.value && prevProps.value ! = =this.props.value) {
            this.setState({ color: this.props.value})
        }
    }

    // Switch the display status
    toogleShow (isShow) {
        if (isShow === undefined) {
            isShow = !this.state.isShow
        }

        this.setState({ isShow, animate: true});

        if (isShow) {
            setTimeout(() = > this.autoSetPickerPosition(), 350)}};// To ensure that all the color pickers are displayed in the window, automatically set the location of the color picker float layer
    autoSetPickerPosition () {
        const colorPicker = this.refs.colorPicker;
        const pickerBox = this.refs.pickerBox;

        const winWidth = window.document.body.clientWidth;
        const winHeight = window.document.body.clientHeight;

        const colorPickerRect = colorPicker.getBoundingClientRect();
        const colorPickerX = colorPickerRect.x;
        const colorPickerY = colorPickerRect.y;

        const pickerBoxRect = pickerBox.getBoundingClientRect();
        const pickerBoxWidth = pickerBoxRect.width;
        const pickerBoxheight = pickerBoxRect.height;

        // console.log(`winWidth=${winWidth}, winHeight=${winHeight}`)
        // console.log(`colorPickerX=${colorPickerX}, colorPickerY=${colorPickerY}`)
        // console.log(`pickerBoxWidth=${pickerBoxWidth}, pickerBoxheight=${pickerBoxheight}`)
        if (colorPickerY + pickerBoxheight > winHeight) {
            pickerBox.style.top = `${winHeight - pickerBoxheight - colorPickerY - 5}px`;
        }
        if (colorPickerX + 20 + 5 + pickerBoxWidth > winWidth) {
            pickerBox.style.left = 'auto';
            pickerBox.style.right = `The ${20 + 5}px`; }}// Handle color change events
    handleChange = (value) = >{
        this.setState({ color: value.hex });
    };

    // Handle the "OK" event
    handleOK = () = >{
        this.toogleShow(false);
        this.props.onChange && this.props.onChange(this.state.color);
    };

    /** * Select the class * required for the outermost layer of the box@returns {string}* /
    getClassName(){
        return utils.clasx(this.props.className, {
            'color-picker': true
        });
    }

    /** * Color picker float layer style *@return {string}* /
    getPickerBoxClassName () {
        return utils.clasx({
            'picker-box': true.'picker-box-show': this.state.isShow,
            'picker-box-hide':!this.state.isShow,
            'show-animate': this.state.isShow && this.state.animate,
            'hide-animate':!this.state.isShow && this.state.animate
        });
    }

    render() {
        return (
            <div className={this.getClassName()} ref="colorPicker">
                <div
                    className="color-block"
                    style={ { background: this.props.value}}onClick={() = > this.toogleShow() }
                />
                <div className={ this.getPickerBoxClassName()}ref="pickerBox">
                    <SketchPicker
                        disableAlpha={true}
                        presetColors={} []
                        color={this.state.color}
                        onChange={this.handleChange} />
                    <div className="buttons-bar">
                        <Button onClick={()= >Cancel this. ToogleShow (false)} ></Button>
                        <Button type="primary" onClick={this.handleOK}>determine</Button>
                    </div>
                </div>
            </div>); }}export default ColorPicker;
Copy the code

I’m going to leave the styles out for now

“Feel free to discuss in the comments section.”

Hope to finish watching friends can give a thumbs-up, encourage once