react-ladda-button/dist/index.modern.js

Ladda port to react in typescript and hooks

import React, { useRef, useEffect } from 'react';
import { Spinner } from 'spin.js';

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);
}

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;
}

var XS = 'xs';
var S = 's';
var L = 'l';
var XL = 'xl';
var SIZES = [XS, S, L, XL];
var CONTRACT = 'contract';
var CONTRACT_OVERLAY = 'contract-overlay';
var EXPAND_LEFT = 'expand-left';
var EXPAND_RIGHT = 'expand-right';
var EXPAND_UP = 'expand-up';
var EXPAND_DOWN = 'expand-down';
var SLIDE_LEFT = 'slide-left';
var SLIDE_RIGHT = 'slide-right';
var SLIDE_UP = 'slide-up';
var SLIDE_DOWN = 'slide-down';
var ZOOM_IN = 'zoom-in';
var ZOOM_OUT = 'zoom-out';
var STYLES = [EXPAND_LEFT, EXPAND_RIGHT, EXPAND_UP, EXPAND_DOWN, CONTRACT, CONTRACT_OVERLAY, ZOOM_IN, ZOOM_OUT, SLIDE_LEFT, SLIDE_RIGHT, SLIDE_UP, SLIDE_DOWN];
var LaddaButton = React.memo(function (_ref) {
  var _buttonRef$current2;

  var className = _ref.className,
      children = _ref.children,
      disabled = _ref.disabled,
      loading = _ref.loading,
      progress = _ref.progress,
      restProps = _objectWithoutPropertiesLoose(_ref, ["className", "children", "disabled", "loading", "progress"]);

  var buttonRef = useRef(null);
  var spinner = useRef();
  var timer = useRef();
  useEffect(function () {
    if (loading) {
      var _spinner$current, _buttonRef$current;

      timer.current && clearTimeout(timer.current);

      var createSpinner = function createSpinner() {
        var height = buttonRef.current ? buttonRef.current.offsetHeight : 0,
            spinnerColor,
            spinnerLines;

        if (height === 0) {
          if (buttonRef.current) height = parseFloat(window.getComputedStyle(buttonRef.current).height);
        }

        if (height > 32) {
          height *= 0.8;
        }

        if (restProps["data-spinner-size"]) {
          height = restProps["data-spinner-size"] || 10;
        }

        if (restProps['data-spinner-color']) {
          spinnerColor = restProps['data-spinner-color'];
        }

        if (restProps['data-spinner-lines']) {
          spinnerLines = restProps['data-spinner-lines'] || 12;
        }

        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',
          top: 'auto',
          left: 'auto',
          className: ''
        });
      };

      if (!spinner.current) spinner.current = createSpinner();
      (_spinner$current = spinner.current) === null || _spinner$current === void 0 ? void 0 : _spinner$current.spin(((_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.querySelector('.ladda-spinner')) || undefined);
    } else {
      if (spinner) {
        var tv = timer.current = setTimeout(function () {
          var _spinner$current2;

          (_spinner$current2 = spinner.current) === null || _spinner$current2 === void 0 ? void 0 : _spinner$current2.stop();
        }, 1000);
        return function () {
          return clearTimeout(tv);
        };
      }
    }

    return undefined;
  }, [loading]);
  var dloadingProp = loading ? {
    'data-loading': ''
  } : {};
  restProps = _extends({}, restProps, {
    'data-style': restProps['data-style'] || EXPAND_LEFT
  });
  return React.createElement("button", Object.assign({}, dloadingProp, restProps, {
    className: "ladda-button " + (className || ''),
    ref: buttonRef,
    disabled: disabled || loading
  }), React.createElement("span", {
    className: "ladda-label"
  }, children), React.createElement("span", {
    className: "ladda-spinner"
  }), !!progress && React.createElement("div", {
    className: "ladda-progress",
    style: {
      width: Math.max(Math.min(progress || 0, 1), 0) * (((_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 ? void 0 : _buttonRef$current2.offsetWidth) || 0) + 'px'
    }
  }));
});

export default LaddaButton;
export { CONTRACT, CONTRACT_OVERLAY, EXPAND_DOWN, EXPAND_LEFT, EXPAND_RIGHT, EXPAND_UP, L, LaddaButton, S, SIZES, SLIDE_DOWN, SLIDE_LEFT, SLIDE_RIGHT, SLIDE_UP, STYLES, XL, XS, ZOOM_IN, ZOOM_OUT };
//# sourceMappingURL=index.modern.js.map