grevlingui 0.1.12 → 0.1.14

package/Buttons/SettingsButton.js

@@ -5,11 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SettingsButton = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
 
 require("./Buttons.css");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -29,6 +33,7 @@ const SettingsButton = _ref => {
     className,
     rounding = 7
   } = _ref;
+  const [randomId] = (0, _react.useState)(Math.random());
   const rArray = open ? [0, 0] : [20, 35];
 
   const getRekt = (deg, animate) => /*#__PURE__*/_react.default.createElement("rect", {
@@ -70,7 +75,7 @@ const SettingsButton = _ref => {
     viewBox: "0 0 100 100",
     xmlns: "http://www.w3.org/2000/svg"
   }, /*#__PURE__*/_react.default.createElement("mask", {
-    id: "gearMask"
+    id: "gearMask".concat(randomId)
   }, /*#__PURE__*/_react.default.createElement("rect", {
     x: "0",
     y: "0",
@@ -78,7 +83,7 @@ const SettingsButton = _ref => {
     width: "100",
     fill: "white"
   }), getCircle(rArray[0])), /*#__PURE__*/_react.default.createElement("g", {
-    mask: "url(#gearMask)",
+    mask: "url(#gearMask".concat(randomId, ")"),
     id: "settingsButtonShapes"
   }, getRekt(0, true), getRekt(45), getRekt(90, true), getRekt(135), getCircle(rArray[1], color))));
 };

package/Loader/Loader.css

