@onesy/ui-react
Version:
UI for React
244 lines • 9.59 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 = ["name", "short_description", "cover", "profile", "links", "share", "start", "end", "sensitiveText", "sensitiveDescription", "IconMore", "IconShare", "ShareProps", "ItemShareProps", "IconButtonProps", "IconProps", "NameProps", "ShortDescriptionProps", "LinkProps", "LinkTypeProps", "className"];
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) { _defineProperty(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; }
import React from 'react';
import { textToInnerHTML } from '@onesy/utils';
import { classNames, style, useOnesyTheme } from '@onesy/style-react';
import IconMaterialShare from '@onesy/icons-material-rounded-react/IconMaterialShareW100';
import IconMaterialMoreVert from '@onesy/icons-material-rounded-react/IconMaterialMoreVertW100';
import SectionElement from '../Section';
import MenuElement from '../Menu';
import ShareElement from '../Share';
import LineElement from '../Line';
import TypeElement from '../Type';
import ButtonElement from '../Button';
import MenuItemElement from '../MenuItem';
import IconButtonElement from '../IconButton';
import { useConfirm } from '../Confirm';
import { staticClassName } from '../utils';
const useStyle = style(theme => ({
root: {
padding: `${theme.methods.space.value(5, 'px')} ${theme.methods.space.value(3, 'px')}`
},
wrapper: {
maxWidth: '1024px'
},
profile: {
width: '140px',
height: '140px',
borderRadius: theme.methods.shape.radius.value(40, 'px'),
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
border: `4px solid ${theme.palette.light ? theme.palette.color.primary[99] : theme.palette.color.primary[5]}`,
cursor: 'default',
userSelect: 'none'
},
cover: {
height: '100vh',
maxHeight: '274px',
borderRadius: theme.methods.shape.radius.value(5, 'px'),
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
cursor: 'default',
userSelect: 'none'
},
name: {
wordBreak: 'break-word'
},
summary: {
wordBreak: 'break-word',
maxWidth: '540px'
},
links: {
marginTop: '40px',
padding: `0 ${theme.methods.space.value(3, 'px')}`
},
linkWrapper: {
maxWidth: '740px'
},
link: {
'&.onesy-Button-root': {
whiteSpace: 'normal',
wordBreak: 'break-word',
flex: '1 1 auto !important'
}
},
more: {
flex: '0 0 auto'
}
}), {
name: 'onesy-Links'
});
const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useOnesyTheme();
const l = theme.l;
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLinks?.props?.default), props_), [props_]);
const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
const Share = React.useMemo(() => theme?.elements?.Share || ShareElement, [theme]);
const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
const MenuItem = React.useMemo(() => theme?.elements?.MenuItem || MenuItemElement, [theme]);
const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
const {
classes
} = useStyle();
const {
name,
short_description,
cover,
profile,
links,
share = true,
start,
end,
sensitiveText = l('Sensitive URL'),
sensitiveDescription = l('This is URL might contain sensitive information, confirm you are 18+ to continue.'),
IconMore = IconMaterialMoreVert,
IconShare = IconMaterialShare,
ShareProps,
ItemShareProps,
IconButtonProps,
IconProps,
NameProps,
ShortDescriptionProps,
LinkProps,
LinkTypeProps,
className
} = props,
other = _objectWithoutProperties(props, _excluded);
const confirm = useConfirm();
const onOpenLink = React.useCallback(async item => {
const confirmed = item.sensitivity && !['none'].includes(item.sensitivity) ? await confirm.open({
name: sensitiveText,
description: sensitiveDescription
}) : true;
if (confirmed) {
window.open(item.url, 'blank');
}
}, [sensitiveText, sensitiveDescription]);
return /*#__PURE__*/React.createElement(Section, _extends({
ref: ref,
gap: 2,
align: "center",
maxWidth: false,
padding: false,
fullWidth: true,
className: classNames([staticClassName('Links', theme) && ['onesy-Links-root'], className, classes.root])
}, other), start, /*#__PURE__*/React.createElement(Line, {
gap: 1.4,
fullWidth: true,
className: classes.wrapper
}, (profile || cover) && /*#__PURE__*/React.createElement(Line, {
gap: 0,
align: "center",
fullWidth: true
}, cover && /*#__PURE__*/React.createElement(Line, {
fullWidth: true,
className: classes.cover,
style: {
backgroundImage: `url('${cover?.url || cover?.urlSmall}')`
}
}), profile && /*#__PURE__*/React.createElement(Line, {
fullWidth: true,
className: classes.profile,
style: {
marginTop: cover ? -71 : 0,
backgroundImage: `url('${profile?.urlSmall || profile?.url}')`
}
})), (name || short_description) && /*#__PURE__*/React.createElement(Line, {
gap: 0.5,
align: "center",
fullWidth: true
}, name && /*#__PURE__*/React.createElement(Type, _extends({
version: "h1",
weight: 400,
align: "center",
fullWidth: true,
dangerouslySetInnerHTML: {
__html: textToInnerHTML(name)
}
}, NameProps, {
className: classNames([staticClassName('Links', theme) && ['onesy-Links-name'], NameProps?.className, classes.name])
})), short_description && /*#__PURE__*/React.createElement(Type, _extends({
version: "b1",
weight: 300,
align: "center",
fullWidth: true,
dangerouslySetInnerHTML: {
__html: textToInnerHTML(short_description)
}
}, ShortDescriptionProps, {
className: classNames([staticClassName('Links', theme) && ['onesy-Links-short-description'], ShortDescriptionProps?.className, classes.summary])
}))), !!links?.length && /*#__PURE__*/React.createElement(Line, {
gap: 1.4,
align: "center",
fullWidth: true,
className: classes.links
}, links.map((item, index) => /*#__PURE__*/React.createElement(Line, {
key: index,
gap: 1,
direction: "row",
align: "center",
justify: "center",
fullWidth: true,
className: classes.linkWrapper
}, /*#__PURE__*/React.createElement(Button, _extends({
tonal: true
}, item.props, {
version: [undefined, 'default'].includes(item.version) ? 'outlined' : 'filled',
elevation: item.version === 'primary',
color: item.version === 'primary' ? 'primary' : item.version === 'secondary' ? 'secondary' : 'default',
fullWidth: true,
onClick: () => onOpenLink(item)
}, LinkProps, {
className: classNames([`onesy-Links-link-version-${item.version}`, LinkProps?.className, item.props?.className, classes.link])
}), /*#__PURE__*/React.createElement(Type, _extends({
version: "b1",
weight: 300
}, LinkTypeProps), item.name || l('Link'))), /*#__PURE__*/React.createElement(Menu, {
menuItems: [/*#__PURE__*/React.createElement(MenuItem, {
start: /*#__PURE__*/React.createElement(IconShare, _extends({
size: "small"
}, IconProps)),
startAlign: "center",
primary: /*#__PURE__*/React.createElement(Type, {
version: "b3"
}, l('Share')),
menu: item.share ? /*#__PURE__*/React.createElement(Share, _extends({
version: "menu-items",
name: item.name,
url: item.url,
exclude: ['print']
}, ItemShareProps, {
ListItemProps: _objectSpread({
size: 'small',
noBackground: true
}, ItemShareProps?.ListItemProps)
})) : undefined,
MenuProps: {
ListProps: {
noChildrenTransform: true
}
},
size: "small",
button: true,
disabled: !item.share
})]
}, /*#__PURE__*/React.createElement(IconButton, _extends({
size: "regular",
disabled: !item.share
}, IconButtonProps, {
className: classNames([staticClassName('Links', theme) && ['onesy-Links-more'], IconButtonProps?.className, classes.more])
}), /*#__PURE__*/React.createElement(IconMore, _extends({
size: "large"
}, IconProps)))))))), share && /*#__PURE__*/React.createElement(Share, ShareProps), end);
});
Element.displayName = 'onesy-Links';
export default Element;