@procore/core-react
Version:
React library of Procore Design Guidelines
314 lines (309 loc) • 14.4 kB
JavaScript
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var _excluded = ["children", "overlay", "onOverlayClick"],
_excluded2 = ["children"],
_excluded3 = ["children"],
_excluded4 = ["children"],
_excluded5 = ["orientation", "children"],
_excluded6 = ["orientation", "children"],
_excluded7 = ["disabled", "checked", "defaultChecked", "orientation", "style", "className"],
_excluded8 = ["disabled", "checked", "defaultChecked", "orientation", "style", "className", "groupState"],
_excluded9 = ["role"];
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; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
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 { useCheckbox, useCheckboxGroupItem } from '@react-aria/checkbox';
import { useFocusRing } from '@react-aria/focus';
import { mergeProps, useId } from '@react-aria/utils';
import { VisuallyHidden } from '@react-aria/visually-hidden';
import React from 'react';
import { useToggleState } from 'react-stately';
import { CheckboxGroupContext } from '../CheckboxGroup/CheckboxGroup';
import { StyledActions } from '../Content/Content.styles';
import { StyledFooter, StyledHeroMedia, StyledHeroOverlay, StyledHeroText, StyledInteractableTile, StyledLinkTile, StyledSelectableTile, StyledTileContent } from '../Tile/Tile.styles';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { mergeRefs } from '../_utils/mergeRefs';
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));
});
// Shared render component
var CheckboxTileRender = function CheckboxTileRender(_ref7) {
var inputProps = _ref7.inputProps,
focusProps = _ref7.focusProps,
inputRef = _ref7.inputRef,
forwardedRef = _ref7.forwardedRef,
isDisabled = _ref7.isDisabled,
isSelected = _ref7.isSelected,
isFocusVisible = _ref7.isFocusVisible,
orientation = _ref7.orientation,
className = _ref7.className,
style = _ref7.style,
role = _ref7.role,
ariaLabelledby = _ref7['aria-labelledby'],
children = _ref7.children;
var fallbackId = useId();
return /*#__PURE__*/React.createElement(StyledSelectableTile, {
$disabled: isDisabled,
$selected: isSelected,
$focused: isFocusVisible,
$orientation: orientation !== null && orientation !== void 0 ? orientation : 'portrait',
$layoutless: true,
className: className,
style: style
}, /*#__PURE__*/React.createElement("div", {
role: role !== null && role !== void 0 ? role : 'checkbox',
"aria-labelledby": ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : fallbackId,
"aria-checked": isSelected,
"aria-disabled": isDisabled,
tabIndex: isDisabled ? -1 : 0,
onClick: function onClick() {
if (!isDisabled) {
var _inputRef$current;
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
}
},
onKeyDown: function onKeyDown(e) {
if (e.code === 'Space' || e.code === 'Enter') {
e.preventDefault();
if (!isDisabled) {
var _inputRef$current2;
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.click();
}
}
}
}, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", _extends({}, mergeProps(inputProps, focusProps), {
ref: mergeRefs(inputRef, forwardedRef),
tabIndex: -1
}))), /*#__PURE__*/React.createElement(TileContext.Provider, {
value: {
orientation: orientation !== null && orientation !== void 0 ? orientation : 'portrait'
}
}, children)));
};
// Single checkbox implementation
var SingleCheckboxTile = /*#__PURE__*/React.forwardRef(function SingleCheckboxTile(_ref8, ref) {
var _ref8$disabled = _ref8.disabled,
disabled = _ref8$disabled === void 0 ? false : _ref8$disabled,
checked = _ref8.checked,
defaultChecked = _ref8.defaultChecked,
orientation = _ref8.orientation,
style = _ref8.style,
className = _ref8.className,
props_ = _objectWithoutProperties(_ref8, _excluded7);
var props = _objectSpread(_objectSpread({}, props_), {}, {
isDisabled: disabled,
isSelected: checked,
defaultSelected: defaultChecked
});
var inputRef = React.useRef(null);
var state = useToggleState(props);
var _useCheckbox = useCheckbox(props, state, inputRef),
inputProps = _useCheckbox.inputProps;
var _useFocusRing = useFocusRing(),
focusProps = _useFocusRing.focusProps,
isFocusVisible = _useFocusRing.isFocusVisible;
return /*#__PURE__*/React.createElement(CheckboxTileRender, {
inputProps: inputProps,
focusProps: focusProps,
inputRef: inputRef,
forwardedRef: ref,
isDisabled: disabled,
isSelected: state.isSelected,
isFocusVisible: isFocusVisible,
orientation: orientation,
className: className,
style: style,
role: props.role,
"aria-labelledby": props['aria-labelledby']
}, props.children);
});
// Group checkbox implementation
var GroupCheckboxTile = /*#__PURE__*/React.forwardRef(function GroupCheckboxTile(_ref9, ref) {
var _ref9$disabled = _ref9.disabled,
disabled = _ref9$disabled === void 0 ? false : _ref9$disabled,
checked = _ref9.checked,
defaultChecked = _ref9.defaultChecked,
orientation = _ref9.orientation,
style = _ref9.style,
className = _ref9.className,
groupState = _ref9.groupState,
props_ = _objectWithoutProperties(_ref9, _excluded8);
var props = _objectSpread(_objectSpread({}, props_), {}, {
isDisabled: disabled,
isSelected: checked,
defaultSelected: defaultChecked
});
var inputRef = React.useRef(null);
var _useCheckboxGroupItem = useCheckboxGroupItem(props, groupState, inputRef),
inputProps = _useCheckboxGroupItem.inputProps;
var _useFocusRing2 = useFocusRing(),
focusProps = _useFocusRing2.focusProps,
isFocusVisible = _useFocusRing2.isFocusVisible;
var isDisabled = groupState.isDisabled || disabled;
var isSelected = groupState.isSelected(props.value);
return /*#__PURE__*/React.createElement(CheckboxTileRender, {
inputProps: inputProps,
focusProps: focusProps,
inputRef: inputRef,
forwardedRef: ref,
isDisabled: isDisabled,
isSelected: isSelected,
isFocusVisible: isFocusVisible,
orientation: orientation,
className: className,
style: style,
role: props.role,
"aria-labelledby": props['aria-labelledby']
}, props.children);
});
// Wrapper that chooses the right implementation
var CheckboxTile_ = /*#__PURE__*/React.forwardRef(function CheckboxTile(props, ref) {
var groupState = React.useContext(CheckboxGroupContext);
if (groupState) {
return /*#__PURE__*/React.createElement(GroupCheckboxTile, _extends({}, props, {
groupState: groupState,
ref: ref
}));
}
return /*#__PURE__*/React.createElement(SingleCheckboxTile, _extends({}, props, {
ref: ref
}));
});
function TileInner(_ref0, ref) {
var _ref0$role = _ref0.role,
role = _ref0$role === void 0 ? 'none' : _ref0$role,
props = _objectWithoutProperties(_ref0, _excluded9);
switch (role) {
case 'none':
return /*#__PURE__*/React.createElement(InteractableTile, _extends({
ref: ref
}, props));
case 'link':
return /*#__PURE__*/React.createElement(LinkTile, _extends({
ref: ref
}, props));
case 'checkbox':
return /*#__PURE__*/React.createElement(CheckboxTile_, _extends({
ref: ref
}, props));
default:
return null;
}
}
var Tile_ = /*#__PURE__*/React.forwardRef(TileInner);
/**
* <NextTile role={checkbox}/> can be used as single checkbox as well as in group.
*
* Single
* ```
* <NextTile role={checkbox} value="ThomasAnderson" onChange=((value) => console.log(value) />
* <NextTile role={checkbox} value="WhiteRabbit" onChange=((value) => console.log(value) />
* ```
*
* Group
* ```
* <CheckboxGroup label="Matrix" onChange=((value) => console.log(value)>
* <NextTile role={checkbox} value="ThomasAnderson"/>
* <NextTile role={checkbox} value="WhiteRabbit"/>
* </CheckboxGroup>
* ```
*
* @since 11.6.0
*/
export var NextTile = addSubcomponents({
Actions: Actions,
Content: Content,
Footer: Footer,
HeroText: HeroText,
HeroMedia: HeroMedia
}, Tile_);
//# sourceMappingURL=NextTile.js.map