@ntbjs/react-components 1.3.0-rc.9 → 2.0.0-rc.3

package/cjs/components/data/VerificationStatusIcon/VerificationStatusIcon.styled.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4;
+const VerificationIconWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  ${0};
+`), props => props.background && styled.css(_t2 || (_t2 = _`
+    background-color: #000 !important;
+    width: fit-content;
+    padding: 6px 14px 6px 9px;
+    border-radius: 15px;
+}
+    `)));
+const VerificationStatusIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+  display: flex;
+  position: relative;
+  font: normal normal normal 12px/16px Roboto;
+  ${0};
+
+  ${0};
+
+  svg {
+    height: ${0}px;
+  }
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.background && props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100')), props => {
+  var _props$iconHeight;
+  return (_props$iconHeight = props.iconHeight) !== null && _props$iconHeight !== void 0 ? _props$iconHeight : 15;
+});
+const VerificationStatusColor = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+  position: absolute;
+  bottom: 0;
+  left: ${0}px;
+  width: ${0}px;
+  height: ${0}px;
+  border-radius: 50%;
+  ${0};
+`), props => {
+  var _props$iconHeight2;
+  return ((_props$iconHeight2 = props.iconHeight) !== null && _props$iconHeight2 !== void 0 ? _props$iconHeight2 : 15) * 2 / 3;
+}, props => {
+  var _props$iconHeight3;
+  return ((_props$iconHeight3 = props.iconHeight) !== null && _props$iconHeight3 !== void 0 ? _props$iconHeight3 : 15) * 2 / 3;
+}, props => {
+  var _props$iconHeight4;
+  return ((_props$iconHeight4 = props.iconHeight) !== null && _props$iconHeight4 !== void 0 ? _props$iconHeight4 : 15) * 2 / 3;
+}, props => {
+  let darkThemeColor = props.theme.getColor('gray-100');
+  let lightThemeColor = props.theme.getColor('gray-500');
+  if (props.status === 'verified') {
+    darkThemeColor = props.theme.getColor('emerald-500');
+    lightThemeColor = props.theme.getColor('emerald-500');
+  } else if (props.status === 'pending') {
+    darkThemeColor = props.theme.getColor('signal-yellow-500');
+    lightThemeColor = props.theme.getColor('signal-yellow-500');
+  } else if (props.status === 'rejected') {
+    darkThemeColor = props.theme.getColor('red-600');
+    lightThemeColor = props.theme.getColor('red-600');
+  } else if (props.status === 'mixed') {
+    darkThemeColor = '#008CDB';
+    lightThemeColor = '#008CDB';
+  }
+  return props.theme.themeProp('background-color', darkThemeColor, lightThemeColor);
+});
+
+exports.VerificationIconWrapper = VerificationIconWrapper;
+exports.VerificationStatusColor = VerificationStatusColor;
+exports.VerificationStatusIcon = VerificationStatusIcon;

package/cjs/components/data/data/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Alert = require('../Alert/Alert.js');
+var Badge = require('../Badge/Badge.js');
+var Popover = require('../Popover/Popover.js');
+var Tab = require('../Tab/Tab.js');
+var Tabs = require('../Tabs/Tabs.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
+var VerificationStatusIcon = require('../VerificationStatusIcon/VerificationStatusIcon.js');
+
+
+
+exports.Alert = Alert["default"];
+exports.Badge = Badge["default"];
+exports.Popover = Popover["default"];
+exports.Tab = Tab["default"];
+exports.Tabs = Tabs["default"];
+exports.Tooltip = Tooltip["default"];
+exports.VerificationStatusIcon = VerificationStatusIcon["default"];

package/cjs/components/inputs/ActionButton/ActionButton.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../node_modules/react/index.js');
+var index$1 = require('../../../node_modules/prop-types/index.js');
+var ActionButton_styled = require('./ActionButton.styled.js');
+
+const _excluded = ["icon", "disabled", "active", "onClick", "actionWidthHeight"];
+const ActionButton = index["default"].forwardRef(function ActionButton(_ref, forwardedRef) {
+  let {
+      icon,
+      disabled,
+      active,
+      onClick,
+      actionWidthHeight
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return index["default"].createElement(ActionButton_styled.ActionButton, _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef,
+    disabled: disabled,
+    active: active,
+    onClick: onClick,
+    actionWidthHeight: actionWidthHeight
+  }, props), icon);
+});
+ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  icon: index$1["default"].element.isRequired,
+  disabled: index$1["default"].bool,
+  active: index$1["default"].bool,
+  onClick: index$1["default"].func,
+  backgroundColors: index$1["default"].arrayOf(index$1["default"].string),
+  actionWidthHeight: index$1["default"].array
+} : {};
+ActionButton.defaultProps = {
+  onClick: () => {},
+  actionWidthHeight: [40, 40]
+};
+var ActionButton$1 = ActionButton;
+
+exports["default"] = ActionButton$1;

