@zohodesk/utils 1.3.10 → 1.3.12
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 +19 -3
- package/es/compileClassNames.js +4 -128
- package/es/mergeStyle.js +40 -15
- package/package.json +3 -4
- package/LICENSE +0 -22
package/README.md
CHANGED
|
@@ -1,7 +1,23 @@
|
|
|
1
1
|
# #UNIFIED COMPONENTS LIBRARY - Utils
|
|
2
2
|
|
|
3
|
-
In this
|
|
3
|
+
In this package, We provide lots of util fuctions for web devlopment
|
|
4
4
|
|
|
5
|
-
# 1.3.
|
|
5
|
+
# 1.3.12
|
|
6
6
|
|
|
7
|
-
-
|
|
7
|
+
- `mergeStyle` functionality updated. Composed classes will also update if it is inside that file.
|
|
8
|
+
```js
|
|
9
|
+
// Before
|
|
10
|
+
const style = mergeStyle(
|
|
11
|
+
{ a: '1', b: '1 2' },
|
|
12
|
+
{ a: 'a' }
|
|
13
|
+
);
|
|
14
|
+
// style = { a: '1 a', b: '1 2' }
|
|
15
|
+
|
|
16
|
+
// After
|
|
17
|
+
const style = mergeStyle(
|
|
18
|
+
{ a: '1', b: '1 2' },
|
|
19
|
+
{ a: 'a' }
|
|
20
|
+
);
|
|
21
|
+
// style = { a: '1 a', b: '1 a 2' }
|
|
22
|
+
```
|
|
23
|
+
- `compileClassNames` code optimized. Will not support other than object as argument.
|
package/es/compileClassNames.js
CHANGED
|
@@ -1,25 +1,14 @@
|
|
|
1
1
|
import dataTypes, { isDataTypeOf } from "./dataTypes";
|
|
2
|
-
import { hasOwnProperty
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
*
|
|
6
|
-
* @param {object} classinfoList
|
|
7
|
-
* @returns {string}
|
|
8
|
-
*/
|
|
2
|
+
import { hasOwnProperty } from "./objectUtils";
|
|
9
3
|
const collectClassNames = function (processedClassNameList) {
|
|
10
4
|
for (let index = 0; index < (arguments.length <= 1 ? 0 : arguments.length - 1); index++) {
|
|
11
5
|
let classInfo = index + 1 < 1 || arguments.length <= index + 1 ? undefined : arguments[index + 1];
|
|
12
6
|
if (!classInfo) {
|
|
13
7
|
continue;
|
|
14
|
-
}
|
|
15
|
-
if (isDataTypeOf(classInfo, dataTypes.string) || isDataTypeOf(classInfo, dataTypes.number)) {
|
|
16
|
-
processedClassNameList.push(classInfo);
|
|
17
|
-
} else if (isDataTypeOf(classInfo, dataTypes.array)) {
|
|
18
|
-
processedClassNameList.push(collectClassNames.apply(null, classInfo));
|
|
19
8
|
} else if (isDataTypeOf(classInfo, dataTypes.object)) {
|
|
20
9
|
for (let property in classInfo) {
|
|
21
|
-
if (hasOwnProperty.call(classInfo, property) && classInfo[property]) {
|
|
22
|
-
processedClassNameList.push(property
|
|
10
|
+
if (hasOwnProperty.call(classInfo, property) && property !== 'undefined' && property !== 'null' && classInfo[property] && !processedClassNameList.includes(property)) {
|
|
11
|
+
processedClassNameList.push(property);
|
|
23
12
|
}
|
|
24
13
|
}
|
|
25
14
|
}
|
|
@@ -32,117 +21,4 @@ export default function compileClassNames() {
|
|
|
32
21
|
}
|
|
33
22
|
collectClassNames(resultClassNameList, ...classinfoList);
|
|
34
23
|
return resultClassNameList.filter(a => a !== '').join(' ');
|
|
35
|
-
}
|
|
36
|
-
;
|
|
37
|
-
|
|
38
|
-
/* discussion
|
|
39
|
-
passing object is enough i think. remaining option needed!!!
|
|
40
|
-
*/
|
|
41
|
-
|
|
42
|
-
//18-Nov-2021 code review changes updated.
|
|
43
|
-
|
|
44
|
-
/*
|
|
45
|
-
>>>>>>>>>>Code Review Suggestion Starts >>>>>>
|
|
46
|
-
let hasOwn = {}.hasOwnProperty;
|
|
47
|
-
|
|
48
|
-
Accounting readability, please change this to Object.hasOwnProperty
|
|
49
|
-
|
|
50
|
-
---
|
|
51
|
-
const compileClassNames = (...props)=>{
|
|
52
|
-
Please check the alternate term - collate -> collateClassNames -> Collect and Combine the classnames.
|
|
53
|
-
---
|
|
54
|
-
|
|
55
|
-
for (let i = 0; i < props.length; i++) {
|
|
56
|
-
|
|
57
|
-
Please try to to stick with functional programming. Again for the readability perspective.
|
|
58
|
-
Also, please stick with naming conventions for variables (i -> index).
|
|
59
|
-
|
|
60
|
-
---
|
|
61
|
-
if (argType === 'string' || argType === 'number') {
|
|
62
|
-
classes.push(this && this[arg] || arg);
|
|
63
|
-
} else if (Array.isArray(arg)) {
|
|
64
|
-
classes.push(compileClassNames.apply(this, arg));
|
|
65
|
-
} else if (argType === 'object') {
|
|
66
|
-
if (arg.toString === Object.prototype.toString) {
|
|
67
|
-
for (let key in arg) {
|
|
68
|
-
if (hasOwn.call(arg, key) && arg[key]) {
|
|
69
|
-
classes.push(this && this[key] || key);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
} else {
|
|
73
|
-
classes.push(arg.toString());
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
In this code block, pushing up the array,object checks before string || number will be easy to follow up as it clarifies about the reursive call, its context.
|
|
78
|
-
Please check the possibility of avoiding the usage of 'this' statement due to its complexity in understanding the concept.
|
|
79
|
-
|
|
80
|
-
---
|
|
81
|
-
Please write a functional method for the below line for easier understanding
|
|
82
|
-
|
|
83
|
-
if (arg.toString === Object.prototype.toString) {
|
|
84
|
-
|
|
85
|
-
---
|
|
86
|
-
|
|
87
|
-
Adding dedicated method to get the datatype of variables will help to stick on the SRP.
|
|
88
|
-
---
|
|
89
|
-
Check the possibility of providing platform to extend the algorithm works for other data structures like Map, WeakMap,etc..
|
|
90
|
-
|
|
91
|
-
>>>>>>> Code Review Suggestion Ends >>>>>>>>>>>>>>>>
|
|
92
|
-
*/
|
|
93
|
-
|
|
94
|
-
/*
|
|
95
|
-
|
|
96
|
-
>>>>>> Alternative Implementation Starts >>>>>>>>>>>>>>>>
|
|
97
|
-
|
|
98
|
-
let boundHasOwnMethod = Object.hasOwnProperty;
|
|
99
|
-
|
|
100
|
-
const collateClassNames = (...classinfoList) =>{
|
|
101
|
-
let processedClassNameList = [];
|
|
102
|
-
classinfoList.forEach( ( classInfo,index )=>{
|
|
103
|
-
if(!classInfo)
|
|
104
|
-
{
|
|
105
|
-
// continue the next iteration
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
let dataTypeofClassInfo = getDataType(classInfo);
|
|
109
|
-
if (dataTypeofClassInfo === 'string' || dataTypeofClassInfo === 'number')
|
|
110
|
-
{
|
|
111
|
-
processedClassNameList.push(classInfo);
|
|
112
|
-
}
|
|
113
|
-
else if(dataTypeofClassInfo === 'array')
|
|
114
|
-
{
|
|
115
|
-
processedClassNameList.push(collateClassNames(...classInfo));
|
|
116
|
-
}
|
|
117
|
-
else if(dataTypeofClassInfo === 'object')
|
|
118
|
-
{
|
|
119
|
-
for (let property in classInfo) {
|
|
120
|
-
if (boundHasOwnMethod.call(classInfo,property ) && classInfo[property]) {
|
|
121
|
-
processedClassNameList.push(property);
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
});
|
|
128
|
-
const joinClassNames = processedClassNameList.join(' ');
|
|
129
|
-
return joinClassNames;
|
|
130
|
-
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
const getDataType = (data)=>{
|
|
134
|
-
let dataTypeofClassInfo = typeof data;
|
|
135
|
-
let isArrayDataType = Array.isArray(data) === true;
|
|
136
|
-
if(isArrayDataType)
|
|
137
|
-
{
|
|
138
|
-
return 'array';
|
|
139
|
-
}
|
|
140
|
-
else
|
|
141
|
-
{
|
|
142
|
-
return dataTypeofClassInfo;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
>>>>>>>>>>>>>>>> Alternative Implementation Ends>>>>>>>>>>>>>>
|
|
148
|
-
*/
|
|
24
|
+
}
|
package/es/mergeStyle.js
CHANGED
|
@@ -1,26 +1,51 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* REPLACER_SYMBOL used to indentify
|
|
3
|
-
*/
|
|
4
1
|
const REPLACER_SYMBOL = '$';
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
*/
|
|
12
|
-
export default function mergeStyle(defaultStyle, customStyle) {
|
|
2
|
+
|
|
3
|
+
// $ startWith is used for replace the existing style.
|
|
4
|
+
// all other will be append
|
|
5
|
+
|
|
6
|
+
export default function mergeStyle(defaultStyle) {
|
|
7
|
+
let customStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
13
8
|
let additionalStyle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
9
|
+
// if(!Object.keys(defaultStyle).includes('base')) {
|
|
10
|
+
// throw new Error(`STYLE CUSTOMIZATION RULE - Your style sheet should have "base" class name for customization`);
|
|
11
|
+
// }
|
|
12
|
+
|
|
14
13
|
return Object.keys(customStyle).reduce((res, next) => {
|
|
15
14
|
if (next.startsWith(REPLACER_SYMBOL)) {
|
|
16
15
|
let styleValue = customStyle[next];
|
|
17
16
|
let styleName = next.replace(REPLACER_SYMBOL, '');
|
|
18
17
|
if (!defaultStyle[styleName] && !additionalStyle.includes(styleName)) {
|
|
19
|
-
|
|
18
|
+
throw new Error(`UNKNOWN CLASSNAME DETECTED - Given customStyle's key "${styleName}" is not available in that component style`);
|
|
19
|
+
} else if (additionalStyle.includes(styleName)) {
|
|
20
|
+
res[styleName] = styleValue;
|
|
21
|
+
} else {
|
|
22
|
+
let val = defaultStyle[styleName];
|
|
23
|
+
Object.keys(res).map(keyName => {
|
|
24
|
+
let styleKey = res[keyName];
|
|
25
|
+
let styleClasses = styleKey.split(' ');
|
|
26
|
+
let ind = styleClasses.indexOf(val);
|
|
27
|
+
if (ind !== -1) {
|
|
28
|
+
styleClasses[ind] = styleValue;
|
|
29
|
+
res[keyName] = styleClasses.join(' ');
|
|
30
|
+
}
|
|
31
|
+
});
|
|
20
32
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
res
|
|
33
|
+
} else if (defaultStyle[next]) {
|
|
34
|
+
let val = defaultStyle[next];
|
|
35
|
+
Object.keys(res).map(keyName => {
|
|
36
|
+
let styleKey = res[keyName];
|
|
37
|
+
let styleClasses = styleKey.split(' ');
|
|
38
|
+
let ind = styleClasses.indexOf(val);
|
|
39
|
+
if (ind !== -1) {
|
|
40
|
+
styleClasses[ind] = styleClasses[ind] + ' ' + customStyle[next];
|
|
41
|
+
res[keyName] = styleClasses.join(' ');
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
} else if (additionalStyle.includes(next)) {
|
|
45
|
+
res[next] = customStyle[next];
|
|
46
|
+
} else if (!defaultStyle[next] && !additionalStyle.includes(next)) {
|
|
47
|
+
// res[next] = customStyle[next];
|
|
48
|
+
throw new Error(`UNKNOWN CLASSNAME DETECTED - Given customStyle's key "${next}" is not available in that component style`);
|
|
24
49
|
}
|
|
25
50
|
return res;
|
|
26
51
|
}, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohodesk/utils",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.12",
|
|
4
4
|
"description": "Unified Component Library - Utils",
|
|
5
5
|
"main": "es/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -30,6 +30,5 @@
|
|
|
30
30
|
"files": [
|
|
31
31
|
"es",
|
|
32
32
|
"!**/__tests__"
|
|
33
|
-
]
|
|
34
|
-
|
|
35
|
-
}
|
|
33
|
+
]
|
|
34
|
+
}
|
package/LICENSE
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
Copyright (c) 2015-present Lerna Contributors
|
|
2
|
-
|
|
3
|
-
MIT License
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining
|
|
6
|
-
a copy of this software and associated documentation files (the
|
|
7
|
-
"Software"), to deal in the Software without restriction, including
|
|
8
|
-
without limitation the rights to use, copy, modify, merge, publish,
|
|
9
|
-
distribute, sublicense, and/or sell copies of the Software, and to
|
|
10
|
-
permit persons to whom the Software is furnished to do so, subject to
|
|
11
|
-
the following conditions:
|
|
12
|
-
|
|
13
|
-
The above copyright notice and this permission notice shall be
|
|
14
|
-
included in all copies or substantial portions of the Software.
|
|
15
|
-
|
|
16
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
17
|
-
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
18
|
-
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
19
|
-
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
20
|
-
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
21
|
-
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
22
|
-
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|