@appbuckets/react-ui
Version:
Just Another React UI Framework
78 lines (75 loc) • 2.23 kB
JavaScript
import { __rest, __read, __assign } from 'tslib';
import * as React from 'react';
import clsx from 'clsx';
import {
createShorthandFactory,
useElementType,
childrenUtils,
} from '@appbuckets/react-ui-core';
import {
useSharedClassName,
useSplitStateClassName,
} from '../utils/customHook.js';
import '../BucketTheme/BucketTheme.js';
import { useWithDefaultProps } from '../BucketTheme/BucketContext.js';
import Icon from '../Icon/Icon.js';
/* --------
* Component Render
* -------- */
var Badge = function (receivedProps) {
/** Get component props */
var props = useWithDefaultProps('badge', receivedProps);
var _a = useSharedClassName(props),
className = _a.className,
_b = _a.rest,
children = _b.children,
content = _b.content,
icon = _b.icon,
rawRest = __rest(_b, ['children', 'content', 'icon']);
/** Get the component element type */
var ElementType = useElementType(Badge, receivedProps, props);
/** Check if component has declared children */
var hasChildren = !childrenUtils.isNil(children);
/** Split state className from rest props */
var _c = __read(useSplitStateClassName(rawRest), 2),
stateClasses = _c[0],
rest = _c[1];
/** Build the element class list */
var classes = clsx(
'badge',
stateClasses,
(!!content || !!hasChildren || !!icon) && 'with-content',
className
);
/** Build Icon Element */
var iconElement = React.useMemo(
function () {
return (
!hasChildren &&
Icon.create(icon, {
autoGenerateKey: false,
})
);
},
// @ts-ignore
[icon, hasChildren]
);
/** If children are declared, render them */
if (!childrenUtils.isNil(children)) {
return React.createElement(
ElementType,
__assign({}, rest, { className: classes }),
React.createElement('div', { className: 'content' }, children)
);
}
return React.createElement(
ElementType,
__assign({}, rest, { className: classes }),
React.createElement('div', { className: 'content' }, iconElement, content)
);
};
Badge.displayName = 'Badge';
Badge.create = createShorthandFactory(Badge, function (content) {
return { content: content };
});
export { Badge as default };