@prismicio/react 3.1.0 → 3.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/PrismicTable.js +2 -2
- package/dist/PrismicTable.js.map +1 -1
- package/dist/package.json.js +1 -1
- package/package.json +3 -3
- package/src/PrismicTable.tsx +4 -12
package/dist/PrismicTable.js
CHANGED
|
@@ -15,12 +15,12 @@ function PrismicTable(props) {
|
|
|
15
15
|
return fallback;
|
|
16
16
|
}
|
|
17
17
|
const { table: Table, thead: Thead, tbody: Tbody } = { ...defaultComponents, ...components };
|
|
18
|
-
return jsxs(Table, { table: field, children: [field.head && jsx(Thead, { head: field.head, children: field.head.rows.map((row) => jsx(TableRow, { row, components },
|
|
18
|
+
return jsxs(Table, { table: field, children: [field.head && jsx(Thead, { head: field.head, children: field.head.rows.map((row) => jsx(TableRow, { row, components }, row.key)) }), jsx(Tbody, { body: field.body, children: field.body.rows.map((row) => jsx(TableRow, { row, components }, row.key)) })] });
|
|
19
19
|
}
|
|
20
20
|
function TableRow(props) {
|
|
21
21
|
const { row, components } = props;
|
|
22
22
|
const { tr: Tr, th: Th, td: Td } = { ...defaultComponents, ...components };
|
|
23
|
-
return jsx(Tr, { row, children: row.cells.map((cell) => cell.type === "header" ? jsx(Th, { cell, children: jsx(PrismicRichText, { field: cell.content, components }) },
|
|
23
|
+
return jsx(Tr, { row, children: row.cells.map((cell) => cell.type === "header" ? jsx(Th, { cell, children: jsx(PrismicRichText, { field: cell.content, components }) }, cell.key) : jsx(Td, { cell, children: jsx(PrismicRichText, { field: cell.content, components }) }, cell.key)) });
|
|
24
24
|
}
|
|
25
25
|
export {
|
|
26
26
|
PrismicTable
|
package/dist/PrismicTable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicTable.js","sources":["../src/PrismicTable.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n\tisFilled,\n\tTableField,\n\tTableFieldHead,\n\tTableFieldHeadRow,\n\tTableFieldBody,\n\tTableFieldBodyRow,\n\tTableFieldHeaderCell,\n\tTableFieldDataCell,\n} from \"@prismicio/client\";\n\nimport { JSXMapSerializer, PrismicRichText } from \"./PrismicRichText.js\";\n\ntype TableComponents = {\n\ttable?: (props: {\n\t\ttable: TableField<\"filled\">;\n\t\tchildren: ReactNode;\n\t}) => ReactNode;\n\tthead?: (props: { head: TableFieldHead; children: ReactNode }) => ReactNode;\n\ttbody?: (props: { body: TableFieldBody; children: ReactNode }) => ReactNode;\n\ttr?: (props: {\n\t\trow: TableFieldHeadRow | TableFieldBodyRow;\n\t\tchildren: ReactNode;\n\t}) => ReactNode;\n\tth?: (props: {\n\t\tcell: TableFieldHeaderCell;\n\t\tchildren: ReactNode;\n\t}) => ReactNode;\n\ttd?: (props: { cell: TableFieldDataCell; children: ReactNode }) => ReactNode;\n};\n\nconst defaultComponents: Required<TableComponents> = {\n\ttable: ({ children }) => <table>{children}</table>,\n\tthead: ({ children }) => <thead>{children}</thead>,\n\ttbody: ({ children }) => <tbody>{children}</tbody>,\n\ttr: ({ children }) => <tr>{children}</tr>,\n\tth: ({ children }) => <th>{children}</th>,\n\ttd: ({ children }) => <td>{children}</td>,\n};\n\n/** Props for `<PrismicTable>`. */\nexport type PrismicTableProps = {\n\t/** The Prismic table field to render. */\n\tfield: TableField;\n\n\t/**\n\t * An object that maps a table block to a React component.\n\t *\n\t * @example A map serializer.\n\t *\n\t * ```jsx\n\t * {\n\t * table: ({children}) => <table>{children}</table>\n\t * thead: ({children}) => <thead>{children}</thead>\n\t * }\n\t * ```\n\t */\n\tcomponents?: JSXMapSerializer & TableComponents;\n\n\t/**\n\t * The value to be rendered when the field is empty. If a fallback is not\n\t * given, `null` will be rendered.\n\t */\n\tfallback?: ReactNode;\n};\n\n/**\n * React component that renders content from a Prismic table field. By default,\n * HTML elements are rendered for each piece of content. A `tbody` block will\n * render a `<tbody>` HTML element, for example.\n *\n * To customize the components that are rendered, provide a map serializer to\n * the `components` prop.\n *\n * @example Rendering a table field using the default HTMl elements.\n *\n * ```jsx\n * <PrismicTable field={document.data.my_table} />;\n * ```\n *\n * @example Rendering a table field using a custom set of React components.\n *\n * ```jsx\n * <PrismicTable\n * \tfield={document.data.my_table}\n * \tcomponents={{\n * \t\ttbody: ({ children }) => (\n * \t\t\t<tbody className=\"my-class\">{children}</tbody>\n * \t\t),\n * \t}}\n * />;\n * ```\n *\n * @param props - Props for the component.\n *\n * @returns The table field's content as React components.\n *\n * @see Learn about table fields {@link https://prismic.io/docs/core-concepts/table}\n */\nexport function PrismicTable(props: PrismicTableProps) {\n\tconst { field, components, fallback = null } = props;\n\n\tif (!isFilled.table(field)) {\n\t\treturn fallback;\n\t}\n\n\tconst {\n\t\ttable: Table,\n\t\tthead: Thead,\n\t\ttbody: Tbody,\n\t} = { ...defaultComponents, ...components };\n\n\treturn (\n\t\t<Table table={field}>\n\t\t\t{field.head && (\n\t\t\t\t<Thead head={field.head}>\n\t\t\t\t\t{field.head.rows.map((row) => (\n\t\t\t\t\t\t<TableRow
|
|
1
|
+
{"version":3,"file":"PrismicTable.js","sources":["../src/PrismicTable.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport {\n\tisFilled,\n\tTableField,\n\tTableFieldHead,\n\tTableFieldHeadRow,\n\tTableFieldBody,\n\tTableFieldBodyRow,\n\tTableFieldHeaderCell,\n\tTableFieldDataCell,\n} from \"@prismicio/client\";\n\nimport { JSXMapSerializer, PrismicRichText } from \"./PrismicRichText.js\";\n\ntype TableComponents = {\n\ttable?: (props: {\n\t\ttable: TableField<\"filled\">;\n\t\tchildren: ReactNode;\n\t}) => ReactNode;\n\tthead?: (props: { head: TableFieldHead; children: ReactNode }) => ReactNode;\n\ttbody?: (props: { body: TableFieldBody; children: ReactNode }) => ReactNode;\n\ttr?: (props: {\n\t\trow: TableFieldHeadRow | TableFieldBodyRow;\n\t\tchildren: ReactNode;\n\t}) => ReactNode;\n\tth?: (props: {\n\t\tcell: TableFieldHeaderCell;\n\t\tchildren: ReactNode;\n\t}) => ReactNode;\n\ttd?: (props: { cell: TableFieldDataCell; children: ReactNode }) => ReactNode;\n};\n\nconst defaultComponents: Required<TableComponents> = {\n\ttable: ({ children }) => <table>{children}</table>,\n\tthead: ({ children }) => <thead>{children}</thead>,\n\ttbody: ({ children }) => <tbody>{children}</tbody>,\n\ttr: ({ children }) => <tr>{children}</tr>,\n\tth: ({ children }) => <th>{children}</th>,\n\ttd: ({ children }) => <td>{children}</td>,\n};\n\n/** Props for `<PrismicTable>`. */\nexport type PrismicTableProps = {\n\t/** The Prismic table field to render. */\n\tfield: TableField;\n\n\t/**\n\t * An object that maps a table block to a React component.\n\t *\n\t * @example A map serializer.\n\t *\n\t * ```jsx\n\t * {\n\t * table: ({children}) => <table>{children}</table>\n\t * thead: ({children}) => <thead>{children}</thead>\n\t * }\n\t * ```\n\t */\n\tcomponents?: JSXMapSerializer & TableComponents;\n\n\t/**\n\t * The value to be rendered when the field is empty. If a fallback is not\n\t * given, `null` will be rendered.\n\t */\n\tfallback?: ReactNode;\n};\n\n/**\n * React component that renders content from a Prismic table field. By default,\n * HTML elements are rendered for each piece of content. A `tbody` block will\n * render a `<tbody>` HTML element, for example.\n *\n * To customize the components that are rendered, provide a map serializer to\n * the `components` prop.\n *\n * @example Rendering a table field using the default HTMl elements.\n *\n * ```jsx\n * <PrismicTable field={document.data.my_table} />;\n * ```\n *\n * @example Rendering a table field using a custom set of React components.\n *\n * ```jsx\n * <PrismicTable\n * \tfield={document.data.my_table}\n * \tcomponents={{\n * \t\ttbody: ({ children }) => (\n * \t\t\t<tbody className=\"my-class\">{children}</tbody>\n * \t\t),\n * \t}}\n * />;\n * ```\n *\n * @param props - Props for the component.\n *\n * @returns The table field's content as React components.\n *\n * @see Learn about table fields {@link https://prismic.io/docs/core-concepts/table}\n */\nexport function PrismicTable(props: PrismicTableProps) {\n\tconst { field, components, fallback = null } = props;\n\n\tif (!isFilled.table(field)) {\n\t\treturn fallback;\n\t}\n\n\tconst {\n\t\ttable: Table,\n\t\tthead: Thead,\n\t\ttbody: Tbody,\n\t} = { ...defaultComponents, ...components };\n\n\treturn (\n\t\t<Table table={field}>\n\t\t\t{field.head && (\n\t\t\t\t<Thead head={field.head}>\n\t\t\t\t\t{field.head.rows.map((row) => (\n\t\t\t\t\t\t<TableRow key={row.key} row={row} components={components} />\n\t\t\t\t\t))}\n\t\t\t\t</Thead>\n\t\t\t)}\n\t\t\t<Tbody body={field.body}>\n\t\t\t\t{field.body.rows.map((row) => (\n\t\t\t\t\t<TableRow key={row.key} row={row} components={components} />\n\t\t\t\t))}\n\t\t\t</Tbody>\n\t\t</Table>\n\t);\n}\n\ntype TableRowProps = {\n\trow: TableFieldHeadRow | TableFieldBodyRow;\n\tcomponents?: JSXMapSerializer & TableComponents;\n};\n\nfunction TableRow(props: TableRowProps) {\n\tconst { row, components } = props;\n\n\tconst { tr: Tr, th: Th, td: Td } = { ...defaultComponents, ...components };\n\n\treturn (\n\t\t<Tr row={row}>\n\t\t\t{row.cells.map((cell) =>\n\t\t\t\tcell.type === \"header\" ? (\n\t\t\t\t\t<Th key={cell.key} cell={cell}>\n\t\t\t\t\t\t<PrismicRichText field={cell.content} components={components} />\n\t\t\t\t\t</Th>\n\t\t\t\t) : (\n\t\t\t\t\t<Td key={cell.key} cell={cell}>\n\t\t\t\t\t\t<PrismicRichText field={cell.content} components={components} />\n\t\t\t\t\t</Td>\n\t\t\t\t),\n\t\t\t)}\n\t\t</Tr>\n\t);\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;AAgCA,MAAM,oBAA+C;AAAA,EACpD,OAAO,CAAC,EAAE,eAAeA,IAAQ,SAAA,EAAA,UAAiB;AAAA,EAClD,OAAO,CAAC,EAAE,eAAeA,IAAQ,SAAA,EAAA,UAAiB;AAAA,EAClD,OAAO,CAAC,EAAE,eAAeA,IAAQ,SAAA,EAAA,UAAiB;AAAA,EAClD,IAAI,CAAC,EAAE,eAAeA,IAAK,MAAA,EAAA,UAAc;AAAA,EACzC,IAAI,CAAC,EAAE,eAAeA,IAAK,MAAA,EAAA,UAAc;AAAA,EACzC,IAAI,CAAC,EAAE,SAAA,MAAeA,IAAK,MAAA,EAAA,SAAc,CAAA;;AA8DpC,SAAU,aAAa,OAAwB;AACpD,QAAM,EAAE,OAAO,YAAY,WAAW,KAAS,IAAA;AAE/C,MAAI,CAAC,SAAS,MAAM,KAAK,GAAG;AACpB,WAAA;AAAA,EAAA;AAGR,QAAM,EACL,OAAO,OACP,OAAO,OACP,OAAO,UACJ,EAAE,GAAG,mBAAmB,GAAG,WAAU;AAEzC,SACCC,KAAC,OAAK,EAAC,OAAO,kBACZ,MAAM,QACND,IAAC,OAAK,EAAC,MAAM,MAAM,MACjB,UAAA,MAAM,KAAK,KAAK,IAAI,CAAC,QACrBA,IAAC,UAAQ,EAAe,KAAU,WAAsB,GAAzC,IAAI,GAAG,CACtB,EAAA,CACM,GAETA,IAAC,OAAM,EAAA,MAAM,MAAM,MAAI,UACrB,MAAM,KAAK,KAAK,IAAI,CAAC,QACrBA,IAAC,YAAuB,KAAU,WAAnB,GAAA,IAAI,GAAG,CACtB,EAAC,CAAA,CACK,EAAA,CACD;AAEV;AAOA,SAAS,SAAS,OAAoB;AAC/B,QAAA,EAAE,KAAK,WAAA,IAAe;AAE5B,QAAM,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,OAAO,EAAE,GAAG,mBAAmB,GAAG,WAAU;AAGvE,SAAAA,IAAC,MAAG,KACF,UAAA,IAAI,MAAM,IAAI,CAAC,SACf,KAAK,SAAS,WACbA,IAAC,IAAE,EAAgB,gBAClBA,IAAC,mBAAgB,OAAO,KAAK,SAAS,WAAsB,CAAA,KADpD,KAAK,GAAG,IAIjBA,IAAC,MAAkB,MAClB,UAAAA,IAAC,iBAAe,EAAC,OAAO,KAAK,SAAS,iBAD9B,KAAK,GAAG,CAGjB,GACD;AAGJ;"}
|
package/dist/package.json.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prismicio/react",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.2.0",
|
|
4
4
|
"description": "React components and hooks to fetch and present Prismic content",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"typescript",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"release:alpha:dry": "standard-version --release-as major --prerelease alpha --dry-run",
|
|
51
51
|
"release:dry": "standard-version --dry-run",
|
|
52
52
|
"size": "size-limit",
|
|
53
|
-
"test": "npm run lint && npm run types && npm run build && npm run size",
|
|
53
|
+
"test": "npm run lint && npm run types && npm run build && npm run e2e && npm run size && npm run e2e",
|
|
54
54
|
"types": "tsc --noEmit"
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@eslint/js": "^9.19.0",
|
|
61
61
|
"@playwright/test": "^1.50.0",
|
|
62
|
-
"@prismicio/client": "^7.
|
|
62
|
+
"@prismicio/client": "^7.17.0",
|
|
63
63
|
"@rollup/plugin-typescript": "^12.1.2",
|
|
64
64
|
"@size-limit/preset-small-lib": "^11.1.6",
|
|
65
65
|
"@types/react": "^19.0.8",
|
package/src/PrismicTable.tsx
CHANGED
|
@@ -116,21 +116,13 @@ export function PrismicTable(props: PrismicTableProps) {
|
|
|
116
116
|
{field.head && (
|
|
117
117
|
<Thead head={field.head}>
|
|
118
118
|
{field.head.rows.map((row) => (
|
|
119
|
-
<TableRow
|
|
120
|
-
key={JSON.stringify(row)}
|
|
121
|
-
row={row}
|
|
122
|
-
components={components}
|
|
123
|
-
/>
|
|
119
|
+
<TableRow key={row.key} row={row} components={components} />
|
|
124
120
|
))}
|
|
125
121
|
</Thead>
|
|
126
122
|
)}
|
|
127
123
|
<Tbody body={field.body}>
|
|
128
124
|
{field.body.rows.map((row) => (
|
|
129
|
-
<TableRow
|
|
130
|
-
key={JSON.stringify(row)}
|
|
131
|
-
row={row}
|
|
132
|
-
components={components}
|
|
133
|
-
/>
|
|
125
|
+
<TableRow key={row.key} row={row} components={components} />
|
|
134
126
|
))}
|
|
135
127
|
</Tbody>
|
|
136
128
|
</Table>
|
|
@@ -151,11 +143,11 @@ function TableRow(props: TableRowProps) {
|
|
|
151
143
|
<Tr row={row}>
|
|
152
144
|
{row.cells.map((cell) =>
|
|
153
145
|
cell.type === "header" ? (
|
|
154
|
-
<Th key={
|
|
146
|
+
<Th key={cell.key} cell={cell}>
|
|
155
147
|
<PrismicRichText field={cell.content} components={components} />
|
|
156
148
|
</Th>
|
|
157
149
|
) : (
|
|
158
|
-
<Td key={
|
|
150
|
+
<Td key={cell.key} cell={cell}>
|
|
159
151
|
<PrismicRichText field={cell.content} components={components} />
|
|
160
152
|
</Td>
|
|
161
153
|
),
|