@onesy/ui-react
Version:
UI for React
320 lines (319 loc) • 14.6 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 _compilerRuntime = require("react/compiler-runtime");
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialShareW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialShareW100"));
var _IconMaterialMoreVertW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialMoreVertW100"));
var _Section = _interopRequireDefault(require("../Section"));
var _Menu = _interopRequireDefault(require("../Menu"));
var _Share = _interopRequireDefault(require("../Share"));
var _Line = _interopRequireDefault(require("../Line"));
var _Type = _interopRequireDefault(require("../Type"));
var _Button = _interopRequireDefault(require("../Button"));
var _MenuItem = _interopRequireDefault(require("../MenuItem"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Confirm = require("../Confirm");
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
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) { (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: {
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_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8;
const $ = (0, _compilerRuntime.c)(18);
const theme = (0, _styleReact.useOnesyTheme)();
const l = theme.l;
const props = _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.onesyLinks) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Section = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Section) || _Section.default;
const Menu = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Menu) || _Menu.default;
const Share = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Share) || _Share.default;
const Type = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Type) || _Type.default;
const Button = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Button) || _Button.default;
const MenuItem = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.MenuItem) || _MenuItem.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.IconButton) || _IconButton.default;
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 = (0, _objectWithoutProperties2.default)(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 ? _IconMaterialMoreVertW.default : t3;
const IconShare = t4 === undefined ? _IconMaterialShareW.default : t4;
const confirm = (0, _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 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Links", theme) && ["onesy-Links-root"], className, classes.root]);
const t11 = 1.4;
const t12 = true;
const t13 = (profile || cover) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0,
align: "center",
fullWidth: true,
children: [cover && /*#__PURE__*/(0, _jsxRuntime.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 && /*#__PURE__*/(0, _jsxRuntime.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)}')`
}
})]
});
const t14 = (name || short_description) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 0.5,
align: "center",
fullWidth: true,
children: [name && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
version: "h1",
weight: 400,
align: "center",
fullWidth: true,
dangerouslySetInnerHTML: {
__html: (0, _utils.textToInnerHTML)(name)
}
}, NameProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Links", theme) && ["onesy-Links-name"], NameProps === null || NameProps === void 0 ? void 0 : NameProps.className, classes.name])
})), short_description && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
version: "b1",
weight: 300,
align: "center",
fullWidth: true,
dangerouslySetInnerHTML: {
__html: (0, _utils.textToInnerHTML)(short_description)
}
}, ShortDescriptionProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Links", theme) && ["onesy-Links-short-description"], ShortDescriptionProps === null || ShortDescriptionProps === void 0 ? void 0 : ShortDescriptionProps.className, classes.summary])
}))]
});
const t15 = !!(links !== null && links !== void 0 && links.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 1.4,
align: "center",
fullWidth: true,
className: classes.links,
children: links.map((item_0, index) => {
var _item_0$props;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
justify: "center",
fullWidth: true,
className: classes.linkWrapper,
children: [/*#__PURE__*/(0, _jsxRuntime.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: (0, _styleReact.classNames)([`onesy-Links-link-version-${item_0.version}`, LinkProps === null || LinkProps === void 0 ? void 0 : LinkProps.className, (_item_0$props = item_0.props) === null || _item_0$props === void 0 ? void 0 : _item_0$props.className, classes.link]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
version: "b1",
weight: 300
}, LinkTypeProps), {}, {
children: item_0.name || l("Link")
}))
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, {
menuItems: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MenuItem, {
start: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconShare, _objectSpread({
size: "small"
}, IconProps)),
startAlign: "center",
primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b3",
children: l("Share")
}),
menu: item_0.share ? /*#__PURE__*/(0, _jsxRuntime.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 === null || ItemShareProps === void 0 ? void 0 : ItemShareProps.ListItemProps)
})) : undefined,
MenuProps: {
ListProps: {
noChildrenTransform: true
}
},
size: "small",
button: true,
disabled: !item_0.share
})],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
size: "regular",
disabled: !item_0.share
}, IconButtonProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Links", theme) && ["onesy-Links-more"], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.more]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconMore, _objectSpread({
size: "large"
}, IconProps))
}))
})]
}, index);
})
});
let t16;
if ($[0] !== Line || $[1] !== classes.wrapper || $[2] !== t13 || $[3] !== t14 || $[4] !== t15) {
t16 = /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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';
var _default = exports.default = Element;