zent/src/colorpicker/common/Alpha.js

一套前端设计语言和基于React的实现

import React, { Component } from 'react';
import reactCSS from '../helpers/reactcss';
import * as alpha from '../helpers/alpha';
import Checkboard from './Checkboard';

/**
 * 透明度
 */
export class Alpha extends Component {
  componentWillUnmount() {
    this.unbindEventListeners();
  }

  handleChange = (e, skip) => {
    const change = alpha.calculateChange(e, skip, this.props, this.refs);
    change && this.props.onChange(change, e);
  };

  handleMouseDown = e => {
    this.handleChange(e, true);
    window.addEventListener('mousemove', this.handleChange);
    window.addEventListener('mouseup', this.handleMouseUp);
  };

  handleMouseUp = () => {
    this.unbindEventListeners();
  };

  unbindEventListeners = () => {
    window.removeEventListener('mousemove', this.handleChange);
    window.removeEventListener('mouseup', this.handleMouseUp);
  };

  render() {
    const rgb = this.props.rgb;
    const styles = reactCSS(
      {
        default: {
          alpha: {
            absolute: '0px 0px 0px 0px',
            borderRadius: this.props.radius
          },
          checkboard: {
            absolute: '0px 0px 0px 0px',
            overflow: 'hidden'
          },
          gradient: {
            absolute: '0px 0px 0px 0px',
            background: `linear-gradient(to right, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%,
           rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`,
            boxShadow: this.props.shadow,
            borderRadius: this.props.radius
          },
          container: {
            position: 'relative',
            height: '100%',
            margin: '0 3px'
          },
          pointer: {
            position: 'absolute',
            left: `${rgb.a * 100}%`
          },
          slider: {
            width: '4px',
            borderRadius: '1px',
            height: '8px',
            boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
            background: '#fff',
            marginTop: '1px',
            transform: 'translateX(-2px)'
          }
        },
        vertical: {
          gradient: {
            background: `linear-gradient(to bottom, rgba(${rgb.r},${rgb.g},${rgb.b}, 0) 0%,
           rgba(${rgb.r},${rgb.g},${rgb.b}, 1) 100%)`
          },
          pointer: {
            left: 0,
            top: `${rgb.a * 100}%`
          }
        },
        overwrite: {
          ...this.props.style
        }
      },
      {
        vertical: this.props.direction === 'vertical',
        overwrite: true
      }
    );

    return (
      <div style={styles.alpha}>
        <div style={styles.checkboard}>
          <Checkboard renderers={this.props.renderers} />
        </div>
        <div style={styles.gradient} />
        <div
          className="alpha-bar"
          style={styles.container}
          ref={ref => (this.refs = ref)}
          onMouseDown={this.handleMouseDown}
          onTouchMove={this.handleChange}
          onTouchStart={this.handleChange}
        >
          <div style={styles.pointer}>
            {this.props.pointer ? (
              <this.props.pointer {...this.props} />
            ) : (
              <div style={styles.slider} />
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default Alpha;