react-color#RGBColor TypeScript Examples

ColorPicker = ({initialColor, onColorChange}: IColorPickerProps) => {
    const [displayColorPicker, setDisplayColorPicker] = useState(false);
    const [color, setColor] = useState<RGBColor>(hex2rgba(initialColor))

    const handleClick = () => {
        setDisplayColorPicker(!displayColorPicker);
    };

    const handleClose = () => {
        setDisplayColorPicker(false)
    };

    const handleChange = (color: any) => {
        setColor(color.rgb)
        onColorChange(color.rgb);
    };

    return (
        <div className={styles(color)}>
            <div className="swatch" onClick={handleClick}>
                <div className="color"/>
            </div>
            {displayColorPicker ?
                <div className="popup">
                    <div className="cover" onClick={handleClose}/>
                    <SketchPicker color={color} onChange={handleChange}/>
                </div> : null}
        </div>
    );
}

hex2rgba = (hex: string, alpha: number = 1): RGBColor => {
    const [r, g, b] = (hex.length === 3)
        ? hex.match(/\w/g).map(x => parseInt(x + x, 16))
        : hex.match(/\w\w/g).map(x => parseInt(x, 16))

    return {
        r: r,
        g: g,
        b: b,
        a: alpha
    }
}

rgba2hexa = (color: RGBColor) => {
    const r = color.r.toString(16);
    const g = color.g.toString(16);
    const b = color.b.toString(16);
    const a = Math.round(color.a * 255).toString(16);
    const pad = (str: string) => str.length === 1 ? '0' + str : str;

    return "#" + pad(r) + pad(g) + pad(b) + pad(a);
}

toHtmlHex(color: RGBColor) {
    const toHex = (num: number) => {
      return num.toString(16).padStart(2, '0');
    };
    return '#' + toHex(color.r) + toHex(color.g) + toHex(color.b);
  }

// Class Definition

export class AvatarUI extends React.PureComponent<
  AvatarUIProps,
  {
    currentBackground: number;
    currentHighlight: RGBColor;
    highlightChat: boolean;
    renderPicker: boolean;
    renderButtons: boolean;
    avatarSelected: boolean;
  }
