@zendesk/react-measure-timing-hooks
Version:
react hooks for measuring time to interactive and time to render of components
108 lines • 5.98 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TicketView = exports.MessageSpan = exports.StyledSpan = void 0;
/* eslint-disable import/no-extraneous-dependencies */
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const react_accordions_1 = require("@zendeskgarden/react-accordions");
const react_avatars_1 = require("@zendeskgarden/react-avatars");
const react_loaders_1 = require("@zendeskgarden/react-loaders");
const react_notifications_1 = require("@zendeskgarden/react-notifications");
const react_theming_1 = require("@zendeskgarden/react-theming");
const react_typography_1 = require("@zendeskgarden/react-typography");
const user_solo_stroke_svg_1 = require("@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg");
const element_1 = require("./element");
const mockTickets_1 = require("./mockTickets");
const simulateLongTasks_1 = require("./simulateLongTasks");
const traceManager_1 = require("./traceManager");
exports.StyledSpan = (0, styled_components_1.default)(react_typography_1.Span).attrs({ isBold: true, hue: 'blue' }) `
margin-left: ${react_theming_1.DEFAULT_THEME.space.base * 2}px;
`;
exports.MessageSpan = (0, styled_components_1.default)(react_typography_1.Span).attrs({}) `
display: block;
`;
const TimelineContentWide = (0, styled_components_1.default)(react_accordions_1.Timeline.Content) `
flex: 5;
`;
const TicketView = ({ ticketId, cached = false, onLoaded, }) => {
(0, traceManager_1.useBeacon)({
name: 'TicketView',
relatedTo: { ticketId },
renderedOutput: cached ? 'content' : 'loading',
isIdle: cached,
});
(0, react_1.useEffect)(() => (0, simulateLongTasks_1.triggerLongTasks)({
minTime: 50,
maxTime: 100,
totalClusterDuration: 300,
}), [ticketId, cached]);
const ticket = mockTickets_1.mockTickets.find((ticket) => ticket.id === ticketId);
(0, react_1.useEffect)(() => {
const timer = setTimeout(() => {
onLoaded?.();
// eslint-disable-next-line no-magic-numbers
}, 1_500);
return () => void clearTimeout(timer);
}, [ticketId]);
if (!ticket) {
return (react_1.default.createElement(react_notifications_1.Well, null,
react_1.default.createElement(react_typography_1.Paragraph, null, "No ticket found")));
}
return (react_1.default.createElement(react_notifications_1.Well, null,
react_1.default.createElement(react_typography_1.XXL, null,
"Ticket: ",
ticket.subject),
!cached ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_loaders_1.Skeleton, null),
react_1.default.createElement(react_loaders_1.Skeleton, null),
react_1.default.createElement(react_loaders_1.Skeleton, null),
react_1.default.createElement(react_loaders_1.Skeleton, null),
react_1.default.createElement(react_loaders_1.Skeleton, null))) : (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_accordions_1.Timeline, null,
react_1.default.createElement(element_1.TimingComponent, { name: `TicketView/${ticketId}` }),
ticket.messages.map((msg, index) => (react_1.default.createElement(react_accordions_1.Timeline.Item, { key: index },
react_1.default.createElement(react_accordions_1.Timeline.OppositeContent, null,
react_1.default.createElement(react_typography_1.Span, { hue: "grey" }, msg.humanReadableTimestamp)),
react_1.default.createElement(TimelineContentWide, null,
react_1.default.createElement(react_avatars_1.Avatar, { size: "extrasmall", backgroundColor: react_theming_1.PALETTE.grey[600] }, msg.authorType === 'customer' ? (react_1.default.createElement("img", { alt: "image avatar", src: "https://garden.zendesk.com/components/avatar/user.png" })) : (react_1.default.createElement(user_solo_stroke_svg_1.ReactComponent, { role: "img", "aria-label": "extra small user avatar" }))),
react_1.default.createElement(exports.StyledSpan, null, msg.author),
react_1.default.createElement(exports.MessageSpan, null, msg.message))))))))));
};
exports.TicketView = TicketView;
//# sourceMappingURL=TicketView.js.map