package/cjs/components/inputs/ActionButton/ActionButton.styled.js

@@ -0,0 +1,66 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var polished = require('polished');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2;
+const ActionButton = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: ${0};
+  height: ${0};
+  border: 0;
+  color: inherit;
+  background-color: transparent;
+  ${0}
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 0 0;
+  transition: background-size 250ms ease;
+  cursor: pointer;
+
+  ${0}
+
+  ${0}
+
+  &:disabled {
+    opacity: 0.5;
+    color: inherit;
+    cursor: not-allowed;
+  }
+
+  svg {
+    width: 100%;
+    max-width: ${0};
+    max-height: ${0};
+
+    pointer-events: none;
+    transition: color 250ms;
+  }
+`), props => `${props.actionWidthHeight[0]}px`, props => `${props.actionWidthHeight[1]}px`, props => {
+  var _props$backgroundColo, _props$backgroundColo2, _props$backgroundColo3, _props$backgroundColo4;
+  const darkThemeBgColor = (_props$backgroundColo = props === null || props === void 0 || (_props$backgroundColo2 = props.backgroundColors) === null || _props$backgroundColo2 === void 0 ? void 0 : _props$backgroundColo2[0]) !== null && _props$backgroundColo !== void 0 ? _props$backgroundColo : props.theme.getColor('gray-600');
+  const lightThemeBgColor = (_props$backgroundColo3 = props === null || props === void 0 || (_props$backgroundColo4 = props.backgroundColors) === null || _props$backgroundColo4 === void 0 ? void 0 : _props$backgroundColo4[1]) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : props.theme.getColor('gray-200');
+  return props.theme.themeProp('background-image', `radial-gradient(circle at center, ${darkThemeBgColor} 50%, transparent 50%)`, `radial-gradient(circle at center, ${lightThemeBgColor} 50%, transparent 50%)`);
+}, props => styled.css(_t2 || (_t2 = _`
+    ${0}:not(:disabled) {
+      background-size: 200% 200%;
+
+      svg {
+        ${0};
+      }
+    }
+  `), props.active ? '' : ':hover', props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))), props => props.useShadow ? props.theme.themeProp('box-shadow', `0px 3px 6px ${polished.rgba(props.theme.getColor('black'), 0.7)}`, `0px 3px 6px ${props.theme.getColor('black')}`) : null, props => `${props.actionWidthHeight[0] - 15}px`, props => `${props.actionWidthHeight[1] - 15}px`);
+
+exports.ActionButton = ActionButton;

package/cjs/components/inputs/ActionButton/inputs/ActionButton/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ActionButton = require('../../ActionButton.js');
+
+
+
+exports["default"] = ActionButton["default"];

package/cjs/components/inputs/Button/Button.js

@@ -0,0 +1,188 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../node_modules/react/index.js');
+var index$2 = require('../../../node_modules/prop-types/index.js');
+var Button_styled = require('./Button.styled.js');
+var expandMore = require('../../../icons/expand-more.svg.js');
+var index$1 = require('../../../_virtual/index.js');
+var Popover = require('../../data/Popover/Popover.js');
+var ContextMenu = require('../../widgets/ContextMenu/ContextMenu.js');
+
+const _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children", "singleActionGap", "width"];
+const Button = index["default"].forwardRef(function Button(_ref, forwardedRef) {
+  let {
+      onClickEffect,
+      singleAction = false,
+      activeDropdown = false,
+      dropdownItems,
+      secondary,
+      outlined,
+      block,
+      icon,
+      size = 'normal',
+      disabled,
+      loading,
+      className,
+      children,
+      singleActionGap = 34,
+      width
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const [loadingState, setLoadingState] = index$1.react.exports.useState(loading || false);
+  const [loadingStep, setLoadingStep] = index$1.react.exports.useState(113);
+  const loadingInterval = index$1.react.exports.useRef(0);
+  const [dropdownIsActive, setDropdownIsActive] = index$1.react.exports.useState(false);
+  const enableLoading = () => {
+    loadingInterval.current = setInterval(() => {
+      setLoadingStep(currentLoadingStep => {
+        const newLoadingStep = Math.round(currentLoadingStep - 15 * currentLoadingStep / 100);
+        if (newLoadingStep === currentLoadingStep) {
+          clearInterval(loadingInterval.current);
+        }
+        return newLoadingStep;
+      });
+    }, 300);
+    setLoadingState(true);
+  };
+  const disableLoading = () => {
+    clearInterval(loadingInterval.current);
+    setLoadingStep(0);
+    setTimeout(() => {
+      setLoadingState(false);
+      setLoadingStep(113);
+    }, 500);
+  };
+  index$1.react.exports.useEffect(() => {
+    if (loading) {
+      enableLoading();
+    } else {
+      disableLoading();
+    }
+    return () => clearInterval(loadingInterval.current);
+  }, [loading]);
+  const handleDropdownButtonClick = () => {
+    setDropdownIsActive(true);
+  };
+  const handleDropdownClose = () => {
+    setDropdownIsActive(false);
+  };
+  return index["default"].createElement(Button_styled.ButtonWrapper, null, !singleAction ? index["default"].createElement(Button_styled.MainButtonWrapper, {
+    activeDropdown: activeDropdown,
+    dropdownItems: dropdownItems,
+    outlined: outlined,
+    secondary: secondary
+  }, index["default"].createElement(Button_styled.MainButtonContainer, {
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined
+  }, index["default"].createElement(Button_styled.Button, _rollupPluginBabelHelpers["extends"]({
+    ref: forwardedRef,
+    onClick: onClickEffect,
+    singleAction: singleAction,
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined,
+    block: block,
+    size: size,
+    disabled: disabled,
+    className: className,
+    "aria-busy": disabled,
+    width: width
+  }, props), index["default"].createElement(Button_styled.ButtonContent, {
+    $loading: loadingState,
+    size: size
+  }, icon, children), index["default"].createElement(Button_styled.LoadingIndicator, {
+    $loading: loadingState,
+    style: {
+      opacity: loadingState ? 1 : 0
+    }
+  }, index["default"].createElement(Button_styled.LoadingIndicatorSvg, {
+    viewBox: "22 22 44 44"
+  }, index["default"].createElement(Button_styled.LoadingIndicatorSvgCircle, {
+    cx: "44",
+    cy: "44",
+    r: "18",
+    fill: "none",
+    strokeWidth: "4",
+    stroke: "currentColor",
+    style: {
+      strokeDashoffset: `${loadingStep}px`
+    }
+  }))))), (activeDropdown || dropdownItems) && index["default"].createElement(Button_styled.DropdownButtonContainer, {
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined
+  }, index["default"].createElement(Popover["default"], {
+    content: index["default"].createElement(ContextMenu["default"], null, dropdownItems),
+    placement: 'bottom-end',
+    arrow: false,
+    contextMenu: true,
+    onHide: handleDropdownClose
+  }, index["default"].createElement(Button_styled.Button, {
+    ref: forwardedRef,
+    singleAction: singleAction,
+    singleActionGap: singleActionGap,
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined,
+    block: block,
+    size: size,
+    disabled: disabled,
+    onClick: handleDropdownButtonClick,
+    className: dropdownIsActive ? 'dropdown-is-active' : '',
+    width: width
+  }, index["default"].createElement(expandMore.ReactComponent, null))))) : index["default"].createElement(index["default"].Fragment, null, index["default"].createElement(Button_styled.MainButtonContainerSingle, {
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined,
+    className: className
+  }, index["default"].createElement(Button_styled.DropdownButtonContainer, {
+    singleAction: singleAction
+  }, index["default"].createElement(Popover["default"], {
+    content: index["default"].createElement(ContextMenu["default"], null, dropdownItems),
+    placement: 'bottom-end',
+    arrow: false,
+    contextMenu: true,
+    onHide: handleDropdownClose
+  }, index["default"].createElement(Button_styled.Button, {
+    ref: forwardedRef,
+    singleAction: singleAction,
+    singleActionGap: singleActionGap,
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined,
+    block: block,
+    size: size,
+    disabled: disabled,
+    onClick: handleDropdownButtonClick,
+    className: dropdownIsActive ? 'dropdown-is-active' : '',
+    width: width
+  }, index["default"].createElement(Button_styled.ButtonContent, {
+    $loading: loadingState,
+    size: size,
+    singleAction: singleAction
+  }, icon, children), index["default"].createElement(expandMore.ReactComponent, null)))))));
+});
+Button.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClickEffect: index$2["default"].func,
+  singleAction: index$2["default"].bool,
+  activeDropdown: index$2["default"].bool,
+  dropdownItems: index$2["default"].node,
+  secondary: index$2["default"].bool,
+  outlined: index$2["default"].bool,
+  block: index$2["default"].bool,
+  icon: index$2["default"].element,
+  size: index$2["default"].oneOf(['x-small', 'small', 'normal', 'large']),
+  disabled: index$2["default"].bool,
+  loading: index$2["default"].bool,
+  className: index$2["default"].string,
+  children: index$2["default"].any.isRequired,
+  singleActionGap: index$2["default"].number,
+  width: index$2["default"].number
+} : {};
+var Button$1 = Button;
+
+exports["default"] = Button$1;