rifm - npm Package Compare versions

Comparing version 0.9.1 to 0.10.0

dist/rifm.cjs.js

@@ -14,3 +14,4 @@ 'use strict';
   var valueRef = React.useRef(null);
-  var replace = props.replace;
+  var replace = props.replace,
+      append = props.append;
   var userValue = replace ? replace(props.format(props.value)) : props.format(props.value); // state of delete button see comments below about inputType support
@@ -102,3 +103,3 @@
         return start;
-      }; // Masking part, for masks if size of mask is above some value (props.replace checks that)
+      }; // Masking part, for masks if size of mask is above some value
       // we need to replace symbols instead of do nothing as like in format
@@ -115,2 +116,17 @@
       var formattedValue = props.format(eventValue);
+
+      if (append != null && // cursor at the end
+      input.selectionStart === eventValue.length && !isNoOperation) {
+        if (isSizeIncreaseOperation) {
+          formattedValue = append(formattedValue);
+        } else {
+          // If after delete last char is special character and we use append
+          // delete it too
+          // was: "12-3|" backspace pressed, then should be "12|"
+          if (clean(formattedValue.slice(-1)) === '') {
+            formattedValue = formattedValue.slice(0, -1);
+          }
+        }
+      }
+
       var replacedValue = replace ? replace(formattedValue) : formattedValue;
@@ -117,0 +133,0 @@

dist/rifm.esm.js

@@ -10,3 +10,4 @@ import { useReducer, useRef, useLayoutEffect, useEffect } from 'react';
   var valueRef = useRef(null);
-  var replace = props.replace;
+  var replace = props.replace,
+      append = props.append;
   var userValue = replace ? replace(props.format(props.value)) : props.format(props.value); // state of delete button see comments below about inputType support
@@ -98,3 +99,3 @@
         return start;
-      }; // Masking part, for masks if size of mask is above some value (props.replace checks that)
+      }; // Masking part, for masks if size of mask is above some value
       // we need to replace symbols instead of do nothing as like in format
@@ -111,2 +112,17 @@
       var formattedValue = props.format(eventValue);
+
+      if (append != null && // cursor at the end
+      input.selectionStart === eventValue.length && !isNoOperation) {
+        if (isSizeIncreaseOperation) {
+          formattedValue = append(formattedValue);
+        } else {
+          // If after delete last char is special character and we use append
+          // delete it too
+          // was: "12-3|" backspace pressed, then should be "12|"
+          if (clean(formattedValue.slice(-1)) === '') {
+            formattedValue = formattedValue.slice(0, -1);
+          }
+        }
+      }
+
       var replacedValue = replace ? replace(formattedValue) : formattedValue;
@@ -113,0 +129,0 @@

dist/rifm.esm.production.js

@@ -10,3 +10,4 @@ import { useReducer, useRef, useLayoutEffect, useEffect } from 'react';
   var valueRef = useRef(null);
-  var replace = props.replace;
+  var replace = props.replace,
+      append = props.append;
   var userValue = replace ? replace(props.format(props.value)) : props.format(props.value); // state of delete button see comments below about inputType support
@@ -84,3 +85,3 @@
         return start;
-      }; // Masking part, for masks if size of mask is above some value (props.replace checks that)
+      }; // Masking part, for masks if size of mask is above some value
       // we need to replace symbols instead of do nothing as like in format
@@ -97,2 +98,17 @@
       var formattedValue = props.format(eventValue);
+
+      if (append != null && // cursor at the end
+      input.selectionStart === eventValue.length && !isNoOperation) {
+        if (isSizeIncreaseOperation) {
+          formattedValue = append(formattedValue);
+        } else {
+          // If after delete last char is special character and we use append
+          // delete it too
+          // was: "12-3|" backspace pressed, then should be "12|"
+          if (clean(formattedValue.slice(-1)) === '') {
+            formattedValue = formattedValue.slice(0, -1);
+          }
+        }
+      }
+
       var replacedValue = replace ? replace(formattedValue) : formattedValue;
@@ -99,0 +115,0 @@

