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

Jump to bottom

[RNMobile] Search Block: Implement long button text handling #30855

Merged
merged 7 commits into from
Apr 16, 2021
Merged

[RNMobile] Search Block: Implement long button text handling #30855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
056ba95
Move button below input if width greater than 50%
AmandaRiu Apr 13, 2021
963e6f3
Use long button styles only when container or button width changes
AmandaRiu Apr 14, 2021
1dc8fdb
Update unit-test snapshots
AmandaRiu Apr 15, 2021
e4a5461
Remove unused code
AmandaRiu Apr 15, 2021
0fcfd43
Use blockWidth to optimize the logic for max button width
AmandaRiu Apr 15, 2021
8e295eb
Update unit-test snapshot
AmandaRiu Apr 15, 2021
defb14a
Update code comment to be more accurate
AmandaRiu Apr 15, 2021
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
43 changes: 40 additions & 3 deletions packages/block-library/src/search/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ import styles from './style.scss';
* Constants
*/
const MIN_BUTTON_WIDTH = 75;
const MARGINS =
styles.widthMargin?.marginLeft + styles.widthMargin?.paddingLeft;

const BUTTON_OPTIONS = [
{ value: 'button-inside', label: __( 'Button inside' ) },
Expand All @@ -46,12 +48,15 @@ export default function SearchEdit( {
attributes,
setAttributes,
className,
blockWidth,
} ) {
const [ isButtonSelected, setIsButtonSelected ] = useState( false );
const [ isLabelSelected, setIsLabelSelected ] = useState( false );
const [ isPlaceholderSelected, setIsPlaceholderSelected ] = useState(
true
);
const [ isLongButton, setIsLongButton ] = useState( false );
const [ buttonWidth, setButtonWidth ] = useState( MIN_BUTTON_WIDTH );

const textInputRef = useRef( null );

Expand All @@ -74,10 +79,28 @@ export default function SearchEdit( {
}
}, [ isSelected ] );

useEffect( () => {
const maxButtonWidth = Math.floor( blockWidth / 2 - MARGINS );
const tempIsLongButton = buttonWidth > maxButtonWidth;

// Update this value only if it has changed to avoid flickering.
if ( isLongButton !== tempIsLongButton ) {
setIsLongButton( tempIsLongButton );
}
}, [ blockWidth, buttonWidth ] );

const hasTextInput = () => {
return textInputRef && textInputRef.current;
};

const onLayoutButton = ( { nativeEvent } ) => {
const { width } = nativeEvent?.layout;

if ( width ) {
setButtonWidth( width );
}
};

const getBlockClassNames = () => {
return classnames(
className,
Expand Down Expand Up @@ -163,11 +186,11 @@ export default function SearchEdit( {
);

const inputStyle = [
! isButtonInside && borderStyle,
usePreferredColorSchemeStyle(
styles.plainTextInput,
styles.plainTextInputDark
),
! isButtonInside && borderStyle,
];

const placeholderStyle = usePreferredColorSchemeStyle(
Expand All @@ -178,6 +201,7 @@ export default function SearchEdit( {
const searchBarStyle = [
styles.searchBarContainer,
isButtonInside && borderStyle,
isLongButton && { flexDirection: 'column' },
];

const getPlaceholderAccessibilityLabel = () => {
Expand Down Expand Up @@ -236,8 +260,19 @@ export default function SearchEdit( {

const renderButton = () => {
return (
<View style={ styles.buttonContainer }>
{ buttonUseIcon && <Icon icon={ search } { ...styles.icon } /> }
<View
style={ [
styles.buttonContainer,
isLongButton && styles.buttonContainerWide,
] }
>
{ buttonUseIcon && (
<Icon
icon={ search }
{ ...styles.icon }
onLayout={ onLayoutButton }
/>
) }

{ ! buttonUseIcon && (
<View
Expand All @@ -249,6 +284,7 @@ export default function SearchEdit( {
accessibilityLabel={ `${ __(
'Search button. Current button text is'
) } ${ buttonText }` }
onLayout={ onLayoutButton }
>
<RichText
className="wp-block-search__button"
Expand All @@ -262,6 +298,7 @@ export default function SearchEdit( {
setAttributes( { buttonText: html } )
}
minWidth={ MIN_BUTTON_WIDTH }
maxWidth={ blockWidth - MARGINS }
AmandaRiu marked this conversation as resolved.
Show resolved Hide resolved
textAlign="center"
isSelected={ isButtonSelected }
__unstableMobileNoFocusOnMount={ ! isSelected }
Expand Down
17 changes: 13 additions & 4 deletions packages/block-library/src/search/style.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
border: $border-width solid $gray-5;
border-radius: $grid-unit-05;
padding: $grid-unit-05;
padding-left: $grid-unit-10;
}

.borderDark {
Expand All @@ -35,7 +34,11 @@
border-radius: $grid-unit-05;
align-content: center;
align-items: center;
flex-shrink: 1;
}

.buttonContainerWide {
margin-left: 0;
margin-top: $grid-unit-05;
}

.icon {
Expand All @@ -59,7 +62,8 @@
font-weight: 400;
background-color: transparent;
font-family: $default-regular-font;
padding: 0;
padding-left: $grid-unit-10;
padding-right: $grid-unit-10;
margin: 0;
text-align: center;
min-height: 24px;
Expand All @@ -72,7 +76,7 @@
.plainTextInput {
min-height: 42px;
padding: $grid-unit-05;
padding-left: 0;
padding-left: $grid-unit-10;
font-family: $default-regular-font;
color: $gray-90;
}
Expand All @@ -88,3 +92,8 @@
.plainTextPlaceholderDark {
color: $gray-50;
}

.widthMargin {
margin: $grid-unit-20;
padding: $grid-unit-05;
}
51 changes: 43 additions & 8 deletions packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ exports[`Search Block renders block with button inside option 1`] = `
Array [
undefined,
undefined,
false,
]
}
>
Expand All @@ -94,19 +95,27 @@ exports[`Search Block renders block with button inside option 1`] = `
scrollEnabled={false}
style={
Array [
undefined,
false,
undefined,
]
}
underlineColorAndroid="transparent"
/>
</View>
<View>
<View
style={
Array [
undefined,
false,
]
}
>
<View
accessibilityHint="Double tap to edit button text"
accessibilityLabel="Search button. Current button text is Search Button"
accessibilityRole="none"
accessible={true}
onLayout={[Function]}
>
<View>
<RCTAztecView
Expand Down Expand Up @@ -145,7 +154,7 @@ exports[`Search Block renders block with button inside option 1`] = `
style={
Object {
"backgroundColor": undefined,
"maxWidth": undefined,
"maxWidth": NaN,
"minHeight": 0,
}
}
Expand Down Expand Up @@ -236,6 +245,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
Array [
undefined,
false,
false,
]
}
>
Expand Down Expand Up @@ -268,7 +278,14 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
underlineColorAndroid="transparent"
/>
</View>
<View>
<View
style={
Array [
undefined,
false,
]
}
>
Svg
</View>
</View>
Expand All @@ -286,6 +303,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
Array [
undefined,
false,
false,
]
}
>
Expand Down Expand Up @@ -318,12 +336,20 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
underlineColorAndroid="transparent"
/>
</View>
<View>
<View
style={
Array [
undefined,
false,
]
}
>
<View
accessibilityHint="Double tap to edit button text"
accessibilityLabel="Search button. Current button text is Search Button"
accessibilityRole="none"
accessible={true}
onLayout={[Function]}
>
<View>
<RCTAztecView
Expand Down Expand Up @@ -362,7 +388,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
style={
Object {
"backgroundColor": undefined,
"maxWidth": undefined,
"maxWidth": NaN,
"minHeight": 0,
}
}
Expand Down Expand Up @@ -453,6 +479,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
Array [
undefined,
false,
false,
]
}
>
Expand Down Expand Up @@ -485,12 +512,20 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
underlineColorAndroid="transparent"
/>
</View>
<View>
<View
style={
Array [
undefined,
false,
]
}
>
<View
accessibilityHint="Double tap to edit button text"
accessibilityLabel="Search button. Current button text is Search Button"
accessibilityRole="none"
accessible={true}
onLayout={[Function]}
>
<View>
<RCTAztecView
Expand Down Expand Up @@ -529,7 +564,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
style={
Object {
"backgroundColor": undefined,
"maxWidth": undefined,
"maxWidth": NaN,
"minHeight": 0,
}
}
Expand Down