@amaui/ui-react
Version:
UI for React
399 lines • 15.8 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["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"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { is, textToInnerHTML, unique } from '@amaui/utils';
import { classNames, style as styleMethod, useAmauiTheme } from '@amaui/style-react';
import LineElement from '../Line/Line';
import TypeElement from '../Type';
import RevealElement from '../Reveal';
import useMediaQuery from '../useMediaQuery';
import { valueBreakpoints, staticClassName } from '../utils';
const useStyle = styleMethod(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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useAmauiTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiSection?.props?.default), props_), props_?.AdditionalProps), [props_]);
const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
const Reveal = React.useMemo(() => theme?.elements?.Reveal || RevealElement, [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 = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: React.useRef(undefined)
};
const keys = React.useMemo(() => {
const result = [];
const items = [title_, description_, show_, size_, margin_, marginVertical_, padding_, maxWidth_];
items.forEach(item => {
if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
});
return unique(result);
}, [title_, description_, show_, size_, margin_, marginVertical_, padding_, maxWidth_]);
const breakpoints = {};
keys.forEach(key => {
breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
element: refs.root.current
});
});
const title = valueBreakpoints(title_, undefined, breakpoints, theme);
const description = valueBreakpoints(description_, undefined, breakpoints, theme);
const show = valueBreakpoints(show_, true, breakpoints, theme);
const size = valueBreakpoints(size_, 'regular', breakpoints, theme);
const margin = valueBreakpoints(margin_, false, breakpoints, theme);
const marginVertical = valueBreakpoints(marginVertical_, false, breakpoints, theme);
const padding = valueBreakpoints(padding_, true, breakpoints, theme);
const maxWidth = valueBreakpoints(maxWidth_, 'regular', breakpoints, theme);
let styleBackground = {};
if (backgroundColor) {
if (['default'].includes(backgroundColor)) {
styleBackground = _objectSpread(_objectSpread({}, styleBackground), {}, {
backgroundColor: theme.palette.background.default.primary
});
} else if (['inverted'].includes(backgroundColor)) {
styleBackground = _objectSpread(_objectSpread({}, 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 = _objectSpread(_objectSpread({}, styleBackground), {}, {
backgroundColor: themed ? palette[theme.palette.light ? 95 : 90] : palette?.main
});
}
}
if (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?.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?.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 = _objectSpread(_objectSpread({}, styleBackground), {}, {
backgroundImage: backgroundImageStyle
});
}
if (backgroundImage) {
const url = backgroundImage?.url || backgroundImage?.urlSmall || (is('string', backgroundImage) ? backgroundImage : '');
if (url) {
styleBackground = _objectSpread(_objectSpread({}, styleBackground), {}, {
backgroundImage: `url('${url}')`
});
}
}
let styleOverlay = {};
if (overlay) {
const palette = theme.palette.color[overlay] || theme.methods.color(overlay);
styleOverlay = _objectSpread(_objectSpread({}, styleOverlay), {}, {
backgroundColor: themed ? theme.methods.palette.color.alpha(theme.methods.palette.color.value(undefined, 95, true, palette), 0.74) : palette?.main
});
}
const urlVideo = backgroundVideo?.url || backgroundVideo?.urlSmall || (is('string', backgroundVideo) ? backgroundVideo : '');
const Wrapper = reveal ? Reveal : React.Fragment;
let wrapperProps = {};
if (reveal) {
wrapperProps = _objectSpread({}, RevealProps);
}
if (show !== undefined && !show) return null;
return /*#__PURE__*/React.createElement(Wrapper, wrapperProps, /*#__PURE__*/React.createElement(Line, _extends({
ref: item => {
if (ref) {
if (is('function', ref)) ref(item);else ref.current = item;
}
refs.root.current = item;
},
gap: 4,
direction: "column",
align: "center",
fullWidth: true,
className: classNames([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), start, /*#__PURE__*/React.createElement("div", {
className: classNames([classes.background, backgroundImage && styleBackground.backgroundImage && classes.backgroundImage]),
style: _objectSpread({}, styleBackground)
}, urlVideo && /*#__PURE__*/React.createElement("video", {
autoPlay: true,
muted: true,
loop: true,
className: classes.backgroundVideo
}, /*#__PURE__*/React.createElement("source", {
src: urlVideo
})), overlay && /*#__PURE__*/React.createElement("div", {
className: classNames([classes.backgroundOverlay, overlayBlur && classes.backgroundOverlayBlur]),
style: _objectSpread({}, styleOverlay)
})), (title || description) && /*#__PURE__*/React.createElement(Line, _extends({
gap: 1,
align: "center",
fullWidth: true
}, HeaderProps, {
className: classNames([HeaderProps?.className, classes.header, maxWidth && classes[`maxWidth_${maxWidth}`]])
}), is('string', title) && /*#__PURE__*/React.createElement(Type, _extends({
version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3',
align: "center"
}, TitleProps, {
dangerouslySetInnerHTML: {
__html: textToInnerHTML(title)
}
})), is('string', description) && /*#__PURE__*/React.createElement(Type, _extends({
version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
align: "center"
}, DescriptionProps, {
dangerouslySetInnerHTML: {
__html: textToInnerHTML(description)
}
}))), /*#__PURE__*/React.createElement(Line, _extends({
gap: 2,
direction: "column",
align: "center",
fullWidth: true,
className: classNames([staticClassName('Section', theme) && ['amaui-Section-main'], MainProps?.className, classes.main, maxWidth && classes[`maxWidth_${maxWidth}`]])
}, MainProps), children), end));
});
Section.displayName = 'amaui-Section';
export default Section;