chaser-components - npm Package Compare versions

Comparing version 3.1.0 to 3.1.1

dist/index.js

@@ -7,2 +7,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var React = require('react');
+var React__default = _interopDefault(React);
 var isString = _interopDefault(require('lodash/isString'));
@@ -2002,2 +2003,108 @@ var reactRouterDom = require('react-router-dom');
 
+var style$h = {"loader":"_kpm_V","rotate":"_NPI_A","neutral":"_1qeKg","white":"_34G6g","currentColor":"_lscx3"};
+
+const Loader = ({
+  size,
+  sizeUnit,
+  color,
+  className
+}) => {
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: cx(style$h.loader, style$h[color], className),
+    style: {
+      width: `${size}${sizeUnit}`,
+      height: `${size}${sizeUnit}`,
+      borderWidth: `${size / 5}${sizeUnit}`
+    }
+  });
+};
+
+Loader.propTypes = {
+  size: PropTypes__default.number,
+  sizeUnit: PropTypes__default.string,
+  className: PropTypes__default.string,
+  color: PropTypes__default.oneOf(['neutral', 'white', 'currentColor'])
+};
+Loader.defaultProps = {
+  size: 30,
+  color: 'neutral',
+  sizeUnit: 'px',
+  className: undefined
+};
+
+var style$i = {"layers":"_2YnVl","successMessage":"_2rbNN","spinner":"_1FYg6","loadingMessage":"_1TLpt","button":"_14qJ6","success":"_8cusS","hasSuccessMessage":"_3eY7s","content":"_WX0QL","loading":"_3oHCG"};
+
+const LoadingButton = ({
+  children,
+  loading,
+  loadingMessage,
+  success,
+  successMessage,
+  resetTimeout,
+  onReset,
+  className,
+  disabled,
+  size,
+  ...rest
+}) => {
+  React.useEffect(() => {
+    if (!success || !onReset) return undefined;
+    const id = setTimeout(onReset, resetTimeout);
+    return () => {
+      clearTimeout(id);
+    };
+  }, [success]);
+  const loaderSizes = {
+    regular: 20,
+    narrow: 15,
+    micro: 15
+  };
+  return /*#__PURE__*/React__default.createElement(Button, _extends({
+    disabled: disabled || loading || !!(success && onReset),
+    className: cx(style$i.button, loading && style$i.loading, success && style$i.success, successMessage && style$i.hasSuccessMessage, className),
+    size: size
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: style$i.layers
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: style$i.content
+  }, children), /*#__PURE__*/React__default.createElement("span", {
+    className: style$i.spinner
+  }, loadingMessage && /*#__PURE__*/React__default.createElement("span", {
+    className: style$i.loadingMessage
+  }, loadingMessage), /*#__PURE__*/React__default.createElement(Loader, {
+    size: loaderSizes[size],
+    color: "currentColor"
+  })), /*#__PURE__*/React__default.createElement("span", {
+    className: style$i.successMessage
+  }, successMessage)));
+};
+
+LoadingButton.propTypes = {
+  children: PropTypes.node.isRequired,
+  loading: PropTypes.bool,
+  success: PropTypes.bool,
+  successMessage: PropTypes.node,
+  loadingMessage: PropTypes.node,
+  resetTimeout: PropTypes.number,
+  onReset: PropTypes.func,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  appearance: PropTypes.oneOf(['secondary', 'minimal', 'primary']),
+  size: PropTypes.string,
+  intent: PropTypes.string
+};
+LoadingButton.defaultProps = {
+  loading: false,
+  success: false,
+  successMessage: undefined,
+  loadingMessage: undefined,
+  resetTimeout: 3000,
+  onReset: () => {},
+  className: undefined,
+  disabled: false,
+  appearance: 'primary',
+  size: 'regular',
+  intent: undefined
+};
+
 function useOnMount(fn) {
@@ -2020,2 +2127,3 @@ React.useEffect(fn, []);
 exports.Icon = Icon;
+exports.LoadingButton = LoadingButton;
 exports.Menu = Menu;
@@ -2022,0 +2130,0 @@ exports.Modal = Modal;

dist/index.modern.js

 import cx from 'classnames';
 import PropTypes, { number, string, oneOf, object, node, elementType, bool, shape, oneOfType, func, element, any } from 'prop-types';
-import { createElement, Fragment, Children, createContext, useContext, useState, useRef, useEffect, useCallback, useLayoutEffect, cloneElement } from 'react';
+import React__default, { createElement, Fragment, Children, createContext, useContext, useState, useRef, useEffect, useCallback, useLayoutEffect, cloneElement } from 'react';
 import isString from 'lodash/isString';
@@ -1998,2 +1998,108 @@ import { Link } from 'react-router-dom';
 
+var style$h = {"loader":"_kpm_V","rotate":"_NPI_A","neutral":"_1qeKg","white":"_34G6g","currentColor":"_lscx3"};
+
+const Loader = ({
+  size,
+  sizeUnit,
+  color,
+  className
+}) => {
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: cx(style$h.loader, style$h[color], className),
+    style: {
+      width: `${size}${sizeUnit}`,
+      height: `${size}${sizeUnit}`,
+      borderWidth: `${size / 5}${sizeUnit}`
+    }
+  });
+};
+
+Loader.propTypes = {
+  size: PropTypes.number,
+  sizeUnit: PropTypes.string,
+  className: PropTypes.string,
+  color: PropTypes.oneOf(['neutral', 'white', 'currentColor'])
+};
+Loader.defaultProps = {
+  size: 30,
+  color: 'neutral',
+  sizeUnit: 'px',
+  className: undefined
+};
+
+var style$i = {"layers":"_2YnVl","successMessage":"_2rbNN","spinner":"_1FYg6","loadingMessage":"_1TLpt","button":"_14qJ6","success":"_8cusS","hasSuccessMessage":"_3eY7s","content":"_WX0QL","loading":"_3oHCG"};
+
+const LoadingButton = ({
+  children,
+  loading,
+  loadingMessage,
+  success,
+  successMessage,
+  resetTimeout,
+  onReset,
+  className,
+  disabled,
+  size,
+  ...rest
+}) => {
+  useEffect(() => {
+    if (!success || !onReset) return undefined;
+    const id = setTimeout(onReset, resetTimeout);
+    return () => {
+      clearTimeout(id);
+    };
+  }, [success]);
+  const loaderSizes = {
+    regular: 20,
+    narrow: 15,
+    micro: 15
+  };
+  return /*#__PURE__*/React__default.createElement(Button, _extends({
+    disabled: disabled || loading || !!(success && onReset),
+    className: cx(style$i.button, loading && style$i.loading, success && style$i.success, successMessage && style$i.hasSuccessMessage, className),
+    size: size
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: style$i.layers
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: style$i.content
+  }, children), /*#__PURE__*/React__default.createElement("span", {
+    className: style$i.spinner
+  }, loadingMessage && /*#__PURE__*/React__default.createElement("span", {
+    className: style$i.loadingMessage
+  }, loadingMessage), /*#__PURE__*/React__default.createElement(Loader, {
+    size: loaderSizes[size],
+    color: "currentColor"
+  })), /*#__PURE__*/React__default.createElement("span", {
+    className: style$i.successMessage
+  }, successMessage)));
+};
+
+LoadingButton.propTypes = {
+  children: node.isRequired,
+  loading: bool,
+  success: bool,
+  successMessage: node,
+  loadingMessage: node,
+  resetTimeout: number,
+  onReset: func,
+  className: string,
+  disabled: bool,
+  appearance: oneOf(['secondary', 'minimal', 'primary']),
+  size: string,
+  intent: string
+};
+LoadingButton.defaultProps = {
+  loading: false,
+  success: false,
+  successMessage: undefined,
+  loadingMessage: undefined,
+  resetTimeout: 3000,
+  onReset: () => {},
+  className: undefined,
+  disabled: false,
+  appearance: 'primary',
+  size: 'regular',
+  intent: undefined
+};
+
 function useOnMount(fn) {
@@ -2007,3 +2113,3 @@ useEffect(fn, []);
 
-export { Accordion, Box, Button, ButtonGroup, Card, Columns, Heading, Healthscore, Icon, Menu, Modal, Popover, Position, Positioner, Shelf, Stack, Stock, Text, Tooltip, ZIndexProvider, useControlProp, useId, useOnMount, useOnOutsideClick, useOnUnmount, useOnUpdate, usePrevious, useUpdateEffect, useZIndex };
+export { Accordion, Box, Button, ButtonGroup, Card, Columns, Heading, Healthscore, Icon, LoadingButton, Menu, Modal, Popover, Position, Positioner, Shelf, Stack, Stock, Text, Tooltip, ZIndexProvider, useControlProp, useId, useOnMount, useOnOutsideClick, useOnUnmount, useOnUpdate, usePrevious, useUpdateEffect, useZIndex };
 //# sourceMappingURL=index.modern.js.map

package.json

 {
   "name": "chaser-components",
   "description": "Chaser HQ Component Library",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "module": "dist/index.modern.js",

src/index.js

@@ -22,2 +22,3 @@ import './index.scss';
 export { default as Accordion } from './components/Accordion/index';
+export { default as LoadingButton } from './components/LoadingButton/index';
 export { ZIndexProvider, useZIndex } from './components/ZIndex/index';
@@ -24,0 +25,0 @@

No alert changes

Improved metrics

Total package byte prevSize

565804

increased by3.71%

Lines of code

7913

increased by3.48%

No dependency changes