@onesy/ui-react
Version:
UI for React
417 lines (416 loc) • 18.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _Line = _interopRequireDefault(require("../Line/Line"));
var _Type = _interopRequireDefault(require("../Type"));
var _Reveal = _interopRequireDefault(require("../Reveal"));
var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const useStyle = (0, _styleReact.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: 'onesy-Section'
});
const Section = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesySection) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_), props_ === null || props_ === void 0 ? void 0 : props_.AdditionalProps);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
const Reveal = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Reveal) || _Reveal.default;
const {
ref,
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 = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: _react.default.useRef(undefined)
};
const keys = _react.default.useMemo(() => {
const result = [];
const items = [title_, description_, show_, size_, margin_, marginVertical_, padding_, maxWidth_];
items.forEach(item => {
if ((0, _utils.is)('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
});
return (0, _utils.unique)(result);
}, [title_, description_, show_, size_, margin_, marginVertical_, padding_, maxWidth_]);
const breakpoints = {};
keys.forEach(key_1 => {
breakpoints[key_1] = (0, _useMediaQuery.default)(theme.breakpoints.media[key_1], {
element: refs.root.current
});
});
const title = (0, _utils2.valueBreakpoints)(title_, undefined, breakpoints, theme);
const description = (0, _utils2.valueBreakpoints)(description_, undefined, breakpoints, theme);
const show = (0, _utils2.valueBreakpoints)(show_, true, breakpoints, theme);
const size = (0, _utils2.valueBreakpoints)(size_, 'regular', breakpoints, theme);
const margin = (0, _utils2.valueBreakpoints)(margin_, false, breakpoints, theme);
const marginVertical = (0, _utils2.valueBreakpoints)(marginVertical_, false, breakpoints, theme);
const padding = (0, _utils2.valueBreakpoints)(padding_, true, breakpoints, theme);
const maxWidth = (0, _utils2.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 === null || palette === void 0 ? void 0 : palette.main
});
}
}
if ((0, _utils.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 = _objectSpread(_objectSpread({}, 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.is)('string', backgroundImage) ? backgroundImage : '');
if (url) {
styleBackground = _objectSpread(_objectSpread({}, styleBackground), {}, {
backgroundImage: `url('${url}')`
});
}
}
let styleOverlay = {};
if (overlay) {
const palette_0 = 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), 0.74) : palette_0 === null || palette_0 === void 0 ? void 0 : palette_0.main
});
}
const urlVideo = (backgroundVideo === null || backgroundVideo === void 0 ? void 0 : backgroundVideo.url) || (backgroundVideo === null || backgroundVideo === void 0 ? void 0 : backgroundVideo.urlSmall) || ((0, _utils.is)('string', backgroundVideo) ? backgroundVideo : '');
const Wrapper = reveal ? Reveal : _react.default.Fragment;
let wrapperProps = {};
if (reveal) {
wrapperProps = _objectSpread({}, RevealProps);
}
if (show !== undefined && !show) return null;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
ref: item_0 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
}
refs.root.current = item_0;
},
gap: 4,
direction: "column",
align: "center",
fullWidth: true,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Section', theme) && ['onesy-Section-root', `onesy-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, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _styleReact.classNames)([classes.background, backgroundImage && styleBackground.backgroundImage && classes.backgroundImage]),
style: _objectSpread({}, styleBackground),
children: [urlVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
autoPlay: true,
muted: true,
loop: true,
className: classes.backgroundVideo,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
src: urlVideo
})
}), overlay && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([classes.backgroundOverlay, overlayBlur && classes.backgroundOverlayBlur]),
style: _objectSpread({}, styleOverlay)
})]
}), (title || description) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
gap: 1,
align: "center",
fullWidth: true
}, HeaderProps), {}, {
className: (0, _styleReact.classNames)([HeaderProps === null || HeaderProps === void 0 ? void 0 : HeaderProps.className, classes.header, maxWidth && classes[`maxWidth_${maxWidth}`]]),
children: [(0, _utils.is)('string', title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3',
align: "center"
}, TitleProps), {}, {
dangerouslySetInnerHTML: {
__html: (0, _utils.textToInnerHTML)(title)
}
})), (0, _utils.is)('string', description) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
align: "center"
}, DescriptionProps), {}, {
dangerouslySetInnerHTML: {
__html: (0, _utils.textToInnerHTML)(description)
}
}))]
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
gap: 2,
direction: "column",
align: "center",
fullWidth: true,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Section', theme) && ['onesy-Section-main'], MainProps === null || MainProps === void 0 ? void 0 : MainProps.className, classes.main, maxWidth && classes[`maxWidth_${maxWidth}`]])
}, MainProps), {}, {
children: children
})), end]
}))
}));
};
Section.displayName = 'onesy-Section';
var _default = exports.default = Section;