react-help-desk-tailwindcss-ts
Version:
Help desk component for React with Tailwindcss in TypeScript
7 lines (6 loc) • 3.95 kB
JavaScript
(function(i,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],s):(i=typeof globalThis<"u"?globalThis:i||self,s(i["react-help-desk-tailwindcss-ts"]={},i["react/jsx-runtime"],i.React))})(this,function(i,s,a){"use strict";function y(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var h={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 d=arguments[l];d&&(e=o(e,c(d)))}return e}function c(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 d in e)r.call(e,d)&&e[d]&&(l=o(l,d));return l}function o(e,l){return l?e?e+" "+l:e+l:e}t.exports?(n.default=n,t.exports=n):window.classNames=n})()})(h);var C=h.exports;const u=y(C),b=({children:t,className:r,...n})=>{const{activeTab:c}=f(),o=c.includes(".")?c.split(".")[0]:c;return s.jsx("div",{className:u("help-desk__content",r),...n,children:a.Children.map(t,e=>a.isValidElement(e)&&(e==null?void 0:e.props["data-name"])===o?e:null)})},_=({className:t,title:r})=>{const{activeTab:n,defaultTab:c,onClose:o,onSelectTab:e}=f();return s.jsxs("header",{className:u("help-desk__header",t),children:[s.jsx("h1",{children:r}),c!==n&&s.jsx("button",{type:"button",onClick:()=>e(c),className:"help-desk__back",children:s.jsxs("svg",{viewBox:"0 0 34 60",children:[s.jsx("title",{children:"Help Desk Header"}),s.jsx("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"})]})}),s.jsx("button",{type:"button",onClick:o,className:"help-desk__close",children:s.jsxs("svg",{viewBox:"0 0 60 60",children:[s.jsx("title",{children:"Help Desk Close"}),s.jsx("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"})]})})]})},S=({children:t,className:r,...n})=>{const{onToggle:c}=f();return s.jsx("button",{title:"Get help",onClick:c,className:u("help-desk__menu",r),...n,children:t})},T=({children:t})=>s.jsx("div",{className:"help-desk__widgets grid grid-cols-3 gap-4 my-4",children:t}),m=({externalAction:t,children:r,label:n,tab:c,onClick:o})=>{const{onClose:e,onSelectTab:l}=f(),d=()=>{c?l(c):t!==void 0&&t!==!1&&e(),o==null||o()};return s.jsxs("button",{type:"button",className:"help-desk__widget flex justify-center flex-col items-center",onClick:d,children:[s.jsx("div",{className:"box",children:r}),s.jsx("p",{children:n})]})},v=a.createContext(void 0),p=({defaultTab:t,defaultExpanded:r=!1,expanded:n,onClose:c,onToggle:o,placement:e,children:l})=>{const[d,H]=a.useState(t),[x,k]=a.useState(r),N={activeTab:d,defaultTab:t,onClose:()=>{typeof n>"u"?k(!1):c==null||c()},onToggle:()=>{typeof n>"u"?k(!x):o==null||o()},onSelectTab:j=>{H(j)}};return s.jsx(v.Provider,{value:N,children:s.jsx("div",{className:u("help-desk",{[`help-desk-${e}`]:e,"help-desk--expanded":typeof n<"u"?n:x}),children:l})})};p.Content=b,p.Header=_,p.Menu=S,p.Widgets=T,p.Widget=m;const f=()=>{const t=a.useContext(v);if(!t)throw new Error("useHelpDeskContext must be used within a HelpDesk");return t};i.HelpDesk=p,i.useHelpDeskContext=f,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
//# sourceMappingURL=index.umd.js.map