dist/rifm.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).Rifm={},e.React)}(this,function(e,t){"use strict";e.Rifm=function(e){var n=t.useReducer(function(e){return e+1},0)[1],r=t.useRef(null),u=e.replace,o=u?u(e.format(e.value)):e.format(e.value),c=t.useRef(!1);return t.useLayoutEffect(function(){if(null!=r.current){var t=r.current,c=t[0],f=t[1],a=t[2],i=t[3],s=t[4];r.current=null;var d=i&&s,l=function(t){return(t.match(e.accept||/\d/g)||[]).join("")},v=l(c.substr(0,f.selectionStart)),m=function(e){for(var t=0,n=0,r=0;r!==v.length;++r){var u=e.indexOf(v[r],t)+1,o=l(e).indexOf(v[r],n)+1;o-n>1&&(u=t,o=n),n=Math.max(o,n),t=Math.max(t,u)}return t};if(!0===e.mask&&a&&!s){var p=m(c),h=l(c.substr(p))[0];p=c.indexOf(h,p),c=""+c.substr(0,p)+c.substr(p+1)}var y=e.format(c),g=u?u(y):y;return o===g?n():e.onChange(g),function(){var t=m(y);if(null!=e.mask&&(a||i&&!d))for(;y[t]&&""===l(y[t]);)t+=1;f.selectionStart=f.selectionEnd=t+(d?1:0)}}}),t.useEffect(function(){var e=function(e){"Delete"===e.code&&(c.current=!0)},t=function(e){"Delete"===e.code&&(c.current=!1)};return document.addEventListener("keydown",e),document.addEventListener("keyup",t),function(){document.removeEventListener("keydown",e),document.removeEventListener("keyup",t)}},[]),e.children({value:null!=r.current?r.current[0]:o,onChange:function(t){var u=t.target.value;r.current=[u,t.target,u.length>o.length,c.current,o===e.format(u)],n()}})},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).Rifm={},e.React)}(this,function(e,t){"use strict";e.Rifm=function(e){var n=t.useReducer(function(e){return e+1},0)[1],r=t.useRef(null),u=e.replace,c=e.append,o=u?u(e.format(e.value)):e.format(e.value),a=t.useRef(!1);return t.useLayoutEffect(function(){if(null!=r.current){var t=r.current,a=t[0],f=t[1],i=t[2],l=t[3],s=t[4];r.current=null;var d=l&&s,v=function(t){return(t.match(e.accept||/\d/g)||[]).join("")},m=v(a.substr(0,f.selectionStart)),p=function(e){for(var t=0,n=0,r=0;r!==m.length;++r){var u=e.indexOf(m[r],t)+1,c=v(e).indexOf(m[r],n)+1;c-n>1&&(u=t,c=n),n=Math.max(c,n),t=Math.max(t,u)}return t};if(!0===e.mask&&i&&!s){var h=p(a),g=v(a.substr(h))[0];h=a.indexOf(g,h),a=""+a.substr(0,h)+a.substr(h+1)}var y=e.format(a);null==c||f.selectionStart!==a.length||s||(i?y=c(y):""===v(y.slice(-1))&&(y=y.slice(0,-1)));var x=u?u(y):y;return o===x?n():e.onChange(x),function(){var t=p(y);if(null!=e.mask&&(i||l&&!d))for(;y[t]&&""===v(y[t]);)t+=1;f.selectionStart=f.selectionEnd=t+(d?1:0)}}}),t.useEffect(function(){var e=function(e){"Delete"===e.code&&(a.current=!0)},t=function(e){"Delete"===e.code&&(a.current=!1)};return document.addEventListener("keydown",e),document.addEventListener("keyup",t),function(){document.removeEventListener("keydown",e),document.removeEventListener("keyup",t)}},[]),e.children({value:null!=r.current?r.current[0]:o,onChange:function(t){var u=t.target.value;r.current=[u,t.target,u.length>o.length,a.current,o===e.format(u)],n()}})},Object.defineProperty(e,"__esModule",{value:!0})});

dist/rifm.umd.js

@@ -14,3 +14,4 @@ (function (global, factory) {
     var valueRef = React.useRef(null);
-    var replace = props.replace;
+    var replace = props.replace,
+        append = props.append;
     var userValue = replace ? replace(props.format(props.value)) : props.format(props.value); // state of delete button see comments below about inputType support
@@ -102,3 +103,3 @@
           return start;
-        }; // Masking part, for masks if size of mask is above some value (props.replace checks that)
+        }; // Masking part, for masks if size of mask is above some value
         // we need to replace symbols instead of do nothing as like in format
@@ -115,2 +116,17 @@
         var formattedValue = props.format(eventValue);
+
+        if (append != null && // cursor at the end
+        input.selectionStart === eventValue.length && !isNoOperation) {
+          if (isSizeIncreaseOperation) {
+            formattedValue = append(formattedValue);
+          } else {
+            // If after delete last char is special character and we use append
+            // delete it too
+            // was: "12-3|" backspace pressed, then should be "12|"
+            if (clean(formattedValue.slice(-1)) === '') {
+              formattedValue = formattedValue.slice(0, -1);
+            }
+          }
+        }
+
         var replacedValue = replace ? replace(formattedValue) : formattedValue;
@@ -117,0 +133,0 @@

