react-native-paper-dates 0.15.2 → 0.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -5
- package/lib/commonjs/Date/DayRange.js +4 -1
- package/lib/commonjs/Date/DayRange.js.map +1 -1
- package/lib/commonjs/TextInputMask.js +16 -53
- package/lib/commonjs/TextInputMask.js.map +1 -1
- package/lib/module/Date/DayRange.js +4 -1
- package/lib/module/Date/DayRange.js.map +1 -1
- package/lib/module/TextInputMask.js +16 -53
- package/lib/module/TextInputMask.js.map +1 -1
- package/lib/typescript/Date/DayRange.d.ts.map +1 -1
- package/lib/typescript/TextInputMask.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/Date/DayRange.tsx +4 -1
- package/src/TextInputMask.tsx +34 -67
package/README.md
CHANGED
|
@@ -32,13 +32,11 @@ Check out the official docs: [web-ridge.github.io/react-native-paper-dates](http
|
|
|
32
32
|
|
|
33
33
|
[reactnativepaperdates.com](https://www.reactnativepaperdates.com/)
|
|
34
34
|
|
|
35
|
-
##
|
|
35
|
+
## Maintainers
|
|
36
36
|
|
|
37
|
-
|
|
37
|
+
[RichardLindhout](https://twitter.com/RichardLindhout) from [web_ridge](https://twitter.com/web_ridge)
|
|
38
|
+
[Brandon Fitzwater](https://github.com/iM-GeeKy)
|
|
38
39
|
|
|
39
|
-
Give us a follow on Twitter:
|
|
40
|
-
[RichardLindhout](https://twitter.com/RichardLindhout),
|
|
41
|
-
[web_ridge](https://twitter.com/web_ridge)
|
|
42
40
|
|
|
43
41
|
## License
|
|
44
42
|
|
|
@@ -32,7 +32,7 @@ function DayRange(_ref) {
|
|
|
32
32
|
backgroundColor: selectColor
|
|
33
33
|
} : null]
|
|
34
34
|
}, isCrop && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
35
|
-
style: [styles.
|
|
35
|
+
style: [styles.rightCrop, rightCrop ? {
|
|
36
36
|
backgroundColor: selectColor
|
|
37
37
|
} : null]
|
|
38
38
|
}), /*#__PURE__*/React.createElement(_reactNative.View, {
|
|
@@ -68,6 +68,9 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
68
68
|
},
|
|
69
69
|
rangeRoot: {
|
|
70
70
|
flexDirection: 'row'
|
|
71
|
+
},
|
|
72
|
+
rightCrop: {
|
|
73
|
+
flexBasis: 5
|
|
71
74
|
}
|
|
72
75
|
});
|
|
73
76
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["DayRange","leftCrop","rightCrop","inRange","selectColor","bothWays","isCrop","StyleSheet","absoluteFill","styles","rangeRoot","rangeRootBoth","backgroundColor","
|
|
1
|
+
{"version":3,"names":["DayRange","leftCrop","rightCrop","inRange","selectColor","bothWays","isCrop","StyleSheet","absoluteFill","styles","rangeRoot","rangeRootBoth","backgroundColor","minWidth","daySize","minHeight","leftRadius","rightRadius","flex1","create","borderBottomLeftRadius","borderTopLeftRadius","borderBottomRightRadius","borderTopRightRadius","borderRadius","flex","flexDirection","flexBasis","React","memo"],"sourceRoot":"../../../src","sources":["Date/DayRange.tsx"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAEA,SAASA,QAAT,OAUG;EAAA,IAVe;IAChBC,QADgB;IAEhBC,SAFgB;IAGhBC,OAHgB;IAIhBC;EAJgB,CAUf;EACD,MAAMC,QAAQ,GAAGF,OAAO,IAAIF,QAAX,IAAuBC,SAAxC;EACA,MAAMI,MAAM,GAAGH,OAAO,KAAKF,QAAQ,IAAIC,SAAjB,CAAP,IAAsC,EAAED,QAAQ,IAAIC,SAAd,CAArD;;EAEA,IAAIC,OAAO,IAAIG,MAAf,EAAuB;IACrB,oBACE,oBAAC,iBAAD;MACE,aAAa,EAAC,MADhB;MAEE,KAAK,EAAE,CACLC,uBAAA,CAAWC,YADN,EAELC,MAAM,CAACC,SAFF,EAGLL,QAAQ,IAAII,MAAM,CAACE,aAHd,EAILR,OAAO,IAAI,CAACG,MAAZ,GACI;QACEM,eAAe,EAAER;MADnB,CADJ,GAII,IARC;IAFT,GAaGE,MAAM,iBACL,uDACE,oBAAC,iBAAD;MACE,KAAK,EAAE,CACLG,MAAM,CAACP,SADF,EAELA,SAAS,GACL;QACEU,eAAe,EAAER;MADnB,CADK,GAIL,IANC;IADT,EADF,eAWE,oBAAC,iBAAD;MACE,KAAK,EAAE,CACL;QACEQ,eAAe,EAAER,WADnB;QAEES,QAAQ,EAAEC,kBAFZ;QAGEC,SAAS,EAAED;MAHb,CADK,EAMLb,QAAQ,GAAGQ,MAAM,CAACO,UAAV,GAAuB,IAN1B,EAOLd,SAAS,GAAGO,MAAM,CAACQ,WAAV,GAAwB,IAP5B;IADT,EAXF,eAsBE,oBAAC,iBAAD;MACE,KAAK,EAAE,CACLR,MAAM,CAACS,KADF,EAELjB,QAAQ,GACJ;QACEW,eAAe,EAAER;MADnB,CADI,GAIJ,IANC;IADT,EAtBF,CAdJ,CADF;EAmDD;;EACD,OAAO,IAAP;AACD;;AAED,MAAMK,MAAM,GAAGF,uBAAA,CAAWY,MAAX,CAAkB;EAC/BH,UAAU,EAAE;IACVI,sBAAsB,EAAEN,kBAAA,GAAU,CADxB;IAEVO,mBAAmB,EAAEP,kBAAA,GAAU;EAFrB,CADmB;EAK/BG,WAAW,EAAE;IACXK,uBAAuB,EAAER,kBAAA,GAAU,CADxB;IAEXS,oBAAoB,EAAET,kBAAA,GAAU;EAFrB,CALkB;EAS/BH,aAAa,EAAE;IACba,YAAY,EAAEV,kBAAA,GAAU;EADX,CATgB;EAY/BI,KAAK,EAAE;IACLO,IAAI,EAAE;EADD,CAZwB;EAe/Bf,SAAS,EAAE;IACTgB,aAAa,EAAE;EADN,CAfoB;EAkB/BxB,SAAS,EAAE;IACTyB,SAAS,EAAE;EADF;AAlBoB,CAAlB,CAAf;;4BAuBeC,KAAK,CAACC,IAAN,CAAW7B,QAAX,C"}
|
|
@@ -22,51 +22,6 @@ function detectCharacter(mask) {
|
|
|
22
22
|
return c || '';
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
function enhanceTextWithMask(text, mask, previousValue) {
|
|
26
|
-
const isBackSpace = previousValue.length > text.length;
|
|
27
|
-
const splitCharacter = detectCharacter(mask);
|
|
28
|
-
const maskParts = mask.split(splitCharacter);
|
|
29
|
-
const textParts = text.split(splitCharacter);
|
|
30
|
-
let finalString = [];
|
|
31
|
-
|
|
32
|
-
for (let maskPartIndex = 0; maskPartIndex < mask.length; maskPartIndex++) {
|
|
33
|
-
let partString = [];
|
|
34
|
-
const maskPart = maskParts[maskPartIndex];
|
|
35
|
-
const textPart = textParts[maskPartIndex];
|
|
36
|
-
|
|
37
|
-
if (!textPart) {
|
|
38
|
-
continue;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
for (let maskDigitIndex = 0; maskDigitIndex < maskPart.length; maskDigitIndex++) {
|
|
42
|
-
const currentCharacter = textPart[maskDigitIndex];
|
|
43
|
-
|
|
44
|
-
if (isBackSpace && currentCharacter === undefined) {
|
|
45
|
-
continue;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
const character = textPart[maskDigitIndex];
|
|
49
|
-
|
|
50
|
-
if (character !== undefined) {
|
|
51
|
-
partString.push(character);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
finalString.push(partString.join(''));
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
const lastPart = finalString[finalString.length - 1];
|
|
59
|
-
const lastMaskPart = maskParts[finalString.length - 1];
|
|
60
|
-
|
|
61
|
-
if ( // if mask is completed
|
|
62
|
-
finalString.length !== maskParts.length && // or ...
|
|
63
|
-
lastPart && lastMaskPart && lastPart.length === lastMaskPart.length) {
|
|
64
|
-
return finalString.join(splitCharacter) + (isBackSpace ? '' : splitCharacter);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
return finalString.join(splitCharacter);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
25
|
function TextInputWithMask(_ref, ref) {
|
|
71
26
|
let {
|
|
72
27
|
onChangeText,
|
|
@@ -79,16 +34,24 @@ function TextInputWithMask(_ref, ref) {
|
|
|
79
34
|
const [controlledValue, setControlledValue] = React.useState(value || '');
|
|
80
35
|
|
|
81
36
|
const onInnerChange = text => {
|
|
82
|
-
|
|
83
|
-
|
|
37
|
+
const splitCharacter = detectCharacter(mask);
|
|
38
|
+
const maskParts = mask.split(splitCharacter);
|
|
39
|
+
let trimmedText = text.trim();
|
|
40
|
+
const format = maskParts[0].toLowerCase() + splitCharacter + maskParts[1].toLowerCase() + splitCharacter + maskParts[2].toLowerCase();
|
|
41
|
+
const match = new RegExp(format.replace(/(\w+)\W(\w+)\W(\w+)/, '^\\s*($1)\\W*($2)?\\W*($3)?([0-9]*).*').replace(/m|d|y/g, '\\d'));
|
|
42
|
+
const replaceValue = format.match(/\W/);
|
|
43
|
+
const replace = `$1${splitCharacter}$2${splitCharacter}$3$4`.replace(new RegExp(splitCharacter, 'g'), replaceValue ?? '');
|
|
44
|
+
const isBackSpace = controlledValue.length > trimmedText.length;
|
|
45
|
+
|
|
46
|
+
if (!isBackSpace) {
|
|
47
|
+
trimmedText = trimmedText.replace(/(^|\W)(?=\d\W)/g, '$10').replace(match, replace).replace(/(\W)+/g, '$1');
|
|
84
48
|
}
|
|
85
49
|
|
|
86
|
-
|
|
87
|
-
|
|
50
|
+
if (trimmedText.length === mask.length) {
|
|
51
|
+
onChangeText && onChangeText(trimmedText);
|
|
52
|
+
}
|
|
88
53
|
|
|
89
|
-
|
|
90
|
-
const enhancedText = enhanceTextWithMask(value, mask, controlledValue);
|
|
91
|
-
setControlledValue(enhancedText);
|
|
54
|
+
setControlledValue(trimmedText);
|
|
92
55
|
};
|
|
93
56
|
|
|
94
57
|
React.useEffect(() => {
|
|
@@ -103,7 +66,7 @@ function TextInputWithMask(_ref, ref) {
|
|
|
103
66
|
onChange: e => {
|
|
104
67
|
onChange && onChange(e);
|
|
105
68
|
},
|
|
106
|
-
|
|
69
|
+
maxLength: 10
|
|
107
70
|
}));
|
|
108
71
|
}
|
|
109
72
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["splitCharacters","detectCharacter","mask","c","find","ch","includes","
|
|
1
|
+
{"version":3,"names":["splitCharacters","detectCharacter","mask","c","find","ch","includes","TextInputWithMask","ref","onChangeText","onChange","value","disabled","rest","controlledValue","setControlledValue","React","useState","onInnerChange","text","splitCharacter","maskParts","split","trimmedText","trim","format","toLowerCase","match","RegExp","replace","replaceValue","isBackSpace","length","useEffect","e","forwardRef"],"sourceRoot":"../../src","sources":["TextInputMask.tsx"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AAEA,MAAMA,eAAe,GAAG,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,EAAgB,GAAhB,EAAqB,GAArB,CAAxB;;AACA,SAASC,eAAT,CAAyBC,IAAzB,EAA+C;EAC7C,MAAMC,CAAC,GAAGH,eAAe,CAACI,IAAhB,CAAsBC,EAAD,IAAQH,IAAI,CAACI,QAAL,CAAcD,EAAd,CAA7B,CAAV;EACA,OAAOF,CAAC,IAAI,EAAZ;AACD;;AAED,SAASI,iBAAT,OASEC,GATF,EAUE;EAAA,IATA;IACEC,YADF;IAEEC,QAFF;IAGEC,KAHF;IAIET,IAJF;IAKEU,QALF;IAME,GAAGC;EANL,CASA;EACA,MAAM,CAACC,eAAD,EAAkBC,kBAAlB,IAAwCC,KAAK,CAACC,QAAN,CAC5CN,KAAK,IAAI,EADmC,CAA9C;;EAIA,MAAMO,aAAa,GAAIC,IAAD,IAAkB;IACtC,MAAMC,cAAc,GAAGnB,eAAe,CAACC,IAAD,CAAtC;IACA,MAAMmB,SAAS,GAAGnB,IAAI,CAACoB,KAAL,CAAWF,cAAX,CAAlB;IAEA,IAAIG,WAAW,GAAGJ,IAAI,CAACK,IAAL,EAAlB;IACA,MAAMC,MAAM,GACVJ,SAAS,CAAC,CAAD,CAAT,CAAaK,WAAb,KACAN,cADA,GAEAC,SAAS,CAAC,CAAD,CAAT,CAAaK,WAAb,EAFA,GAGAN,cAHA,GAIAC,SAAS,CAAC,CAAD,CAAT,CAAaK,WAAb,EALF;IAMA,MAAMC,KAAK,GAAG,IAAIC,MAAJ,CACZH,MAAM,CACHI,OADH,CACW,qBADX,EACkC,uCADlC,EAEGA,OAFH,CAEW,QAFX,EAEqB,KAFrB,CADY,CAAd;IAKA,MAAMC,YAAY,GAAGL,MAAM,CAACE,KAAP,CAAa,IAAb,CAArB;IACA,MAAME,OAAO,GAAI,KAAIT,cAAe,KAAIA,cAAe,MAAvC,CAA6CS,OAA7C,CACd,IAAID,MAAJ,CAAWR,cAAX,EAA2B,GAA3B,CADc,EAEbU,YAAY,IAAI,EAFH,CAAhB;IAKA,MAAMC,WAAW,GAAGjB,eAAe,CAACkB,MAAhB,GAAyBT,WAAW,CAACS,MAAzD;;IAEA,IAAI,CAACD,WAAL,EAAkB;MAChBR,WAAW,GAAGA,WAAW,CACtBM,OADW,CACH,iBADG,EACgB,KADhB,EAEXA,OAFW,CAEHF,KAFG,EAEIE,OAFJ,EAGXA,OAHW,CAGH,QAHG,EAGO,IAHP,CAAd;IAID;;IAED,IAAIN,WAAW,CAACS,MAAZ,KAAuB9B,IAAI,CAAC8B,MAAhC,EAAwC;MACtCvB,YAAY,IAAIA,YAAY,CAACc,WAAD,CAA5B;IACD;;IAEDR,kBAAkB,CAACQ,WAAD,CAAlB;EACD,CApCD;;EAsCAP,KAAK,CAACiB,SAAN,CAAgB,MAAM;IACpBlB,kBAAkB,CAACJ,KAAK,IAAI,EAAV,CAAlB;EACD,CAFD,EAEG,CAACA,KAAD,CAFH;EAIA,oBACE,oBAAC,2BAAD;IACE,GAAG,EAAEH;EADP,GAEMK,IAFN;IAGE,QAAQ,EAAED,QAHZ;IAIE,KAAK,EAAEE,eAJT;IAKE,YAAY,EAAEI,aALhB;IAME,QAAQ,EAAGgB,CAAD,IAAO;MACfxB,QAAQ,IAAIA,QAAQ,CAACwB,CAAD,CAApB;IACD,CARH;IASE,SAAS,EAAE;EATb,GADF;AAaD;;4BAEclB,KAAK,CAACmB,UAAN,CAAiB5B,iBAAjB,C"}
|
|
@@ -19,7 +19,7 @@ function DayRange(_ref) {
|
|
|
19
19
|
backgroundColor: selectColor
|
|
20
20
|
} : null]
|
|
21
21
|
}, isCrop && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
|
|
22
|
-
style: [styles.
|
|
22
|
+
style: [styles.rightCrop, rightCrop ? {
|
|
23
23
|
backgroundColor: selectColor
|
|
24
24
|
} : null]
|
|
25
25
|
}), /*#__PURE__*/React.createElement(View, {
|
|
@@ -55,6 +55,9 @@ const styles = StyleSheet.create({
|
|
|
55
55
|
},
|
|
56
56
|
rangeRoot: {
|
|
57
57
|
flexDirection: 'row'
|
|
58
|
+
},
|
|
59
|
+
rightCrop: {
|
|
60
|
+
flexBasis: 5
|
|
58
61
|
}
|
|
59
62
|
});
|
|
60
63
|
export default /*#__PURE__*/React.memo(DayRange);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","View","daySize","DayRange","leftCrop","rightCrop","inRange","selectColor","bothWays","isCrop","absoluteFill","styles","rangeRoot","rangeRootBoth","backgroundColor","
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","View","daySize","DayRange","leftCrop","rightCrop","inRange","selectColor","bothWays","isCrop","absoluteFill","styles","rangeRoot","rangeRootBoth","backgroundColor","minWidth","minHeight","leftRadius","rightRadius","flex1","create","borderBottomLeftRadius","borderTopLeftRadius","borderBottomRightRadius","borderTopRightRadius","borderRadius","flex","flexDirection","flexBasis","memo"],"sourceRoot":"../../../src","sources":["Date/DayRange.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AACA,SAASC,OAAT,QAAwB,aAAxB;;AAEA,SAASC,QAAT,OAUG;EAAA,IAVe;IAChBC,QADgB;IAEhBC,SAFgB;IAGhBC,OAHgB;IAIhBC;EAJgB,CAUf;EACD,MAAMC,QAAQ,GAAGF,OAAO,IAAIF,QAAX,IAAuBC,SAAxC;EACA,MAAMI,MAAM,GAAGH,OAAO,KAAKF,QAAQ,IAAIC,SAAjB,CAAP,IAAsC,EAAED,QAAQ,IAAIC,SAAd,CAArD;;EAEA,IAAIC,OAAO,IAAIG,MAAf,EAAuB;IACrB,oBACE,oBAAC,IAAD;MACE,aAAa,EAAC,MADhB;MAEE,KAAK,EAAE,CACLT,UAAU,CAACU,YADN,EAELC,MAAM,CAACC,SAFF,EAGLJ,QAAQ,IAAIG,MAAM,CAACE,aAHd,EAILP,OAAO,IAAI,CAACG,MAAZ,GACI;QACEK,eAAe,EAAEP;MADnB,CADJ,GAII,IARC;IAFT,GAaGE,MAAM,iBACL,uDACE,oBAAC,IAAD;MACE,KAAK,EAAE,CACLE,MAAM,CAACN,SADF,EAELA,SAAS,GACL;QACES,eAAe,EAAEP;MADnB,CADK,GAIL,IANC;IADT,EADF,eAWE,oBAAC,IAAD;MACE,KAAK,EAAE,CACL;QACEO,eAAe,EAAEP,WADnB;QAEEQ,QAAQ,EAAEb,OAFZ;QAGEc,SAAS,EAAEd;MAHb,CADK,EAMLE,QAAQ,GAAGO,MAAM,CAACM,UAAV,GAAuB,IAN1B,EAOLZ,SAAS,GAAGM,MAAM,CAACO,WAAV,GAAwB,IAP5B;IADT,EAXF,eAsBE,oBAAC,IAAD;MACE,KAAK,EAAE,CACLP,MAAM,CAACQ,KADF,EAELf,QAAQ,GACJ;QACEU,eAAe,EAAEP;MADnB,CADI,GAIJ,IANC;IADT,EAtBF,CAdJ,CADF;EAmDD;;EACD,OAAO,IAAP;AACD;;AAED,MAAMI,MAAM,GAAGX,UAAU,CAACoB,MAAX,CAAkB;EAC/BH,UAAU,EAAE;IACVI,sBAAsB,EAAEnB,OAAO,GAAG,CADxB;IAEVoB,mBAAmB,EAAEpB,OAAO,GAAG;EAFrB,CADmB;EAK/BgB,WAAW,EAAE;IACXK,uBAAuB,EAAErB,OAAO,GAAG,CADxB;IAEXsB,oBAAoB,EAAEtB,OAAO,GAAG;EAFrB,CALkB;EAS/BW,aAAa,EAAE;IACbY,YAAY,EAAEvB,OAAO,GAAG;EADX,CATgB;EAY/BiB,KAAK,EAAE;IACLO,IAAI,EAAE;EADD,CAZwB;EAe/Bd,SAAS,EAAE;IACTe,aAAa,EAAE;EADN,CAfoB;EAkB/BtB,SAAS,EAAE;IACTuB,SAAS,EAAE;EADF;AAlBoB,CAAlB,CAAf;AAuBA,4BAAe7B,KAAK,CAAC8B,IAAN,CAAW1B,QAAX,CAAf"}
|
|
@@ -9,51 +9,6 @@ function detectCharacter(mask) {
|
|
|
9
9
|
return c || '';
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
function enhanceTextWithMask(text, mask, previousValue) {
|
|
13
|
-
const isBackSpace = previousValue.length > text.length;
|
|
14
|
-
const splitCharacter = detectCharacter(mask);
|
|
15
|
-
const maskParts = mask.split(splitCharacter);
|
|
16
|
-
const textParts = text.split(splitCharacter);
|
|
17
|
-
let finalString = [];
|
|
18
|
-
|
|
19
|
-
for (let maskPartIndex = 0; maskPartIndex < mask.length; maskPartIndex++) {
|
|
20
|
-
let partString = [];
|
|
21
|
-
const maskPart = maskParts[maskPartIndex];
|
|
22
|
-
const textPart = textParts[maskPartIndex];
|
|
23
|
-
|
|
24
|
-
if (!textPart) {
|
|
25
|
-
continue;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
for (let maskDigitIndex = 0; maskDigitIndex < maskPart.length; maskDigitIndex++) {
|
|
29
|
-
const currentCharacter = textPart[maskDigitIndex];
|
|
30
|
-
|
|
31
|
-
if (isBackSpace && currentCharacter === undefined) {
|
|
32
|
-
continue;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
const character = textPart[maskDigitIndex];
|
|
36
|
-
|
|
37
|
-
if (character !== undefined) {
|
|
38
|
-
partString.push(character);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
finalString.push(partString.join(''));
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
const lastPart = finalString[finalString.length - 1];
|
|
46
|
-
const lastMaskPart = maskParts[finalString.length - 1];
|
|
47
|
-
|
|
48
|
-
if ( // if mask is completed
|
|
49
|
-
finalString.length !== maskParts.length && // or ...
|
|
50
|
-
lastPart && lastMaskPart && lastPart.length === lastMaskPart.length) {
|
|
51
|
-
return finalString.join(splitCharacter) + (isBackSpace ? '' : splitCharacter);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
return finalString.join(splitCharacter);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
12
|
function TextInputWithMask(_ref, ref) {
|
|
58
13
|
let {
|
|
59
14
|
onChangeText,
|
|
@@ -66,16 +21,24 @@ function TextInputWithMask(_ref, ref) {
|
|
|
66
21
|
const [controlledValue, setControlledValue] = React.useState(value || '');
|
|
67
22
|
|
|
68
23
|
const onInnerChange = text => {
|
|
69
|
-
|
|
70
|
-
|
|
24
|
+
const splitCharacter = detectCharacter(mask);
|
|
25
|
+
const maskParts = mask.split(splitCharacter);
|
|
26
|
+
let trimmedText = text.trim();
|
|
27
|
+
const format = maskParts[0].toLowerCase() + splitCharacter + maskParts[1].toLowerCase() + splitCharacter + maskParts[2].toLowerCase();
|
|
28
|
+
const match = new RegExp(format.replace(/(\w+)\W(\w+)\W(\w+)/, '^\\s*($1)\\W*($2)?\\W*($3)?([0-9]*).*').replace(/m|d|y/g, '\\d'));
|
|
29
|
+
const replaceValue = format.match(/\W/);
|
|
30
|
+
const replace = `$1${splitCharacter}$2${splitCharacter}$3$4`.replace(new RegExp(splitCharacter, 'g'), replaceValue ?? '');
|
|
31
|
+
const isBackSpace = controlledValue.length > trimmedText.length;
|
|
32
|
+
|
|
33
|
+
if (!isBackSpace) {
|
|
34
|
+
trimmedText = trimmedText.replace(/(^|\W)(?=\d\W)/g, '$10').replace(match, replace).replace(/(\W)+/g, '$1');
|
|
71
35
|
}
|
|
72
36
|
|
|
73
|
-
|
|
74
|
-
|
|
37
|
+
if (trimmedText.length === mask.length) {
|
|
38
|
+
onChangeText && onChangeText(trimmedText);
|
|
39
|
+
}
|
|
75
40
|
|
|
76
|
-
|
|
77
|
-
const enhancedText = enhanceTextWithMask(value, mask, controlledValue);
|
|
78
|
-
setControlledValue(enhancedText);
|
|
41
|
+
setControlledValue(trimmedText);
|
|
79
42
|
};
|
|
80
43
|
|
|
81
44
|
React.useEffect(() => {
|
|
@@ -90,7 +53,7 @@ function TextInputWithMask(_ref, ref) {
|
|
|
90
53
|
onChange: e => {
|
|
91
54
|
onChange && onChange(e);
|
|
92
55
|
},
|
|
93
|
-
|
|
56
|
+
maxLength: 10
|
|
94
57
|
}));
|
|
95
58
|
}
|
|
96
59
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","TextInput","splitCharacters","detectCharacter","mask","c","find","ch","includes","
|
|
1
|
+
{"version":3,"names":["React","TextInput","splitCharacters","detectCharacter","mask","c","find","ch","includes","TextInputWithMask","ref","onChangeText","onChange","value","disabled","rest","controlledValue","setControlledValue","useState","onInnerChange","text","splitCharacter","maskParts","split","trimmedText","trim","format","toLowerCase","match","RegExp","replace","replaceValue","isBackSpace","length","useEffect","e","forwardRef"],"sourceRoot":"../../src","sources":["TextInputMask.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,SAAT,QAA0B,oBAA1B;AAEA,MAAMC,eAAe,GAAG,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,EAAgB,GAAhB,EAAqB,GAArB,CAAxB;;AACA,SAASC,eAAT,CAAyBC,IAAzB,EAA+C;EAC7C,MAAMC,CAAC,GAAGH,eAAe,CAACI,IAAhB,CAAsBC,EAAD,IAAQH,IAAI,CAACI,QAAL,CAAcD,EAAd,CAA7B,CAAV;EACA,OAAOF,CAAC,IAAI,EAAZ;AACD;;AAED,SAASI,iBAAT,OASEC,GATF,EAUE;EAAA,IATA;IACEC,YADF;IAEEC,QAFF;IAGEC,KAHF;IAIET,IAJF;IAKEU,QALF;IAME,GAAGC;EANL,CASA;EACA,MAAM,CAACC,eAAD,EAAkBC,kBAAlB,IAAwCjB,KAAK,CAACkB,QAAN,CAC5CL,KAAK,IAAI,EADmC,CAA9C;;EAIA,MAAMM,aAAa,GAAIC,IAAD,IAAkB;IACtC,MAAMC,cAAc,GAAGlB,eAAe,CAACC,IAAD,CAAtC;IACA,MAAMkB,SAAS,GAAGlB,IAAI,CAACmB,KAAL,CAAWF,cAAX,CAAlB;IAEA,IAAIG,WAAW,GAAGJ,IAAI,CAACK,IAAL,EAAlB;IACA,MAAMC,MAAM,GACVJ,SAAS,CAAC,CAAD,CAAT,CAAaK,WAAb,KACAN,cADA,GAEAC,SAAS,CAAC,CAAD,CAAT,CAAaK,WAAb,EAFA,GAGAN,cAHA,GAIAC,SAAS,CAAC,CAAD,CAAT,CAAaK,WAAb,EALF;IAMA,MAAMC,KAAK,GAAG,IAAIC,MAAJ,CACZH,MAAM,CACHI,OADH,CACW,qBADX,EACkC,uCADlC,EAEGA,OAFH,CAEW,QAFX,EAEqB,KAFrB,CADY,CAAd;IAKA,MAAMC,YAAY,GAAGL,MAAM,CAACE,KAAP,CAAa,IAAb,CAArB;IACA,MAAME,OAAO,GAAI,KAAIT,cAAe,KAAIA,cAAe,MAAvC,CAA6CS,OAA7C,CACd,IAAID,MAAJ,CAAWR,cAAX,EAA2B,GAA3B,CADc,EAEbU,YAAY,IAAI,EAFH,CAAhB;IAKA,MAAMC,WAAW,GAAGhB,eAAe,CAACiB,MAAhB,GAAyBT,WAAW,CAACS,MAAzD;;IAEA,IAAI,CAACD,WAAL,EAAkB;MAChBR,WAAW,GAAGA,WAAW,CACtBM,OADW,CACH,iBADG,EACgB,KADhB,EAEXA,OAFW,CAEHF,KAFG,EAEIE,OAFJ,EAGXA,OAHW,CAGH,QAHG,EAGO,IAHP,CAAd;IAID;;IAED,IAAIN,WAAW,CAACS,MAAZ,KAAuB7B,IAAI,CAAC6B,MAAhC,EAAwC;MACtCtB,YAAY,IAAIA,YAAY,CAACa,WAAD,CAA5B;IACD;;IAEDP,kBAAkB,CAACO,WAAD,CAAlB;EACD,CApCD;;EAsCAxB,KAAK,CAACkC,SAAN,CAAgB,MAAM;IACpBjB,kBAAkB,CAACJ,KAAK,IAAI,EAAV,CAAlB;EACD,CAFD,EAEG,CAACA,KAAD,CAFH;EAIA,oBACE,oBAAC,SAAD;IACE,GAAG,EAAEH;EADP,GAEMK,IAFN;IAGE,QAAQ,EAAED,QAHZ;IAIE,KAAK,EAAEE,eAJT;IAKE,YAAY,EAAEG,aALhB;IAME,QAAQ,EAAGgB,CAAD,IAAO;MACfvB,QAAQ,IAAIA,QAAQ,CAACuB,CAAD,CAApB;IACD,CARH;IASE,SAAS,EAAE;EATb,GADF;AAaD;;AAED,4BAAenC,KAAK,CAACoC,UAAN,CAAiB3B,iBAAjB,CAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DayRange.d.ts","sourceRoot":"","sources":["../../../src/Date/DayRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;CACpB,sBA0DA;;
|
|
1
|
+
{"version":3,"file":"DayRange.d.ts","sourceRoot":"","sources":["../../../src/Date/DayRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,GACZ,EAAE;IACD,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;CACpB,sBA0DA;;AAyBD,wBAAmC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInputMask.d.ts","sourceRoot":"","sources":["../../src/TextInputMask.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"TextInputMask.d.ts","sourceRoot":"","sources":["../../src/TextInputMask.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiF9B,wBAAkD"}
|
package/package.json
CHANGED
package/src/Date/DayRange.tsx
CHANGED
|
@@ -35,7 +35,7 @@ function DayRange({
|
|
|
35
35
|
<>
|
|
36
36
|
<View
|
|
37
37
|
style={[
|
|
38
|
-
styles.
|
|
38
|
+
styles.rightCrop,
|
|
39
39
|
rightCrop
|
|
40
40
|
? {
|
|
41
41
|
backgroundColor: selectColor,
|
|
@@ -90,6 +90,9 @@ const styles = StyleSheet.create({
|
|
|
90
90
|
rangeRoot: {
|
|
91
91
|
flexDirection: 'row',
|
|
92
92
|
},
|
|
93
|
+
rightCrop: {
|
|
94
|
+
flexBasis: 5,
|
|
95
|
+
},
|
|
93
96
|
})
|
|
94
97
|
|
|
95
98
|
export default React.memo(DayRange)
|
package/src/TextInputMask.tsx
CHANGED
|
@@ -7,65 +7,6 @@ function detectCharacter(mask: string): string {
|
|
|
7
7
|
return c || ''
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
function enhanceTextWithMask(
|
|
11
|
-
text: string,
|
|
12
|
-
mask: string,
|
|
13
|
-
previousValue: string
|
|
14
|
-
): string {
|
|
15
|
-
const isBackSpace = previousValue.length > text.length
|
|
16
|
-
const splitCharacter = detectCharacter(mask)
|
|
17
|
-
|
|
18
|
-
const maskParts = mask.split(splitCharacter)
|
|
19
|
-
const textParts = text.split(splitCharacter)
|
|
20
|
-
|
|
21
|
-
let finalString: string[] = []
|
|
22
|
-
for (let maskPartIndex = 0; maskPartIndex < mask.length; maskPartIndex++) {
|
|
23
|
-
let partString: string[] = []
|
|
24
|
-
|
|
25
|
-
const maskPart = maskParts[maskPartIndex]
|
|
26
|
-
const textPart = textParts[maskPartIndex]
|
|
27
|
-
if (!textPart) {
|
|
28
|
-
continue
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
for (
|
|
32
|
-
let maskDigitIndex = 0;
|
|
33
|
-
maskDigitIndex < maskPart.length;
|
|
34
|
-
maskDigitIndex++
|
|
35
|
-
) {
|
|
36
|
-
const currentCharacter = textPart[maskDigitIndex]
|
|
37
|
-
|
|
38
|
-
if (isBackSpace && currentCharacter === undefined) {
|
|
39
|
-
continue
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
const character = textPart[maskDigitIndex]
|
|
43
|
-
|
|
44
|
-
if (character !== undefined) {
|
|
45
|
-
partString.push(character)
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
finalString.push(partString.join(''))
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
const lastPart = finalString[finalString.length - 1]
|
|
53
|
-
const lastMaskPart = maskParts[finalString.length - 1]
|
|
54
|
-
if (
|
|
55
|
-
// if mask is completed
|
|
56
|
-
finalString.length !== maskParts.length &&
|
|
57
|
-
// or ...
|
|
58
|
-
lastPart &&
|
|
59
|
-
lastMaskPart &&
|
|
60
|
-
lastPart.length === lastMaskPart.length
|
|
61
|
-
) {
|
|
62
|
-
return (
|
|
63
|
-
finalString.join(splitCharacter) + (isBackSpace ? '' : splitCharacter)
|
|
64
|
-
)
|
|
65
|
-
}
|
|
66
|
-
return finalString.join(splitCharacter)
|
|
67
|
-
}
|
|
68
|
-
|
|
69
10
|
function TextInputWithMask(
|
|
70
11
|
{
|
|
71
12
|
onChangeText,
|
|
@@ -82,15 +23,41 @@ function TextInputWithMask(
|
|
|
82
23
|
)
|
|
83
24
|
|
|
84
25
|
const onInnerChange = (text: string) => {
|
|
85
|
-
|
|
86
|
-
|
|
26
|
+
const splitCharacter = detectCharacter(mask)
|
|
27
|
+
const maskParts = mask.split(splitCharacter)
|
|
28
|
+
|
|
29
|
+
let trimmedText = text.trim()
|
|
30
|
+
const format =
|
|
31
|
+
maskParts[0].toLowerCase() +
|
|
32
|
+
splitCharacter +
|
|
33
|
+
maskParts[1].toLowerCase() +
|
|
34
|
+
splitCharacter +
|
|
35
|
+
maskParts[2].toLowerCase()
|
|
36
|
+
const match = new RegExp(
|
|
37
|
+
format
|
|
38
|
+
.replace(/(\w+)\W(\w+)\W(\w+)/, '^\\s*($1)\\W*($2)?\\W*($3)?([0-9]*).*')
|
|
39
|
+
.replace(/m|d|y/g, '\\d')
|
|
40
|
+
)
|
|
41
|
+
const replaceValue = format.match(/\W/)
|
|
42
|
+
const replace = `$1${splitCharacter}$2${splitCharacter}$3$4`.replace(
|
|
43
|
+
new RegExp(splitCharacter, 'g'),
|
|
44
|
+
(replaceValue ?? '') as string
|
|
45
|
+
)
|
|
46
|
+
|
|
47
|
+
const isBackSpace = controlledValue.length > trimmedText.length
|
|
48
|
+
|
|
49
|
+
if (!isBackSpace) {
|
|
50
|
+
trimmedText = trimmedText
|
|
51
|
+
.replace(/(^|\W)(?=\d\W)/g, '$10')
|
|
52
|
+
.replace(match, replace)
|
|
53
|
+
.replace(/(\W)+/g, '$1')
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
if (trimmedText.length === mask.length) {
|
|
57
|
+
onChangeText && onChangeText(trimmedText)
|
|
87
58
|
}
|
|
88
|
-
setControlledValue(text)
|
|
89
|
-
}
|
|
90
59
|
|
|
91
|
-
|
|
92
|
-
const enhancedText = enhanceTextWithMask(value, mask, controlledValue)
|
|
93
|
-
setControlledValue(enhancedText)
|
|
60
|
+
setControlledValue(trimmedText)
|
|
94
61
|
}
|
|
95
62
|
|
|
96
63
|
React.useEffect(() => {
|
|
@@ -107,7 +74,7 @@ function TextInputWithMask(
|
|
|
107
74
|
onChange={(e) => {
|
|
108
75
|
onChange && onChange(e)
|
|
109
76
|
}}
|
|
110
|
-
|
|
77
|
+
maxLength={10}
|
|
111
78
|
/>
|
|
112
79
|
)
|
|
113
80
|
}
|