catalogue
1, Array string conversion method
1. Convert string or number to array
2, Time - common conversion methods
1. Prohibit selection of Sundays
2. Prohibit date selection interval
3. Enter the date and return the date in the specified format
4. Pass in the date and return the date in the format of moment
3, Object - common conversion methods
1. Judge whether the object multi-layer structure data exists or not, and return undefined
4, Digital - common conversion methods
1. Judge whether it is empty. If it is not empty, it is true
2. Enter a positive number limit and return undefined if it cannot be parsed
4. Thousand bit string to normal number
5. Class component specific method change method
You can npm install dependent packages
npm install comm-utils -S
import * as commUtils from "comm-utils";
1, Array string conversion method
1. Convert string or number to array
explain:
Convert the incoming data into an array and return it. Separate: intercept separa tor, default "," split (optional)
let resStr = checkTypeBackArray(str, separa)
| input | output |
| checkTypeBackArray('1,2,3,4') | ["1","2","3","4"] |
| checkTypeBackArray("1;2;3;4", ";") | ["1","2","3","4"] |
// Determine whether the data is a string or a number and convert it into an array
export function checkTypeBackArray(str: any, separa: string = ",") {
if (str) {
if (typeof str === "string" || typeof str === "number") {
let bcValue = str.toString().split(separa);
return bcValue;
} else if (Object.prototype.toString.call(str) === "[object Array]") {
return str;
}
} else {
return [];
}
}2. Convert array to string
explain:
Convert the incoming data into a string and return it. Separate: intercept separa tor, default "," splice (optional)
let resArr = checkTypeBackString(arr, separa?)
| input | output |
| checkTypeBackString([1,2,3,4]) | "1,2,3,4" |
| checkTypeBackString([1,2,3,4], ";") | "1;2;3;4" |
// Judge the data as an array and convert it into a string
export function checkTypeBackString(arr: any, separa: string = ",") {
if (arr) {
if (typeof arr === "string" || typeof arr === "number") {
return arr;
} else if (Object.prototype.toString.call(arr) === "[object Array]") {
let bcValue = arr.join(separa);
return bcValue;
}
} else {
return "";
}
}
2, Time - common conversion methods
The moment Based on JS, you need to introduce moment before use.
1. Prohibit selection of Sundays
explain:
Prohibit selection of Sundays
import { DatePicker } from "antd";
import { disableDateWeek } from "";
<DatePicker
disabledDate={e => disableDateWeek(e)}
/>// Prohibit selection of Sundays
export function disableDateWeek(e: object) {
var weekOfday = moment(e).format("E");
if (weekOfday === "6" || weekOfday === "7") {
return true;
} else {
return false;
}
}2. Prohibit date selection interval
Description:
Prohibit date selection interval
startDt: start date (optional)
endDt: end date (optional)
Disebeforetoday: select the date before today. The default is false (optional)
dtFormat: time format, default "YYYY-MM-DD" (optional)
(1) Start date use
disabledStartDt(e, startDt, endDt, disBeforeToday, dtFormat)
<DatePicker
disabledDate={e => commUtils.disabledStartDt(e, startDate, endDate)}
/>// Disable start date selection
export function disabledStartDt(e: any, startDt?: any, endDt?: any, disBeforeToday?: boolean, dtFormat: string = formatDate) {
e = moment(e).format(dtFormat);
if (e && typeof e == "string") {
e = moment(e, dtFormat);
}
if (startDt && typeof startDt == "string") {
startDt = moment(startDt, dtFormat);
}
if (endDt && typeof endDt == "string") {
endDt = moment(endDt, dtFormat);
}
if (e && endDt) {
if (disBeforeToday) {
return e < moment().startOf("day") || e.valueOf() > endDt.valueOf();
}
return e.valueOf() > endDt.valueOf();
} else if (e && disBeforeToday) {
return e < moment().startOf("day");
}
return false;
}(2) End date usage
disabledEndDt(e, startDt, endDt, disBeforeToday, dtFormat)
<DatePicker
disabledDate={e => commUtils.disabledEndDt(e, startDate, endDate)}
/>// Disable end date selection
export function disabledEndDt(e: any, startDt?: any, endDt?: any, disBeforeToday?: boolean, dtFormat: string = formatDate) {
e = moment(e).format(dtFormat);
if (e && typeof e == "string") {
e = moment(e, dtFormat);
}
if (startDt && typeof startDt == "string") {
startDt = moment(startDt, dtFormat);
}
if (endDt && typeof endDt == "string") {
endDt = moment(endDt, dtFormat);
}
if (e && startDt && endDt) {
let res =
startDt.valueOf() > endDt.valueOf() ? endDt.valueOf() : startDt.valueOf();
if (disBeforeToday) {
return e < moment().startOf("day") || e.valueOf() > res.valueOf();
}
return e.valueOf() < res.valueOf();
} else if (e && startDt) {
if (disBeforeToday) {
return e < moment().startOf("day") || e.valueOf() < startDt.valueOf();
}
return e.valueOf() < startDt.valueOf();
} else if (e && disBeforeToday) {
return e < moment().startOf("day");
}
return false;
}3. Enter the date and return the date in the specified format
explain:
T: return the original data without wearing, t=today return the current date (optional)
dtFormat: time format, default "YYYY-MM-DD" (optional)
let res = backFormatDate(t, dtFormat)
/*
Enter the date and return the date in the specified format
t: Return the original data without threading, and t=today returns the current date (optional)
dtFormat: Time format, default "YYYY-MM-DD" (optional)
*/
export function backFormatDate(t?:any, dtFormat: string = formatDate) {
if(t==='today'){
return moment().format(dtFormat);
} else {
if (t) {
return moment(t, dtFormat).format(dtFormat);
} else {
return t;
}
}
}4. Pass in the date and return the date in the format of moment
explain:
dtFormat: time format, default "YYYY-MM-DD" (optional)
let res = backFormatMoment(t, dtFormat)
/*
Pass in the date and return the date in the format of moment
dtFormat: Time format, default "YYYY-MM-DD" (optional)
*/
export function backFormatMoment(t:any, dtFormat: string = formatDate) {
return t? moment(t, dtFormat): t;
}3, Object - common conversion methods
1. Judge whether the object multi-layer structure data exists or not, and return undefined
let res= checkHasData(obj, ['key1', 'key2', 'key3', 'key4'])
/*
Judge whether the object multi-layer structure data exists or not, and return undefined
let res= checkHasData(data, ['key1', 'key2', 'key3', 'key4'])
*/
export function checkHasData(obj: object, arr: Array<string>, idx?: number): any {
let res;
let i = 0;
if (idx) {
i = idx;
}
if (arr.length <= i) {
res = obj;
} else {
const element = arr[i];
if (element) {
if (obj[element]) {
return checkHasData(obj[element], arr, i + 1);
}
}
}
return res;
}2. Judge whether the values in object 1 are equal in object 2 and return true. If one value is not equal, return false. The newly added fields in objnew will not be processed, but only the fields in objPrep
objPrep Original object, objNew New object
arr Specify the in the array key No comparison, e.g['id'] (Optional)
let objPrep = {
a: 1,
b: 2
}
let objNew = {
a: 11,
b: 2
}
compareDataBlur(objPrep, objNew)| Input | output |
| compareDataBlur(objPrep, objNew) | false |
| compareDataBlur(objPrep, objNew, ["a"]) | true |
/*
Judge whether the values in object 1 are equal in object 2, and return true,
If one value is not equal, false is returned,
objNew The newly added fields in objPrep are not processed, only the fields in objPrep are processed
objPrep Original object, objNew, new object
arr The key s in the specified array are not compared, such as ['userID '] (optional)
*/
export function compareDataBlur(objPrep: object, objNew: object, arr?: Array<string>) {
if ((objPrep && !objNew) || (objNew && !objPrep)) {
return false;
}
let flag = true;
for (var key in objNew) {
// objNew[key] has no value. No comparison is made
if (objPrep.hasOwnProperty(key)) {
let flag1 =
objPrep[key] !== null && objPrep[key] !== undefined && objPrep[key] !== "";
let flag2 =
objNew[key] !== null && objNew[key] !== undefined && objNew[key] !== "";
let flag3 = (arr || []).indexOf(key);
if (flag3 == -1) {
if (flag1 || flag2) {
if (JSON.stringify(objPrep[key]) != JSON.stringify(objNew[key])) {
console.log("diff", key, objPrep[key], objNew[key]);
flag = false;
}
}
}
}
}
return flag;
}4, Digital - common conversion methods
1. Judge whether it is empty. If it is not empty, it is true
notNull(value)
/*
Judge whether it is empty. If it is not empty, it is true
*/
export function notNull(value: any) {
return !(!value && value !== 0);
}2. Enter a positive number limit and return undefined if it cannot be parsed
explain:
The onChange method is recommended
Input input number limit e(value)
Dotnum (decimal places) (optional)
inputOnlyNumber(e, dotNum = 2)
/*
Enter a positive number limit and return undefined if it cannot be parsed
input Enter the number of decimal places (nutdom)
*/
export function inputOnlyNumber(e: any, dotNum: number = 2, minusFlag?: boolean) {
let value = e.replace(/[^\d.]/g, "");
if (minusFlag) {
value = value.replace(/[^\-?\d.]/g, "");
}
let str = `'${value}'`;
let idx1 = str.indexOf(".");
let idx0 = str.indexOf("00");
// The first is the small input point, empty
if (idx1 === 1) {
value = "";
return;
}
// Multiple zeros appear at the front, clear
if (idx0 === 1) {
value = "";
return;
}
// Remove the first '.' Back point
value = value
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".");
str = `'${value}'`;
idx1 = str.indexOf(".");
// Keep several decimal places when there is a decimal point
if (idx1 != -1) {
value = value.slice(0, value.indexOf(".") + (dotNum) + 1);
}
return value;
}3. Digital thousands Division
let res = changeToThousand(num);
/*
Digital thousands Division
*/
export function changeToThousand(num: any) {
if (!notNull(num)) {
return num;
}
let resNum;
num = (num + "").replace(/,/g, "");
resNum = Number(num);
if (resNum >= 0) {
return (
num && num.toString().replace(/^\d+/, (m: any) => m.replace(/(?=(?!^)(\d{3})+$)/g, ","))
);
} else {
num = 0 - num;
return (
"-" +
(num && num.toString().replace(/^\d+/, (m: any) => m.replace(/(?=(?!^)(\d{3})+$)/g, ",")))
);
}
}4. Thousand bit string to normal number
let res = stringToThousand(num);
/*
Thousand bit string to normal number
*/
export function stringToThousand(num: any) {
if (!notNull(num)) {
return num;
}
return num.replace(/\,/g, "");
}5. Class component specific method change method
explain:
Class component specific methods
The onChange method is recommended
Enter the change e input box value, obj={objKey: 'value of object', key: 'key value'},
For example: this state. Obj = {A: '1'}, then obj={objKey: 'obj', key: 'a'}
objKey does not exist. Set it directly to obj = {key: 'a'}, this state. a = '1'
Type type: time, inputNumber, and the rest are by default (optional)
cd fallback (optional)
changeFun(e, _this, obj, type, cd)
/* Class component specific methods
Enter the change e input box value, obj={objKey: 'value of object', key: 'key value'},
For example: this state. Obj = {A: '1'}, then obj={objKey: 'obj', key: 'a'}
objKey There is no direct setting to obj = {key: 'a'}, this state. a = '1'
type Type: time, inputNumber, and the rest go by default
*/
export function changeFun(e: any, _this: any, obj: any, type?: string, cd?: (__e: any, __this: any, __obj: any, __type?: string) => void) {
let val = e;
if (type == "time") {
val = backFormatDate(e, obj.dateFormat);
} else {
val = e && e.target ? e.target.value : e;
}
if (obj.objKey) {
let dt = JSON.parse(JSON.stringify(_this.state[obj.objKey]));
if (type == "inputNumber") {
val =
inputOnlyNumber(val, obj.dotNum) !== undefined
? inputOnlyNumber(val, obj.dotNum)
: dt[obj.key];
}
dt[obj.key] = val;
_this.setState(
{
[obj.objKey]: dt
},
() => {
if (cd) {
cd(e, _this, obj, type);
}
}
);
} else {
if (type == "inputNumber") {
val =
inputOnlyNumber(val, obj.dotNum) !== undefined
? inputOnlyNumber(val, obj.dotNum)
: _this.state[obj.key];
}
_this.setState(
{
[obj.key]: val
},
() => {
if (cd) {
cd(e, _this, obj, type);
}
}
);
}
}I hope you can point out the deficiencies in time. Thank you.