> {
  background = ['none', 'res', 'spy'];
  shieldLocation = createRef<HTMLDivElement>();

  constructor(props: AvatarUIProps) {
    super(props);
    this.state = {
      currentBackground: 0,
      currentHighlight: {
        r: 255,
        g: 204,
        b: 0,
        a: 100,
      },
      highlightChat: false,
      renderPicker: false,
      renderButtons: false,
      avatarSelected: false,
    };
    this.handleHighlight = this.handleHighlight.bind(this);
    this.toggleHighlightChat = this.toggleHighlightChat.bind(this);
  }

  componentDidUpdate(prevProps: AvatarUIProps) {
    if (prevProps.isPickable !== this.props.isPickable) {
      this.setState({
        avatarSelected: false,
      });
    }
  }

  toggleHighlightChat() {
    const enable = !this.state.highlightChat;
    this.setState({ highlightChat: enable });
    if (enable) {
      this.highlightChat();
    } else {
      this.props.dispatch(updateChatHighlight(this.props.username, 'transparent'));
    }
  }

  toHtmlHex(color: RGBColor) {
    const toHex = (num: number) => {
      return num.toString(16).padStart(2, '0');
    };
    return '#' + toHex(color.r) + toHex(color.g) + toHex(color.b);
  }

  highlightChat() {
    const color = this.state.currentHighlight;
    this.props.dispatch(updateChatHighlight(this.props.username, this.toHtmlHex(color)));
  }

  handleHighlight(color: ColorResult) {
    this.setState({ currentHighlight: color.rgb });
    if (this.state.highlightChat) {
      this.highlightChat();
    }
  }

  renderButtonsTrue = () => this.setState({ renderButtons: true });

  renderButtonsFalse = () => this.setState({ renderButtons: false });

  pickPlayer = () =>
    this.setState(
      {
        avatarSelected: this.props.isPickable && !this.state.avatarSelected,
      },
      this.props.table!.countSelected
    );

  setBackgroundColor = () =>
    this.setState({
      currentBackground: (this.state.currentBackground + 1) % 3,
    });

  showColorPicker = () =>
    this.setState({
      renderPicker: !this.state.renderPicker,
    });

  hideColorPicker = () =>
    this.setState({
      renderPicker: !this.state.renderPicker,
    });

  render() {
    const fontSize = Math.min(this.props.tableWidth * 0.04, this.props.fontSize);

    return (
      <>
        <div
          id="Avatar-UI"
          style={{
            top: this.props.avatarPosition[0] + 'px',
            left: this.props.avatarPosition[1] + 'px',
            display: this.props.avatarShow ? undefined : 'none',
          }}
          onMouseOver={this.renderButtonsTrue}
          onMouseLeave={this.renderButtonsFalse}
        >
          <div
            id="ave-graphics"
            style={{
              width: this.props.avatarSize + 'px',
              height: this.props.avatarSize + 'px',
              maxHeight: Math.max(this.props.tableWidth * 0.08, 45) + 'px',
              maxWidth: Math.max(this.props.tableWidth * 0.08, 45) + 'px',
              opacity: this.props.afk ? '0.5' : '1',
            }}
          >
            <div
              id="ave-background"
              className={
                this.background[this.state.currentBackground] +
                ' ' +
                ((this.state.avatarSelected && this.props.isPickable) || (this.props.highlighted) ? 'picked' : '')
              }
            />

            <div
              className={
                'ave tooltip ' +
                (this.props.killed ? 'killed ' : '') +
                (this.props.isPickable ? 'pickable' : 'not-pickable')
              }
              style={{
                backgroundImage:
                  'url(' +
                  (this.props.isRes ? this.props.resUrl : this.props.spyUrl) +
                  ')',
              }}
              onClick={this.pickPlayer}
            >
              {this.props.isPickable ? (
                <span className="tooltip-text">Click on this player to pick them</span>
              ) : null}
            </div>
            {this.props.hasClaimed ? (
              <div className="claim">
                <FontAwesomeIcon icon={faExclamationTriangle} />
              </div>
            ) : null}
            {this.props.killed ? <div className="ave-sword" /> : null}
            {this.props.onMission ? (
              <div className="ave-shield" ref={this.shieldLocation}>
                {this.props.shieldShow ? (
                  <div
                    style={{
                      transform: 'scale(' + this.props.shieldScale + ')',
                      top: this.props.shieldPosition[0] + 'px',
                      left: this.props.shieldPosition[1] + 'px',
                    }}
                    className="ave-shield-display"
                  />
                ) : null}
              </div>
            ) : null}
            {this.props.leader ? <div className="ave-flag" /> : null}
            {this.props.vote > -1 ? (
              <div className={'ave-vote-bubble ' + (this.props.vote === 1)} />
            ) : null}
            {this.state.renderButtons ? (
              <div className="ave-buttons">
                <button onClick={this.setBackgroundColor} className="tooltip">
                  <span className="tooltip-text">Mark this player's allegiance</span>
                  <FontAwesomeIcon icon={faStamp} />
                </button>
                <button onClick={this.toggleHighlightChat} className="tooltip">
                  <span className="tooltip-text">
                    Highlight this player's chat messages
                  </span>
                  <FontAwesomeIcon
                    style={{
                      backgroundColor: this.state.highlightChat
                        ? this.toHtmlHex(this.state.currentHighlight)
                        : '',
                    }}
                    icon={faPen}
                  />
                </button>
                <button onClick={this.showColorPicker} className="tooltip">
                  <span className="tooltip-text">
                    Change this player's highlight color
                  </span>
                  <FontAwesomeIcon icon={faPaintBrush} />
                </button>
              </div>
            ) : null}
          </div>
          <p
            className={'ave-username ' + (this.props.isMe ? 'me' : '')}
            style={{
              width: Math.max(this.props.tableWidth * 0.15, 40) + 'px',
              fontSize: Math.max(fontSize, 10) + 'px',
            }}
          >
            {this.props.card ? <FontAwesomeIcon icon={faAddressCard} /> : null}{' '}
            {this.props.hammer ? <FontAwesomeIcon icon={faGavel} /> : null}{' '}
            {this.props.username}
          </p>
          <p
            className={'ave-role ' + this.props.isRes}
            style={{
              opacity:
                this.props.role !== 'Spy?' && this.props.role !== 'Resistance?'
                  ? '1'
                  : '0',
              fontSize: Math.max(fontSize * 0.8, 8) + 'px',
            }}
          >
            {this.props.role}
          </p>
        </div>
        {this.state.renderPicker ? (
          <div className="hl-picker">
            <AvalonScrollbars>
              <div className="hl-stuff">
                <p>CHANGE HIGHLIGHT COLOR</p>
                <SketchPicker
                  color={this.state.currentHighlight}
                  onChange={this.handleHighlight}
                />
                <button onClick={this.hideColorPicker}>
                  <FontAwesomeIcon icon={faCheck} />
                </button>
              </div>
            </AvalonScrollbars>
          </div>
        ) : null}
      </>
    );
  }
}

