@appbuckets/react-ui/esm/Box/Box.js

Just Another React UI Framework

import { __rest, __assign } from 'tslib';
import * as React from 'react';
import clsx from 'clsx';
import { useElementType, childrenUtils } from '@appbuckets/react-ui-core';
import { useSharedClassName } from '../utils/customHook.js';
import '../BucketTheme/BucketTheme.js';
import { useWithDefaultProps } from '../BucketTheme/BucketContext.js';

var appendValueToClass = function (prefix, prop) {
  return typeof prop === 'number' || typeof prop === 'string'
    ? ''.concat(prefix, '-').concat(prop)
    : undefined;
};
/* --------
 * Component Render
 * -------- */
var Box = function (receivedProps) {
  /** Get component props */
  var props = useWithDefaultProps('box', receivedProps);
  var _a = useSharedClassName(props),
    className = _a.className,
    _b = _a.rest,
    children = _b.children,
    content = _b.content,
    elevation = _b.elevation,
    m = _b.m,
    mb = _b.mb,
    ml = _b.ml,
    mr = _b.mr,
    mt = _b.mt,
    mx = _b.mx,
    my = _b.my,
    p = _b.p,
    pb = _b.pb,
    pl = _b.pl,
    pr = _b.pr,
    pt = _b.pt,
    px = _b.px,
    py = _b.py,
    rest = __rest(_b, [
      'children',
      'content',
      'elevation',
      'm',
      'mb',
      'ml',
      'mr',
      'mt',
      'mx',
      'my',
      'p',
      'pb',
      'pl',
      'pr',
      'pt',
      'px',
      'py',
    ]);
  var ElementType = useElementType(Box, props);
  var classes = React.useMemo(
    function () {
      return clsx(
        'box',
        appendValueToClass('elevation', elevation),
        appendValueToClass('m', m),
        appendValueToClass('mb', mb),
        appendValueToClass('ml', ml),
        appendValueToClass('mr', mr),
        appendValueToClass('mt', mt),
        appendValueToClass('mx', mx),
        appendValueToClass('my', my),
        appendValueToClass('p', p),
        appendValueToClass('pb', pb),
        appendValueToClass('pl', pl),
        appendValueToClass('pr', pr),
        appendValueToClass('pt', pt),
        appendValueToClass('px', px),
        appendValueToClass('py', py),
        className
      );
    },
    [className, elevation, m, mb, ml, mr, mt, mx, my, p, pb, pl, pr, pt, px, py]
  );
  return React.createElement(
    ElementType,
    __assign({}, rest, { className: classes }),
    childrenUtils.isNil(children) ? content : children
  );
};
Box.displayName = 'Box';

export { Box as default };