@zohodesk/utils 1.3.12 → 1.3.14
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 +9 -0
- package/es/ErrorBoundary.js +5 -0
- package/es/StringUtils.js +290 -0
- package/es/abbreviateNumber.js +9 -6
- package/es/applyOpenToCustomize.js +5 -2
- package/es/combineCustomStyle.js +4 -5
- package/es/compileClassNames.js +5 -0
- package/es/contextFactory.js +2 -0
- package/es/createTemplateLiteral.js +4 -1
- package/es/dataTypes.js +1 -0
- package/es/debounce.js +1 -0
- package/es/disCustomStyleProps.js +0 -21
- package/es/getCompliedClassName.js +2 -0
- package/es/getCompliedCustomId.js +2 -2
- package/es/index.js +9 -9
- package/es/isTouchDevice.js +1 -0
- package/es/loadResource.js +11 -0
- package/es/mergeStyle.js +14 -15
- package/es/omit.js +1 -0
- package/es/props/customStyleProps.js +1 -1
- package/es/props/tagAttributeProps.js +3 -1
- package/es/props/tagGeneralAttributeProps.js +3 -1
- package/es/props/uiProps.js +14 -1
- package/es/reducerHandler.js +3 -0
- package/es/uniqueNumber.js +2 -2
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
In this package, We provide lots of util fuctions for web devlopment
|
|
4
4
|
|
|
5
|
+
# 1.3.14
|
|
6
|
+
|
|
7
|
+
- **StringUtils**
|
|
8
|
+
- String Utils Methods added
|
|
9
|
+
|
|
10
|
+
# 1.3.13
|
|
11
|
+
|
|
12
|
+
- `mergeStyle` issue fix
|
|
13
|
+
|
|
5
14
|
# 1.3.12
|
|
6
15
|
|
|
7
16
|
- `mergeStyle` functionality updated. Composed classes will also update if it is inside that file.
|
package/es/ErrorBoundary.js
CHANGED
|
@@ -6,19 +6,24 @@ export default class ErrorBoundary extends React.Component {
|
|
|
6
6
|
hasError: false
|
|
7
7
|
};
|
|
8
8
|
}
|
|
9
|
+
|
|
9
10
|
static getDerivedStateFromError(error) {
|
|
10
11
|
return {
|
|
11
12
|
hasError: true,
|
|
12
13
|
error
|
|
13
14
|
};
|
|
14
15
|
}
|
|
16
|
+
|
|
15
17
|
componentDidCatch(error, errorInfo) {
|
|
16
18
|
console.log(error, errorInfo);
|
|
17
19
|
}
|
|
20
|
+
|
|
18
21
|
render() {
|
|
19
22
|
if (this.state.hasError) {
|
|
20
23
|
return this.props.renderFallback(this.state.error);
|
|
21
24
|
}
|
|
25
|
+
|
|
22
26
|
return this.props.children;
|
|
23
27
|
}
|
|
28
|
+
|
|
24
29
|
}
|
|
@@ -0,0 +1,290 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* check given string is empty.
|
|
3
|
+
* @param {string} string - The string to be check.
|
|
4
|
+
*/
|
|
5
|
+
export function isEmpty(string) {
|
|
6
|
+
if (!string) {
|
|
7
|
+
return true;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
return string.length === 0;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* check given string is not empty.
|
|
14
|
+
* @param {string} string - Th e string to be check.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
export function isNotEmpty(string) {
|
|
18
|
+
return !isEmpty(string);
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* check given string is blank.
|
|
22
|
+
* @param {string} string - The string to be check.
|
|
23
|
+
*/
|
|
24
|
+
|
|
25
|
+
export function isBlank(string) {
|
|
26
|
+
if (!string) {
|
|
27
|
+
return true;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
return !new RegExp('\\S', 'g').test(string);
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* check given string is not blank.
|
|
34
|
+
* @param {string} string - The string to be check.
|
|
35
|
+
*/
|
|
36
|
+
|
|
37
|
+
export function isNotBlank(string) {
|
|
38
|
+
return !isBlank(string);
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* find index of given char in the string.
|
|
42
|
+
* @param {string} string - The string to be modify.
|
|
43
|
+
*/
|
|
44
|
+
|
|
45
|
+
export function indexOf(string, chars, pos) {
|
|
46
|
+
if (string == null || typeof string === undefined) {
|
|
47
|
+
return -1;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
if (pos) {
|
|
51
|
+
return str.indexOf(chars, typeof pos === undefined ? 0 : pos);
|
|
52
|
+
} else {
|
|
53
|
+
return str.indexOf(chars);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Capitalize the first letter of a string.
|
|
58
|
+
*
|
|
59
|
+
* @param {string} string - The input string to modify.
|
|
60
|
+
* @returns {string} The input string with the first letter capitalized.
|
|
61
|
+
*/
|
|
62
|
+
|
|
63
|
+
export function capitalizeFirstLetter(string) {
|
|
64
|
+
return !isStringEmpty(string) ? string.charAt(0).toUpperCase() + string.slice(1) : string;
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Encode a string for HTML to prevent cross-site scripting (XSS) attacks.
|
|
68
|
+
*
|
|
69
|
+
* @param {string} str - The input string to encode for HTML.
|
|
70
|
+
* @returns {string} The encoded string safe for inclusion in HTML content.
|
|
71
|
+
*/
|
|
72
|
+
|
|
73
|
+
export function encodeForHtml(str) {
|
|
74
|
+
if (/<|>|&|"|'|\\/g.test(str) === true) {
|
|
75
|
+
str = str.replace(/&/g, '&');
|
|
76
|
+
str = str.replace(/</g, '<');
|
|
77
|
+
str = str.replace(/>/g, '>');
|
|
78
|
+
str = str.replace(/"/g, '"');
|
|
79
|
+
str = str.replace(/\\/g, '\');
|
|
80
|
+
str = str.replace(/'/g, ''');
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return str;
|
|
84
|
+
}
|
|
85
|
+
/**
|
|
86
|
+
* Decode HTML entities in a string.
|
|
87
|
+
*
|
|
88
|
+
* @param {string} str - The input string containing HTML-encoded content.
|
|
89
|
+
* @returns {string} The decoded string.
|
|
90
|
+
*/
|
|
91
|
+
|
|
92
|
+
export function decodeContent(str) {
|
|
93
|
+
if (/&|<|>|"|\|'|&lt;|&gt;/g.test(str) == true) {
|
|
94
|
+
str = str.replace(/&/g, '&');
|
|
95
|
+
str = str.replace(/<|&lt;/g, '<');
|
|
96
|
+
str = str.replace(/>|&gt;/g, '>');
|
|
97
|
+
str = str.replace(/"/g, '"');
|
|
98
|
+
str = str.replace(/\/g, '\\');
|
|
99
|
+
str = str.replace(/'/g, "'");
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
return str;
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* Validatate email.
|
|
106
|
+
*
|
|
107
|
+
* @param {string} email - The input string to validate.
|
|
108
|
+
*/
|
|
109
|
+
|
|
110
|
+
export function validateEmail(email) {
|
|
111
|
+
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
112
|
+
return emailRegex.test(email);
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* extract domain from the email.
|
|
116
|
+
*
|
|
117
|
+
* @param {string} email - The input email to extract domain.
|
|
118
|
+
*/
|
|
119
|
+
|
|
120
|
+
export function extractDomainFromEmail(email) {
|
|
121
|
+
const atIndex = email.lastIndexOf('@');
|
|
122
|
+
return atIndex !== -1 ? email.slice(atIndex + 1) : '';
|
|
123
|
+
}
|
|
124
|
+
/**
|
|
125
|
+
* Reverse a given string.
|
|
126
|
+
*
|
|
127
|
+
* @param {string} string - The input string to reverse.
|
|
128
|
+
* @returns {string} The reversed string.
|
|
129
|
+
*/
|
|
130
|
+
|
|
131
|
+
export function reverseString(string) {
|
|
132
|
+
return !isStringEmpty(string) ? string.split('').reverse().join('') : string;
|
|
133
|
+
}
|
|
134
|
+
/**
|
|
135
|
+
* Truncate a given string and append an ellipsis if it exceeds a specified length.
|
|
136
|
+
* @param {string} string - The string to truncate.
|
|
137
|
+
* @param {number} maxLength - The maximum length of the truncated string.
|
|
138
|
+
* @returns {string} The truncated string.
|
|
139
|
+
*/
|
|
140
|
+
|
|
141
|
+
export function truncate(string) {
|
|
142
|
+
let maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
|
|
143
|
+
|
|
144
|
+
if (!isStringEmpty() && string.length > maxLength) {
|
|
145
|
+
return string.slice(0, maxLength) + '...';
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
return string;
|
|
149
|
+
}
|
|
150
|
+
/**
|
|
151
|
+
* Convert a string to PascalCase.
|
|
152
|
+
* Split the string into words, capitalize the first letter of each word, and join them
|
|
153
|
+
*
|
|
154
|
+
* @param {string} string - The input string to convert.
|
|
155
|
+
* @returns {string} The PascalCase version of the input string.
|
|
156
|
+
*/
|
|
157
|
+
|
|
158
|
+
export function toPascalCase(string) {
|
|
159
|
+
if (typeof string === 'string' && !isStringEmpty(string)) {
|
|
160
|
+
const pascalCaseStr = string.split(/[\s_-]+/).map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
|
|
161
|
+
return pascalCaseStr;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
/**
|
|
165
|
+
* Convert a string to kebab-case.
|
|
166
|
+
* Replace spaces and underscores with hyphens, and convert to lowercase
|
|
167
|
+
*
|
|
168
|
+
* @param {string} string - The input string to convert.
|
|
169
|
+
* @returns {string} The kebab-case version of the input string.
|
|
170
|
+
*/
|
|
171
|
+
|
|
172
|
+
export function toKebabCase(string) {
|
|
173
|
+
if (typeof string === 'string' && !isStringEmpty(string)) {
|
|
174
|
+
const kebabCaseStr = string.replace(/[\s_]+/g, '-').toLowerCase();
|
|
175
|
+
return kebabCaseStr;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
/**
|
|
179
|
+
* Convert a string to snake_case.
|
|
180
|
+
* Replace spaces and hyphens with underscores, and convert to lowercase
|
|
181
|
+
*
|
|
182
|
+
* @param {string} string - The input string to convert.
|
|
183
|
+
* @returns {string} The snake_case version of the input string.
|
|
184
|
+
*/
|
|
185
|
+
|
|
186
|
+
export function toSnakeCase(string) {
|
|
187
|
+
if (typeof string === 'string' && !isStringEmpty(string)) {
|
|
188
|
+
const snakeCaseStr = string.replace(/[\s-]+/g, '_').toLowerCase();
|
|
189
|
+
return snakeCaseStr;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
/**
|
|
193
|
+
* Join an array of strings into a single string using a specified delimiter.
|
|
194
|
+
*
|
|
195
|
+
* @param {string[]} array - The array of strings to join.
|
|
196
|
+
* @param {string} delimiter - The delimiter used to separate the strings in the output.
|
|
197
|
+
* @returns {string} The concatenated string with the specified delimiter.
|
|
198
|
+
*/
|
|
199
|
+
|
|
200
|
+
export function joinArray(array) {
|
|
201
|
+
let delimiter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ', ';
|
|
202
|
+
|
|
203
|
+
if (Array.isArray(array)) {
|
|
204
|
+
return array.join(delimiter);
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
/**
|
|
208
|
+
* Remove whitespace characters from a given string.
|
|
209
|
+
*
|
|
210
|
+
* @param {string} inputString - The input string from which to remove whitespace.
|
|
211
|
+
* @returns {string} The input string with whitespace characters removed.
|
|
212
|
+
*/
|
|
213
|
+
|
|
214
|
+
export function removeWhitespace(inputString) {
|
|
215
|
+
if (!isStringEmpty(inputString) && typeof inputString == 'string') {
|
|
216
|
+
return inputString.replace(/\s+/g, '');
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
return inputString;
|
|
220
|
+
}
|
|
221
|
+
/**
|
|
222
|
+
* Check if a given string is a palindrome.
|
|
223
|
+
*
|
|
224
|
+
* @param {string} string - The input string to check for palindromic property.
|
|
225
|
+
* @returns {boolean} True if the input string is a palindrome, false otherwise.
|
|
226
|
+
*/
|
|
227
|
+
|
|
228
|
+
export function isPalindrome(string) {
|
|
229
|
+
if (!isStringEmpty(string) && typeof string == 'string') {
|
|
230
|
+
const cleanString = string.toLowerCase().replace(/[^a-zA-Z0-9]/g, '');
|
|
231
|
+
const reversedString = cleanString.split('').reverse().join('');
|
|
232
|
+
return cleanString === reversedString;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
return string;
|
|
236
|
+
}
|
|
237
|
+
/**
|
|
238
|
+
* Check if a string starts with a vowel (a, e, i, o, or u).
|
|
239
|
+
*
|
|
240
|
+
* @param {string} string - The input string to check.
|
|
241
|
+
* @returns {boolean} True if the string starts with a vowel, false otherwise.
|
|
242
|
+
*/
|
|
243
|
+
|
|
244
|
+
export function isStartsWithVowel(string) {
|
|
245
|
+
return /^[aeiouAEIOU]/.test(string);
|
|
246
|
+
}
|
|
247
|
+
;
|
|
248
|
+
/**
|
|
249
|
+
* Count the number of occurrences of a substring in a string.
|
|
250
|
+
*
|
|
251
|
+
* @param {string} string - The input string to search in.
|
|
252
|
+
* @param {string} substring - The substring to count occurrences of.
|
|
253
|
+
* @returns {number} The number of occurrences of the substring in the input string.
|
|
254
|
+
*/
|
|
255
|
+
|
|
256
|
+
export function countOccurrences(string, substring) {
|
|
257
|
+
if (typeof string == 'string') {
|
|
258
|
+
const regex = new RegExp(substring, 'g');
|
|
259
|
+
const matches = string.match(regex);
|
|
260
|
+
return matches ? matches.length : 0;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
return string;
|
|
264
|
+
}
|
|
265
|
+
/**
|
|
266
|
+
* Replace all occurrences of a substring with another substring in a string.
|
|
267
|
+
*
|
|
268
|
+
* @param {string} string - The input string in which to perform replacements.
|
|
269
|
+
* @param {string} target - The substring to find and replace.
|
|
270
|
+
* @param {string} replacement - The substring to replace occurrences of the target with.
|
|
271
|
+
* @returns {string} The input string with all occurrences of the target replaced.
|
|
272
|
+
*/
|
|
273
|
+
|
|
274
|
+
export function replaceAllOccurrences(string, target, replacement) {
|
|
275
|
+
if (!isStringEmpty(string) && typeof string == 'string') {
|
|
276
|
+
return string.split(target).join(replacement);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
return string;
|
|
280
|
+
}
|
|
281
|
+
/**
|
|
282
|
+
* Encode a string to Base64.
|
|
283
|
+
*
|
|
284
|
+
* @param {string} inputString - The input string to encode.
|
|
285
|
+
* @returns {string} The Base64-encoded string.
|
|
286
|
+
*/
|
|
287
|
+
|
|
288
|
+
export function encodeToBase64(string) {
|
|
289
|
+
return btoa(string);
|
|
290
|
+
}
|
package/es/abbreviateNumber.js
CHANGED
|
@@ -10,18 +10,20 @@
|
|
|
10
10
|
export default function abbreviateNumber() {
|
|
11
11
|
let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
12
12
|
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
13
|
+
|
|
13
14
|
if (typeof count === 'string') {
|
|
14
15
|
count = parseInt(count);
|
|
15
16
|
}
|
|
17
|
+
|
|
16
18
|
if (global.Intl && global.Intl.NumberFormat) {
|
|
17
19
|
let numberFormat = Intl.NumberFormat(options.locale || 'en', {
|
|
18
|
-
notation: 'compact'
|
|
19
|
-
// compactDisplay: "short",
|
|
20
|
-
});
|
|
20
|
+
notation: 'compact' // compactDisplay: "short",
|
|
21
21
|
|
|
22
|
+
});
|
|
22
23
|
return numberFormat.format(count);
|
|
23
|
-
}
|
|
24
|
-
|
|
24
|
+
} //Comaptibility
|
|
25
|
+
|
|
26
|
+
|
|
25
27
|
const COUNT_ABBRS = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
|
|
26
28
|
let {
|
|
27
29
|
withAbbr = true,
|
|
@@ -29,12 +31,13 @@ export default function abbreviateNumber() {
|
|
|
29
31
|
} = options;
|
|
30
32
|
const i = 0 === count ? count : Math.floor(Math.log(count) / Math.log(1000));
|
|
31
33
|
let result = parseFloat((count / Math.pow(1000, i)).toFixed(decimals));
|
|
34
|
+
|
|
32
35
|
if (withAbbr) {
|
|
33
36
|
result += `${COUNT_ABBRS[i]}`;
|
|
34
37
|
}
|
|
38
|
+
|
|
35
39
|
return result;
|
|
36
40
|
}
|
|
37
|
-
|
|
38
41
|
/* need discussion
|
|
39
42
|
1001 => 1K+
|
|
40
43
|
|
|
@@ -8,19 +8,22 @@
|
|
|
8
8
|
*/
|
|
9
9
|
export default function applyOpenToCustomize(style, options) {
|
|
10
10
|
let resultStyle = style;
|
|
11
|
+
|
|
11
12
|
if (options && options.prefix) {
|
|
12
|
-
resultStyle = {
|
|
13
|
-
...style
|
|
13
|
+
resultStyle = { ...style
|
|
14
14
|
};
|
|
15
15
|
let defaultPrefix = options.prefix || "";
|
|
16
|
+
|
|
16
17
|
if (defaultPrefix) {
|
|
17
18
|
defaultPrefix = `${defaultPrefix}-`;
|
|
18
19
|
}
|
|
20
|
+
|
|
19
21
|
Object.keys(style).forEach(styleName => {
|
|
20
22
|
if (resultStyle[styleName] && !resultStyle[styleName].includes(styleName)) {
|
|
21
23
|
resultStyle[styleName] = `${resultStyle[styleName]} ${defaultPrefix}${styleName}`;
|
|
22
24
|
}
|
|
23
25
|
});
|
|
24
26
|
}
|
|
27
|
+
|
|
25
28
|
return resultStyle;
|
|
26
29
|
}
|
package/es/combineCustomStyle.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
const REPLACER_SYMBOL = "$";
|
|
2
|
-
|
|
3
2
|
/**
|
|
4
3
|
*
|
|
5
4
|
* if two is same ==> do the think if replace do, if append do.
|
|
@@ -9,12 +8,13 @@ const REPLACER_SYMBOL = "$";
|
|
|
9
8
|
* @param {*} style2
|
|
10
9
|
* @returns
|
|
11
10
|
*/
|
|
11
|
+
|
|
12
12
|
export default function combineCustomStyle(style1, style2) {
|
|
13
|
-
let resultStyle = {
|
|
14
|
-
...style1
|
|
13
|
+
let resultStyle = { ...style1
|
|
15
14
|
};
|
|
16
15
|
Object.keys(style2).forEach(styleName => {
|
|
17
16
|
let oldStyleName = style1[`$${styleName}`] ? `$${styleName}` : styleName;
|
|
17
|
+
|
|
18
18
|
if (oldStyleName.startsWith(REPLACER_SYMBOL) && styleName.startsWith(REPLACER_SYMBOL)) {
|
|
19
19
|
resultStyle[styleName] = style2[styleName];
|
|
20
20
|
} else if (!oldStyleName.startsWith(REPLACER_SYMBOL) && !styleName.startsWith(REPLACER_SYMBOL)) {
|
|
@@ -23,7 +23,6 @@ export default function combineCustomStyle(style1, style2) {
|
|
|
23
23
|
delete resultStyle[oldStyleName];
|
|
24
24
|
resultStyle[styleName] = style2[styleName];
|
|
25
25
|
}
|
|
26
|
-
|
|
27
26
|
/*else if (oldStyleName.startsWith(REPLACER_SYMBOL) && !styleName.startsWith(REPLACER_SYMBOL) ) {
|
|
28
27
|
|
|
29
28
|
delete resultStyle[oldStyleName];
|
|
@@ -34,7 +33,7 @@ export default function combineCustomStyle(style1, style2) {
|
|
|
34
33
|
delete resultStyle[oldStyleName];
|
|
35
34
|
resultStyle[styleName] = style2[styleName];
|
|
36
35
|
}*/
|
|
37
|
-
});
|
|
38
36
|
|
|
37
|
+
});
|
|
39
38
|
return resultStyle;
|
|
40
39
|
}
|
package/es/compileClassNames.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import dataTypes, { isDataTypeOf } from "./dataTypes";
|
|
2
2
|
import { hasOwnProperty } from "./objectUtils";
|
|
3
|
+
|
|
3
4
|
const collectClassNames = function (processedClassNameList) {
|
|
4
5
|
for (let index = 0; index < (arguments.length <= 1 ? 0 : arguments.length - 1); index++) {
|
|
5
6
|
let classInfo = index + 1 < 1 || arguments.length <= index + 1 ? undefined : arguments[index + 1];
|
|
7
|
+
|
|
6
8
|
if (!classInfo) {
|
|
7
9
|
continue;
|
|
8
10
|
} else if (isDataTypeOf(classInfo, dataTypes.object)) {
|
|
@@ -14,11 +16,14 @@ const collectClassNames = function (processedClassNameList) {
|
|
|
14
16
|
}
|
|
15
17
|
}
|
|
16
18
|
};
|
|
19
|
+
|
|
17
20
|
export default function compileClassNames() {
|
|
18
21
|
let resultClassNameList = [];
|
|
22
|
+
|
|
19
23
|
for (var _len = arguments.length, classinfoList = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
20
24
|
classinfoList[_key] = arguments[_key];
|
|
21
25
|
}
|
|
26
|
+
|
|
22
27
|
collectClassNames(resultClassNameList, ...classinfoList);
|
|
23
28
|
return resultClassNameList.filter(a => a !== '').join(' ');
|
|
24
29
|
}
|
package/es/contextFactory.js
CHANGED
|
@@ -2,17 +2,21 @@ export default function createTemplateLiteral(templateStrings) {
|
|
|
2
2
|
for (var _len = arguments.length, expressionKeys = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
3
3
|
expressionKeys[_key - 1] = arguments[_key];
|
|
4
4
|
}
|
|
5
|
+
|
|
5
6
|
return function () {
|
|
6
7
|
for (var _len2 = arguments.length, expressionValues = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
7
8
|
expressionValues[_key2] = arguments[_key2];
|
|
8
9
|
}
|
|
10
|
+
|
|
9
11
|
let resultString = [templateStrings[0]];
|
|
10
12
|
expressionKeys.forEach(function (expressionKey, i) {
|
|
11
13
|
let expressionValue = expressionValues[i];
|
|
12
14
|
let nextTemplateString = templateStrings[i + 1];
|
|
15
|
+
|
|
13
16
|
if (expressionValue === null || expressionValue === undefined || expressionValue === "") {
|
|
14
17
|
nextTemplateString = nextTemplateString.replace(/^_/, '');
|
|
15
18
|
}
|
|
19
|
+
|
|
16
20
|
resultString.push(expressionValue, nextTemplateString);
|
|
17
21
|
});
|
|
18
22
|
let resultStr = resultString.join('');
|
|
@@ -20,7 +24,6 @@ export default function createTemplateLiteral(templateStrings) {
|
|
|
20
24
|
return resultStr;
|
|
21
25
|
};
|
|
22
26
|
}
|
|
23
|
-
|
|
24
27
|
/* refer the doc https://developers.google.com/web/updates/2015/01/ES6-Template-Strings
|
|
25
28
|
|
|
26
29
|
UnderSatnd the terms - String interpolation, Embedded expressions
|
package/es/dataTypes.js
CHANGED
package/es/debounce.js
CHANGED
|
@@ -2,64 +2,43 @@
|
|
|
2
2
|
// import mergeStyle from "./mergeStyle";
|
|
3
3
|
// import { Button } from "../../base/src/Button/index";
|
|
4
4
|
// export default (props)=>{
|
|
5
|
-
|
|
6
5
|
// let { customStyle, openCustomStyle} = props;
|
|
7
|
-
|
|
8
6
|
// return {
|
|
9
7
|
// customStyle,
|
|
10
8
|
// openDefaultToCustomize
|
|
11
9
|
// };
|
|
12
|
-
|
|
13
10
|
// }
|
|
14
|
-
|
|
15
11
|
// if two is same ==> do the think replace with last , append at end
|
|
16
|
-
|
|
17
12
|
// replace vs append ==> append
|
|
18
13
|
// append vs replace ==> replace
|
|
19
|
-
|
|
20
14
|
// DotButton.js
|
|
21
15
|
// DotButton.module.css
|
|
22
16
|
// function DotButton({ customStyle }){
|
|
23
|
-
|
|
24
17
|
// dotButdefault => customStyle : {
|
|
25
18
|
// base : DotButton.style.pols
|
|
26
19
|
// }
|
|
27
|
-
|
|
28
20
|
// props => customStyle {
|
|
29
21
|
// base :
|
|
30
22
|
// }
|
|
31
|
-
|
|
32
23
|
// return <Button customStyle={}></Button>
|
|
33
24
|
// }
|
|
34
|
-
|
|
35
25
|
// Button => set of compoents
|
|
36
26
|
// DotButton => set of comepons
|
|
37
|
-
|
|
38
27
|
// function creatButtonWithIcon({Button,Icon}){
|
|
39
|
-
|
|
40
28
|
// return (props)=>{
|
|
41
|
-
|
|
42
29
|
// customStyle={}
|
|
43
30
|
// return <Button customStyle={ssss}>
|
|
44
|
-
|
|
45
31
|
// <Icon></Icon>
|
|
46
32
|
// </Button>
|
|
47
|
-
|
|
48
33
|
// }
|
|
49
|
-
|
|
50
34
|
// }
|
|
51
|
-
|
|
52
35
|
// Button1.js
|
|
53
36
|
// Icon1.js
|
|
54
37
|
// creatButtonWithIcon({
|
|
55
|
-
|
|
56
38
|
// Button : Button1,
|
|
57
39
|
// Icon : Icon1
|
|
58
|
-
|
|
59
40
|
// });
|
|
60
|
-
|
|
61
41
|
// Button1custome(props){
|
|
62
|
-
|
|
63
42
|
// props.customStyle
|
|
64
43
|
// combineCustomStyle()
|
|
65
44
|
// return Button
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import compileClassNames from "./compileClassNames";
|
|
2
2
|
export default (function (customClassName) {
|
|
3
3
|
let isPlainClassName = typeof customClassName === "string" ? true : false;
|
|
4
|
+
|
|
4
5
|
for (var _len = arguments.length, props = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
5
6
|
props[_key - 1] = arguments[_key];
|
|
6
7
|
}
|
|
8
|
+
|
|
7
9
|
return compileClassNames(...props, {
|
|
8
10
|
[customClassName]: !!isPlainClassName
|
|
9
11
|
});
|
|
@@ -6,10 +6,10 @@ export default (function (_ref, defaultCustomId) {
|
|
|
6
6
|
} = _ref;
|
|
7
7
|
let otherCustomOption = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
8
8
|
let returnId = customId;
|
|
9
|
+
|
|
9
10
|
if (typeof defaultCustomId === "function") {
|
|
10
11
|
let options = ['', customIdPrefix, customIdSuffix, ...otherCustomOption];
|
|
11
|
-
returnId = defaultCustomId.apply(null, options);
|
|
12
|
-
//returnId = defaultCustomId`${customIdPrefix} ${customIdSuffix}`;
|
|
12
|
+
returnId = defaultCustomId.apply(null, options); //returnId = defaultCustomId`${customIdPrefix} ${customIdSuffix}`;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
return returnId ? returnId.toLowerCase() : null;
|
package/es/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export { default as debounce } from
|
|
2
|
-
export { default as uniqueNumber } from
|
|
3
|
-
export { default as omit } from
|
|
4
|
-
export { default as mergeStyle } from
|
|
5
|
-
export { default as applyOpenToCustomize } from
|
|
6
|
-
export { default as combineCustomStyle } from
|
|
7
|
-
export { default as compileClassNames } from
|
|
8
|
-
export { default as ErrorBoundary } from
|
|
9
|
-
export { default as loadResource } from
|
|
1
|
+
export { default as debounce } from "./debounce";
|
|
2
|
+
export { default as uniqueNumber } from "./uniqueNumber";
|
|
3
|
+
export { default as omit } from "./omit";
|
|
4
|
+
export { default as mergeStyle } from "./mergeStyle";
|
|
5
|
+
export { default as applyOpenToCustomize } from "./applyOpenToCustomize";
|
|
6
|
+
export { default as combineCustomStyle } from "./combineCustomStyle";
|
|
7
|
+
export { default as compileClassNames } from "./compileClassNames";
|
|
8
|
+
export { default as ErrorBoundary } from "./ErrorBoundary";
|
|
9
|
+
export { default as loadResource } from "./loadResource";
|
|
10
10
|
export { default as accessKeyCodes, accessKeyNames } from "./accessKeyCodes";
|
package/es/isTouchDevice.js
CHANGED
package/es/loadResource.js
CHANGED
|
@@ -1,44 +1,55 @@
|
|
|
1
1
|
/* eslint-disable import/prefer-default-export */
|
|
2
|
+
|
|
2
3
|
/* use promise and remove callback */
|
|
3
4
|
export default function loadResource(url, type, id, callback) {
|
|
4
5
|
let needDefer = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
|
|
5
6
|
return new Promise(resolve => {
|
|
6
7
|
let css;
|
|
7
8
|
let script;
|
|
9
|
+
|
|
8
10
|
if (id && document.getElementById(id)) {
|
|
9
11
|
resolve();
|
|
10
12
|
return;
|
|
11
13
|
}
|
|
14
|
+
|
|
12
15
|
if (type === 'css') {
|
|
13
16
|
css = document.createElement('link');
|
|
14
17
|
css.type = 'text/css';
|
|
15
18
|
css.rel = 'stylesheet';
|
|
16
19
|
css.href = url;
|
|
17
20
|
css.id = id || '';
|
|
21
|
+
|
|
18
22
|
css.onload = function () {
|
|
19
23
|
resolve();
|
|
20
24
|
};
|
|
25
|
+
|
|
21
26
|
css.onerror = function () {
|
|
22
27
|
resolve();
|
|
23
28
|
};
|
|
29
|
+
|
|
24
30
|
document.getElementsByTagName('head')[0].appendChild(css);
|
|
25
31
|
} else if (type === 'js') {
|
|
26
32
|
script = document.createElement('script');
|
|
27
33
|
script.type = 'text/javascript';
|
|
28
34
|
script.src = url;
|
|
29
35
|
script.defer = needDefer;
|
|
36
|
+
|
|
30
37
|
script.onload = function () {
|
|
31
38
|
resolve();
|
|
39
|
+
|
|
32
40
|
if (id) {
|
|
33
41
|
script.id = id;
|
|
34
42
|
}
|
|
43
|
+
|
|
35
44
|
if (typeof callback === 'function') {
|
|
36
45
|
callback();
|
|
37
46
|
}
|
|
38
47
|
};
|
|
48
|
+
|
|
39
49
|
script.onerror = function () {
|
|
40
50
|
resolve();
|
|
41
51
|
};
|
|
52
|
+
|
|
42
53
|
document.getElementsByTagName('head')[0].appendChild(script);
|
|
43
54
|
}
|
|
44
55
|
});
|
package/es/mergeStyle.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
const REPLACER_SYMBOL = '$';
|
|
2
|
-
|
|
3
|
-
// $ startWith is used for replace the existing style.
|
|
1
|
+
const REPLACER_SYMBOL = '$'; // $ startWith is used for replace the existing style.
|
|
4
2
|
// all other will be append
|
|
5
3
|
|
|
6
4
|
export default function mergeStyle(defaultStyle) {
|
|
@@ -9,33 +7,34 @@ export default function mergeStyle(defaultStyle) {
|
|
|
9
7
|
// if(!Object.keys(defaultStyle).includes('base')) {
|
|
10
8
|
// throw new Error(`STYLE CUSTOMIZATION RULE - Your style sheet should have "base" class name for customization`);
|
|
11
9
|
// }
|
|
12
|
-
|
|
13
10
|
return Object.keys(customStyle).reduce((res, next) => {
|
|
14
11
|
if (next.startsWith(REPLACER_SYMBOL)) {
|
|
15
12
|
let styleValue = customStyle[next];
|
|
16
13
|
let styleName = next.replace(REPLACER_SYMBOL, '');
|
|
17
|
-
|
|
14
|
+
|
|
15
|
+
if (!res[styleName] && !additionalStyle.includes(styleName)) {
|
|
18
16
|
throw new Error(`UNKNOWN CLASSNAME DETECTED - Given customStyle's key "${styleName}" is not available in that component style`);
|
|
19
17
|
} else if (additionalStyle.includes(styleName)) {
|
|
20
18
|
res[styleName] = styleValue;
|
|
21
19
|
} else {
|
|
22
|
-
let val =
|
|
20
|
+
let val = res[styleName];
|
|
23
21
|
Object.keys(res).map(keyName => {
|
|
24
22
|
let styleKey = res[keyName];
|
|
25
|
-
let
|
|
26
|
-
|
|
23
|
+
let ind = styleKey.indexOf(val);
|
|
24
|
+
|
|
27
25
|
if (ind !== -1) {
|
|
28
|
-
|
|
29
|
-
res[keyName] = styleClasses.join(' ');
|
|
26
|
+
res[keyName] = styleKey.replace(val, styleValue);
|
|
30
27
|
}
|
|
31
28
|
});
|
|
32
29
|
}
|
|
33
|
-
} else if (
|
|
34
|
-
let val =
|
|
30
|
+
} else if (res[next]) {
|
|
31
|
+
let val = res[next];
|
|
35
32
|
Object.keys(res).map(keyName => {
|
|
36
33
|
let styleKey = res[keyName];
|
|
37
34
|
let styleClasses = styleKey.split(' ');
|
|
35
|
+
val = val.split(' ')[0];
|
|
38
36
|
let ind = styleClasses.indexOf(val);
|
|
37
|
+
|
|
39
38
|
if (ind !== -1) {
|
|
40
39
|
styleClasses[ind] = styleClasses[ind] + ' ' + customStyle[next];
|
|
41
40
|
res[keyName] = styleClasses.join(' ');
|
|
@@ -43,12 +42,12 @@ export default function mergeStyle(defaultStyle) {
|
|
|
43
42
|
});
|
|
44
43
|
} else if (additionalStyle.includes(next)) {
|
|
45
44
|
res[next] = customStyle[next];
|
|
46
|
-
} else if (!
|
|
45
|
+
} else if (!res[next] && !additionalStyle.includes(next)) {
|
|
47
46
|
// res[next] = customStyle[next];
|
|
48
47
|
throw new Error(`UNKNOWN CLASSNAME DETECTED - Given customStyle's key "${next}" is not available in that component style`);
|
|
49
48
|
}
|
|
49
|
+
|
|
50
50
|
return res;
|
|
51
|
-
}, {
|
|
52
|
-
...defaultStyle
|
|
51
|
+
}, { ...defaultStyle
|
|
53
52
|
});
|
|
54
53
|
}
|
package/es/omit.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
|
-
|
|
3
2
|
/**
|
|
4
3
|
* tagAttributes - is used to spread these attributes for events customize and override few attributes.
|
|
5
4
|
*/
|
|
5
|
+
|
|
6
6
|
export const tagAttributes = "tagAttributes";
|
|
7
7
|
const attributesList = ["tabIndex"];
|
|
8
8
|
const dataAttribute = "^data|on";
|
|
@@ -10,6 +10,7 @@ export const tagAttributesPropType = function (props, propName, componentName) {
|
|
|
10
10
|
if (Object.prototype.toString.call(props) !== "[object Object]") {
|
|
11
11
|
console.error(`Warning: Failed prop type: Invalid prop \`${propName}\` of type \`${props ? typeof props : undefined}\` supplied to \`${componentName}\`, expected \`object\`.`);
|
|
12
12
|
}
|
|
13
|
+
|
|
13
14
|
let curPattern = new RegExp(`^(${attributesList.join("|")})$`);
|
|
14
15
|
let curPattern2 = new RegExp(dataAttribute);
|
|
15
16
|
Object.keys(props[propName]).forEach(keyName => {
|
|
@@ -25,6 +26,7 @@ export const tagAttributesShape = shapeOf => (props, propName, componentName) =>
|
|
|
25
26
|
console.error(`Warning: these key ( ${keyName} ) aren't allowed in ${propName}, component: ${componentName}`);
|
|
26
27
|
return;
|
|
27
28
|
}
|
|
29
|
+
|
|
28
30
|
shapeOf[keyName](propObject, keyName, `${componentName} prop: ${propName}.${keyName} `);
|
|
29
31
|
});
|
|
30
32
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
|
-
|
|
3
2
|
/**
|
|
4
3
|
* tagGeneralAttributes - is to spread the global attributes in component.
|
|
5
4
|
*/
|
|
5
|
+
|
|
6
6
|
export const tagGeneralAttributes = "tagGeneralAttributes";
|
|
7
7
|
const attributesList = ["accesskey", "contentEditable", "dir", "draggable", "hidden", "lang", "tabIndex", "title", "spellcheck", "translate"];
|
|
8
8
|
const dataAttribute = "^data|on";
|
|
@@ -10,6 +10,7 @@ export const tagGeneralAttributesPropType = function (props, propName, component
|
|
|
10
10
|
if (Object.prototype.toString.call(props) !== "[object Object]") {
|
|
11
11
|
console.error(`Warning: Failed prop type: Invalid prop \`${propName}\` of type \`${props ? typeof props : undefined}\` supplied to \`${componentName}\`, expected \`object\`.`);
|
|
12
12
|
}
|
|
13
|
+
|
|
13
14
|
let curPattern = new RegExp(`^(${attributesList.join("|")})$`);
|
|
14
15
|
let curPattern2 = new RegExp(dataAttribute);
|
|
15
16
|
Object.keys(props[propName]).forEach(keyName => {
|
|
@@ -25,6 +26,7 @@ export const tagGeneralAttributesShape = shapeOf => (props, propName, componentN
|
|
|
25
26
|
console.error(`Warning: these key ( ${keyName} ) aren't allowed in ${propName}, component: ${componentName}`);
|
|
26
27
|
return;
|
|
27
28
|
}
|
|
29
|
+
|
|
28
30
|
shapeOf[keyName](propObject, keyName, `${componentName} prop: ${propName}.${keyName} `);
|
|
29
31
|
});
|
|
30
32
|
};
|
package/es/props/uiProps.js
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
/* eslint-disable no-labels */
|
|
2
|
+
|
|
2
3
|
/* eslint-disable no-restricted-syntax */
|
|
3
4
|
import PropTypes from 'prop-types';
|
|
4
|
-
import { variants, colors, sizes, shapes, decorations, positions } from
|
|
5
|
+
import { variants, colors, sizes, shapes, decorations, positions } from "../constantProps";
|
|
5
6
|
export const getVariantProps = (variants, exvariant) => {
|
|
6
7
|
let variant = [];
|
|
8
|
+
|
|
7
9
|
if (exvariant) {
|
|
8
10
|
variant = [...exvariant];
|
|
9
11
|
}
|
|
12
|
+
|
|
10
13
|
variant = [...variant, ...variants];
|
|
11
14
|
return {
|
|
12
15
|
variant: PropTypes.oneOf(variant)
|
|
@@ -17,9 +20,11 @@ export const variantProps = {
|
|
|
17
20
|
};
|
|
18
21
|
export const getColorProps = (colors, excolors) => {
|
|
19
22
|
let color = [];
|
|
23
|
+
|
|
20
24
|
if (excolors) {
|
|
21
25
|
color = [...excolors];
|
|
22
26
|
}
|
|
27
|
+
|
|
23
28
|
color = [...color, ...colors];
|
|
24
29
|
return {
|
|
25
30
|
color: PropTypes.oneOf(color)
|
|
@@ -30,9 +35,11 @@ export const colorProps = {
|
|
|
30
35
|
};
|
|
31
36
|
export const getSizeProps = (sizes, exSizes) => {
|
|
32
37
|
let size = [];
|
|
38
|
+
|
|
33
39
|
if (exSizes) {
|
|
34
40
|
size = [...exSizes];
|
|
35
41
|
}
|
|
42
|
+
|
|
36
43
|
size = [...size, ...sizes];
|
|
37
44
|
return {
|
|
38
45
|
size: PropTypes.oneOf(size)
|
|
@@ -43,9 +50,11 @@ export const sizeProps = {
|
|
|
43
50
|
};
|
|
44
51
|
export const getShapeProps = (shapes, exShapes) => {
|
|
45
52
|
let shape = [];
|
|
53
|
+
|
|
46
54
|
if (exShapes) {
|
|
47
55
|
shape = [...exShapes];
|
|
48
56
|
}
|
|
57
|
+
|
|
49
58
|
shape = [...shape, ...shapes];
|
|
50
59
|
return {
|
|
51
60
|
shape: PropTypes.oneOf(shape)
|
|
@@ -56,9 +65,11 @@ export const shapeProps = {
|
|
|
56
65
|
};
|
|
57
66
|
export const getDecorationProps = (decorations, exDecorations) => {
|
|
58
67
|
let decoration = [];
|
|
68
|
+
|
|
59
69
|
if (exDecorations) {
|
|
60
70
|
decoration = [...exDecorations];
|
|
61
71
|
}
|
|
72
|
+
|
|
62
73
|
decoration = [...decoration, ...decorations];
|
|
63
74
|
return {
|
|
64
75
|
textDecoration: PropTypes.oneOf(decoration)
|
|
@@ -69,9 +80,11 @@ export const decorationProps = {
|
|
|
69
80
|
};
|
|
70
81
|
export const getPositionProps = (positions, expositions) => {
|
|
71
82
|
let position = [];
|
|
83
|
+
|
|
72
84
|
if (expositions) {
|
|
73
85
|
position = [...expositions];
|
|
74
86
|
}
|
|
87
|
+
|
|
75
88
|
position = [...position, ...positions];
|
|
76
89
|
return {
|
|
77
90
|
position: PropTypes.oneOf(position)
|
package/es/reducerHandler.js
CHANGED
|
@@ -2,11 +2,14 @@ import { useReducer } from 'react';
|
|
|
2
2
|
export default function useCommonReducer(defaultReducer, customReducer, initialArg, init) {
|
|
3
3
|
const proxyReducer = (state, action) => {
|
|
4
4
|
let lastState = defaultReducer(state, action);
|
|
5
|
+
|
|
5
6
|
if (customReducer) {
|
|
6
7
|
return customReducer(lastState, action);
|
|
7
8
|
}
|
|
9
|
+
|
|
8
10
|
return lastState;
|
|
9
11
|
};
|
|
12
|
+
|
|
10
13
|
const [state, dispatch] = useReducer(proxyReducer, initialArg, init);
|
|
11
14
|
return {
|
|
12
15
|
state,
|
package/es/uniqueNumber.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
export default function uniqueNumber() {
|
|
2
2
|
let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
3
3
|
//let randomId = (Date.now() + Math.random()).toString(36);
|
|
4
|
-
var date = Date.now();
|
|
4
|
+
var date = Date.now(); // If created at same millisecond as previous
|
|
5
5
|
|
|
6
|
-
// If created at same millisecond as previous
|
|
7
6
|
if (date <= uniqueNumber.previous) {
|
|
8
7
|
date = ++uniqueNumber.previous;
|
|
9
8
|
} else {
|
|
10
9
|
uniqueNumber.previous = date;
|
|
11
10
|
}
|
|
11
|
+
|
|
12
12
|
return prefix ? `${prefix}-${date}` : date;
|
|
13
13
|
}
|
|
14
14
|
uniqueNumber.previous = 0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohodesk/utils",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.14",
|
|
4
4
|
"description": "Unified Component Library - Utils",
|
|
5
5
|
"main": "es/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -18,8 +18,9 @@
|
|
|
18
18
|
"LIBRARY"
|
|
19
19
|
],
|
|
20
20
|
"scripts": {
|
|
21
|
+
"download": "react-cli clean ./node_modules ./package-lock.json && npm install",
|
|
21
22
|
"build": "type react-cli && react-cli build:component:es",
|
|
22
|
-
"
|
|
23
|
+
"build:watch": "react-cli build:component:es -w",
|
|
23
24
|
"clean": "react-cli clean unittest coverage es result.json",
|
|
24
25
|
"rtl": "react-cli rtl ./src ./es",
|
|
25
26
|
"nodefix": "node ../buildtool_patch.js",
|