@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
232 lines (204 loc) • 8.8 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = ConvoList;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _color = require("../../../../styles/utilities/color");
var _convoData = require("./convoData");
var _convoList = require("./convoList.utils");
var _ConvoList = require("./ConvoList.constants");
var _AvatarRow = _interopRequireDefault(require("../../../AvatarRow"));
var _Badge = _interopRequireDefault(require("../../../Badge"));
var _Icon = _interopRequireDefault(require("../../../Icon"));
var _Pagination = _interopRequireDefault(require("../../../Pagination"));
var _Truncate = _interopRequireDefault(require("../../../Truncate"));
var _ = _interopRequireDefault(require("../../"));
var _ConvoList2 = require("./ConvoList.customCells");
var _ConvoList3 = require("./ConvoList.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; }
function ConvoList() {
var _useState = (0, _react.useState)(_convoData.page1.pager),
pager = _useState[0],
setPager = _useState[1];
var _useState2 = (0, _react.useState)(_convoData.page1.results),
results = _useState2[0],
setResults = _useState2[1];
var _useState3 = (0, _react.useState)([{
size: 'xs',
outerBorderColor: (0, _color.getColor)('pink.900'),
borderColor: 'white',
showStatusBorderColor: true,
name: 'Ringo Starr',
tooltipProps: {
appendTo: function appendTo() {
return document.body;
},
title: 'Ringo Starr'
}
}]),
avatars = _useState3[0],
setAvatars = _useState3[1];
var _useState4 = (0, _react.useState)(false),
isLoading = _useState4[0],
setIsLoading = _useState4[1];
var tableWidth = {
min: '700px'
};
var containerWidth = '100%';
var columns = [{
title: 'Customer',
columnKey: ['customer.fullName', 'customer.email'],
width: '150px',
renderCell: function renderCell(_ref) {
var customer_fullName = _ref.customer_fullName,
customer_email = _ref.customer_email;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.default, {
children: customer_fullName || customer_email
});
}
}, {
title: '',
columnKey: 'attachmentCount',
width: '20px',
renderCell: function renderCell(_ref2) {
var attachmentCount = _ref2.attachmentCount;
return attachmentCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
name: "attachment",
shade: "faint"
}) : '';
}
}, {
title: 'Conversation',
columnKey: ['subject', 'preview', 'tags'],
clearCellPadding: true,
renderCell: function renderCell(cellData) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConvoList2.ConversationCell, (0, _extends2.default)({}, cellData));
}
}, {
title: '',
columnKey: 'threadCount',
width: '42px',
renderCell: function renderCell(_ref3) {
var threadCount = _ref3.threadCount;
return threadCount > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
isSquare: true,
children: threadCount
}) : null;
}
}, {
title: 'Number',
columnKey: 'id',
width: '126px'
}, {
title: 'Last Updated',
columnKey: ['closedAt', 'modifiedAt'],
width: '118px',
renderCell: function renderCell(_ref4) {
var closedAt = _ref4.closedAt,
modifiedAt = _ref4.modifiedAt;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: closedAt ? (0, _convoList.formatDate)(closedAt) : (0, _convoList.formatDate)(modifiedAt)
});
}
}];
var numberofavatars = avatars.length;
(0, _react.useEffect)(function () {
var id = setTimeout(function () {
if (numberofavatars < 5) {
setAvatars([].concat(avatars, [{
size: 'xs',
outerBorderColor: 'transparent',
borderColor: 'white',
showStatusBorderColor: true,
name: "George Harrison " + Math.random().toFixed(2),
tooltipProps: {
appendTo: function appendTo() {
return document.body;
},
title: 'George Harrison'
}
}]));
}
}, 1000);
return function () {
clearTimeout(id);
};
}, [numberofavatars]);
function handlePageChange(nextPage) {
setIsLoading(true);
setTimeout(function () {
setPager(nextPage === 1 ? _convoData.page1.pager : _convoData.page2.pager);
setResults(nextPage === 1 ? _convoData.page1.results : _convoData.page2.results);
setIsLoading(false);
}, 500);
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ConvoList3.GridUI, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ConvoList3.AsideUI, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ConvoList3.ConvoListUI, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
columns: columns,
containerWidth: containerWidth,
data: results,
headerContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConvoList3.H1UI, {
children: "Such a cool table"
}),
isLoading: isLoading,
tableDescription: "Example table mimicking the ConvoList",
tableWidth: tableWidth,
rowClassName: function rowClassName(row) {
var _ref5;
return _ref5 = {}, _ref5[_ConvoList.CONVO_STATUS_CLASSNAMES[row.status]] = true, _ref5.replying = row.id === 281796231, _ref5.viewing = row.id === 281796229, _ref5;
},
onRowClick: function onRowClick(e, row) {
var url = "/conversation/" + row.id + "/" + row.number;
console.groupCollapsed('Row Click');
console.log('🚀 ~ file: ConvoList.js ~ line 181 ~ row', row);
console.log('🚀 ~ file: ConvoList.js ~ line 143 ~ url', url);
console.warn('We need: this.options.folder.get("id") to complete the url');
console.groupEnd();
},
rowWrapper: function rowWrapper(children, row) {
if (row.id === 281796231 || row.id === 281796229) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConvoList3.PopoverUI, {
triggerOn: "mouseenter",
appendTo: function appendTo() {
return document.body;
},
withTriggerWrapper: false,
placement: "left",
renderContent: function renderContent() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AvatarRow.default, {
size: "xs",
gap: 10,
avatars: avatars,
throttleOnResize: false,
minAvatarsShown: avatars.length <= 4 ? avatars.length : 4
});
},
children: /*#__PURE__*/_react.default.cloneElement(children, {
title: "Someone is " + (row.id === 281796231 ? 'replying' : 'viewing')
})
});
}
return children;
},
onSelectRow: function onSelectRow(selection) {
console.log('🚀 ~ file: ConvoList.js ~ line 136 ~ selection', selection);
},
skin: _ConvoList.skin,
withTallRows: true,
withSelectableRows: true,
withFocusableRows: true
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pagination.default, {
subject: "active conversations",
activePage: pager.current,
showNavigation: true,
rangePerPage: pager.count,
totalItems: pager.custom.activeCount,
onChange: handlePageChange
})]
})]
});
}