@amaui/ui-react
Version:
UI for React
358 lines (357 loc) • 19 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const Line_1 = __importDefault(require("../Line/Line"));
const Type_1 = __importDefault(require("../Type"));
const Reveal_1 = __importDefault(require("../Reveal"));
const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
root: {
position: 'relative'
},
main: {
zIndex: '14'
},
header: {
zIndex: '14'
},
margin_small: {
margin: '64px 32px',
width: 'calc(100% - 64px) !important'
},
margin_regular: {
margin: '104px 40px',
width: 'calc(100% - 80px) !important'
},
margin_large: {
margin: '144px 48px',
width: 'calc(100% - 96px) !important'
},
margin_extra_large: {
margin: '184px 56px',
width: 'calc(100% - 112px) !important'
},
margin_extra_extra_large: {
margin: '224px 64px',
width: 'calc(100% - 128px) !important'
},
margin_vertical_small: {
margin: '64px 0'
},
margin_vertical_regular: {
margin: '104px 0'
},
margin_vertical_large: {
margin: '144px 0'
},
margin_vertical_extra_large: {
margin: '184px 0'
},
margin_vertical_extra_extra_large: {
margin: '224px 0'
},
padding_small: {
padding: `${theme.methods.space.value(8, 'px')} ${theme.methods.space.value(4, 'px')}`
},
padding_regular: {
padding: `${theme.methods.space.value(13, 'px')} ${theme.methods.space.value(5, 'px')}`
},
padding_large: {
padding: `${theme.methods.space.value(18, 'px')} ${theme.methods.space.value(6, 'px')}`
},
padding_extra_large: {
padding: `${theme.methods.space.value(23, 'px')} ${theme.methods.space.value(7, 'px')}`
},
padding_extra_extra_large: {
padding: `${theme.methods.space.value(28, 'px')} ${theme.methods.space.value(8, 'px')}`
},
maxWidth_extra_small: {
maxWidth: '480px'
},
maxWidth_small: {
maxWidth: '768px'
},
maxWidth_regular: {
maxWidth: '1024px'
},
maxWidth_large: {
maxWidth: '1440px'
},
maxWidth_extra_large: {
maxWidth: '1920px'
},
maxWidth_extra_extra_large: {
maxWidth: '2400px'
},
background: {
position: 'absolute',
inset: '0',
overflow: 'hidden',
pointerEvents: 'none',
zIndex: '1'
},
backgroundImage: {
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat'
},
backgroundVideo: {
position: 'absolute',
inset: '0',
minHeight: '100%',
minWidth: '100%',
top: '50%',
transform: 'translateY(-50%)',
zIndex: '1'
},
backgroundOverlay: {
position: 'absolute',
inset: '0',
zIndex: '4'
},
backgroundOverlayBlur: {
backdropFilter: 'blur(12px)'
},
'@media only screen and (max-width: 768px)': {
$margin_small: {
margin: '44px 24px',
width: 'calc(100% - 48px) !important'
},
$margin_regular: {
margin: '76px 32px',
width: 'calc(100% - 64px) !important'
},
$margin_large: {
margin: '104px 40px',
width: 'calc(100% - 80px) !important'
},
$margin_extra_large: {
margin: '134px 48px',
width: 'calc(100% - 96px) !important'
},
$margin_extra_extra_large: {
margin: '164px 56px',
width: 'calc(100% - 112px) !important'
},
$margin_vertical_small: {
margin: '44px 0'
},
$margin_vertical_regular: {
margin: '76px 0'
},
$margin_vertical_large: {
margin: '104px 0'
},
$margin_vertical_extra_large: {
margin: '134px 0'
},
$margin_vertical_extra_extra_large: {
margin: '164px 0'
},
$padding_small: {
padding: `${theme.methods.space.value(6, 'px')} ${theme.methods.space.value(3, 'px')}`
},
$padding_regular: {
padding: `${theme.methods.space.value(10, 'px')} ${theme.methods.space.value(4, 'px')}`
},
$padding_large: {
padding: `${theme.methods.space.value(14, 'px')} ${theme.methods.space.value(5, 'px')}`
},
$padding_extra_large: {
padding: `${theme.methods.space.value(18, 'px')} ${theme.methods.space.value(6, 'px')}`
},
$padding_extra_extra_large: {
padding: `${theme.methods.space.value(22, 'px')} ${theme.methods.space.value(7, 'px')}`
}
},
'@media only screen and (max-width: 480px)': {
$margin_small: {
margin: '24px 24px',
width: 'calc(100% - 48px) !important'
},
$margin_regular: {
margin: '48px 24px',
width: 'calc(100% - 48px) !important'
},
$margin_large: {
margin: '64px 24px',
width: 'calc(100% - 48px) !important'
},
$margin_extra_large: {
margin: '84px 24px',
width: 'calc(100% - 48px) !important'
},
$margin_extra_extra_large: {
margin: '104px 24px',
width: 'calc(100% - 48px) !important'
},
$margin_vertical_small: {
margin: '24px 0'
},
$margin_vertical_regular: {
margin: '48px 0'
},
$margin_vertical_large: {
margin: '64px 0'
},
$margin_vertical_extra_large: {
margin: '84px 0'
},
$margin_vertical_extra_extra_large: {
margin: '104px 0'
},
$padding_small: {
padding: theme.methods.space.value(3, 'px')
},
$padding_regular: {
padding: `${theme.methods.space.value(6, 'px')} ${theme.methods.space.value(3, 'px')}`
},
$padding_large: {
padding: `${theme.methods.space.value(9, 'px')} ${theme.methods.space.value(3, 'px')}`
},
$padding_extra_large: {
padding: `${theme.methods.space.value(12, 'px')} ${theme.methods.space.value(3, 'px')}`
},
$padding_extra_extra_large: {
padding: `${theme.methods.space.value(15, 'px')} ${theme.methods.space.value(3, 'px')}`
}
}
}), { name: 'amaui-Section' });
const Section = react_1.default.forwardRef((props_, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiSection) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_), props_ === null || props_ === void 0 ? void 0 : props_.AdditionalProps)); }, [props_]);
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
const Reveal = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Reveal) || Reveal_1.default; }, [theme]);
const { themed = true, title: title_, description: description_, show: show_, reveal, backgroundColor, backgroundGradient, backgroundImage, backgroundVideo, overlay, overlayBlur, size: size_, margin: margin_, marginVertical: marginVertical_, padding: padding_, maxWidth: maxWidth_, start, end, MainProps, RevealProps, TitleProps, DescriptionProps, HeaderProps, className, children } = props, other = __rest(props, ["themed", "title", "description", "show", "reveal", "backgroundColor", "backgroundGradient", "backgroundImage", "backgroundVideo", "overlay", "overlayBlur", "size", "margin", "marginVertical", "padding", "maxWidth", "start", "end", "MainProps", "RevealProps", "TitleProps", "DescriptionProps", "HeaderProps", "className", "children"]);
const { classes } = useStyle();
const refs = {
root: react_1.default.useRef(undefined)
};
const keys = react_1.default.useMemo(() => {
const result = [];
const items = [title_, description_, show_, size_, margin_, marginVertical_, padding_, maxWidth_];
items.forEach(item => {
if ((0, utils_1.is)('object', item))
Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
});
return (0, utils_1.unique)(result);
}, [title_, description_, show_, size_, margin_, marginVertical_, padding_, maxWidth_]);
const breakpoints = {};
keys.forEach(key => {
breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
});
const title = (0, utils_2.valueBreakpoints)(title_, undefined, breakpoints, theme);
const description = (0, utils_2.valueBreakpoints)(description_, undefined, breakpoints, theme);
const show = (0, utils_2.valueBreakpoints)(show_, true, breakpoints, theme);
const size = (0, utils_2.valueBreakpoints)(size_, 'regular', breakpoints, theme);
const margin = (0, utils_2.valueBreakpoints)(margin_, false, breakpoints, theme);
const marginVertical = (0, utils_2.valueBreakpoints)(marginVertical_, false, breakpoints, theme);
const padding = (0, utils_2.valueBreakpoints)(padding_, true, breakpoints, theme);
const maxWidth = (0, utils_2.valueBreakpoints)(maxWidth_, 'regular', breakpoints, theme);
let styleBackground = {};
if (backgroundColor) {
if (['default'].includes(backgroundColor)) {
styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundColor: theme.palette.background.default.primary });
}
else if (['inverted'].includes(backgroundColor)) {
styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundColor: theme.palette.background[theme.palette.light ? 'dark' : 'light'].primary });
}
else {
const palette = ['inherit', 'initial', 'themed', 'neutral'].includes(backgroundColor) ? theme.palette.color.neutral : (theme.palette.color[backgroundColor] || theme.methods.color(backgroundColor));
styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundColor: themed ? palette[theme.palette.light ? 95 : 90] : palette === null || palette === void 0 ? void 0 : palette.main });
}
}
if ((0, utils_1.is)('array', backgroundGradient) && backgroundGradient.length >= 2) {
const palette1 = theme.palette.color[backgroundGradient[0]] || theme.methods.color(backgroundGradient[0]);
const palette2 = theme.palette.color[backgroundGradient[1]] || theme.methods.color(backgroundGradient[1]);
const palette3 = theme.palette.color[backgroundGradient[2]] || theme.methods.color(backgroundGradient[2]);
let backgroundImageStyle = '';
if ((backgroundGradient === null || backgroundGradient === void 0 ? void 0 : backgroundGradient.length) === 2) {
backgroundImageStyle = themed ? `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${theme.methods.palette.color.colorToRgb(palette1.main, 0.14)} 0%, ${theme.methods.palette.color.colorToRgb(palette2.main, 0.14)} 100%)` : `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${palette1.main} 0%, ${palette2.main} 100%)`;
}
if ((backgroundGradient === null || backgroundGradient === void 0 ? void 0 : backgroundGradient.length) === 3) {
backgroundImageStyle = themed ? `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${theme.methods.palette.color.colorToRgb(palette1.main, 0.14)} 0%, ${theme.methods.palette.color.colorToRgb(palette2.main, 0.14)} 40%, ${theme.methods.palette.color.colorToRgb(palette3.main, 0.14)} 100%)` : `linear-gradient(${theme.palette.light ? '130deg' : '330deg'}, ${palette1.main} 0%, ${palette2.main} 40%, ${palette3.main} 100%)`;
}
styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundImage: backgroundImageStyle });
}
if (backgroundImage) {
const url = (backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.url) || (backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.urlSmall) || ((0, utils_1.is)('string', backgroundImage) ? backgroundImage : '');
if (url) {
styleBackground = Object.assign(Object.assign({}, styleBackground), { backgroundImage: `url('${url}')` });
}
}
let styleOverlay = {};
if (overlay) {
const palette = theme.palette.color[overlay] || theme.methods.color(overlay);
styleOverlay = Object.assign(Object.assign({}, styleOverlay), { backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette), 0.74) : palette === null || palette === void 0 ? void 0 : palette.main });
}
const urlVideo = (backgroundVideo === null || backgroundVideo === void 0 ? void 0 : backgroundVideo.url) || (backgroundVideo === null || backgroundVideo === void 0 ? void 0 : backgroundVideo.urlSmall) || ((0, utils_1.is)('string', backgroundVideo) ? backgroundVideo : '');
const Wrapper = reveal ? Reveal : react_1.default.Fragment;
let wrapperProps = {};
if (reveal) {
wrapperProps = Object.assign({}, RevealProps);
}
if (show !== undefined && !show)
return null;
return ((0, jsx_runtime_1.jsx)(Wrapper, Object.assign({}, wrapperProps, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: (item) => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.root.current = item;
}, gap: 4, direction: 'column', align: 'center', fullWidth: true, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Section', theme) && [
'amaui-Section-root',
`amaui-Section-size-${size}`
],
className,
classes.root,
(margin !== false) && (margin && (classes[`margin_${margin}`] || classes[`margin_${size}`])),
(marginVertical !== false) && (!margin && marginVertical && (classes[`margin_vertical_${marginVertical}`] || classes[`margin_vertical_${size}`])),
(padding !== false) && (classes[`padding_${padding}`] || classes[`padding_${size}`])
]) }, other, { children: [start, (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, style_react_1.classNames)([
classes.background,
backgroundImage && styleBackground.backgroundImage && classes.backgroundImage
]), style: Object.assign({}, styleBackground) }, { children: [urlVideo && ((0, jsx_runtime_1.jsx)("video", Object.assign({ autoPlay: true, muted: true, loop: true, className: classes.backgroundVideo }, { children: (0, jsx_runtime_1.jsx)("source", { src: urlVideo }) }))), overlay && ((0, jsx_runtime_1.jsx)("div", { className: (0, style_react_1.classNames)([
classes.backgroundOverlay,
overlayBlur && classes.backgroundOverlayBlur
]), style: Object.assign({}, styleOverlay) }))] })), (title || description) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, align: 'center', fullWidth: true }, HeaderProps, { className: (0, style_react_1.classNames)([
HeaderProps === null || HeaderProps === void 0 ? void 0 : HeaderProps.className,
classes.header,
maxWidth && classes[`maxWidth_${maxWidth}`]
]) }, { children: [(0, utils_1.is)('string', title) && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3', align: 'center' }, TitleProps, { dangerouslySetInnerHTML: {
__html: (0, utils_1.textToInnerHTML)(title)
} }))), (0, utils_1.is)('string', description) && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3', align: 'center' }, DescriptionProps, { dangerouslySetInnerHTML: {
__html: (0, utils_1.textToInnerHTML)(description)
} })))] }))), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 2, direction: 'column', align: 'center', fullWidth: true, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Section', theme) && [
'amaui-Section-main'
],
MainProps === null || MainProps === void 0 ? void 0 : MainProps.className,
classes.main,
maxWidth && classes[`maxWidth_${maxWidth}`]
]) }, MainProps, { children: children })), end] })) })));
});
Section.displayName = 'amaui-Section';
exports.default = Section;