grevlingui 0.1.5 → 0.1.7

package/Dots/Dots.css

@@ -0,0 +1,17 @@
+
+.dots {
+    display: grid;
+    grid-template-columns: repeat(3, 2rem);
+    grid-template-rows: repeat(3, 2rem);
+
+    /*transform: rotate(45deg);*/
+    height: 6rem;
+    width: 6rem;
+}
+
+.dots .dot {
+    width: 1.6rem;
+    height: 1.6rem;
+    border-radius: 100%;
+    background-color: black;
+}

package/Dots/Dots.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dots = void 0;
+
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./Dots.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Dots = _ref => {
+  var _grids$num;
+
+  let {
+    num
+  } = _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"
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    key: "dot-".concat(i)
+  });
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "dots"
+  }, [...Array(9).keys()].map(renderDot));
+};
+
+exports.Dots = Dots;

package/Loader/Loader.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Loader = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+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); }
+
+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 Loader = _ref => {
+  let {
+    color = 'black',
+    size = '100',
+    slowness = 0
+  } = _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 [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',
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "-2 -2 27.7 27.7",
+    height: size,
+    width: size
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    transform: "scale(.2) translate(10, -11)"
+  }, /*#__PURE__*/_react.default.createElement("mask", {
+    id: "spinnyMask1"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "-10",
+    y: "0",
+    width: "200",
+    height: "200",
+    fill: "white"
+  }), /*#__PURE__*/_react.default.createElement("polygon", {
+    points: "50 13.397, 100 100, 0 100",
+    fill: "black",
+    transform: outerState.transform,
+    style: outerState.style
+  })), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "50",
+    cy: "71.1",
+    r: "58",
+    mask: "url(#spinnyMask1)",
+    fill: color
+  }), /*#__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
+  })));
+};
+
+exports.Loader = Loader;

package/Menu/Menu.js

@@ -51,15 +51,14 @@ const Menu = _ref => {
       className: "button ".concat(left ? 'left' : ''),
       open: !!(show || onCloseClickOverride),
       setOpen: setShow,
-      transitionTime: transitionTime * .6,
-      stageDelay: transitionTime * .1,
+      transitionTime: transitionTime,
+      stageDelay: transitionTime * .3,
       color: color,
       backgroundColor: bgColor,
       styles: {
         zIndex: zIndex + 2,
         backgroundColor: bgColor
-      } // rounding={2}
-
+      }
     });
   }
   let container;

package/NumberSelect/NumberSelect.css

@@ -0,0 +1,112 @@
+
+.numberSelect {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    cursor: default;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+}
+
+.numberSelect .pointerContainer {
+    position: absolute;
+    left: 0;
+    right: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.numberSelect .pointer,
+.numberSelect .pointerShadow {
+    clip-path: polygon(50% 0, 100% 30%, 50% 100%, 0 30%);
+}
+
+.numberSelect .pointerShadow {
+    background-color: #33333390;
+}
+
+.numberSelect .hidden.inputModal {
+    display: none;
+}
+
+.numberSelect .inputModal {
+    z-index: 3;
+    position: absolute;
+    border-radius: 1rem;
+}
+
+.numberSelect .fade {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 5;
+    height: 100%;
+    pointer-events: none;
+}
+
+.numberSelect .fade.left {
+    left: 0;
+    border-radius: 1rem 0 0  1rem;
+}
+
+.numberSelect .fade.right {
+    right: 0;
+    border-radius: 0 1rem 1rem 0;
+}
+
+.numberSelect .inputModal.shadow {
+    box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.70);
+    -webkit-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.70);
+    -moz-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.70);
+}
+
+
+.numberSelect .scrollSelector::-webkit-scrollbar {
+    display: none;
+}
+
+.numberSelect .scrollSelector {
+    position: relative;
+    width: 90px;
+    overflow: auto;
+    padding: 1rem 0;
+
+    scroll-snap-type: x mandatory;
+}
+
+.numberSelect .thin.scrollSelector {
+    padding: 8px 0;
+}
+
+.numberSelect .options {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+}
+
+.numberSelect .option {
+    border-radius: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+}
+
+.numberSelect .clickOutsideDetector {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+}

package/NumberSelect/NumberSelect.js

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberSelect = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./NumberSelect.css");
+
+var _UseEffectPartialDeps = _interopRequireDefault(require("../utils/UseEffectPartialDeps"));
+
+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; }
+
+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 _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 = [];
+
+const NumberSelect = _ref => {
+  let {
+    value,
+    setValue,
+    flip,
+    thin,
+    min = 1,
+    max = 10,
+    shadow,
+    size = 40,
+    color = 'white',
+    numberBgColor = '#663399FF',
+    selectorColor = '#1E90FFFF',
+    pointerColor = '#6c9fff',
+    pointerShadowColor = '#33333390',
+    top = -16
+  } = _ref;
+  const [showInput, setShowInput] = (0, _react.useState)(false);
+  const options = [...Array(Math.max(max - min + 1, 1)).keys()].map(v => v + min);
+
+  const getExactValue = () => scrollRef.current.scrollLeft / size + min;
+
+  (0, _UseEffectPartialDeps.default)(() => {
+    if (!showInput) return;
+    const ref = refs[value + 2 - min];
+    if (!ref) return;
+    ref.scrollIntoView();
+  }, [showInput]);
+  if (max - min === 0) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  const optionStyle = {
+    width: "".concat(size, "px"),
+    height: "".concat(size - 1, "px"),
+    fontSize: "".concat(size * .6, "px"),
+    borderRadius: "".concat(size, "px"),
+    paddingBottom: '1px'
+  };
+
+  const renderFade = (side, direction) => /*#__PURE__*/_react.default.createElement("div", {
+    className: "fade ".concat(side),
+    style: {
+      width: "".concat(size * .8, "px"),
+      backgroundImage: "linear-gradient(to ".concat(direction, ", ").concat(selectorColor, ", ").concat(selectorColor, " , #00000000)")
+    }
+  });
+
+  const pointerContainerStyle = flip ? {
+    bottom: "-".concat(size * .4, "px"),
+    transform: 'rotate(180deg)'
+  } : {
+    top: "-".concat(size / 2, "px")
+  };
+
+  const renderModal = () => {
+    if (!showInput) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    const optionsWidth = (options.length + 2) * size;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showInput && /*#__PURE__*/_react.default.createElement("div", {
+      className: "clickOutsideDetector",
+      onClick: () => {
+        setShowInput(false);
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "inputModal ".concat(showInput ? '' : 'hidden', " ").concat(shadow ? 'shadow' : ''),
+      style: {
+        backgroundColor: selectorColor,
+        top: "".concat(top + (thin ? 8 : 0), "px")
+      }
+    }, renderFade('left', 'right'), renderFade('right', 'left'), /*#__PURE__*/_react.default.createElement("div", {
+      className: "pointerContainer",
+      style: pointerContainerStyle
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "pointerShadow",
+      style: {
+        backgroundColor: pointerShadowColor,
+        width: "".concat(size / 2, "px"),
+        height: "".concat(size * 0.8, "px"),
+        marginTop: "".concat(size / 7, "px")
+      }
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "pointerContainer",
+      style: pointerContainerStyle
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "pointer",
+      style: {
+        backgroundColor: pointerColor,
+        width: "".concat(size / 2, "px"),
+        height: "".concat(size * 0.8, "px")
+      }
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "scrollSelector ".concat(thin ? 'thin' : ''),
+      ref: scrollRef,
+      style: {
+        width: "".concat(size * 3, "px")
+      },
+      onScroll: () => {
+        const centerNumber = Math.round(getExactValue());
+        if (value !== centerNumber) setValue(centerNumber);
+      } // onTouchEnd={onScrollEnd}
+
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "options",
+      style: {
+        width: "".concat(optionsWidth, "px")
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "option",
+      style: optionStyle,
+      ref: node => 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,
+      className: 'option'
+    }, n)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "option",
+      style: optionStyle,
+      ref: node => refs[options.length + 1] = node
+    })))));
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "numberSelect",
+    style: _objectSpread(_objectSpread({}, optionStyle), {}, {
+      color,
+      backgroundColor: numberBgColor
+    }),
+    onClick: e => {
+      if (e.target.classList[0] === 'clickOutsideDetector') return;
+      setShowInput(true);
+    }
+  }, value, renderModal());
+};
+
+exports.NumberSelect = NumberSelect;

