saagie-ui/src/react/helpers/index.js

Saagie UI from Saagie Design System

export const modifierCSS = (value, prefix) => (value ? `as--${prefix ? `${prefix}-` : ''}${value}` : '');

/**
 * Generate CSS modifier classes
 *
 * @param {Object} p Object of params
 * @param {String} p.value e.g. 'center'
 * @param {String} [p.prefix] e.g. 'align'
 * @param {Boolean} [p.isResponsive]
 * @param {Array.<String>} [p.allowed] Allowed values. e.g. ['left', 'center', 'right']
 */
export const getModifierClasses = ({
  value,
  prefix = '',
  isResponsive = false,
  allowed = [],
}) => {
  if (!value || value === true) {
    return '';
  }

  const responsiveSuffixes = ['', 'xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
  const allowedExtended = !isResponsive
    ? allowed
    : allowed.reduce((acc, x) => [
      ...acc,
      ...responsiveSuffixes.map((suffix) => (suffix ? `${x}@${suffix}` : x)),
    ], []);

  return value.toString().split(' ')
    .filter((x) => (allowedExtended.length ? allowedExtended.includes(x) : true))
    .map((x) => modifierCSS(x, prefix));
};

export const keyCodes = {
  esc: 27,
  space: 32,
  tab: 9,
  up: 38,
  down: 40,
};

// Drop unwanted props to not propagate on child component
// Example on DropdownItem.js line 85
export const dropUnwantedProps = (obj, omitKeys) => {
  const result = {};
  Object.keys(obj).forEach((key) => {
    if (omitKeys.indexOf(key) === -1) {
      result[key] = obj[key];
    }
  });
  return result;
};

export function checkIfElementOrParentHasClass(element, classname) {
  if (element && element.classList && element.classList.contains(classname)) {
    return true;
  }

  if (element.parentNode) return checkIfElementOrParentHasClass(element.parentNode, classname);

  return false;
}

/**
 * Will print a message to the developer if they use a deprecated property.
 * @param {any} deprecated The deprecated prop.
 * @param {string} deprecatedName The name of the deprecated prop to be print in
 *                                the console.
 * @param {string} replacementName The name of the replacement prop to be print
 *                                 in the console.
 */
export function deprecatedProp(deprecated, deprecatedName, replacementName) {
  const redBold = 'font-weight: 700; color: #e52728';
  const normal = '';
  if (process && process.env && (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') && deprecated) {
    // eslint-disable-next-line no-console
    console.warn(
      `SDS: ⚠️ %c${deprecatedName} %cprop is deprecated, please use %c${replacementName} %cprop instead`,
      redBold,
      normal,
      redBold,
      normal,
    );
  }
}

export { usePopper } from './usePopper';