react-help-desk-tailwindcss-ts
Version:
Help desk component for React with Tailwindcss in TypeScript
156 lines (155 loc) • 5 kB
JavaScript
import { jsx as o, jsxs as d } from "react/jsx-runtime";
import { Children as y, isValidElement as _, createContext as N, useState as m, useContext as S } from "react";
function w(t) {
return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
}
var v = { exports: {} };
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
(function(t) {
(function() {
var r = {}.hasOwnProperty;
function n() {
for (var e = "", l = 0; l < arguments.length; l++) {
var i = arguments[l];
i && (e = c(e, s(i)));
}
return e;
}
function s(e) {
if (typeof e == "string" || typeof e == "number")
return e;
if (typeof e != "object")
return "";
if (Array.isArray(e))
return n.apply(null, e);
if (e.toString !== Object.prototype.toString && !e.toString.toString().includes("[native code]"))
return e.toString();
var l = "";
for (var i in e)
r.call(e, i) && e[i] && (l = c(l, i));
return l;
}
function c(e, l) {
return l ? e ? e + " " + l : e + l : e;
}
t.exports ? (n.default = n, t.exports = n) : window.classNames = n;
})();
})(v);
var H = v.exports;
const p = /* @__PURE__ */ w(H), L = ({ children: t, className: r, ...n }) => {
const { activeTab: s } = u(), c = s.includes(".") ? s.split(".")[0] : s;
return /* @__PURE__ */ o("div", { className: p("help-desk__content", r), ...n, children: y.map(t, (e) => _(e) && (e == null ? void 0 : e.props["data-name"]) === c ? e : null) });
}, T = ({ className: t, title: r }) => {
const { activeTab: n, defaultTab: s, onClose: c, onSelectTab: e } = u();
return /* @__PURE__ */ d("header", { className: p("help-desk__header", t), children: [
/* @__PURE__ */ o("h1", { children: r }),
s !== n && /* @__PURE__ */ o(
"button",
{
type: "button",
onClick: () => e(s),
className: "help-desk__back",
children: /* @__PURE__ */ d("svg", { viewBox: "0 0 34 60", children: [
/* @__PURE__ */ o("title", { children: "Help Desk Header" }),
/* @__PURE__ */ o("path", { d: "M1.2,32.8l26,26c0.7,0.7,1.7,1.2,2.8,1.2c2.2,0,4-1.8,4-4c0-1.1-0.4-2.1-1.2-2.8L9.7,30 L32.8,6.8C33.6,6.1,34,5.1,34,4c0-2.2-1.8-4-4-4c-1.1,0-2.1,0.4-2.8,1.2l-26,26C0.4,27.9,0,28.9,0,30C0,31.1,0.4,32.1,1.2,32.8z" })
] })
}
),
/* @__PURE__ */ o("button", { type: "button", onClick: c, className: "help-desk__close", children: /* @__PURE__ */ d("svg", { viewBox: "0 0 60 60", children: [
/* @__PURE__ */ o("title", { children: "Help Desk Close" }),
/* @__PURE__ */ o("path", { d: "M35.7,30L58.8,6.8C59.6,6.1,60,5.1,60,4c0-2.2-1.8-4-4-4c-1.1,0-2.1,0.4-2.8,1.2L30,24.3L6.8,1.2C6.1,0.4,5.1,0,4,0C1.8,0,0,1.8,0,4c0,1.1,0.4,2.1,1.2,2.8L24.3,30L1.2,53.2C0.4,53.9,0,54.9,0,56c0,2.2,1.8,4,4,4c1.1,0,2.1-0.4,2.8-1.2L30,35.7l23.2,23.2c0.7,0.7,1.7,1.2,2.8,1.2c2.2,0,4-1.8,4-4c0-1.1-0.4-2.1-1.2-2.8L35.7,30z" })
] }) })
] });
}, g = ({
children: t,
className: r,
...n
}) => {
const { onToggle: s } = u();
return /* @__PURE__ */ o(
"button",
{
title: "Get help",
onClick: s,
className: p("help-desk__menu", r),
...n,
children: t
}
);
}, D = ({ children: t }) => /* @__PURE__ */ o("div", { className: "help-desk__widgets grid grid-cols-3 gap-4 my-4", children: t }), E = ({
externalAction: t,
children: r,
label: n,
tab: s,
onClick: c
}) => {
const { onClose: e, onSelectTab: l } = u();
return /* @__PURE__ */ d(
"button",
{
type: "button",
className: "help-desk__widget flex justify-center flex-col items-center",
onClick: () => {
s ? l(s) : t !== void 0 && t !== !1 && e(), c == null || c();
},
children: [
/* @__PURE__ */ o("div", { className: "box", children: r }),
/* @__PURE__ */ o("p", { children: n })
]
}
);
}, C = N(
void 0
), a = ({
defaultTab: t,
defaultExpanded: r = !1,
expanded: n,
onClose: s,
onToggle: c,
placement: e,
children: l
}) => {
const [i, k] = m(t), [f, h] = m(r), x = {
activeTab: i,
defaultTab: t,
onClose: () => {
typeof n > "u" ? h(!1) : s == null || s();
},
onToggle: () => {
typeof n > "u" ? h(!f) : c == null || c();
},
onSelectTab: (b) => {
k(b);
}
};
return /* @__PURE__ */ o(C.Provider, { value: x, children: /* @__PURE__ */ o(
"div",
{
className: p("help-desk", {
[`help-desk-${e}`]: e,
"help-desk--expanded": typeof n < "u" ? n : f
}),
children: l
}
) });
};
a.Content = L;
a.Header = T;
a.Menu = g;
a.Widgets = D;
a.Widget = E;
const u = () => {
const t = S(C);
if (!t)
throw new Error("useHelpDeskContext must be used within a HelpDesk");
return t;
};
export {
a as HelpDesk,
u as useHelpDeskContext
};
//# sourceMappingURL=index.es.js.map