@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
293 lines (230 loc) • 9.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.stripUrlPrefix = stripUrlPrefix;
exports.default = exports.Notification = exports.NOTIFICATION_TYPE = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));
var _lodash = _interopRequireDefault(require("lodash.isstring"));
var _Flexy = _interopRequireDefault(require("../Flexy"));
var _Message = _interopRequireDefault(require("../Message"));
var _Text = _interopRequireDefault(require("../Text"));
var _Truncate = _interopRequireDefault(require("../Truncate"));
var _Notification = _interopRequireDefault(require("./Notification.Timer"));
var _Notification2 = require("./Notification.css");
var _classnames = _interopRequireDefault(require("classnames"));
var _jsxRuntime = require("react/jsx-runtime");
var NOTIFICATION_TYPE = {
image: 'image',
link: 'link',
text: 'text'
};
exports.NOTIFICATION_TYPE = NOTIFICATION_TYPE;
var Notification = /*#__PURE__*/function (_React$PureComponent) {
(0, _inheritsLoose2.default)(Notification, _React$PureComponent);
function Notification(props) {
var _this;
_this = _React$PureComponent.call(this, props) || this;
_this._isMounted = false;
_this.handleOnExited = function () {
_this.props.onDismiss(_this.props);
};
_this.handleOnTimeout = function () {
var isDismissable = _this.props.isDismissable;
if (isDismissable) {
_this.forceDismiss();
}
};
_this.handleOnClick = function (event) {
var _this$props = _this.props,
onClick = _this$props.onClick,
isDismissable = _this$props.isDismissable;
if (event && event.stopPropagation) {
event.stopPropagation();
}
if (isDismissable) {
_this.forceDismiss();
}
onClick(event);
};
_this.state = {
isActive: props.isActive
};
return _this;
}
var _proto = Notification.prototype;
_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
var isActive = nextProps.isActive;
if (isActive === false) {
this.forceDismiss();
}
};
_proto.componentDidMount = function componentDidMount() {
this._isMounted = true;
};
_proto.componentWillUnmount = function componentWillUnmount() {
this._isMounted = false;
};
_proto.forceDismiss = function forceDismiss() {
var _this2 = this;
if (this._isMounted) {
this.setState({
isActive: false
}, function () {
_this2.props.onDismiss(_this2.props);
});
}
};
_proto.renderLinkContent = function renderLinkContent() {
var body = this.props.body;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Notification2.TextUI, {
className: "c-Notification__text",
linkStyle: true,
truncate: true,
title: body,
children: body
});
};
_proto.renderImageContent = function renderImageContent() {
var body = this.props.body;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flexy.default, {
gap: "xs",
className: "c-Notification__textWrapper",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Item, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
className: "c-Notification__textPrefix",
children: "New Image:"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Block, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Notification2.TextUI, {
className: "c-Notification__text",
linkStyle: true,
title: body,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.default, {
type: "middle",
limit: 24,
children: stripUrlPrefix(body)
})
})
})]
});
};
_proto.renderDefaultContent = function renderDefaultContent() {
var _this$props2 = this.props,
body = _this$props2.body,
truncateLimit = _this$props2.truncateLimit;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Notification2.TextUI, {
className: "c-Notification__text",
title: body,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.default, {
limit: truncateLimit,
type: "end",
children: body
})
});
};
_proto.renderContent = function renderContent() {
var type = this.props.type;
switch (type) {
case NOTIFICATION_TYPE.image:
return this.renderImageContent();
case NOTIFICATION_TYPE.link:
return this.renderLinkContent();
default:
return this.renderDefaultContent();
}
};
_proto.render = function render() {
var _this$props3 = this.props,
align = _this$props3.align,
animationSequence = _this$props3.animationSequence,
className = _this$props3.className,
from = _this$props3.from,
isDismissable = _this$props3.isDismissable,
timeout = _this$props3.timeout,
type = _this$props3.type,
dataCy = _this$props3['data-cy'],
rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["align", "animationSequence", "className", "from", "isDismissable", "timeout", "type", "data-cy"]);
var isActive = this.state.isActive;
var componentClassName = (0, _classnames.default)('c-Notification', 'c-MessageBubbleWrapper', isDismissable && 'is-dismissable', align && "is-align-" + align, type && "is-" + type, className);
var messageProps = {
body: null,
children: this.renderContent(),
from: from,
onBubbleClick: this.handleOnClick
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Notification2.NotificationUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
"data-cy": dataCy,
className: componentClassName,
in: isActive,
onExited: this.handleOnExited,
sequence: animationSequence,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default.Provider, {
theme: "notifications",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Message.default.Chat, (0, _extends2.default)({
bubbleClassName: "c-Notification__messageBubble",
className: "c-Notification__message"
}, rest, messageProps))
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Notification.default, {
isRunning: isDismissable,
onTimerEnd: this.handleOnTimeout,
timeout: timeout
})]
}));
};
return Notification;
}(_react.default.PureComponent);
exports.Notification = Notification;
Notification.Timer = _Notification.default;
function noop() {}
Notification.defaultProps = {
animationSequence: 'fade upUp',
align: 'right',
'data-cy': 'Notification',
isActive: true,
isDismissable: false,
onClick: noop,
onDismiss: noop,
timeout: 2000,
type: 'text',
truncateLimit: 60
};
Notification.propTypes = {
className: _propTypes.default.string,
/** Alignment of notification content. */
align: _propTypes.default.oneOf(['left', 'right']),
/** Animation style for this component. */
animationSequence: _propTypes.default.string,
/** Content for the component. */
body: _propTypes.default.string,
/** The name/label for the component's `body` content. */
from: _propTypes.default.string,
/** Determines the dismissal state of the component. */
isActive: _propTypes.default.bool,
/** Determines if the component can be dismissed. */
isDismissable: _propTypes.default.bool,
/** The ID of the component. Highly recommended. */
id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Callback when the MessageBubble UI is clicked. */
onClick: _propTypes.default.func,
/** Callback when component is dismissed and removed from the DOM. */
onDismiss: _propTypes.default.func,
/** Amount of time before the component auto-dismisses. Only applicable if `isDismissable`. */
timeout: _propTypes.default.number,
/** Determine the type of content for the component. `image`: (Renders as an image link), `link`: (Renders as a link), `text`: (Renders as text) */
type: _propTypes.default.oneOf(['image', 'link', 'text']),
/** Determines the character count to truncate text. */
truncateLimit: _propTypes.default.number,
/** Data attr for Cypress tests. */
'data-cy': _propTypes.default.string
};
function stripUrlPrefix(url) {
if (!(0, _lodash.default)(url)) return url;
return url.replace(/^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)/g, '');
}
var _default = Notification;
exports.default = _default;