Common

Description

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

Install bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-common @element-public/themes

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:

npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR!     npm login

Setup an access token

See the devtools npm-e guide to learn how to create an access token if this is the first time you are using a npm-e package at Bayer or you do not have a line that starts with the following in your ~/.npmrc file:

//npm.platforms.engineering/:_authToken=

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>