grevlingui 0.1.8 → 0.1.10

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,15 +3,25 @@
     display: grid;
     grid-template-columns: repeat(3, 2rem);
     grid-template-rows: repeat(3, 2rem);
-
-    /*transform: rotate(45deg);*/
     height: 6rem;
     width: 6rem;
 }
 
+.flipped.dots {
+    transform: rotate(45deg);
+}
+
+.big.dots {
+    grid-template-columns: repeat(4, 2rem);
+    grid-template-rows: repeat(4, 2rem);
+    height: 8rem;
+    width: 8rem;
+    transform: rotate(135deg);
+}
+
 .dots .dot {
-    width: 1.6rem;
-    height: 1.6rem;
+    width: 26px;
+    height: 26px;
     border-radius: 100%;
-    background-color: black;
+    margin: 3px;
 }

package/Dots/Dots.js

@@ -18,24 +18,29 @@ require("./Dots.css");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Dots = _ref => {
-  var _grids$num;
+  var _grids$version$num;
 
   let {
-    num
+    num,
+    color,
+    version = 0
   } = _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 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]], [[], [4], [0, 8], [0, 4, 8], [0, 2, 6, 8], [0, 2, 4, 6, 8], [0, 2, 5, 6, 7, 8], [0, 2, 4, 5, 6, 7, 8], [0, 1, 2, 3, 5, 6, 7, 8], [0, 1, 2, 3, 4, 5, 6, 7, 8]], [[], [8], [4, 8], [2, 6, 8], [0, 2, 6, 8], [0, 2, 4, 6, 8], [0, 2, 5, 6, 7, 8], [0, 2, 4, 5, 6, 7, 8], [0, 1, 2, 3, 5, 6, 7, 8], [0, 1, 2, 3, 4, 5, 6, 7, 8]], [[], [0], [1, 4], [0, 1, 4], [0, 1, 4, 5], [0, 1, 4, 6, 9], [0, 1, 4, 5, 6, 9], [0, 1, 4, 5, 6, 9, 10], [0, 1, 4, 5, 6, 9, 11, 14], [0, 1, 4, 5, 6, 9, 10, 11, 14], [0, 1, 4, 5, 6, 9, 10, 11, 14, 15]], [[], [0], [0, 5], [0, 1, 4], [0, 1, 4, 5], [0, 1, 4, 5, 10], [0, 1, 4, 5, 6, 9], [0, 1, 4, 5, 6, 9, 10], [0, 1, 4, 5, 6, 9, 10, 15], [0, 1, 4, 5, 6, 9, 10, 11, 14], [0, 1, 4, 5, 6, 9, 10, 11, 14, 15]]];
+  const grid = (_grids$version$num = grids[version][num]) !== null && _grids$version$num !== void 0 ? _grids$version$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)
   });
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "dots"
-  }, [...Array(9).keys()].map(renderDot));
+    className: "dots".concat(version ? ' flipped' : '').concat(version > 2 ? ' big' : '')
+  }, [...Array(version > 2 ? 16 : 9).keys()].map(renderDot));
 };
 
 exports.Dots = Dots;

package/SunMoon.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SunMoon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SunMoon = _ref => {
+  let {
+    sun,
+    color = 'white',
+    tt = 300,
+    size = 32,
+    onClick
+  } = _ref;
+
+  const transition = keys => keys.map(key => "".concat(key, " ").concat(tt, "ms linear")).join(', ');
+
+  const path = d => /*#__PURE__*/_react.default.createElement("path", {
+    d: d,
+    fill: color,
+    style: {
+      transition: transition(['d', 'fill'])
+    }
+  });
+
+  const circle = (cx, cy, r, fill) => /*#__PURE__*/_react.default.createElement("circle", {
+    cx: cx,
+    cy: cy,
+    r: r,
+    fill: fill,
+    style: {
+      transition: transition(['r', 'cy', 'cx', 'fill'])
+    }
+  });
+
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 120 120",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      transition: "fill ".concat(tt, "ms linear")
+    },
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement("mask", {
+    id: "moonMask"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    height: "10000",
+    width: "10000",
+    fill: "white"
+  }), sun ? circle("91", "43", "0", "black") : circle("73", "53", "35", "black")), /*#__PURE__*/_react.default.createElement("g", {
+    mask: "url(#moonMask)"
+  }, sun ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path("M60 2L68 18H52L60 2Z"), path("M60 118L52 102L68 102L60 118Z"), path("M89 9.77053L87.9282 27.6269L74.0718 19.6269L89 9.77053Z"), path("M31 110.229L32.0718 92.3731L45.9282 100.373L31 110.229Z"), path("M110.229 31L100.373 45.9282L92.3731 32.0718L110.229 31Z"), path("M9.77053 89L19.6269 74.0718L27.6269 87.9282L9.77053 89Z"), path("M118 60L102 68L102 52L118 60Z"), path("M2 60L18 52L18 68L2 60Z"), path("M110.229 89L92.3731 87.9282L100.373 74.0718L110.229 89Z"), path("M9.77052 31L27.6269 32.0718L19.6269 45.9282L9.77052 31Z"), path("M89 110.229L74.0718 100.373L87.9282 92.3731L89 110.229Z"), path("M31 9.77053L45.9282 19.6269L32.0718 27.6269L31 9.77053Z"), circle("60", "60", "35", color)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, path("M60 15L68 31H52L60 15Z"), path("M60 105L52 89L68 89L60 105Z"), path("M82.5 21.0289L81.4282 38.8853L67.5718 30.8853L82.5 21.0289Z"), path("M37.5 98.9711L38.5718 81.1147L52.4282 89.1147L37.5 98.9711Z"), path("M98.9712 37.5L89.1148 52.4282L81.1148 38.5718L98.9712 37.5Z"), path("M21.0289 82.5L30.8853 67.5718L38.8853 81.4282L21.0289 82.5Z"), path("M105 60L89 68L89 52L105 60Z"), path("M15 60L31 52L31 68L15 60Z"), path("M98.9711 82.5L81.1147 81.4282L89.1147 67.5718L98.9711 82.5Z"), path("M21.0288 37.5L38.8852 38.5718L30.8852 52.4282L21.0288 37.5Z"), path("M82.5 98.9711L67.5718 89.1147L81.4282 81.1147L82.5 98.9711Z"), path("M37.5 21.0289L52.4282 30.8853L38.5718 38.8853L37.5 21.0289Z"), circle("60", "60", "45", color))));
+};
+
+exports.SunMoon = SunMoon;

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,12 +45,24 @@ 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() {
     return _SettingsButton.SettingsButton;
   }
 });
+Object.defineProperty(exports, "SunMoon", {
+  enumerable: true,
+  get: function get() {
+    return _SunMoon.SunMoon;
+  }
+});
 Object.defineProperty(exports, "ToggleSwitch", {
   enumerable: true,
   get: function get() {
@@ -74,10 +92,16 @@ 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 _SunMoon = require("./SunMoon");
+
 var _ToggleSwitch = require("./ToggleSwitch");
 
 var _NumberSelect = require("./NumberSelect/NumberSelect");

package/package.json

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