tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

⚡ factorize maxTootCharsLimit to only have one setting in the compose form

Browse Source
This commit is contained in:
Baptiste Lemoine 2019-12-23 12:10:55 +01:00
parent 26002f4b67
commit 879a6ef656
1 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
app/javascript/mastodon/features/compose/components/compose_form.js
View File

@ -46,6 +46,7 @@ class ComposeForm extends ImmutablePureComponent {
spoilerText : PropTypes.string, spoilerText : PropTypes.string,
focusDate : PropTypes.instanceOf(Date), focusDate : PropTypes.instanceOf(Date),
caretPosition : PropTypes.number, caretPosition : PropTypes.number,
maxTootCharsLimit : PropTypes.number,
preselectDate : PropTypes.instanceOf(Date), preselectDate : PropTypes.instanceOf(Date),
isSubmitting : PropTypes.bool, isSubmitting : PropTypes.bool,
isChangingUpload : PropTypes.bool, isChangingUpload : PropTypes.bool,
@ -64,7 +65,8 @@ class ComposeForm extends ImmutablePureComponent {
}; };
static defaultProps = { static defaultProps = {
showSearch: false, showSearch : false,
maxTootCharsLimit: 7777,
}; };
handleChange = (e) => { handleChange = (e) => {
@ -88,7 +90,7 @@ class ComposeForm extends ImmutablePureComponent {
const { isSubmitting, isChangingUpload, isUploading, anyMedia } = this.props; const { isSubmitting, isChangingUpload, isUploading, anyMedia } = this.props;
const fulltext = [this.props.spoilerText, countableText(this.props.text)].join(''); const fulltext = [this.props.spoilerText, countableText(this.props.text)].join('');
if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > 7777 || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) { if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > this.props.maxTootCharsLimit || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
return; return;
} }
@ -181,23 +183,26 @@ class ComposeForm extends ImmutablePureComponent {
const { intl, onPaste, showSearch, anyMedia } = this.props; const { intl, onPaste, showSearch, anyMedia } = this.props;
const disabled = this.props.isSubmitting; const disabled = this.props.isSubmitting;
const text = [this.props.spoilerText, countableText(this.props.text)].join(''); const text = [this.props.spoilerText, countableText(this.props.text)].join('');
const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > 7777 || (text.length !== 0 && text.trim().length === 0 && !anyMedia); const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > this.props.maxTootCharsLimit || (text.length !== 0 && text.trim().length === 0 && !anyMedia);
let publishText = ''; let publishText = '';
if (this.props.privacy === 'private' || this.props.privacy === 'direct') { if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
publishText = publishText =
<span className='compose-form__publish-private'><Icon id='lock'/> {intl.formatMessage(messages.publish)}</span>; <span className='compose-form__publish-private'><Icon id='lock' /> {intl.formatMessage(messages.publish)}</span >;
} else { } else {
publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish); publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
} }
return ( return (
<div className='compose-form'> <div className='compose-form'>
<WarningContainer/> <WarningContainer />
<ReplyIndicatorContainer/> <ReplyIndicatorContainer />
<div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`} ref={this.setRef}> <div
className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`}
ref={this.setRef}
>
<AutosuggestInput <AutosuggestInput
placeholder={intl.formatMessage(messages.spoiler_placeholder)} placeholder={intl.formatMessage(messages.spoiler_placeholder)}
value={this.props.spoilerText} value={this.props.spoilerText}
@ -213,7 +218,7 @@ class ComposeForm extends ImmutablePureComponent {
id='cw-spoiler-input' id='cw-spoiler-input'
className='spoiler-input__input' className='spoiler-input__input'
/> />
</div> </div >
<AutosuggestTextarea <AutosuggestTextarea
ref={this.setAutosuggestTextarea} ref={this.setAutosuggestTextarea}
@ -230,31 +235,36 @@ class ComposeForm extends ImmutablePureComponent {
onPaste={onPaste} onPaste={onPaste}
autoFocus={!showSearch && !isMobile(window.innerWidth)} autoFocus={!showSearch && !isMobile(window.innerWidth)}
> >
<EmojiPickerDropdown onPickEmoji={this.handleEmojiPick}/> <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
<div className='compose-form__modifiers'> <div className='compose-form__modifiers'>
<UploadFormContainer/> <UploadFormContainer />
<PollFormContainer/> <PollFormContainer />
</div> </div >
</AutosuggestTextarea> </AutosuggestTextarea >
<div className='compose-form__buttons-wrapper'> <div className='compose-form__buttons-wrapper'>
<div className='compose-form__buttons'> <div className='compose-form__buttons'>
<UploadButtonContainer/> <UploadButtonContainer />
<PollButtonContainer/> <PollButtonContainer />
<PrivacyDropdownContainer/> <PrivacyDropdownContainer />
<SpoilerButtonContainer/> <SpoilerButtonContainer />
</div> </div >
<div className='character-counter__wrapper'><CharacterCounter max={7777} text={text}/></div> <div className='character-counter__wrapper'><CharacterCounter
</div> max={this.props.maxTootCharsLimit}
text={text}
/></div >
</div >
<div className='compose-form__publish'> <div className='compose-form__publish'>
<div className='compose-form__publish-button-wrapper'><Button <div className='compose-form__publish-button-wrapper'><Button
text={publishText} onClick={this.handleSubmit} text={publishText}
disabled={disabledButton} block onClick={this.handleSubmit}
/></div> disabled={disabledButton}
</div> block
/></div >
</div >
</div> </div >
); );
} }