@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
295 lines (252 loc) • 11 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 _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 _Animate = _interopRequireDefault(require("../Animate"));
var _Badge = _interopRequireDefault(require("../Badge"));
var _Flexy = _interopRequireDefault(require("../Flexy"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _TypingDots = _interopRequireDefault(require("../TypingDots"));
var _List = _interopRequireDefault(require("../List"));
var _Overflow = _interopRequireDefault(require("../Overflow"));
var _Skeleton = _interopRequireDefault(require("../Skeleton"));
var _Tag = _interopRequireDefault(require("../Tag"));
var _Text = _interopRequireDefault(require("../Text"));
var _Timestamp = _interopRequireDefault(require("../Timestamp"));
var _Truncate = _interopRequireDefault(require("../Truncate"));
var _classnames = _interopRequireDefault(require("classnames"));
var _ChatList = require("./ChatList.css");
var _jsxRuntime = require("react/jsx-runtime");
var Item = /*#__PURE__*/function (_React$Component) {
(0, _inheritsLoose2.default)(Item, _React$Component);
function Item() {
return _React$Component.apply(this, arguments) || this;
}
var _proto = Item.prototype;
_proto.render = function render() {
var _this$props = this.props,
avatar = _this$props.avatar,
className = _this$props.className,
isAssigned = _this$props.isAssigned,
isFocused = _this$props.isFocused,
isTyping = _this$props.isTyping,
isViewing = _this$props.isViewing,
isWaiting = _this$props.isWaiting,
message = _this$props.message,
messageLimit = _this$props.messageLimit,
name = _this$props.name,
newMessageCount = _this$props.newMessageCount,
tags = _this$props.tags,
timestamp = _this$props.timestamp,
timestampFormatter = _this$props.timestampFormatter,
rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["avatar", "className", "isAssigned", "isFocused", "isTyping", "isViewing", "isWaiting", "message", "messageLimit", "name", "newMessageCount", "tags", "timestamp", "timestampFormatter"]);
var isLoading = (message === undefined || name === undefined) && !isTyping;
var componentClassName = (0, _classnames.default)('c-ChatListItem', isAssigned && 'is-assigned', isFocused && 'is-focused', isLoading && 'is-loading', isViewing && 'is-viewing', isWaiting && 'is-waiting', className);
var canShowViewing = isViewing && !isFocused;
var headingMarkup = !isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading.default, {
size: "h5",
className: "c-ChatListItem__title",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.default, {
children: name
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default.Text, {
width: "95%"
});
var viewingMarkup = canShowViewing ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "c-ChatListItem__viewing",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animate.default, {
sequence: "fade",
delay: 100,
duration: 200,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatList.ViewingFlagUI, {
className: "c-ChatListItem__viewingFlag",
title: "Is being viewed"
})
})
}) : null;
var newMessageCountMarkup = newMessageCount ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatList.MessageCountUI, {
className: "c-ChatListItem__messageCount",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animate.default, {
sequence: "fade scale",
delay: 100,
duration: 200,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
status: "success",
count: true,
display: "block",
children: newMessageCount
})
})
}) : null;
var waitingMarkup = isWaiting ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Item, {
className: "c-ChatListItem__waiting",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animate.default, {
sequence: "fade scale",
delay: 100,
duration: 200,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatList.PulsingTagUI, {
color: "red",
pulsing: true,
allCaps: true,
display: "block",
children: "Waiting"
})
})
}) : null;
var messageMarkup = !isLoading ? isTyping ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatList.TypingUI, {
className: "c-ChatListItem__typing",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TypingDots.default, {})
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
faint: true,
size: "13",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.default, {
type: "end",
limit: messageLimit,
ellipsis: "\u2026",
children: message
})
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default.Text, {
width: "70%"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default.Text, {
width: "80%"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default.Text, {
width: "10%"
})]
});
var tagListMarkup = tags.map(function (tag, index) {
var children = tag.children,
tagProps = (0, _objectWithoutPropertiesLoose2.default)(tag, ["children"]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default.Item, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.default, (0, _extends2.default)({}, tagProps, {
children: children
}))
}, index);
});
var tagsMarkup = tags.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Item, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatList.TagListWrapperUI, {
className: "c-ChatListItem__tags",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overflow.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
type: "inline",
size: "xs",
inlineSize: "xs",
children: tagListMarkup
})
})
})
}) : null;
var timestampMarkup = !isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Timestamp.default, {
formatter: timestampFormatter,
timestamp: timestamp,
live: true,
muted: true
}) : null;
var avatarMarkup = avatar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Item, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatList.AvatarListWrapperUI, {
className: "c-ChatListItem__avatar",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animate.default, {
sequence: "scale fade",
delay: 100,
children: avatar
})
})
}) : null;
var metaMarkup = !isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChatList.MetaUI, {
className: "c-ChatListItem__meta",
gap: "sm",
align: "bottom",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Block, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatList.TimestampUI, {
className: "c-ChatListItem__timestamp",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.default, {
children: timestampMarkup
})
})
}), tagsMarkup, avatarMarkup]
}) : null;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animate.default, {
sequence: "fade",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "c-ChatListItemWrapper",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChatList.ItemUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
className: componentClassName,
block: true,
noUnderline: true,
children: [viewingMarkup, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChatList.BlockUI, {
className: "c-ChatListItem__block",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChatList.HeadingUI, {
className: "c-ChatListItem__heading",
gap: "md",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Block, {
children: headingMarkup
}), waitingMarkup, newMessageCountMarkup]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatList.MessageUI, {
className: "c-ChatListItem__message",
children: messageMarkup
}), metaMarkup]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatList.DividerWrapperUI, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChatList.ItemDividerUI, {
className: "c-ChatListItem__divider"
})
})]
}))
})
});
};
return Item;
}(_react.default.Component);
Item.defaultProps = {
'data-cy': 'ChatListItem',
isAssigned: false,
isFocused: false,
isViewing: false,
isWaiting: false,
isTyping: false,
messageLimit: 65,
newMessageCount: 0,
tags: [],
timestampFormatter: function timestampFormatter(timestamp) {
return timestamp;
}
};
Item.propTypes = {
/** AvatarList UI to render in. */
avatar: _propTypes.default.any,
/** Custom class names to be added. */
className: _propTypes.default.string,
/** Applies the assigned styles. */
isAssigned: _propTypes.default.bool,
/** Applies the focused styles. */
isFocused: _propTypes.default.bool,
/** Renders `TypingDots` in the content area. */
isTyping: _propTypes.default.bool,
/** Applies the viewing styles. */
isViewing: _propTypes.default.bool,
/** Applies the waiting styles. */
isWaiting: _propTypes.default.bool,
/** Text to render into the content area. */
message: _propTypes.default.string,
/** Amount of characters to truncate the `message`. */
messageLimit: _propTypes.default.number,
/** Name of the chat recipient. */
name: _propTypes.default.string,
/** Number of new/unread chat messages. */
newMessageCount: _propTypes.default.number,
/** A collection of `Tag`s. */
tags: _propTypes.default.any,
/** `Timestamp` to render. */
timestamp: _propTypes.default.string,
/** A function to format the timestamp, which defaults to returning the timestamp string. */
timestampFormatter: _propTypes.default.func,
/** Data attr for Cypress tests. */
'data-cy': _propTypes.default.string
};
var _default = Item;
exports.default = _default;