Color: React.FC<Props> = ({
    defaultColor,
    label,
    onChange,
    children,
    span,
    ...other
}) => {
    const [displayColorPicker, setDisplayColorPicker] = useState(false);
    const [color, setColor] = useState<RGBColor>();
    const [pickWrapStyle, setPickWrapStyle] = useState({});
    const picker = useRef(null);

    useEffect(() => {
        if (defaultColor) {
            const optColor: any = {};
            const temp = parse(defaultColor);
            if (temp.space) {
                optColor.r = temp.values[0];
                optColor.g = temp.values[1];
                optColor.b = temp.values[2];
                optColor.a = temp.alpha;
                setColor(optColor);
            }
        } else {
            setColor(undefined);
        }
    }, [defaultColor]);

    const handleClick = useCallback(
        (e) => {
            setDisplayColorPicker(!displayColorPicker);
            const style: any = {
                position: 'absolute',
            };

            const width = document.body.offsetWidth,
                height = document.body.offsetHeight,
                sWidth = 270,
                sHeight = 350,
                X = e.screenX,
                Y = e.screenY;

            // 1、判断拾色器的宽度小于窗口宽度
            if (width > sWidth) {
                if (X + sWidth > width) {
                    style.position = 'fixed';
                    style.right = `10px`;
                }
            }
            // 2、判断拾色器的高度大于窗口高度
            if (height > sHeight) {
                if (Y + sHeight > height) {
                    style.position = 'fixed';
                    style.bottom = `10px`;
                }
            }
            setPickWrapStyle(style);
        },
        [displayColorPicker]
    );

    const handleClose = useCallback(() => {
        setDisplayColorPicker(false);
    }, []);

    /**
     * 高频编辑防抖处理
     */
     const refChange = useSafeCallback(onChange);
     const onChangeDebounce = useMemo(
        () =>
            throttle((value) => {
                refChange(value);
            }, 500),
        [refChange]
    );


    const handleChange = useCallback(
        (color: ColorResult | 'inherit') => {
          let colorResult: any = color;
            if (color === 'inherit') {
                colorResult = undefined;
                setColor(undefined);
            } else {
                setColor(color.rgb);
            }

            onChangeDebounce({
                name: 'color',
                value: colorResult,
            });
        },
        [onChangeDebounce]
    );

    
    const renderColor = () => {
        return (
            <>
                {displayColorPicker ? (
                    <div className={s.popover}>
                        <div className={s.cover} onClick={handleClose} />
                        <div
                            className={s.wrap}
                            style={pickWrapStyle}
                            ref={picker}
                            onClick={(e) => e.stopPropagation()}
                        >
                            <SketchPicker
                                color={color || undefined}
                                width="250px"
                                onChange={handleChange}
                                className={s.picker}
                                presetColors={[
                                    '#f44336',
                                    '#e91e63',
                                    '#9c27b0',
                                    '#673ab7',
                                    '#3f51b5',
                                    '#2196f3',
                                    '#03a9f4',
                                    '#00bcd4',
                                    '#009688',
                                    '#4caf50',
                                    '#8bc34a',
                                    '#cddc39',
                                    '#ffeb3b',
                                    '#ffc107',
                                    '#ff9800',
                                    '#ff5722',
                                    '#aaaaaa',
                                    '#000000',
                                    '#fff',
                                    'transparent',
                                ]}
                            />
                            <div
                                onClick={() => handleChange('inherit')}
                                className={s.inherit}
                            >
                                移除
                            </div>
                        </div>
                    </div>
                ) : null}
            </>
        );
    };

    const displayColor = color && `rgba(${(color as any).r}, ${(color as any).g}, ${
      (color as any).b
  }, ${(color as any).a})`

    return (
        <>
            {children ? (
                <>
                    <span {...other} onClick={handleClick}>
                        {children}
                    </span>
                    {renderColor()}
                </>
            ) : (
                <Row className={s.row} gutter={4}>
                    <Col className={s.label} span={span?.label || 7}>
                        {label || ''}
                    </Col>
                    <Col span={ span?.value || 17}>
                        <div className={s.swatch} onClick={handleClick}>
                            {color ? (
                                <div
                                    className={s.color}
                                    style={{
                                        backgroundColor: displayColor,
                                    }}
                                />
                            ) : (
                                <div className={ClassNames(s.color, s.empty)}>
                                    <BgColorsOutlined />
                                </div>
                            )}
                            {renderColor()}
                        </div>
                    </Col>
                </Row>
            )}
        </>
    );
}