@zumper/react-ladda - npm Package Compare versions

Comparing version 7.0.0 to 7.1.0

dist/zumper-react-ladda.js

 (function (global, factory) {
-typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('ladda')) :
-typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'ladda'], factory) :
-(global = global || self, factory(global.ZumperReactLadda = {}, global.React, global.PropTypes, global.Ladda));
-}(this, function (exports, React, PropTypes, ladda) { 'use strict';
+typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types')) :
+typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types'], factory) :
+(global = global || self, factory(global.ZumperReactLadda = {}, global.React, global.PropTypes));
+}(this, function (exports, React, PropTypes) { 'use strict';
 
@@ -63,2 +63,38 @@ React = React && React.hasOwnProperty('default') ? React['default'] : React;
 
+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 _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
 function _assertThisInitialized(self) {
@@ -80,2 +116,518 @@ if (self === void 0) {
 
+var defaults = {
+  lines: 12,
+  length: 7,
+  width: 5,
+  radius: 10,
+  scale: 1.0,
+  corners: 1,
+  color: '#000',
+  fadeColor: 'transparent',
+  animation: 'spinner-line-fade-default',
+  rotate: 0,
+  direction: 1,
+  speed: 1,
+  zIndex: 2e9,
+  className: 'spinner',
+  top: '50%',
+  left: '50%',
+  shadow: '0 0 1px transparent',
+  position: 'absolute'
+};
+
+var Spinner =
+/** @class */
+function () {
+  function Spinner(opts) {
+    if (opts === void 0) {
+      opts = {};
+    }
+
+    this.opts = Object.assign({}, defaults, opts);
+  }
+  /**
+   * Adds the spinner to the given target element. If this instance is already
+   * spinning, it is automatically removed from its previous target by calling
+   * stop() internally.
+   */
+
+
+  Spinner.prototype.spin = function (target) {
+    this.stop();
+    this.el = document.createElement('div');
+    this.el.className = this.opts.className;
+    this.el.setAttribute('role', 'progressbar');
+    css(this.el, {
+      position: this.opts.position,
+      width: 0,
+      zIndex: this.opts.zIndex,
+      left: this.opts.left,
+      top: this.opts.top,
+      transform: "scale(" + this.opts.scale + ")"
+    });
+
+    if (target) {
+      target.insertBefore(this.el, target.firstChild || null);
+    }
+
+    drawLines(this.el, this.opts);
+    return this;
+  };
+  /**
+   * Stops and removes the Spinner.
+   * Stopped spinners may be reused by calling spin() again.
+   */
+
+
+  Spinner.prototype.stop = function () {
+    if (this.el) {
+      if (typeof requestAnimationFrame !== 'undefined') {
+        cancelAnimationFrame(this.animateId);
+      } else {
+        clearTimeout(this.animateId);
+      }
+
+      if (this.el.parentNode) {
+        this.el.parentNode.removeChild(this.el);
+      }
+
+      this.el = undefined;
+    }
+
+    return this;
+  };
+
+  return Spinner;
+}();
+/**
+ * Sets multiple style properties at once.
+ */
+
+function css(el, props) {
+  for (var prop in props) {
+    el.style[prop] = props[prop];
+  }
+
+  return el;
+}
+/**
+ * Returns the line color from the given string or array.
+ */
+
+
+function getColor(color, idx) {
+  return typeof color == 'string' ? color : color[idx % color.length];
+}
+/**
+ * Internal method that draws the individual lines.
+ */
+
+
+function drawLines(el, opts) {
+  var borderRadius = Math.round(opts.corners * opts.width * 500) / 1000 + 'px';
+  var shadow = 'none';
+
+  if (opts.shadow === true) {
+    shadow = '0 2px 4px #000'; // default shadow
+  } else if (typeof opts.shadow === 'string') {
+    shadow = opts.shadow;
+  }
+
+  var shadows = parseBoxShadow(shadow);
+
+  for (var i = 0; i < opts.lines; i++) {
+    var degrees = ~~(360 / opts.lines * i + opts.rotate);
+    var backgroundLine = css(document.createElement('div'), {
+      position: 'absolute',
+      top: -opts.width / 2 + "px",
+      width: opts.length + opts.width + 'px',
+      height: opts.width + 'px',
+      background: getColor(opts.fadeColor, i),
+      borderRadius: borderRadius,
+      transformOrigin: 'left',
+      transform: "rotate(" + degrees + "deg) translateX(" + opts.radius + "px)"
+    });
+    var delay = i * opts.direction / opts.lines / opts.speed;
+    delay -= 1 / opts.speed; // so initial animation state will include trail
+
+    var line = css(document.createElement('div'), {
+      width: '100%',
+      height: '100%',
+      background: getColor(opts.color, i),
+      borderRadius: borderRadius,
+      boxShadow: normalizeShadow(shadows, degrees),
+      animation: 1 / opts.speed + "s linear " + delay + "s infinite " + opts.animation
+    });
+    backgroundLine.appendChild(line);
+    el.appendChild(backgroundLine);
+  }
+}
+
+function parseBoxShadow(boxShadow) {
+  var regex = /^\s*([a-zA-Z]+\s+)?(-?\d+(\.\d+)?)([a-zA-Z]*)\s+(-?\d+(\.\d+)?)([a-zA-Z]*)(.*)$/;
+  var shadows = [];
+
+  for (var _i = 0, _a = boxShadow.split(','); _i < _a.length; _i++) {
+    var shadow = _a[_i];
+    var matches = shadow.match(regex);
+
+    if (matches === null) {
+      continue; // invalid syntax
+    }
+
+    var x = +matches[2];
+    var y = +matches[5];
+    var xUnits = matches[4];
+    var yUnits = matches[7];
+
+    if (x === 0 && !xUnits) {
+      xUnits = yUnits;
+    }
+
+    if (y === 0 && !yUnits) {
+      yUnits = xUnits;
+    }
+
+    if (xUnits !== yUnits) {
+      continue; // units must match to use as coordinates
+    }
+
+    shadows.push({
+      prefix: matches[1] || '',
+      x: x,
+      y: y,
+      xUnits: xUnits,
+      yUnits: yUnits,
+      end: matches[8]
+    });
+  }
+
+  return shadows;
+}
+/**
+ * Modify box-shadow x/y offsets to counteract rotation
+ */
+
+
+function normalizeShadow(shadows, degrees) {
+  var normalized = [];
+
+  for (var _i = 0, shadows_1 = shadows; _i < shadows_1.length; _i++) {
+    var shadow = shadows_1[_i];
+    var xy = convertOffset(shadow.x, shadow.y, degrees);
+    normalized.push(shadow.prefix + xy[0] + shadow.xUnits + ' ' + xy[1] + shadow.yUnits + shadow.end);
+  }
+
+  return normalized.join(', ');
+}
+
+function convertOffset(x, y, degrees) {
+  var radians = degrees * Math.PI / 180;
+  var sin = Math.sin(radians);
+  var cos = Math.cos(radians);
+  return [Math.round((x * cos + y * sin) * 1000) / 1000, Math.round((-x * sin + y * cos) * 1000) / 1000];
+}
+
+/*!
+ * Ladda
+ * http://lab.hakim.se/ladda
+ * MIT licensed
+ *
+ * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
+ */
+
+var ALL_INSTANCES = [];
+/**
+ * Creates a new instance of Ladda which wraps the
+ * target button element.
+ *
+ * @return An API object that can be used to control
+ * the loading animation state.
+ */
+
+function create(button) {
+  if (typeof button === 'undefined') {
+    console.warn("Ladda button target must be defined.");
+    return;
+  } // The button must have the class "ladda-button"
+
+
+  if (!button.classList.contains('ladda-button')) {
+    button.classList.add('ladda-button');
+  } // Style is required, default to "expand-right"
+
+
+  if (!button.hasAttribute('data-style')) {
+    button.setAttribute('data-style', 'expand-right');
+  } // The text contents must be wrapped in a ladda-label
+  // element, create one if it doesn't already exist
+
+
+  if (!button.querySelector('.ladda-label')) {
+    var laddaLabel = document.createElement('span');
+    laddaLabel.className = 'ladda-label';
+    wrapContent(button, laddaLabel);
+  } // The spinner component
+
+
+  var spinner,
+      spinnerWrapper = button.querySelector('.ladda-spinner'); // Wrapper element for the spinner
+
+  if (!spinnerWrapper) {
+    spinnerWrapper = document.createElement('span');
+    spinnerWrapper.className = 'ladda-spinner';
+  }
+
+  button.appendChild(spinnerWrapper); // Timer used to delay starting/stopping
+
+  var timer;
+  var instance = {
+    /**
+     * Enter the loading state.
+     */
+    start: function start() {
+      // Create the spinner if it doesn't already exist
+      if (!spinner) {
+        spinner = createSpinner(button);
+      }
+
+      button.disabled = true;
+      button.setAttribute('data-loading', '');
+      clearTimeout(timer);
+      spinner.spin(spinnerWrapper);
+      this.setProgress(0);
+      return this; // chain
+    },
+
+    /**
+     * Enter the loading state, after a delay.
+     */
+    startAfter: function startAfter(delay) {
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        instance.start();
+      }, delay);
+      return this; // chain
+    },
+
+    /**
+     * Exit the loading state.
+     */
+    stop: function stop() {
+      if (instance.isLoading()) {
+        button.disabled = false;
+        button.removeAttribute('data-loading');
+      } // Kill the animation after a delay to make sure it
+      // runs for the duration of the button transition
+
+
+      clearTimeout(timer);
+
+      if (spinner) {
+        timer = setTimeout(function () {
+          spinner.stop();
+        }, 1000);
+      }
+
+      return this; // chain
+    },
+
+    /**
+     * Toggle the loading state on/off.
+     */
+    toggle: function toggle() {
+      return this.isLoading() ? this.stop() : this.start();
+    },
+
+    /**
+     * Sets the width of the visual progress bar inside of
+     * this Ladda button
+     *
+     * @param {Number} progress in the range of 0-1
+     */
+    setProgress: function setProgress(progress) {
+      // Cap it
+      progress = Math.max(Math.min(progress, 1), 0);
+      var progressElement = button.querySelector('.ladda-progress'); // Remove the progress bar if we're at 0 progress
+
+      if (progress === 0 && progressElement && progressElement.parentNode) {
+        progressElement.parentNode.removeChild(progressElement);
+      } else {
+        if (!progressElement) {
+          progressElement = document.createElement('div');
+          progressElement.className = 'ladda-progress';
+          button.appendChild(progressElement);
+        }
+
+        progressElement.style.width = (progress || 0) * button.offsetWidth + 'px';
+      }
+    },
+    isLoading: function isLoading() {
+      return button.hasAttribute('data-loading');
+    },
+    remove: function remove() {
+      clearTimeout(timer);
+      button.disabled = false;
+      button.removeAttribute('data-loading');
+
+      if (spinner) {
+        spinner.stop();
+        spinner = null;
+      }
+
+      ALL_INSTANCES.splice(ALL_INSTANCES.indexOf(instance), 1);
+    }
+  };
+  ALL_INSTANCES.push(instance);
+  return instance;
+}
+/**
+ * Binds the target buttons to automatically enter the
+ * loading state when clicked.
+ *
+ * @param target Either an HTML element or a CSS selector.
+ * @param options
+ *          - timeout Number of milliseconds to wait before
+ *            automatically cancelling the animation.
+ *          - callback A function to be called with the Ladda
+ *            instance when a target button is clicked.
+ */
+
+function bind(target, options) {
+  var targets;
+
+  if (typeof target === 'string') {
+    targets = document.querySelectorAll(target);
+  } else if (typeof target === 'object') {
+    targets = [target];
+  } else {
+    throw new Error('target must be string or object');
+  }
+
+  options = options || {};
+
+  for (var i = 0; i < targets.length; i++) {
+    bindElement(targets[i], options);
+  }
+}
+/**
+ * Stops ALL current loading animations.
+ */
+
+function stopAll() {
+  for (var i = 0, len = ALL_INSTANCES.length; i < len; i++) {
+    ALL_INSTANCES[i].stop();
+  }
+}
+/**
+* Get the first ancestor node from an element, having a
+* certain type.
+*
+* @param elem An HTML element
+* @param type an HTML tag type (uppercased)
+*
+* @return An HTML element
+*/
+
+function getAncestorOfTagType(elem, type) {
+  while (elem.parentNode && elem.tagName !== type) {
+    elem = elem.parentNode;
+  }
+
+  return type === elem.tagName ? elem : undefined;
+}
+
+function createSpinner(button) {
+  var height = button.offsetHeight,
+      spinnerColor,
+      spinnerLines;
+
+  if (height === 0) {
+    // We may have an element that is not visible so
+    // we attempt to get the height in a different way
+    height = parseFloat(window.getComputedStyle(button).height);
+  } // If the button is tall we can afford some padding
+
+
+  if (height > 32) {
+    height *= 0.8;
+  } // Prefer an explicit height if one is defined
+
+
+  if (button.hasAttribute('data-spinner-size')) {
+    height = parseInt(button.getAttribute('data-spinner-size'), 10);
+  } // Allow buttons to specify the color of the spinner element
+
+
+  if (button.hasAttribute('data-spinner-color')) {
+    spinnerColor = button.getAttribute('data-spinner-color');
+  } // Allow buttons to specify the number of lines of the spinner
+
+
+  if (button.hasAttribute('data-spinner-lines')) {
+    spinnerLines = parseInt(button.getAttribute('data-spinner-lines'), 10);
+  }
+
+  var radius = height * 0.2,
+      length = radius * 0.6,
+      width = radius < 7 ? 2 : 3;
+  return new Spinner({
+    color: spinnerColor || '#fff',
+    lines: spinnerLines || 12,
+    radius: radius,
+    length: length,
+    width: width,
+    animation: 'ladda-spinner-line-fade',
+    zIndex: 'auto',
+    top: 'auto',
+    left: 'auto',
+    className: ''
+  });
+}
+
+function wrapContent(node, wrapper) {
+  var r = document.createRange();
+  r.selectNodeContents(node);
+  r.surroundContents(wrapper);
+  node.appendChild(wrapper);
+}
+
+function bindElement(element, options) {
+  if (typeof element.addEventListener !== 'function') {
+    return;
+  }
+
+  var instance = create(element);
+  var timeout = -1;
+  element.addEventListener('click', function () {
+    // If the button belongs to a form, make sure all the
+    // fields in that form are filled out
+    var valid = true;
+    var form = getAncestorOfTagType(element, 'FORM');
+
+    if (typeof form !== 'undefined' && !form.hasAttribute('novalidate')) {
+      // Modern form validation
+      if (typeof form.checkValidity === 'function') {
+        valid = form.checkValidity();
+      }
+    }
+
+    if (valid) {
+      // This is asynchronous to avoid an issue where disabling
+      // the button prevents forms from submitting
+      instance.startAfter(1); // Set a loading timeout if one is specified
+
+      if (typeof options.timeout === 'number') {
+        clearTimeout(timeout);
+        timeout = setTimeout(instance.stop, options.timeout);
+      } // Invoke callbacks
+
+
+      if (typeof options.callback === 'function') {
+        options.callback.apply(null, [instance]);
+      }
+    }
+  }, false);
+}
+
 var GREEN = 'green';
@@ -112,3 +664,2 @@ var RED = 'red';
 
-var OMITTED_PROPS = ['loading', 'progress'];
 var MAPPED_PROPS = {
@@ -123,11 +674,8 @@ color: 'data-color',
 
-var omit = function omit(data, keys) {
-  var result = {};
-  Object.keys(data).forEach(function (key) {
-    if (keys.indexOf(key) === -1) {
-      var finalKey = MAPPED_PROPS[key] || key;
-      result[finalKey] = data[key];
-    }
-  });
-  return result;
+var mapLegacyProps = function mapLegacyProps(props) {
+  return Object.keys(props).reduce(function (mappedProps, key) {
+    var finalKey = MAPPED_PROPS[key] || key;
+    mappedProps[finalKey] = props[key];
+    return mappedProps;
+  }, {});
 };
@@ -141,4 +689,2 @@
   function LaddaButton() {
-    var _getPrototypeOf2;
-
     var _this;
@@ -148,12 +694,4 @@
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(LaddaButton)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _this.setNode = function (node) {
-      _this.node = node;
-    };
-
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(LaddaButton).call(this));
+    _this.buttonRef = React.createRef();
     return _this;
@@ -168,3 +706,3 @@ }
           progress = _this$props.progress;
-      this.laddaInstance = ladda.create(this.node);
+      this.laddaInstance = create(this.buttonRef.current);
 
@@ -206,9 +744,17 @@ if (loading) {
     value: function render() {
-      return React.createElement("button", Object.assign({}, omit(this.props, OMITTED_PROPS), {
-        className: "ladda-button ".concat(this.props.className || ''),
-        ref: this.setNode,
-        disabled: this.props.disabled || this.props.loading,
+      var _this$props3 = this.props,
+          className = _this$props3.className,
+          children = _this$props3.children,
+          disabled = _this$props3.disabled,
+          loading = _this$props3.loading,
+          progress = _this$props3.progress,
+          otherProps = _objectWithoutProperties(_this$props3, ["className", "children", "disabled", "loading", "progress"]);
+
+      return React.createElement("button", Object.assign({}, mapLegacyProps(otherProps), {
+        className: "ladda-button ".concat(className || ''),
+        ref: this.buttonRef,
+        disabled: disabled || loading,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 94
+          lineNumber: 97
         },
@@ -220,6 +766,6 @@ __self: this
           fileName: _jsxFileName,
-          lineNumber: 100
+          lineNumber: 103
         },
         __self: this
-      }, this.props.children));
+      }, children));
     }
@@ -237,3 +783,3 @@ }]);
   disabled: PropTypes.bool,
