@adoptaunabuelo/react-components 0.1.20 → 0.1.21

package/dist/cjs/components/Modal/Modal.d.ts

@@ -1,22 +1,13 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { CSSProperties } from 'styled-components';
-import { ButtonProps } from '../Button/Button';
-declare const ModalComponent: import("react").ForwardRefExoticComponent<ModalProps & import("react").RefAttributes<ModalRef>>;
+/// <reference types="react" />
+import { ModalPrimaryProps } from './ModalPrimary';
+declare const ModalComponent: (props: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ModalComponent;
-export interface ModalProps extends ComponentPropsWithoutRef<"div"> {
-    isVisible: boolean;
-    design?: 'default' | 'full-screen';
-    title?: string;
-    subtitle?: string;
-    error?: string;
-    hideClose?: boolean;
-    hideHeader?: boolean;
-    contentStyle?: CSSProperties;
-    Header?: JSX.Element;
-    Bottom?: JSX.Element;
-    buttonProps?: ButtonProps;
-    onClose: () => void;
-}
-export interface ModalRef {
-    close: () => void;
+export interface ModalProps extends ModalPrimaryProps {
+    options?: Array<{
+        id: string;
+        title?: string;
+        Data?: JSX.Element;
+        hidden?: boolean;
+    }>;
+    url?: string;
 }

package/dist/cjs/components/Modal/ModalPrimary.d.ts

@@ -0,0 +1,21 @@
+import { ComponentPropsWithoutRef, CSSProperties } from 'react';
+import { ButtonProps } from '../Button/Button';
+declare const ModalComponent: import("react").ForwardRefExoticComponent<ModalPrimaryProps & import("react").RefAttributes<ModalRef>>;
+export default ModalComponent;
+export interface ModalPrimaryProps extends ComponentPropsWithoutRef<"div"> {
+    isVisible: boolean;
+    type?: 'default' | 'full-screen' | 'form' | 'web';
+    title?: string;
+    subtitle?: string;
+    error?: string;
+    hideClose?: boolean;
+    hideHeader?: boolean;
+    contentStyle?: CSSProperties;
+    Header?: JSX.Element;
+    Bottom?: JSX.Element;
+    buttonProps?: ButtonProps;
+    onClose: () => void;
+}
+export interface ModalRef {
+    close: () => void;
+}

package/dist/cjs/index.js

@@ -641,7 +641,22 @@ var r="none",n="contents",a=/input|select|textarea|button|object|iframe/;functio
     background-color: ${Color.background.redLow};
     padding: 12px 24px;
     margin-top: 24px;
-`,ModalComponent=React.forwardRef(((e,t)=>{const[r,n]=React.useState(e.isVisible),[a,o]=React.useState(!1);React.useImperativeHandle(t,(()=>({close(){l()}}))),React.useEffect((()=>{e.isVisible?(n(!0),i(100).then((()=>{o(!0)}))):(o(!1),i(500).then((()=>{n(!1)})))}),[e.isVisible]);const i=e=>new Promise((t=>setTimeout(t,e))),l=()=>{o(!1),i(300).then((()=>{n(!1),e.onClose&&e.onClose()}))};return jsxRuntime.jsxs(Modal,Object.assign({role:"modal",isOpen:r,ariaHideApp:!1,style:{content:Object.assign({position:"absolute",width:"full-screen"===e.design?"100%":500,maxWidth:"full-screen"===e.design?"100%":"calc(100% - 24px)",maxHeight:"calc(100% - 24px)",background:"#FFFFFF",boxShadow:"0px 4px 8px rgba(0, 0, 0, 0.1)",borderRadius:"full-screen"===e.design?"12px 12px 0px 0px":12,top:"full-screen"!==e.design?a?"50%":"150%":"unset",bottom:"full-screen"===e.design?a?"0px":"-100vh":"unset",transition:"top 0.3s ease-out, bottom 0.3s ease-out, transform 0.3s ease-in-out",left:"50%",transform:"full-screen"===e.design?"translate(-50%, 0%)":"translate(-50%, -50%) scale("+(a?1:.2)+")",overflow:"hidden",overflowY:"auto",border:"none",padding:0},e.style),overlay:{backgroundColor:"rgba(0, 0, 0, "+(a?.6:0)+")",transition:" background-color 0.3s ease-out",zIndex:1e3}}},{children:[!e.hideHeader&&jsxRuntime.jsxs(TitleView,{children:[!e.hideClose&&jsxRuntime.jsx(Button,{style:{position:"absolute",alignSelf:"flex-end",cursor:"pointer"},icon:jsxRuntime.jsx(X,{height:20,width:20,color:Color.text.full}),design:"image",onClick:l}),e.title&&jsxRuntime.jsx(Title,{children:e.title}),e.subtitle&&jsxRuntime.jsx(Subtitle,{children:e.subtitle}),e.Header]}),jsxRuntime.jsx(ChildrenView,Object.assign({style:e.contentStyle},{children:e.children})),e.error&&jsxRuntime.jsx(ErrorView,{children:jsxRuntime.jsx(Text$1,Object.assign({type:"p",style:{color:Color.status.color.error,fontSize:12}},{children:e.error}))}),e.buttonProps&&jsxRuntime.jsxs(Buttons,{children:[e.Bottom,e.buttonProps&&jsxRuntime.jsx(Button,Object.assign({},e.buttonProps,{children:e.buttonProps.children?e.buttonProps.children:"Guardar"}))]})]}))})),Container$5=Ye.div`
+`,ModalComponent$1=React.forwardRef(((e,t)=>{const[r,n]=React.useState(e.isVisible),[a,o]=React.useState(!1);React.useImperativeHandle(t,(()=>({close(){l()}}))),React.useEffect((()=>{e.isVisible?(n(!0),i(100).then((()=>{o(!0)}))):(o(!1),i(500).then((()=>{n(!1)})))}),[e.isVisible]);const i=e=>new Promise((t=>setTimeout(t,e))),l=()=>{o(!1),i(300).then((()=>{n(!1),e.onClose&&e.onClose()}))};return jsxRuntime.jsxs(Modal,Object.assign({role:"modal",isOpen:r,ariaHideApp:!1,style:{content:Object.assign({position:"absolute",width:"full-screen"===e.type?"100%":500,maxWidth:"full-screen"===e.type?"100%":"calc(100% - 24px)",maxHeight:"calc(100% - 24px)",background:"#FFFFFF",boxShadow:"0px 4px 8px rgba(0, 0, 0, 0.1)",borderRadius:"full-screen"===e.type?"12px 12px 0px 0px":12,top:"full-screen"!==e.type?a?"50%":"150%":"unset",bottom:"full-screen"===e.type?a?"0px":"-100vh":"unset",transition:"top 0.3s ease-out, bottom 0.3s ease-out, transform 0.3s ease-in-out",left:"50%",transform:"full-screen"===e.type?"translate(-50%, 0%)":"translate(-50%, -50%) scale("+(a?1:.2)+")",overflow:"hidden",overflowY:"auto",border:"none",padding:0},e.style),overlay:{backgroundColor:"rgba(0, 0, 0, "+(a?.6:0)+")",transition:" background-color 0.3s ease-out",zIndex:1e3}}},{children:[!e.hideHeader&&jsxRuntime.jsxs(TitleView,{children:[!e.hideClose&&jsxRuntime.jsx(Button,{style:{position:"absolute",alignSelf:"flex-end",cursor:"pointer"},icon:jsxRuntime.jsx(X,{height:20,width:20,color:Color.text.full}),design:"image",onClick:l}),e.title&&jsxRuntime.jsx(Title,{children:e.title}),e.subtitle&&jsxRuntime.jsx(Subtitle,{children:e.subtitle}),e.Header]}),jsxRuntime.jsx(ChildrenView,Object.assign({style:e.contentStyle},{children:e.children})),e.error&&jsxRuntime.jsx(ErrorView,{children:jsxRuntime.jsx(Text$1,Object.assign({type:"p",style:{color:Color.status.color.error,fontSize:12}},{children:e.error}))}),e.buttonProps&&jsxRuntime.jsxs(Buttons,{children:[e.Bottom,e.buttonProps&&jsxRuntime.jsx(Button,Object.assign({},e.buttonProps,{children:e.buttonProps.children?e.buttonProps.children:"Guardar"}))]})]}))})),Row=Ye.div`
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 8px;
+`,LabelColumn=Ye.div`
+    display: flex;
+    width: 112px;
+    align-items: center;
+`,DataColumn=Ye.div`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+`,Separator=Ye.div`
+    content: none;
+    margin-bottom: 24px;
+`,WebView=Ye.iframe``,ModalComponent=e=>{const t=__rest(e,["children"]);return"form"===e.type?jsxRuntime.jsx(ModalComponent$1,Object.assign({},t,{children:e.options&&e.options.map(((e,t)=>e.hidden?null:"separator"===e.id?jsxRuntime.jsx(Separator,{},"separator-"+t):jsxRuntime.jsxs(Row,{children:[jsxRuntime.jsx(LabelColumn,{children:jsxRuntime.jsx(Text$1,Object.assign({type:"c1",weight:"medium"},{children:e.title}))}),jsxRuntime.jsx(DataColumn,{children:e.Data})]},"option-"+e.id)))})):"web"===e.type?jsxRuntime.jsx(ModalComponent$1,Object.assign({},t,{children:jsxRuntime.jsx(WebView,{id:"web-iframe",src:e.url,width:"100%",height:"100%",style:{border:"none"}})})):jsxRuntime.jsx(ModalComponent$1,Object.assign({},e))},Container$5=Ye.div`
     position: relative;
 `,FilterView$3=Ye.div`
     position: absolute;