grevlingui 0.1.4 → 0.1.5

package/Buttons/MenuButton.js

@@ -23,10 +23,10 @@ const MenuButton = _ref => {
   let {
     open,
     setOpen,
-    transitionTime,
-    c,
+    transitionTime = 300,
+    stageDelay = 100,
+    color,
     backgroundColor,
-    stageDelay,
     styles,
     className
   } = _ref;
@@ -41,7 +41,7 @@ const MenuButton = _ref => {
         transitionDelay: open && center || !(open || center) ? '' : "".concat(stageDelay, "ms")
       },
       d: open ? d2 : d1,
-      fill: c,
+      fill: color,
       className: 'mainShape'
     });
   };

package/Buttons/SettingsButton.js

@@ -22,9 +22,9 @@ const SettingsButton = _ref => {
     open,
     setOpen,
     transitionTime = 300,
-    c,
+    stageDelay = 100,
+    color = 'white',
     backgroundColor,
-    stageDelay,
     styles,
     className,
     rounding = 7
@@ -40,19 +40,19 @@ const SettingsButton = _ref => {
     x: animate && open ? 40 : 0,
     y: "41",
     height: "18",
-    fill: c !== null && c !== void 0 ? c : 'white',
+    fill: color,
     width: animate && open ? 20 : 100,
     transform: "rotate(".concat(deg, " 50 50)"),
     rx: rounding
   });
 
-  const getCircle = (r, color) => /*#__PURE__*/_react.default.createElement("circle", {
+  const getCircle = (r, c) => /*#__PURE__*/_react.default.createElement("circle", {
     style: {
       transitionProperty: 'r',
       transitionDuration: "".concat(transitionTime, "ms"),
       transitionDelay: open ? "".concat(stageDelay, "ms") : ''
     },
-    fill: color !== null && color !== void 0 ? color : 'black',
+    fill: c !== null && c !== void 0 ? c : 'black',
     cx: "50",
     cy: "50",
     r: r
@@ -80,7 +80,7 @@ const SettingsButton = _ref => {
   }), getCircle(rArray[0])), /*#__PURE__*/_react.default.createElement("g", {
     mask: "url(#gearMask)",
     id: "settingsButtonShapes"
-  }, getRekt(0, true), getRekt(45), getRekt(90, true), getRekt(135), getCircle(rArray[1], c !== null && c !== void 0 ? c : 'white'))));
+  }, getRekt(0, true), getRekt(45), getRekt(90, true), getRekt(135), getCircle(rArray[1], color))));
 };
 
 exports.SettingsButton = SettingsButton;

package/Menu/Menu.js

