tsm-ui
Version:
### Welcome to TSM-UI: Your Design System for Modern Web Development
17 lines (16 loc) • 4.17 kB
JavaScript
import{r as u}from"./index.d591fb27.js";import{s as m}from"./index.f31275f4.js";import{j as o,a as l}from"./jsx-runtime.e41c3930.js";import{B as h}from"./index.9d7ba1c1.js";import"./_commonjsHelpers.712cc82f.js";import"./index.8dde8ec8.js";const y=m("div",{position:"fixed",top:0,left:0,width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"rgba(0, 0, 0, 0.5)",zIndex:1e3}),g=m("div",{backgroundColor:"$colorMainWhite",borderRadius:"$3",padding:"$5",maxWidth:"500px",width:"90%",maxHeight:"90%",overflow:"auto"});function a({isOpen:s,onClose:e,children:i}){return u.exports.useEffect(()=>{const t=r=>{r.key==="Escape"&&e()};return window.addEventListener("keydown",t),()=>{window.removeEventListener("keydown",t)}},[e]),s?o(y,{onClick:e,children:l(g,{onClick:t=>t.stopPropagation(),children:[o("button",{onClick:e,style:{position:"absolute",right:"1rem",top:"1rem",background:"transparent",border:"none",fontSize:"1.5rem",cursor:"pointer"},children:"\xD7"}),i]})}):null}try{a.displayName="Modal",a.__docgenInfo={description:"",displayName:"Modal",props:{isOpen:{defaultValue:null,description:"",name:"isOpen",required:!0,type:{name:"boolean"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!0,type:{name:"() => void"}}}}}catch{}const x={title:"Components/Modal",component:a,parameters:{layout:"centered",docs:{description:{story:"Click and drag the buttons to position the tooltip appropriately. If you feel that the tooltip is blocking content or positioned undesirably, simply click and drag the button to move it across the screen.This way, you can view the tooltip in different positions and find the one that best suits your needs. Give it a try! Hover over a button, click and hold the mouse button, and drag the button across the screen.Notice how the tooltip adjusts in real- time.It`s a simple and intuitive way to ensure you can see all the important details provided by the tooltip."}}}},f=s=>{const[e,i]=u.exports.useState(!1),t=()=>i(!0),r=()=>i(!1);return l("div",{children:[o(h,{onClick:t,children:"Open Modal"}),l(a,{...s,isOpen:e,onClose:r,children:[o("button",{style:{position:"absolute",top:0,right:0},onClick:r,children:"X"}),o("p",{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."})]})]})},n=f.bind({});n.args={};var d,p,c;n.parameters={...n.parameters,docs:{...(d=n.parameters)==null?void 0:d.docs,source:{originalSource:`args => {
const [isOpen, setIsOpen] = useState(false);
const handleOpen = () => setIsOpen(true);
const handleClose = () => setIsOpen(false);
return <div>
<Button onClick={handleOpen}>Open Modal</Button>
<Modal {...args} isOpen={isOpen} onClose={handleClose}>
<button style={{
position: 'absolute',
top: 0,
right: 0
}} onClick={handleClose}>X</button>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</Modal>
</div>;
}`,...(c=(p=n.parameters)==null?void 0:p.docs)==null?void 0:c.source}}};const O=["Primary"];export{n as Primary,O as __namedExportsOrder,x as default};