package.json

 {
   "name": "rifm",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Tiny react input formatter and mask",
@@ -29,8 +29,3 @@ "author": "istarkov",
     "presets": [
-      [
-        "@babel/env",
-        {
-          "loose": true
-        }
-      ],
+      "next/babel",
       "@babel/flow",
@@ -117,3 +112,3 @@ "@babel/react"
     "babel-jest": "^23.2.0",
-    "emotion": "^9.2.4",
+    "emotion": "^10.0.17",
     "eslint": "^5.0.1",
@@ -124,3 +119,3 @@ "eslint-plugin-flowtype": "^2.49.3",
     "eslint-plugin-react": "^7.9.1",
-    "flow-bin": "^0.93.0",
+    "flow-bin": "^0.109.0",
     "full-icu": "^1.3.0",
@@ -132,3 +127,3 @@ "gh-pages": "^1.2.0",
     "lint-staged": "^7.2.0",
-    "next": "^8.1.0",
+    "next": "^9.1.1",
     "prettier": "^1.17.1",
@@ -135,0 +130,0 @@ "react": "^16.8.2",

README.md

@@ -64,8 +64,7 @@ # RIFM - React Input Format & Mask
 
-Rifm is based on few simple ideas (**\***):
+Rifm is based on simple idea (**\***):
 
-- format operation doesn't change the order of some symbols after edit
-- all that symbols are placed before input cursor position
+- format operation applied to input value after edit doesn't change the order of some symbols before cursor
 
-**\*** _These ideas are not always true, but we solve some edge cases where it's not._
+**\*** _This is not always true, but we solve some edge cases where it's not._
 
@@ -90,3 +89,3 @@ > Imagine you have simple integer number formatter with **\`** as thousands separator
 
-Most operations which are not covered with above ideas like
+Most operations which are not covered with above idea like
 case enforcements, masks guides, floating point _","=>"."_ replacement
@@ -96,16 +95,16 @@ can be done using simple postprocessing step - replace.
 
-And finaly masks - masks are usually is nothing more
-than format with replace editing mode + some small cursor visual hacks.
+And finaly masks - masks are usually is format with replace editing mode + some small cursor visual hacks.
 
 ### Props
 
-| Prop         | type                          | default | Description                                                                         |
-| ------------ | :---------------------------- | :------ | :---------------------------------------------------------------------------------- |
-| **accept**   | RegExp (optional)             | /\d/g   | Regular expression to detect **"accepted"** symbols                                 |
-| **format**   | string => string              |         | format function                                                                     |
-| **value**    | string                        |         | input value                                                                         |
-| **onChange** | string => void                |         | event fired on input change                                                         |
-| **children** | ({ value, onChange }) => Node |         | value and onChange handler you need to pass to underlying input element             |
-| **mask**     | boolean (optional)            |         | use replace input mode if true, use cursor visual hacks if prop provided            |
-| **replace**  | string => string (optional)   |         | format postprocessor allows you to fully replace any/all symbol/s preserving cursor |
+| Prop         | type                          | default | Description                                                                                                                                                   |
+| ------------ | :---------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **accept**   | RegExp (optional)             | /\d/g   | Regular expression to detect **"accepted"** symbols                                                                                                           |
+| **format**   | string => string              |         | format function                                                                                                                                               |
+| **value**    | string                        |         | input value                                                                                                                                                   |
+| **onChange** | string => void                |         | event fired on input change                                                                                                                                   |
+| **children** | ({ value, onChange }) => Node |         | value and onChange handler you need to pass to underlying input element                                                                                       |
+| **mask**     | boolean (optional)            |         | use replace input mode if true, use cursor visual hacks if prop provided                                                                                      |
+| **replace**  | string => string (optional)   |         | format postprocessor allows you to fully replace any/all symbol/s preserving cursor                                                                           |
+| **append**   | string => string (optional)   |         | format postprocessor called only if cursor is in the last position and new symbols added, used for specific use-case to add non accepted symbol when you type |
 
@@ -112,0 +111,0 @@ See the [Demo](https://istarkov.github.io/rifm) there are a lot of examples there.

src/index.d.ts

@@ -13,2 +13,3 @@ import * as React from 'react';
   replace?: (str: string) => string;
+  append?: (str: string) => string;
   mask?: boolean;
@@ -15,0 +16,0 @@ accept?: RegExp;

src/Rifm.js

@@ -11,2 +11,3 @@ /* @flow */
   replace?: string => string,
+  append?: string => string,
   accept?: RegExp,
@@ -24,3 +25,3 @@ children: ({
   const valueRef = React.useRef(null);
-  const { replace } = props;
+  const { replace, append } = props;
   const userValue = replace
@@ -135,3 +136,3 @@ ? replace(props.format(props.value))
 
-      // Masking part, for masks if size of mask is above some value (props.replace checks that)
+      // Masking part, for masks if size of mask is above some value
       // we need to replace symbols instead of do nothing as like in format
@@ -149,3 +150,22 @@ if (props.mask === true && isSizeIncreaseOperation && !isNoOperation) {
 
-      const formattedValue = props.format(eventValue);
+      let formattedValue = props.format(eventValue);
+
+      if (
+        append != null &&
+        // cursor at the end
+        input.selectionStart === eventValue.length &&
+        !isNoOperation
+      ) {
+        if (isSizeIncreaseOperation) {
+          formattedValue = append(formattedValue);
+        } else {
+          // If after delete last char is special character and we use append
+          // delete it too
+          // was: "12-3|" backspace pressed, then should be "12|"
+          if (clean(formattedValue.slice(-1)) === '') {
+            formattedValue = formattedValue.slice(0, -1);
+          }
+        }
+      }
+
       const replacedValue = replace ? replace(formattedValue) : formattedValue;
@@ -152,0 +172,0 @@

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

52480

increased by7.59%

Lines of code

819

increased by10.08%

Worsened metrics

Number of lines in readme file

113

decreased by-0.88%

Number of low supply chain risk alerts

18

increased by100%

No dependency changes