list view and iframe

WordPress · Aug 30, 2024 · 62b2c0b · 62b2c0b
1 parent 90c29c7
commit 62b2c0b
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 11 deletions.
diff --git a/_app/src/HomePage.js b/_app/src/HomePage.js
@@ -12,6 +12,19 @@ const fields = [
 		label: 'Slug',
 		enableGlobalSearch: true,
 		enableHiding: false,
+		// render: ( { item } ) => {
+		// 	return (
+		// 		<span className="link_example">
+		// 			<a
+		// 				target="_blank"
+		// 				href={ `https://github.com/WordPress/block-development-examples/tree/trunk/plugins/${ item.slug }/README.md` }
+		// 				rel="noreferrer"
+		// 			>
+		// 				{ item.slug }
+		// 			</a>
+		// 		</span>
+		// 	);
+		// },
 	},
 	{
 		id: 'folder',
@@ -99,18 +112,25 @@ const defaultLayouts = {
 			primaryField: 'slug',
 		},
 	},
+	list: {
+		layout: {
+			primaryField: 'slug',
+		},
+	},
 };
 
 const DEFAULT_VIEW = {
-	type: 'table',
+	type: 'list',
 	hiddenFields: [],
-	perPage: 100,
+	perPage: 5,
 	filters: [],
 	fields: [ 'slug', 'folder', 'demo', 'zip', 'description', 'tags' ],
 };
 
 const Examples = () => {
 	const [ searchParams, setSearchParams ] = useSearchParams();
+	const [ activeLayout, setActiveLayout ] = useState();
+	const [ selectedExample, setSelectedExample ] = useState();
 	const [ filterTags, setFilterTags ] = useState( () => {
 		try {
 			return searchParams.get( 'tags' ) || '';
@@ -144,7 +164,14 @@ const Examples = () => {
 	}, [ view ] );
 
 	const onChangeView = ( newView ) => {
+		const layout = newView.type;
 		const filters = newView?.filters || [];
+		setActiveLayout( layout );
+		if ( layout === 'list' ) {
+			console.log( 'enable something...' );
+		} else {
+			console.log( 'disable something...' );
+		}
 		if ( filters.length ) {
 			setFilterTags( filters.map( ( { value } ) => value ).join( ',' ) );
 			setFilterOperator( filters[ 0 ].operator );
@@ -154,6 +181,9 @@ const Examples = () => {
 		}
 		setView( newView );
 	};
+	const onChangeSelection = ( [ selectedExampleSlug ] ) => {
+		setSelectedExample( selectedExampleSlug );
+	};
 	useEffect( () => {
 		if ( filterTags ) {
 			setSearchParams( { tags: filterTags, operator: filterOperator } );
@@ -162,6 +192,19 @@ const Examples = () => {
 		}
 	}, [ filterTags, filterOperator, setSearchParams ] );
 
+	const _DataViews = () => (
+		<DataViews
+			data={ processedData }
+			fields={ fields }
+			view={ view }
+			getItemId={ ( item ) => item.slug }
+			onChangeView={ onChangeView }
+			onChangeSelection={ onChangeSelection }
+			paginationInfo={ paginationInfo }
+			defaultLayouts={ defaultLayouts }
+		/>
+	);
+
 	return (
 		<>
 			<div className="intro">
@@ -176,15 +219,22 @@ const Examples = () => {
 					</a>
 				</p>
 			</div>
-			<DataViews
-				data={ processedData }
-				fields={ fields }
-				view={ view }
-				getItemId={ ( item ) => item.slug }
-				onChangeView={ onChangeView }
-				paginationInfo={ paginationInfo }
-				defaultLayouts={ defaultLayouts }
-			/>
+			{ activeLayout === 'list' ? (
+				<div className="viewsContainer">
+					<div className="dataViewsContainer">
+						<_DataViews />
+					</div>
+					<div className="iframeContainer">
+						<iframe
+							src={ `https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/${ selectedExample }/_playground/blueprint.json` }
+							title="Example Iframe" // Title for accessibility
+							loading="lazy" // Optional: Defer loading the iframe until it is visible
+						/>
+					</div>
+				</div>
+			) : (
+				<_DataViews />
+			) }
 		</>
 	);
 };

diff --git a/_app/src/styles.scss b/_app/src/styles.scss
@@ -27,6 +27,18 @@ body {
 	}
 }
 
+.link_example {
+	padding-right: 20px;
+}
+
+.link_example:hover {
+	text-decoration: underline;
+
+	::after {
+		content: " 🔗";
+	}
+}
+
 .tags_example {
 	display: flex;
 	flex-wrap: wrap;
@@ -38,3 +50,53 @@ body {
 		margin: 2px;
 	}
 }
+
+.dataviews-view-table tr td:first-child,
+.dataviews-view-table tr th:first-child {
+	min-width: 300px;
+}
+
+.viewsContainer {
+
+	.dataViewsContainer {
+		width: 40%;
+		float: left;
+	}
+
+	.iframeContainer {
+		width: 60%;
+		float: left;
+	}
+}
+
+.dataviews-view-list {
+	list-style-type: none;
+}
+
+iframe {
+	background-color: initial;
+	box-sizing: border-box;
+	display: block;
+	height: 100vh;
+	width: 100%;
+}
+
+.dataviews-view-list .dataviews-view-list__media-wrapper,
+.dataviews-view-list li:not(.is-selected) .dataviews-view-list__primary-field {
+	display: none;
+}
+
+.dataviews-view-list__fields > .dataviews-view-list__field:nth-of-type(1),
+.dataviews-view-list__fields > .dataviews-view-list__field:nth-of-type(2),
+.dataviews-view-list__fields > .dataviews-view-list__field:nth-of-type(3),
+.dataviews-view-list__fields > .dataviews-view-list__field:nth-of-type(4) {
+	font-size: 1.5em;
+}
+
+.dataviews-view-list__fields > .dataviews-view-list__field a {
+	text-decoration: none;
+}
+
+.dataviews-view-list__fields > .dataviews-view-list__field:nth-of-type(5) {
+	flex: 1 1 100%;
+}