grevlingui 0.1.11 → 0.1.13

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/NumberSelect/NumberSelect.js

@@ -13,8 +13,6 @@ require("./NumberSelect.css");
 
 var _UseEffectPartialDeps = _interopRequireDefault(require("../utils/UseEffectPartialDeps"));
 
-var _UseEffectOnce = _interopRequireDefault(require("../utils/UseEffectOnce"));
-
 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); }
@@ -27,10 +25,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 scrollRef = /*#__PURE__*/_react.default.createRef();
-
-const refs = [];
-let timeout1, timeout2;
+const cosmos = {};
 
 const NumberSelect = _ref => {
   let {
@@ -49,24 +44,34 @@ const NumberSelect = _ref => {
     pointerShadowColor = '#33333390',
     top = -16
   } = _ref;
+  const [id] = (0, _react.useState)("id-".concat(Math.random()));
+  const [rendered, setRendered] = (0, _react.useState)(false);
   const [showInput, setShowInput] = (0, _react.useState)(false);
   const [hidden, setHidden] = (0, _react.useState)(false);
-  console.log('');
-  console.log('showInput: ', showInput);
-  console.log('hidden: ', hidden);
+  const [timeout1, setTimeout1] = (0, _react.useState)(0);
+  const [timeout2, setTimeout2] = (0, _react.useState)(0);
   const options = [...Array(Math.max(max - min + 1, 1)).keys()].map(v => v + min);
-
-  const getExactValue = () => scrollRef.current.scrollLeft / size + min;
-
+  let cosmoState = cosmos[id];
+  (0, _react.useLayoutEffect)(() => {
+    cosmoState = cosmos[id] = {
+      refs: []
+    };
+    setRendered(true);
+  }, []);
   (0, _UseEffectPartialDeps.default)(() => {
     clearTimeout(timeout1);
-    if (showInput) setHidden(false);else timeout1 = setTimeout(() => setHidden(true), 320);
+    if (showInput) setHidden(false);else setTimeout1(setTimeout(() => setHidden(true), 320));
   }, [showInput]);
-  (0, _UseEffectOnce.default)(() => {
-    const ref = refs[value + 2 - min];
+  (0, _UseEffectPartialDeps.default)(() => {
+    if (!rendered) return;
+    const ref = cosmoState.refs[value + 2 - min];
     if (!ref) return;
     ref.scrollIntoView();
-  });
+  }, [rendered]);
+  if (!cosmoState) return /*#__PURE__*/_react.default.createElement("div", null);
+
+  const getExactValue = () => cosmoState.scrollRef.scrollLeft / size + min;
+
   if (max - min === 0) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   const optionStyle = {
     width: "".concat(size, "px"),
@@ -103,7 +108,7 @@ const NumberSelect = _ref => {
     },
     onTouchEnd: () => {
       clearTimeout(timeout2);
-      timeout2 = setTimeout(() => setShowInput(false), 800);
+      setTimeout2(setTimeout(() => setShowInput(false), 800));
     }
   }, renderFade('left', 'right'), renderFade('right', 'left'), /*#__PURE__*/_react.default.createElement("div", {
     className: "pointerContainer",
@@ -128,7 +133,7 @@ const NumberSelect = _ref => {
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "scrollSelector ".concat(thin ? 'thin' : ''),
-    ref: scrollRef,
+    ref: node => cosmoState.scrollRef = node,
     style: {
       width: "".concat(size * 3, "px")
     },
@@ -144,18 +149,18 @@ const NumberSelect = _ref => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "option",
     style: optionStyle,
-    ref: node => refs[0] = node
+    ref: node => cosmoState.refs[0] = node
   }), options.map((n, i) => /*#__PURE__*/_react.default.createElement("div", {
     style: _objectSpread(_objectSpread({}, optionStyle), {}, {
       backgroundColor: value === n ? numberBgColor : ''
     }),
     key: n,
-    ref: node => refs[i + 1] = node,
+    ref: node => cosmoState.refs[i + 1] = node,
     className: 'option'
   }, n)), /*#__PURE__*/_react.default.createElement("div", {
     className: "option",
     style: optionStyle,
-    ref: node => refs[options.length + 1] = node
+    ref: node => cosmoState.refs[options.length + 1] = node
   }))));
 
   return /*#__PURE__*/_react.default.createElement("div", {

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.11",
+  "version": "0.1.13",
   "description": "GUI elements",
   "main": "index.jsx",
   "repository": {