@onesy/ui-react
Version:
UI for React
309 lines • 11 kB
JavaScript
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 { c as _c } from "react/compiler-runtime";
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';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 = props_ => {
const $ = _c(18);
const theme = useOnesyTheme();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLinks?.props?.default), props_);
const Line = theme?.elements?.Line || LineElement;
const Section = theme?.elements?.Section || SectionElement;
const Menu = theme?.elements?.Menu || MenuElement;
const Share = theme?.elements?.Share || ShareElement;
const Type = theme?.elements?.Type || TypeElement;
const Button = theme?.elements?.Button || ButtonElement;
const MenuItem = theme?.elements?.MenuItem || MenuItemElement;
const IconButton = theme?.elements?.IconButton || IconButtonElement;
const {
classes
} = useStyle();
const {
name,
short_description,
cover,
profile,
links,
share: t0,
start,
end,
sensitiveText: t1,
sensitiveDescription: t2,
IconMore: t3,
IconShare: t4,
ShareProps,
ItemShareProps,
IconButtonProps,
IconProps,
NameProps,
ShortDescriptionProps,
LinkProps,
LinkTypeProps,
className
} = props,
other = _objectWithoutProperties(props, _excluded);
const share = t0 === undefined ? true : t0;
const sensitiveText = t1 === undefined ? l("Sensitive URL") : t1;
const sensitiveDescription = t2 === undefined ? l("This is URL might contain sensitive information, confirm you are 18+ to continue.") : t2;
const IconMore = t3 === undefined ? IconMaterialMoreVert : t3;
const IconShare = t4 === undefined ? IconMaterialShare : t4;
const confirm = useConfirm();
const onOpenLink = 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");
}
};
const t5 = 2;
const t6 = "center";
const t7 = false;
const t8 = false;
const t9 = true;
const t10 = classNames([staticClassName("Links", theme) && ["onesy-Links-root"], className, classes.root]);
const t11 = 1.4;
const t12 = true;
const t13 = (profile || cover) && /*#__PURE__*/_jsxs(Line, {
gap: 0,
align: "center",
fullWidth: true,
children: [cover && /*#__PURE__*/_jsx(Line, {
fullWidth: true,
className: classes.cover,
style: {
backgroundImage: `url('${cover?.url || cover?.urlSmall}')`
}
}), profile && /*#__PURE__*/_jsx(Line, {
fullWidth: true,
className: classes.profile,
style: {
marginTop: cover ? -71 : 0,
backgroundImage: `url('${profile?.urlSmall || profile?.url}')`
}
})]
});
const t14 = (name || short_description) && /*#__PURE__*/_jsxs(Line, {
gap: 0.5,
align: "center",
fullWidth: true,
children: [name && /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
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__*/_jsx(Type, _objectSpread(_objectSpread({
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])
}))]
});
const t15 = !!links?.length && /*#__PURE__*/_jsx(Line, {
gap: 1.4,
align: "center",
fullWidth: true,
className: classes.links,
children: links.map((item_0, index) => /*#__PURE__*/_jsxs(Line, {
gap: 1,
direction: "row",
align: "center",
justify: "center",
fullWidth: true,
className: classes.linkWrapper,
children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread(_objectSpread({
tonal: true
}, item_0.props), {}, {
version: [undefined, "default"].includes(item_0.version) ? "outlined" : "filled",
elevation: item_0.version === "primary",
color: item_0.version === "primary" ? "primary" : item_0.version === "secondary" ? "secondary" : "default",
fullWidth: true,
onClick: () => onOpenLink(item_0)
}, LinkProps), {}, {
className: classNames([`onesy-Links-link-version-${item_0.version}`, LinkProps?.className, item_0.props?.className, classes.link]),
children: /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
version: "b1",
weight: 300
}, LinkTypeProps), {}, {
children: item_0.name || l("Link")
}))
})), /*#__PURE__*/_jsx(Menu, {
menuItems: [/*#__PURE__*/_jsx(MenuItem, {
start: /*#__PURE__*/_jsx(IconShare, _objectSpread({
size: "small"
}, IconProps)),
startAlign: "center",
primary: /*#__PURE__*/_jsx(Type, {
version: "b3",
children: l("Share")
}),
menu: item_0.share ? /*#__PURE__*/_jsx(Share, _objectSpread(_objectSpread({
version: "menu-items",
name: item_0.name,
url: item_0.url,
exclude: ["print"]
}, ItemShareProps), {}, {
ListItemProps: _objectSpread({
size: "small",
noBackground: true
}, ItemShareProps?.ListItemProps)
})) : undefined,
MenuProps: {
ListProps: {
noChildrenTransform: true
}
},
size: "small",
button: true,
disabled: !item_0.share
})],
children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
size: "regular",
disabled: !item_0.share
}, IconButtonProps), {}, {
className: classNames([staticClassName("Links", theme) && ["onesy-Links-more"], IconButtonProps?.className, classes.more]),
children: /*#__PURE__*/_jsx(IconMore, _objectSpread({
size: "large"
}, IconProps))
}))
})]
}, index))
});
let t16;
if ($[0] !== Line || $[1] !== classes.wrapper || $[2] !== t13 || $[3] !== t14 || $[4] !== t15) {
t16 = /*#__PURE__*/_jsxs(Line, {
gap: t11,
fullWidth: t12,
className: classes.wrapper,
children: [t13, t14, t15]
});
$[0] = Line;
$[1] = classes.wrapper;
$[2] = t13;
$[3] = t14;
$[4] = t15;
$[5] = t16;
} else {
t16 = $[5];
}
let t17;
if ($[6] !== Share || $[7] !== ShareProps || $[8] !== share) {
t17 = share && /*#__PURE__*/_jsx(Share, _objectSpread({}, ShareProps));
$[6] = Share;
$[7] = ShareProps;
$[8] = share;
$[9] = t17;
} else {
t17 = $[9];
}
let t18;
if ($[10] !== Section || $[11] !== end || $[12] !== other || $[13] !== start || $[14] !== t10 || $[15] !== t16 || $[16] !== t17) {
t18 = /*#__PURE__*/_jsxs(Section, _objectSpread(_objectSpread({
gap: t5,
align: t6,
maxWidth: t7,
padding: t8,
fullWidth: t9,
className: t10
}, other), {}, {
children: [start, t16, t17, end]
}));
$[10] = Section;
$[11] = end;
$[12] = other;
$[13] = start;
$[14] = t10;
$[15] = t16;
$[16] = t17;
$[17] = t18;
} else {
t18 = $[17];
}
return t18;
};
Element.displayName = 'onesy-Links';
export default Element;