v0.6.0

madox2 · Aug 7, 2016 · de29099 · de29099
1 parent f682947
commit de29099
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 83 deletions.
diff --git a/lib/TagCloud.js b/lib/TagCloud.js
@@ -17,6 +17,10 @@ var _arrayShuffle = require('array-shuffle');
 
 var _arrayShuffle2 = _interopRequireDefault(_arrayShuffle);
 
+var _randomcolor = require('randomcolor');
+
+var _randomcolor2 = _interopRequireDefault(_randomcolor);
+
 var _helpers = require('./helpers');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,7 +34,20 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(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 eventHandlers = ['onClick', 'onDoubleClick', 'onMouseMove'];
-var cloudProps = ['tags', 'shuffle', 'renderer', 'maxSize', 'minSize'];
+var cloudProps = ['tags', 'shuffle', 'renderer', 'maxSize', 'minSize', 'colorOptions', 'disableRandomColor'];
+
+var generateColor = function generateColor(tag, _ref) {
+  var disableRandomColor = _ref.disableRandomColor;
+  var colorOptions = _ref.colorOptions;
+
+  if (tag.color) {
+    return tag.color;
+  }
+  if (disableRandomColor) {
+    return undefined;
+  }
+  return (0, _randomcolor2.default)(colorOptions);
+};
 
 var TagCloud = exports.TagCloud = function (_React$Component) {
   _inherits(TagCloud, _React$Component);
@@ -43,59 +60,76 @@ var TagCloud = exports.TagCloud = function (_React$Component) {
 
   _createClass(TagCloud, [{
     key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(_ref) {
-      var shuffle = _ref.shuffle;
-      var tags = _ref.tags;
-
-      if (!shuffle) {
-        this._tags = tags;
-        return;
-      }
-      if (shuffle && shuffle !== this.props.shuffle) {
-        this._tags = (0, _arrayShuffle2.default)(tags);
-        return;
-      }
-      if (shuffle && !(0, _helpers.arraysEqual)(tags, this.props.tags)) {
-        this._tags = (0, _arrayShuffle2.default)(tags);
+    value: function componentWillReceiveProps(newProps) {
+      var tags = newProps.tags;
+      var shuffle = newProps.shuffle;
+      var disableRandomColor = newProps.disableRandomColor;
+
+      var dataEquals = (0, _helpers.arraysEqual)(tags, this.props.tags) && shuffle == this.props.shuffle && disableRandomColor == this.props.disableRandomColor;
+      if (!dataEquals) {
+        this._populate(newProps);
       }
     }
   }, {
     key: 'componentWillMount',
     value: function componentWillMount() {
-      var _props = this.props;
-      var tags = _props.tags;
-      var shuffle = _props.shuffle;
-
-      this._tags = shuffle ? (0, _arrayShuffle2.default)(tags) : tags;
+      this._populate(this.props);
     }
   }, {
     key: 'render',
     value: function render() {
       var props = (0, _helpers.omitProps)(this.props, [].concat(cloudProps, eventHandlers));
+      var tagElements = this._attachEventHandlers();
       return _react2.default.createElement(
         'div',
         props,
-        this._createTags()
+        tagElements
       );
     }
   }, {
-    key: '_createTags',
-    value: function _createTags() {
-      var _props2 = this.props;
-      var minSize = _props2.minSize;
-      var maxSize = _props2.maxSize;
-      var renderer = _props2.renderer;
-
-      var handlers = (0, _helpers.includeProps)(this.props, eventHandlers);
-      var counts = this._tags.map(function (tag) {
+    key: '_attachEventHandlers',
+    value: function _attachEventHandlers() {
+      var _this2 = this;
+
+      var cloudHandlers = (0, _helpers.includeProps)(this.props, eventHandlers);
+      return this._data.map(function (_ref2) {
+        var tag = _ref2.tag;
+        var fontSize = _ref2.fontSize;
+        var color = _ref2.color;
+
+        var elem = _this2.props.renderer(tag, fontSize, color);
+        var tagHandlers = (0, _helpers.includeProps)(elem.props, eventHandlers);
+        var globalHandlers = Object.keys(cloudHandlers).reduce(function (r, k) {
+          r[k] = function (e) {
+            cloudHandlers[k](tag, e);
+            tagHandlers[k] && tagHandlers(e);
+          };
+          return r;
+        }, {});
+        return _react2.default.cloneElement(elem, globalHandlers);
+      });
+    }
+  }, {
+    key: '_populate',
+    value: function _populate(props) {
+      var tags = props.tags;
+      var shuffle = props.shuffle;
+      var minSize = props.minSize;
+      var maxSize = props.maxSize;
+
+      var counts = tags.map(function (tag) {
         return tag.count;
       }),
           min = Math.min.apply(Math, _toConsumableArray(counts)),
           max = Math.max.apply(Math, _toConsumableArray(counts));
-      return this._tags.map(function (tag) {
-        var fontSize = (0, _helpers.fontSizeConverter)(tag.count, min, max, minSize, maxSize);
-        return renderer(tag, fontSize, handlers);
+      var data = tags.map(function (tag) {
+        return {
+          tag: tag,
+          color: generateColor(tag, props),
+          fontSize: (0, _helpers.fontSizeConverter)(tag.count, min, max, minSize, maxSize)
+        };
       });
+      this._data = shuffle ? (0, _arrayShuffle2.default)(data) : data;
     }
   }]);
 
@@ -107,12 +141,15 @@ TagCloud.propTypes = {
   maxSize: _react2.default.PropTypes.number.isRequired,
   minSize: _react2.default.PropTypes.number.isRequired,
   shuffle: _react2.default.PropTypes.bool,
+  colorOptions: _react2.default.PropTypes.object,
+  disableRandomColor: _react2.default.PropTypes.bool,
   renderer: _react2.default.PropTypes.func,
   className: _react2.default.PropTypes.string
 };
 
 TagCloud.defaultProps = {
-  renderer: (0, _defaultRenderer.defaultRenderer)(),
+  renderer: _defaultRenderer.defaultRenderer,
   shuffle: true,
-  className: 'tag-cloud'
+  className: 'tag-cloud',
+  colorOptions: {}
 };
diff --git a/lib/defaultRenderer.js b/lib/defaultRenderer.js
@@ -9,58 +9,21 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _randomcolor = require('randomcolor');
-
-var _randomcolor2 = _interopRequireDefault(_randomcolor);
-
 var _objectAssign = require('object-assign');
 
 var _objectAssign2 = _interopRequireDefault(_objectAssign);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var defaultRenderer = exports.defaultRenderer = function defaultRenderer() {
-  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
-  return function (tag, size) {
-    var handlers = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
-    var _options$tagRenderer = options.tagRenderer;
-    var tagRenderer = _options$tagRenderer === undefined ? function (tag) {
-      return tag.value;
-    } : _options$tagRenderer;
-    var _options$colorOptions = options.colorOptions;
-    var colorOptions = _options$colorOptions === undefined ? {} : _options$colorOptions;
-    var _options$disableRando = options.disableRandomColor;
-    var disableRandomColor = _options$disableRando === undefined ? false : _options$disableRando;
-    var _options$props = options.props;
-    var props = _options$props === undefined ? {} : _options$props;
-
-
-    if (props.disableRandomColor) {
-      // eslint-disable-next-line no-console
-      console.warn("Using deprecated property 'disableRandomColor' passed to prop option of defaultRenderer. " + "It will be removed in the next major release and replaced with it's own option 'disableRandomColor'.");
-    }
-
-    var className = 'tag-cloud-tag';
-    var fontSize = size + 'px';
-    var color = props.disableRandomColor || disableRandomColor ? tag.color || undefined : (0, _randomcolor2.default)(colorOptions);
-    var key = tag.key || tag.value;
-    var style = (0, _objectAssign2.default)({}, styles, { color: color }, props.style, { fontSize: fontSize });
-
-    var eventHandlers = {};
-    Object.keys(handlers).forEach(function (key) {
-      return handlers[key] && (eventHandlers[key] = function (e) {
-        return handlers[key](tag, e);
-      });
-    });
-
-    var elementProps = (0, _objectAssign2.default)({}, { className: className }, eventHandlers, props, { style: style }, { key: key });
-
-    return _react2.default.createElement(
-      'span',
-      elementProps,
-      tagRenderer(tag)
-    );
-  };
+var defaultRenderer = exports.defaultRenderer = function defaultRenderer(tag, size, color) {
+  var fontSize = size + 'px';
+  var key = tag.key || tag.value;
+  var style = (0, _objectAssign2.default)({}, styles, { color: color, fontSize: fontSize });
+  return _react2.default.createElement(
+    'span',
+    { className: 'tag-cloud-tag', style: style, key: key },
+    tag.value
+  );
 };
 
 var styles = {

diff --git a/lib/helpers.js b/lib/helpers.js
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
  */
 var omitProps = exports.omitProps = function omitProps(target, props) {
   return Object.keys(target).reduce(function (r, key) {
-    if (! ~props.indexOf(key)) {
+    if (!~props.indexOf(key)) {
       r[key] = target[key];
     }
     return r;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-tagcloud",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Tag/word cloud component for react",
   "main": "lib/index.js",
   "scripts": {