Skip to content

Commit 1f5921d

Browse files
kaeizenkaeizen
committed
improve selection of patterns
1 parent 1f652ed commit 1f5921d

File tree

5 files changed

+420
-323
lines changed

5 files changed

+420
-323
lines changed

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,16 @@ import { __ } from '@wordpress/i18n'
2626

2727
const DesignLibraryListItem = memo( props => {
2828
const {
29-
selectedTab,
30-
plan, label,
31-
selectedNum,
32-
selectedData,
33-
isMultiSelectBusy,
3429
shouldRender,
3530
presetMarks,
31+
previewProps,
32+
isMultiSelectBusy,
3633
} = props
3734

35+
const {
36+
selectedTab, selectedNum, selectedData, plan, label,
37+
} = previewProps
38+
3839
const spacingSize = Array.isArray( presetMarks ) && presetMarks.length >= 2
3940
? presetMarks[ presetMarks.length - 2 ].value
4041
: 120
@@ -50,7 +51,7 @@ const DesignLibraryListItem = memo( props => {
5051
shadowBodySizeRef, blocksForSubstitutionRef,
5152
previewSize, onClickDesign,
5253
updateShadowBodySize,
53-
} = usePreviewRenderer( props, shouldRender, spacingSize,
54+
} = usePreviewRenderer( previewProps, shouldRender, spacingSize,
5455
ref, hostRef, shadowRoot, setIsLoading )
5556

5657
const {
@@ -76,6 +77,7 @@ const DesignLibraryListItem = memo( props => {
7677
], {
7778
[ `ugb--is-${ plan }` ]: ! isPro && plan !== 'free',
7879
'ugb--is-toggled': selectedNum,
80+
'ugb--is-hidden': ! shouldRender,
7981
} )
8082

8183
const onClickHost = e => {

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@
4242
// box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
4343
border: 1px solid #0000001a;
4444
box-shadow: none;
45+
opacity: 1;
46+
will-change: opacity;
4547
.ugb-button-component {
4648
transition: opacity 0.4s cubic-bezier(0.2, 0.6, 0.4, 1);
4749
opacity: 0;
@@ -56,6 +58,9 @@
5658
opacity: 1;
5759
}
5860
}
61+
&.ugb--is-visible {
62+
opacity: 0;
63+
}
5964
footer {
6065
line-height: 18px;
6166
background-color: #fff;

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

Lines changed: 54 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,13 @@ import {
1818
useState, useEffect, useRef, memo, useMemo,
1919
} from '@wordpress/element'
2020
import { usePresetControls } from '~stackable/hooks'
21+
import { useDesignLibraryContext } from '../modal-design-library/modal'
2122

2223
const DesignLibraryList = memo( props => {
2324
const {
2425
className = '',
2526
designs,
2627
isBusy,
27-
onSelectMulti,
28-
selectedDesigns = [],
29-
selectedDesignData = [],
30-
selectedTab,
3128
} = props
3229
const containerRef = useRef( null )
3330

@@ -48,29 +45,11 @@ const DesignLibraryList = memo( props => {
4845
{ ! isBusy && <>
4946
<div className={ listClasses }>
5047
{ ( designs || [] ).map( ( design, i ) => {
51-
const selectedNum = selectedDesigns.indexOf( design.id || design.designId ) + 1
52-
const selectedData = selectedNum ? selectedDesignData[ selectedNum - 1 ] : null
53-
54-
const previewProps = {
55-
designId: design.id || design.designId,
56-
template: design.template || design.content,
57-
category: design.category,
58-
containerScheme: props.containerScheme,
59-
backgroundScheme: props.backgroundScheme,
60-
enableBackground: props.enableBackground,
61-
onClick: onSelectMulti,
62-
}
63-
6448
return (
6549
<DesignLibraryItem
50+
design={ design }
6651
key={ design.id || design.designId }
67-
plan={ design.plan }
68-
label={ design.label || design.title }
69-
selectedNum={ selectedNum }
70-
selectedData={ selectedData }
71-
selectedTab={ selectedTab }
7252
designIndex={ i }
73-
{ ...previewProps }
7453
/>
7554
)
7655
} ) }
@@ -92,10 +71,53 @@ DesignLibraryList.defaultProps = {
9271

9372
export default DesignLibraryList
9473

95-
const DesignLibraryItem = props => {
96-
const { selectedTab, designIndex } = props
74+
const DesignLibraryItem = memo( props => {
75+
const { design, designIndex } = props
9776
const wrapperRef = useRef( null )
9877
const [ shouldRender, setShouldRender ] = useState( designIndex < 9 )
78+
79+
const [ selectedTab,
80+
selectedDesignIds,
81+
selectedDesignData,
82+
onSelectDesign,
83+
isMultiSelectBusy,
84+
containerScheme,
85+
backgroundScheme,
86+
enableBackground,
87+
] = useDesignLibraryContext()
88+
89+
const { selectedNum, selectedData } = useMemo( () => {
90+
const selectedNum = selectedDesignIds.indexOf( design.id || design.designId ) + 1
91+
const selectedData = selectedNum ? selectedDesignData[ selectedNum - 1 ] : null
92+
93+
return { selectedNum, selectedData }
94+
}, [ selectedDesignIds ] )
95+
96+
const previewProps = useMemo( () => ( {
97+
designId: design.id || design.designId,
98+
template: design.template || design.content,
99+
category: design.category,
100+
plan: design.plan,
101+
label: design.label,
102+
containerScheme,
103+
backgroundScheme,
104+
enableBackground: selectedTab !== 'pages' ? enableBackground : true,
105+
selectedTab,
106+
selectedNum,
107+
selectedData,
108+
onClick: onSelectDesign,
109+
} ), [
110+
// Only track designId for memoization; other design properties will update when designId changes
111+
design.id || design.designId,
112+
containerScheme,
113+
backgroundScheme,
114+
enableBackground,
115+
selectedTab,
116+
// selectedNum and selectedData are always in sync; updating selectedNum also updates selectedData
117+
selectedNum,
118+
onSelectDesign,
119+
] )
120+
99121
const { getPresetMarks } = usePresetControls( 'spacingSizes' )
100122

101123
// Intentionally no dependencies: presetMarks won't change while the design library is open
@@ -135,7 +157,7 @@ const DesignLibraryItem = props => {
135157
const observer = new IntersectionObserver( ( [ entry ] ) => {
136158
// reduce flicker during rapid scrolls
137159
requestAnimationFrame( () => {
138-
requestAnimationFrame( () => setShouldRender( entry.isIntersecting ) )
160+
requestAnimationFrame( () => setShouldRender( entry.isIntersecting || entry.intersectionRatio > 0 ) )
139161
} )
140162
}, {
141163
root: rootEl,
@@ -151,7 +173,11 @@ const DesignLibraryItem = props => {
151173

152174
return (
153175
<div ref={ wrapperRef }>
154-
<DesignLibraryListItem { ...props } shouldRender={ shouldRender } presetMarks={ presetMarks } />
176+
<DesignLibraryListItem
177+
previewProps={ previewProps }
178+
isMultiSelectBusy={ isMultiSelectBusy }
179+
shouldRender={ shouldRender }
180+
presetMarks={ presetMarks } />
155181
</div>
156182
)
157-
}
183+
} )

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

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
2+
import AdvancedToolbarControl from '../advanced-toolbar-control'
3+
import Button from '../button'
4+
/**
5+
* External deprendencies
6+
*/
7+
import {
8+
i18n, isPro, devMode,
9+
} from 'stackable'
10+
11+
/**
12+
* WordPress deprendencies
13+
*/
14+
import {
15+
Dashicon,
16+
Dropdown,
17+
ToggleControl,
18+
} from '@wordpress/components'
19+
20+
import { __ } from '@wordpress/i18n'
21+
22+
const PLAN_OPTIONS = [ { key: '', label: __( 'All', i18n ) }, { key: 'free', label: __( 'Free', i18n ) }, { key: 'premium', label: __( 'Premium', i18n ) } ]
23+
24+
export const HeaderActions = props => {
25+
const {
26+
selectedTab, setSelectedTab, selectedPlan, setSelectedPlan, setDoReset,
27+
} = props
28+
return <>
29+
{ /* DEV NOTE: hide for now */ }
30+
<AdvancedToolbarControl
31+
className="stk-design-library-tabs"
32+
fullwidth={ false }
33+
controls={ [
34+
{
35+
value: 'patterns',
36+
title: __( 'Patterns', i18n ),
37+
},
38+
{
39+
value: 'pages',
40+
title: __( 'Pages', i18n ),
41+
},
42+
] }
43+
value={ selectedTab }
44+
onChange={ setSelectedTab }
45+
isToggleOnly={ true }
46+
allowReset={ false }
47+
/>
48+
49+
<div className="stk-design-library__header-settings">
50+
{ devMode && (
51+
<ToggleControl
52+
label="Dev Mode"
53+
checked={ !! localStorage.getItem( 'stk__design_library__dev_mode' ) || false }
54+
onChange={ value => {
55+
localStorage.setItem( 'stk__design_library__dev_mode', value ? '1' : '' )
56+
setTimeout( () => {
57+
document?.querySelector( '.ugb-insert-library-button__wrapper .ugb-insert-library-button' ).click()
58+
}, 100 )
59+
props.onClose()
60+
} }
61+
__nextHasNoMarginBottom
62+
/>
63+
) }
64+
<Button
65+
icon="image-rotate"
66+
iconSize={ 14 }
67+
label={ __( 'Refresh Library', i18n ) }
68+
className="ugb-modal-design-library__refresh"
69+
onClick={ () => setDoReset( true ) }
70+
/>
71+
{ ! isPro && <Dropdown
72+
focusOnMount="container"
73+
renderToggle={ ( { onToggle } ) => (
74+
<Button
75+
onClick={ onToggle }
76+
style={ { height: 'auto' } }
77+
icon="arrow-down-alt2"
78+
iconSize={ 12 }
79+
iconPosition="right"
80+
variant="secondary"
81+
>
82+
<Dashicon icon="lock" size={ 12 } />
83+
<span>{ selectedPlan.label }</span>
84+
</Button>
85+
) }
86+
renderContent={ ( { onClose } ) => (
87+
<div className="stk-design-library__plan-dropdown">
88+
{ PLAN_OPTIONS.map( ( plan, i ) => {
89+
return <Button
90+
key={ i }
91+
onClick={ () => {
92+
setSelectedPlan( plan )
93+
onClose()
94+
} }
95+
>
96+
{ plan.label }
97+
</Button>
98+
} ) }
99+
</div>
100+
) }
101+
/> }
102+
</div>
103+
</>
104+
}

0 commit comments

Comments
 (0)