@responsive-email/react-email
Version:
A utility for writing responsive email templates with react-email
1 lines • 6.9 kB
Source Map (JSON)
{"version":3,"sources":["../../core/src/create-responsive-row.tsx","../../core/src/create-responsive-column.tsx","../src/responsive-column.ts"],"sourcesContent":["import React from \"react\";\nimport { ResponsiveColumnProps } from \"./create-responsive-column\";\n\nexport type ResponsiveRowProps = Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> & {\n style?: Omit<\n React.CSSProperties,\n | \"padding\"\n | \"paddingLeft\"\n | \"paddingRight\"\n | \"paddingTop\"\n | \"paddingBottom\"\n | \"paddingInline\"\n | \"paddingBlock\"\n | \"maxWidth\"\n >;\n\n maxWidth?: number;\n\n paddingLeft?: number;\n paddingRight?: number;\n paddingTop?: number;\n paddingBottom?: number;\n};\n\nexport function createResponsiveRow(\n isResponsiveColumn: (\n node: any,\n ) => node is React.ReactElement<\n ResponsiveColumnProps,\n React.FC<ResponsiveColumnProps>\n >,\n) {\n return (props: ResponsiveRowProps) => {\n const childrenArray = React.Children.toArray(props.children);\n\n const responsiveColumns = childrenArray\n .filter(isResponsiveColumn)\n .map((node) => node.props.span ?? 1);\n if (responsiveColumns.length > 3) {\n console.warn(\n \"You've exceeded the recommended 3-column limit in your email template. Consider sticking to a maximum of 3 columns for best practice.\",\n );\n }\n\n const totalColumnSpan = responsiveColumns.reduce(\n (acc, spanForColumn) => acc + spanForColumn,\n 0,\n );\n\n const pl = props.paddingLeft ?? 0;\n const pr = props.paddingLeft ?? 0;\n const oneColumnMaxWidth =\n (props.maxWidth ?? 600 - pl - pr) / totalColumnSpan;\n\n return (\n <table\n align=\"center\"\n width=\"100%\"\n border={0}\n cellPadding=\"0\"\n cellSpacing=\"0\"\n role=\"presentation\"\n {...props}\n style={{\n textAlign: \"center\",\n fontSize: 0,\n ...props.style,\n }}\n >\n <tbody>\n <tr>\n <td\n style={{\n padding: `${props.paddingTop ?? 0}px ${\n props.paddingRight ?? 0\n }px ${props.paddingBottom ?? 0}px ${props.paddingLeft ?? 0}px`,\n }}\n >\n {childrenArray.map((node, i) => {\n if (isResponsiveColumn(node)) {\n const columnProps = node.props;\n const columnSpan = columnProps.span ?? 1;\n\n return (\n <table\n key={i}\n align=\"center\"\n width=\"100%\"\n border={0}\n cellPadding=\"0\"\n cellSpacing=\"0\"\n role=\"presentation\"\n {...columnProps}\n style={{\n maxWidth: oneColumnMaxWidth * columnSpan,\n display: \"inline-block\",\n verticalAlign: \"top\",\n fontSize: 16,\n boxSizing: \"border-box\",\n ...columnProps.style,\n }}\n >\n <tbody>\n <tr>\n <td {...columnProps.tdProps}>{columnProps.children}</td>\n </tr>\n </tbody>\n </table>\n );\n }\n\n return node;\n })}\n </td>\n </tr>\n </tbody>\n </table>\n );\n };\n}\n","import React from \"react\";\nimport { BaseSectionProps } from \"./base-section-props\";\n\nexport type ResponsiveColumnProps = React.ComponentPropsWithoutRef<'table'> & {\n span?: number;\n tdProps?: React.ComponentPropsWithoutRef<'td'>;\n};\n\nexport function createResponsiveColumn() {\n const ResponsiveColumn = (_props: BaseSectionProps) => {\n /*\n This component is basically just a placeholder that we then get the props from.\n Once the user does something like `<ResponsiveColumn span={2}>`\n it will be equivalent to an object like\n \n ```typescript\n {\n type: [Function: ResponsiveColumn],\n props: { span: 2 },\n ...\n }\n ```\n\n This will allow us to get the value of the props and to know if the\n component used was the proper one.\n */\n return <></>;\n };\n\n return {\n isResponsiveColumn: (\n node: any,\n ): node is React.ReactElement<\n ResponsiveColumnProps,\n typeof ResponsiveColumn\n > => {\n return (\n React.isValidElement<ResponsiveColumnProps>(node) &&\n node.type === ResponsiveColumn\n );\n },\n component: ResponsiveColumn as React.FC<ResponsiveColumnProps>,\n };\n}\n","import {\n createResponsiveColumn,\n ResponsiveColumnProps as BaseProps,\n} from \"@responsive-email/core\";\n\nexport type ResponsiveColumnProps = BaseProps;\n\nexport const { isResponsiveColumn, component: ResponsiveColumn } =\n createResponsiveColumn();\n"],"mappings":"AAAA,OAAOA,MAAW,QAwBX,SAASC,EACdC,EAMA,CACA,OAAQC,GAA8B,CACpC,IAAMC,EAAgBJ,EAAM,SAAS,QAAQG,EAAM,QAAQ,EAErDE,EAAoBD,EACvB,OAAOF,CAAkB,EACzB,IAAKI,GAASA,EAAK,MAAM,MAAQ,CAAC,EACjCD,EAAkB,OAAS,GAC7B,QAAQ,KACN,uIACF,EAGF,IAAME,EAAkBF,EAAkB,OACxC,CAACG,EAAKC,IAAkBD,EAAMC,EAC9B,CACF,EAEMC,EAAKP,EAAM,aAAe,EAC1BQ,EAAKR,EAAM,aAAe,EAC1BS,GACHT,EAAM,UAAY,IAAMO,EAAKC,GAAMJ,EAEtC,OACEP,EAAA,cAAC,SACC,MAAM,SACN,MAAM,OACN,OAAQ,EACR,YAAY,IACZ,YAAY,IACZ,KAAK,eACJ,GAAGG,EACJ,MAAO,CACL,UAAW,SACX,SAAU,EACV,GAAGA,EAAM,KACX,GAEAH,EAAA,cAAC,aACCA,EAAA,cAAC,UACCA,EAAA,cAAC,MACC,MAAO,CACL,QAAS,GAAGG,EAAM,YAAc,CAAC,MAC/BA,EAAM,cAAgB,CACxB,MAAMA,EAAM,eAAiB,CAAC,MAAMA,EAAM,aAAe,CAAC,IAC5D,GAECC,EAAc,IAAI,CAACE,EAAMO,IAAM,CAC9B,GAAIX,EAAmBI,CAAI,EAAG,CAC5B,IAAMQ,EAAcR,EAAK,MACnBS,EAAaD,EAAY,MAAQ,EAEvC,OACEd,EAAA,cAAC,SACC,IAAKa,EACL,MAAM,SACN,MAAM,OACN,OAAQ,EACR,YAAY,IACZ,YAAY,IACZ,KAAK,eACJ,GAAGC,EACJ,MAAO,CACL,SAAUF,EAAoBG,EAC9B,QAAS,eACT,cAAe,MACf,SAAU,GACV,UAAW,aACX,GAAGD,EAAY,KACjB,GAEAd,EAAA,cAAC,aACCA,EAAA,cAAC,UACCA,EAAA,cAAC,MAAI,GAAGc,EAAY,SAAUA,EAAY,QAAS,CACrD,CACF,CACF,CAEJ,CAEA,OAAOR,CACT,CAAC,CACH,CACF,CACF,CACF,CAEJ,CACF,CCvHA,OAAOU,MAAW,QAQX,SAASC,GAAyB,CACvC,IAAMC,EAAoBC,GAiBjBH,EAAA,cAAAA,EAAA,aAAE,EAGX,MAAO,CACL,mBACEI,GAMEJ,EAAM,eAAsCI,CAAI,GAChDA,EAAK,OAASF,EAGlB,UAAWA,CACb,CACF,CCpCO,GAAM,CAAE,mBAAAG,EAAoB,UAAWC,CAAiB,EAC7DC,EAAuB","names":["React","createResponsiveRow","isResponsiveColumn","props","childrenArray","responsiveColumns","node","totalColumnSpan","acc","spanForColumn","pl","pr","oneColumnMaxWidth","i","columnProps","columnSpan","React","createResponsiveColumn","ResponsiveColumn","_props","node","isResponsiveColumn","ResponsiveColumn","createResponsiveColumn"]}