flipper-ui 0.25.3 → 0.25.4

package/core/PinInput.d.ts

@@ -7,6 +7,9 @@ interface PinInputGridProps {
     validationResult: boolean | undefined;
     isValidating: boolean;
     size: 'small' | 'large';
+    style?: React.CSSProperties;
+    inputProps?: React.CSSProperties;
+    variant?: 'outlined' | 'standard';
 }
 declare const PinInput: React.FC<PinInputGridProps>;
 export default PinInput;

package/core/PinInput.js

@@ -1,24 +1,46 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+function _templateObject() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var Container = _styledComponents["default"].div(_templateObject());
+
 var removeValuesFromArray = function removeValuesFromArray(valuesArray, value) {
   var valueIndex = valuesArray.findIndex(function (entry) {
     return entry === value;
@@ -42,7 +64,10 @@ var PinInput = function PinInput(_ref) {
       onPinChanged = _ref.onPinChanged,
       validationResult = _ref.validationResult,
       isValidating = _ref.isValidating,
-      size = _ref.size;
+      size = _ref.size,
+      styleProps = _ref.style,
+      inputProps = _ref.inputProps,
+      variant = _ref.variant;
   var inputRefs = (0, _react.useRef)([]);
 
   var changePinFocus = function changePinFocus(pinIndex) {
@@ -123,31 +148,43 @@ var PinInput = function PinInput(_ref) {
     }
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", null, Array.from({
+  var useStyleProps = function useStyleProps() {
+    var style = _objectSpread({
+      width: size === 'small' ? '40px' : '40px',
+      height: size === 'small' ? '30px' : '40px',
+      marginInline: size === 'small' ? '5px' : '10px'
+    }, styleProps);
+
+    return style;
+  };
+
+  var useInputProps = function useInputProps() {
+    var style = _objectSpread({
+      width: size === 'small' ? '40px' : '45px',
+      textAlign: 'center',
+      fontWeight: 'bold',
+      fontSize: size === 'small' ? '16px' : '20px',
+      padding: 'auto'
+    }, inputProps);
+
+    return style;
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Container, null, Array.from({
     length: pinLength
   }, function (_, index) {
     return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
       disabled: isValidating,
-      variant: "outlined",
+      variant: variant || 'outlined',
       onKeyDown: function onKeyDown(event) {
         return _onKeyDown(event, index);
       },
       onPaste: onPaste,
       color: "primary",
       error: validationResult,
-      style: {
-        width: size === 'small' ? '40px' : '40px',
-        height: size === 'small' ? '30px' : '40px',
-        marginInline: size === 'small' ? '5px' : '10px'
-      },
+      style: useStyleProps(),
       InputProps: {
-        style: {
-          width: size === 'small' ? '40px' : '45px',
-          textAlign: 'center',
-          fontWeight: 'bold',
-          fontSize: size === 'small' ? '16px' : '20px',
-          padding: 'auto'
-        }
+        style: useInputProps()
       },
       inputRef: function inputRef(el) {
         inputRefs.current[index] = el;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.25.3",
+    "version": "0.25.4",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.vercel.app",

package/stories/PinInput.stories.js

@@ -13,17 +13,46 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _PinInput = _interopRequireDefault(require("../core/PinInput"));
 
 var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _templateObject2() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n    margin-top: 3rem;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n    margin-bottom: 2rem;\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
 var _default = {
   title: 'PinInput',
   component: _PinInput["default"]
 };
 exports["default"] = _default;
+
+var ValidateContainer = _styledComponents["default"].div(_templateObject());
+
+var ButtonContainer = _styledComponents["default"].div(_templateObject2());
+
 var PIN_LENGTH = 6;
 
 var Default = function Default() {
@@ -62,19 +91,20 @@ var Default = function Default() {
     setIsValidating(false);
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, "Valid pin: 123123"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_PinInput["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ValidateContainer, null, /*#__PURE__*/_react["default"].createElement("span", null, "Valid pin: 123123")), /*#__PURE__*/_react["default"].createElement(_PinInput["default"], {
     pin: pin,
     setPin: setPin,
     onPinChanged: onPinChanged,
     pinLength: PIN_LENGTH,
     validationResult: hasError,
     isValidating: isValidating,
-    size: "small"
-  }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    size: "small",
+    variant: "outlined"
+  }), /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     onClick: function onClick() {
       handleValidation();
     }
-  }, "Validate"));
+  }, "Validate")));
 };
 
 exports.Default = Default;
@@ -115,7 +145,7 @@ var Large = function Large() {
     setIsValidating(false);
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, "Valid pin: 123123"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_PinInput["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ValidateContainer, null, /*#__PURE__*/_react["default"].createElement("span", null, "Valid pin: 123123")), /*#__PURE__*/_react["default"].createElement(_PinInput["default"], {
     pin: pin,
     setPin: setPin,
     onPinChanged: onPinChanged,
@@ -123,11 +153,11 @@ var Large = function Large() {
     validationResult: hasError,
     isValidating: isValidating,
     size: "large"
-  }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     onClick: function onClick() {
       handleValidation();
     }
-  }, "Validate"));
+  }, "Validate")));
 };
 
 exports.Large = Large;