-  // props
+  // ladda props
   color: PropTypes.oneOf(COLORS),
@@ -245,3 +791,3 @@ size: PropTypes.oneOf(SIZES),
   spinnerLines: PropTypes.number,
-  // legacy props
+  // legacy ladda props
   'data-color': PropTypes.oneOf(COLORS),
@@ -280,2 +826,6 @@ 'data-size': PropTypes.oneOf(SIZES),
 exports.STYLES = STYLES;
+exports.create = create;
+exports.bind = bind;
+exports.stopAll = stopAll;
+exports.Spinner = Spinner;
 
@@ -282,0 +832,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

dist/zumper-react-ladda.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("ladda")):"function"==typeof define&&define.amd?define(["exports","react","ladda"],t):t((e=e||self).ZumperReactLadda={},e.React,e.Ladda)}(this,function(e,t,n){"use strict";function o(e,t){for(var n=0;t.length>n;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function r(e){return(r=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function s(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}t=t&&t.hasOwnProperty("default")?t.default:t;var i=["green","red","blue","purple","mint"],l=["xs","s","l","xl"],d=["contract","contract-overlay","expand-left","expand-right","expand-up","expand-down","slide-left","slide-right","slide-up","slide-down","zoom-in","zoom-out"],c=["loading","progress"],p={color:"data-color",size:"data-size",style:"data-style",spinnerSize:"data-spinner-size",spinnerColor:"data-spinner-color",spinnerLines:"data-spinner-lines"};e.default=function(e){function i(){var e,t;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,i);for(var n=arguments.length,o=Array(n),a=0;n>a;a++)o[a]=arguments[a];return(t=s(this,(e=r(i)).call.apply(e,[this].concat(o)))).setNode=function(e){t.node=e},t}var l,d,u;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&a(e,t)}(i,t.Component),l=i,(d=[{key:"componentDidMount",value:function(){var e=this.props,t=e.loading,o=e.progress;this.laddaInstance=n.create(this.node),t&&this.laddaInstance.start(),void 0!==o&&this.laddaInstance.setProgress(o)}},{key:"componentDidUpdate",value:function(e){var t=this.props,n=t.loading,o=t.progress;e.loading!==n&&(n?this.laddaInstance.start():this.laddaInstance.stop()),e.progress!==o&&this.laddaInstance.setProgress(o)}},{key:"componentWillUnmount",value:function(){this.laddaInstance.remove()}},{key:"render",value:function(){return t.createElement("button",Object.assign({},(n=c,o={},Object.keys(e=this.props).forEach(function(t){-1===n.indexOf(t)&&(o[p[t]||t]=e[t])}),o),{className:"ladda-button ".concat(this.props.className||""),ref:this.setNode,disabled:this.props.disabled||this.props.loading}),t.createElement("span",{className:"ladda-label"},this.props.children));var e,n,o}}])&&o(l.prototype,d),u&&o(l,u),i}(),e.GREEN="green",e.RED="red",e.BLUE="blue",e.PURPLE="purple",e.MINT="mint",e.COLORS=i,e.XS="xs",e.S="s",e.L="l",e.XL="xl",e.SIZES=l,e.CONTRACT="contract",e.CONTRACT_OVERLAY="contract-overlay",e.EXPAND_LEFT="expand-left",e.EXPAND_RIGHT="expand-right",e.EXPAND_UP="expand-up",e.EXPAND_DOWN="expand-down",e.SLIDE_LEFT="slide-left",e.SLIDE_RIGHT="slide-right",e.SLIDE_UP="slide-up",e.SLIDE_DOWN="slide-down",e.ZOOM_IN="zoom-in",e.ZOOM_OUT="zoom-out",e.STYLES=d,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t=t||self).ZumperReactLadda={},t.React)}(this,function(t,e){"use strict";function n(t,e){for(var n=0;e.length>n;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function r(t){return(r=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function a(t,e){return(a=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function o(t,e){if(null==t)return{};var n,r,a=function(t,e){if(null==t)return{};var n,r,a={},o=Object.keys(t);for(r=0;o.length>r;r++)0>e.indexOf(n=o[r])&&(a[n]=t[n]);return a}(t,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);for(r=0;o.length>r;r++)0>e.indexOf(n=o[r])&&Object.prototype.propertyIsEnumerable.call(t,n)&&(a[n]=t[n])}return a}function i(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}e=e&&e.hasOwnProperty("default")?e.default:e;var s={lines:12,length:7,width:5,radius:10,scale:1,corners:1,color:"#000",fadeColor:"transparent",animation:"spinner-line-fade-default",rotate:0,direction:1,speed:1,zIndex:2e9,className:"spinner",top:"50%",left:"50%",shadow:"0 0 1px transparent",position:"absolute"},d=function(){function t(t){void 0===t&&(t={}),this.opts=Object.assign({},s,t)}return t.prototype.spin=function(t){return this.stop(),this.el=document.createElement("div"),this.el.className=this.opts.className,this.el.setAttribute("role","progressbar"),l(this.el,{position:this.opts.position,width:0,zIndex:this.opts.zIndex,left:this.opts.left,top:this.opts.top,transform:"scale("+this.opts.scale+")"}),t&&t.insertBefore(this.el,t.firstChild||null),function(t,e){var n=Math.round(e.corners*e.width*500)/1e3+"px",r="none";!0===e.shadow?r="0 2px 4px #000":"string"==typeof e.shadow&&(r=e.shadow);for(var a=function(t){for(var e=/^\s*([a-zA-Z]+\s+)?(-?\d+(\.\d+)?)([a-zA-Z]*)\s+(-?\d+(\.\d+)?)([a-zA-Z]*)(.*)$/,n=[],r=0,a=t.split(",");a.length>r;r++){var o=a[r],i=o.match(e);if(null!==i){var s=+i[2],d=+i[5],l=i[4],u=i[7];0!==s||l||(l=u),0!==d||u||(u=l),l===u&&n.push({prefix:i[1]||"",x:s,y:d,xUnits:l,yUnits:u,end:i[8]})}}return n}(r),o=0;e.lines>o;o++){var i=~~(360/e.lines*o+e.rotate),s=l(document.createElement("div"),{position:"absolute",top:-e.width/2+"px",width:e.length+e.width+"px",height:e.width+"px",background:u(e.fadeColor,o),borderRadius:n,transformOrigin:"left",transform:"rotate("+i+"deg) translateX("+e.radius+"px)"}),d=o*e.direction/e.lines/e.speed;d-=1/e.speed;var p=l(document.createElement("div"),{width:"100%",height:"100%",background:u(e.color,o),borderRadius:n,boxShadow:c(a,i),animation:1/e.speed+"s linear "+d+"s infinite "+e.animation});s.appendChild(p),t.appendChild(s)}}(this.el,this.opts),this},t.prototype.stop=function(){return this.el&&("undefined"!=typeof requestAnimationFrame?cancelAnimationFrame(this.animateId):clearTimeout(this.animateId),this.el.parentNode&&this.el.parentNode.removeChild(this.el),this.el=void 0),this},t}();function l(t,e){for(var n in e)t.style[n]=e[n];return t}function u(t,e){return"string"==typeof t?t:t[e%t.length]}function c(t,e){for(var n=[],r=0,a=t;a.length>r;r++){var o=a[r],i=p(o.x,o.y,e);n.push(o.prefix+i[0]+o.xUnits+" "+i[1]+o.yUnits+o.end)}return n.join(", ")}function p(t,e,n){var r=n*Math.PI/180,a=Math.sin(r),o=Math.cos(r);return[Math.round(1e3*(t*o+e*a))/1e3,Math.round(1e3*(-t*a+e*o))/1e3]}var f=[];function h(t){if(void 0!==t){if(t.classList.contains("ladda-button")||t.classList.add("ladda-button"),t.hasAttribute("data-style")||t.setAttribute("data-style","expand-right"),!t.querySelector(".ladda-label")){var e=document.createElement("span");e.className="ladda-label",n=t,r=e,(a=document.createRange()).selectNodeContents(n),a.surroundContents(r),n.appendChild(r)}var n,r,a,o,i,s=t.querySelector(".ladda-spinner");s||((s=document.createElement("span")).className="ladda-spinner"),t.appendChild(s);var l={start:function(){return o||(o=function(t){var e,n,r=t.offsetHeight;0===r&&(r=parseFloat(window.getComputedStyle(t).height));r>32&&(r*=.8);t.hasAttribute("data-spinner-size")&&(r=parseInt(t.getAttribute("data-spinner-size"),10));t.hasAttribute("data-spinner-color")&&(e=t.getAttribute("data-spinner-color"));t.hasAttribute("data-spinner-lines")&&(n=parseInt(t.getAttribute("data-spinner-lines"),10));var a=.2*r;return new d({color:e||"#fff",lines:n||12,radius:a,length:.6*a,width:7>a?2:3,animation:"ladda-spinner-line-fade",zIndex:"auto",top:"auto",left:"auto",className:""})}(t)),t.disabled=!0,t.setAttribute("data-loading",""),clearTimeout(i),o.spin(s),this.setProgress(0),this},startAfter:function(t){return clearTimeout(i),i=setTimeout(function(){l.start()},t),this},stop:function(){return l.isLoading()&&(t.disabled=!1,t.removeAttribute("data-loading")),clearTimeout(i),o&&(i=setTimeout(function(){o.stop()},1e3)),this},toggle:function(){return this.isLoading()?this.stop():this.start()},setProgress:function(e){e=Math.max(Math.min(e,1),0);var n=t.querySelector(".ladda-progress");0===e&&n&&n.parentNode?n.parentNode.removeChild(n):(n||((n=document.createElement("div")).className="ladda-progress",t.appendChild(n)),n.style.width=(e||0)*t.offsetWidth+"px")},isLoading:function(){return t.hasAttribute("data-loading")},remove:function(){clearTimeout(i),t.disabled=!1,t.removeAttribute("data-loading"),o&&(o.stop(),o=null),f.splice(f.indexOf(l),1)}};return f.push(l),l}console.warn("Ladda button target must be defined.")}function m(t,e){if("function"==typeof t.addEventListener){var n=h(t),r=-1;t.addEventListener("click",function(){var a=!0,o=function(t,e){for(;t.parentNode&&t.tagName!==e;)t=t.parentNode;return e===t.tagName?t:void 0}(t,"FORM");void 0===o||o.hasAttribute("novalidate")||"function"==typeof o.checkValidity&&(a=o.checkValidity()),a&&(n.startAfter(1),"number"==typeof e.timeout&&(clearTimeout(r),r=setTimeout(n.stop,e.timeout)),"function"==typeof e.callback&&e.callback.call(null,n))},!1)}}var b=["green","red","blue","purple","mint"],g=["xs","s","l","xl"],v=["contract","contract-overlay","expand-left","expand-right","expand-up","expand-down","slide-left","slide-right","slide-up","slide-down","zoom-in","zoom-out"],y={color:"data-color",size:"data-size",style:"data-style",spinnerSize:"data-spinner-size",spinnerColor:"data-spinner-color",spinnerLines:"data-spinner-lines"};t.default=function(t){function s(){var t;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,s),(t=i(this,r(s).call(this))).buttonRef=e.createRef(),t}var d,l,u;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&a(t,e)}(s,e.Component),d=s,(l=[{key:"componentDidMount",value:function(){var t=this.props,e=t.loading,n=t.progress;this.laddaInstance=h(this.buttonRef.current),e&&this.laddaInstance.start(),void 0!==n&&this.laddaInstance.setProgress(n)}},{key:"componentDidUpdate",value:function(t){var e=this.props,n=e.loading,r=e.progress;t.loading!==n&&(n?this.laddaInstance.start():this.laddaInstance.stop()),t.progress!==r&&this.laddaInstance.setProgress(r)}},{key:"componentWillUnmount",value:function(){this.laddaInstance.remove()}},{key:"render",value:function(){var t,n=this.props,r=n.className,a=n.children,i=n.disabled,s=n.loading,d=o(n,["className","children","disabled","loading","progress"]);return e.createElement("button",Object.assign({},Object.keys(t=d).reduce(function(e,n){return e[y[n]||n]=t[n],e},{}),{className:"ladda-button ".concat(r||""),ref:this.buttonRef,disabled:i||s}),e.createElement("span",{className:"ladda-label"},a))}}])&&n(d.prototype,l),u&&n(d,u),s}(),t.GREEN="green",t.RED="red",t.BLUE="blue",t.PURPLE="purple",t.MINT="mint",t.COLORS=b,t.XS="xs",t.S="s",t.L="l",t.XL="xl",t.SIZES=g,t.CONTRACT="contract",t.CONTRACT_OVERLAY="contract-overlay",t.EXPAND_LEFT="expand-left",t.EXPAND_RIGHT="expand-right",t.EXPAND_UP="expand-up",t.EXPAND_DOWN="expand-down",t.SLIDE_LEFT="slide-left",t.SLIDE_RIGHT="slide-right",t.SLIDE_UP="slide-up",t.SLIDE_DOWN="slide-down",t.ZOOM_IN="zoom-in",t.ZOOM_OUT="zoom-out",t.STYLES=v,t.create=h,t.bind=function(t,e){var n;if("string"==typeof t)n=document.querySelectorAll(t);else{if("object"!=typeof t)throw Error("target must be string or object");n=[t]}e=e||{};for(var r=0;n.length>r;r++)m(n[r],e)},t.stopAll=function(){for(var t=0,e=f.length;e>t;t++)f[t].stop()},t.Spinner=d,Object.defineProperty(t,"__esModule",{value:!0})});

es/index.js

 import LaddaButton from './LaddaButton';
 export default LaddaButton;
-export * from './constants';
+export * from './constants';
+export * from './ladda';
+export * from './spin';

es/LaddaButton.js

@@ -0,4 +1,8 @@
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import { create } from 'ladda';
+import { create } from './ladda';
 import { COLORS, SIZES, STYLES } from './constants';
@@ -8,3 +12,2 @@
 
-const OMITTED_PROPS = ['loading', 'progress'];
 const MAPPED_PROPS = {
@@ -19,20 +22,12 @@ color: 'data-color',
 
-const omit = (data, keys) => {
-  const result = {};
-  Object.keys(data).forEach(key => {
-    if (keys.indexOf(key) === -1) {
-      const finalKey = MAPPED_PROPS[key] || key;
-      result[finalKey] = data[key];
-    }
-  });
-  return result;
-};
+const mapLegacyProps = props => Object.keys(props).reduce((mappedProps, key) => {
+  const finalKey = MAPPED_PROPS[key] || key;
+  mappedProps[finalKey] = props[key];
+  return mappedProps;
+}, {});
 
 export default class LaddaButton extends React.Component {
   constructor() {
-    super(...arguments);
-
-    this.setNode = node => {
-      this.node = node;
-    };
+    super();
+    this.buttonRef = React.createRef();
   }
@@ -44,3 +39,3 @@
           progress = _this$props.progress;
-    this.laddaInstance = create(this.node);
+    this.laddaInstance = create(this.buttonRef.current);
 
@@ -79,9 +74,17 @@ if (loading) {
   render() {
-    return React.createElement("button", Object.assign({}, omit(this.props, OMITTED_PROPS), {
-      className: `ladda-button ${this.props.className || ''}`,
-      ref: this.setNode,
-      disabled: this.props.disabled || this.props.loading
+    const _this$props3 = this.props,
+          className = _this$props3.className,
+          children = _this$props3.children,
+          disabled = _this$props3.disabled,
+          loading = _this$props3.loading,
+          progress = _this$props3.progress,
+          otherProps = _objectWithoutProperties(_this$props3, ["className", "children", "disabled", "loading", "progress"]);
+
+    return React.createElement("button", Object.assign({}, mapLegacyProps(otherProps), {
+      className: `ladda-button ${className || ''}`,
+      ref: this.buttonRef,
+      disabled: disabled || loading
     }), React.createElement("span", {
       className: "ladda-label"
-    }, this.props.children));
+    }, children));
   }
@@ -96,3 +99,3 @@
   disabled: PropTypes.bool,
-  // props
+  // ladda props
   color: PropTypes.oneOf(COLORS),
@@ -104,3 +107,3 @@ size: PropTypes.oneOf(SIZES),
   spinnerLines: PropTypes.number,
-  // legacy props
+  // legacy ladda props
   'data-color': PropTypes.oneOf(COLORS),
@@ -107,0 +110,0 @@ 'data-size': PropTypes.oneOf(SIZES),

lib/constants.js

@@ -5,49 +5,49 @@ "use strict";
 exports.STYLES = exports.ZOOM_OUT = exports.ZOOM_IN = exports.SLIDE_DOWN = exports.SLIDE_UP = exports.SLIDE_RIGHT = exports.SLIDE_LEFT = exports.EXPAND_DOWN = exports.EXPAND_UP = exports.EXPAND_RIGHT = exports.EXPAND_LEFT = exports.CONTRACT_OVERLAY = exports.CONTRACT = exports.SIZES = exports.XL = exports.L = exports.S = exports.XS = exports.COLORS = exports.MINT = exports.PURPLE = exports.BLUE = exports.RED = exports.GREEN = void 0;
-var GREEN = 'green';
+const GREEN = 'green';
 exports.GREEN = GREEN;
-var RED = 'red';
+const RED = 'red';
 exports.RED = RED;
-var BLUE = 'blue';
+const BLUE = 'blue';
 exports.BLUE = BLUE;
-var PURPLE = 'purple';
+const PURPLE = 'purple';
 exports.PURPLE = PURPLE;
-var MINT = 'mint';
+const MINT = 'mint';
 exports.MINT = MINT;
-var COLORS = [GREEN, RED, BLUE, PURPLE, MINT];
+const COLORS = [GREEN, RED, BLUE, PURPLE, MINT];
 exports.COLORS = COLORS;
-var XS = 'xs';
+const XS = 'xs';
 exports.XS = XS;
-var S = 's';
+const S = 's';
 exports.S = S;
-var L = 'l';
+const L = 'l';
 exports.L = L;
-var XL = 'xl';
+const XL = 'xl';
 exports.XL = XL;
-var SIZES = [XS, S, L, XL];
+const SIZES = [XS, S, L, XL];
 exports.SIZES = SIZES;
-var CONTRACT = 'contract';
+const CONTRACT = 'contract';
 exports.CONTRACT = CONTRACT;
-var CONTRACT_OVERLAY = 'contract-overlay';
+const CONTRACT_OVERLAY = 'contract-overlay';
 exports.CONTRACT_OVERLAY = CONTRACT_OVERLAY;
-var EXPAND_LEFT = 'expand-left';
+const EXPAND_LEFT = 'expand-left';
 exports.EXPAND_LEFT = EXPAND_LEFT;
-var EXPAND_RIGHT = 'expand-right';
+const EXPAND_RIGHT = 'expand-right';
 exports.EXPAND_RIGHT = EXPAND_RIGHT;
-var EXPAND_UP = 'expand-up';
+const EXPAND_UP = 'expand-up';
 exports.EXPAND_UP = EXPAND_UP;
-var EXPAND_DOWN = 'expand-down';
+const EXPAND_DOWN = 'expand-down';
 exports.EXPAND_DOWN = EXPAND_DOWN;
-var SLIDE_LEFT = 'slide-left';
+const SLIDE_LEFT = 'slide-left';
 exports.SLIDE_LEFT = SLIDE_LEFT;
-var SLIDE_RIGHT = 'slide-right';
+const SLIDE_RIGHT = 'slide-right';
 exports.SLIDE_RIGHT = SLIDE_RIGHT;
-var SLIDE_UP = 'slide-up';
+const SLIDE_UP = 'slide-up';
 exports.SLIDE_UP = SLIDE_UP;
-var SLIDE_DOWN = 'slide-down';
+const SLIDE_DOWN = 'slide-down';
 exports.SLIDE_DOWN = SLIDE_DOWN;
-var ZOOM_IN = 'zoom-in';
+const ZOOM_IN = 'zoom-in';
 exports.ZOOM_IN = ZOOM_IN;
-var ZOOM_OUT = 'zoom-out';
+const ZOOM_OUT = 'zoom-out';
 exports.ZOOM_OUT = ZOOM_OUT;
-var STYLES = [CONTRACT, CONTRACT_OVERLAY, EXPAND_LEFT, EXPAND_RIGHT, EXPAND_UP, EXPAND_DOWN, SLIDE_LEFT, SLIDE_RIGHT, SLIDE_UP, SLIDE_DOWN, ZOOM_IN, ZOOM_OUT];
+const STYLES = [CONTRACT, CONTRACT_OVERLAY, EXPAND_LEFT, EXPAND_RIGHT, EXPAND_UP, EXPAND_DOWN, SLIDE_LEFT, SLIDE_RIGHT, SLIDE_UP, SLIDE_DOWN, ZOOM_IN, ZOOM_OUT];
 exports.STYLES = STYLES;

lib/index.js

@@ -17,2 +17,18 @@ "use strict";
 
+var _ladda = require("./ladda");
+
+Object.keys(_ladda).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  exports[key] = _ladda[key];
+});
+
+var _spin = require("./spin");
+
+Object.keys(_spin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  exports[key] = _spin[key];
+});
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,0 +35,0 @@

lib/LaddaButton.js

@@ -10,3 +10,3 @@ "use strict";
 
-var _ladda = require("ladda");
+var _ladda = require("./ladda");
 
@@ -17,24 +17,9 @@ var _constants = require("./constants");
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-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); } }
+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 _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+const isUndefined = value => typeof value === 'undefined';
 
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-var isUndefined = function isUndefined(value) {
-  return typeof value === 'undefined';
-};
-
-var OMITTED_PROPS = ['loading', 'progress'];
-var MAPPED_PROPS = {
+const MAPPED_PROPS = {
   color: 'data-color',
@@ -48,94 +33,71 @@ size: 'data-size',
 
-var omit = function omit(data, keys) {
-  var result = {};
-  Object.keys(data).forEach(function (key) {
-    if (keys.indexOf(key) === -1) {
-      var finalKey = MAPPED_PROPS[key] || key;
-      result[finalKey] = data[key];
-    }
-  });
-  return result;
-};
+const mapLegacyProps = props => Object.keys(props).reduce((mappedProps, key) => {
+  const finalKey = MAPPED_PROPS[key] || key;
+  mappedProps[finalKey] = props[key];
+  return mappedProps;
+}, {});
 
-var LaddaButton =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(LaddaButton, _React$Component);
+class LaddaButton extends _react.default.Component {
+  constructor() {
+    super();
+    this.buttonRef = _react.default.createRef();
+  }
 
-  function LaddaButton() {
-    var _getPrototypeOf2;
+  componentDidMount() {
+    const _this$props = this.props,
+          loading = _this$props.loading,
+          progress = _this$props.progress;
+    this.laddaInstance = (0, _ladda.create)(this.buttonRef.current);
 
-    var _this;
+    if (loading) {
+      this.laddaInstance.start();
+    }
 
-    _classCallCheck(this, LaddaButton);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    if (!isUndefined(progress)) {
+      this.laddaInstance.setProgress(progress);
     }
-
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(LaddaButton)).call.apply(_getPrototypeOf2, [this].concat(args)));
-
-    _this.setNode = function (node) {
-      _this.node = node;
-    };
-
-    return _this;
   }
 
-  _createClass(LaddaButton, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props = this.props,
-          loading = _this$props.loading,
-          progress = _this$props.progress;
-      this.laddaInstance = (0, _ladda.create)(this.node);
+  componentDidUpdate(prevProps) {
+    const _this$props2 = this.props,
+          loading = _this$props2.loading,
+          progress = _this$props2.progress;
 
+    if (prevProps.loading !== loading) {
       if (loading) {
         this.laddaInstance.start();
+      } else {
+        this.laddaInstance.stop();
       }
+    }
 
-      if (!isUndefined(progress)) {
-        this.laddaInstance.setProgress(progress);
-      }
+    if (prevProps.progress !== progress) {
+      this.laddaInstance.setProgress(progress);
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$props2 = this.props,
-          loading = _this$props2.loading,
-          progress = _this$props2.progress;
+  }
 
-      if (prevProps.loading !== loading) {
-        if (loading) {
-          this.laddaInstance.start();
-        } else {
-          this.laddaInstance.stop();
-        }
-      }
+  componentWillUnmount() {
+    this.laddaInstance.remove();
+  }
 
-      if (prevProps.progress !== progress) {
-        this.laddaInstance.setProgress(progress);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.laddaInstance.remove();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return _react.default.createElement("button", Object.assign({}, omit(this.props, OMITTED_PROPS), {
-        className: `ladda-button ${this.props.className || ''}`,
-        ref: this.setNode,
-        disabled: this.props.disabled || this.props.loading
-      }), _react.default.createElement("span", {
-        className: "ladda-label"
-      }, this.props.children));
-    }
-  }]);
+  render() {
+    const _this$props3 = this.props,
+          className = _this$props3.className,
+          children = _this$props3.children,
+          disabled = _this$props3.disabled,
+          loading = _this$props3.loading,
+          progress = _this$props3.progress,
+          otherProps = _objectWithoutProperties(_this$props3, ["className", "children", "disabled", "loading", "progress"]);
 
-  return LaddaButton;
-}(_react.default.Component);
+    return _react.default.createElement("button", Object.assign({}, mapLegacyProps(otherProps), {
+      className: `ladda-button ${className || ''}`,
+      ref: this.buttonRef,
+      disabled: disabled || loading
+    }), _react.default.createElement("span", {
+      className: "ladda-label"
+    }, children));
+  }
 
+}
+
 exports.default = LaddaButton;
