@elliemae/ds-classnames 2.2.0-alpha.3 → 2.2.0-next.2
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/cjs/aggregatedClasses.js +89 -68
- package/cjs/classNameManager.js +77 -68
- package/cjs/converPropsToFormModifiers.js +25 -48
- package/cjs/convertPropToFeedBackModifiers.js +25 -51
- package/cjs/convertPropsToColorModifiers.js +21 -41
- package/cjs/convertPropsToLayoutModifiers.js +27 -51
- package/cjs/convertPropsToSizeModifiers.js +28 -62
- package/cjs/convertPropsToTextModifiers.js +23 -43
- package/cjs/index.js +12 -38
- package/cjs/validateNativeProps.js +31 -48
- package/esm/aggregatedClasses.js +75 -41
- package/esm/classNameManager.js +67 -38
- package/esm/converPropsToFormModifiers.js +23 -19
- package/esm/convertPropToFeedBackModifiers.js +23 -22
- package/esm/convertPropsToColorModifiers.js +19 -12
- package/esm/convertPropsToLayoutModifiers.js +25 -22
- package/esm/convertPropsToSizeModifiers.js +26 -33
- package/esm/convertPropsToTextModifiers.js +21 -14
- package/esm/index.js +2 -9
- package/esm/validateNativeProps.js +19 -19
- package/package.json +3 -3
- package/types/classNameManager.d.ts +0 -1
- package/types/converPropsToFormModifiers.d.ts +0 -1
- package/types/convertPropToFeedBackModifiers.d.ts +0 -1
- package/types/convertPropsToColorModifiers.d.ts +0 -1
- package/types/convertPropsToLayoutModifiers.d.ts +0 -1
- package/types/convertPropsToSizeModifiers.d.ts +0 -1
- package/types/convertPropsToTextModifiers.d.ts +0 -1
- package/cjs/aggregatedClasses.js.map +0 -7
- package/cjs/aggregatedClasses.md +0 -323
- package/cjs/classNameManager.js.map +0 -7
- package/cjs/converPropsToFormModifiers.js.map +0 -7
- package/cjs/convertPropToFeedBackModifiers.js.map +0 -7
- package/cjs/convertPropsToColorModifiers.js.map +0 -7
- package/cjs/convertPropsToLayoutModifiers.js.map +0 -7
- package/cjs/convertPropsToSizeModifiers.js.map +0 -7
- package/cjs/convertPropsToTextModifiers.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/validateNativeProps.js.map +0 -7
- package/esm/aggregatedClasses.js.map +0 -7
- package/esm/aggregatedClasses.md +0 -323
- package/esm/classNameManager.js.map +0 -7
- package/esm/converPropsToFormModifiers.js.map +0 -7
- package/esm/convertPropToFeedBackModifiers.js.map +0 -7
- package/esm/convertPropsToColorModifiers.js.map +0 -7
- package/esm/convertPropsToLayoutModifiers.js.map +0 -7
- package/esm/convertPropsToSizeModifiers.js.map +0 -7
- package/esm/convertPropsToTextModifiers.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/validateNativeProps.js.map +0 -7
package/esm/classNameManager.js
CHANGED
|
@@ -1,54 +1,83 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { isEmpty } from
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
const
|
|
15
|
-
const
|
|
16
|
-
const
|
|
17
|
-
const
|
|
1
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
2
|
+
import { isEmpty } from '@elliemae/ds-utilities/utils';
|
|
3
|
+
import DimsumConfig from '@elliemae/ds-shared/dimsum.config';
|
|
4
|
+
import pipe from './converPropsToFormModifiers.js';
|
|
5
|
+
import pipe$1 from './convertPropsToLayoutModifiers.js';
|
|
6
|
+
import pipe$2 from './convertPropToFeedBackModifiers.js';
|
|
7
|
+
import pipe$3 from './convertPropsToSizeModifiers.js';
|
|
8
|
+
import pipe$4 from './convertPropsToTextModifiers.js';
|
|
9
|
+
import pipe$5 from './convertPropsToColorModifiers.js';
|
|
10
|
+
|
|
11
|
+
const cssPrefix = "".concat(DimsumConfig.classNamePrefix, "-");
|
|
12
|
+
|
|
13
|
+
const executePipelines = props => {
|
|
14
|
+
const form = pipe().execute(props);
|
|
15
|
+
const layout = pipe$1().execute(props);
|
|
16
|
+
const feedback = pipe$2().execute(props);
|
|
17
|
+
const size = pipe$3().execute(props);
|
|
18
|
+
const text = pipe$4().execute(props);
|
|
19
|
+
const color = pipe$5().execute(props);
|
|
18
20
|
return [...form, ...layout, ...feedback, ...size, ...text, ...color];
|
|
19
21
|
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
/**
|
|
23
|
+
* Docs: http://getbem.com/naming/
|
|
24
|
+
* blockName
|
|
25
|
+
* cssClassNameModifier: Main modifier
|
|
26
|
+
* props { hasError, hasWarning, hasSuccess, readOnly, disabled}
|
|
27
|
+
*
|
|
28
|
+
* @param blockName
|
|
29
|
+
* @param cssClassNameModifier
|
|
30
|
+
* @param props
|
|
31
|
+
* @param options
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
const cssPipeline = function () {
|
|
36
|
+
let blockName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
|
|
37
|
+
let cssClassNameModifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
38
|
+
let props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
39
|
+
let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
40
|
+
const {
|
|
41
|
+
prefix,
|
|
42
|
+
element
|
|
43
|
+
} = options;
|
|
44
|
+
const prefixBlockName = "".concat(prefix || cssPrefix).concat(blockName).concat(element ? "__".concat(element) : ''); // PipeLine
|
|
45
|
+
|
|
23
46
|
const pipes = !isEmpty(props) ? executePipelines(props) : [];
|
|
24
|
-
const basePipeline = [prefixBlockName, ...pipes];
|
|
25
|
-
|
|
47
|
+
const basePipeline = [prefixBlockName, ...pipes]; // specific classname
|
|
48
|
+
|
|
49
|
+
const className = cssClassNameModifier ? [...basePipeline].join(" ".concat(prefixBlockName, "--")).concat(" ".concat(cssClassNameModifier)) : [...basePipeline].join(" ".concat(prefixBlockName, "--"));
|
|
26
50
|
return {
|
|
27
51
|
blockName,
|
|
28
52
|
cssPrefix,
|
|
29
53
|
prefixBlockName,
|
|
30
54
|
cssClassName: className,
|
|
55
|
+
|
|
31
56
|
mainModifier(modifier) {
|
|
32
|
-
return
|
|
57
|
+
return "".concat(className, "--").concat(modifier);
|
|
33
58
|
},
|
|
34
|
-
|
|
35
|
-
|
|
59
|
+
|
|
60
|
+
classNameBlock(elementName) {
|
|
61
|
+
let usePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
62
|
+
return "".concat(!usePrefix ? blockName : prefixBlockName, "-").concat(elementName);
|
|
36
63
|
},
|
|
37
|
-
|
|
38
|
-
|
|
64
|
+
|
|
65
|
+
classNameBlockModifier(modifierName) {
|
|
66
|
+
let elementBlockName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
67
|
+
return "".concat(prefixBlockName, "-").concat(elementBlockName, "--").concat(modifierName);
|
|
39
68
|
},
|
|
40
|
-
|
|
41
|
-
|
|
69
|
+
|
|
70
|
+
classNameElement(elementName) {
|
|
71
|
+
let elementBlockName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
72
|
+
return "".concat(prefixBlockName).concat(elementBlockName ? "-".concat(elementBlockName) : '', "__").concat(elementName);
|
|
42
73
|
},
|
|
43
|
-
|
|
44
|
-
|
|
74
|
+
|
|
75
|
+
classNameModifier(modifierName) {
|
|
76
|
+
let elementName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
77
|
+
return "".concat(prefixBlockName).concat(elementName ? "__".concat(elementName) : '', "--").concat(modifierName);
|
|
45
78
|
}
|
|
79
|
+
|
|
46
80
|
};
|
|
47
81
|
};
|
|
48
|
-
|
|
49
|
-
export {
|
|
50
|
-
cssPipeline as convertPropToCssClassName,
|
|
51
|
-
cssPrefix,
|
|
52
|
-
classNameManager_default as default
|
|
53
|
-
};
|
|
54
|
-
//# sourceMappingURL=classNameManager.js.map
|
|
82
|
+
|
|
83
|
+
export { cssPrefix, cssPipeline as default };
|
|
@@ -1,33 +1,37 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
|
|
6
|
+
const basicAction = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
readOnly = false,
|
|
9
|
+
disabled = false,
|
|
10
|
+
checked = false
|
|
11
|
+
} = _ref;
|
|
12
|
+
const cssModifier = []; // input state modifiers
|
|
13
|
+
|
|
14
|
+
if (checked) cssModifier.push('checked');
|
|
15
|
+
if (readOnly) cssModifier.push('readonly');
|
|
16
|
+
if (disabled) cssModifier.push('disabled');
|
|
14
17
|
return cssModifier;
|
|
15
18
|
};
|
|
19
|
+
|
|
16
20
|
const instance = [basicAction];
|
|
21
|
+
|
|
17
22
|
const pipe = () => ({
|
|
18
23
|
getInstance() {
|
|
19
24
|
return instance;
|
|
20
25
|
},
|
|
26
|
+
|
|
21
27
|
add(customModifier) {
|
|
22
28
|
instance.push(customModifier);
|
|
23
29
|
},
|
|
30
|
+
|
|
24
31
|
execute(props) {
|
|
25
32
|
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
26
33
|
}
|
|
34
|
+
|
|
27
35
|
});
|
|
28
|
-
|
|
29
|
-
export {
|
|
30
|
-
converPropsToFormModifiers_default as default,
|
|
31
|
-
pipe
|
|
32
|
-
};
|
|
33
|
-
//# sourceMappingURL=converPropsToFormModifiers.js.map
|
|
36
|
+
|
|
37
|
+
export { pipe as default };
|
|
@@ -1,36 +1,37 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
if (
|
|
16
|
-
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
|
|
6
|
+
const basicAction = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
hasError = false,
|
|
9
|
+
hasWarning = false,
|
|
10
|
+
hasSuccess = false,
|
|
11
|
+
modalType
|
|
12
|
+
} = _ref;
|
|
13
|
+
const cssModifier = []; // valid state modifier
|
|
14
|
+
|
|
15
|
+
if (hasError) cssModifier.push('error');else if (hasWarning) cssModifier.push('warning');else if (hasSuccess) cssModifier.push('success');
|
|
16
|
+
if (modalType) cssModifier.push("modal-type-".concat(modalType));
|
|
17
17
|
return cssModifier;
|
|
18
18
|
};
|
|
19
|
+
|
|
19
20
|
const instance = [basicAction];
|
|
21
|
+
|
|
20
22
|
const pipe = () => ({
|
|
21
23
|
getInstance() {
|
|
22
24
|
return instance;
|
|
23
25
|
},
|
|
26
|
+
|
|
24
27
|
add(customModifier) {
|
|
25
28
|
instance.push(customModifier);
|
|
26
29
|
},
|
|
30
|
+
|
|
27
31
|
execute(props) {
|
|
28
32
|
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
29
33
|
}
|
|
34
|
+
|
|
30
35
|
});
|
|
31
|
-
|
|
32
|
-
export {
|
|
33
|
-
convertPropToFeedBackModifiers_default as default,
|
|
34
|
-
pipe
|
|
35
|
-
};
|
|
36
|
-
//# sourceMappingURL=convertPropToFeedBackModifiers.js.map
|
|
36
|
+
|
|
37
|
+
export { pipe as default };
|
|
@@ -1,29 +1,36 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
|
|
6
|
+
const basicAction = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
color = null
|
|
9
|
+
} = _ref;
|
|
3
10
|
const cssModifier = [];
|
|
11
|
+
|
|
4
12
|
if (color && color[0]) {
|
|
5
|
-
if (color[1] !== null)
|
|
6
|
-
cssModifier.push(`color-${color[0]}-${color[1]}`);
|
|
7
|
-
else
|
|
8
|
-
cssModifier.push(`color-${color[0]}`);
|
|
13
|
+
if (color[1] !== null) cssModifier.push("color-".concat(color[0], "-").concat(color[1]));else cssModifier.push("color-".concat(color[0]));
|
|
9
14
|
}
|
|
15
|
+
|
|
10
16
|
return cssModifier;
|
|
11
17
|
};
|
|
18
|
+
|
|
12
19
|
const instance = [basicAction];
|
|
20
|
+
|
|
13
21
|
const pipe = () => ({
|
|
14
22
|
getInstance() {
|
|
15
23
|
return instance;
|
|
16
24
|
},
|
|
25
|
+
|
|
17
26
|
add(customModifier) {
|
|
18
27
|
instance.push(customModifier);
|
|
19
28
|
},
|
|
29
|
+
|
|
20
30
|
execute(props) {
|
|
21
31
|
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
22
32
|
}
|
|
33
|
+
|
|
23
34
|
});
|
|
24
|
-
|
|
25
|
-
export {
|
|
26
|
-
convertPropsToColorModifiers_default as default,
|
|
27
|
-
pipe
|
|
28
|
-
};
|
|
29
|
-
//# sourceMappingURL=convertPropsToColorModifiers.js.map
|
|
35
|
+
|
|
36
|
+
export { pipe as default };
|
|
@@ -1,36 +1,39 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
if (
|
|
16
|
-
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
|
|
6
|
+
const basicAction = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
id,
|
|
9
|
+
buttonType = 'default',
|
|
10
|
+
fluidWidth = false,
|
|
11
|
+
fluidHeight = false
|
|
12
|
+
} = _ref;
|
|
13
|
+
const cssModifier = []; // buttons types
|
|
14
|
+
|
|
15
|
+
if (id) cssModifier.push("id-".concat(id));
|
|
16
|
+
if (buttonType) cssModifier.push(buttonType);
|
|
17
|
+
if (fluidWidth) cssModifier.push('fluid-width');
|
|
18
|
+
if (fluidHeight) cssModifier.push('fluid-height');
|
|
17
19
|
return cssModifier;
|
|
18
20
|
};
|
|
21
|
+
|
|
19
22
|
const instance = [basicAction];
|
|
23
|
+
|
|
20
24
|
const pipe = () => ({
|
|
21
25
|
getInstance() {
|
|
22
26
|
return instance;
|
|
23
27
|
},
|
|
28
|
+
|
|
24
29
|
add(customModifier) {
|
|
25
30
|
instance.push(customModifier);
|
|
26
31
|
},
|
|
32
|
+
|
|
27
33
|
execute(props) {
|
|
28
34
|
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
29
35
|
}
|
|
36
|
+
|
|
30
37
|
});
|
|
31
|
-
|
|
32
|
-
export {
|
|
33
|
-
convertPropsToLayoutModifiers_default as default,
|
|
34
|
-
pipe
|
|
35
|
-
};
|
|
36
|
-
//# sourceMappingURL=convertPropsToLayoutModifiers.js.map
|
|
38
|
+
|
|
39
|
+
export { pipe as default };
|
|
@@ -1,48 +1,41 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
|
|
6
|
+
const basicAction = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
size = null,
|
|
9
|
+
extraTight = false,
|
|
10
|
+
tight = false,
|
|
11
|
+
base = false,
|
|
12
|
+
bitLoose = false,
|
|
13
|
+
loose = false,
|
|
14
|
+
extraLoose = false,
|
|
15
|
+
superLoose = false
|
|
16
|
+
} = _ref;
|
|
12
17
|
const cssModifier = [];
|
|
13
|
-
if (size)
|
|
14
|
-
|
|
15
|
-
if (extraTight)
|
|
16
|
-
cssModifier.push("size-extra-tight");
|
|
17
|
-
else if (tight)
|
|
18
|
-
cssModifier.push("size-tight");
|
|
19
|
-
else if (base)
|
|
20
|
-
cssModifier.push("size-base");
|
|
21
|
-
else if (bitLoose)
|
|
22
|
-
cssModifier.push("size-bit-loose");
|
|
23
|
-
else if (loose)
|
|
24
|
-
cssModifier.push("size-loose");
|
|
25
|
-
else if (extraLoose)
|
|
26
|
-
cssModifier.push("size-extra-loose");
|
|
27
|
-
else if (superLoose)
|
|
28
|
-
cssModifier.push("size-super-loose");
|
|
18
|
+
if (size) cssModifier.push("".concat(size)); // Size as Flag
|
|
19
|
+
|
|
20
|
+
if (extraTight) cssModifier.push('size-extra-tight');else if (tight) cssModifier.push('size-tight');else if (base) cssModifier.push('size-base');else if (bitLoose) cssModifier.push('size-bit-loose');else if (loose) cssModifier.push('size-loose');else if (extraLoose) cssModifier.push('size-extra-loose');else if (superLoose) cssModifier.push('size-super-loose');
|
|
29
21
|
return cssModifier;
|
|
30
22
|
};
|
|
23
|
+
|
|
31
24
|
const instance = [basicAction];
|
|
25
|
+
|
|
32
26
|
const pipe = () => ({
|
|
33
27
|
getInstance() {
|
|
34
28
|
return instance;
|
|
35
29
|
},
|
|
30
|
+
|
|
36
31
|
add(customModifier) {
|
|
37
32
|
instance.push(customModifier);
|
|
38
33
|
},
|
|
34
|
+
|
|
39
35
|
execute(props) {
|
|
40
36
|
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
41
37
|
}
|
|
38
|
+
|
|
42
39
|
});
|
|
43
|
-
|
|
44
|
-
export {
|
|
45
|
-
convertPropsToSizeModifiers_default as default,
|
|
46
|
-
pipe
|
|
47
|
-
};
|
|
48
|
-
//# sourceMappingURL=convertPropsToSizeModifiers.js.map
|
|
40
|
+
|
|
41
|
+
export { pipe as default };
|
|
@@ -1,29 +1,36 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
4
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
5
|
+
|
|
6
|
+
const basicAction = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
textEllipsis,
|
|
9
|
+
textAlignment,
|
|
10
|
+
wordBreak
|
|
11
|
+
} = _ref;
|
|
3
12
|
const cssModifier = [];
|
|
4
|
-
if (textEllipsis)
|
|
5
|
-
|
|
6
|
-
if (
|
|
7
|
-
cssModifier.push("text-overflow-word-break");
|
|
8
|
-
if (["left", "right", "center", "justify"].indexOf(textAlignment) > -1)
|
|
9
|
-
cssModifier.push(`text-align-${textAlignment}`);
|
|
13
|
+
if (textEllipsis) cssModifier.push('text-overflow-ellipsis');
|
|
14
|
+
if (wordBreak) cssModifier.push('text-overflow-word-break');
|
|
15
|
+
if (['left', 'right', 'center', 'justify'].indexOf(textAlignment) > -1) cssModifier.push("text-align-".concat(textAlignment));
|
|
10
16
|
return cssModifier;
|
|
11
17
|
};
|
|
18
|
+
|
|
12
19
|
const instance = [basicAction];
|
|
20
|
+
|
|
13
21
|
const pipe = () => ({
|
|
14
22
|
getInstance() {
|
|
15
23
|
return instance;
|
|
16
24
|
},
|
|
25
|
+
|
|
17
26
|
add(customModifier) {
|
|
18
27
|
instance.push(customModifier);
|
|
19
28
|
},
|
|
29
|
+
|
|
20
30
|
execute(props) {
|
|
21
31
|
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
22
32
|
}
|
|
33
|
+
|
|
23
34
|
});
|
|
24
|
-
|
|
25
|
-
export {
|
|
26
|
-
convertPropsToTextModifiers_default as default,
|
|
27
|
-
pipe
|
|
28
|
-
};
|
|
29
|
-
//# sourceMappingURL=convertPropsToTextModifiers.js.map
|
|
35
|
+
|
|
36
|
+
export { pipe as default };
|
package/esm/index.js
CHANGED
|
@@ -1,9 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { default as default3 } from "./aggregatedClasses";
|
|
4
|
-
export {
|
|
5
|
-
default3 as aggregatedClasses,
|
|
6
|
-
default2 as convertPropToCssClassName,
|
|
7
|
-
cssPrefix
|
|
8
|
-
};
|
|
9
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
export { default as convertPropToCssClassName, cssPrefix } from './classNameManager.js';
|
|
2
|
+
export { default as aggregatedClasses } from './aggregatedClasses.js';
|
|
@@ -1,4 +1,15 @@
|
|
|
1
|
-
import
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
+
|
|
8
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
9
|
+
|
|
10
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
11
|
+
|
|
12
|
+
/* eslint-disable max-lines */
|
|
2
13
|
const attributeWhiteList = {
|
|
3
14
|
accept: true,
|
|
4
15
|
acceptCharset: true,
|
|
@@ -266,15 +277,10 @@ const eventsWhiteList = {
|
|
|
266
277
|
onTransitionEnd: true,
|
|
267
278
|
onToggle: true
|
|
268
279
|
};
|
|
269
|
-
const whiteList = {
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
...eventsWhiteList
|
|
274
|
-
};
|
|
275
|
-
const isDataAttribute = (attribute) => attribute.substring(0, 5) === "data-";
|
|
276
|
-
const isAriaAttribute = (attribute) => attribute.substring(0, 6) === "aria-";
|
|
277
|
-
const isValidNativeAttribute = (attribute) => whiteList[attribute] === true || isDataAttribute(attribute) || isAriaAttribute(attribute) || attribute.toLowerCase() === attribute;
|
|
280
|
+
const whiteList = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, attributeWhiteList), svgAttributesWhiteList), otherWhiteList), eventsWhiteList);
|
|
281
|
+
const isDataAttribute = attribute => attribute.substring(0, 5) === 'data-';
|
|
282
|
+
const isAriaAttribute = attribute => attribute.substring(0, 6) === 'aria-';
|
|
283
|
+
const isValidNativeAttribute = attribute => whiteList[attribute] === true || isDataAttribute(attribute) || isAriaAttribute(attribute) || attribute.toLowerCase() === attribute;
|
|
278
284
|
const nativeHTMLElements = {
|
|
279
285
|
a: true,
|
|
280
286
|
abbr: true,
|
|
@@ -389,12 +395,6 @@ const nativeHTMLElements = {
|
|
|
389
395
|
video: true,
|
|
390
396
|
wbr: true
|
|
391
397
|
};
|
|
392
|
-
const isNativeHTMLElement =
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
isDataAttribute,
|
|
396
|
-
isNativeHTMLElement,
|
|
397
|
-
isValidNativeAttribute,
|
|
398
|
-
whiteList
|
|
399
|
-
};
|
|
400
|
-
//# sourceMappingURL=validateNativeProps.js.map
|
|
398
|
+
const isNativeHTMLElement = type => nativeHTMLElements[type] === true;
|
|
399
|
+
|
|
400
|
+
export { isAriaAttribute, isDataAttribute, isNativeHTMLElement, isValidNativeAttribute, whiteList };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-classnames",
|
|
3
|
-
"version": "2.2.0-
|
|
3
|
+
"version": "2.2.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum Library - Aggregated classNames to component",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -68,8 +68,8 @@
|
|
|
68
68
|
"dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w"
|
|
69
69
|
},
|
|
70
70
|
"dependencies": {
|
|
71
|
-
"@elliemae/ds-shared": "2.2.0-
|
|
72
|
-
"@elliemae/ds-utilities": "2.2.0-
|
|
71
|
+
"@elliemae/ds-shared": "2.2.0-next.2",
|
|
72
|
+
"@elliemae/ds-utilities": "2.2.0-next.2",
|
|
73
73
|
"obj-str": "~1.0.3"
|
|
74
74
|
},
|
|
75
75
|
"publishConfig": {
|
|
@@ -25,5 +25,4 @@ declare const cssPipeline: (blockName?: string, cssClassNameModifier?: string, p
|
|
|
25
25
|
classNameElement(elementName: any, elementBlockName?: string): string;
|
|
26
26
|
classNameModifier(modifierName: any, elementName?: string): string;
|
|
27
27
|
};
|
|
28
|
-
export { cssPipeline as convertPropToCssClassName };
|
|
29
28
|
export default cssPipeline;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/aggregatedClasses.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\n/* eslint-disable prettier/prettier */\n/* eslint-disable max-params */\n/* eslint-disable react/prop-types */\nimport React from 'react';\nimport cx from 'obj-str';\nimport { convertPropToCssClassName } from './classNameManager';\nimport { dimsumConfig } from '@elliemae/ds-shared/dimsum.config';\nimport {\n isValidNativeAttribute,\n isNativeHTMLElement,\n} from './validateNativeProps';\n\nexport const cssPrefix = dimsumConfig.classNamePrefix;\n\ntype AggregatedClassesT<T = unknown> = (\n type: any,\n props?: any,\n) => (\n block: string,\n element?: string | null,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n additionalModifiers?: { [key: string]: unknown } | ((arg: any) => { [key: string]: unknown }),\n options?: { [key: string]: unknown },\n) => React.ForwardRefExoticComponent<React.RefAttributes<T>>;\n\nconst generateClassNameWithModifier = (block, element, modifier) =>\n `${cssPrefix}-${block}${element ? `__${element}` : ''}--${modifier}`;\n\nconst appendBlockAndPrefixToObj = (obj, block, element) =>\n obj\n ? Object.keys(obj).reduce(\n (acc, key) => ({\n ...acc,\n [`${generateClassNameWithModifier(block, element, key)}`]: obj[key],\n }),\n {},\n )\n : [];\n\nconst aggregatedClasses: AggregatedClassesT=\n (type, props) =>\n (block, element, additionalModifiers, options = {}) =>\n React.forwardRef(({ innerRef, children, classProps, useComponent, className, as, ...rest }, ref) => {\n // get the additional classNames either from a function or an object\n let otherModifiers = appendBlockAndPrefixToObj(additionalModifiers, block, element);\n if (typeof additionalModifiers === 'function')\n otherModifiers = appendBlockAndPrefixToObj(\n additionalModifiers({ ...rest, ...classProps, className }),\n block,\n element,\n );\n\n const otherModifiersStr = cx(otherModifiers);\n const { prefix, propsToRemoveFromFinalElement = [] } = options;\n const { cssClassName: classNames } = convertPropToCssClassName(\n block,\n null,\n { ...classProps },\n { prefix, element },\n );\n const cleanedPropsPassedDown = { ...props, ...rest };\n propsToRemoveFromFinalElement.forEach((propKey) => {\n delete cleanedPropsPassedDown[propKey];\n });\n\n if (isNativeHTMLElement(block)) {\n Object.keys(cleanedPropsPassedDown).forEach((key) => {\n if (!isValidNativeAttribute(key)) delete cleanedPropsPassedDown[key];\n });\n }\n\n return React.createElement(\n as || type,\n {\n ref: innerRef || ref,\n className: [classNames, otherModifiersStr, className].join(' '),\n ...cleanedPropsPassedDown,\n },\n children,\n );\n });\n\nexport default aggregatedClasses;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkB;AAClB,qBAAe;AACf,8BAA0C;AAC1C,oBAA6B;AAC7B,iCAGO;AAEA,MAAM,YAAY,2BAAa;AAatC,MAAM,gCAAgC,CAAC,OAAO,SAAS,aACrD,GAAG,aAAa,QAAQ,UAAU,KAAK,YAAY,OAAO;AAE5D,MAAM,4BAA4B,CAAC,KAAK,OAAO,YAC7C,MACI,OAAO,KAAK,KAAK,OACjB,CAAC,KAAK,QAAS;AAAA,KACV;AAAA,GACF,GAAG,8BAA8B,OAAO,SAAS,SAAS,IAAI;AAAA,IAEjE,MAEA;AAEN,MAAM,oBACJ,CAAC,MAAM,UACL,CAAC,OAAO,SAAS,qBAAqB,UAAU,OAC9C,qBAAM,WAAW,CAAC,EAAE,UAAU,UAAU,YAAY,cAAc,WAAW,OAAO,QAAQ,QAAQ;AAElG,MAAI,iBAAiB,0BAA0B,qBAAqB,OAAO;AAC3E,MAAI,OAAO,wBAAwB;AACjC,qBAAiB,0BACf,oBAAoB,KAAK,SAAS,YAAY,cAC9C,OACA;AAGJ,QAAM,oBAAoB,4BAAG;AAC7B,QAAM,EAAE,QAAQ,gCAAgC,OAAO;AACvD,QAAM,EAAE,cAAc,eAAe,uDACnC,OACA,MACA,KAAK,cACL,EAAE,QAAQ;AAEZ,QAAM,yBAAyB,KAAK,UAAU;AAC9C,gCAA8B,QAAQ,CAAC,YAAY;AACjD,WAAO,uBAAuB;AAAA;AAGhC,MAAI,oDAAoB,QAAQ;AAC9B,WAAO,KAAK,wBAAwB,QAAQ,CAAC,QAAQ;AACnD,UAAI,CAAC,uDAAuB;AAAM,eAAO,uBAAuB;AAAA;AAAA;AAIpE,SAAO,qBAAM,cACX,MAAM,MACN;AAAA,IACE,KAAK,YAAY;AAAA,IACjB,WAAW,CAAC,YAAY,mBAAmB,WAAW,KAAK;AAAA,OACxD;AAAA,KAEL;AAAA;AAIV,IAAO,4BAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|