UNPKG

@tritium-research/react-component

Version:

A react component library based on material-ui, build for tritium internal usecases.

13 lines (12 loc) 16.2 kB
(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+react@18.2.0/node_modules/react/jsx-runtime.js"),require("/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+@mui+material@5.14.5_@emotion+react@11.11.1_@emotion+styled@11.11.0_@t_rcc7vezmuc62xe5oxkl3n2o63q/node_modules/@mui/material/index.js"),require("react"),require("/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+@mui+base@5.0.0-beta.11_@types+react@18.2.15_react-dom@18.2.0_react@18.2.0/node_modules/@mui/base/index.js"),require("/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+react-intl@6.4.4_react@18.2.0_typescript@5.0.2/node_modules/react-intl/lib/index.js"),require("/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+copy-to-clipboard@3.3.3/node_modules/copy-to-clipboard/index.js"),require("/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+@mui+material@5.14.5_@emotion+react@11.11.1_@emotion+styled@11.11.0_@t_rcc7vezmuc62xe5oxkl3n2o63q/node_modules/@mui/material/Stack/index.js"),require("/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+@mui+material@5.14.5_@emotion+react@11.11.1_@emotion+styled@11.11.0_@t_rcc7vezmuc62xe5oxkl3n2o63q/node_modules/@mui/material/TextField/index.js")):typeof define=="function"&&define.amd?define(["exports","/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+react@18.2.0/node_modules/react/jsx-runtime.js","/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+@mui+material@5.14.5_@emotion+react@11.11.1_@emotion+styled@11.11.0_@t_rcc7vezmuc62xe5oxkl3n2o63q/node_modules/@mui/material/index.js","react","/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+@mui+base@5.0.0-beta.11_@types+react@18.2.15_react-dom@18.2.0_react@18.2.0/node_modules/@mui/base/index.js","/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+react-intl@6.4.4_react@18.2.0_typescript@5.0.2/node_modules/react-intl/lib/index.js","/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+copy-to-clipboard@3.3.3/node_modules/copy-to-clipboard/index.js","/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+@mui+material@5.14.5_@emotion+react@11.11.1_@emotion+styled@11.11.0_@t_rcc7vezmuc62xe5oxkl3n2o63q/node_modules/@mui/material/Stack/index.js","/Users/yiran.z/Projects/tritium/tritium-react-component/node_modules/.pnpm/registry.npmmirror.com+@mui+material@5.14.5_@emotion+react@11.11.1_@emotion+styled@11.11.0_@t_rcc7vezmuc62xe5oxkl3n2o63q/node_modules/@mui/material/TextField/index.js"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p["Tritium React Component"]={},p.jsxRuntime_js,p.index_js,p.React,p.index_js$1,p.index_js$2,p.copy,p.Stack,p.TextField))})(this,function(p,e,t,x,U,I,H,P,M){"use strict";const V=({size:r=24,color:o="#fff",children:d,variant:a="standard",viewBox:i="0 0 24 24"})=>{const c=()=>a==="small"?16:a==="standard"?24:a==="large"?36:r,s={width:`${c()}px`,height:`${c()}px`,stroke:"transparent",fill:o},u=()=>a==="small"?"0 0 16 16":a==="standard"?"0 0 24 24":a==="large"?"0 0 36 36":i;return e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",style:s,viewBox:u(),children:d})};function $(r){const{color:o="#000"}=r;return e.jsxs(V,{viewBox:"0 0 16 16",variant:"small",children:[e.jsx("title",{children:"Loading"}),e.jsx("g",{id:"Page-1",stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd",children:e.jsx("g",{id:"Popup",transform:"translate(-586.000000, -1564.000000)",children:e.jsx("g",{id:"Group-4",transform:"translate(552.000000, 1415.000000)",children:e.jsxs("g",{id:"Group-7",transform:"translate(34.000000, 149.000000)",children:[e.jsx("rect",{id:"Rectangle",x:"0",y:"0",width:"16",height:"16"}),e.jsx("rect",{id:"Rectangle",fill:o,x:"7.33333333",y:"1.33333333",width:"1.33333333",height:"4",rx:"0.666666667"}),e.jsx("rect",{id:"Rectangle",fill:o,opacity:"0.800000012",transform:"translate(11.299832, 4.700168) rotate(45.000000) translate(-11.299832, -4.700168) ",x:"10.633165",y:"2.70016835",width:"1.33333333",height:"4",rx:"0.666666667"}),e.jsx("rect",{id:"Rectangle",fill:o,opacity:"0.600000024",transform:"translate(12.666667, 8.000000) rotate(90.000000) translate(-12.666667, -8.000000) ",x:"12",y:"6",width:"1.33333333",height:"4",rx:"0.666666667"}),e.jsx("rect",{id:"Rectangle",fill:o,opacity:"0.5",transform:"translate(11.299832, 11.299832) rotate(135.000000) translate(-11.299832, -11.299832) ",x:"10.633165",y:"9.29983165",width:"1.33333333",height:"4",rx:"0.666666667"}),e.jsx("rect",{id:"Rectangle",fill:o,opacity:"0.400000006",transform:"translate(8.000000, 12.666667) rotate(180.000000) translate(-8.000000, -12.666667) ",x:"7.33333333",y:"10.6666667",width:"1.33333333",height:"4",rx:"0.666666667"}),e.jsx("rect",{id:"Rectangle",fill:o,opacity:"0.300000012",transform:"translate(4.700168, 11.299832) rotate(225.000000) translate(-4.700168, -11.299832) ",x:"4.03350169",y:"9.29983165",width:"1.33333333",height:"4",rx:"0.666666667"}),e.jsx("rect",{id:"Rectangle",fill:o,opacity:"0.100000001",transform:"translate(4.700168, 4.700168) rotate(315.000000) translate(-4.700168, -4.700168) ",x:"4.03350169",y:"2.70016835",width:"1.33333333",height:"4",rx:"0.666666667"})]})})})})]})}const S=t.styled(t.Button)({textTransform:"capitalize"}),D=t.styled("a")({textDecoration:"none"}),E=t.styled(t.Stack)({width:"100%",height:"100%",alignItems:"center",justifyContent:"center",animation:"spin 1s linear infinite","@keyframes spin":{from:{transform:"rotate(0deg)"},to:{transform:"rotate(360deg)"}}});function N(r){const{variant:o="outlined",href:d="",loading:a=!1,spin:i=!1,loadingComponent:c=e.jsx($,{}),...s}=r,u=()=>e.jsx(t.Stack,{children:i?e.jsx(E,{children:c}):c});return o==="link"?e.jsx(D,{href:d,target:"_blank",rel:"noopener noreferrer",children:e.jsx(S,{variant:"outlined",...s,onClick:()=>{}})}):o==="round"?e.jsx(S,{variant:"outlined",...s,sx:{...s.sx,borderRadius:50},children:a?u():r.children}):o=="icon"?e.jsx(t.IconButton,{...s,children:a?u():r.icon||r.children}):e.jsx(S,{variant:o,...s,children:a?u():r.children})}function C(r){const{contentKey:o,tooltipTrigger:d="hover",tooltipProps:a,...i}=r,c=x.useRef(null),[s,u]=x.useState(!1),[g,h]=x.useState(!1);x.useEffect(()=>{if(i.noWrap){const y=c.current,f=y==null?void 0:y.clientWidth,l=y==null?void 0:y.scrollWidth;f&&l&&l>f&&u(!0)}},[]);const m=()=>o?e.jsx(I.FormattedMessage,{id:o}):e.jsx(e.Fragment,{}),n=y=>Number.isFinite(y)?e.jsx(I.FormattedNumber,{value:y,maximumFractionDigits:18}):y;return i.noWrap?d==="click"?e.jsx(U.ClickAwayListener,{onClickAway:()=>h(!1),children:e.jsx(t.Tooltip,{open:s&&g,title:e.jsx(t.Typography,{variant:"body2",color:"primary.main",children:r.children?n(r.children):m()}),...a,children:e.jsx(t.Typography,{ref:c,noWrap:!0,...i,onClick:()=>h(!g),children:r.children?n(r.children):m()})})}):e.jsx(t.Tooltip,{open:s&&g,title:e.jsx(t.Typography,{variant:"body2",color:"primary.main",children:r.children?n(r.children):m()}),children:e.jsx(t.Typography,{ref:c,noWrap:!0,...i,onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),children:r.children?n(r.children):m()})}):e.jsx(t.Typography,{...i,children:r.children?n(r.children):m()})}function O(){return e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",width:"15",height:"15",viewBox:"0 0 15 15",children:[e.jsxs("defs",{children:[e.jsx("style",{children:".aCopy{fill:none;}.bCopy{clip-path:url(#aCopy);}"}),e.jsx("clipPath",{id:"aCopy",children:e.jsx("rect",{className:"aCopy",width:"15",height:"15"})})]}),e.jsxs("g",{className:"bCopy",children:[e.jsx("path",{d:"M-.644-3h7.2A2.359,2.359,0,0,1,8.912-.644v7.2A2.359,2.359,0,0,1,6.556,8.912h-7.2A2.359,2.359,0,0,1-3,6.556v-7.2A2.359,2.359,0,0,1-.644-3Zm7.2,10.588A1.034,1.034,0,0,0,7.588,6.556v-7.2A1.034,1.034,0,0,0,6.556-1.676h-7.2A1.034,1.034,0,0,0-1.676-.644v7.2A1.034,1.034,0,0,0-.644,7.588Z",transform:"translate(3 6.088)"}),e.jsx("path",{d:"M23.265,11.912V10.588h.291a1.057,1.057,0,0,0,1.032-1.032v-7.2a1.034,1.034,0,0,0-1.032-1.032h-7.2a1.037,1.037,0,0,0-1.028.944l0,.379H14V2.356A2.412,2.412,0,0,1,16.356,0h7.2a2.359,2.359,0,0,1,2.356,2.356v7.2A2.369,2.369,0,0,1,23.754,11.9Z",transform:"translate(-10.912)"})]})]})}const G=t.styled(t.Stack,{name:"CopierContainer"})` width: 100%; height: 100%; gap: 4px; flex-direction: row; align-items: center; cursor: ${({clickable:r})=>r?"pointer":"default"}; `,Q=t.styled(t.Stack,{name:"IconWrapper"})(({theme:r})=>({alignItems:"center",justifyContent:"center",width:"16px",height:"16px",cursor:"pointer",opacity:.8,transition:r.transitions.create("opacity"),":hover":{opacity:1}}));function Z(r){const{content:o="",value:d,textProps:a,abbreviate:i=!1,clickableArea:c="icon"}=r,s=d??o,u=h=>h?`${h.slice(0,6)}...${h.slice(-4)}`:"",g=(h,m)=>{var n;c===m&&(H(h),(n=r.onCopy)==null||n.call(r))};return e.jsxs(G,{clickable:c==="entire",onClick:c==="entire"?()=>g(s,"entire"):()=>{},children:[e.jsx(C,{...a,children:i?u(o):o}),e.jsx(Q,{onClick:()=>g(s,"icon"),children:r.icon??e.jsx(O,{})})]})}const X=t.styled("span")` color: rgba(250, 59, 88, 1); `,K=t.styled("span")` opacity: 0.4; `,J=t.styled("span",{shouldForwardProp:r=>r!=="exceeded"})(({theme:{palette:r},exceeded:o})=>({color:o?r.error.main:r.primary.main})),z=x.forwardRef((r,o)=>{var L;const{label:d,showCount:a=!1,required:i=!1,errorMessage:c="",numberOnly:s=!1,disabled:u=!1,labelGap:g,errorMeesageGap:h,height:m,...n}=r,y=((L=n.value)==null?void 0:L.length)??0,f=n.maxLength??0,l=x.useRef(null),[b,T]=x.useState(0);x.useEffect(()=>{var w;T(m??((w=l.current)==null?void 0:w.clientHeight)??0)},[m,c]);const q=w=>{var k,v,A;if(!(s&&!/^[0-9]*$/.test(w.target.value)))return a?w.nativeEvent.inputType==="deleteContentBackward"?(k=n.onChange)==null?void 0:k.call(n,w):y>=f||(v=n.onChange)==null?void 0:v.call(n,w):(A=n.onChange)==null?void 0:A.call(n,w)},oe=()=>e.jsx(P,{sx:{position:"absolute",right:0,bottom:n.multiline?r.errorMessage?29:-8:void 0,top:n.multiline?void 0:34.5+Math.floor(b/2),transform:n.multiline?"translate(-16px, -100%)":"translate(-16px, -50%)"},children:e.jsxs(C,{children:[e.jsx(J,{exceeded:y>f,children:y})," ",e.jsxs(K,{children:["/ ",f??0]})]})}),ie=()=>e.jsxs(P,{flexDirection:"row",sx:{marginBottom:g},children:[typeof d=="string"?e.jsx(C,{children:d}):d,i&&e.jsx(X,{children:"*"})]}),ae=()=>{var k,v;if(n.multiline)return e.jsx(M,{...n,ref:a?l:o,onChange:q,required:i,InputProps:{sx:{paddingBottom:"40px",...(k=n.InputProps)==null?void 0:k.sx},...n.InputProps}});const w=r.height??48;return e.jsx(M,{...n,sx:{...n.sx,height:w},InputProps:{...n.InputProps,sx:{...(v=n.InputProps)==null?void 0:v.sx,height:w}},variant:"outlined",inputProps:{style:{paddingTop:0,paddingBottom:0,paddingRight:a?88:14}},ref:a?l:o,onChange:q,required:i})},le=()=>e.jsx(t.Fade,{in:!0,children:e.jsx(t.Box,{sx:{marginTop:h},children:e.jsx(C,{variant:"body2",color:"error.main",children:c})})});return e.jsxs(P,{sx:{position:"relative",pointerEvents:u?"none":"auto",opacity:u?.5:1,width:"fit-content"},children:[!!d&&ie(),ae(),a&&oe(),!!r.errorMessage&&le()]})});z.displayName="Input";function B(){return e.jsx("svg",{width:"24px",height:"24px",viewBox:"0 0 24 24",version:"1.1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",children:e.jsx("path",{d:"M17.657 17.657c-.363.362-.96.364-1.384.02l-.094-.084L12 13.414l-4.179 4.179c-.425.426-1.087.454-1.478.064-.362-.363-.364-.96-.02-1.384l.084-.094L10.586 12 6.407 7.821c-.426-.425-.454-1.087-.064-1.478.363-.362.96-.364 1.384-.02l.094.084L12 10.586l4.179-4.179c.425-.426 1.087-.454 1.478-.064.362.363.364.96.02 1.384l-.084.094L13.414 12l4.179 4.179c.426.425.454 1.087.064 1.478z",fillRule:"nonzero"})})}function Y(r){const{title:o,width:d=336,hideCloseIcon:a=!1,hideTitle:i=!1,...c}=r,s=(u,g)=>{var h;g!=="backdropClick"&&((h=r.onClose)==null||h.call(r,u??{},g??"backdropClick"))};return e.jsxs(t.Dialog,{...c,PaperProps:{sx:{width:d,borderRadius:"12px"}},onClose:s,children:[!i&&e.jsx(t.DialogTitle,{sx:{padding:"24px"},children:e.jsxs(t.Stack,{flexDirection:"row",justifyContent:"space-between",alignItems:"center",children:[o,!a&&e.jsx(t.Stack,{onClick:s,alignItems:"center",justifyContent:"center",sx:{cursor:"pointer",opacity:.8,transition:({transitions:u})=>u.create("all"),":hover":{opacity:1,transform:"scale(1.2)"}},children:e.jsx(B,{})})]})}),e.jsxs(t.DialogContent,{sx:{padding:i?"24px":"0 24px 24px 24px"},children:[r.children,!a&&i&&e.jsx(t.Stack,{onClick:s,alignItems:"center",justifyContent:"center",sx:{cursor:"pointer",position:"absolute",top:24,right:24,opacity:.8,transition:({transitions:u})=>u.create("all"),":hover":{opacity:1,transform:"scale(1.2)"}},children:e.jsx(B,{})})]})]})}function R(r){return e.jsx(t.Stack,{flexDirection:"row",alignItems:"center",...r})}function _(r){const{options:o,menuItemProps:d,...a}=r;return e.jsx(t.Select,{...a,children:o.map(i=>{if(typeof i=="string")return e.jsx(t.MenuItem,{value:i,...d,children:i},i);const{value:c,children:s}=i;return e.jsx(t.MenuItem,{value:c,...d,children:s},c)})})}function j(){const{breakpoints:r}=t.useTheme(),o=t.useMediaQuery(r.up("md")),d=t.useMediaQuery(r.between("sm","md")),a=t.useMediaQuery(r.between("xs","sm")),i=t.useMediaQuery(r.down("xs"));return{lg:o,md:d,sm:a,xs:i}}const W=t.styled(t.TableRow,{name:"TableRow"})``,ee=t.styled(t.TableCell,{name:"TableHeadCell",shouldForwardProp:r=>r!=="offset"})``,F=t.styled(t.TableCell,{name:"TableBodyCell"})``;function re(r){const{rows:o,columns:d,sx:a,headerCellSx:i,bodyCellSx:c,tableHeadProps:s,tableBodyProps:u}=r,g=x.useMemo(()=>o,[o]),{md:h,sm:m,xs:n}=j(),y=l=>n?l.slice(0,2):m?l.slice(0,4):h?l.slice(0,5):l,f=x.useMemo(()=>y(d),[d,n,m,h]);return e.jsx(t.TableContainer,{sx:{maxHeight:440,...a},children:e.jsxs(t.Table,{stickyHeader:!0,"aria-label":"sti cky table",children:[e.jsx(t.TableHead,{...s,children:e.jsx(W,{children:f==null?void 0:f.map(l=>e.jsx(ee,{align:l.align,sx:i,style:{minWidth:l.minWidth},children:l.enableSort?e.jsx(t.Stack,{flexDirection:"row",alignItems:"center",justifyContent:l.align==="right"?"flex-end":l.align==="center"?"center":"flex-start",children:e.jsxs(t.Stack,{flexDirection:"row",width:"fit-content",gap:.4,sx:{cursor:"pointer"},children:[e.jsx(t.Typography,{variant:"subtitle1",children:l.label}),r.sortIcon]})}):e.jsx(t.Typography,{variant:"subtitle1",children:l.label})},l.id))})}),e.jsx(t.TableBody,{...u,children:g==null?void 0:g.map(l=>e.jsx(W,{sx:{cursor:l.link?"pointer":"auto"},children:f==null?void 0:f.map(b=>{const T=l[b.id];return l.link?e.jsx(F,{align:b.align,sx:{...c},children:e.jsx(t.Link,{href:l.link,children:b.renderValue?b.renderValue(T):T})},b.id+l.id):e.jsx(F,{align:b.align,sx:{...c},children:b.renderValue?b.renderValue(T):T},b.id+l.id)})},l.id))})]})})}const te=t.styled(t.Box,{name:"TabsWrapper"})``;function ne(r){const{options:o,currentValue:d=0,tabsProps:a,tabProps:i,onChange:c,tabsWrapperProps:s,tabPanelProps:u}=r;function g(h){const{children:m,value:n,index:y,...f}=h;return e.jsx("div",{role:"tabpanel",hidden:n!==y,id:`tabpanel-${y}`,children:n===y&&e.jsx(t.Box,{sx:{py:2.4,...f==null?void 0:f.sx},...f,children:m})})}return e.jsxs(e.Fragment,{children:[e.jsx(te,{...s,children:e.jsx(t.Tabs,{value:d,onChange:c,...a,children:o.map(h=>{const{label:m,value:n}=h;return e.jsx(t.Tab,{label:m,...i,sx:{textTransform:"capitalize",padding:0,minWidth:40,marginRight:"20px",...i==null?void 0:i.sx},disableRipple:!0},n)})})}),o==null?void 0:o.map(h=>{const{value:m,children:n}=h;return n?x.createElement(g,{...u,value:d,index:m,key:m},n):null})]})}p.Button=N,p.Copier=Z,p.Input=z,p.Modal=Y,p.Row=R,p.Select=_,p.Table=re,p.Tabs=ne,p.Text=C,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});