react-powerplug/dist/react-powerplug.umd.js

Give life to your dumb components

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
  (factory((global.ReactPowerPlug = {}),global.React));
}(this, (function (exports,React) { 'use strict';

  function _objectWithoutPropertiesLoose(source, excluded) {
    if (source == null) return {};
    var target = {};
    var sourceKeys = Object.keys(source);
    var key, i;

    for (i = 0; i < sourceKeys.length; i++) {
      key = sourceKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      target[key] = source[key];
    }

    return target;
  }

  function _inheritsLoose(subClass, superClass) {
    subClass.prototype = Object.create(superClass.prototype);
    subClass.prototype.constructor = subClass;
    subClass.__proto__ = superClass;
  }

  /* eslint-disable no-console */
  var warn = function warn(condition, message, trace) {
    if (trace === void 0) {
      trace = true;
    }

    if (condition) {
      console.warn("[react-powerplug]: " + message);
      console.trace && trace && console.trace('Trace');
    }
  };

  var isFn = function isFn(prop) {
    return typeof prop === 'function';
  };
  /**
   * renderProps
   * is a render/children props interop.
   * will pick up the prop that was used,
   * or children if both are used
   */


  var renderProps = function renderProps(_ref) {
    var children = _ref.children,
        render = _ref.render;

    {
      warn(isFn(children) && isFn(render), 'You are using the children and render props together.\n' + 'This is impossible, therefore, only the children will be used.');
    }

    var fn = isFn(children) ? children : render;

    for (var _len = arguments.length, props = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      props[_key - 1] = arguments[_key];
    }

    return fn ? fn.apply(void 0, props) : null;
  };

  var noop = function noop() {};

  var Value =
  /*#__PURE__*/
  function (_Component) {
    _inheritsLoose(Value, _Component);

    function Value() {
      var _this;

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      _this = _Component.call.apply(_Component, [this].concat(args)) || this;
      _this.state = {
        value: _this.props.initial
      };

      _this._set = function (updater, cb) {
        if (cb === void 0) {
          cb = noop;
        }

        var _this$props$onChange = _this.props.onChange,
            onChange = _this$props$onChange === void 0 ? noop : _this$props$onChange;

        _this.setState(typeof updater === 'function' ? function (state) {
          return {
            value: updater(state.value)
          };
        } : {
          value: updater
        }, function () {
          onChange(_this.state.value);
          cb();
        });
      };

      _this._reset = function (cb) {
        if (cb === void 0) {
          cb = noop;
        }

        _this._set(_this.props.initial, cb);
      };

      return _this;
    }

    var _proto = Value.prototype;

    _proto.render = function render() {
      return renderProps(this.props, {
        value: this.state.value,
        set: this._set,
        reset: this._reset
      });
    };

    return Value;
  }(React.Component);

  var Active = function Active(_ref) {
    var onChange = _ref.onChange,
        props = _objectWithoutPropertiesLoose(_ref, ["onChange"]);

    return React.createElement(Value, {
      initial: false,
      onChange: onChange
    }, function (_ref2) {
      var value = _ref2.value,
          set = _ref2.set;
      return renderProps(props, {
        active: value,
        bind: {
          onMouseDown: function onMouseDown() {
            return set(true);
          },
          onMouseUp: function onMouseUp() {
            return set(false);
          }
        }
      });
    });
  };

  var isElement = function isElement(element) {
    return typeof element.type === 'function';
  };

  var compose = function compose() {
    for (var _len = arguments.length, elements = new Array(_len), _key = 0; _key < _len; _key++) {
      elements[_key] = arguments[_key];
    }

    var reversedElements = elements.reverse();
    return function (composedProps) {
      // Stack children arguments recursively and pass
      // it down until the last component that render children
      // with these stacked arguments
      function stackProps(i, elements, propsList) {
        if (propsList === void 0) {
          propsList = [];
        }

        var element = elements[i];
        var isTheLast = i === 0; // Check if is latest component.
        // If is latest then render children,
        // Otherwise continue stacking arguments

        var renderFn = function renderFn(props) {
          return isTheLast ? renderProps.apply(void 0, [composedProps].concat(propsList.concat(props))) : stackProps(i - 1, elements, propsList.concat(props));
        }; // Clone a element if it's passed created as <Element initial={} />
        // Or create it if passed as just Element


        var elementFn = isElement(element) ? React.cloneElement : React.createElement;
        return elementFn(element, {}, renderFn);
      }

      return stackProps(elements.length - 1, reversedElements);
    };
  };

  var Compose = function Compose(_ref) {
    var components = _ref.components,
        props = _objectWithoutPropertiesLoose(_ref, ["components"]);

    return compose.apply(void 0, components)(props);
  };

  var add = function add(amount) {
    return function (value) {
      return value + amount;
    };
  };

  var Counter = function Counter(_ref) {
    var _ref$initial = _ref.initial,
        initial = _ref$initial === void 0 ? 0 : _ref$initial,
        onChange = _ref.onChange,
        props = _objectWithoutPropertiesLoose(_ref, ["initial", "onChange"]);

    return React.createElement(Value, {
      initial: initial,
      onChange: onChange
    }, function (_ref2) {
      var value = _ref2.value,
          _set = _ref2.set,
          reset = _ref2.reset;
      return renderProps(props, {
        count: value,
        inc: function inc() {
          return _set(add(1));
        },
        dec: function dec() {
          return _set(add(-1));
        },
        incBy: function incBy(value) {
          return _set(add(value));
        },
        decBy: function decBy(value) {
          return _set(add(-value));
        },
        set: function set(value) {
          return _set(value);
        },
        reset: reset
      });
    });
  };

  var isObject = function isObject(value) {
    return typeof value === 'object' && value;
  };

  var Input = function Input(_ref) {
    var _ref$initial = _ref.initial,
        initial = _ref$initial === void 0 ? '' : _ref$initial,
        onChange = _ref.onChange,
        props = _objectWithoutPropertiesLoose(_ref, ["initial", "onChange"]);

    return React.createElement(Value, {
      initial: initial,
      onChange: onChange
    }, function (_ref2) {
      var value = _ref2.value,
          set = _ref2.set,
          reset = _ref2.reset;
      return renderProps(props, {
        value: value,
        reset: reset,
        set: set,
        bind: {
          value: value,
          onChange: function onChange(event) {
            if (isObject(event) && isObject(event.target)) {
              set(event.target.value);
            } else {
              set(event);
            }
          }
        }
      });
    });
  };

  var Focus = function Focus(_ref) {
    var onChange = _ref.onChange,
        props = _objectWithoutPropertiesLoose(_ref, ["onChange"]);

    return React.createElement(Value, {
      initial: false,
      onChange: onChange
    }, function (_ref2) {
      var value = _ref2.value,
          set = _ref2.set;
      return renderProps(props, {
        focused: value,
        bind: {
          onFocus: function onFocus() {
            return set(true);
          },
          onBlur: function onBlur() {
            return set(false);
          }
        }
      });
    });
  };

  var FocusManager = function FocusManager(_ref) {
    var onChange = _ref.onChange,
        props = _objectWithoutPropertiesLoose(_ref, ["onChange"]);

    var canBlur = true;
    return React.createElement(Value, {
      initial: false,
      onChange: onChange
    }, function (_ref2) {
      var value = _ref2.value,
          set = _ref2.set;
      return renderProps(props, {
        focused: value,
        blur: function blur() {
          if (value) {
            document.activeElement.blur();
          }
        },
        bind: {
          tabIndex: -1,
          onBlur: function onBlur() {
            if (canBlur) {
              set(false);
            }
          },
          onFocus: function onFocus() {
            set(true);
          },
          onMouseDown: function onMouseDown() {
            canBlur = false;
          },
          onMouseUp: function onMouseUp() {
            canBlur = true;
          }
        }
      });
    });
  };

  function _extends() {
    _extends = Object.assign || function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];

        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }

      return target;
    };

    return _extends.apply(this, arguments);
  }

  var isObject$1 = function isObject(value) {
    return typeof value === 'object' && value;
  };

  var Form = function Form(_ref) {
    var _ref$initial = _ref.initial,
        initial = _ref$initial === void 0 ? {} : _ref$initial,
        onChange = _ref.onChange,
        props = _objectWithoutPropertiesLoose(_ref, ["initial", "onChange"]);

    return React.createElement(Value, {
      initial: _extends({}, initial),
      onChange: onChange
    }, function (_ref2) {
      var values = _ref2.value,
          set = _ref2.set,
          reset = _ref2.reset;
      return renderProps(props, {
        values: values,
        reset: reset,
        setValues: function setValues(nextValues) {
          return set(function (prev) {
            return _extends({}, prev, typeof nextValues === 'function' ? nextValues(prev) : nextValues);
          });
        },
        field: function field(id) {
          var value = values[id];

          var setValue = function setValue(updater) {
            var _extends3;

            return typeof updater === 'function' ? set(function (prev) {
              var _extends2;

              return _extends({}, prev, (_extends2 = {}, _extends2[id] = updater(prev[id]), _extends2));
            }) : set(_extends({}, values, (_extends3 = {}, _extends3[id] = updater, _extends3)));
          };

          return {
            value: value,
            set: setValue,
            bind: {
              value: value,
              onChange: function onChange(event) {
                if (isObject$1(event) && isObject$1(event.target)) {
                  setValue(event.target.value);
                } else {
                  setValue(event);
                }
              }
            }
          };
        }
      });
    });
  };

  var Hover = function Hover(_ref) {
    var onChange = _ref.onChange,
        props = _objectWithoutPropertiesLoose(_ref, ["onChange"]);

    return React.createElement(Value, {
      initial: false,
      onChange: onChange
    }, function (_ref2) {
      var value = _ref2.value,
          set = _ref2.set;
      return renderProps(props, {
        hovered: value,
        bind: {
          onMouseEnter: function onMouseEnter() {
            return set(true);
          },
          onMouseLeave: function onMouseLeave() {
            return set(false);
          }
        }
      });
    });
  };

  var Interval =
  /*#__PURE__*/
  function (_Component) {
    _inheritsLoose(Interval, _Component);

    function Interval() {
      var _this;

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      _this = _Component.call.apply(_Component, [this].concat(args)) || this;
      _this.state = {
        times: 0
      };
      _this.intervalId = undefined;

      _this._clearIntervalIfNecessary = function () {
        if (_this.intervalId) {
          _this.intervalId = clearInterval(_this.intervalId);
        }
      };

      _this._setIntervalIfNecessary = function (delay) {
        if (Number.isFinite(delay)) {
          _this._clearIntervalIfNecessary();

          _this.intervalId = setInterval(function () {
            return _this.setState(function (s) {
              return {
                times: s.times + 1
              };
            });
          }, delay);
        }
      };

      _this.stop = function () {
        _this._clearIntervalIfNecessary();
      };

      _this.start = function (delay) {
        var _delay = typeof delay === 'number' ? delay : _this.props.delay != null ? _this.props.delay : 1000;

        _this._setIntervalIfNecessary(_delay);
      };

      _this.toggle = function () {
        _this.intervalId ? _this.stop() : _this.start();
      };

      return _this;
    }

    var _proto = Interval.prototype;

    _proto.componentDidMount = function componentDidMount() {
      this.start();
    };

    _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
      if (prevProps.delay !== this.props.delay) {
        this.stop();
        this.start();
      }
    };

    _proto.componentWillUnmount = function componentWillUnmount() {
      this.stop();
    };

    _proto.render = function render() {
      return renderProps(this.props, {
        start: this.start,
        stop: this.stop,
        toggle: this.toggle
      });
    };

    return Interval;
  }(React.Component);

  var complement = function complement(fn) {
    return function () {
      return !fn.apply(void 0, arguments);
    };
  };

  var List = function List(_ref) {
    var _ref$initial = _ref.initial,
        initial = _ref$initial === void 0 ? [] : _ref$initial,
        onChange = _ref.onChange,
        props = _objectWithoutPropertiesLoose(_ref, ["initial", "onChange"]);

    return React.createElement(Value, {
      initial: initial,
      onChange: onChange
    }, function (_ref2) {
      var value = _ref2.value,
          _set = _ref2.set,
          reset = _ref2.reset;
      return renderProps(props, {
        list: value,
        first: function first() {
          return value[0];
        },
        last: function last() {
          return value[Math.max(0, value.length - 1)];
        },
        set: function set(list) {
          return _set(list);
        },
        push: function push() {
          for (var _len = arguments.length, values = new Array(_len), _key = 0; _key < _len; _key++) {
            values[_key] = arguments[_key];
          }

          return _set(function (list) {
            return list.concat(values);
          });
        },
        pull: function pull(predicate) {
          return _set(function (list) {
            return list.filter(complement(predicate));
          });
        },
        sort: function sort(compareFn) {
          return _set(function (list) {
            return list.concat().sort(compareFn);
          });
        },
        reset: reset
      });
    });
  };

  var Map = function Map(_ref) {
    var _ref$initial = _ref.initial,
        initial = _ref$initial === void 0 ? {} : _ref$initial,
        onChange = _ref.onChange,
        props = _objectWithoutPropertiesLoose(_ref, ["initial", "onChange"]);

    return React.createElement(Value, {
      initial: _extends({}, initial),
      onChange: onChange
    }, function (_ref2) {
      var values = _ref2.value,
          _set = _ref2.set,
          reset = _ref2.reset;
      return renderProps(props, {
        values: values,
        clear: function clear() {
          return _set({});
        },
        reset: reset,
        set: function set(key, updater) {
          return _set(function (prev) {
            var _extends2;

            return _extends({}, prev, (_extends2 = {}, _extends2[key] = typeof updater === 'function' ? updater(prev[key]) : updater, _extends2));
          });
        },
        get: function get(key) {
          return values[key];
        },
        has: function has(key) {
          return values[key] != null;
        },
        delete: function _delete(key) {
          return _set(function (_ref3) {
            var deleted = _ref3[key],
                prev = _objectWithoutPropertiesLoose(_ref3, [key]);

            return prev;
          });
        }
      });
    });
  };

  var unique = function unique(arr) {
    return arr.filter(function (d, i) {
      return arr.indexOf(d) === i;
    });
  };

  var hasItem = function hasItem(arr, item) {
    return arr.indexOf(item) !== -1;
  };

  var removeItem = function removeItem(arr, item) {
    return hasItem(arr, item) ? arr.filter(function (d) {
      return d !== item;
    }) : arr;
  };

  var addUnique = function addUnique(arr, item) {
    return hasItem(arr, item) ? arr : arr.concat([item]);
  };

  var Set = function Set(_ref) {
    var _ref$initial = _ref.initial,
        initial = _ref$initial === void 0 ? [] : _ref$initial,
        onChange = _ref.onChange,
        props = _objectWithoutPropertiesLoose(_ref, ["initial", "onChange"]);

    return React.createElement(Value, {
      initial: unique(initial),
      onChange: onChange
    }, function (_ref2) {
      var value = _ref2.value,
          set = _ref2.set,
          reset = _ref2.reset;
      return renderProps(props, {
        values: value,
        add: function add(key) {
          return set(function (values) {
            return addUnique(values, key);
          });
        },
        clear: function clear() {
          return set([]);
        },
        remove: function remove(key) {
          return set(function (values) {
            return removeItem(values, key);
          });
        },
        has: function has(key) {
          return hasItem(value, key);
        },
        reset: reset
      });
    });
  };

  var State = function State(_ref) {
    var _ref$initial = _ref.initial,
        initial = _ref$initial === void 0 ? {} : _ref$initial,
        onChange = _ref.onChange,
        props = _objectWithoutPropertiesLoose(_ref, ["initial", "onChange"]);

    return React.createElement(Value, {
      initial: initial,
      onChange: onChange
    }, function (_ref2) {
      var value = _ref2.value,
          set = _ref2.set,
          reset = _ref2.reset;
      return renderProps(props, {
        state: value,
        setState: function setState(updater, cb) {
          return set(function (prev) {
            return _extends({}, prev, typeof updater === 'function' ? updater(prev) : updater);
          }, cb);
        },
        resetState: reset
      });
    });
  };

  var Toggle = function Toggle(_ref) {
    var _ref$initial = _ref.initial,
        initial = _ref$initial === void 0 ? false : _ref$initial,
        onChange = _ref.onChange,
        props = _objectWithoutPropertiesLoose(_ref, ["initial", "onChange"]);

    return React.createElement(Value, {
      initial: initial,
      onChange: onChange
    }, function (_ref2) {
      var value = _ref2.value,
          _set = _ref2.set,
          reset = _ref2.reset;
      return renderProps(props, {
        on: value,
        set: function set(value) {
          return _set(value);
        },
        reset: reset,
        toggle: function toggle() {
          return _set(function (on) {
            return !on;
          });
        },
        setOn: function setOn() {
          return _set(true);
        },
        setOff: function setOff() {
          return _set(false);
        }
      });
    });
  };

  var Touch = function Touch(_ref) {
    var onChange = _ref.onChange,
        props = _objectWithoutPropertiesLoose(_ref, ["onChange"]);

    return React.createElement(Value, {
      initial: false,
      onChange: onChange
    }, function (_ref2) {
      var value = _ref2.value,
          set = _ref2.set;
      return renderProps(props, {
        touched: value,
        bind: {
          onTouchStart: function onTouchStart() {
            return set(true);
          },
          onTouchEnd: function onTouchEnd() {
            return set(false);
          }
        }
      });
    });
  };

  var composeEvents = function composeEvents() {
    for (var _len = arguments.length, objEvents = new Array(_len), _key = 0; _key < _len; _key++) {
      objEvents[_key] = arguments[_key];
    }

    return objEvents.reverse().reduce(function (allEvents, events) {
      var append = {};

      var _loop = function _loop(key) {
        append[key] = allEvents[key] ? // Already have this event: let's merge
        function () {
          events[key].apply(events, arguments);
          allEvents[key].apply(allEvents, arguments);
        } : // Don't have this event yet: just assign the event
        events[key];
      };

      for (var key in events) {
        _loop(key);
      }

      return _extends({}, allEvents, append);
    });
  };

  exports.Active = Active;
  exports.Compose = Compose;
  exports.Counter = Counter;
  exports.Field = Input;
  exports.Focus = Focus;
  exports.unstable_FocusManager = FocusManager;
  exports.Form = Form;
  exports.Hover = Hover;
  exports.Interval = Interval;
  exports.List = List;
  exports.Map = Map;
  exports.Set = Set;
  exports.State = State;
  exports.Toggle = Toggle;
  exports.Touch = Touch;
  exports.Value = Value;
  exports.compose = compose;
  exports.composeEvents = composeEvents;
  exports.renderProps = renderProps;

  Object.defineProperty(exports, '__esModule', { value: true });

})));