@onesy/ui-react
Version:
UI for React
161 lines (160 loc) • 13.4 kB
JavaScript
"use strict";
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("@onesy/utils");
const style_react_1 = require("@onesy/style-react");
const IconMaterialShareW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialShareW100"));
const IconMaterialMoreVertW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialMoreVertW100"));
const Section_1 = __importDefault(require("../Section"));
const Menu_1 = __importDefault(require("../Menu"));
const Share_1 = __importDefault(require("../Share"));
const Line_1 = __importDefault(require("../Line"));
const Type_1 = __importDefault(require("../Type"));
const Button_1 = __importDefault(require("../Button"));
const MenuItem_1 = __importDefault(require("../MenuItem"));
const IconButton_1 = __importDefault(require("../IconButton"));
const Confirm_1 = require("../Confirm");
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.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 = react_1.default.forwardRef((props_, ref) => {
const theme = (0, style_react_1.useOnesyTheme)();
const l = theme.l;
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (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.onesyLinks) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [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 Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_1.default; }, [theme]);
const Menu = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Menu) || Menu_1.default; }, [theme]);
const Share = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Share) || Share_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 Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
const MenuItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.MenuItem) || MenuItem_1.default; }, [theme]);
const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [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 = IconMaterialMoreVertW100_1.default, IconShare = IconMaterialShareW100_1.default, ShareProps, ItemShareProps, IconButtonProps, IconProps, NameProps, ShortDescriptionProps, LinkProps, LinkTypeProps, className } = props, other = __rest(props, ["name", "short_description", "cover", "profile", "links", "share", "start", "end", "sensitiveText", "sensitiveDescription", "IconMore", "IconShare", "ShareProps", "ItemShareProps", "IconButtonProps", "IconProps", "NameProps", "ShortDescriptionProps", "LinkProps", "LinkTypeProps", "className"]);
const confirm = (0, Confirm_1.useConfirm)();
const onOpenLink = react_1.default.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 ((0, jsx_runtime_1.jsxs)(Section, Object.assign({ ref: ref, gap: 2, align: 'center', maxWidth: false, padding: false, fullWidth: true, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Links', theme) && [
'onesy-Links-root'
],
className,
classes.root
]) }, other, { children: [start, (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1.4, fullWidth: true, className: classes.wrapper }, { children: [(profile || cover) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, align: 'center', fullWidth: true }, { children: [cover && ((0, jsx_runtime_1.jsx)(Line, { fullWidth: true, className: classes.cover, style: {
backgroundImage: `url('${(cover === null || cover === void 0 ? void 0 : cover.url) || (cover === null || cover === void 0 ? void 0 : cover.urlSmall)}')`
} })), profile && ((0, jsx_runtime_1.jsx)(Line, { fullWidth: true, className: classes.profile, style: {
marginTop: cover ? -71 : 0,
backgroundImage: `url('${(profile === null || profile === void 0 ? void 0 : profile.urlSmall) || (profile === null || profile === void 0 ? void 0 : profile.url)}')`
} }))] }))), (name || short_description) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, align: 'center', fullWidth: true }, { children: [name && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h1', weight: 400, align: 'center', fullWidth: true, dangerouslySetInnerHTML: {
__html: (0, utils_1.textToInnerHTML)(name)
} }, NameProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Links', theme) && [
'onesy-Links-name'
],
NameProps === null || NameProps === void 0 ? void 0 : NameProps.className,
classes.name
]) }))), short_description && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b1', weight: 300, align: 'center', fullWidth: true, dangerouslySetInnerHTML: {
__html: (0, utils_1.textToInnerHTML)(short_description)
} }, ShortDescriptionProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Links', theme) && [
'onesy-Links-short-description'
],
ShortDescriptionProps === null || ShortDescriptionProps === void 0 ? void 0 : ShortDescriptionProps.className,
classes.summary
]) })))] }))), !!(links === null || links === void 0 ? void 0 : links.length) && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1.4, align: 'center', fullWidth: true, className: classes.links }, { children: links.map((item, index) => {
var _a;
return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center', fullWidth: true, className: classes.linkWrapper }, { children: [(0, jsx_runtime_1.jsx)(Button, Object.assign({ 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: (0, style_react_1.classNames)([
`onesy-Links-link-version-${item.version}`,
LinkProps === null || LinkProps === void 0 ? void 0 : LinkProps.className,
(_a = item.props) === null || _a === void 0 ? void 0 : _a.className,
classes.link
]) }, { children: (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b1', weight: 300 }, LinkTypeProps, { children: item.name || l('Link') })) })), (0, jsx_runtime_1.jsx)(Menu, Object.assign({ menuItems: [
(0, jsx_runtime_1.jsx)(MenuItem, { start: ((0, jsx_runtime_1.jsx)(IconShare, Object.assign({ size: 'small' }, IconProps))), startAlign: 'center', primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, { children: l('Share') }))), menu: item.share ? ((0, jsx_runtime_1.jsx)(Share, Object.assign({ version: 'menu-items', name: item.name, url: item.url, exclude: ['print'] }, ItemShareProps, { ListItemProps: Object.assign({ size: 'small', noBackground: true }, ItemShareProps === null || ItemShareProps === void 0 ? void 0 : ItemShareProps.ListItemProps) }))) : undefined, MenuProps: {
ListProps: {
noChildrenTransform: true
}
}, size: 'small', button: true, disabled: !item.share })
] }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'regular', disabled: !item.share }, IconButtonProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Links', theme) && [
'onesy-Links-more'
],
IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className,
classes.more
]) }, { children: (0, jsx_runtime_1.jsx)(IconMore, Object.assign({ size: 'large' }, IconProps)) })) }))] }), index));
}) })))] })), share && ((0, jsx_runtime_1.jsx)(Share, Object.assign({}, ShareProps))), end] })));
});
Element.displayName = 'onesy-Links';
exports.default = Element;