This is an automated email from the ASF dual-hosted git repository. urfree pushed a commit to branch matrix-page in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
commit 5b0c5287a00cdac2585f7357c7f26488b7b5bba2 Author: Li Li <[email protected]> AuthorDate: Wed Mar 22 16:26:23 2023 +0800 matrix page with demo datas Signed-off-by: Li Li <[email protected]> --- package.json | 6 ++++ src/css/custom.css | 27 ++++++++++++++- src/pages/matrix.js | 94 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 126 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 98a7c2eb56b..9efd0177b63 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "clsx": "^1.1.1", "compare-versions": "^4.1.3", "execa": "^6.1.0", + "faker": "^6.6.6", "file-loader": "^6.2.0", "font-awesome": "^4.7.0", "hast-util-is-element": "^1.1.0", @@ -45,16 +46,21 @@ "npm": "^8.1.3", "prism-react-renderer": "^1.2.1", "react": "^17.0.2", + "react-base-table": "^1.13.4", "react-dom": "^17.0.2", "react-markdown": "^8.0.0", "react-md-file": "^2.0.0", + "react-overlays": "^5.2.1", + "react-sortable-hoc": "^2.0.0", "react-svg": "^14.1.13", + "react-texty": "^0.6.0", "rehype-katex": "^5.0.0", "remark-linkify-regex": "^1.0.0", "remark-math": "^3.0.1", "replace-in-file": "^6.3.2", "semver": "^7.3.8", "sine-waves": "^0.3.0", + "styled-components": "^5.3.9", "url-loader": "^4.1.1" }, "browserslist": { diff --git a/src/css/custom.css b/src/css/custom.css index 37fe6d2a1f5..d2cd0deda9b 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1267,7 +1267,7 @@ div[role="tabpanel"] { padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal); } -.tabs-container>.margin-top--md { +.tabs-container > .margin-top--md { margin-top: 0 !important; } @@ -1280,3 +1280,28 @@ table th, table td { border: none; } + +.BaseTable { + background-color: transparent !important; +} + +.BaseTable__table { + background-color: transparent !important; +} + +.BaseTable__row { + background-color: transparent !important; + border-bottom: 0px solid rgb(209 213 219) !important; +} + +.BaseTable__header { + background-color: transparent !important; +} + +.BaseTable__header-row { + background-color: transparent !important; +} + +.BaseTable__row-cell { + border-bottom: 1px solid rgb(209 213 219) !important; +} \ No newline at end of file diff --git a/src/pages/matrix.js b/src/pages/matrix.js new file mode 100644 index 00000000000..e1ff5e8e994 --- /dev/null +++ b/src/pages/matrix.js @@ -0,0 +1,94 @@ +import Layout from "@theme/Layout"; +import React from "react"; +import "react-base-table/styles.css"; +import BaseTable, { + Column, + SortOrder, + AutoResizer, + normalizeColumns, + callOrReturn, + unflatten, + TableHeader as BaseTableHeader, + TableRow as BaseTableRow, +} from "react-base-table"; + +const generateColumns = (count = 10, prefix = "column-", props) => + new Array(count).fill(0).map((column, columnIndex) => ({ + ...props, + key: `${prefix}${columnIndex}`, + dataKey: `${prefix}${columnIndex}`, + title: `Column ${columnIndex}`, + width: 150, + })); + +const generateData = (columns, count = 200, prefix = "row-") => + new Array(count).fill(0).map((row, rowIndex) => { + return columns.reduce( + (rowData, column, columnIndex) => { + if (columnIndex == 0 && rowIndex % 2 == 1) { + rowData[column.dataKey] = ``; + } else { + rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`; + } + return rowData; + }, + { + id: `${prefix}${rowIndex}`, + parentId: null, + } + ); + }); + +const columns = generateColumns(10); +const data = generateData(columns, 200); + +const fixedColumns = columns.map((column, columnIndex) => { + let frozen; + if (columnIndex < 2) frozen = Column.FrozenDirection.LEFT; + return { ...column, frozen }; +}); + +const rowSpanIndex = 0; +fixedColumns[rowSpanIndex].rowSpan = ({ rowData, rowIndex }) => + rowIndex % 2 === 0 && rowIndex <= data.length - 2 ? 2 : 1; + +const rowRenderer = ({ rowData, rowIndex, cells, columns }) => { + const rowSpan = columns[rowSpanIndex].rowSpan({ rowData, rowIndex }); + if (rowSpan > 1) { + const cell = cells[rowSpanIndex]; + const style = { + ...cell.props.style, + height: rowSpan * 50, + alignSelf: "flex-start", + zIndex: 1, + }; + cells[rowSpanIndex] = React.cloneElement(cell, { style }); + } + return cells; +}; + +export default function Matrix() { + return ( + <Layout> + <div className="tailwind"> + <div className="my-12 container"> + <div className="w-full h-[60vh]"> + <AutoResizer> + {({ width, height }) => ( + <BaseTable + fixed + width={width} + height={height} + columns={fixedColumns} + data={data} + rowRenderer={rowRenderer} + // overscanRowCount={2} + /> + )} + </AutoResizer> + </div> + </div> + </div> + </Layout> + ); +}
