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

Just Another React UI Framework

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var getSharedClassNames = require('./getSharedClassNames.js');
var splitStateClassName = require('./splitStateClassName.js');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(
          n,
          k,
          d.get
            ? d
            : {
                enumerable: true,
                get: function () {
                  return e[k];
                },
              }
        );
      }
    });
  }
  n['default'] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/ _interopNamespace(React);

/**
 * 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 = tslib.__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__namespace.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 = tslib.__rest(props, [
      'appearance',
      'danger',
      'info',
      'primary',
      'secondary',
      'success',
      'warning',
    ]);
  /** Use a memoized value to build classes */
  var _a = tslib.__read(
      React__namespace.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];
}

exports.useSharedClassName = useSharedClassName;
exports.useSplitStateClassName = useSplitStateClassName;