@appbuckets/react-ui/esm/utils/customHook.js

Just Another React UI Framework

import { __rest, __read } from 'tslib';
import * as React from 'react';
import getSharedClassNames from './getSharedClassNames.js';
import splitStateClassName from './splitStateClassName.js';

/**
 * Export a function to use the correct
 * shared className, wrapped by a react useMemo
 */
function useSharedClassName(props) {
  /** Extract Props used to build shared className string */
  var _a = props;
  _a.as;
  var backgroundColor = _a.backgroundColor,
    className = _a.className,
    columnsAlign = _a.columnsAlign,
    display = _a.display,
    fontWeight = _a.fontWeight,
    width = _a.width,
    offsetBy = _a.offsetBy,
    size = _a.size,
    textAlign = _a.textAlign,
    textColor = _a.textColor,
    verticalAlign = _a.verticalAlign,
    withoutGap = _a.withoutGap,
    rest = __rest(_a, [
      'as',
      'backgroundColor',
      'className',
      'columnsAlign',
      'display',
      'fontWeight',
      'width',
      'offsetBy',
      'size',
      'textAlign',
      'textColor',
      'verticalAlign',
      'withoutGap',
    ]);
  /** Use a memoized value to build classes */
  var classes = React.useMemo(
    function () {
      return getSharedClassNames({
        backgroundColor: backgroundColor,
        className: className,
        columnsAlign: columnsAlign,
        display: display,
        fontWeight: fontWeight,
        width: width,
        offsetBy: offsetBy,
        size: size,
        textAlign: textAlign,
        textColor: textColor,
        verticalAlign: verticalAlign,
        withoutGap: withoutGap,
      }).className;
    },
    [
      backgroundColor,
      className,
      columnsAlign,
      display,
      fontWeight,
      width,
      offsetBy,
      size,
      textAlign,
      textColor,
      verticalAlign,
      withoutGap,
    ]
  );
  /** Return className and rest props */
  return { className: classes, rest: rest };
}
/**
 * Export a function to split the state className
 * from component Props
 */
function useSplitStateClassName(props) {
  var appearance = props.appearance,
    danger = props.danger,
    info = props.info,
    primary = props.primary,
    secondary = props.secondary,
    success = props.success,
    warning = props.warning,
    rest = __rest(props, [
      'appearance',
      'danger',
      'info',
      'primary',
      'secondary',
      'success',
      'warning',
    ]);
  /** Use a memoized value to build classes */
  var _a = __read(
      React.useMemo(
        function () {
          return splitStateClassName({
            appearance: appearance,
            danger: danger,
            info: info,
            primary: primary,
            secondary: secondary,
            success: success,
            warning: warning,
          });
        },
        [appearance, danger, info, primary, secondary, success, warning]
      ),
      3
    ),
    classes = _a[0],
    state = _a[2];
  return [classes, rest, state];
}

export { useSharedClassName, useSplitStateClassName };