@elliemae/ds-classnames 2.2.0 → 2.3.0-alpha.3

package/cjs/aggregatedClasses.js

@@ -1,91 +1,70 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/esnext.async-iterator.reduce.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.reduce.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.filter.js');
-var React = require('react');
-var cx = require('obj-str');
-var DimsumConfig = require('@elliemae/ds-shared/dimsum.config');
-var classNameManager = require('./classNameManager.js');
-var validateNativeProps = require('./validateNativeProps.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var DimsumConfig__default = /*#__PURE__*/_interopDefaultLegacy(DimsumConfig);
-
-const _excluded = ["innerRef", "children", "classProps", "useComponent", "className", "as"];
-
-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; }
-
-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; }
-const cssPrefix = DimsumConfig__default["default"].classNamePrefix;
-
-const generateClassNameWithModifier = (block, element, modifier) => "".concat(cssPrefix, "-").concat(block).concat(element ? "__".concat(element) : '', "--").concat(modifier);
-
-const appendBlockAndPrefixToObj = (obj, block, element) => obj ? Object.keys(obj).reduce((acc, key) => _objectSpread(_objectSpread({}, acc), {}, {
-  ["".concat(generateClassNameWithModifier(block, element, key))]: obj[key]
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var aggregatedClasses_exports = {};
+__export(aggregatedClasses_exports, {
+  cssPrefix: () => cssPrefix,
+  default: () => aggregatedClasses_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_obj_str = __toESM(require("obj-str"));
+var import_classNameManager = require("./classNameManager");
+var import_dimsum = require("@elliemae/ds-shared/dimsum.config");
+var import_validateNativeProps = require("./validateNativeProps");
+const cssPrefix = import_dimsum.dimsumConfig.classNamePrefix;
+const generateClassNameWithModifier = (block, element, modifier) => `${cssPrefix}-${block}${element ? `__${element}` : ""}--${modifier}`;
+const appendBlockAndPrefixToObj = (obj, block, element) => obj ? Object.keys(obj).reduce((acc, key) => ({
+  ...acc,
+  [`${generateClassNameWithModifier(block, element, key)}`]: obj[key]
 }), {}) : [];
-
-const aggregatedClasses = (type, props) => function (block, element, additionalModifiers) {
-  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  return /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
-    let {
-      innerRef,
-      children,
-      classProps,
-      useComponent,
-      className,
-      as
-    } = _ref,
-        rest = _objectWithoutProperties__default["default"](_ref, _excluded);
-
-    // get the additional classNames either from a function or an object
-    let otherModifiers = appendBlockAndPrefixToObj(additionalModifiers, block, element);
-    if (typeof additionalModifiers === 'function') otherModifiers = appendBlockAndPrefixToObj(additionalModifiers(_objectSpread(_objectSpread(_objectSpread({}, rest), classProps), {}, {
-      className
-    })), block, element);
-    const otherModifiersStr = cx__default["default"](otherModifiers);
-    const {
-      prefix,
-      propsToRemoveFromFinalElement = []
-    } = options;
-    const {
-      cssClassName: classNames
-    } = classNameManager["default"](block, null, _objectSpread({}, classProps), {
-      prefix,
-      element
-    });
-
-    const cleanedPropsPassedDown = _objectSpread(_objectSpread({}, props), rest);
-
-    propsToRemoveFromFinalElement.forEach(propKey => {
-      delete cleanedPropsPassedDown[propKey];
-    });
-
-    if (validateNativeProps.isNativeHTMLElement(block)) {
-      Object.keys(cleanedPropsPassedDown).forEach(key => {
-        if (!validateNativeProps.isValidNativeAttribute(key)) delete cleanedPropsPassedDown[key];
-      });
-    }
-
-    return /*#__PURE__*/React__default["default"].createElement(as || type, _objectSpread({
-      ref: innerRef || ref,
-      className: [classNames, otherModifiersStr, className].join(' ')
-    }, cleanedPropsPassedDown), children);
+const aggregatedClasses = (type, props) => (block, element, additionalModifiers, options = {}) => import_react.default.forwardRef(({ innerRef, children, classProps, useComponent, className, as, ...rest }, ref) => {
+  let otherModifiers = appendBlockAndPrefixToObj(additionalModifiers, block, element);
+  if (typeof additionalModifiers === "function")
+    otherModifiers = appendBlockAndPrefixToObj(additionalModifiers({ ...rest, ...classProps, className }), block, element);
+  const otherModifiersStr = (0, import_obj_str.default)(otherModifiers);
+  const { prefix, propsToRemoveFromFinalElement = [] } = options;
+  const { cssClassName: classNames } = (0, import_classNameManager.convertPropToCssClassName)(block, null, { ...classProps }, { prefix, element });
+  const cleanedPropsPassedDown = { ...props, ...rest };
+  propsToRemoveFromFinalElement.forEach((propKey) => {
+    delete cleanedPropsPassedDown[propKey];
   });
-};
-
-exports.cssPrefix = cssPrefix;
-exports["default"] = aggregatedClasses;
+  if ((0, import_validateNativeProps.isNativeHTMLElement)(block)) {
+    Object.keys(cleanedPropsPassedDown).forEach((key) => {
+      if (!(0, import_validateNativeProps.isValidNativeAttribute)(key))
+        delete cleanedPropsPassedDown[key];
+    });
+  }
+  return import_react.default.createElement(as || type, {
+    ref: innerRef || ref,
+    className: [classNames, otherModifiersStr, className].join(" "),
+    ...cleanedPropsPassedDown
+  }, children);
+});
+var aggregatedClasses_default = aggregatedClasses;
+module.exports = __toCommonJS(aggregatedClasses_exports);
+//# sourceMappingURL=aggregatedClasses.js.map

package/cjs/aggregatedClasses.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/aggregatedClasses.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "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"],
+  "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;",
+  "names": []
+}

package/cjs/aggregatedClasses.md

@@ -0,0 +1,323 @@
+# aggregatedClasses
+
+Utility to clean up the renders of too many classNames, internally uses the classNamePipeline and obj-str to ease the workflow.
+Follows BEM methodology (block - element - modifier)
+<br> This utility allows us to create components outside the render method with the block-element-modifiers injected in the className
+## Constructor
+
+```jsx
+const blockName = 'form-item'
+
+const Label = aggregatedClasses('div')(blockName, 'label')
+const InputController = aggregatedClasses('div')(blockName, 'controller')
+
+// generates 
+<div className='ds-em-form-item__label' /> 
+<div className='ds-em-form-item__controller' /> 
+
+// and based on the props passed through classProps is going to inject the proper modifiers
+render() {
+    return (
+        <Label
+            classProps={{ 
+                hasError: true, 
+                readOnly: true, 
+                disabled: true 
+            }}
+        />
+    )
+}
+
+// generates
+<div className='ds-em-form-item__label ds-em-form-item__label--error ds-em-form-item__label--readonly ds-em-form-item__label--disabled' /> 
+
+```
+
+This creates a component with the specified element or other component and creates the className based on the blockName, the elementName, and the props that this component is going to receive.
+
+
+### Parameters
+```js 
+export default type => (block, element, additionalClassNames, options)
+```
+
+@type - element or component to create <br>
+@block - block name <br>
+@element - element name  
+@additionalModifiers - object that appends new modifiers to the className if the value is true. <br>
+Also we can use a function that takes the props of the component created <br>
+<br>
+@options - Object to configure 'prefix'
+
+####Example
+```js
+const Wrapper = aggregatedClasses('div')(blockName, 'elementName', props => ({
+  someModifier: true, 
+  otherModifier: props.hasClass
+}))
+```
+
+
+####Example
+```js
+const Wrapper = aggregatedClasses('div')(blockName, 'elementName', {someClassName: true}, {prefix: 'DIMSUM'})
+```
+
+```jsx 
+
+
+// this translates
+const Wrapper = ({ children, ...rest }) => {
+  const { cssClassName } = convertPropToCssClassName(
+    blockName,
+    null,
+    { ...rest })
+  return (
+    <div className={cssClassName}>
+      { children }
+    </div>
+  )
+}
+
+// to this
+const WrapperClassed = aggregatedClasses('div')(blockName, null)
+```
+
+## Complete example 
+before
+```jsx
+import React, { Component } from 'react'
+import getSvgPath from 'components/basic/form/OutlinedInputField/getSvgPath'
+import { convertPropToCssClassName } from '@elliemae/ds-classnames'
+import { DSTextWrapper } from 'components/index'
+
+const blockName = 'labeled-outline'
+const pfxBlockName = `em-ds-${blockName}`
+
+class DSFloatingLabelInput extends Component {
+  constructor(props) {
+    super(props)
+    this.wrapper = React.createRef()
+    this.pathEl = React.createRef()
+    this.outlineEl = React.createRef()
+    this.outlineIdleEl = React.createRef()
+    this.labelEl = React.createRef()
+    this.state = {
+      open: props.open,
+      value: props.value,
+      focused: false,
+    }
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updatePath)
+  }
+  get sizes() {
+    return {
+      labelWidth: this.labelEl.current.offsetWidth * 0.9,
+      width: this.wrapper.current.offsetWidth,
+      height: this.wrapper.current.offsetHeight,
+      radiusStyle: window.getComputedStyle(this.outlineIdleEl.current).getPropertyValue('border-radius'),
+    }
+  }
+  updatePath() {
+    const path = getSvgPath(this.sizes)
+    this.pathEl.current.setAttribute('d', path)
+  }
+  openOutline() {
+    this.setState({ open: true })
+  }
+  closeOutline() {
+    this.setState({ open: false })
+  }
+  render() {
+    const {
+      className,
+      hasError,
+      readOnly,
+      disabled,
+      inputComponent,
+      label,
+    } = this.props
+    const InputComponent = inputComponent
+    const { open, focused, value } = this.state
+    const isOpen = open || focused || !!value
+
+    const { cssClassName: classNames } = convertPropToCssClassName(
+      blockName,
+      className, {
+        hasError,
+        readOnly,
+        disabled,
+      })
+    return (
+      <div
+        ref={this.wrapper}
+        className={`${classNames} ${isOpen ? `${pfxBlockName}--opened` : ''} ${focused ? `${pfxBlockName}--focused` : ''}`}
+        onMouseEnter={this.openOutline}
+        onMouseLeave={this.closeOutline}
+      >
+        <div
+          ref={this.outlineEl}
+          className={`${pfxBlockName}__outline`}
+        >
+          <svg>
+            <path
+              ref={this.pathEl}
+              className={`${pfxBlockName}__outline__path`}
+            />
+          </svg>
+        </div>
+        <div
+          ref={this.outlineIdleEl}
+          className={`${pfxBlockName}__idle`}
+        />
+        <div className={`${pfxBlockName}__content`}>
+          <InputComponent
+            disabled={disabled}
+            hasError={hasError}
+            onBlur={() => this.setState({ focused: false })}
+            onChange={e => this.setState({ value: e.target.value })}
+            onFocus={() => this.setState({ focused: true })}
+            readOnly={readOnly}
+            value={value}
+          />
+          <label
+            ref={this.labelEl}
+            className={`${pfxBlockName}__label ${isOpen ? `${pfxBlockName}__label--floated` : ''}`}
+          >
+            <DSTextWrapper
+              innerRef={this.labelEl}
+              maxWidth='20px'
+              text={label}
+              textEllipsis
+            />
+          </label>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default DSFloatingLabelInput
+
+```
+
+after
+
+```jsx 
+import React, { Component } from 'react'
+import getSvgPath from 'components/basic/form/OutlinedInputField/getSvgPath'
+import { DSTextWrapper } from 'components/index'
+import { aggregatedClasses } from '@elliemae/ds-classnames'
+
+const blockName = 'labeled-outline'
+
+const Wrapper = aggregatedClasses('div')(blockName, null, ({ isOpen, isFocused }) => ({
+  opened: isOpen,
+  focused: isFocused,
+}))
+
+const FloatingLabel = aggregatedClasses('label')(blockName, 'label', ({ isOpen }) => ({
+  floated: isOpen,
+}))
+
+const OutlineContent = aggregatedClasses('div')(blockName, 'content')
+const OutlineIdle = aggregatedClasses('div')(blockName, 'idle')
+const Outline = aggregatedClasses('div')(blockName, 'outline')
+const OutlinePath = aggregatedClasses('path')(blockName, 'outline__path')
+
+class DSFloatingLabelInput extends Component {
+  constructor(props) {
+    super(props)
+    this.wrapper = React.createRef()
+    this.pathEl = React.createRef()
+    this.outlineEl = React.createRef()
+    this.outlineIdleEl = React.createRef()
+    this.labelEl = React.createRef()
+    this.state = {
+      open: props.open,
+      value: props.value,
+      focused: false,
+    }
+  }
+  componentDidMount() {
+    // TODO: not getting referenced elements height / width without this
+    // this is a temporary workaround
+    setTimeout(() => this.updatePath(), 1)
+    window.addEventListener('resize', this.updatePath)
+  }
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updatePath)
+  }
+  get sizes() {
+    return {
+      labelWidth: this.labelEl.current.offsetWidth * 0.9,
+      width: this.wrapper.current.offsetWidth,
+      height: this.wrapper.current.offsetHeight,
+      radiusStyle: window.getComputedStyle(this.outlineIdleEl.current).getPropertyValue('border-radius'),
+    }
+  }
+  updatePath() {
+    const path = getSvgPath(this.sizes)
+    this.pathEl.current.setAttribute('d', path)
+  }
+  openOutline() {
+    this.setState({ open: true })
+  }
+  closeOutline() {
+    this.setState({ open: false })
+  }
+  render() {
+    const {
+      hasError,
+      readOnly,
+      disabled,
+      inputComponent,
+      label,
+    } = this.props
+    const InputComponent = inputComponent
+    const { open, focused, value } = this.state
+    const isOpen = open || focused || !!value
+
+    return (
+      <Wrapper
+        classProps={{ hasError, isOpen, isFocused: focused, readOnly, disabled }}
+        innerRef={this.wrapper}
+        onMouseEnter={this.openOutline}
+        onMouseLeave={this.closeOutline}
+      >
+        <Outline innerRef={this.outlineEl}>
+          <svg>
+            <OutlinePath innerRef={this.pathEl} />
+          </svg>
+        </Outline>
+        <OutlineIdle innerRef={this.outlineIdleEl} />
+        <OutlineContent>
+          <InputComponent
+            disabled={disabled}
+            hasError={hasError}
+            onBlur={() => this.setState({ focused: false })}
+            onChange={e => this.setState({ value: e.target.value })}
+            onFocus={() => this.setState({ focused: true })}
+            readOnly={readOnly}
+            value={value}
+          />
+          <FloatingLabel
+            classProps={{ isOpen }}
+            innerRef={this.labelEl}
+          >
+            <DSTextWrapper
+              maxWidth='20px'
+              text={label}
+              textEllipsis
+            />
+          </FloatingLabel>
+        </OutlineContent>
+      </Wrapper>
+    )
+  }
+}
+
+export default DSFloatingLabelInput
+
+```

package/cjs/classNameManager.js

@@ -1,92 +1,83 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/web.dom-collections.iterator.js');
-var utils = require('@elliemae/ds-utilities/utils');
-var DimsumConfig = require('@elliemae/ds-shared/dimsum.config');
-var converPropsToFormModifiers = require('./converPropsToFormModifiers.js');
-var convertPropsToLayoutModifiers = require('./convertPropsToLayoutModifiers.js');
-var convertPropToFeedBackModifiers = require('./convertPropToFeedBackModifiers.js');
-var convertPropsToSizeModifiers = require('./convertPropsToSizeModifiers.js');
-var convertPropsToTextModifiers = require('./convertPropsToTextModifiers.js');
-var convertPropsToColorModifiers = require('./convertPropsToColorModifiers.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var DimsumConfig__default = /*#__PURE__*/_interopDefaultLegacy(DimsumConfig);
-
-const cssPrefix = "".concat(DimsumConfig__default["default"].classNamePrefix, "-");
-
-const executePipelines = props => {
-  const form = converPropsToFormModifiers().execute(props);
-  const layout = convertPropsToLayoutModifiers().execute(props);
-  const feedback = convertPropToFeedBackModifiers().execute(props);
-  const size = convertPropsToSizeModifiers().execute(props);
-  const text = convertPropsToTextModifiers().execute(props);
-  const color = convertPropsToColorModifiers().execute(props);
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var classNameManager_exports = {};
+__export(classNameManager_exports, {
+  convertPropToCssClassName: () => cssPipeline,
+  cssPrefix: () => cssPrefix,
+  default: () => classNameManager_default
+});
+var React = __toESM(require("react"));
+var import_utils = require("@elliemae/ds-utilities/utils");
+var import_dimsum = require("@elliemae/ds-shared/dimsum.config");
+var import_converPropsToFormModifiers = require("./converPropsToFormModifiers");
+var import_convertPropsToLayoutModifiers = require("./convertPropsToLayoutModifiers");
+var import_convertPropToFeedBackModifiers = require("./convertPropToFeedBackModifiers");
+var import_convertPropsToSizeModifiers = require("./convertPropsToSizeModifiers");
+var import_convertPropsToTextModifiers = require("./convertPropsToTextModifiers");
+var import_convertPropsToColorModifiers = require("./convertPropsToColorModifiers");
+const cssPrefix = `${import_dimsum.dimsumConfig.classNamePrefix}-`;
+const executePipelines = (props) => {
+  const form = (0, import_converPropsToFormModifiers.pipe)().execute(props);
+  const layout = (0, import_convertPropsToLayoutModifiers.pipe)().execute(props);
+  const feedback = (0, import_convertPropToFeedBackModifiers.pipe)().execute(props);
+  const size = (0, import_convertPropsToSizeModifiers.pipe)().execute(props);
+  const text = (0, import_convertPropsToTextModifiers.pipe)().execute(props);
+  const color = (0, import_convertPropsToColorModifiers.pipe)().execute(props);
   return [...form, ...layout, ...feedback, ...size, ...text, ...color];
 };
-/**
- * Docs: http://getbem.com/naming/
- * blockName
- * cssClassNameModifier: Main modifier
- * props { hasError, hasWarning, hasSuccess, readOnly, disabled}
- *
- * @param blockName
- * @param cssClassNameModifier
- * @param props
- * @param options
- */
-
-
-const cssPipeline = function () {
-  let blockName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  let cssClassNameModifier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  let props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  const {
-    prefix,
-    element
-  } = options;
-  const prefixBlockName = "".concat(prefix || cssPrefix).concat(blockName).concat(element ? "__".concat(element) : ''); // PipeLine
-
-  const pipes = !utils.isEmpty(props) ? executePipelines(props) : [];
-  const basePipeline = [prefixBlockName, ...pipes]; // specific classname
-
-  const className = cssClassNameModifier ? [...basePipeline].join(" ".concat(prefixBlockName, "--")).concat(" ".concat(cssClassNameModifier)) : [...basePipeline].join(" ".concat(prefixBlockName, "--"));
+const cssPipeline = (blockName = "block", cssClassNameModifier = "", props = {}, options = {}) => {
+  const { prefix, element } = options;
+  const prefixBlockName = `${prefix || cssPrefix}${blockName}${element ? `__${element}` : ""}`;
+  const pipes = !(0, import_utils.isEmpty)(props) ? executePipelines(props) : [];
+  const basePipeline = [prefixBlockName, ...pipes];
+  const className = cssClassNameModifier ? [...basePipeline].join(` ${prefixBlockName}--`).concat(` ${cssClassNameModifier}`) : [...basePipeline].join(` ${prefixBlockName}--`);
   return {
     blockName,
     cssPrefix,
     prefixBlockName,
     cssClassName: className,
-
     mainModifier(modifier) {
-      return "".concat(className, "--").concat(modifier);
+      return `${className}--${modifier}`;
     },
-
-    classNameBlock(elementName) {
-      let usePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      return "".concat(!usePrefix ? blockName : prefixBlockName, "-").concat(elementName);
+    classNameBlock(elementName, usePrefix = true) {
+      return `${!usePrefix ? blockName : prefixBlockName}-${elementName}`;
     },
-
-    classNameBlockModifier(modifierName) {
-      let elementBlockName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-      return "".concat(prefixBlockName, "-").concat(elementBlockName, "--").concat(modifierName);
+    classNameBlockModifier(modifierName, elementBlockName = "") {
+      return `${prefixBlockName}-${elementBlockName}--${modifierName}`;
     },
-
-    classNameElement(elementName) {
-      let elementBlockName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-      return "".concat(prefixBlockName).concat(elementBlockName ? "-".concat(elementBlockName) : '', "__").concat(elementName);
+    classNameElement(elementName, elementBlockName = "") {
+      return `${prefixBlockName}${elementBlockName ? `-${elementBlockName}` : ""}__${elementName}`;
     },
-
-    classNameModifier(modifierName) {
-      let elementName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-      return "".concat(prefixBlockName).concat(elementName ? "__".concat(elementName) : '', "--").concat(modifierName);
+    classNameModifier(modifierName, elementName = "") {
+      return `${prefixBlockName}${elementName ? `__${elementName}` : ""}--${modifierName}`;
     }
-
   };
 };
-
-exports.cssPrefix = cssPrefix;
-exports["default"] = cssPipeline;
+var classNameManager_default = cssPipeline;
+module.exports = __toCommonJS(classNameManager_exports);
+//# sourceMappingURL=classNameManager.js.map