@xaypay/tui 0.0.120 → 0.0.122
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 +114 -244
- package/dist/index.js +114 -244
- package/package.json +1 -1
- package/storybook-static/favicon.ico +0 -0
package/dist/index.es.js
CHANGED
|
@@ -436,7 +436,6 @@ const compereConfigs = () => {
|
|
|
436
436
|
projectConfig = {};
|
|
437
437
|
// console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
|
|
438
438
|
}
|
|
439
|
-
|
|
440
439
|
return _.merge(packageConfig, projectConfig);
|
|
441
440
|
};
|
|
442
441
|
const hasOwnerProperty = (object, property) => {
|
|
@@ -476,11 +475,6 @@ const Button = ({
|
|
|
476
475
|
...props
|
|
477
476
|
}) => {
|
|
478
477
|
const [isHover, setIsHover] = useState(false);
|
|
479
|
-
useEffect(() => {
|
|
480
|
-
if (!label && !icon) {
|
|
481
|
-
alert('Add icon or label props on Button component');
|
|
482
|
-
}
|
|
483
|
-
}, []);
|
|
484
478
|
const configStyles = compereConfigs();
|
|
485
479
|
const classProps = classnames(className ? className : configStyles.BUTTON.className);
|
|
486
480
|
const handleMouseEnter = () => {
|
|
@@ -489,6 +483,11 @@ const Button = ({
|
|
|
489
483
|
const handleMouseLeave = () => {
|
|
490
484
|
setIsHover(false);
|
|
491
485
|
};
|
|
486
|
+
useEffect(() => {
|
|
487
|
+
if (!label && !icon) {
|
|
488
|
+
alert('Add icon or label props on Button component');
|
|
489
|
+
}
|
|
490
|
+
}, []);
|
|
492
491
|
return /*#__PURE__*/React__default.createElement("button", _extends({
|
|
493
492
|
style: {
|
|
494
493
|
display: 'flex',
|
|
@@ -783,14 +782,14 @@ const File = ({
|
|
|
783
782
|
change({
|
|
784
783
|
file: file[ix],
|
|
785
784
|
uuid: v4(),
|
|
786
|
-
check: formatError
|
|
785
|
+
check: formatError ? formatError : configStyles.FILE.formatError
|
|
787
786
|
});
|
|
788
787
|
}
|
|
789
788
|
} else {
|
|
790
789
|
change({
|
|
791
790
|
file: file[ix],
|
|
792
791
|
uuid: v4(),
|
|
793
|
-
check: maxSizeError
|
|
792
|
+
check: maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError
|
|
794
793
|
});
|
|
795
794
|
}
|
|
796
795
|
}
|
|
@@ -812,14 +811,14 @@ const File = ({
|
|
|
812
811
|
change({
|
|
813
812
|
file: file[ix],
|
|
814
813
|
uuid: v4(),
|
|
815
|
-
check: formatError
|
|
814
|
+
check: formatError ? formatError : configStyles.FILE.formatError
|
|
816
815
|
});
|
|
817
816
|
}
|
|
818
817
|
} else {
|
|
819
818
|
change({
|
|
820
819
|
file: file[ix],
|
|
821
820
|
uuid: v4(),
|
|
822
|
-
check: maxSizeError
|
|
821
|
+
check: maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError
|
|
823
822
|
});
|
|
824
823
|
}
|
|
825
824
|
}
|
|
@@ -833,7 +832,7 @@ const File = ({
|
|
|
833
832
|
setImage(null);
|
|
834
833
|
handleUploadFiles(file);
|
|
835
834
|
if (file.length === 0 && memoizedItems.length === 0) {
|
|
836
|
-
setError(noChoosenFile);
|
|
835
|
+
setError(noChoosenFile ? noChoosenFile : configStyles.FILE.noChoosenFile);
|
|
837
836
|
}
|
|
838
837
|
} else {
|
|
839
838
|
if (file[0]) {
|
|
@@ -851,16 +850,16 @@ const File = ({
|
|
|
851
850
|
}
|
|
852
851
|
} else {
|
|
853
852
|
setImage(null);
|
|
854
|
-
setError(formatError);
|
|
853
|
+
setError(formatError ? formatError : configStyles.FILE.formatError);
|
|
855
854
|
}
|
|
856
855
|
} else {
|
|
857
856
|
setImage(null);
|
|
858
|
-
setError(maxSizeError);
|
|
857
|
+
setError(maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError);
|
|
859
858
|
}
|
|
860
859
|
}
|
|
861
860
|
if (file.length === 0) {
|
|
862
861
|
setImage(null);
|
|
863
|
-
setError(noChoosenFile);
|
|
862
|
+
setError(noChoosenFile ? noChoosenFile : configStyles.FILE.noChoosenFile);
|
|
864
863
|
}
|
|
865
864
|
}
|
|
866
865
|
};
|
|
@@ -1770,11 +1769,11 @@ const Table = ({
|
|
|
1770
1769
|
openListFontFamily,
|
|
1771
1770
|
hideBorder
|
|
1772
1771
|
}) => {
|
|
1772
|
+
const configStyles = compereConfigs();
|
|
1773
1773
|
const [body, setBody] = useState([]);
|
|
1774
1774
|
const [header, setHeader] = useState([]);
|
|
1775
1775
|
const [disableArr, setDisableArr] = useState([]);
|
|
1776
1776
|
const [checkedArray, setCheckedArray] = useState([]);
|
|
1777
|
-
const configStyles = compereConfigs();
|
|
1778
1777
|
const handleCheckIfArrow = (bodyData, data) => {
|
|
1779
1778
|
let removeItemIndex;
|
|
1780
1779
|
let headerWithoutArrow = [];
|
|
@@ -2878,6 +2877,7 @@ const Input = ({
|
|
|
2878
2877
|
const [show, setShow] = useState(false);
|
|
2879
2878
|
const [isHover, setIsHover] = useState(false);
|
|
2880
2879
|
const [innerValue, setInnerValue] = useState('');
|
|
2880
|
+
const [innerMinNumSize, setInnerMinNumSize] = useState(0);
|
|
2881
2881
|
const [innerErrorMessage, setInnerErrorMessage] = useState('');
|
|
2882
2882
|
const random = Math.floor(Math.random() * 1000 + 1);
|
|
2883
2883
|
const configStyles = compereConfigs();
|
|
@@ -2895,133 +2895,102 @@ const Input = ({
|
|
|
2895
2895
|
const animation = () => css`
|
|
2896
2896
|
${errorShow} ${errorAnimationDuration ? errorAnimationDuration : configStyles.INPUT.errorAnimationDuration} forwards
|
|
2897
2897
|
`;
|
|
2898
|
-
const
|
|
2899
|
-
const currentValue = event.target.value;
|
|
2900
|
-
let prevValue = innerValue;
|
|
2901
|
-
setInnerValue(() => currentValue);
|
|
2902
|
-
if (change) {
|
|
2903
|
-
change(currentValue);
|
|
2904
|
-
}
|
|
2898
|
+
const handleCheckTypeTel = (val, prevVal) => {
|
|
2905
2899
|
if (type === 'tel') {
|
|
2906
|
-
if (!phoneNumberRegex.test(
|
|
2907
|
-
if (
|
|
2900
|
+
if (!phoneNumberRegex.test(val)) {
|
|
2901
|
+
if (val === '') {
|
|
2908
2902
|
setInnerErrorMessage('');
|
|
2909
2903
|
} else {
|
|
2910
2904
|
telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
2911
|
-
|
|
2912
|
-
if (change) {
|
|
2913
|
-
change(prevValue);
|
|
2914
|
-
}
|
|
2905
|
+
val = prevVal;
|
|
2915
2906
|
}
|
|
2916
2907
|
} else {
|
|
2917
2908
|
setInnerErrorMessage('');
|
|
2918
|
-
if (
|
|
2919
|
-
|
|
2920
|
-
if (change) {
|
|
2921
|
-
change(currentValue.substr(0, 8));
|
|
2922
|
-
}
|
|
2909
|
+
if (val.length > 8) {
|
|
2910
|
+
val = val.substr(0, 8);
|
|
2923
2911
|
}
|
|
2924
2912
|
}
|
|
2925
2913
|
}
|
|
2914
|
+
return val;
|
|
2915
|
+
};
|
|
2916
|
+
const handleCheckTypeNumber = (val, prevVal) => {
|
|
2926
2917
|
if (type === 'number') {
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
if (change) {
|
|
2931
|
-
change(`${minNumSize}`);
|
|
2918
|
+
if (maxLength && maxLength > 0) {
|
|
2919
|
+
if (val.length > maxLength) {
|
|
2920
|
+
val = val.substr(0, maxLength);
|
|
2932
2921
|
}
|
|
2933
|
-
}
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
change(`${maxNumSize}`);
|
|
2922
|
+
} else {
|
|
2923
|
+
const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
|
|
2924
|
+
if (val.length > 16 && !val.includes('.')) {
|
|
2925
|
+
val = val.substr(0, 16);
|
|
2938
2926
|
}
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
|
|
2956
|
-
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
change(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
2961
|
-
}
|
|
2962
|
-
}
|
|
2963
|
-
} else if (float[1] !== undefined && float[1] !== '0') {
|
|
2964
|
-
if (float[2] === undefined || float[2] === '0') {
|
|
2965
|
-
setInnerValue(`${int}.${float[0]}${float[1]}`);
|
|
2966
|
-
if (change) {
|
|
2967
|
-
change(`${int}.${float[0]}${float[1]}`);
|
|
2968
|
-
}
|
|
2969
|
-
} else if (float[2] !== undefined && float[2] !== '0') {
|
|
2970
|
-
setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
2971
|
-
if (change) {
|
|
2972
|
-
change(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
2973
|
-
}
|
|
2927
|
+
if (val > Number.MAX_SAFE_INTEGER) {
|
|
2928
|
+
val = prevVal;
|
|
2929
|
+
}
|
|
2930
|
+
if (val < Number.MIN_SAFE_INTEGER) {
|
|
2931
|
+
val = prevVal;
|
|
2932
|
+
}
|
|
2933
|
+
if (innerMinNumSize && val < innerMinNumSize) {
|
|
2934
|
+
val = prevVal;
|
|
2935
|
+
}
|
|
2936
|
+
if (maxNumSize && val > maxNumSize) {
|
|
2937
|
+
val = prevVal;
|
|
2938
|
+
}
|
|
2939
|
+
if (floatToFix > 0) {
|
|
2940
|
+
const floatNumParts = typeof val === 'string' ? val.split('.') : val;
|
|
2941
|
+
const int = floatNumParts[0];
|
|
2942
|
+
const float = floatNumParts[1];
|
|
2943
|
+
if (float && float.length > 0) {
|
|
2944
|
+
let floatResult = '';
|
|
2945
|
+
[...float].map((item, index) => {
|
|
2946
|
+
if (index + 1 <= floatToFix) {
|
|
2947
|
+
floatResult += item;
|
|
2974
2948
|
}
|
|
2949
|
+
});
|
|
2950
|
+
if (floatResult !== '') {
|
|
2951
|
+
val = `${int}.${floatResult}`;
|
|
2952
|
+
} else {
|
|
2953
|
+
val = `${int}`;
|
|
2975
2954
|
}
|
|
2976
2955
|
}
|
|
2977
|
-
}
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
2982
|
-
setInnerValue(`${int}`);
|
|
2983
|
-
if (change) {
|
|
2984
|
-
change(`${int}`);
|
|
2956
|
+
} else {
|
|
2957
|
+
const floatNumParts = typeof val === 'string' ? val.split('.') : val;
|
|
2958
|
+
const int = floatNumParts[0];
|
|
2959
|
+
if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
|
|
2960
|
+
val = `${int}`;
|
|
2985
2961
|
}
|
|
2986
2962
|
}
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
|
|
2992
|
-
setInnerValue(newStr);
|
|
2993
|
-
if (change) {
|
|
2994
|
-
change(newStr);
|
|
2963
|
+
if (!regNum.test(val)) {
|
|
2964
|
+
const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
2965
|
+
return b + c.replace(/\./g, '');
|
|
2966
|
+
});
|
|
2967
|
+
val = newStr;
|
|
2995
2968
|
}
|
|
2996
2969
|
}
|
|
2997
|
-
if (withoutDot && !/^\d+$/.test(
|
|
2998
|
-
const newStr =
|
|
2970
|
+
if (withoutDot && !/^\d+$/.test(val)) {
|
|
2971
|
+
const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
2999
2972
|
return b + c.replace(/\./g, '');
|
|
3000
2973
|
});
|
|
3001
|
-
|
|
3002
|
-
if (change) {
|
|
3003
|
-
change(newStr);
|
|
3004
|
-
}
|
|
3005
|
-
}
|
|
3006
|
-
if (currentValue === '') {
|
|
3007
|
-
setInnerValue('');
|
|
3008
|
-
if (change) {
|
|
3009
|
-
change('');
|
|
3010
|
-
}
|
|
2974
|
+
val = newStr;
|
|
3011
2975
|
}
|
|
3012
2976
|
}
|
|
3013
|
-
|
|
2977
|
+
return val;
|
|
2978
|
+
};
|
|
2979
|
+
const handleChange = event => {
|
|
2980
|
+
let prevValue = innerValue;
|
|
2981
|
+
let currentValue = event.target.value;
|
|
2982
|
+
const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : configStyles.INPUT.maxLength;
|
|
2983
|
+
currentValue = handleCheckTypeTel(currentValue, prevValue);
|
|
2984
|
+
currentValue = handleCheckTypeNumber(currentValue, prevValue);
|
|
3014
2985
|
if (max && currentValue.length > max && type !== 'tel' && type !== 'number') {
|
|
3015
|
-
|
|
3016
|
-
if (change) {
|
|
3017
|
-
change(currentValue.substr(0, max));
|
|
3018
|
-
}
|
|
2986
|
+
currentValue = currentValue.substr(0, max);
|
|
3019
2987
|
}
|
|
3020
2988
|
if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
|
|
3021
2989
|
!regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
|
|
2990
|
+
}
|
|
2991
|
+
setInnerValue(() => currentValue);
|
|
2992
|
+
if (change && currentValue !== prevValue) {
|
|
2993
|
+
change(currentValue);
|
|
3025
2994
|
}
|
|
3026
2995
|
};
|
|
3027
2996
|
const handleMouseEnter = () => {
|
|
@@ -3034,140 +3003,41 @@ const Input = ({
|
|
|
3034
3003
|
setShow(!show);
|
|
3035
3004
|
};
|
|
3036
3005
|
useEffect(() => {
|
|
3006
|
+
let newValue = value;
|
|
3037
3007
|
if (errorMessage) {
|
|
3038
3008
|
setInnerErrorMessage(errorMessage);
|
|
3039
3009
|
} else {
|
|
3040
3010
|
setInnerErrorMessage('');
|
|
3041
3011
|
}
|
|
3012
|
+
if (minNumSize && minNumSize < 0) {
|
|
3013
|
+
setInnerMinNumSize(0);
|
|
3014
|
+
alert('minNumSize prop can\'t be less then 0');
|
|
3015
|
+
} else if (minNumSize && minNumSize >= 0) {
|
|
3016
|
+
setInnerMinNumSize(minNumSize);
|
|
3017
|
+
}
|
|
3018
|
+
if (type === 'number' && (maxNumSize || maxNumSize === 0 || minNumSize || minNumSize === 0) && (maxLength || maxLength === 0)) {
|
|
3019
|
+
alert("You can't use maxNumSize or minNumSize and maxLength props together when Input type is number");
|
|
3020
|
+
}
|
|
3021
|
+
if (type === 'number' && maxNumSize < minNumSize) {
|
|
3022
|
+
alert("maxNumSize prop can't be less then minNumSize");
|
|
3023
|
+
}
|
|
3042
3024
|
if (value !== undefined) {
|
|
3043
3025
|
if (value === null) {
|
|
3044
|
-
|
|
3026
|
+
newValue = '';
|
|
3045
3027
|
} else {
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
// if (!phoneNumberRegex.test(value)) {
|
|
3050
|
-
// if (value === '') {
|
|
3051
|
-
// setInnerErrorMessage('');
|
|
3052
|
-
// } else {
|
|
3053
|
-
// telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
3054
|
-
// }
|
|
3055
|
-
// } else {
|
|
3056
|
-
// if (value.length < 8) {
|
|
3057
|
-
// telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
3058
|
-
// } else if (value.length > 8) {
|
|
3059
|
-
// setInnerValue(value.substr(0, 8));
|
|
3060
|
-
// }
|
|
3061
|
-
// }
|
|
3062
|
-
if (value.length <= 8) {
|
|
3063
|
-
setInnerValue(value);
|
|
3064
|
-
} else {
|
|
3065
|
-
setInnerValue(value.substr(0, 8));
|
|
3066
|
-
}
|
|
3067
|
-
}
|
|
3068
|
-
if (type === 'number') {
|
|
3069
|
-
const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
|
|
3070
|
-
if (minNumSize && value < minNumSize) {
|
|
3071
|
-
setInnerValue(`${minNumSize}`);
|
|
3072
|
-
if (change) {
|
|
3073
|
-
change(`${minNumSize}`);
|
|
3074
|
-
}
|
|
3075
|
-
}
|
|
3076
|
-
if (maxNumSize && value > maxNumSize) {
|
|
3077
|
-
setInnerValue(`${maxNumSize}`);
|
|
3078
|
-
if (change) {
|
|
3079
|
-
change(`${maxNumSize}`);
|
|
3080
|
-
}
|
|
3081
|
-
}
|
|
3082
|
-
if (floatToFix > 0) {
|
|
3083
|
-
const floatNumParts = typeof value === 'string' ? value.split('.') : value;
|
|
3084
|
-
const int = floatNumParts[0];
|
|
3085
|
-
const float = floatNumParts[1];
|
|
3086
|
-
if (float) {
|
|
3087
|
-
if (float[0] === '0' || float[0] !== '0') {
|
|
3088
|
-
if (float[1] === undefined) {
|
|
3089
|
-
setInnerValue(`${int}.${float[0]}`);
|
|
3090
|
-
if (change) {
|
|
3091
|
-
change(`${int}.${float[0]}`);
|
|
3092
|
-
}
|
|
3093
|
-
} else if (float[1] === '0') {
|
|
3094
|
-
if (float[2] === undefined || float[2] === '0') {
|
|
3095
|
-
setInnerValue(`${int}.${float[0]}`);
|
|
3096
|
-
if (change) {
|
|
3097
|
-
change(`${int}.${float[0]}`);
|
|
3098
|
-
}
|
|
3099
|
-
} else if (float[2] !== undefined && float[2] !== '0') {
|
|
3100
|
-
setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
3101
|
-
if (change) {
|
|
3102
|
-
change(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
3103
|
-
}
|
|
3104
|
-
}
|
|
3105
|
-
} else if (float[1] !== undefined && float[1] !== '0') {
|
|
3106
|
-
if (float[2] === undefined || float[2] === '0') {
|
|
3107
|
-
setInnerValue(`${int}.${float[0]}${float[1]}`);
|
|
3108
|
-
if (change) {
|
|
3109
|
-
change(`${int}.${float[0]}${float[1]}`);
|
|
3110
|
-
}
|
|
3111
|
-
} else if (float[2] !== undefined && float[2] !== '0') {
|
|
3112
|
-
setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
3113
|
-
if (change) {
|
|
3114
|
-
change(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
3115
|
-
}
|
|
3116
|
-
}
|
|
3117
|
-
}
|
|
3118
|
-
}
|
|
3119
|
-
}
|
|
3120
|
-
} else {
|
|
3121
|
-
const floatNumParts = typeof value === 'string' ? value.split('.') : value;
|
|
3122
|
-
const int = floatNumParts[0];
|
|
3123
|
-
if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
|
|
3124
|
-
setInnerValue(`${int}`);
|
|
3125
|
-
if (change) {
|
|
3126
|
-
change(`${int}`);
|
|
3127
|
-
}
|
|
3128
|
-
}
|
|
3129
|
-
}
|
|
3130
|
-
if (!regNum.test(value)) {
|
|
3131
|
-
const newStr = value.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
3132
|
-
return b + c.replace(/\./g, '');
|
|
3133
|
-
});
|
|
3134
|
-
setInnerValue(newStr);
|
|
3135
|
-
if (change) {
|
|
3136
|
-
change(newStr);
|
|
3137
|
-
}
|
|
3138
|
-
}
|
|
3139
|
-
if (withoutDot && !/^\d+$/.test(value)) {
|
|
3140
|
-
const newStr = value.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
3141
|
-
return b + c.replace(/\./g, '');
|
|
3142
|
-
});
|
|
3143
|
-
setInnerValue(newStr);
|
|
3144
|
-
if (change) {
|
|
3145
|
-
change(newStr);
|
|
3146
|
-
}
|
|
3147
|
-
}
|
|
3148
|
-
if (value === '') {
|
|
3149
|
-
setInnerValue('');
|
|
3150
|
-
if (change) {
|
|
3151
|
-
change('');
|
|
3152
|
-
}
|
|
3153
|
-
}
|
|
3154
|
-
}
|
|
3155
|
-
if (maxLength && value.length > maxLength && type !== 'tel') {
|
|
3156
|
-
setInnerValue(value.substr(0, maxLength));
|
|
3157
|
-
}
|
|
3158
|
-
const max = configStyles.INPUT.maxLength || maxLength;
|
|
3028
|
+
const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : configStyles.INPUT.maxLength;
|
|
3029
|
+
newValue = handleCheckTypeTel(value, newValue);
|
|
3030
|
+
newValue = handleCheckTypeNumber(value, newValue);
|
|
3159
3031
|
if (max && value.length > max && type !== 'tel' && type !== 'number') {
|
|
3160
|
-
|
|
3161
|
-
if (change) {
|
|
3162
|
-
change(value.substr(0, max));
|
|
3163
|
-
}
|
|
3032
|
+
newValue = value.substr(0, max);
|
|
3164
3033
|
}
|
|
3165
3034
|
if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
|
|
3166
3035
|
!regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
|
|
3167
3036
|
}
|
|
3037
|
+
setInnerValue(() => newValue);
|
|
3168
3038
|
}
|
|
3169
3039
|
}
|
|
3170
|
-
}, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage
|
|
3040
|
+
}, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage, telErrorMessage]);
|
|
3171
3041
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
3172
3042
|
className: classProps
|
|
3173
3043
|
}, label ? /*#__PURE__*/React__default.createElement("label", {
|
|
@@ -3594,12 +3464,12 @@ const Select = ({
|
|
|
3594
3464
|
boxShadowHover
|
|
3595
3465
|
}) => {
|
|
3596
3466
|
const ref = useRef();
|
|
3467
|
+
const configStyles = compereConfigs();
|
|
3468
|
+
const classProps = classnames(className ? className : configStyles.SELECT.className);
|
|
3597
3469
|
const [opened, setOpened] = useState(false);
|
|
3598
3470
|
const [isHover, setIsHover] = useState(false);
|
|
3599
3471
|
const [newSelected, setNewSelected] = useState([]);
|
|
3600
3472
|
const [existOptions, setExistOptions] = useState([]);
|
|
3601
|
-
const configStyles = compereConfigs();
|
|
3602
|
-
const classProps = classnames(className ? className : configStyles.SELECT.className);
|
|
3603
3473
|
const handleOpenClose = () => {
|
|
3604
3474
|
setOpened(!opened);
|
|
3605
3475
|
};
|
|
@@ -4276,11 +4146,11 @@ const Tooltip = ({
|
|
|
4276
4146
|
tooltipBackgroundColor
|
|
4277
4147
|
}) => {
|
|
4278
4148
|
const tooltipRef = /*#__PURE__*/createRef(null);
|
|
4149
|
+
const configStyles = compereConfigs();
|
|
4150
|
+
const classProps = classnames(styles$4['tooltip-block'], className ? className : configStyles.TOOLTIP.className);
|
|
4279
4151
|
const [checkTooltipWidth, setCheckTooltipWidth] = useState(0);
|
|
4280
4152
|
const [checkTooltipHeight, setCheckTooltipHeight] = useState(0);
|
|
4281
4153
|
const [showTooltip, setShowTooltip] = useState(false);
|
|
4282
|
-
const configStyles = compereConfigs();
|
|
4283
|
-
const classProps = classnames(styles$4['tooltip-block'], className ? className : configStyles.TOOLTIP.className);
|
|
4284
4154
|
const handleShow = () => {
|
|
4285
4155
|
setShowTooltip(!showTooltip);
|
|
4286
4156
|
};
|
|
@@ -4692,12 +4562,12 @@ const Textarea = ({
|
|
|
4692
4562
|
showCharacterCount,
|
|
4693
4563
|
characterCountPosition
|
|
4694
4564
|
}) => {
|
|
4565
|
+
const configStyles = compereConfigs();
|
|
4566
|
+
const classProps = classnames(className ? className : configStyles.TEXTAREA.className);
|
|
4695
4567
|
const [error, setError] = useState('');
|
|
4696
4568
|
const [isHover, setIsHover] = useState(false);
|
|
4697
4569
|
const [isFocus, setIsFocus] = useState(false);
|
|
4698
4570
|
const [innerValue, setInnerValue] = useState('');
|
|
4699
|
-
const configStyles = compereConfigs();
|
|
4700
|
-
const classProps = classnames(className ? className : configStyles.TEXTAREA.className);
|
|
4701
4571
|
const handleMouseEnter = () => {
|
|
4702
4572
|
setIsHover(true);
|
|
4703
4573
|
};
|
|
@@ -4897,11 +4767,6 @@ const Typography = ({
|
|
|
4897
4767
|
const classProps = classnames(className ? className : configStyles.TYPOGRAPHY.className);
|
|
4898
4768
|
const [isHover, setIsHover] = useState(false);
|
|
4899
4769
|
const [validVariant, setValidVariant] = useState(false);
|
|
4900
|
-
useEffect(() => {
|
|
4901
|
-
if (!Object.values(TypographyType).includes(variant)) {
|
|
4902
|
-
setValidVariant(true);
|
|
4903
|
-
}
|
|
4904
|
-
}, [variant]);
|
|
4905
4770
|
const handleMouseEnter = () => {
|
|
4906
4771
|
setIsHover(true);
|
|
4907
4772
|
};
|
|
@@ -4931,6 +4796,11 @@ const Typography = ({
|
|
|
4931
4796
|
onMouseEnter: handleMouseEnter,
|
|
4932
4797
|
onMouseLeave: handleMouseLeave
|
|
4933
4798
|
}, [children]);
|
|
4799
|
+
useEffect(() => {
|
|
4800
|
+
if (!Object.values(TypographyType).includes(variant)) {
|
|
4801
|
+
setValidVariant(true);
|
|
4802
|
+
}
|
|
4803
|
+
}, [variant]);
|
|
4934
4804
|
return validVariant ? 'Please set Typography valid variant' : tagT;
|
|
4935
4805
|
};
|
|
4936
4806
|
Typography.propTypes = {
|
package/dist/index.js
CHANGED
|
@@ -466,7 +466,6 @@ const compereConfigs = () => {
|
|
|
466
466
|
projectConfig = {};
|
|
467
467
|
// console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
|
|
468
468
|
}
|
|
469
|
-
|
|
470
469
|
return _.merge(packageConfig, projectConfig);
|
|
471
470
|
};
|
|
472
471
|
const hasOwnerProperty = (object, property) => {
|
|
@@ -506,11 +505,6 @@ const Button = ({
|
|
|
506
505
|
...props
|
|
507
506
|
}) => {
|
|
508
507
|
const [isHover, setIsHover] = React.useState(false);
|
|
509
|
-
React.useEffect(() => {
|
|
510
|
-
if (!label && !icon) {
|
|
511
|
-
alert('Add icon or label props on Button component');
|
|
512
|
-
}
|
|
513
|
-
}, []);
|
|
514
508
|
const configStyles = compereConfigs();
|
|
515
509
|
const classProps = classnames__default["default"](className ? className : configStyles.BUTTON.className);
|
|
516
510
|
const handleMouseEnter = () => {
|
|
@@ -519,6 +513,11 @@ const Button = ({
|
|
|
519
513
|
const handleMouseLeave = () => {
|
|
520
514
|
setIsHover(false);
|
|
521
515
|
};
|
|
516
|
+
React.useEffect(() => {
|
|
517
|
+
if (!label && !icon) {
|
|
518
|
+
alert('Add icon or label props on Button component');
|
|
519
|
+
}
|
|
520
|
+
}, []);
|
|
522
521
|
return /*#__PURE__*/React__default["default"].createElement("button", _extends({
|
|
523
522
|
style: {
|
|
524
523
|
display: 'flex',
|
|
@@ -813,14 +812,14 @@ const File = ({
|
|
|
813
812
|
change({
|
|
814
813
|
file: file[ix],
|
|
815
814
|
uuid: v4(),
|
|
816
|
-
check: formatError
|
|
815
|
+
check: formatError ? formatError : configStyles.FILE.formatError
|
|
817
816
|
});
|
|
818
817
|
}
|
|
819
818
|
} else {
|
|
820
819
|
change({
|
|
821
820
|
file: file[ix],
|
|
822
821
|
uuid: v4(),
|
|
823
|
-
check: maxSizeError
|
|
822
|
+
check: maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError
|
|
824
823
|
});
|
|
825
824
|
}
|
|
826
825
|
}
|
|
@@ -842,14 +841,14 @@ const File = ({
|
|
|
842
841
|
change({
|
|
843
842
|
file: file[ix],
|
|
844
843
|
uuid: v4(),
|
|
845
|
-
check: formatError
|
|
844
|
+
check: formatError ? formatError : configStyles.FILE.formatError
|
|
846
845
|
});
|
|
847
846
|
}
|
|
848
847
|
} else {
|
|
849
848
|
change({
|
|
850
849
|
file: file[ix],
|
|
851
850
|
uuid: v4(),
|
|
852
|
-
check: maxSizeError
|
|
851
|
+
check: maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError
|
|
853
852
|
});
|
|
854
853
|
}
|
|
855
854
|
}
|
|
@@ -863,7 +862,7 @@ const File = ({
|
|
|
863
862
|
setImage(null);
|
|
864
863
|
handleUploadFiles(file);
|
|
865
864
|
if (file.length === 0 && memoizedItems.length === 0) {
|
|
866
|
-
setError(noChoosenFile);
|
|
865
|
+
setError(noChoosenFile ? noChoosenFile : configStyles.FILE.noChoosenFile);
|
|
867
866
|
}
|
|
868
867
|
} else {
|
|
869
868
|
if (file[0]) {
|
|
@@ -881,16 +880,16 @@ const File = ({
|
|
|
881
880
|
}
|
|
882
881
|
} else {
|
|
883
882
|
setImage(null);
|
|
884
|
-
setError(formatError);
|
|
883
|
+
setError(formatError ? formatError : configStyles.FILE.formatError);
|
|
885
884
|
}
|
|
886
885
|
} else {
|
|
887
886
|
setImage(null);
|
|
888
|
-
setError(maxSizeError);
|
|
887
|
+
setError(maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError);
|
|
889
888
|
}
|
|
890
889
|
}
|
|
891
890
|
if (file.length === 0) {
|
|
892
891
|
setImage(null);
|
|
893
|
-
setError(noChoosenFile);
|
|
892
|
+
setError(noChoosenFile ? noChoosenFile : configStyles.FILE.noChoosenFile);
|
|
894
893
|
}
|
|
895
894
|
}
|
|
896
895
|
};
|
|
@@ -1800,11 +1799,11 @@ const Table = ({
|
|
|
1800
1799
|
openListFontFamily,
|
|
1801
1800
|
hideBorder
|
|
1802
1801
|
}) => {
|
|
1802
|
+
const configStyles = compereConfigs();
|
|
1803
1803
|
const [body, setBody] = React.useState([]);
|
|
1804
1804
|
const [header, setHeader] = React.useState([]);
|
|
1805
1805
|
const [disableArr, setDisableArr] = React.useState([]);
|
|
1806
1806
|
const [checkedArray, setCheckedArray] = React.useState([]);
|
|
1807
|
-
const configStyles = compereConfigs();
|
|
1808
1807
|
const handleCheckIfArrow = (bodyData, data) => {
|
|
1809
1808
|
let removeItemIndex;
|
|
1810
1809
|
let headerWithoutArrow = [];
|
|
@@ -2908,6 +2907,7 @@ const Input = ({
|
|
|
2908
2907
|
const [show, setShow] = React.useState(false);
|
|
2909
2908
|
const [isHover, setIsHover] = React.useState(false);
|
|
2910
2909
|
const [innerValue, setInnerValue] = React.useState('');
|
|
2910
|
+
const [innerMinNumSize, setInnerMinNumSize] = React.useState(0);
|
|
2911
2911
|
const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
|
|
2912
2912
|
const random = Math.floor(Math.random() * 1000 + 1);
|
|
2913
2913
|
const configStyles = compereConfigs();
|
|
@@ -2925,133 +2925,102 @@ const Input = ({
|
|
|
2925
2925
|
const animation = () => styled.css`
|
|
2926
2926
|
${errorShow} ${errorAnimationDuration ? errorAnimationDuration : configStyles.INPUT.errorAnimationDuration} forwards
|
|
2927
2927
|
`;
|
|
2928
|
-
const
|
|
2929
|
-
const currentValue = event.target.value;
|
|
2930
|
-
let prevValue = innerValue;
|
|
2931
|
-
setInnerValue(() => currentValue);
|
|
2932
|
-
if (change) {
|
|
2933
|
-
change(currentValue);
|
|
2934
|
-
}
|
|
2928
|
+
const handleCheckTypeTel = (val, prevVal) => {
|
|
2935
2929
|
if (type === 'tel') {
|
|
2936
|
-
if (!phoneNumberRegex.test(
|
|
2937
|
-
if (
|
|
2930
|
+
if (!phoneNumberRegex.test(val)) {
|
|
2931
|
+
if (val === '') {
|
|
2938
2932
|
setInnerErrorMessage('');
|
|
2939
2933
|
} else {
|
|
2940
2934
|
telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
2941
|
-
|
|
2942
|
-
if (change) {
|
|
2943
|
-
change(prevValue);
|
|
2944
|
-
}
|
|
2935
|
+
val = prevVal;
|
|
2945
2936
|
}
|
|
2946
2937
|
} else {
|
|
2947
2938
|
setInnerErrorMessage('');
|
|
2948
|
-
if (
|
|
2949
|
-
|
|
2950
|
-
if (change) {
|
|
2951
|
-
change(currentValue.substr(0, 8));
|
|
2952
|
-
}
|
|
2939
|
+
if (val.length > 8) {
|
|
2940
|
+
val = val.substr(0, 8);
|
|
2953
2941
|
}
|
|
2954
2942
|
}
|
|
2955
2943
|
}
|
|
2944
|
+
return val;
|
|
2945
|
+
};
|
|
2946
|
+
const handleCheckTypeNumber = (val, prevVal) => {
|
|
2956
2947
|
if (type === 'number') {
|
|
2957
|
-
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
if (change) {
|
|
2961
|
-
change(`${minNumSize}`);
|
|
2948
|
+
if (maxLength && maxLength > 0) {
|
|
2949
|
+
if (val.length > maxLength) {
|
|
2950
|
+
val = val.substr(0, maxLength);
|
|
2962
2951
|
}
|
|
2963
|
-
}
|
|
2964
|
-
|
|
2965
|
-
|
|
2966
|
-
|
|
2967
|
-
change(`${maxNumSize}`);
|
|
2952
|
+
} else {
|
|
2953
|
+
const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
|
|
2954
|
+
if (val.length > 16 && !val.includes('.')) {
|
|
2955
|
+
val = val.substr(0, 16);
|
|
2968
2956
|
}
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
|
|
2987
|
-
|
|
2988
|
-
|
|
2989
|
-
|
|
2990
|
-
change(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
2991
|
-
}
|
|
2992
|
-
}
|
|
2993
|
-
} else if (float[1] !== undefined && float[1] !== '0') {
|
|
2994
|
-
if (float[2] === undefined || float[2] === '0') {
|
|
2995
|
-
setInnerValue(`${int}.${float[0]}${float[1]}`);
|
|
2996
|
-
if (change) {
|
|
2997
|
-
change(`${int}.${float[0]}${float[1]}`);
|
|
2998
|
-
}
|
|
2999
|
-
} else if (float[2] !== undefined && float[2] !== '0') {
|
|
3000
|
-
setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
3001
|
-
if (change) {
|
|
3002
|
-
change(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
3003
|
-
}
|
|
2957
|
+
if (val > Number.MAX_SAFE_INTEGER) {
|
|
2958
|
+
val = prevVal;
|
|
2959
|
+
}
|
|
2960
|
+
if (val < Number.MIN_SAFE_INTEGER) {
|
|
2961
|
+
val = prevVal;
|
|
2962
|
+
}
|
|
2963
|
+
if (innerMinNumSize && val < innerMinNumSize) {
|
|
2964
|
+
val = prevVal;
|
|
2965
|
+
}
|
|
2966
|
+
if (maxNumSize && val > maxNumSize) {
|
|
2967
|
+
val = prevVal;
|
|
2968
|
+
}
|
|
2969
|
+
if (floatToFix > 0) {
|
|
2970
|
+
const floatNumParts = typeof val === 'string' ? val.split('.') : val;
|
|
2971
|
+
const int = floatNumParts[0];
|
|
2972
|
+
const float = floatNumParts[1];
|
|
2973
|
+
if (float && float.length > 0) {
|
|
2974
|
+
let floatResult = '';
|
|
2975
|
+
[...float].map((item, index) => {
|
|
2976
|
+
if (index + 1 <= floatToFix) {
|
|
2977
|
+
floatResult += item;
|
|
3004
2978
|
}
|
|
2979
|
+
});
|
|
2980
|
+
if (floatResult !== '') {
|
|
2981
|
+
val = `${int}.${floatResult}`;
|
|
2982
|
+
} else {
|
|
2983
|
+
val = `${int}`;
|
|
3005
2984
|
}
|
|
3006
2985
|
}
|
|
3007
|
-
}
|
|
3008
|
-
|
|
3009
|
-
|
|
3010
|
-
|
|
3011
|
-
|
|
3012
|
-
setInnerValue(`${int}`);
|
|
3013
|
-
if (change) {
|
|
3014
|
-
change(`${int}`);
|
|
2986
|
+
} else {
|
|
2987
|
+
const floatNumParts = typeof val === 'string' ? val.split('.') : val;
|
|
2988
|
+
const int = floatNumParts[0];
|
|
2989
|
+
if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
|
|
2990
|
+
val = `${int}`;
|
|
3015
2991
|
}
|
|
3016
2992
|
}
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
setInnerValue(newStr);
|
|
3023
|
-
if (change) {
|
|
3024
|
-
change(newStr);
|
|
2993
|
+
if (!regNum.test(val)) {
|
|
2994
|
+
const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
2995
|
+
return b + c.replace(/\./g, '');
|
|
2996
|
+
});
|
|
2997
|
+
val = newStr;
|
|
3025
2998
|
}
|
|
3026
2999
|
}
|
|
3027
|
-
if (withoutDot && !/^\d+$/.test(
|
|
3028
|
-
const newStr =
|
|
3000
|
+
if (withoutDot && !/^\d+$/.test(val)) {
|
|
3001
|
+
const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
3029
3002
|
return b + c.replace(/\./g, '');
|
|
3030
3003
|
});
|
|
3031
|
-
|
|
3032
|
-
if (change) {
|
|
3033
|
-
change(newStr);
|
|
3034
|
-
}
|
|
3035
|
-
}
|
|
3036
|
-
if (currentValue === '') {
|
|
3037
|
-
setInnerValue('');
|
|
3038
|
-
if (change) {
|
|
3039
|
-
change('');
|
|
3040
|
-
}
|
|
3004
|
+
val = newStr;
|
|
3041
3005
|
}
|
|
3042
3006
|
}
|
|
3043
|
-
|
|
3007
|
+
return val;
|
|
3008
|
+
};
|
|
3009
|
+
const handleChange = event => {
|
|
3010
|
+
let prevValue = innerValue;
|
|
3011
|
+
let currentValue = event.target.value;
|
|
3012
|
+
const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : configStyles.INPUT.maxLength;
|
|
3013
|
+
currentValue = handleCheckTypeTel(currentValue, prevValue);
|
|
3014
|
+
currentValue = handleCheckTypeNumber(currentValue, prevValue);
|
|
3044
3015
|
if (max && currentValue.length > max && type !== 'tel' && type !== 'number') {
|
|
3045
|
-
|
|
3046
|
-
if (change) {
|
|
3047
|
-
change(currentValue.substr(0, max));
|
|
3048
|
-
}
|
|
3016
|
+
currentValue = currentValue.substr(0, max);
|
|
3049
3017
|
}
|
|
3050
3018
|
if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
|
|
3051
3019
|
!regexp.test(currentValue) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
|
|
3052
|
-
|
|
3053
|
-
|
|
3054
|
-
|
|
3020
|
+
}
|
|
3021
|
+
setInnerValue(() => currentValue);
|
|
3022
|
+
if (change && currentValue !== prevValue) {
|
|
3023
|
+
change(currentValue);
|
|
3055
3024
|
}
|
|
3056
3025
|
};
|
|
3057
3026
|
const handleMouseEnter = () => {
|
|
@@ -3064,140 +3033,41 @@ const Input = ({
|
|
|
3064
3033
|
setShow(!show);
|
|
3065
3034
|
};
|
|
3066
3035
|
React.useEffect(() => {
|
|
3036
|
+
let newValue = value;
|
|
3067
3037
|
if (errorMessage) {
|
|
3068
3038
|
setInnerErrorMessage(errorMessage);
|
|
3069
3039
|
} else {
|
|
3070
3040
|
setInnerErrorMessage('');
|
|
3071
3041
|
}
|
|
3042
|
+
if (minNumSize && minNumSize < 0) {
|
|
3043
|
+
setInnerMinNumSize(0);
|
|
3044
|
+
alert('minNumSize prop can\'t be less then 0');
|
|
3045
|
+
} else if (minNumSize && minNumSize >= 0) {
|
|
3046
|
+
setInnerMinNumSize(minNumSize);
|
|
3047
|
+
}
|
|
3048
|
+
if (type === 'number' && (maxNumSize || maxNumSize === 0 || minNumSize || minNumSize === 0) && (maxLength || maxLength === 0)) {
|
|
3049
|
+
alert("You can't use maxNumSize or minNumSize and maxLength props together when Input type is number");
|
|
3050
|
+
}
|
|
3051
|
+
if (type === 'number' && maxNumSize < minNumSize) {
|
|
3052
|
+
alert("maxNumSize prop can't be less then minNumSize");
|
|
3053
|
+
}
|
|
3072
3054
|
if (value !== undefined) {
|
|
3073
3055
|
if (value === null) {
|
|
3074
|
-
|
|
3056
|
+
newValue = '';
|
|
3075
3057
|
} else {
|
|
3076
|
-
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
// if (!phoneNumberRegex.test(value)) {
|
|
3080
|
-
// if (value === '') {
|
|
3081
|
-
// setInnerErrorMessage('');
|
|
3082
|
-
// } else {
|
|
3083
|
-
// telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
3084
|
-
// }
|
|
3085
|
-
// } else {
|
|
3086
|
-
// if (value.length < 8) {
|
|
3087
|
-
// telErrorMessage ? setInnerErrorMessage(telErrorMessage) : setInnerErrorMessage(configStyles.INPUT.telErrorMessage);
|
|
3088
|
-
// } else if (value.length > 8) {
|
|
3089
|
-
// setInnerValue(value.substr(0, 8));
|
|
3090
|
-
// }
|
|
3091
|
-
// }
|
|
3092
|
-
if (value.length <= 8) {
|
|
3093
|
-
setInnerValue(value);
|
|
3094
|
-
} else {
|
|
3095
|
-
setInnerValue(value.substr(0, 8));
|
|
3096
|
-
}
|
|
3097
|
-
}
|
|
3098
|
-
if (type === 'number') {
|
|
3099
|
-
const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
|
|
3100
|
-
if (minNumSize && value < minNumSize) {
|
|
3101
|
-
setInnerValue(`${minNumSize}`);
|
|
3102
|
-
if (change) {
|
|
3103
|
-
change(`${minNumSize}`);
|
|
3104
|
-
}
|
|
3105
|
-
}
|
|
3106
|
-
if (maxNumSize && value > maxNumSize) {
|
|
3107
|
-
setInnerValue(`${maxNumSize}`);
|
|
3108
|
-
if (change) {
|
|
3109
|
-
change(`${maxNumSize}`);
|
|
3110
|
-
}
|
|
3111
|
-
}
|
|
3112
|
-
if (floatToFix > 0) {
|
|
3113
|
-
const floatNumParts = typeof value === 'string' ? value.split('.') : value;
|
|
3114
|
-
const int = floatNumParts[0];
|
|
3115
|
-
const float = floatNumParts[1];
|
|
3116
|
-
if (float) {
|
|
3117
|
-
if (float[0] === '0' || float[0] !== '0') {
|
|
3118
|
-
if (float[1] === undefined) {
|
|
3119
|
-
setInnerValue(`${int}.${float[0]}`);
|
|
3120
|
-
if (change) {
|
|
3121
|
-
change(`${int}.${float[0]}`);
|
|
3122
|
-
}
|
|
3123
|
-
} else if (float[1] === '0') {
|
|
3124
|
-
if (float[2] === undefined || float[2] === '0') {
|
|
3125
|
-
setInnerValue(`${int}.${float[0]}`);
|
|
3126
|
-
if (change) {
|
|
3127
|
-
change(`${int}.${float[0]}`);
|
|
3128
|
-
}
|
|
3129
|
-
} else if (float[2] !== undefined && float[2] !== '0') {
|
|
3130
|
-
setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
3131
|
-
if (change) {
|
|
3132
|
-
change(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
3133
|
-
}
|
|
3134
|
-
}
|
|
3135
|
-
} else if (float[1] !== undefined && float[1] !== '0') {
|
|
3136
|
-
if (float[2] === undefined || float[2] === '0') {
|
|
3137
|
-
setInnerValue(`${int}.${float[0]}${float[1]}`);
|
|
3138
|
-
if (change) {
|
|
3139
|
-
change(`${int}.${float[0]}${float[1]}`);
|
|
3140
|
-
}
|
|
3141
|
-
} else if (float[2] !== undefined && float[2] !== '0') {
|
|
3142
|
-
setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
3143
|
-
if (change) {
|
|
3144
|
-
change(`${int}.${float[0]}${float[1]}${float[2]}`);
|
|
3145
|
-
}
|
|
3146
|
-
}
|
|
3147
|
-
}
|
|
3148
|
-
}
|
|
3149
|
-
}
|
|
3150
|
-
} else {
|
|
3151
|
-
const floatNumParts = typeof value === 'string' ? value.split('.') : value;
|
|
3152
|
-
const int = floatNumParts[0];
|
|
3153
|
-
if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
|
|
3154
|
-
setInnerValue(`${int}`);
|
|
3155
|
-
if (change) {
|
|
3156
|
-
change(`${int}`);
|
|
3157
|
-
}
|
|
3158
|
-
}
|
|
3159
|
-
}
|
|
3160
|
-
if (!regNum.test(value)) {
|
|
3161
|
-
const newStr = value.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
3162
|
-
return b + c.replace(/\./g, '');
|
|
3163
|
-
});
|
|
3164
|
-
setInnerValue(newStr);
|
|
3165
|
-
if (change) {
|
|
3166
|
-
change(newStr);
|
|
3167
|
-
}
|
|
3168
|
-
}
|
|
3169
|
-
if (withoutDot && !/^\d+$/.test(value)) {
|
|
3170
|
-
const newStr = value.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
|
|
3171
|
-
return b + c.replace(/\./g, '');
|
|
3172
|
-
});
|
|
3173
|
-
setInnerValue(newStr);
|
|
3174
|
-
if (change) {
|
|
3175
|
-
change(newStr);
|
|
3176
|
-
}
|
|
3177
|
-
}
|
|
3178
|
-
if (value === '') {
|
|
3179
|
-
setInnerValue('');
|
|
3180
|
-
if (change) {
|
|
3181
|
-
change('');
|
|
3182
|
-
}
|
|
3183
|
-
}
|
|
3184
|
-
}
|
|
3185
|
-
if (maxLength && value.length > maxLength && type !== 'tel') {
|
|
3186
|
-
setInnerValue(value.substr(0, maxLength));
|
|
3187
|
-
}
|
|
3188
|
-
const max = configStyles.INPUT.maxLength || maxLength;
|
|
3058
|
+
const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : configStyles.INPUT.maxLength;
|
|
3059
|
+
newValue = handleCheckTypeTel(value, newValue);
|
|
3060
|
+
newValue = handleCheckTypeNumber(value, newValue);
|
|
3189
3061
|
if (max && value.length > max && type !== 'tel' && type !== 'number') {
|
|
3190
|
-
|
|
3191
|
-
if (change) {
|
|
3192
|
-
change(value.substr(0, max));
|
|
3193
|
-
}
|
|
3062
|
+
newValue = value.substr(0, max);
|
|
3194
3063
|
}
|
|
3195
3064
|
if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
|
|
3196
3065
|
!regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
|
|
3197
3066
|
}
|
|
3067
|
+
setInnerValue(() => newValue);
|
|
3198
3068
|
}
|
|
3199
3069
|
}
|
|
3200
|
-
}, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage
|
|
3070
|
+
}, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage, telErrorMessage]);
|
|
3201
3071
|
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
3202
3072
|
className: classProps
|
|
3203
3073
|
}, label ? /*#__PURE__*/React__default["default"].createElement("label", {
|
|
@@ -3624,12 +3494,12 @@ const Select = ({
|
|
|
3624
3494
|
boxShadowHover
|
|
3625
3495
|
}) => {
|
|
3626
3496
|
const ref = React.useRef();
|
|
3497
|
+
const configStyles = compereConfigs();
|
|
3498
|
+
const classProps = classnames__default["default"](className ? className : configStyles.SELECT.className);
|
|
3627
3499
|
const [opened, setOpened] = React.useState(false);
|
|
3628
3500
|
const [isHover, setIsHover] = React.useState(false);
|
|
3629
3501
|
const [newSelected, setNewSelected] = React.useState([]);
|
|
3630
3502
|
const [existOptions, setExistOptions] = React.useState([]);
|
|
3631
|
-
const configStyles = compereConfigs();
|
|
3632
|
-
const classProps = classnames__default["default"](className ? className : configStyles.SELECT.className);
|
|
3633
3503
|
const handleOpenClose = () => {
|
|
3634
3504
|
setOpened(!opened);
|
|
3635
3505
|
};
|
|
@@ -4306,11 +4176,11 @@ const Tooltip = ({
|
|
|
4306
4176
|
tooltipBackgroundColor
|
|
4307
4177
|
}) => {
|
|
4308
4178
|
const tooltipRef = /*#__PURE__*/React.createRef(null);
|
|
4179
|
+
const configStyles = compereConfigs();
|
|
4180
|
+
const classProps = classnames__default["default"](styles$4['tooltip-block'], className ? className : configStyles.TOOLTIP.className);
|
|
4309
4181
|
const [checkTooltipWidth, setCheckTooltipWidth] = React.useState(0);
|
|
4310
4182
|
const [checkTooltipHeight, setCheckTooltipHeight] = React.useState(0);
|
|
4311
4183
|
const [showTooltip, setShowTooltip] = React.useState(false);
|
|
4312
|
-
const configStyles = compereConfigs();
|
|
4313
|
-
const classProps = classnames__default["default"](styles$4['tooltip-block'], className ? className : configStyles.TOOLTIP.className);
|
|
4314
4184
|
const handleShow = () => {
|
|
4315
4185
|
setShowTooltip(!showTooltip);
|
|
4316
4186
|
};
|
|
@@ -4722,12 +4592,12 @@ const Textarea = ({
|
|
|
4722
4592
|
showCharacterCount,
|
|
4723
4593
|
characterCountPosition
|
|
4724
4594
|
}) => {
|
|
4595
|
+
const configStyles = compereConfigs();
|
|
4596
|
+
const classProps = classnames__default["default"](className ? className : configStyles.TEXTAREA.className);
|
|
4725
4597
|
const [error, setError] = React.useState('');
|
|
4726
4598
|
const [isHover, setIsHover] = React.useState(false);
|
|
4727
4599
|
const [isFocus, setIsFocus] = React.useState(false);
|
|
4728
4600
|
const [innerValue, setInnerValue] = React.useState('');
|
|
4729
|
-
const configStyles = compereConfigs();
|
|
4730
|
-
const classProps = classnames__default["default"](className ? className : configStyles.TEXTAREA.className);
|
|
4731
4601
|
const handleMouseEnter = () => {
|
|
4732
4602
|
setIsHover(true);
|
|
4733
4603
|
};
|
|
@@ -4927,11 +4797,6 @@ const Typography = ({
|
|
|
4927
4797
|
const classProps = classnames__default["default"](className ? className : configStyles.TYPOGRAPHY.className);
|
|
4928
4798
|
const [isHover, setIsHover] = React.useState(false);
|
|
4929
4799
|
const [validVariant, setValidVariant] = React.useState(false);
|
|
4930
|
-
React.useEffect(() => {
|
|
4931
|
-
if (!Object.values(TypographyType).includes(variant)) {
|
|
4932
|
-
setValidVariant(true);
|
|
4933
|
-
}
|
|
4934
|
-
}, [variant]);
|
|
4935
4800
|
const handleMouseEnter = () => {
|
|
4936
4801
|
setIsHover(true);
|
|
4937
4802
|
};
|
|
@@ -4961,6 +4826,11 @@ const Typography = ({
|
|
|
4961
4826
|
onMouseEnter: handleMouseEnter,
|
|
4962
4827
|
onMouseLeave: handleMouseLeave
|
|
4963
4828
|
}, [children]);
|
|
4829
|
+
React.useEffect(() => {
|
|
4830
|
+
if (!Object.values(TypographyType).includes(variant)) {
|
|
4831
|
+
setValidVariant(true);
|
|
4832
|
+
}
|
|
4833
|
+
}, [variant]);
|
|
4964
4834
|
return validVariant ? 'Please set Typography valid variant' : tagT;
|
|
4965
4835
|
};
|
|
4966
4836
|
Typography.propTypes = {
|
package/package.json
CHANGED
|
Binary file
|