Skip to content

Commit

Permalink
Editor: Refactor 'PostPublishPanelPostpublish' to function component (W…
Browse files Browse the repository at this point in the history 
…ordPress#67398)

* Editor: Refactor 'PostPublishPanelPostpublish' to function component
* Extract copy button

Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: jsnajdr <[email protected]>
  • Loading branch information
@Mamaduka @jsnajdr @im3dabasia
3 people authored and im3dabasia committed Dec 4, 2024
1 parent 67d74ce commit ac85333
Showing 1 changed file with 114 additions and 124 deletions.
238 changes: 114 additions & 124 deletions packages/editor/src/components/post-publish-panel/postpublish.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
*/
import { PanelBody, Button, TextControl } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { Component, createRef } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
import { useCallback, useEffect, useState, useRef } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { addQueryArgs, safeDecodeURIComponent } from '@wordpress/url';
import { decodeEntities } from '@wordpress/html-entities';
import { useCopyToClipboard } from '@wordpress/compose';
Expand Down Expand Up @@ -41,142 +41,132 @@ const getFuturePostUrl = ( post ) => {
return post.permalink_template;
};

function CopyButton( { text, onCopy, children } ) {
const ref = useCopyToClipboard( text, onCopy );
function CopyButton( { text } ) {
const [ showCopyConfirmation, setShowCopyConfirmation ] = useState( false );
const timeoutIdRef = useRef();
const ref = useCopyToClipboard( text, () => {
setShowCopyConfirmation( true );
if ( timeoutIdRef.current ) {
clearTimeout( timeoutIdRef.current );
}
timeoutIdRef.current = setTimeout( () => {
setShowCopyConfirmation( false );
}, 4000 );
} );

useEffect( () => {
return () => {
if ( timeoutIdRef.current ) {
clearTimeout( timeoutIdRef.current );
}
};
}, [] );

return (
<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
{ children }
{ showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy' ) }
</Button>
);
}

class PostPublishPanelPostpublish extends Component {
constructor() {
super( ...arguments );
this.state = {
showCopyConfirmation: false,
export default function PostPublishPanelPostpublish( {
focusOnMount,
children,
} ) {
const { post, postType, isScheduled } = useSelect( ( select ) => {
const {
getEditedPostAttribute,
getCurrentPost,
isCurrentPostScheduled,
} = select( editorStore );
const { getPostType } = select( coreStore );

return {
post: getCurrentPost(),
postType: getPostType( getEditedPostAttribute( 'type' ) ),
isScheduled: isCurrentPostScheduled(),
};
this.onCopy = this.onCopy.bind( this );
this.onSelectInput = this.onSelectInput.bind( this );
this.postLink = createRef();
}

componentDidMount() {
if ( this.props.focusOnMount ) {
this.postLink.current.focus();
}
}

componentWillUnmount() {
clearTimeout( this.dismissCopyConfirmation );
}

onCopy() {
this.setState( {
showCopyConfirmation: true,
} );
}, [] );

const postLabel = postType?.labels?.singular_name;
const viewPostLabel = postType?.labels?.view_item;
const addNewPostLabel = postType?.labels?.add_new_item;
const link =
post.status === 'future' ? getFuturePostUrl( post ) : post.link;
const addLink = addQueryArgs( 'post-new.php', {
post_type: post.type,
} );

const postLinkRef = useCallback(
( node ) => {
if ( focusOnMount && node ) {
node.focus();
}
},
[ focusOnMount ]
);

clearTimeout( this.dismissCopyConfirmation );
this.dismissCopyConfirmation = setTimeout( () => {
this.setState( {
showCopyConfirmation: false,
} );
}, 4000 );
}
const postPublishNonLinkHeader = isScheduled ? (
<>
{ __( 'is now scheduled. It will go live on' ) }{ ' ' }
<PostScheduleLabel />.
</>
) : (
__( 'is now live.' )
);

onSelectInput( event ) {
event.target.select();
}
return (
<div className="post-publish-panel__postpublish">
<PanelBody className="post-publish-panel__postpublish-header">
<a ref={ postLinkRef } href={ link }>
{ decodeEntities( post.title ) || __( '(no title)' ) }
</a>{ ' ' }
{ postPublishNonLinkHeader }
</PanelBody>
<PanelBody>
<p className="post-publish-panel__postpublish-subheader">
<strong>{ __( 'What’s next?' ) }</strong>
</p>
<div className="post-publish-panel__postpublish-post-address-container">
<TextControl
__next40pxDefaultSize
__nextHasNoMarginBottom
className="post-publish-panel__postpublish-post-address"
readOnly
label={ sprintf(
/* translators: %s: post type singular name */
__( '%s address' ),
postLabel
) }
value={ safeDecodeURIComponent( link ) }
onFocus={ ( event ) => event.target.select() }
/>

render() {
const { children, isScheduled, post, postType } = this.props;
const postLabel = postType?.labels?.singular_name;
const viewPostLabel = postType?.labels?.view_item;
const addNewPostLabel = postType?.labels?.add_new_item;
const link =
post.status === 'future' ? getFuturePostUrl( post ) : post.link;
const addLink = addQueryArgs( 'post-new.php', {
post_type: post.type,
} );

const postPublishNonLinkHeader = isScheduled ? (
<>
{ __( 'is now scheduled. It will go live on' ) }{ ' ' }
<PostScheduleLabel />.
</>
) : (
__( 'is now live.' )
);

return (
<div className="post-publish-panel__postpublish">
<PanelBody className="post-publish-panel__postpublish-header">
<a ref={ this.postLink } href={ link }>
{ decodeEntities( post.title ) || __( '(no title)' ) }
</a>{ ' ' }
{ postPublishNonLinkHeader }
</PanelBody>
<PanelBody>
<p className="post-publish-panel__postpublish-subheader">
<strong>{ __( 'What’s next?' ) }</strong>
</p>
<div className="post-publish-panel__postpublish-post-address-container">
<TextControl
__next40pxDefaultSize
__nextHasNoMarginBottom
className="post-publish-panel__postpublish-post-address"
readOnly
label={ sprintf(
/* translators: %s: post type singular name */
__( '%s address' ),
postLabel
) }
value={ safeDecodeURIComponent( link ) }
onFocus={ this.onSelectInput }
/>

<div className="post-publish-panel__postpublish-post-address__copy-button-wrap">
<CopyButton text={ link } onCopy={ this.onCopy }>
{ this.state.showCopyConfirmation
? __( 'Copied!' )
: __( 'Copy' ) }
</CopyButton>
</div>
<div className="post-publish-panel__postpublish-post-address__copy-button-wrap">
<CopyButton text={ link } />
</div>
</div>

<div className="post-publish-panel__postpublish-buttons">
{ ! isScheduled && (
<Button
variant="primary"
href={ link }
__next40pxDefaultSize
>
{ viewPostLabel }
</Button>
) }
<div className="post-publish-panel__postpublish-buttons">
{ ! isScheduled && (
<Button
variant={ isScheduled ? 'primary' : 'secondary' }
variant="primary"
href={ link }
__next40pxDefaultSize
href={ addLink }
>
{ addNewPostLabel }
{ viewPostLabel }
</Button>
</div>
</PanelBody>
{ children }
</div>
);
}
) }
<Button
variant={ isScheduled ? 'primary' : 'secondary' }
__next40pxDefaultSize
href={ addLink }
>
{ addNewPostLabel }
</Button>
</div>
</PanelBody>
{ children }
</div>
);
}

export default withSelect( ( select ) => {
const { getEditedPostAttribute, getCurrentPost, isCurrentPostScheduled } =
select( editorStore );
const { getPostType } = select( coreStore );

return {
post: getCurrentPost(),
postType: getPostType( getEditedPostAttribute( 'type' ) ),
isScheduled: isCurrentPostScheduled(),
};
} )( PostPublishPanelPostpublish );

0 comments on commit ac85333

Please sign in to comment.