chayns-components/dist/esm/react-chayns-color_picker/component/transparencySlider/TransparencySlider.js

A set of beautiful React components for developing chayns® applications.

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Slider from '../../../react-chayns-slider/component/Slider';
import "./TransparencySlider.css";
import { hsvToRgbString } from '../../../utils/color';
export default class TransparencySlider extends PureComponent {
  constructor() {
    super(...arguments);
    this.onChange = value => {
      const {
        color,
        onChange
      } = this.props;
      if (onChange) {
        onChange({
          ...color,
          a: 1 - value
        });
      }
    };
    this.onChangeEnd = value => {
      const {
        color,
        onChangeEnd
      } = this.props;
      if (onChangeEnd) {
        onChangeEnd({
          ...color,
          a: 1 - value
        });
      }
    };
  }
  render() {
    var _color$a;
    const {
      color
    } = this.props;
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Slider, {
      className: "cc__transparency-slider",
      innerTrackStyle: {
        backgroundColor: 'transparent'
      },
      trackStyle: {
        background: `linear-gradient(90deg, ${hsvToRgbString({
          ...color,
          a: null
        }, true)}, transparent)`
      },
      thumbStyle: {
        backgroundColor: hsvToRgbString(color, true)
      },
      onChange: this.onChange,
      onChangeEnd: this.onChangeEnd,
      min: 0,
      max: 1,
      value: 1 - ((_color$a = color.a) !== null && _color$a !== void 0 ? _color$a : 1)
    }));
  }
}
TransparencySlider.propTypes = {
  onChange: PropTypes.func,
  onChangeEnd: PropTypes.func,
  color: PropTypes.shape({
    h: PropTypes.number.isRequired,
    s: PropTypes.number.isRequired,
    v: PropTypes.number.isRequired,
    a: PropTypes.number
  }).isRequired
};
TransparencySlider.defaultProps = {
  onChange: null,
  onChangeEnd: null
};
TransparencySlider.displayName = 'TransparencySlider';
//# sourceMappingURL=TransparencySlider.js.map