@secondstaxorg/sscomp 1.8.53 → 1.8.55
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/dist/index.es.js +2 -2
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +78 -17
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +2 -2
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
- package/types/components/NumberField/type.d.ts +4 -0
package/dist/index.js
CHANGED
|
@@ -22250,13 +22250,13 @@ const TextField = (props) => {
|
|
|
22250
22250
|
},[value]);
|
|
22251
22251
|
|
|
22252
22252
|
React$1.useEffect(()=>{
|
|
22253
|
-
if (inputVal
|
|
22253
|
+
if (inputVal){
|
|
22254
22254
|
setBorderColor('success');
|
|
22255
22255
|
}
|
|
22256
22256
|
},[inputVal]);
|
|
22257
22257
|
|
|
22258
22258
|
function validate(){
|
|
22259
|
-
if (inputVal
|
|
22259
|
+
if (inputVal){
|
|
22260
22260
|
setBorderColor('success');
|
|
22261
22261
|
setErr(false);
|
|
22262
22262
|
}else {
|
|
@@ -31652,18 +31652,61 @@ const _jsxFileName$2 = "D:\\SSX\\Project\\Component Library\\sscomp\\src\\compon
|
|
|
31652
31652
|
* This component is used to render a number or amount field. The latter is rendered when `currencyFlagPath` prop is supplied.
|
|
31653
31653
|
*/
|
|
31654
31654
|
const NumberField = (props) => {
|
|
31655
|
-
let {label,subtext,errMsg,disabled,required,width,value,currencyFlagPath,onChange,placeholder,readonly,minValue,maxValue ,...rest} = props;
|
|
31655
|
+
let {label,subtext,errMsg,disabled,required,width,value,currencyFlagPath,onChange,placeholder,readonly,minValue,maxValue,valueRange ,...rest} = props;
|
|
31656
31656
|
|
|
31657
31657
|
const [borderColor,setBorderColor] = React$1.useState('');
|
|
31658
31658
|
const [inputVal,setInputVal] = React$1.useState(isNaN(Number(value)) ? '' : value);
|
|
31659
|
+
const [rangeError,setRangeError] = React$1.useState('');
|
|
31659
31660
|
const [err,setErr] = React$1.useState(false);
|
|
31661
|
+
const [rangeMin,setRangeMin] = React$1.useState(0);
|
|
31662
|
+
const [rangeMax,setRangeMax] = React$1.useState(0);
|
|
31663
|
+
const inputRef = React$1.useRef();
|
|
31664
|
+
const rangeErrMsg = `Enter a number between ${rangeMin} and ${rangeMax}`;
|
|
31660
31665
|
|
|
31661
31666
|
React$1.useEffect(() => {
|
|
31662
31667
|
if (inputVal){
|
|
31668
|
+
if (valueRange){
|
|
31669
|
+
validateRange();
|
|
31670
|
+
return
|
|
31671
|
+
}
|
|
31663
31672
|
validate();
|
|
31664
31673
|
}
|
|
31665
31674
|
}, [inputVal,value]);
|
|
31666
31675
|
|
|
31676
|
+
React$1.useEffect(()=>{
|
|
31677
|
+
if (valueRange){
|
|
31678
|
+
//if result is a positive integer, index 1 is greater than index 0
|
|
31679
|
+
if(valueRange[1]-valueRange[0] < 0){
|
|
31680
|
+
setRangeMin(valueRange[1]);
|
|
31681
|
+
setRangeMax(valueRange[0]);
|
|
31682
|
+
}else {
|
|
31683
|
+
setRangeMin(valueRange[0]);
|
|
31684
|
+
setRangeMax(valueRange[1]);
|
|
31685
|
+
}
|
|
31686
|
+
}
|
|
31687
|
+
},[valueRange]);
|
|
31688
|
+
|
|
31689
|
+
function validateRange(){
|
|
31690
|
+
if (inputVal && rangeMax && rangeMin){
|
|
31691
|
+
if (Number(inputVal) < rangeMin || Number(inputVal) > rangeMax){
|
|
31692
|
+
setBorderColor('error');
|
|
31693
|
+
setErr(true);
|
|
31694
|
+
setRangeError(rangeErrMsg);
|
|
31695
|
+
inputRef.current.setCustomValidity(rangeErrMsg);
|
|
31696
|
+
return 'invalid'
|
|
31697
|
+
}else {
|
|
31698
|
+
setBorderColor('success');
|
|
31699
|
+
setErr(false);
|
|
31700
|
+
setRangeError('');
|
|
31701
|
+
inputRef.current.setCustomValidity('');
|
|
31702
|
+
return 'valid'
|
|
31703
|
+
}
|
|
31704
|
+
}else {
|
|
31705
|
+
setRangeError('');
|
|
31706
|
+
inputRef.current.setCustomValidity('');
|
|
31707
|
+
}
|
|
31708
|
+
}
|
|
31709
|
+
|
|
31667
31710
|
function validate(){
|
|
31668
31711
|
if (inputVal){
|
|
31669
31712
|
setBorderColor('success');
|
|
@@ -31684,31 +31727,49 @@ const NumberField = (props) => {
|
|
|
31684
31727
|
};
|
|
31685
31728
|
|
|
31686
31729
|
return (
|
|
31687
|
-
React$1.createElement('div', { style: style, __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber:
|
|
31730
|
+
React$1.createElement('div', { style: style, __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 86}}
|
|
31688
31731
|
, label &&
|
|
31689
|
-
React$1.createElement(InputLabel, {__self: undefined, __source: {fileName: _jsxFileName$2, lineNumber:
|
|
31690
|
-
, React$1.createElement('label', { className: "paragraph2Medium", __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber:
|
|
31691
|
-
, subtext && React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber:
|
|
31732
|
+
React$1.createElement(InputLabel, {__self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 88}}
|
|
31733
|
+
, React$1.createElement('label', { className: "paragraph2Medium", __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 89}}, label)
|
|
31734
|
+
, subtext && React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 90}}, subtext)
|
|
31692
31735
|
)
|
|
31693
31736
|
|
|
31694
|
-
, React$1.createElement(InputContainer, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, style: {width:width ? width : '100%',border:disabled ? `1px solid ${theme.colors["neutral-100"]}` : ''}, __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber:
|
|
31695
|
-
, currencyFlagPath && React$1.createElement('img', { src: currencyFlagPath, alt: "currency flag" , __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber:
|
|
31696
|
-
, React$1.createElement(InputField, { type: "text", value: inputVal, onBlur:
|
|
31737
|
+
, React$1.createElement(InputContainer, { className: `${borderColor} ${disabled ? 'disabled' : ''}`, style: {width:width ? width : '100%',border:disabled ? `1px solid ${theme.colors["neutral-100"]}` : ''}, __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 93}}
|
|
31738
|
+
, currencyFlagPath && React$1.createElement('img', { src: currencyFlagPath, alt: "currency flag" , __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 94}})
|
|
31739
|
+
, React$1.createElement(InputField, { ref: inputRef, type: "text", value: inputVal, onBlur: ()=>{
|
|
31740
|
+
if (valueRange && valueRange.length > 0) {
|
|
31741
|
+
if (validateRange() == 'invalid') return
|
|
31742
|
+
}
|
|
31743
|
+
validate();
|
|
31744
|
+
}, onInvalid: ()=>{
|
|
31745
|
+
if (valueRange && valueRange.length > 0) {
|
|
31746
|
+
if (validateRange() == 'invalid') return
|
|
31747
|
+
}
|
|
31748
|
+
validate();
|
|
31749
|
+
}, onChange: (e)=>{
|
|
31697
31750
|
if (readonly) return
|
|
31698
31751
|
if (isNaN(Number(e.target.value))) return
|
|
31699
|
-
if (minValue && Number(e.target.value) < minValue) return
|
|
31700
|
-
if (maxValue && Number(e.target.value) > maxValue) return
|
|
31752
|
+
if (minValue && Number(e.target.value) < minValue || maxValue && Number(e.target.value) > maxValue) return
|
|
31701
31753
|
onChange(e.target.value);
|
|
31702
31754
|
setInputVal(e.target.value);
|
|
31703
|
-
}, placeholder: placeholder, required: required, ...rest, __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber:
|
|
31755
|
+
}, placeholder: placeholder, required: required, ...rest, __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 95}})
|
|
31704
31756
|
)
|
|
31705
31757
|
, !inputVal && required && err &&
|
|
31706
|
-
React$1.createElement(ErrorMessage, {__self: undefined, __source: {fileName: _jsxFileName$2, lineNumber:
|
|
31758
|
+
React$1.createElement(ErrorMessage, {__self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 114}}
|
|
31759
|
+
/*exclamation-triangle*/
|
|
31760
|
+
, React$1.createElement('svg', { width: "16", height: "14", viewBox: "0 0 16 14" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 116}}
|
|
31761
|
+
, React$1.createElement('path', { d: "M8.00006 9.66669C7.86821 9.66669 7.73931 9.70578 7.62968 9.77904C7.52005 9.85229 7.4346 9.95641 7.38414 10.0782C7.33368 10.2 7.32048 10.3341 7.3462 10.4634C7.37193 10.5927 7.43542 10.7115 7.52866 10.8048C7.62189 10.898 7.74068 10.9615 7.87 10.9872C7.99932 11.0129 8.13336 10.9997 8.25518 10.9493C8.377 10.8988 8.48112 10.8134 8.55437 10.7037C8.62763 10.5941 8.66673 10.4652 8.66673 10.3334C8.66673 10.1565 8.59649 9.98697 8.47146 9.86195C8.34644 9.73692 8.17687 9.66669 8.00006 9.66669ZM15.1134 10.6467L9.74673 1.31335C9.57326 1.00236 9.31992 0.743323 9.01285 0.562997C8.70579 0.382672 8.35615 0.287598 8.00006 0.287598C7.64396 0.287598 7.29433 0.382672 6.98726 0.562997C6.6802 0.743323 6.42686 1.00236 6.25339 1.31335L0.92006 10.6467C0.74059 10.9494 0.644155 11.294 0.640489 11.6459C0.636824 11.9978 0.726058 12.3444 0.899184 12.6507C1.07231 12.9571 1.3232 13.2123 1.62652 13.3907C1.92984 13.5691 2.27485 13.6643 2.62673 13.6667H13.3734C13.7281 13.6702 14.0773 13.5793 14.3853 13.4033C14.6933 13.2273 14.949 12.9726 15.126 12.6652C15.3031 12.3579 15.3953 12.009 15.3931 11.6542C15.3908 11.2995 15.2943 10.9518 15.1134 10.6467ZM13.9601 11.98C13.9016 12.084 13.8164 12.1704 13.7132 12.2302C13.61 12.29 13.4927 12.321 13.3734 12.32H2.62673C2.50747 12.321 2.39013 12.29 2.28694 12.2302C2.18375 12.1704 2.0985 12.084 2.04006 11.98C1.98155 11.8787 1.95074 11.7637 1.95074 11.6467C1.95074 11.5297 1.98155 11.4147 2.04006 11.3134L7.37339 1.98002C7.42934 1.87082 7.51433 1.77917 7.61902 1.71518C7.72371 1.65119 7.84403 1.61733 7.96673 1.61733C8.08942 1.61733 8.20974 1.65119 8.31443 1.71518C8.41912 1.77917 8.50411 1.87082 8.56006 1.98002L13.9267 11.3134C13.9929 11.4132 14.0309 11.5291 14.0367 11.6488C14.0426 11.7684 14.0161 11.8875 13.9601 11.9934V11.98ZM8.00006 4.33335C7.82325 4.33335 7.65368 4.40359 7.52866 4.52861C7.40363 4.65364 7.33339 4.82321 7.33339 5.00002V7.66669C7.33339 7.8435 7.40363 8.01307 7.52866 8.13809C7.65368 8.26311 7.82325 8.33335 8.00006 8.33335C8.17687 8.33335 8.34644 8.26311 8.47146 8.13809C8.59649 8.01307 8.66673 7.8435 8.66673 7.66669V5.00002C8.66673 4.82321 8.59649 4.65364 8.47146 4.52861C8.34644 4.40359 8.17687 4.33335 8.00006 4.33335Z" , fill: "#F80000", __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 117}})
|
|
31762
|
+
)
|
|
31763
|
+
, errMsg ? React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 119}}, errMsg) : React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 119}}, "This field is required" )
|
|
31764
|
+
)
|
|
31765
|
+
|
|
31766
|
+
, rangeError &&
|
|
31767
|
+
React$1.createElement(ErrorMessage, {__self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 123}}
|
|
31707
31768
|
/*exclamation-triangle*/
|
|
31708
|
-
, React$1.createElement('svg', { width: "16", height: "14", viewBox: "0 0 16 14" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber:
|
|
31709
|
-
, React$1.createElement('path', { d: "M8.00006 9.66669C7.86821 9.66669 7.73931 9.70578 7.62968 9.77904C7.52005 9.85229 7.4346 9.95641 7.38414 10.0782C7.33368 10.2 7.32048 10.3341 7.3462 10.4634C7.37193 10.5927 7.43542 10.7115 7.52866 10.8048C7.62189 10.898 7.74068 10.9615 7.87 10.9872C7.99932 11.0129 8.13336 10.9997 8.25518 10.9493C8.377 10.8988 8.48112 10.8134 8.55437 10.7037C8.62763 10.5941 8.66673 10.4652 8.66673 10.3334C8.66673 10.1565 8.59649 9.98697 8.47146 9.86195C8.34644 9.73692 8.17687 9.66669 8.00006 9.66669ZM15.1134 10.6467L9.74673 1.31335C9.57326 1.00236 9.31992 0.743323 9.01285 0.562997C8.70579 0.382672 8.35615 0.287598 8.00006 0.287598C7.64396 0.287598 7.29433 0.382672 6.98726 0.562997C6.6802 0.743323 6.42686 1.00236 6.25339 1.31335L0.92006 10.6467C0.74059 10.9494 0.644155 11.294 0.640489 11.6459C0.636824 11.9978 0.726058 12.3444 0.899184 12.6507C1.07231 12.9571 1.3232 13.2123 1.62652 13.3907C1.92984 13.5691 2.27485 13.6643 2.62673 13.6667H13.3734C13.7281 13.6702 14.0773 13.5793 14.3853 13.4033C14.6933 13.2273 14.949 12.9726 15.126 12.6652C15.3031 12.3579 15.3953 12.009 15.3931 11.6542C15.3908 11.2995 15.2943 10.9518 15.1134 10.6467ZM13.9601 11.98C13.9016 12.084 13.8164 12.1704 13.7132 12.2302C13.61 12.29 13.4927 12.321 13.3734 12.32H2.62673C2.50747 12.321 2.39013 12.29 2.28694 12.2302C2.18375 12.1704 2.0985 12.084 2.04006 11.98C1.98155 11.8787 1.95074 11.7637 1.95074 11.6467C1.95074 11.5297 1.98155 11.4147 2.04006 11.3134L7.37339 1.98002C7.42934 1.87082 7.51433 1.77917 7.61902 1.71518C7.72371 1.65119 7.84403 1.61733 7.96673 1.61733C8.08942 1.61733 8.20974 1.65119 8.31443 1.71518C8.41912 1.77917 8.50411 1.87082 8.56006 1.98002L13.9267 11.3134C13.9929 11.4132 14.0309 11.5291 14.0367 11.6488C14.0426 11.7684 14.0161 11.8875 13.9601 11.9934V11.98ZM8.00006 4.33335C7.82325 4.33335 7.65368 4.40359 7.52866 4.52861C7.40363 4.65364 7.33339 4.82321 7.33339 5.00002V7.66669C7.33339 7.8435 7.40363 8.01307 7.52866 8.13809C7.65368 8.26311 7.82325 8.33335 8.00006 8.33335C8.17687 8.33335 8.34644 8.26311 8.47146 8.13809C8.59649 8.01307 8.66673 7.8435 8.66673 7.66669V5.00002C8.66673 4.82321 8.59649 4.65364 8.47146 4.52861C8.34644 4.40359 8.17687 4.33335 8.00006 4.33335Z" , fill: "#F80000", __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber:
|
|
31769
|
+
, React$1.createElement('svg', { width: "16", height: "14", viewBox: "0 0 16 14" , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 125}}
|
|
31770
|
+
, React$1.createElement('path', { d: "M8.00006 9.66669C7.86821 9.66669 7.73931 9.70578 7.62968 9.77904C7.52005 9.85229 7.4346 9.95641 7.38414 10.0782C7.33368 10.2 7.32048 10.3341 7.3462 10.4634C7.37193 10.5927 7.43542 10.7115 7.52866 10.8048C7.62189 10.898 7.74068 10.9615 7.87 10.9872C7.99932 11.0129 8.13336 10.9997 8.25518 10.9493C8.377 10.8988 8.48112 10.8134 8.55437 10.7037C8.62763 10.5941 8.66673 10.4652 8.66673 10.3334C8.66673 10.1565 8.59649 9.98697 8.47146 9.86195C8.34644 9.73692 8.17687 9.66669 8.00006 9.66669ZM15.1134 10.6467L9.74673 1.31335C9.57326 1.00236 9.31992 0.743323 9.01285 0.562997C8.70579 0.382672 8.35615 0.287598 8.00006 0.287598C7.64396 0.287598 7.29433 0.382672 6.98726 0.562997C6.6802 0.743323 6.42686 1.00236 6.25339 1.31335L0.92006 10.6467C0.74059 10.9494 0.644155 11.294 0.640489 11.6459C0.636824 11.9978 0.726058 12.3444 0.899184 12.6507C1.07231 12.9571 1.3232 13.2123 1.62652 13.3907C1.92984 13.5691 2.27485 13.6643 2.62673 13.6667H13.3734C13.7281 13.6702 14.0773 13.5793 14.3853 13.4033C14.6933 13.2273 14.949 12.9726 15.126 12.6652C15.3031 12.3579 15.3953 12.009 15.3931 11.6542C15.3908 11.2995 15.2943 10.9518 15.1134 10.6467ZM13.9601 11.98C13.9016 12.084 13.8164 12.1704 13.7132 12.2302C13.61 12.29 13.4927 12.321 13.3734 12.32H2.62673C2.50747 12.321 2.39013 12.29 2.28694 12.2302C2.18375 12.1704 2.0985 12.084 2.04006 11.98C1.98155 11.8787 1.95074 11.7637 1.95074 11.6467C1.95074 11.5297 1.98155 11.4147 2.04006 11.3134L7.37339 1.98002C7.42934 1.87082 7.51433 1.77917 7.61902 1.71518C7.72371 1.65119 7.84403 1.61733 7.96673 1.61733C8.08942 1.61733 8.20974 1.65119 8.31443 1.71518C8.41912 1.77917 8.50411 1.87082 8.56006 1.98002L13.9267 11.3134C13.9929 11.4132 14.0309 11.5291 14.0367 11.6488C14.0426 11.7684 14.0161 11.8875 13.9601 11.9934V11.98ZM8.00006 4.33335C7.82325 4.33335 7.65368 4.40359 7.52866 4.52861C7.40363 4.65364 7.33339 4.82321 7.33339 5.00002V7.66669C7.33339 7.8435 7.40363 8.01307 7.52866 8.13809C7.65368 8.26311 7.82325 8.33335 8.00006 8.33335C8.17687 8.33335 8.34644 8.26311 8.47146 8.13809C8.59649 8.01307 8.66673 7.8435 8.66673 7.66669V5.00002C8.66673 4.82321 8.59649 4.65364 8.47146 4.52861C8.34644 4.40359 8.17687 4.33335 8.00006 4.33335Z" , fill: "#F80000", __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 126}})
|
|
31710
31771
|
)
|
|
31711
|
-
,
|
|
31772
|
+
, rangeError && React$1.createElement('span', { className: "paragraph1Regular", __self: undefined, __source: {fileName: _jsxFileName$2, lineNumber: 128}}, rangeError)
|
|
31712
31773
|
)
|
|
31713
31774
|
|
|
31714
31775
|
)
|