@s-ui/react-atom-pin-input - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

 # CHANGELOG
 
+# 1.2.0 (2021-09-03)
+
+
+### Features
+
+* **components/atom/pinInput:** ADD posibility to work with arrays on value and defaultValue ([301c0bd](https://github.com/SUI-Components/sui-components/commit/301c0bd147baf58ec6422d9a4d8f7b4f6637918d))
+* **components/atom/pinInput:** Applied suggested changes ([c9aff6c](https://github.com/SUI-Components/sui-components/commit/c9aff6ce03d717c839c95980ddf0b1c9b9cf0cb1))
+* **components/atom/pinInput:** Changed linter ([ce42d7a](https://github.com/SUI-Components/sui-components/commit/ce42d7a9cd01c2cc15c0a78dbf4468d7a75795ca))
+* **components/atom/pinInput:** Cleared console log and order props ([d4e1bca](https://github.com/SUI-Components/sui-components/commit/d4e1bca36228f3a9df6e254aab89a65cb0ba02cd))
+* **components/atom/pinInput:** Fixed linter ([1e63ce5](https://github.com/SUI-Components/sui-components/commit/1e63ce5e43eafea9369c102e1b697201c5b92936))
+* **components/atom/pinInput:** Fixed sass warning slash div ([504bca3](https://github.com/SUI-Components/sui-components/commit/504bca3968426db338f5a80a7e225c655498dbf7))
+* **Root:** Added validationCode molecule and fixed some demo texts in pinInput ([dcf9868](https://github.com/SUI-Components/sui-components/commit/dcf9868a06a2a924f01ced391a1702d040be1e37))
+
+
+
 # 1.1.0 (2021-08-27)
@@ -4,0 +19,0 @@

lib/config.js

@@ -14,3 +14,3 @@ export var BASE_CLASSNAME = 'sui-PinInput';
   SUCCESS: 'success',
-  WARNING: 'warning'
+  ALERT: 'alert'
 };
@@ -37,2 +37,14 @@ export var MASK = {
   };
+};
+export var getValueType = function getValueType(_ref2) {
+  var value = _ref2.value,
+      defaultValue = _ref2.defaultValue;
+  var val = value || defaultValue;
+  var valueType = typeof val;
+
+  if (typeof val === 'object' && val instanceof Array) {
+    valueType = 'array';
+  }
+
+  return valueType;
 };

lib/index.js

 import PinInput from './PinInput';
 import PinInputField from './PinInputField';
-import { MASK, SIZES, STATUS } from './config';
+import { MASK, SIZES, STATUS, getValueType } from './config';
 export default PinInput;
-export { PinInputField, MASK as pinInputMask, SIZES as pinInputSizes, STATUS as pinInputStatus };
+export { PinInputField, MASK as pinInputMask, SIZES as pinInputSizes, STATUS as pinInputStatus, getValueType as getPinInputValueType };

lib/PinInput.js

 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "defaultValue", "disabled", "inputMode", "isOneTimeCode", "length", "mask", "onChange", "placeholder", "isPassword", "size", "status", "value"];
+var _excluded = ["children", "defaultValue", "disabled", "inputMode", "isOneTimeCode", "isPassword", "length", "mask", "onChange", "placeholder", "size", "status", "value"];
 import PropTypes from 'prop-types';
@@ -23,2 +23,4 @@ import { forwardRef, useCallback, useEffect, useRef } from 'react';
       isOneTimeCode = _ref$isOneTimeCode === void 0 ? true : _ref$isOneTimeCode,
+      _ref$isPassword = _ref.isPassword,
+      isPassword = _ref$isPassword === void 0 ? false : _ref$isPassword,
       _ref$length = _ref.length,
@@ -30,4 +32,2 @@ length = _ref$length === void 0 ? 6 : _ref$length,
       placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
-      _ref$isPassword = _ref.isPassword,
-      isPassword = _ref$isPassword === void 0 ? false : _ref$isPassword,
       _ref$size = _ref.size,
@@ -55,6 +55,7 @@ size = _ref$size === void 0 ? SIZES.MEDIUM : _ref$size,
   useUpdateEffect(function () {
+    var innerValue = typeof value === 'string' ? value.split('') : value || [];
     dispatch(pinInputActions.setValue({
-      innerValue: value ? value.split('') : []
+      innerValue: innerValue
     }));
-  }, [value, dispatch]);
+  }, ["" + value, dispatch]);
   useEffect(function () {
@@ -100,4 +101,4 @@ dispatch(pinInputActions.setDisabled({
       isPassword: isPassword,
+      mask: reducerStore.mask,
       placeholder: placeholder,
-      mask: reducerStore.mask,
       setFocus: setFocus,
@@ -104,0 +105,0 @@ size: size,

lib/PinInputField.js

@@ -42,5 +42,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
       getIndex = _usePinInputContext.getIndex,
+      inputMode = _usePinInputContext.inputMode,
       isOneTimeCode = _usePinInputContext.isOneTimeCode,
-      inputMode = _usePinInputContext.inputMode,
       isPassword = _usePinInputContext.isPassword,
+      mask = _usePinInputContext.mask,
       _usePinInputContext$o = _usePinInputContext.onChange,
@@ -53,3 +54,2 @@ onChange = _usePinInputContext$o === void 0 ? function () {
       size = _usePinInputContext.size,
-      mask = _usePinInputContext.mask,
       status = _usePinInputContext.status,
@@ -56,0 +56,0 @@ _usePinInputContext$v = _usePinInputContext.value,

lib/reducer/reducer.js

 import _extends from "@babel/runtime/helpers/esm/extends";
-import { MASK, valueChecker } from '../config';
+import { MASK, valueChecker, getValueType } from '../config';
 import PIN_INPUT_ACTION_TYPES from './actionTypes';
@@ -15,3 +15,9 @@ import { debounce } from '@s-ui/js/lib/function';
 
-  var innerValue = value !== undefined ? value.split('') : defaultValue.split('');
+  var valueType = getValueType({
+    value: value,
+    defaultValue: defaultValue
+  });
+  var arrayValue = typeof value === 'string' ? value.split('') : value;
+  var arrayDefaultValue = typeof defaultValue === 'string' ? defaultValue.split('') : defaultValue;
+  var innerValue = value !== undefined ? arrayValue : arrayDefaultValue;
   innerValue = valueChecker({
@@ -22,2 +28,3 @@ mask: mask,
   return {
+    valueType: valueType,
     focusPosition: 0,
@@ -49,7 +56,9 @@ mask: mask,
     var innerValue = state.innerValue,
-        focusPosition = state.focusPosition;
+        focusPosition = state.focusPosition,
+        valueType = state.valueType;
     typeof onChange === 'function' && onChange(event, {
-      value: innerValue.filter(Boolean).join(''),
+      value: valueType === 'string' ? innerValue.filter(Boolean).join('') : innerValue,
       key: innerValue[focusPosition],
-      index: focusPosition
+      index: focusPosition,
+      innerValue: innerValue
     });
@@ -60,2 +69,4 @@ };
 export var pinInputReducer = function pinInputReducer(state, _ref2) {
+  var _payload$innerValue;
+
   var actionType = _ref2.actionType,
@@ -95,5 +106,7 @@ payload = _ref2.payload;
 
-      if (isValidPayloadInnerValue) {
+      if (isValidPayloadInnerValue && !((innerValue == null ? void 0 : innerValue.length) === (payload == null ? void 0 : (_payload$innerValue = payload.innerValue) == null ? void 0 : _payload$innerValue.length) && innerValue.every(function (value, index) {
+        return value === payload.innerValue[index];
+      }))) {
         nextState = _extends({}, state, {
-          innerValue: innerValue !== payload.innerValue && [].concat(payload.innerValue)
+          innerValue: [].concat(payload.innerValue)
         });
@@ -100,0 +113,0 @@ }

package.json

 {
   "name": "@s-ui/react-atom-pin-input",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

32967

increased by7.8%

Lines of code

633

increased by3.77%

No dependency changes