Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RNMobile] Add useResizeObserver() to Column Block #20838

Merged
merged 19 commits into from
Mar 16, 2020
Merged

[RNMobile] Add useResizeObserver() to Column Block #20838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
c60d675
Create withContainerMatches HOC
lukewalczak Jan 27, 2020
50bbadc
Replace HOC in favor of hook
lukewalczak Jan 29, 2020
74d9227
Add useContainerMatch hook tests
lukewalczak Feb 5, 2020
64f894a
Merge branch 'master' into rnmobile/with-container-matches-hoc
lukewalczak Feb 5, 2020
8c22c00
Merge branch 'master' into rnmobile/with-container-matches-hoc
lukewalczak Mar 1, 2020
aa3eeaa
Refactor hook to be useResizeObserver() and unify with web API
lukewalczak Mar 2, 2020
a741278
Remove old implementation and update tests
lukewalczak Mar 2, 2020
057990d
Avoid setting state in onLayout frequently
lukewalczak Mar 2, 2020
6f48b92
Add comment and improve typing
lukewalczak Mar 3, 2020
2ac3218
Move observer to const to avoid adding comment for disabling eslint
lukewalczak Mar 4, 2020
0b3ac33
Refactor doc
lukewalczak Mar 9, 2020
f87111f
Merge remote-tracking branch 'origin/rnmobile/with-container-matches-…
jbinda Mar 10, 2020
423ac9c
use resizeObserver in COlumns
jbinda Mar 10, 2020
8b02d17
Refactor doc and web light wrapper
lukewalczak Mar 11, 2020
441457b
Merge remote-tracking branch 'origin/rnmobile/with-container-matches-…
jbinda Mar 12, 2020
369d0c8
Merge branch 'rnmobile/column-block' into rnmobile/try/column-block-w…
jbinda Mar 12, 2020
43a9fdc
Merge branch 'rnmobile/column-block' into rnmobile/column-block-with-…
jbinda Mar 12, 2020
ac53446
Merge branch 'rnmobile/column-block' into rnmobile/column-block-with-…
jbinda Mar 12, 2020
6b1889e
Merge branch 'rnmobile/column-block' into rnmobile/column-block-with-…
jbinda Mar 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-library/src/column/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function ColumnEdit( {
const containerWidth = columnsContainerWidth || containerMaxWidth;

const minWidth = Math.min( containerWidth, containerMaxWidth );
const columnBaseWidth = minWidth / columnsInRow;
const columnBaseWidth = minWidth / Math.max( 1, columnsInRow );

const applyBlockStyle = ( placeholder = false ) => {
const pullWidths = ( names ) =>
Expand Down
34 changes: 17 additions & 17 deletions packages/block-library/src/columns/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ import {
} from '@wordpress/block-editor';
import { withDispatch, useSelect } from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element';
import { withPreferredColorScheme } from '@wordpress/compose';
import {
withPreferredColorScheme,
useResizeObserver,
} from '@wordpress/compose';
import { createBlock } from '@wordpress/blocks';
/**
* Internal dependencies
Expand Down Expand Up @@ -51,11 +54,13 @@ function ColumnsEditContainer( {
updateColumns,
columnCount,
} ) {
const { verticalAlignment } = attributes;
const [ resizeListener, sizes ] = useResizeObserver();
const [ columnsSettings, setColumnsSettings ] = useState( {
columnsInRow: 2,
} );
const { width } = columnsSettings;

const { verticalAlignment } = attributes;
const { width } = sizes || {};

useEffect( () => {
updateColumns(
Expand All @@ -64,6 +69,13 @@ function ColumnsEditContainer( {
);
}, [ columnCount ] );

useEffect( () => {
setColumnsSettings( {
columnsInRow: getColumnsInRow( width, columnCount ),
width,
} );
}, [ width ] );

const getColumnsInRow = ( containerWidth, columnsNumber ) => {
if ( containerWidth < 480 ) {
return 1;
Expand Down Expand Up @@ -97,20 +109,8 @@ function ColumnsEditContainer( {
isCollapsed={ false }
/>
</BlockControls>
<View
onLayout={ ( event ) => {
const { width: newWidth } = event.nativeEvent.layout;
if ( newWidth !== width ) {
setColumnsSettings( {
columnsInRow: getColumnsInRow(
newWidth,
columnCount
),
width: newWidth,
} );
}
} }
>
<View>
{ resizeListener }
<InnerBlocks
flatListProps={ {
contentContainerStyle: {
Expand Down