package/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "MenuButton", {
     return _MenuButton.MenuButton;
   }
 });
+Object.defineProperty(exports, "NumberSelect", {
+  enumerable: true,
+  get: function get() {
+    return _NumberSelect.NumberSelect;
+  }
+});
 Object.defineProperty(exports, "RadioButton", {
   enumerable: true,
   get: function get() {
@@ -45,6 +51,22 @@ Object.defineProperty(exports, "ToggleSwitch", {
     return _ToggleSwitch.ToggleSwitch;
   }
 });
+Object.defineProperty(exports, "UseEffectOnce", {
+  enumerable: true,
+  get: function get() {
+    return _UseEffectOnce.default;
+  }
+});
+Object.defineProperty(exports, "UseEffectPartialDeps", {
+  enumerable: true,
+  get: function get() {
+    return _UseEffectPartialDeps.default;
+  }
+});
+
+var _UseEffectOnce = _interopRequireDefault(require("./utils/UseEffectOnce"));
+
+var _UseEffectPartialDeps = _interopRequireDefault(require("./utils/UseEffectPartialDeps"));
 
 var _Menu = require("./Menu/Menu");
 
@@ -56,4 +78,8 @@ var _Radio = require("./Radio");
 
 var _CheckBox = require("./CheckBox");
 
-var _ToggleSwitch = require("./ToggleSwitch");
+var _ToggleSwitch = require("./ToggleSwitch");
+
+var _NumberSelect = require("./NumberSelect/NumberSelect");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

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

package/utils/UseEffectOnce.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+const useEffectOnce = effect => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useEffect)(effect, []);
+};
+
+var _default = useEffectOnce;
+exports.default = _default;

package/utils/UseEffectPartialDeps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+const useEffectPartialDeps = (effect, deps) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  (0, _react.useEffect)(effect, deps);
+};
+
+var _default = useEffectPartialDeps;
+exports.default = _default;