@@ -148,3 +110,3 @@ LaddaButton.propTypes = {
   disabled: _propTypes.default.bool,
-  // props
+  // ladda props
   color: _propTypes.default.oneOf(_constants.COLORS),
@@ -156,3 +118,3 @@ size: _propTypes.default.oneOf(_constants.SIZES),
   spinnerLines: _propTypes.default.number,
-  // legacy props
+  // legacy ladda props
   'data-color': _propTypes.default.oneOf(_constants.COLORS),
@@ -159,0 +121,0 @@ 'data-size': _propTypes.default.oneOf(_constants.SIZES),

package.json

 {
   "name": "@zumper/react-ladda",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "React wrapper for Ladda buttons",
@@ -25,2 +25,3 @@ "keywords": [
   "scripts": {
+    "copy:ladda": "node ./scripts/copy-ladda.js",
     "build:commonjs": "cross-env MODULES_ENV=commonjs babel src --out-dir lib",
@@ -30,3 +31,3 @@ "build:es": "cross-env MODULES_ENV=esmodules babel src --out-dir es",
     "build:umd:min": "cross-env NODE_ENV=production rollup -c",
-    "build": "yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:umd:min",
+    "build": "yarn copy:ladda && yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:umd:min",
     "clean": "rimraf lib dist es coverage",
@@ -37,4 +38,4 @@ "format": "prettier --write \"{example,src,test}/**/*.{js,jsx,ts,tsx}\" .babelrc.js rollup.config.js .eslintrc.json README.md \"docs/**/*.md\" && yarn lint --fix",
     "pretest": "yarn lint",
-    "postversion": "git push --tags && yarn publish . --tag $npm_package_version && git push && echo \"Successfully released version $npm_package_version!\"",
-    "test": "jest",
+    "postversion": "git push && git push --tags",
+    "test": "yarn copy:ladda && jest",
     "coverage": "jest --coverage"
@@ -83,2 +84,3 @@ },
     "eslint-plugin-standard": "^4.0.0",
+    "fs-extra": "^7.0.1",
     "jest": "^23.6.0",
@@ -99,2 +101,3 @@ "jest-dom": "^3.0.0",
     "react-test-renderer": "^16.7.0",
+    "replace-in-file": "^3.4.3",
     "rimraf": "^2.6.3",
@@ -138,7 +141,4 @@ "rollup": "^1.1.1",
     },
-    "testURL": "https://localhost",
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\](?!(ladda|spin\\.js)[/\\\\]).+\\.(js|jsx|ts|tsx)$"
-    ]
+    "testURL": "https://localhost"
   }
 }

