react-gradient-generator/dist/index.es.js

A color gradient generator between any two colors with a defined step for react.js

import { Component } from 'react';
import PropTypes from 'prop-types';

var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

var inherits = function (subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};

var possibleConstructorReturn = function (self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return call && (typeof call === "object" || typeof call === "function") ? call : self;
};

var GradientGenerator = function (_Component) {
  inherits(GradientGenerator, _Component);

  function GradientGenerator() {
    classCallCheck(this, GradientGenerator);
    return possibleConstructorReturn(this, (GradientGenerator.__proto__ || Object.getPrototypeOf(GradientGenerator)).apply(this, arguments));
  }

  createClass(GradientGenerator, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          startColor = _props.startColor,
          endColor = _props.endColor,
          steps = _props.steps;

      var gradients = this.generateGradient(startColor, endColor, steps);
      if (gradients) {
        this.props.getGradients(gradients);
      } else {
        throw new Error('Cannot generate gradients, make sure start and color are in hex format !');
      }

      return null;
    }
  }, {
    key: 'generateGradient',
    value: function generateGradient(start, end, steps) {
      // parse RGB values to each {Red, Green, Blue} keys
      var startRGB = this.hexToRgb(start);
      var endRGB = this.hexToRgb(end);
      var gradients = [];

      // generate color for each steps provided then push the value to gradients array
      for (var step = 1; step <= steps; step++) {
        var colors = {};
        var _arr = ['red', 'green', 'blue'];
        for (var _i = 0; _i < _arr.length; _i++) {
          var color = _arr[_i];
          colors[color] = this.colorMaker(startRGB[color], endRGB[color], steps, step);
        }

        var rgb = 'rgb(' + colors['red'] + ', ' + colors['green'] + ', ' + colors['blue'] + ')';
        gradients.push(rgb);

        // inserting in the dom
        var node = document.createElement('div'); // Create a <li> node
        node.style.backgroundColor = rgb;
        document.querySelector('body').appendChild(node);
      }

      return gradients;
    }
  }, {
    key: 'colorMaker',
    value: function colorMaker(start, end, steps, step) {
      // let redDiff = (start.red > end.red) ? start.red - end.red : end.red - start.red;

      var val = void 0;
      if (start > end) {
        var singleStep = (start - end) / steps;
        val = start - singleStep * step;
      } else if (end > start) {
        var _singleStep = (end - start) / steps;
        val = start + _singleStep * step;
      } else {
        val = start | end;
      }

      return ~~val;
    }

    // strng to object converson

  }, {
    key: 'parseRGB',
    value: function parseRGB(rgb) {
      var baseSplit = rgb.split('(')[1].split(',');
      var red = parseInt(baseSplit[0], 1);
      var green = parseInt(baseSplit[1], 1);
      var blue = parseInt(baseSplit[2].split(')')[0], 1);

      return { red: red, green: green, blue: blue };
    }
  }, {
    key: 'showGradient',
    value: function showGradient(e) {
      var start = this.hexToRgb(this.state.startColor);
      var end = this.hexToRgb(this.state.endColor);
      var gradientColors = this.generateGradient(start, end, this.state.steps);
      this.setState({ gradientColors: gradientColors });
    }
  }, {
    key: 'hexToRgb',
    value: function hexToRgb(hex) {
      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
      return result ? {
        red: parseInt(result[1], 16),
        green: parseInt(result[2], 16),
        blue: parseInt(result[3], 16)
      } : null;
    }
  }]);
  return GradientGenerator;
}(Component);

GradientGenerator.propTypes = {
  startColor: PropTypes.string,
  endColor: PropTypes.string,
  steps: PropTypes.number,
  getGradients: PropTypes.func
};

export default GradientGenerator;
//# sourceMappingURL=index.es.js.map