@elliemae/ds-classnames 2.3.0-alpha.9 → 2.3.0-next.3
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 +91 -0
- package/cjs/classNameManager.js +92 -0
- package/cjs/converPropsToFormModifiers.js +39 -0
- package/cjs/convertPropToFeedBackModifiers.js +39 -0
- package/cjs/convertPropsToColorModifiers.js +38 -0
- package/cjs/convertPropsToLayoutModifiers.js +41 -0
- package/cjs/convertPropsToSizeModifiers.js +43 -0
- package/cjs/convertPropsToTextModifiers.js +38 -0
- package/cjs/index.js +12 -0
- package/{dist/cjs → cjs}/validateNativeProps.js +31 -48
- package/esm/aggregatedClasses.js +78 -0
- package/esm/classNameManager.js +83 -0
- package/esm/converPropsToFormModifiers.js +37 -0
- package/esm/convertPropToFeedBackModifiers.js +37 -0
- package/esm/convertPropsToColorModifiers.js +36 -0
- package/esm/convertPropsToLayoutModifiers.js +39 -0
- package/esm/convertPropsToSizeModifiers.js +41 -0
- package/esm/convertPropsToTextModifiers.js +36 -0
- package/esm/index.js +2 -0
- package/{dist/esm → esm}/validateNativeProps.js +19 -19
- package/package.json +36 -38
- package/{dist/types → types}/aggregatedClasses.d.ts +0 -0
- package/{dist/types → types}/classNameManager.d.ts +0 -1
- package/{dist/types → types}/converPropsToFormModifiers.d.ts +0 -1
- package/{dist/types → types}/convertPropToFeedBackModifiers.d.ts +0 -1
- package/{dist/types → types}/convertPropsToColorModifiers.d.ts +0 -1
- package/{dist/types → types}/convertPropsToLayoutModifiers.d.ts +0 -1
- package/{dist/types → types}/convertPropsToSizeModifiers.d.ts +0 -1
- package/{dist/types → types}/convertPropsToTextModifiers.d.ts +0 -1
- package/{dist/types → types}/index.d.ts +0 -0
- package/{dist/types → types}/validateNativeProps.d.ts +0 -0
- package/dist/cjs/aggregatedClasses.js +0 -70
- package/dist/cjs/aggregatedClasses.js.map +0 -7
- package/dist/cjs/aggregatedClasses.md +0 -323
- package/dist/cjs/classNameManager.js +0 -83
- package/dist/cjs/classNameManager.js.map +0 -7
- package/dist/cjs/converPropsToFormModifiers.js +0 -62
- package/dist/cjs/converPropsToFormModifiers.js.map +0 -7
- package/dist/cjs/convertPropToFeedBackModifiers.js +0 -65
- package/dist/cjs/convertPropToFeedBackModifiers.js.map +0 -7
- package/dist/cjs/convertPropsToColorModifiers.js +0 -58
- package/dist/cjs/convertPropsToColorModifiers.js.map +0 -7
- package/dist/cjs/convertPropsToLayoutModifiers.js +0 -65
- package/dist/cjs/convertPropsToLayoutModifiers.js.map +0 -7
- package/dist/cjs/convertPropsToSizeModifiers.js +0 -77
- package/dist/cjs/convertPropsToSizeModifiers.js.map +0 -7
- package/dist/cjs/convertPropsToTextModifiers.js +0 -58
- package/dist/cjs/convertPropsToTextModifiers.js.map +0 -7
- package/dist/cjs/index.js +0 -38
- package/dist/cjs/index.js.map +0 -7
- package/dist/cjs/validateNativeProps.js.map +0 -7
- package/dist/esm/aggregatedClasses.js +0 -44
- package/dist/esm/aggregatedClasses.js.map +0 -7
- package/dist/esm/aggregatedClasses.md +0 -323
- package/dist/esm/classNameManager.js +0 -54
- package/dist/esm/classNameManager.js.map +0 -7
- package/dist/esm/converPropsToFormModifiers.js +0 -33
- package/dist/esm/converPropsToFormModifiers.js.map +0 -7
- package/dist/esm/convertPropToFeedBackModifiers.js +0 -36
- package/dist/esm/convertPropToFeedBackModifiers.js.map +0 -7
- package/dist/esm/convertPropsToColorModifiers.js +0 -29
- package/dist/esm/convertPropsToColorModifiers.js.map +0 -7
- package/dist/esm/convertPropsToLayoutModifiers.js +0 -36
- package/dist/esm/convertPropsToLayoutModifiers.js.map +0 -7
- package/dist/esm/convertPropsToSizeModifiers.js +0 -48
- package/dist/esm/convertPropsToSizeModifiers.js.map +0 -7
- package/dist/esm/convertPropsToTextModifiers.js +0 -29
- package/dist/esm/convertPropsToTextModifiers.js.map +0 -7
- package/dist/esm/index.js +0 -9
- package/dist/esm/index.js.map +0 -7
- package/dist/esm/validateNativeProps.js.map +0 -7
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
6
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
|
+
require('core-js/modules/esnext.async-iterator.reduce.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.reduce.js');
|
|
10
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
11
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
14
|
+
var React = require('react');
|
|
15
|
+
var cx = require('obj-str');
|
|
16
|
+
var DimsumConfig = require('@elliemae/ds-shared/dimsum.config');
|
|
17
|
+
var classNameManager = require('./classNameManager.js');
|
|
18
|
+
var validateNativeProps = require('./validateNativeProps.js');
|
|
19
|
+
|
|
20
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
21
|
+
|
|
22
|
+
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
23
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
24
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
25
|
+
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
26
|
+
var DimsumConfig__default = /*#__PURE__*/_interopDefaultLegacy(DimsumConfig);
|
|
27
|
+
|
|
28
|
+
const _excluded = ["innerRef", "children", "classProps", "useComponent", "className", "as"];
|
|
29
|
+
|
|
30
|
+
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; }
|
|
31
|
+
|
|
32
|
+
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__default["default"](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; }
|
|
33
|
+
const cssPrefix = DimsumConfig__default["default"].classNamePrefix;
|
|
34
|
+
|
|
35
|
+
const generateClassNameWithModifier = (block, element, modifier) => "".concat(cssPrefix, "-").concat(block).concat(element ? "__".concat(element) : '', "--").concat(modifier);
|
|
36
|
+
|
|
37
|
+
const appendBlockAndPrefixToObj = (obj, block, element) => obj ? Object.keys(obj).reduce((acc, key) => _objectSpread(_objectSpread({}, acc), {}, {
|
|
38
|
+
["".concat(generateClassNameWithModifier(block, element, key))]: obj[key]
|
|
39
|
+
}), {}) : [];
|
|
40
|
+
|
|
41
|
+
const aggregatedClasses = (type, props) => function (block, element, additionalModifiers) {
|
|
42
|
+
let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
43
|
+
return /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
|
|
44
|
+
let {
|
|
45
|
+
innerRef,
|
|
46
|
+
children,
|
|
47
|
+
classProps,
|
|
48
|
+
useComponent,
|
|
49
|
+
className,
|
|
50
|
+
as
|
|
51
|
+
} = _ref,
|
|
52
|
+
rest = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
53
|
+
|
|
54
|
+
// get the additional classNames either from a function or an object
|
|
55
|
+
let otherModifiers = appendBlockAndPrefixToObj(additionalModifiers, block, element);
|
|
56
|
+
if (typeof additionalModifiers === 'function') otherModifiers = appendBlockAndPrefixToObj(additionalModifiers(_objectSpread(_objectSpread(_objectSpread({}, rest), classProps), {}, {
|
|
57
|
+
className
|
|
58
|
+
})), block, element);
|
|
59
|
+
const otherModifiersStr = cx__default["default"](otherModifiers);
|
|
60
|
+
const {
|
|
61
|
+
prefix,
|
|
62
|
+
propsToRemoveFromFinalElement = []
|
|
63
|
+
} = options;
|
|
64
|
+
const {
|
|
65
|
+
cssClassName: classNames
|
|
66
|
+
} = classNameManager["default"](block, null, _objectSpread({}, classProps), {
|
|
67
|
+
prefix,
|
|
68
|
+
element
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
const cleanedPropsPassedDown = _objectSpread(_objectSpread({}, props), rest);
|
|
72
|
+
|
|
73
|
+
propsToRemoveFromFinalElement.forEach(propKey => {
|
|
74
|
+
delete cleanedPropsPassedDown[propKey];
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
if (validateNativeProps.isNativeHTMLElement(block)) {
|
|
78
|
+
Object.keys(cleanedPropsPassedDown).forEach(key => {
|
|
79
|
+
if (!validateNativeProps.isValidNativeAttribute(key)) delete cleanedPropsPassedDown[key];
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return /*#__PURE__*/React__default["default"].createElement(as || type, _objectSpread({
|
|
84
|
+
ref: innerRef || ref,
|
|
85
|
+
className: [classNames, otherModifiersStr, className].join(' ')
|
|
86
|
+
}, cleanedPropsPassedDown), children);
|
|
87
|
+
});
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
exports.cssPrefix = cssPrefix;
|
|
91
|
+
exports["default"] = aggregatedClasses;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
|
+
var utils = require('@elliemae/ds-utilities/utils');
|
|
7
|
+
var DimsumConfig = require('@elliemae/ds-shared/dimsum.config');
|
|
8
|
+
var converPropsToFormModifiers = require('./converPropsToFormModifiers.js');
|
|
9
|
+
var convertPropsToLayoutModifiers = require('./convertPropsToLayoutModifiers.js');
|
|
10
|
+
var convertPropToFeedBackModifiers = require('./convertPropToFeedBackModifiers.js');
|
|
11
|
+
var convertPropsToSizeModifiers = require('./convertPropsToSizeModifiers.js');
|
|
12
|
+
var convertPropsToTextModifiers = require('./convertPropsToTextModifiers.js');
|
|
13
|
+
var convertPropsToColorModifiers = require('./convertPropsToColorModifiers.js');
|
|
14
|
+
|
|
15
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
+
|
|
17
|
+
var DimsumConfig__default = /*#__PURE__*/_interopDefaultLegacy(DimsumConfig);
|
|
18
|
+
|
|
19
|
+
const cssPrefix = "".concat(DimsumConfig__default["default"].classNamePrefix, "-");
|
|
20
|
+
|
|
21
|
+
const executePipelines = props => {
|
|
22
|
+
const form = converPropsToFormModifiers().execute(props);
|
|
23
|
+
const layout = convertPropsToLayoutModifiers().execute(props);
|
|
24
|
+
const feedback = convertPropToFeedBackModifiers().execute(props);
|
|
25
|
+
const size = convertPropsToSizeModifiers().execute(props);
|
|
26
|
+
const text = convertPropsToTextModifiers().execute(props);
|
|
27
|
+
const color = convertPropsToColorModifiers().execute(props);
|
|
28
|
+
return [...form, ...layout, ...feedback, ...size, ...text, ...color];
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* Docs: http://getbem.com/naming/
|
|
32
|
+
* blockName
|
|
33
|
+
* cssClassNameModifier: Main modifier
|
|
34
|
+
* props { hasError, hasWarning, hasSuccess, readOnly, disabled}
|
|
35
|
+
*
|
|
36
|
+
* @param blockName
|
|
37
|
+
* @param cssClassNameModifier
|
|
38
|
+
* @param props
|
|
39
|
+
* @param options
|
|
40
|
+
*/
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
const cssPipeline = function () {
|
|
44
|
+
let blockName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
|
|
45
|
+
let cssClassNameModifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
46
|
+
let props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
47
|
+
let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
48
|
+
const {
|
|
49
|
+
prefix,
|
|
50
|
+
element
|
|
51
|
+
} = options;
|
|
52
|
+
const prefixBlockName = "".concat(prefix || cssPrefix).concat(blockName).concat(element ? "__".concat(element) : ''); // PipeLine
|
|
53
|
+
|
|
54
|
+
const pipes = !utils.isEmpty(props) ? executePipelines(props) : [];
|
|
55
|
+
const basePipeline = [prefixBlockName, ...pipes]; // specific classname
|
|
56
|
+
|
|
57
|
+
const className = cssClassNameModifier ? [...basePipeline].join(" ".concat(prefixBlockName, "--")).concat(" ".concat(cssClassNameModifier)) : [...basePipeline].join(" ".concat(prefixBlockName, "--"));
|
|
58
|
+
return {
|
|
59
|
+
blockName,
|
|
60
|
+
cssPrefix,
|
|
61
|
+
prefixBlockName,
|
|
62
|
+
cssClassName: className,
|
|
63
|
+
|
|
64
|
+
mainModifier(modifier) {
|
|
65
|
+
return "".concat(className, "--").concat(modifier);
|
|
66
|
+
},
|
|
67
|
+
|
|
68
|
+
classNameBlock(elementName) {
|
|
69
|
+
let usePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
70
|
+
return "".concat(!usePrefix ? blockName : prefixBlockName, "-").concat(elementName);
|
|
71
|
+
},
|
|
72
|
+
|
|
73
|
+
classNameBlockModifier(modifierName) {
|
|
74
|
+
let elementBlockName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
75
|
+
return "".concat(prefixBlockName, "-").concat(elementBlockName, "--").concat(modifierName);
|
|
76
|
+
},
|
|
77
|
+
|
|
78
|
+
classNameElement(elementName) {
|
|
79
|
+
let elementBlockName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
80
|
+
return "".concat(prefixBlockName).concat(elementBlockName ? "-".concat(elementBlockName) : '', "__").concat(elementName);
|
|
81
|
+
},
|
|
82
|
+
|
|
83
|
+
classNameModifier(modifierName) {
|
|
84
|
+
let elementName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
85
|
+
return "".concat(prefixBlockName).concat(elementName ? "__".concat(elementName) : '', "--").concat(modifierName);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
exports.cssPrefix = cssPrefix;
|
|
92
|
+
exports["default"] = cssPipeline;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('core-js/modules/esnext.async-iterator.reduce.js');
|
|
4
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.reduce.js');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
|
|
8
|
+
const basicAction = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
readOnly = false,
|
|
11
|
+
disabled = false,
|
|
12
|
+
checked = false
|
|
13
|
+
} = _ref;
|
|
14
|
+
const cssModifier = []; // input state modifiers
|
|
15
|
+
|
|
16
|
+
if (checked) cssModifier.push('checked');
|
|
17
|
+
if (readOnly) cssModifier.push('readonly');
|
|
18
|
+
if (disabled) cssModifier.push('disabled');
|
|
19
|
+
return cssModifier;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const instance = [basicAction];
|
|
23
|
+
|
|
24
|
+
const pipe = () => ({
|
|
25
|
+
getInstance() {
|
|
26
|
+
return instance;
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
add(customModifier) {
|
|
30
|
+
instance.push(customModifier);
|
|
31
|
+
},
|
|
32
|
+
|
|
33
|
+
execute(props) {
|
|
34
|
+
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
module.exports = pipe;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('core-js/modules/esnext.async-iterator.reduce.js');
|
|
4
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.reduce.js');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
|
|
8
|
+
const basicAction = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
hasError = false,
|
|
11
|
+
hasWarning = false,
|
|
12
|
+
hasSuccess = false,
|
|
13
|
+
modalType
|
|
14
|
+
} = _ref;
|
|
15
|
+
const cssModifier = []; // valid state modifier
|
|
16
|
+
|
|
17
|
+
if (hasError) cssModifier.push('error');else if (hasWarning) cssModifier.push('warning');else if (hasSuccess) cssModifier.push('success');
|
|
18
|
+
if (modalType) cssModifier.push("modal-type-".concat(modalType));
|
|
19
|
+
return cssModifier;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const instance = [basicAction];
|
|
23
|
+
|
|
24
|
+
const pipe = () => ({
|
|
25
|
+
getInstance() {
|
|
26
|
+
return instance;
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
add(customModifier) {
|
|
30
|
+
instance.push(customModifier);
|
|
31
|
+
},
|
|
32
|
+
|
|
33
|
+
execute(props) {
|
|
34
|
+
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
module.exports = pipe;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('core-js/modules/esnext.async-iterator.reduce.js');
|
|
4
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.reduce.js');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
|
|
8
|
+
const basicAction = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
color = null
|
|
11
|
+
} = _ref;
|
|
12
|
+
const cssModifier = [];
|
|
13
|
+
|
|
14
|
+
if (color && color[0]) {
|
|
15
|
+
if (color[1] !== null) cssModifier.push("color-".concat(color[0], "-").concat(color[1]));else cssModifier.push("color-".concat(color[0]));
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
return cssModifier;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const instance = [basicAction];
|
|
22
|
+
|
|
23
|
+
const pipe = () => ({
|
|
24
|
+
getInstance() {
|
|
25
|
+
return instance;
|
|
26
|
+
},
|
|
27
|
+
|
|
28
|
+
add(customModifier) {
|
|
29
|
+
instance.push(customModifier);
|
|
30
|
+
},
|
|
31
|
+
|
|
32
|
+
execute(props) {
|
|
33
|
+
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
module.exports = pipe;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('core-js/modules/esnext.async-iterator.reduce.js');
|
|
4
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.reduce.js');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
|
|
8
|
+
const basicAction = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
id,
|
|
11
|
+
buttonType = 'default',
|
|
12
|
+
fluidWidth = false,
|
|
13
|
+
fluidHeight = false
|
|
14
|
+
} = _ref;
|
|
15
|
+
const cssModifier = []; // buttons types
|
|
16
|
+
|
|
17
|
+
if (id) cssModifier.push("id-".concat(id));
|
|
18
|
+
if (buttonType) cssModifier.push(buttonType);
|
|
19
|
+
if (fluidWidth) cssModifier.push('fluid-width');
|
|
20
|
+
if (fluidHeight) cssModifier.push('fluid-height');
|
|
21
|
+
return cssModifier;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
const instance = [basicAction];
|
|
25
|
+
|
|
26
|
+
const pipe = () => ({
|
|
27
|
+
getInstance() {
|
|
28
|
+
return instance;
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
add(customModifier) {
|
|
32
|
+
instance.push(customModifier);
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
execute(props) {
|
|
36
|
+
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
module.exports = pipe;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('core-js/modules/esnext.async-iterator.reduce.js');
|
|
4
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.reduce.js');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
|
|
8
|
+
const basicAction = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
size = null,
|
|
11
|
+
extraTight = false,
|
|
12
|
+
tight = false,
|
|
13
|
+
base = false,
|
|
14
|
+
bitLoose = false,
|
|
15
|
+
loose = false,
|
|
16
|
+
extraLoose = false,
|
|
17
|
+
superLoose = false
|
|
18
|
+
} = _ref;
|
|
19
|
+
const cssModifier = [];
|
|
20
|
+
if (size) cssModifier.push("".concat(size)); // Size as Flag
|
|
21
|
+
|
|
22
|
+
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');
|
|
23
|
+
return cssModifier;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const instance = [basicAction];
|
|
27
|
+
|
|
28
|
+
const pipe = () => ({
|
|
29
|
+
getInstance() {
|
|
30
|
+
return instance;
|
|
31
|
+
},
|
|
32
|
+
|
|
33
|
+
add(customModifier) {
|
|
34
|
+
instance.push(customModifier);
|
|
35
|
+
},
|
|
36
|
+
|
|
37
|
+
execute(props) {
|
|
38
|
+
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
module.exports = pipe;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('core-js/modules/esnext.async-iterator.reduce.js');
|
|
4
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.reduce.js');
|
|
6
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
7
|
+
|
|
8
|
+
const basicAction = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
textEllipsis,
|
|
11
|
+
textAlignment,
|
|
12
|
+
wordBreak
|
|
13
|
+
} = _ref;
|
|
14
|
+
const cssModifier = [];
|
|
15
|
+
if (textEllipsis) cssModifier.push('text-overflow-ellipsis');
|
|
16
|
+
if (wordBreak) cssModifier.push('text-overflow-word-break');
|
|
17
|
+
if (['left', 'right', 'center', 'justify'].indexOf(textAlignment) > -1) cssModifier.push("text-align-".concat(textAlignment));
|
|
18
|
+
return cssModifier;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const instance = [basicAction];
|
|
22
|
+
|
|
23
|
+
const pipe = () => ({
|
|
24
|
+
getInstance() {
|
|
25
|
+
return instance;
|
|
26
|
+
},
|
|
27
|
+
|
|
28
|
+
add(customModifier) {
|
|
29
|
+
instance.push(customModifier);
|
|
30
|
+
},
|
|
31
|
+
|
|
32
|
+
execute(props) {
|
|
33
|
+
return instance.reduce((temp, action) => [...temp, ...action(props)], []);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
module.exports = pipe;
|
package/cjs/index.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var classNameManager = require('./classNameManager.js');
|
|
6
|
+
var aggregatedClasses = require('./aggregatedClasses.js');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
exports.convertPropToCssClassName = classNameManager["default"];
|
|
11
|
+
exports.cssPrefix = classNameManager.cssPrefix;
|
|
12
|
+
exports.aggregatedClasses = aggregatedClasses["default"];
|
|
@@ -1,39 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var validateNativeProps_exports = {};
|
|
29
|
-
__export(validateNativeProps_exports, {
|
|
30
|
-
isAriaAttribute: () => isAriaAttribute,
|
|
31
|
-
isDataAttribute: () => isDataAttribute,
|
|
32
|
-
isNativeHTMLElement: () => isNativeHTMLElement,
|
|
33
|
-
isValidNativeAttribute: () => isValidNativeAttribute,
|
|
34
|
-
whiteList: () => whiteList
|
|
35
|
-
});
|
|
36
|
-
var React = __toESM(require("react"));
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
10
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
11
|
+
|
|
12
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
|
+
|
|
14
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
15
|
+
|
|
16
|
+
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; }
|
|
17
|
+
|
|
18
|
+
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__default["default"](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; }
|
|
19
|
+
|
|
20
|
+
/* eslint-disable max-lines */
|
|
37
21
|
const attributeWhiteList = {
|
|
38
22
|
accept: true,
|
|
39
23
|
acceptCharset: true,
|
|
@@ -301,15 +285,10 @@ const eventsWhiteList = {
|
|
|
301
285
|
onTransitionEnd: true,
|
|
302
286
|
onToggle: true
|
|
303
287
|
};
|
|
304
|
-
const whiteList = {
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
...eventsWhiteList
|
|
309
|
-
};
|
|
310
|
-
const isDataAttribute = (attribute) => attribute.substring(0, 5) === "data-";
|
|
311
|
-
const isAriaAttribute = (attribute) => attribute.substring(0, 6) === "aria-";
|
|
312
|
-
const isValidNativeAttribute = (attribute) => whiteList[attribute] === true || isDataAttribute(attribute) || isAriaAttribute(attribute) || attribute.toLowerCase() === attribute;
|
|
288
|
+
const whiteList = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, attributeWhiteList), svgAttributesWhiteList), otherWhiteList), eventsWhiteList);
|
|
289
|
+
const isDataAttribute = attribute => attribute.substring(0, 5) === 'data-';
|
|
290
|
+
const isAriaAttribute = attribute => attribute.substring(0, 6) === 'aria-';
|
|
291
|
+
const isValidNativeAttribute = attribute => whiteList[attribute] === true || isDataAttribute(attribute) || isAriaAttribute(attribute) || attribute.toLowerCase() === attribute;
|
|
313
292
|
const nativeHTMLElements = {
|
|
314
293
|
a: true,
|
|
315
294
|
abbr: true,
|
|
@@ -424,6 +403,10 @@ const nativeHTMLElements = {
|
|
|
424
403
|
video: true,
|
|
425
404
|
wbr: true
|
|
426
405
|
};
|
|
427
|
-
const isNativeHTMLElement =
|
|
428
|
-
|
|
429
|
-
|
|
406
|
+
const isNativeHTMLElement = type => nativeHTMLElements[type] === true;
|
|
407
|
+
|
|
408
|
+
exports.isAriaAttribute = isAriaAttribute;
|
|
409
|
+
exports.isDataAttribute = isDataAttribute;
|
|
410
|
+
exports.isNativeHTMLElement = isNativeHTMLElement;
|
|
411
|
+
exports.isValidNativeAttribute = isValidNativeAttribute;
|
|
412
|
+
exports.whiteList = whiteList;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
3
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
4
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
5
|
+
import 'core-js/modules/esnext.async-iterator.reduce.js';
|
|
6
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
7
|
+
import 'core-js/modules/esnext.iterator.reduce.js';
|
|
8
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
9
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
10
|
+
import React from 'react';
|
|
11
|
+
import cx from 'obj-str';
|
|
12
|
+
import DimsumConfig from '@elliemae/ds-shared/dimsum.config';
|
|
13
|
+
import cssPipeline from './classNameManager.js';
|
|
14
|
+
import { isNativeHTMLElement, isValidNativeAttribute } from './validateNativeProps.js';
|
|
15
|
+
|
|
16
|
+
const _excluded = ["innerRef", "children", "classProps", "useComponent", "className", "as"];
|
|
17
|
+
|
|
18
|
+
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; }
|
|
19
|
+
|
|
20
|
+
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; }
|
|
21
|
+
const cssPrefix = DimsumConfig.classNamePrefix;
|
|
22
|
+
|
|
23
|
+
const generateClassNameWithModifier = (block, element, modifier) => "".concat(cssPrefix, "-").concat(block).concat(element ? "__".concat(element) : '', "--").concat(modifier);
|
|
24
|
+
|
|
25
|
+
const appendBlockAndPrefixToObj = (obj, block, element) => obj ? Object.keys(obj).reduce((acc, key) => _objectSpread(_objectSpread({}, acc), {}, {
|
|
26
|
+
["".concat(generateClassNameWithModifier(block, element, key))]: obj[key]
|
|
27
|
+
}), {}) : [];
|
|
28
|
+
|
|
29
|
+
const aggregatedClasses = (type, props) => function (block, element, additionalModifiers) {
|
|
30
|
+
let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
|
31
|
+
return /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
32
|
+
let {
|
|
33
|
+
innerRef,
|
|
34
|
+
children,
|
|
35
|
+
classProps,
|
|
36
|
+
useComponent,
|
|
37
|
+
className,
|
|
38
|
+
as
|
|
39
|
+
} = _ref,
|
|
40
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
41
|
+
|
|
42
|
+
// get the additional classNames either from a function or an object
|
|
43
|
+
let otherModifiers = appendBlockAndPrefixToObj(additionalModifiers, block, element);
|
|
44
|
+
if (typeof additionalModifiers === 'function') otherModifiers = appendBlockAndPrefixToObj(additionalModifiers(_objectSpread(_objectSpread(_objectSpread({}, rest), classProps), {}, {
|
|
45
|
+
className
|
|
46
|
+
})), block, element);
|
|
47
|
+
const otherModifiersStr = cx(otherModifiers);
|
|
48
|
+
const {
|
|
49
|
+
prefix,
|
|
50
|
+
propsToRemoveFromFinalElement = []
|
|
51
|
+
} = options;
|
|
52
|
+
const {
|
|
53
|
+
cssClassName: classNames
|
|
54
|
+
} = cssPipeline(block, null, _objectSpread({}, classProps), {
|
|
55
|
+
prefix,
|
|
56
|
+
element
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
const cleanedPropsPassedDown = _objectSpread(_objectSpread({}, props), rest);
|
|
60
|
+
|
|
61
|
+
propsToRemoveFromFinalElement.forEach(propKey => {
|
|
62
|
+
delete cleanedPropsPassedDown[propKey];
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
if (isNativeHTMLElement(block)) {
|
|
66
|
+
Object.keys(cleanedPropsPassedDown).forEach(key => {
|
|
67
|
+
if (!isValidNativeAttribute(key)) delete cleanedPropsPassedDown[key];
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
return /*#__PURE__*/React.createElement(as || type, _objectSpread({
|
|
72
|
+
ref: innerRef || ref,
|
|
73
|
+
className: [classNames, otherModifiersStr, className].join(' ')
|
|
74
|
+
}, cleanedPropsPassedDown), children);
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
export { cssPrefix, aggregatedClasses as default };
|