grevlingui 0.1.7 → 0.1.9

package/Buttons/Buttons.css

@@ -1,13 +1,64 @@
+.settingsButton,
+.resetButton {
+    outline: none;
+    background: none;
+    border: none;
+}
+
+.resetButton,
 .settingsButton {
     height: 50px;
     width: 50px;
     padding: 10px;
     border-radius: 10px;
-    background: none;
-    border: none;
 }
 
 .settingsButton svg {
     height: 100%;
     width: 100%;
+}
+
+.resetButton {
+    padding: 5px;
+}
+
+.resetButton svg {
+    height: 40px;
+    width: 40px;
+}
+
+@-ms-keyframes spinCC {
+    from {
+        -ms-transform: rotate(0deg);
+    }
+    to {
+        -ms-transform: rotate(-360deg);
+    }
+}
+
+@-moz-keyframes spinCC {
+    from {
+        -moz-transform: rotate(0deg);
+    }
+    to {
+        -moz-transform: rotate(-360deg);
+    }
+}
+
+@-webkit-keyframes spinCC {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(-360deg);
+    }
+}
+
+@keyframes spinCC {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(-360deg);
+    }
 }

package/Buttons/ResetButton.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResetButton = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ResetButton = _ref => {
+  let {
+    onClick: _onClick,
+    color = 'white',
+    backgroundColor
+  } = _ref;
+  const [spin, setSpin] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement("button", {
+    className: "resetButton ".concat(spin ? 'spin' : ''),
+    onClick: () => {
+      _onClick();
+
+      if (spin) return;
+      setSpin(true);
+      setTimeout(() => {
+        setSpin(false);
+      }, 400);
+    },
+    style: {
+      backgroundColor
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 90 90",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: color,
+    style: spin ? {
+      animation: 'spinCC 400ms linear'
+    } : {}
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M52.7646 16.0222C58.4958 17.5579 63.643 20.7586 67.5552 25.2196C71.4674 29.6806 73.9689 35.2015 74.7433 41.0842C75.5178 46.9669 74.5305 52.9471 71.9062 58.2686C69.2819 63.5902 65.1385 68.014 60 70.9807C54.8615 73.9475 48.9586 75.3238 43.0379 74.9357C37.1172 74.5477 31.4445 72.4126 26.7372 68.8006C22.0298 65.1885 18.4993 60.2617 16.5921 54.6432C14.6849 49.0246 14.4865 42.9667 16.0222 37.2354L26.5314 40.0513C25.5527 43.7041 25.6791 47.565 26.8946 51.1459C28.1102 54.7268 30.3603 57.8669 33.3604 60.169C36.3606 62.471 39.976 63.8318 43.7495 64.0791C47.523 64.3264 51.2851 63.4492 54.56 61.5584C57.835 59.6677 60.4757 56.8482 62.1483 53.4566C63.8208 50.065 64.4501 46.2535 63.9565 42.5043C63.4629 38.7551 61.8686 35.2364 59.3752 32.3932C56.8819 29.5501 53.6014 27.5101 49.9486 26.5314L52.7646 16.0222Z"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M60.8172 6.52009L38.3382 17.6037L49.0722 39.3736L57.9016 35.0202L51.3837 21.8011L65.0334 15.0709L60.8172 6.52009Z"
+  })));
+};
+
+exports.ResetButton = ResetButton;

package/Dots/Dots.css

@@ -3,8 +3,6 @@
     display: grid;
     grid-template-columns: repeat(3, 2rem);
     grid-template-rows: repeat(3, 2rem);
-
-    /*transform: rotate(45deg);*/
     height: 6rem;
     width: 6rem;
 }
@@ -13,5 +11,4 @@
     width: 1.6rem;
     height: 1.6rem;
     border-radius: 100%;
-    background-color: black;
 }

package/Dots/Dots.js

@@ -21,14 +21,18 @@ const Dots = _ref => {
   var _grids$num;
 
   let {
-    num
+    num,
+    color
   } = _ref;
   const grids = [[], [4], [0, 8], [0, 4, 8], [0, 2, 6, 8], [0, 2, 4, 6, 8], [0, 2, 3, 5, 6, 8], [0, 2, 3, 4, 5, 6, 8], [0, 1, 2, 3, 5, 6, 7, 8], [0, 1, 2, 3, 4, 5, 6, 7, 8]];
   const grid = (_grids$num = grids[num]) !== null && _grids$num !== void 0 ? _grids$num : [];
 
   const renderDot = i => grid.includes(i) ? /*#__PURE__*/_react.default.createElement("div", {
     key: "dot-".concat(i),
-    className: "dot"
+    className: "dot",
+    style: {
+      backgroundColor: color !== null && color !== void 0 ? color : 'black'
+    }
   }) : /*#__PURE__*/_react.default.createElement("div", {
     key: "dot-".concat(i)
   });

package/Menu/Menu.js

@@ -50,7 +50,9 @@ const Menu = _ref => {
     button = /*#__PURE__*/_react.default.createElement(Button, {
       className: "button ".concat(left ? 'left' : ''),
       open: !!(show || onCloseClickOverride),
-      setOpen: setShow,
+      setOpen: v => {
+        if (onCloseClickOverride) onCloseClickOverride();else setShow(v);
+      },
       transitionTime: transitionTime,
       stageDelay: transitionTime * .3,
       color: color,

package/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "CheckBox", {
     return _CheckBox.CheckBox;
   }
 });
+Object.defineProperty(exports, "Dots", {
+  enumerable: true,
+  get: function get() {
+    return _Dots.Dots;
+  }
+});
 Object.defineProperty(exports, "Menu", {
   enumerable: true,
   get: function get() {
@@ -39,6 +45,12 @@ Object.defineProperty(exports, "RadioGroup", {
     return _Radio.RadioGroup;
   }
 });
+Object.defineProperty(exports, "ResetButton", {
+  enumerable: true,
+  get: function get() {
+    return _ResetButton.ResetButton;
+  }
+});
 Object.defineProperty(exports, "SettingsButton", {
   enumerable: true,
   get: function get() {
@@ -74,10 +86,14 @@ var _SettingsButton = require("./Buttons/SettingsButton");
 
 var _MenuButton = require("./Buttons/MenuButton");
 
+var _ResetButton = require("./Buttons/ResetButton");
+
 var _Radio = require("./Radio");
 
 var _CheckBox = require("./CheckBox");
 
+var _Dots = require("./Dots/Dots");
+
 var _ToggleSwitch = require("./ToggleSwitch");
 
 var _NumberSelect = require("./NumberSelect/NumberSelect");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "grevlingui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "GUI elements",
   "main": "index.jsx",
   "repository": {