flipper-ui 0.25.2 → 0.25.5

package/core/PinInput.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface PinInputGridProps {
+    pin: Array<number | undefined>;
+    setPin: (pin: Array<number | undefined>) => void;
+    onPinChanged: (pinEntry: number | undefined, index: number) => void;
+    pinLength: number;
+    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

@@ -0,0 +1,202 @@
+"use strict";
+
+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;
+  });
+
+  if (valueIndex === -1) {
+    return;
+  }
+
+  valuesArray.splice(valueIndex, 1);
+};
+
+var PIN_MIN_VALUE = 0;
+var PIN_MAX_VALUE = 9;
+var BACKSPACE_KEY = 'Backspace';
+
+var PinInput = function PinInput(_ref) {
+  var pinLength = _ref.pinLength,
+      pin = _ref.pin,
+      setPin = _ref.setPin,
+      onPinChanged = _ref.onPinChanged,
+      validationResult = _ref.validationResult,
+      isValidating = _ref.isValidating,
+      size = _ref.size,
+      styleProps = _ref.style,
+      inputProps = _ref.inputProps,
+      variant = _ref.variant;
+  var inputRefs = (0, _react.useRef)([]);
+
+  var changePinFocus = function changePinFocus(pinIndex) {
+    var ref = inputRefs.current[pinIndex];
+
+    if (ref) {
+      ref.focus();
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    changePinFocus(0);
+  }, [isValidating]);
+
+  var onPaste = function onPaste(event) {
+    var pastedValue = event.clipboardData.getData('text/plain');
+    var splitValues = pastedValue.split('');
+    var intValues = [];
+
+    var _iterator = _createForOfIteratorHelper(splitValues),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var value = _step.value;
+        intValues.push(parseInt(value));
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    setPin(intValues);
+    changePinFocus(intValues.length - 1);
+  };
+
+  var _onChange = function onChange(event, index) {
+    if (event.target.value.length > 1) {
+      return;
+    }
+
+    var previousValue = event.target.defaultValue;
+    var valuesArray = event.target.value.split('');
+    removeValuesFromArray(valuesArray, previousValue);
+    var value = valuesArray.pop();
+
+    if (!value) {
+      return;
+    }
+
+    var pinNumber = Number(value.trim());
+
+    if (isNaN(pinNumber) || value.length === 0) {
+      return;
+    }
+
+    if (pinNumber >= PIN_MIN_VALUE && pinNumber <= PIN_MAX_VALUE) {
+      onPinChanged(pinNumber, index);
+
+      if (index < pinLength - 1) {
+        changePinFocus(index + 1);
+      }
+    }
+  };
+
+  var _onKeyDown = function onKeyDown(event, index) {
+    var keyboardKeyCode = event.nativeEvent.code;
+
+    if (keyboardKeyCode !== BACKSPACE_KEY) {
+      return;
+    }
+
+    if (pin[index] === undefined) {
+      changePinFocus(index - 1);
+    } else {
+      onPinChanged(undefined, index);
+    }
+  };
+
+  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: variant || 'outlined',
+      onKeyDown: function onKeyDown(event) {
+        return _onKeyDown(event, index);
+      },
+      onPaste: onPaste,
+      color: "primary",
+      error: validationResult,
+      style: useStyleProps(),
+      InputProps: {
+        style: useInputProps()
+      },
+      inputRef: function inputRef(el) {
+        inputRefs.current[index] = el;
+      },
+      key: index,
+      onChange: function onChange(event) {
+        _onChange(event, index);
+      },
+      value: pin[index] || ''
+    });
+  })));
+};
+
+var _default = PinInput;
+exports["default"] = _default;

package/core/TextField.d.ts

@@ -30,6 +30,7 @@ export interface TextFieldProps extends DefaultProps {
     onClear?: () => void;
     onHelperClick?: () => void;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     onKeyUp?: (event: KeyboardEvent) => void;
     onKeyDown?: (event: KeyboardEvent) => void;

package/index.d.ts

@@ -57,3 +57,4 @@ export { default as Tooltip } from './core/Tooltip';
 export { default as Tree } from './core/Tree';
 export { default as Typography } from './core/Typography';
 export { default as Zoom } from './core/Zoom';
+export { default as PinInput } from './core/PinInput';

package/index.js

@@ -359,6 +359,12 @@ Object.defineProperty(exports, "Zoom", {
     return _Zoom["default"];
   }
 });
+Object.defineProperty(exports, "PinInput", {
+  enumerable: true,
+  get: function get() {
+    return _PinInput["default"];
+  }
+});
 
 var _Advertise = _interopRequireDefault(require("./core/Advertise"));
 
@@ -476,4 +482,6 @@ var _Tree = _interopRequireDefault(require("./core/Tree"));
 
 var _Typography = _interopRequireDefault(require("./core/Typography"));
 
-var _Zoom = _interopRequireDefault(require("./core/Zoom"));
+var _Zoom = _interopRequireDefault(require("./core/Zoom"));
+
+var _PinInput = _interopRequireDefault(require("./core/PinInput"));

package/package.json

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

package/stories/PinInput.stories.js

@@ -0,0 +1,163 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Large = exports.Default = exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+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() {
+  var _useState = (0, _react.useState)(new Array(PIN_LENGTH)),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      pin = _useState2[0],
+      setPin = _useState2[1];
+
+  var onPinChanged = function onPinChanged(pinEntry, index) {
+    var newPin = (0, _toConsumableArray2["default"])(pin);
+    newPin[index] = pinEntry;
+    setPin(newPin);
+  };
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      hasError = _useState4[0],
+      setHasError = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      isValidating = _useState6[0],
+      setIsValidating = _useState6[1];
+
+  var handleValidation = function handleValidation() {
+    setIsValidating(true);
+
+    if (pin.join('') !== '123123') {
+      setHasError(true);
+      setPin(new Array(PIN_LENGTH));
+    } else {
+      setHasError(false);
+      alert('PIN is correct');
+    }
+
+    setIsValidating(false);
+  };
+
+  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",
+    variant: "outlined"
+  }), /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: function onClick() {
+      handleValidation();
+    }
+  }, "Validate")));
+};
+
+exports.Default = Default;
+
+var Large = function Large() {
+  var _useState7 = (0, _react.useState)(new Array(PIN_LENGTH)),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      pin = _useState8[0],
+      setPin = _useState8[1];
+
+  var onPinChanged = function onPinChanged(pinEntry, index) {
+    var newPin = (0, _toConsumableArray2["default"])(pin);
+    newPin[index] = pinEntry;
+    setPin(newPin);
+  };
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      hasError = _useState10[0],
+      setHasError = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      isValidating = _useState12[0],
+      setIsValidating = _useState12[1];
+
+  var handleValidation = function handleValidation() {
+    setIsValidating(true);
+
+    if (pin.join('') !== '123123') {
+      setPin(new Array(PIN_LENGTH));
+      setHasError(true);
+    } else {
+      setHasError(false);
+      alert('PIN is correct');
+    }
+
+    setIsValidating(false);
+  };
+
+  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: "large"
+  }), /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: function onClick() {
+      handleValidation();
+    }
+  }, "Validate")));
+};
+
+exports.Large = Large;