Skip to content

Commit ca8e0ea

Browse files
kaeizenkaeizen
committed
improve code readability
1 parent d746060 commit ca8e0ea

File tree

8 files changed

+570
-439
lines changed

8 files changed

+570
-439
lines changed

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

Lines changed: 60 additions & 413 deletions
Large diffs are not rendered by default.

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
2+
import classnames from 'classnames'
3+
4+
import {
5+
useEffect, createPortal, useRef,
6+
} from '@wordpress/element'
7+
import { applyFilters } from '@wordpress/hooks'
8+
9+
const NOOP = () => {}
10+
11+
export const DesignPreview = ( {
12+
blocks = '',
13+
shadowRoot,
14+
selectedTab,
15+
adjustScale = NOOP,
16+
onScroll = NOOP,
17+
} ) => {
18+
const ref = useRef( null )
19+
20+
useEffect( () => {
21+
// The scale might not be correct on first load, so adjust it again to be sure.
22+
setTimeout( adjustScale, 100 )
23+
}, [] )
24+
25+
const shadowBodyClasses = classnames( applyFilters( 'stackable.global-styles.classnames', [
26+
'entry-content',
27+
] ), {
28+
'preview-pages': selectedTab === 'pages',
29+
} )
30+
31+
return createPortal( <>
32+
<body
33+
ref={ ref }
34+
className={ shadowBodyClasses }
35+
onWheel={ onScroll }
36+
>
37+
<div
38+
dangerouslySetInnerHTML={ { __html: blocks } }
39+
style={ { pointerEvents: 'none' } } // prevent blocks from being clicked
40+
/>
41+
</body>
42+
</>, shadowRoot )
43+
}

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

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -51,24 +51,29 @@ const DesignLibraryList = props => {
5151
{ ! isBusy && <>
5252
<div className={ listClasses }>
5353
{ ( designs || [] ).map( ( design, i ) => {
54-
const selectedNum = selectedDesigns.indexOf( design.designId ) + 1
54+
const selectedNum = selectedDesigns.indexOf( design.id ) + 1
5555
const selectedData = selectedNum ? selectedDesignData[ selectedNum - 1 ] : null
56+
57+
const previewProps = {
58+
designId: design.id,
59+
template: design.template,
60+
category: design.category,
61+
containerScheme: props.containerScheme,
62+
backgroundScheme: props.backgroundScheme,
63+
enableBackground: props.enableBackground,
64+
onClick: onSelectMulti,
65+
}
66+
5667
return (
5768
<DesignLibraryItem
5869
key={ i }
59-
template={ design.template }
6070
plan={ design.plan }
61-
designId={ design.designId }
6271
label={ design.label }
63-
category={ design.category }
64-
containerScheme={ props.containerScheme }
65-
backgroundScheme={ props.backgroundScheme }
66-
enableBackground={ props.enableBackground }
72+
previewProps={ previewProps }
6773
selectedNum={ selectedNum }
6874
selectedData={ selectedData }
69-
onClick={ onSelectMulti }
70-
scrollTop={ scrollTop }
7175
selectedTab={ props.selectedTab }
76+
scrollTop={ scrollTop }
7277
/>
7378
)
7479
} ) }
@@ -91,12 +96,22 @@ DesignLibraryList.defaultProps = {
9196
export default DesignLibraryList
9297

9398
const DesignLibraryItem = props => {
94-
const { scrollTop, ...propsToPass } = props
99+
const {
100+
scrollTop, previewProps: _previewProps, ...propsToPass
101+
} = props
102+
95103
const itemRef = useRef( null )
96104
const [ cardHeight, setCardHeight ] = useState( {} )
97105
const [ previewSize, setPreviewSize ] = useState( {} )
98106
const [ shouldRender, setShouldRender ] = useState( props.testKey < 9 )
99107

108+
const previewProps = {
109+
..._previewProps,
110+
setPreviewSize: previewSize => setPreviewSize( previewSize ),
111+
setCardHeight: height => setCardHeight( height ),
112+
cardHeight,
113+
}
114+
100115
useEffect( () => {
101116
if ( ! itemRef.current ) {
102117
return
@@ -123,8 +138,7 @@ const DesignLibraryItem = props => {
123138
return <DesignLibraryListItem
124139
ref={ itemRef }
125140
previewSize={ previewSize }
126-
setPreviewSize={ previewSize => setPreviewSize( previewSize ) }
127-
setCardHeight={ height => setCardHeight( height ) }
141+
previewProps={ previewProps }
128142
{ ...propsToPass }
129143
/>
130144
}

‎src/components/design-library-list/use-auto-scroll.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { useRef } from '@wordpress/element'
5+
6+
const NOOP = () => {}
7+
8+
export const useAutoScroll = ( hostRef, shadowBodySizeRef, selectedTab ) => {
9+
const scrollPositionRef = useRef( 0 )
10+
const scrollIntervalRef = useRef( null )
11+
12+
const onMouseOverImpl = () => {
13+
const shadowDomBody = hostRef?.current?.shadowRoot.querySelector( 'body' )
14+
if ( shadowDomBody && shadowBodySizeRef.current ) {
15+
scrollPositionRef.current = 0
16+
setTimeout( () => {
17+
if ( scrollPositionRef.current === -1 ) {
18+
return
19+
}
20+
21+
if ( scrollIntervalRef.current ) {
22+
clearInterval( scrollIntervalRef.current )
23+
}
24+
25+
scrollIntervalRef.current = setInterval( () => {
26+
const scrollDifference = shadowBodySizeRef.current.maxScrollTop - scrollPositionRef.current
27+
const shouldScroll = shadowBodySizeRef.current.maxScrollTop - scrollPositionRef.current > 0
28+
29+
if ( ! shadowDomBody || ! shouldScroll ) {
30+
clearInterval( scrollIntervalRef.current )
31+
return
32+
}
33+
34+
const scrollBy = scrollDifference >= 20 ? 20 : scrollDifference
35+
shadowDomBody.scrollTop = scrollPositionRef.current + scrollBy
36+
scrollPositionRef.current += scrollBy
37+
}, 20 )
38+
}, 500 )
39+
}
40+
}
41+
42+
const onMouseOutImpl = () => {
43+
const shadowDomBody = hostRef?.current?.shadowRoot.querySelector( 'body' )
44+
if ( shadowDomBody ) {
45+
clearInterval( scrollIntervalRef.current )
46+
scrollIntervalRef.current = null
47+
shadowDomBody.scrollTo( {
48+
top: 0,
49+
behavior: 'smooth',
50+
} )
51+
scrollPositionRef.current = -1
52+
}
53+
}
54+
55+
const onScrollImpl = () => {
56+
if ( scrollIntervalRef.current ) {
57+
clearInterval( scrollIntervalRef.current )
58+
scrollIntervalRef.current = null
59+
}
60+
}
61+
62+
const onMouseOver = selectedTab === 'patterns' ? NOOP : onMouseOverImpl
63+
const onMouseOut = selectedTab === 'patterns' ? NOOP : onMouseOutImpl
64+
const onScroll = selectedTab === 'patterns' ? NOOP : onScrollImpl
65+
66+
return {
67+
onMouseOver,
68+
onMouseOut,
69+
onScroll,
70+
}
71+
}

0 commit comments

Comments
 (0)