@@ -0,0 +1,26 @@
+
+@-moz-keyframes spin {
+    100% { -moz-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+    100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes spin {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform:rotate(360deg);
+    }
+}
+
+@-moz-keyframes spinCC {
+    100% { -moz-transform: rotate(-360deg); }
+}
+@-webkit-keyframes spinCC {
+    100% { -webkit-transform: rotate(-360deg); }
+}
+@keyframes spinCC {
+    100% {
+        -webkit-transform: rotate(-360deg);
+        transform:rotate(-360deg);
+    }
+}

package/Loader/Loader.js

@@ -5,63 +5,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Loader = void 0;
 
-require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _UseEffectOnce = _interopRequireDefault(require("../utils/UseEffectOnce"));
+require("./Loader.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-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; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 const Loader = _ref => {
   let {
     color = 'black',
-    size = '100',
-    slowness = 0
+    size = '10rem',
+    // size = 'min(80vw, 80vh)',
+    speed = 5000
   } = _ref;
 
-  const getRandomStyle = (prevRotation, slower) => {
-    const time = Math.random() * 500 + 1000 + slowness + (slower ? 1000 : 0);
-    const rotationChange = (Math.random() * 150 + 50) * (Math.random() > 0.2 ? 1 : -1);
-    const rotation = prevRotation + rotationChange;
-    return {
-      time,
-      rotation,
-      transform: "rotate(".concat(rotation, ", 50,  71.1)"),
-      style: {
-        transitionProperty: 'transform',
-        transitionDuration: "".concat(time, "ms"),
-        transitionTimingFunction: 'linear'
-      }
-    };
-  };
+  const spin = cc => ({
+    WebkitAnimation: "spin".concat(cc ? 'CC' : '', " ").concat(speed, "ms linear infinite"),
+    MozAnimation: "spin".concat(cc ? 'CC' : '', " ").concat(speed, "ms linear infinite"),
+    animation: "spin".concat(cc ? 'CC' : '', " ").concat(speed, "ms linear infinite")
+  });
 
-  const [innerState, setInnerState] = (0, _react.useState)();
-  const [outerState, setOuterState] = (0, _react.useState)(getRandomStyle(0));
-  (0, _UseEffectOnce.default)(() => {
-    const boop = (func, prevRot, slower) => {
-      const thing = getRandomStyle(prevRot, slower);
-      func(thing);
-      setTimeout(() => {
-        boop(func, thing.rotation, slower);
-      }, thing.time + 300);
-    };
-
-    boop(setInnerState, 0);
-    boop(setOuterState, 0, true);
-  }, []);
   return /*#__PURE__*/_react.default.createElement("svg", {
-    className: 'icon',
+    className: "grevloadinger",
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "-2 -2 27.7 27.7",
+    viewBox: "-8.5 12.5 117 117",
     height: size,
-    width: size
-  }, /*#__PURE__*/_react.default.createElement("g", {
-    transform: "scale(.2) translate(10, -11)"
+    width: size,
+    style: spin()
   }, /*#__PURE__*/_react.default.createElement("mask", {
     id: "spinnyMask1"
   }, /*#__PURE__*/_react.default.createElement("rect", {
@@ -72,23 +48,24 @@ const Loader = _ref => {
     fill: "white"
   }), /*#__PURE__*/_react.default.createElement("polygon", {
     points: "50 13.397, 100 100, 0 100",
-    fill: "black",
-    transform: outerState.transform,
-    style: outerState.style
+    fill: "black"
   })), /*#__PURE__*/_react.default.createElement("circle", {
     cx: "50",
     cy: "71.1",
     r: "58",
     mask: "url(#spinnyMask1)",
     fill: color
-  }), /*#__PURE__*/_react.default.createElement("rect", {
+  }), /*#__PURE__*/_react.default.createElement("g", {
+    transform: "rotate(45 50 71)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
     height: "40.8",
     width: "40.8",
     x: "29.6",
     y: "50.6",
     fill: color,
-    transform: innerState === null || innerState === void 0 ? void 0 : innerState.transform,
-    style: innerState === null || innerState === void 0 ? void 0 : innerState.style
+    style: _objectSpread({
+      transformOrigin: '50px 71px'
+    }, spin(true))
   })));
 };
 

package/PaneView/PaneView.css

@@ -0,0 +1,31 @@
+.grevlingPaneView {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+    scroll-snap-type: x mandatory;
+
+    -ms-overflow-style: none; /* for Internet Explorer, Edge */
+    scrollbar-width: none; /* for Firefox */
+    overflow-y: scroll;
+}
+
+.grevlingPaneView::-webkit-scrollbar {
+    display: none; /* for Chrome, Safari, and Opera */
+}
+
+.grevlingPaneViewScrollyContent {
+    height: 100%;
+    width: 100%;
+    display: flex;
+}
+
+.grevlingPaneViewPane {
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+
+    max-height: 100%;
+    min-width: 100%;
+}

package/PaneView/PaneView.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaneView = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./PaneView.css");
+
+var _UseEffectOnce = _interopRequireDefault(require("../utils/UseEffectOnce"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+let startPaneRef;
+
+const PaneView = _ref => {
+  let {
+    children,
+    styleOverride,
+    startOnPane = 0
+  } = _ref;
+  (0, _UseEffectOnce.default)(() => {
+    setTimeout(() => startPaneRef && startPaneRef.scrollIntoView(), 1);
+  });
+
+  const renderPane = (content, i) => /*#__PURE__*/_react.default.createElement("div", {
+    ref: node => {
+      if (startOnPane === i) startPaneRef = node;
+    },
+    key: "pane".concat(i),
+    className: "grevlingPaneViewPane"
+  }, content);
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "grevlingPaneView",
+    style: styleOverride
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "grevlingPaneViewScrollyContent"
+  }, Array.isArray(children) ? children.map(renderPane) : renderPane(children)));
+};
+
+exports.PaneView = PaneView;

package/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "NumberSelect", {
     return _NumberSelect.NumberSelect;
   }
 });
+Object.defineProperty(exports, "PaneView", {
+  enumerable: true,
+  get: function get() {
+    return _PaneView.PaneView;
+  }
+});
 Object.defineProperty(exports, "RadioButton", {
   enumerable: true,
   get: function get() {
@@ -106,4 +112,6 @@ var _ToggleSwitch = require("./ToggleSwitch");
 
 var _NumberSelect = require("./NumberSelect/NumberSelect");
 
+var _PaneView = require("./PaneView/PaneView");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

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