@ntbjs/react-components 0.0.1-beta.8 → 1.0.0

package/ActionButton-90485300.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-870f7df1.js');
+var React = require('react');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2;
+var ActionButton$1 = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  height: 40px;\n  width: 40px;\n  border: 0;\n  color: inherit;\n  background-color: transparent;\n  ", "\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 0 0;\n  transition: background-size 250ms ease;\n  cursor: pointer;\n\n  ", "\n\n  &:disabled {\n    opacity: 0.5;\n    color: inherit;\n    cursor: not-allowed;\n  }\n\n  svg {\n    width: 100%;\n    max-height: 20px;\n    max-width: 20px;\n    pointer-events: none;\n    transition: color 250ms;\n  }\n"])), function (props) {
+  return props.theme.themeProp('background-image', "radial-gradient(circle at center, ".concat(props.theme.getColor('gray-600'), " 50%, transparent 50%)"), "radial-gradient(circle at center, ".concat(props.theme.getColor('gray-200'), " 50%, transparent 50%)"));
+}, function (props) {
+  return styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n    ", ":not(:disabled) {\n      background-size: 200% 200%;\n\n      svg {\n        ", ";\n      }\n    }\n  "])), props.active ? '' : ':hover', function (props) {
+    return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
+  });
+});
+
+var ActionButton = React__default['default'].forwardRef(function ActionButton(_ref, forwardedRef) {
+  var icon = _ref.icon,
+      disabled = _ref.disabled,
+      active = _ref.active,
+      onClick = _ref.onClick,
+      props = defaultTheme._objectWithoutProperties(_ref, ["icon", "disabled", "active", "onClick"]);
+
+  return React__default['default'].createElement(ActionButton$1, defaultTheme._extends({
+    ref: forwardedRef,
+    disabled: disabled,
+    active: active,
+    onClick: onClick
+  }, props), icon);
+});
+ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {
+  icon: defaultTheme.PropTypes.element.isRequired,
+  disabled: defaultTheme.PropTypes.bool,
+  active: defaultTheme.PropTypes.bool,
+  onClick: defaultTheme.PropTypes.func
+} : {};
+ActionButton.defaultProps = {};
+
+exports.ActionButton = ActionButton;