@@ -30,12 +30,12 @@ const Menu = _ref => {
     children,
     onCloseClickOverride,
     shouldCloseOnClick,
-    transitionTime,
-    zIndex,
+    transitionTime = 300,
+    zIndex = 2,
     color,
     bgColor,
     menuBgColor,
-    backdropColor,
+    backdropColor = '#e3e6e850',
     settings,
     renderButton,
     className,
@@ -44,55 +44,50 @@ const Menu = _ref => {
     left
   } = _ref;
   const [show, setShow] = (0, _react.useState)(false);
-  const tt = transitionTime !== null && transitionTime !== void 0 ? transitionTime : 400,
-        zi = zIndex !== null && zIndex !== void 0 ? zIndex : 2,
-        c = color,
-        bgc = bgColor,
-        bdc = backdropColor !== null && backdropColor !== void 0 ? backdropColor : '#e3e6e850';
   let button;
-  if (renderButton) button = renderButton(show, setShow, tt, c, bgc);else {
+  if (renderButton) button = renderButton(show, setShow, transitionTime, color, bgColor);else {
     const Button = settings ? _SettingsButton.SettingsButton : _MenuButton.MenuButton;
     button = /*#__PURE__*/_react.default.createElement(Button, {
       className: "button ".concat(left ? 'left' : ''),
       open: !!(show || onCloseClickOverride),
       setOpen: setShow,
-      transitionTime: tt * .6,
-      stageDelay: tt * .1,
-      c: c,
+      transitionTime: transitionTime * .6,
+      stageDelay: transitionTime * .1,
+      color: color,
       backgroundColor: bgColor,
       styles: {
-        zIndex: zi + 2,
-        backgroundColor: bgc
+        zIndex: zIndex + 2,
+        backgroundColor: bgColor
       } // rounding={2}
 
     });
   }
   let container;
   const style = {
-    zIndex: zi + 1,
-    color: c,
-    backgroundColor: menuBgColor !== null && menuBgColor !== void 0 ? menuBgColor : bgc
+    zIndex: zIndex + 1,
+    color,
+    backgroundColor: menuBgColor !== null && menuBgColor !== void 0 ? menuBgColor : bgColor
   };
   if (fader) container = /*#__PURE__*/_react.default.createElement("div", {
     className: "xburgerMenu fader ".concat(show ? ' show' : '', " ").concat(className),
     onClick: e => shouldCloseOnClick && shouldCloseOnClick(e) && setShow(false),
     style: _objectSpread(_objectSpread({}, style), {}, {
-      transition: "opacity ".concat(tt, "ms ease-out")
+      transition: "opacity ".concat(transitionTime, "ms ease-out")
     })
   }, children);else container = /*#__PURE__*/_react.default.createElement("div", {
     className: "xburgerMenu slider ".concat(fullSlider ? '' : 'partial', " ").concat(show ? ' show' : '', " ").concat(left ? 'left' : '', " ").concat(className),
     onClick: e => shouldCloseOnClick && shouldCloseOnClick(e) && setShow(false),
     style: _objectSpread(_objectSpread({}, style), {}, {
-      transition: "left ".concat(tt, "ms ease-out, right ").concat(tt, "ms ease-out")
+      transition: "left ".concat(transitionTime, "ms ease-out, right ").concat(transitionTime, "ms ease-out")
     })
   }, children);
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, !fullSlider && !fader && /*#__PURE__*/_react.default.createElement("div", {
     className: "xburgerTouchOutsideSensor ".concat(show ? ' show' : ''),
     onClick: () => setShow(false),
     style: {
-      transition: "opacity ".concat(tt, "ms ease-out"),
-      zIndex: zi,
-      backgroundColor: bdc
+      transition: "opacity ".concat(transitionTime, "ms ease-out"),
+      zIndex,
+      backgroundColor: backdropColor
     }
   }), button, container);
 };

package/README.md

@@ -12,6 +12,70 @@ Gui elements for basic mobile web app stuff
 - CheckBox
 - ToggleSwitch
 
-### Usage and examples:
+## Props:
 
-todo
+Some are passed down to child components
+
+### Menu
+- onCloseClickOverride
+  - callback function allowing reuse of close menu button
+- shouldCloseOnClick 
+  - callback function to "validete" whether the click should cause the menu to close 
+- transitionTime
+  - default 400
+- zIndex
+  - the lowest z-index, there are different levels
+  - default 2
+- color
+- bgColor
+- menuBgColor 
+  - overrides bgColor
+- backdropColor
+  - color for the backdrop on partial slider menu
+  - default #e3e6e850
+- settings 
+  - boolean, whether to use settings icon
+  - default falsy
+- renderButton
+  - render function for custom button 
+- className
+  - extra class names for the menu
+- fullSlider
+  - boolean, whether the slider menu should cover the entire available width
+  - default falsy
+- fader
+  - boolean, whether the menu should fade instead of sliding in from the side
+- left
+  - boolean, makes the menu slide in from the left instead of the right
+  - default falsy
+
+### SettingsButton / MenuButton
+- open
+  - boolean, whether to display as a close button
+- setOpen
+  - callback function to set the open state
+- transitionTime
+  - in ms
+  - default 300
+- stageDelay
+  - delay between the 2 "stages" in the animation
+  - default 100
+- color
+  - default 'white'
+- backgroundColor
+- styles
+  - style override for the button
+- className
+  - extra class names for the button
+- rounding
+  - SettingsButton only
+  - how rounded the icon should be
+
+### RadioButton
+  - todo
+### RadioGroup
+  - todo
+### CheckBox
+  - todo
+### ToggleSwitch
+  - todo

package/package.json

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