@procore/core-react
Version:
React library of Procore Design Guidelines
170 lines • 7.78 kB
JavaScript
var _excluded = ["children", "overlay", "onOverlayClick"],
_excluded2 = ["children"],
_excluded3 = ["children"],
_excluded4 = ["children"],
_excluded5 = ["orientation", "children"],
_excluded6 = ["orientation", "children"],
_excluded7 = ["orientation", "selected", "onClick", "onKeyDown", "disabled", "children"],
_excluded8 = ["variant", "orientation"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import React from 'react';
import { StyledActions } from '../Content/Content.styles';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { mergeRefs } from '../_utils/mergeRefs';
import { StyledFooter, StyledHeroMedia, StyledHeroOverlay, StyledHeroText, StyledInteractableTile, StyledLinkTile, StyledSelectableTile, StyledTileContent } from './Tile.styles';
var heroTextGridTemplateColumns = 'auto 1fr';
var TileContext = /*#__PURE__*/React.createContext({
orientation: 'portrait'
});
var HeroMedia = /*#__PURE__*/React.forwardRef(function HeroMedia(_ref, ref) {
var children = _ref.children,
_ref$overlay = _ref.overlay,
overlay = _ref$overlay === void 0 ? false : _ref$overlay,
onOverlayClick = _ref.onOverlayClick,
props = _objectWithoutProperties(_ref, _excluded);
var _React$useContext = React.useContext(TileContext),
orientation = _React$useContext.orientation;
var heroRef = React.useRef(null);
React.useLayoutEffect(function () {
if (orientation === 'landscape') {
var _heroRef$current, _heroRef$current$pare;
(_heroRef$current = heroRef.current) === null || _heroRef$current === void 0 ? void 0 : (_heroRef$current$pare = _heroRef$current.parentElement) === null || _heroRef$current$pare === void 0 ? void 0 : _heroRef$current$pare.style.removeProperty('--core-tile-grid-template-columns');
}
}, [orientation]);
return /*#__PURE__*/React.createElement(StyledHeroMedia, _extends({
ref: mergeRefs(heroRef, ref),
$orientation: orientation
}, props), overlay && /*#__PURE__*/React.createElement(StyledHeroOverlay, {
onClick: onOverlayClick
}), children);
});
var HeroText = /*#__PURE__*/React.forwardRef(function HeroText(_ref2, ref) {
var children = _ref2.children,
props = _objectWithoutProperties(_ref2, _excluded2);
var _React$useContext2 = React.useContext(TileContext),
orientation = _React$useContext2.orientation;
var heroRef = React.useRef(null);
React.useLayoutEffect(function () {
if (orientation === 'landscape') {
var _heroRef$current2, _heroRef$current2$par;
(_heroRef$current2 = heroRef.current) === null || _heroRef$current2 === void 0 ? void 0 : (_heroRef$current2$par = _heroRef$current2.parentElement) === null || _heroRef$current2$par === void 0 ? void 0 : _heroRef$current2$par.style.setProperty('--core-tile-grid-template-columns', heroTextGridTemplateColumns);
}
}, [orientation]);
return /*#__PURE__*/React.createElement(StyledHeroText, _extends({
ref: mergeRefs(heroRef, ref),
$orientation: orientation
}, props), children);
});
var Content = /*#__PURE__*/React.forwardRef(function Content(props, ref) {
return /*#__PURE__*/React.createElement(StyledTileContent, _extends({
ref: ref
}, props));
});
var Footer = /*#__PURE__*/React.forwardRef(function Footer(_ref3, ref) {
var children = _ref3.children,
props = _objectWithoutProperties(_ref3, _excluded3);
return /*#__PURE__*/React.createElement(StyledFooter, _extends({
ref: ref
}, props), children);
});
var Actions = /*#__PURE__*/React.forwardRef(function Actions(_ref4, ref) {
var children = _ref4.children,
props = _objectWithoutProperties(_ref4, _excluded4);
return /*#__PURE__*/React.createElement(StyledActions, _extends({
ref: ref
}, props), children);
});
export var InteractableTile = /*#__PURE__*/React.forwardRef(function InteractableTile(_ref5, ref) {
var orientation = _ref5.orientation,
children = _ref5.children,
props = _objectWithoutProperties(_ref5, _excluded5);
return /*#__PURE__*/React.createElement(StyledInteractableTile, _extends({
ref: ref,
$orientation: orientation
}, props), /*#__PURE__*/React.createElement(TileContext.Provider, {
value: {
orientation: orientation
}
}, children));
});
export var LinkTile = /*#__PURE__*/React.forwardRef(function LinkTile(_ref6, ref) {
var orientation = _ref6.orientation,
children = _ref6.children,
props = _objectWithoutProperties(_ref6, _excluded6);
return /*#__PURE__*/React.createElement(StyledLinkTile, _extends({
ref: ref,
$orientation: orientation
}, props), /*#__PURE__*/React.createElement(TileContext.Provider, {
value: {
orientation: orientation
}
}, children));
});
export var SelectableTile = /*#__PURE__*/React.forwardRef(function SelectableTile(_ref7, ref) {
var orientation = _ref7.orientation,
_ref7$selected = _ref7.selected,
selected = _ref7$selected === void 0 ? false : _ref7$selected,
_onClick = _ref7.onClick,
_onKeyDown = _ref7.onKeyDown,
_ref7$disabled = _ref7.disabled,
disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
children = _ref7.children,
props = _objectWithoutProperties(_ref7, _excluded7);
return /*#__PURE__*/React.createElement(StyledSelectableTile, _extends({
ref: ref,
$disabled: disabled,
$orientation: orientation,
$selected: selected,
tabIndex: !disabled ? 0 : undefined,
onClick: function onClick() {
if (!disabled) {
_onClick === null || _onClick === void 0 ? void 0 : _onClick();
}
},
onKeyDown: function onKeyDown(e) {
var code = e.code;
if (code === 'Enter' || code === 'Space') {
_onClick === null || _onClick === void 0 ? void 0 : _onClick();
}
_onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
}
}, props), /*#__PURE__*/React.createElement(TileContext.Provider, {
value: {
orientation: orientation
}
}, children));
});
var Tile_ = /*#__PURE__*/React.forwardRef(function Tile(_ref8, ref) {
var _ref8$variant = _ref8.variant,
variant = _ref8$variant === void 0 ? 'interactive' : _ref8$variant,
_ref8$orientation = _ref8.orientation,
orientation = _ref8$orientation === void 0 ? 'portrait' : _ref8$orientation,
props = _objectWithoutProperties(_ref8, _excluded8);
switch (variant) {
case 'interactive':
return /*#__PURE__*/React.createElement(InteractableTile, _extends({
ref: ref,
orientation: orientation
}, props));
case 'selectable':
return /*#__PURE__*/React.createElement(SelectableTile, _extends({
ref: ref,
orientation: orientation
}, props));
case 'link':
return /*#__PURE__*/React.createElement(LinkTile, _extends({
ref: ref,
orientation: orientation
}, props));
}
});
export var Tile = addSubcomponents({
Actions: Actions,
Content: Content,
Footer: Footer,
HeroText: HeroText,
HeroMedia: HeroMedia
}, Tile_);
//# sourceMappingURL=Tile.js.map