This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 219
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix issue that prevented spaces being added to Mini Cart, Cart and Ch…
…eckout buttons (#8777) * Fix issue that prevented spaces being added to Mini Cart, Cart and Checkout buttons * Fix a couple of comments
- Loading branch information
Showing
5 changed files
with
145 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { useEffect, useRef } from '@wordpress/element'; | ||
| import Button, { ButtonProps } from '@woocommerce/base-components/button'; | ||
| import { RichText } from '@wordpress/block-editor'; | ||
| import type { RefObject } from 'react'; | ||
|
|
||
| export interface EditableButtonProps | ||
| extends Omit< ButtonProps, 'onChange' | 'placeholder' | 'value' > { | ||
| /** | ||
| * On change callback. | ||
| */ | ||
| onChange: ( value: string ) => void; | ||
| /** | ||
| * The placeholder of the editable button. | ||
| */ | ||
| placeholder?: string; | ||
| /** | ||
| * The current value of the editable button. | ||
| */ | ||
| value: string; | ||
| } | ||
|
|
||
| const EditableButton = ( { | ||
| onChange, | ||
| placeholder, | ||
| value, | ||
| ...props | ||
| }: EditableButtonProps ) => { | ||
| const button: RefObject< HTMLButtonElement > = useRef( null ); | ||
|
|
||
| // Fix a bug in Firefox that didn't allow to type spaces in editable buttons. | ||
| // @see https://github.com/woocommerce/woocommerce-blocks/issues/8734 | ||
| useEffect( () => { | ||
| const buttonEl = button?.current; | ||
|
|
||
| if ( ! buttonEl ) { | ||
| return; | ||
| } | ||
|
|
||
| const onKeyDown = ( event: KeyboardEvent ) => { | ||
| // If the user typed something different than space, do nothing. | ||
| if ( event.code !== 'Space' ) { | ||
| return; | ||
| } | ||
| event.preventDefault(); | ||
| const selection = buttonEl.ownerDocument.getSelection(); | ||
| if ( selection && selection.rangeCount > 0 ) { | ||
| // Get the caret position and insert a space. | ||
| const range = selection.getRangeAt( 0 ); | ||
| range.deleteContents(); | ||
| const textNode = document.createTextNode( ' ' ); | ||
| range.insertNode( textNode ); | ||
| // Set the caret position after the space. | ||
| range.setStartAfter( textNode ); | ||
| range.setEndAfter( textNode ); | ||
| selection.removeAllRanges(); | ||
| selection.addRange( range ); | ||
| } | ||
| }; | ||
|
|
||
| buttonEl.addEventListener( 'keydown', onKeyDown ); | ||
|
|
||
| return () => { | ||
| if ( ! buttonEl ) { | ||
| return; | ||
| } | ||
| buttonEl.removeEventListener( 'keydown', onKeyDown ); | ||
| }; | ||
| }, [ onChange, value ] ); | ||
|
|
||
| return ( | ||
| <Button { ...props }> | ||
| <span ref={ button }> | ||
| <RichText | ||
| multiline={ false } | ||
| allowedFormats={ [] } | ||
| value={ value } | ||
| placeholder={ placeholder } | ||
| onChange={ onChange } | ||
| /> | ||
| </span> | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| export default EditableButton; |