Fix (design library): improve selecting of patterns

src/components/design-library-list/design-library-list-item.js

@@ -26,15 +26,16 @@ import { __ } from '@wordpress/i18n'
 
 const DesignLibraryListItem = memo( props => {
 	const {
-		selectedTab,
-		plan, label,
-		selectedNum,
-		selectedData,
-		isMultiSelectBusy,
 		shouldRender,
 		presetMarks,
+		previewProps,
+		isMultiSelectBusy,
 	} = props
 
+	const {
+		selectedTab, selectedNum, selectedData, plan, label,
+	} = previewProps
+
 	const spacingSize = Array.isArray( presetMarks ) && presetMarks.length >= 2
 		? presetMarks[ presetMarks.length - 2 ].value
 		: 120
@@ -50,7 +51,7 @@ const DesignLibraryListItem = memo( props => {
 		shadowBodySizeRef, blocksForSubstitutionRef,
 		previewSize, onClickDesign,
 		updateShadowBodySize,
-	} = usePreviewRenderer( props, shouldRender, spacingSize,
+	} = usePreviewRenderer( previewProps, shouldRender, spacingSize,
 		ref, hostRef, shadowRoot, setIsLoading )
 
 	const {
@@ -76,6 +77,7 @@ const DesignLibraryListItem = memo( props => {
 	], {
 		[ `ugb--is-${ plan }` ]: ! isPro && plan !== 'free',
 		'ugb--is-toggled': selectedNum,
+		'ugb--is-hidden': ! shouldRender,
 	} )
 
 	const onClickHost = e => {

src/components/design-library-list/editor.scss

@@ -42,6 +42,8 @@
 	// box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
 	border: 1px solid #0000001a;
 	box-shadow: none;
+	opacity: 1;
+	will-change: opacity;
 	.ugb-button-component {
 		transition: opacity 0.4s cubic-bezier(0.2, 0.6, 0.4, 1);
 		opacity: 0;
@@ -56,6 +58,9 @@
 			opacity: 1;
 		}
 	}
+	&.ugb--is-hidden {
+		opacity: 0;
+	}
 	footer {
 		line-height: 18px;
 		background-color: #fff;

src/components/design-library-list/index.js

@@ -18,16 +18,13 @@ import {
 	useState, useEffect, useRef, memo, useMemo,
 } from '@wordpress/element'
 import { usePresetControls } from '~stackable/hooks'
+import { useDesignLibraryContext } from '../modal-design-library/modal'
 
 const DesignLibraryList = memo( props => {
 	const {
 		className = '',
 		designs,
 		isBusy,
-		onSelectMulti,
-		selectedDesigns = [],
-		selectedDesignData = [],
-		selectedTab,
 	} = props
 	const containerRef = useRef( null )
 
@@ -48,29 +45,11 @@ const DesignLibraryList = memo( props => {
 		{ ! isBusy && <>
 			<div className={ listClasses }>
 				{ ( designs || [] ).map( ( design, i ) => {
-					const selectedNum = selectedDesigns.indexOf( design.id || design.designId ) + 1
-					const selectedData = selectedNum ? selectedDesignData[ selectedNum - 1 ] : null
-
-					const previewProps = {
-						designId: design.id || design.designId,
-						template: design.template || design.content,
-						category: design.category,
-						containerScheme: props.containerScheme,
-						backgroundScheme: props.backgroundScheme,
-						enableBackground: props.enableBackground,
-						onClick: onSelectMulti,
-					}
-
 					return (
 						<DesignLibraryItem
+							design={ design }
 							key={ design.id || design.designId }
-							plan={ design.plan }
-							label={ design.label || design.title }
-							selectedNum={ selectedNum }
-							selectedData={ selectedData }
-							selectedTab={ selectedTab }
 							designIndex={ i }
-							{ ...previewProps }
 						/>
 					)
 				} ) }
@@ -92,10 +71,53 @@ DesignLibraryList.defaultProps = {
 
 export default DesignLibraryList
 
-const DesignLibraryItem = props => {
-	const { selectedTab, designIndex } = props
+const DesignLibraryItem = memo( props => {
+	const { design, designIndex } = props
 	const wrapperRef = useRef( null )
 	const [ shouldRender, setShouldRender ] = useState( designIndex < 9 )
+
+	const [ selectedTab,
+		selectedDesignIds,
+		selectedDesignData,
+		onSelectDesign,
+		isMultiSelectBusy,
+		containerScheme,
+		backgroundScheme,
+		enableBackground,
+	] = useDesignLibraryContext()
+
+	const { selectedNum, selectedData } = useMemo( () => {
+		const selectedNum = selectedDesignIds.indexOf( design.id || design.designId ) + 1
+		const selectedData = selectedNum ? selectedDesignData[ selectedNum - 1 ] : null
+
+		return { selectedNum, selectedData }
+	}, [ selectedDesignIds ] )
+
+	const previewProps = useMemo( () => ( {
+		designId: design.id || design.designId,
+		template: design.template || design.content,
+		category: design.category,
+		plan: design.plan,
+		label: design.label,
+		containerScheme,
+		backgroundScheme,
+		enableBackground: selectedTab !== 'pages' ? enableBackground : true,
+		selectedTab,
+		selectedNum,
+		selectedData,
+		onClick: onSelectDesign,
+	} ), [
+		// Only track designId for memoization; other design properties will update when designId changes
+		design.id || design.designId,
+		containerScheme,
+		backgroundScheme,
+		enableBackground,
+		selectedTab,
+		// selectedNum and selectedData are always in sync; updating selectedNum also updates selectedData
+		selectedNum,
+		onSelectDesign,
+	] )
+
 	const { getPresetMarks } = usePresetControls( 'spacingSizes' )
 
 	// Intentionally no dependencies: presetMarks won't change while the design library is open
@@ -135,7 +157,7 @@ const DesignLibraryItem = props => {
 		const observer = new IntersectionObserver( ( [ entry ] ) => {
 			// reduce flicker during rapid scrolls
 			requestAnimationFrame( () => {
-				requestAnimationFrame( () => setShouldRender( entry.isIntersecting ) )
+				requestAnimationFrame( () => setShouldRender( entry.isIntersecting || entry.intersectionRatio > 0 ) )
 			} )
 		}, {
 			root: rootEl,
@@ -151,7 +173,11 @@ const DesignLibraryItem = props => {
 
 	return (
 		<div ref={ wrapperRef }>
-			<DesignLibraryListItem { ...props } shouldRender={ shouldRender } presetMarks={ presetMarks } />
+			<DesignLibraryListItem
+				previewProps={ previewProps }
+				isMultiSelectBusy={ isMultiSelectBusy }
+				shouldRender={ shouldRender }
+				presetMarks={ presetMarks } />
 		</div>
 	)
-}
+} )

src/components/modal-design-library/header-actions.js

@@ -0,0 +1,104 @@
+
+import AdvancedToolbarControl from '../advanced-toolbar-control'
+import Button from '../button'
+/**
+ * External deprendencies
+ */
+import {
+	i18n, isPro, devMode,
+} from 'stackable'
+
+/**
+ * WordPress deprendencies
+ */
+import {
+	Dashicon,
+	Dropdown,
+	ToggleControl,
+} from '@wordpress/components'
+
+import { __ } from '@wordpress/i18n'
+
+const PLAN_OPTIONS = [ { key: '', label: __( 'All', i18n ) }, { key: 'free', label: __( 'Free', i18n ) }, { key: 'premium', label: __( 'Premium', i18n ) } ]
+
+export const HeaderActions = props => {
+	const {
+		selectedTab, setSelectedTab, selectedPlan, setSelectedPlan, setDoReset,
+	} = props
+	return <>
+		{ /* DEV NOTE: hide for now */ }
+		<AdvancedToolbarControl
+			className="stk-design-library-tabs"
+			fullwidth={ false }
+			controls={ [
+				{
+					value: 'patterns',
+					title: __( 'Patterns', i18n ),
+				},
+				{
+					value: 'pages',
+					title: __( 'Pages', i18n ),
+				},
+			] }
+			value={ selectedTab }
+			onChange={ setSelectedTab }
+			isToggleOnly={ true }
+			allowReset={ false }
+		/>
+
+		<div className="stk-design-library__header-settings">
+			{ devMode && (
+				<ToggleControl
+					label="Dev Mode"
+					checked={ !! localStorage.getItem( 'stk__design_library__dev_mode' ) || false }
+					onChange={ value => {
+						localStorage.setItem( 'stk__design_library__dev_mode', value ? '1' : '' )
+						setTimeout( () => {
+							document?.querySelector( '.ugb-insert-library-button__wrapper .ugb-insert-library-button' ).click()
+						}, 100 )
+						props.onClose()
+					} }
+					__nextHasNoMarginBottom
+				/>
+			) }
+			<Button
+				icon="image-rotate"
+				iconSize={ 14 }
+				label={ __( 'Refresh Library', i18n ) }
+				className="ugb-modal-design-library__refresh"
+				onClick={ () => setDoReset( true ) }
+			/>
+			{ ! isPro && <Dropdown
+				focusOnMount="container"
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						onClick={ onToggle }
+						style={ { height: 'auto' } }
+						icon="arrow-down-alt2"
+						iconSize={ 12 }
+						iconPosition="right"
+						variant="secondary"
+					>
+						<Dashicon icon="lock" size={ 12 } />
+						<span>{ selectedPlan.label }</span>
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<div className="stk-design-library__plan-dropdown">
+						{ PLAN_OPTIONS.map( ( plan, i ) => {
+							return <Button
+								key={ i }
+								onClick={ () => {
+									setSelectedPlan( plan )
+									onClose()
+								} }
+							>
+								{ plan.label }
+							</Button>
+						} ) }
+					</div>
+				) }
+			/> }
+		</div>
+	</>
+}