@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
289 lines (232 loc) • 11.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Avatar = _interopRequireDefault(require("../Avatar"));
var _Checkbox = _interopRequireDefault(require("../Checkbox"));
var _Icon = _interopRequireDefault(require("../Icon"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _VisuallyHidden = _interopRequireDefault(require("../VisuallyHidden"));
var _classnames = _interopRequireDefault(require("classnames"));
var _id = require("../../utilities/id");
var _CheckMarkCard = require("./CheckMarkCard.css");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var uniqueID = (0, _id.createUniqueIDFactory)('CheckMarkCard');
function noop() {}
var useCustomId = function useCustomId(id) {
var customId = (0, _react.useRef)(id || uniqueID());
return customId.current;
};
var Mark = function Mark(props) {
var cardChecked = props.cardChecked,
withStatus = props.withStatus,
iconName = props.iconName,
iconSize = props.iconSize,
tooltipText = props.tooltipText;
var isVisible = cardChecked || withStatus;
var markClassnames = (0, _classnames.default)('c-CheckMarkCard__mark', isVisible && 'is-visible');
var icon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
className: iconName + "-icon mark-icon",
name: iconName,
size: iconSize
}); // ? "Render" MarkUI below even if neither withStatus or checked with opacity 0
// ? so we can animate the transition
var shouldHaveTooltip = Boolean(tooltipText) && withStatus;
return shouldHaveTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
title: tooltipText,
triggerOn: "mouseenter focus",
appendTo: document.body,
withTriggerWrapper: false,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckMarkCard.MarkUI, {
className: markClassnames,
children: icon
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckMarkCard.MarkUI, {
className: markClassnames,
children: icon
});
};
var CheckMarkCard = function CheckMarkCard(props) {
var avatar = props.avatar,
cardTooltipText = props.cardTooltipText,
checked = props.checked,
children = props.children,
className = props.className,
disabled = props.disabled,
height = props.height,
heading = props.heading,
inputRefProp = props.inputRef,
isFocused = props.isFocused,
label = props.label,
_props$iconName = props.iconName,
iconName = _props$iconName === void 0 ? 'checkmark' : _props$iconName,
_props$iconSize = props.iconSize,
iconSize = _props$iconSize === void 0 ? '24' : _props$iconSize,
maxWidth = props.maxWidth,
_props$markColor = props.markColor,
markColor = _props$markColor === void 0 ? 'blue' : _props$markColor,
tooltipText = props.tooltipText,
onBlur = props.onBlur,
onChange = props.onChange,
onFocus = props.onFocus,
subtitle = props.subtitle,
status = props.status,
_props$showHeading = props.showHeading,
showHeading = _props$showHeading === void 0 ? true : _props$showHeading,
valueProp = props.value,
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["avatar", "cardTooltipText", "checked", "children", "className", "disabled", "height", "heading", "inputRef", "isFocused", "label", "iconName", "iconSize", "maxWidth", "markColor", "tooltipText", "onBlur", "onChange", "onFocus", "subtitle", "status", "showHeading", "value"]);
var checkMarkCardRef = (0, _react.useRef)();
var inputRef = (0, _react.useRef)();
var _useState = (0, _react.useState)(checked),
cardChecked = _useState[0],
setCardChecked = _useState[1];
var id = useCustomId(rest.id);
var shouldShowStatus = Boolean(status);
var handleOnChange = function handleOnChange(value, checked) {
setCardChecked(checked);
onChange && onChange(value, checked);
};
var handleOnBlur = function handleOnBlur(event) {
checkMarkCardRef.current.classList.remove('is-focused');
onBlur && onBlur(event);
};
var handleOnFocus = function handleOnFocus(event) {
checkMarkCardRef.current.classList.add('is-focused');
onFocus && onFocus(event);
};
var setInputNodeRef = function setInputNodeRef(node) {
inputRef.current = node;
inputRefProp && inputRefProp(node);
};
(0, _react.useEffect)(function () {
setCardChecked(checked);
}, [checked]);
(0, _react.useEffect)(function () {
if (isFocused) {
checkMarkCardRef.current.classList.add('is-focused');
inputRef.current.focus();
}
}, [isFocused, checkMarkCardRef, inputRef]);
var checkmarkClassnames = (0, _classnames.default)('c-CheckMarkCard', className, cardChecked && !shouldShowStatus && 'is-checked', disabled && 'is-disabled', shouldShowStatus && 'with-status', shouldShowStatus && Boolean(status) && "is-" + status, shouldShowStatus && Boolean(markColor) && "is-" + markColor);
var markProps = {
tooltipText: tooltipText,
iconName: iconName,
iconSize: iconSize,
withStatus: shouldShowStatus
};
var shouldDisplayHeading = showHeading && (heading || label); // let the Avatar component handle nullified value
var shouldShowAvatar = props.hasOwnProperty('avatar');
var component = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CheckMarkCard.CheckMarkCardUI, (0, _extends2.default)({}, rest, {
className: checkmarkClassnames,
htmlFor: id,
maxWidth: maxWidth,
height: height,
ref: checkMarkCardRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CheckMarkCard.CheckMarkCardContentUI, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
cardChecked: cardChecked
}, markProps)), shouldShowAvatar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckMarkCard.AvatarWrapperUI, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
size: "xl",
image: avatar,
name: label,
"aria-hidden": true
})
}), shouldDisplayHeading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckMarkCard.HeadingUI, {
children: heading || label
}), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckMarkCard.SubtitleUI, {
children: subtitle
}), children]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VisuallyHidden.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
checked: cardChecked,
disabled: disabled || shouldShowStatus,
id: id,
inputRef: setInputNodeRef,
onBlur: handleOnBlur,
onFocus: handleOnFocus,
onChange: handleOnChange,
onEnter: handleOnChange,
value: valueProp
})
})]
}));
if (cardTooltipText && !shouldShowStatus) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
title: cardTooltipText,
triggerOn: "mouseenter focus",
appendTo: document.body,
withTriggerWrapper: false,
children: component
});
}
return component;
};
CheckMarkCard.defaultProps = {
checked: false,
'data-cy': 'CheckMarkCard',
inputRef: noop,
isFocused: false,
onBlur: noop,
onChange: noop,
onFocus: noop
};
CheckMarkCard.propTypes = {
/** Image url that will be used within the Avatar component. If the prop is declared the Avatar will be shown no matter the value */
avatar: _propTypes.default.string,
/** The card tooltip text that will appear on hover/focus */
cardTooltipText: _propTypes.default.string,
/** Custom class names to be added to the component. */
className: _propTypes.default.string,
/** Determines if the card is checked. */
checked: _propTypes.default.bool,
/** Data attr for Cypress tests. */
'data-cy': _propTypes.default.string,
/** Determines if the card is disabled. */
disabled: _propTypes.default.bool,
/** Label that will be attached to the checkbox element. It will also be used as a heading bellow the avatar */
label: _propTypes.default.string,
/** Text to overwrite the label inside the Heading element */
heading: _propTypes.default.string,
/** Set the height of the Card. */
height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.func]),
/** Change the mark icon */
iconName: _propTypes.default.string,
/** Change the mark icon size */
iconSize: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** ID for the input. */
id: _propTypes.default.string,
/** Callback to obtain the html `input` node. */
inputRef: _propTypes.default.func,
/** Whether the card should be focused */
isFocused: _propTypes.default.bool,
/** Change the mark background color */
markColor: _propTypes.default.oneOf(['blue', 'lavender']),
/** Set the max width of the Card. */
maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.func]),
/** Callback when the input is blurred. */
onBlur: _propTypes.default.func,
/** Callback when the input value is changed. */
onChange: _propTypes.default.func,
/** Callback when the input is focused. */
onFocus: _propTypes.default.func,
/* Flag to display or not the label as a heading bellow the avatar */
showHeading: _propTypes.default.bool,
/** Give the card special status styles, it also disables the input */
status: _propTypes.default.string,
/** Display a light text as the last children */
subtitle: _propTypes.default.string,
/** The mark tooltip text that will appear on hover/focus */
tooltipText: _propTypes.default.string,
/** The value of the input. */
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool])
};
CheckMarkCard.Grid = _CheckMarkCard.CheckMarkCardGridUI;
var _default = CheckMarkCard;
exports.default = _default;