@i-novus/ui-core
Version:
Базовые UI компоненты
65 lines (64 loc) • 3.73 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useMemo } from 'react';
import classNames from 'classnames';
import { useConfigProvider } from '../core';
export const Paper = forwardRef((props, ref) => {
const { children, prefix, className, bordered = false, shadow = false, fullWidth, borderRadius, topLeftRadius, bottomLeftRadius, topRightRadius, bottomRightRadius, bgColor = 'white', padding, pl, pr, pt, pb, margin, ml, mr, mt, mb, display = 'block', justify, align, direction, gap, scrollable = false, height, width, style, ...restProps } = props;
const { getPrefix } = useConfigProvider();
const prefixCls = getPrefix(prefix);
const paddingClasses = useMemo(() => classNames({
[`${prefixCls}-paper-padding${padding}`]: padding,
[`${prefixCls}-paper-pl${pl}`]: Number.isInteger(pl),
[`${prefixCls}-paper-pr${pr}`]: Number.isInteger(pr),
[`${prefixCls}-paper-pt${pt}`]: Number.isInteger(pt),
[`${prefixCls}-paper-pb${pb}`]: Number.isInteger(pb),
}), [padding, pb, pl, pr, prefixCls, pt]);
const marginClasses = useMemo(() => classNames({
[`${prefixCls}-paper-margin${margin}`]: margin,
[`${prefixCls}-paper-ml${ml}`]: Number.isInteger(ml),
[`${prefixCls}-paper-mr${mr}`]: Number.isInteger(mr),
[`${prefixCls}-paper-mt${mt}`]: Number.isInteger(mt),
[`${prefixCls}-paper-mb${mb}`]: Number.isInteger(mb),
}), [margin, mb, ml, mr, mt, prefixCls]);
const borderClasses = useMemo(() => classNames({
[`${prefixCls}-paper-bordered`]: bordered,
[`${prefixCls}-paper-shadow`]: shadow,
[`${prefixCls}-paper-border-radius-${borderRadius}`]: Number.isInteger(borderRadius),
[`${prefixCls}-paper-top-left-radius-${topLeftRadius}`]: Number.isInteger(topLeftRadius),
[`${prefixCls}-paper-bottom-left-radius-${bottomLeftRadius}`]: Number.isInteger(bottomLeftRadius),
[`${prefixCls}-paper-top-right-radius-${topRightRadius}`]: Number.isInteger(topRightRadius),
[`${prefixCls}-paper-bottom-right-radius-${bottomRightRadius}`]: Number.isInteger(bottomRightRadius),
}), [borderRadius, bordered, bottomLeftRadius, topLeftRadius, prefixCls, bottomRightRadius, topRightRadius, shadow]);
const paperClassName = useMemo(() => classNames(className, `${prefixCls}-paper`, paddingClasses, marginClasses, borderClasses, {
[`${prefixCls}-paper-full-width`]: fullWidth,
[`${prefixCls}-paper-scrollable`]: scrollable,
[`${prefixCls}-paper-gap${gap}`]: gap,
[`${prefixCls}-paper-direction-${direction}`]: direction,
}), [borderClasses, className, direction, fullWidth, gap, marginClasses, paddingClasses, prefixCls, scrollable]);
const flexStyles = useMemo(() => ({
...(display && { display }),
...(justify && { justifyContent: justify }),
...(align && { alignItems: align }),
}), [display, align, justify]);
const heightStyle = useMemo(() => {
if (Number.isInteger(height)) {
return `${height}px`;
}
return height;
}, [height]);
const widthStyle = useMemo(() => {
if (Number.isInteger(width)) {
return `${width}px`;
}
return width;
}, [width]);
const paperStyles = useMemo(() => ({
...(bgColor && { backgroundColor: bgColor }),
...(heightStyle && { height: heightStyle }),
...(widthStyle && { width: widthStyle }),
...flexStyles,
...style,
}), [bgColor, heightStyle, widthStyle, flexStyles, style]);
return (_jsx("div", { ref: ref, className: paperClassName, style: paperStyles, ...restProps, children: children }));
});
Paper.displayName = 'Paper';