diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/publicize/form-unwrapped.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/publicize/form-unwrapped.js | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/publicize/form-unwrapped.js b/plugins/jetpack/extensions/blocks/publicize/form-unwrapped.js new file mode 100644 index 00000000..04efc7eb --- /dev/null +++ b/plugins/jetpack/extensions/blocks/publicize/form-unwrapped.js @@ -0,0 +1,118 @@ +/** + * Publicize sharing form component. + * + * Displays text area and connection list to allow user + * to select connections to share to and write a custom + * sharing message. + */ + +/** + * External dependencies + */ +import classnames from 'classnames'; +import { __, _n, sprintf } from '@wordpress/i18n'; +import { Component, Fragment } from '@wordpress/element'; +import { uniqueId } from 'lodash'; + +/** + * Internal dependencies + */ +import PublicizeConnection from './connection'; +import PublicizeSettingsButton from './settings-button'; + +export const MAXIMUM_MESSAGE_LENGTH = 256; + +class PublicizeFormUnwrapped extends Component { + state = { + hasEditedShareMessage: false, + }; + + fieldId = uniqueId( 'jetpack-publicize-message-field-' ); + + /** + * Check to see if form should be disabled. + * + * Checks full connection list to determine if all are disabled. + * If they all are, it returns true to disable whole form. + * + * @return {boolean} True if whole form should be disabled. + */ + isDisabled() { + return this.props.connections.every( connection => ! connection.toggleable ); + } + + getShareMessage() { + const { shareMessage, defaultShareMessage } = this.props; + return ! this.state.hasEditedShareMessage && shareMessage === '' + ? defaultShareMessage + : shareMessage; + } + + onMessageChange = event => { + const { messageChange } = this.props; + this.setState( { hasEditedShareMessage: true } ); + messageChange( event ); + }; + + render() { + const { connections, toggleConnection, refreshCallback } = this.props; + const shareMessage = this.getShareMessage(); + const charactersRemaining = MAXIMUM_MESSAGE_LENGTH - shareMessage.length; + const characterCountClass = classnames( 'jetpack-publicize-character-count', { + 'wpas-twitter-length-limit': charactersRemaining <= 0, + } ); + + return ( + <div id="publicize-form"> + <ul className="jetpack-publicize__connections-list"> + { connections.map( ( { display_name, enabled, id, service_name, toggleable } ) => ( + <PublicizeConnection + disabled={ ! toggleable } + enabled={ enabled } + key={ id } + id={ id } + label={ display_name } + name={ service_name } + toggleConnection={ toggleConnection } + /> + ) ) } + </ul> + <PublicizeSettingsButton refreshCallback={ refreshCallback } /> + { connections.some( connection => connection.enabled ) && ( + <Fragment> + <label className="jetpack-publicize-message-note" htmlFor={ this.fieldId }> + { __( 'Customize your message', 'jetpack' ) } + </label> + <div className="jetpack-publicize-message-box"> + <textarea + id={ this.fieldId } + value={ shareMessage } + onChange={ this.onMessageChange } + disabled={ this.isDisabled() } + maxLength={ MAXIMUM_MESSAGE_LENGTH } + placeholder={ __( + "Write a message for your audience here. If you leave this blank, we'll use the post title as the message.", + 'jetpack' + ) } + rows={ 4 } + /> + <div className={ characterCountClass }> + { sprintf( + _n( + '%d character remaining', + '%d characters remaining', + charactersRemaining, + 'jetpack' + ), + charactersRemaining + ) } + </div> + </div> + </Fragment> + ) } + </div> + ); + } +} + +export default PublicizeFormUnwrapped; |