README.md

@@ -10,2 +10,3 @@ # @zumper/react-ladda
 Differences:
+
 - props without the cumbersome `data-` prefix are allowed
@@ -101,11 +102,11 @@ - upgraded to ladda 2 [see here](https://github.com/jsdir/react-ladda/pull/58)
 
-| Prop                                    | Type      | Description                                           |
-| --------------------------------------- | --------- | ----------------------------------------------------- |
-| `loading`                               | `boolean` | Displays the button's loading indicator               |
-| `progress`                              | `number`  | Number from 0.0 to 1.0                                |
-| `color` or `data-color`                 | `string`  | Color applied to the button (A [color](#colors))      |
-| `size` or `data-size`                   | `string`  | A [button size](#sizes)                               |
-| `style` or `data-style`                 | `string`  | A [button style](#styles)                             |
-| `spinnerSize` or `data-spinner-size`    | `number`  | Number representing the size of the spinner in pixels |
-| `spinnerColor` or `data-spinner-color`  | `string`  | Color applied to the spinner (eg. `#eee`)             |
+| Prop                                   | Type      | Description                                           |
+| -------------------------------------- | --------- | ----------------------------------------------------- |
+| `loading`                              | `boolean` | Displays the button's loading indicator               |
+| `progress`                             | `number`  | Number from 0.0 to 1.0                                |
+| `color` or `data-color`                | `string`  | Color applied to the button (A [color](#colors))      |
+| `size` or `data-size`                  | `string`  | A [button size](#sizes)                               |
+| `style` or `data-style`                | `string`  | A [button style](#styles)                             |
+| `spinnerSize` or `data-spinner-size`   | `number`  | Number representing the size of the spinner in pixels |
+| `spinnerColor` or `data-spinner-color` | `string`  | Color applied to the spinner (eg. `#eee`)             |
 | `spinnerLines` or `data-spinner-lines` | `number`  | Number of spokes in the spinner                       |
@@ -112,0 +113,0 @@

src/index.js

@@ -5,1 +5,3 @@ import LaddaButton from './LaddaButton'
 export * from './constants'
+export * from './ladda'
+export * from './spin'

src/LaddaButton.jsx

 import React from 'react'
 import PropTypes from 'prop-types'
-import { create } from 'ladda'
 
+import { create } from './ladda'
 import { COLORS, SIZES, STYLES } from './constants'
@@ -9,3 +9,2 @@
 
-const OMITTED_PROPS = ['loading', 'progress']
 const MAPPED_PROPS = {
@@ -20,14 +19,9 @@ color: 'data-color',
 
-const omit = (data, keys) => {
-  const result = {}
-  Object.keys(data).forEach((key) => {
-    if (keys.indexOf(key) === -1) {
-      const finalKey = MAPPED_PROPS[key] || key
-      result[finalKey] = data[key]
-    }
-  })
+const mapLegacyProps = (props) =>
+  Object.keys(props).reduce((mappedProps, key) => {
+    const finalKey = MAPPED_PROPS[key] || key
+    mappedProps[finalKey] = props[key]
+    return mappedProps
+  }, {})
 
-  return result
-}
-
 export default class LaddaButton extends React.Component {
@@ -41,3 +35,3 @@ static propTypes = {
 
-    // props
+    // ladda props
     color: PropTypes.oneOf(COLORS),
@@ -50,3 +44,3 @@ size: PropTypes.oneOf(SIZES),
 
-    // legacy props
+    // legacy ladda props
     'data-color': PropTypes.oneOf(COLORS),
@@ -60,5 +54,10 @@ 'data-size': PropTypes.oneOf(SIZES),
 
+  constructor() {
+    super()
+    this.buttonRef = React.createRef()
+  }
+
   componentDidMount() {
     const { loading, progress } = this.props
-    this.laddaInstance = create(this.node)
+    this.laddaInstance = create(this.buttonRef.current)
 
@@ -93,15 +92,19 @@ if (loading) {
 
-  setNode = (node) => {
-    this.node = node
-  }
-
   render() {
+    const {
+      className,
+      children,
+      disabled,
+      loading,
+      progress,
+      ...otherProps
+    } = this.props
     return (
       <button
-        {...omit(this.props, OMITTED_PROPS)}
-        className={`ladda-button ${this.props.className || ''}`}
-        ref={this.setNode}
-        disabled={this.props.disabled || this.props.loading}
+        {...mapLegacyProps(otherProps)}
+        className={`ladda-button ${className || ''}`}
+        ref={this.buttonRef}
+        disabled={disabled || loading}
       >
-        <span className="ladda-label">{this.props.children}</span>
+        <span className="ladda-label">{children}</span>
       </button>
@@ -108,0 +111,0 @@ )

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

98709

increased by157.5%

Number of package files

21

increased by40%

Lines of code

2457

increased by258.69%

Number of lines in readme file

149

increased by0.68%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

56

increased by3.7%

No dependency changes