Common

Description

Collection of utilities and components that are shared throughout the Element React Components.

Install from Artifactory

• Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
  • Verify your token is correctly set up in your .npmrc as per the link above
• Verify you have the @element scope configured in your .npmrc
  • @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
• Install the component and themes bundles
  • npm i @element/react-components @element/themes
    • alternatively install the component individually along with the themes bundle npm i @element/react-common @element/themes

Notes

The Element Common library is composed of multiple utilities and components that are shared throughout the Element React Components.

• addProps

  • Adds prop to component
  • @param {Array} children Array of children to add the props to
  • @param {Object} props Props to be added to children
  • @return {Node} New component with props added

• addClass

  • Adds className to component and returns the new component
  • @param {Array} children Array of children to add the className to
  • @param {Sting} className ClassName to be added to children
  • @return {Node} New component with class added

• formatUnit

  • Adds unit to a value
  • @param {Number} val Array of children to add the className to
  • @param {String} [defaultUnit=px] Unit to add, if omm
  • @return {String} Formatted value with unit

• returnFocusAfterClosing

  • Sets focus to element if found bu the given selector
  • @param {String} returnFocusSelector Query to find element

• deprecatedComponent

  • Consoles warning if a deprecated component is used
  • @param {Node} component Component that is deprecated
  • @param {String} explanation Explanation of why component is deprecated and alternatives to use

• deprecatedProp

  • Consoles warning if a deprecated prop is used
  • @param {Function} propType React propType, ie. PropTypes.bool
  • @param {String} componentName Name of the component the prop is in
  • @param {String} explanation Explanation of why prop is deprecated and alternatives to use
  • @return {Function} Validation function to display warning only if prop is used

• deprecatedOneOf

  • Consoles warning if a deprecated accepted value prop is used
  • @param {Function} propType React propType, ie. PropTypes.bool
  • @param {String[]} deprecatedList Lis of accepted values
  • @param {String} componentName Name of the component the prop is in
  • @param {String} explanation Explanation of why prop is deprecated and alternatives to use
  • @return {Function} Validation function to display warning only if prop is used

• requiredIfPropType

  • Use to display warning for required props if they are only required conditionally
  • @param {Function} propType React propType, ie. PropTypes.bool
  • @param {String} componentName Name of the component the prop is in
  • @param {String} requiredBy Name of prop that has to be sent to be required
  • @return {Function} Validation function to display warning only if the requiredBy prop is sent and the prop is not used

• queryCheck

  • Checks if a given selector is a valid query. Errors if selector is invalid. Use in a try/catch
  • @param {String} selector Selector to check

• isSelectorValid

  • Checks if a given selector is a valid query.
  • @param {String} selector Selector to check
  • @return {Boolean} Returns true if selector is valid, false if invalid

• eds-query-selector

  • Select query from document. Uses document.querySelector
  • @param {String} selector Selector to find
  • @return {Boolean} Returns found element, false if invalid selector

• eds-random-id

  • @param {String} [name] Name to add in generated ID
  • @return {String} Generated id

• getElementNotFoundWarning

  • @param {String} selector Selector not found
  • @return {String} Generated not found message

• getInvalidSelectorWarning

  • @param {String} selector Selector not found
  • @return {String} Generated invalid selector message

• eds-warning

  • Consoles warning
  • @param {String} message Message to be logged

• iconList

• usePrevious

  • Check previous value of state or prop
  • @param {Any} value Value that ref is changing to
  • @param {Any} initialValue Initial value
  • @return {Any} Pervious value

• ConditionalWrapper

  • React HOC to conditional wrap children based on condition

  <ConditionalWrapper
      condition={SomeConditionToCheck}
      wrapper={children => <a href='someLink.com'>{children}</a>}
  >
      <div>SomeContent</div>
  </ConditionalWrapper>