Move ComposerPublisher to Compose
This commit is contained in:
		
							parent
							
								
									df951c319c
								
							
						
					
					
						commit
						faff152ae5
					
				@ -6,7 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
//  Components.
 | 
					//  Components.
 | 
				
			||||||
import OptionsContainer from '../containers/options_container';
 | 
					import OptionsContainer from '../containers/options_container';
 | 
				
			||||||
import ComposerPublisher from '../../composer/publisher';
 | 
					import Publisher from './publisher';
 | 
				
			||||||
import TextareaIcons from './textarea_icons';
 | 
					import TextareaIcons from './textarea_icons';
 | 
				
			||||||
import UploadFormContainer from '../containers/upload_form_container';
 | 
					import UploadFormContainer from '../containers/upload_form_container';
 | 
				
			||||||
import PollFormContainer from '../containers/poll_form_container';
 | 
					import PollFormContainer from '../containers/poll_form_container';
 | 
				
			||||||
@ -367,10 +367,9 @@ class ComposeForm extends ImmutablePureComponent {
 | 
				
			|||||||
          spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}
 | 
					          spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}
 | 
				
			||||||
        />
 | 
					        />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        <ComposerPublisher
 | 
					        <Publisher
 | 
				
			||||||
          countText={`${spoilerText}${countableText(text)}${advancedOptions && advancedOptions.get('do_not_federate') ? ' 👁️' : ''}`}
 | 
					          countText={`${spoilerText}${countableText(text)}${advancedOptions && advancedOptions.get('do_not_federate') ? ' 👁️' : ''}`}
 | 
				
			||||||
          disabled={disabledButton}
 | 
					          disabled={disabledButton}
 | 
				
			||||||
          intl={intl}
 | 
					 | 
				
			||||||
          onSecondarySubmit={handleSecondarySubmit}
 | 
					          onSecondarySubmit={handleSecondarySubmit}
 | 
				
			||||||
          onSubmit={handleSubmit}
 | 
					          onSubmit={handleSubmit}
 | 
				
			||||||
          privacy={privacy}
 | 
					          privacy={privacy}
 | 
				
			||||||
 | 
				
			|||||||
@ -0,0 +1,115 @@
 | 
				
			|||||||
 | 
					//  Package imports.
 | 
				
			||||||
 | 
					import classNames from 'classnames';
 | 
				
			||||||
 | 
					import PropTypes from 'prop-types';
 | 
				
			||||||
 | 
					import React from 'react';
 | 
				
			||||||
 | 
					import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 | 
				
			||||||
 | 
					import { length } from 'stringz';
 | 
				
			||||||
 | 
					import ImmutablePureComponent from 'react-immutable-pure-component';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					//  Components.
 | 
				
			||||||
 | 
					import Button from 'flavours/glitch/components/button';
 | 
				
			||||||
 | 
					import Icon from 'flavours/glitch/components/icon';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					//  Utils.
 | 
				
			||||||
 | 
					import { maxChars } from 'flavours/glitch/util/initial_state';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					//  Messages.
 | 
				
			||||||
 | 
					const messages = defineMessages({
 | 
				
			||||||
 | 
					  publish: {
 | 
				
			||||||
 | 
					    defaultMessage: 'Toot',
 | 
				
			||||||
 | 
					    id: 'compose_form.publish',
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					  publishLoud: {
 | 
				
			||||||
 | 
					    defaultMessage: '{publish}!',
 | 
				
			||||||
 | 
					    id: 'compose_form.publish_loud',
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default @injectIntl
 | 
				
			||||||
 | 
					class Publisher extends ImmutablePureComponent {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  static propTypes = {
 | 
				
			||||||
 | 
					    countText: PropTypes.string,
 | 
				
			||||||
 | 
					    disabled: PropTypes.bool,
 | 
				
			||||||
 | 
					    intl: PropTypes.object.isRequired,
 | 
				
			||||||
 | 
					    onSecondarySubmit: PropTypes.func,
 | 
				
			||||||
 | 
					    onSubmit: PropTypes.func,
 | 
				
			||||||
 | 
					    privacy: PropTypes.oneOf(['direct', 'private', 'unlisted', 'public']),
 | 
				
			||||||
 | 
					    sideArm: PropTypes.oneOf(['none', 'direct', 'private', 'unlisted', 'public']),
 | 
				
			||||||
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  render () {
 | 
				
			||||||
 | 
					    const { countText, disabled, intl, onSecondarySubmit, onSubmit, privacy, sideArm } = this.props;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    const diff = maxChars - length(countText || '');
 | 
				
			||||||
 | 
					    const computedClass = classNames('composer--publisher', {
 | 
				
			||||||
 | 
					      disabled: disabled || diff < 0,
 | 
				
			||||||
 | 
					      over: diff < 0,
 | 
				
			||||||
 | 
					    });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    return (
 | 
				
			||||||
 | 
					      <div className={computedClass}>
 | 
				
			||||||
 | 
					        <span className='count'>{diff}</span>
 | 
				
			||||||
 | 
					        {sideArm && sideArm !== 'none' ? (
 | 
				
			||||||
 | 
					          <Button
 | 
				
			||||||
 | 
					            className='side_arm'
 | 
				
			||||||
 | 
					            disabled={disabled || diff < 0}
 | 
				
			||||||
 | 
					            onClick={onSecondarySubmit}
 | 
				
			||||||
 | 
					            style={{ padding: null }}
 | 
				
			||||||
 | 
					            text={
 | 
				
			||||||
 | 
					              <span>
 | 
				
			||||||
 | 
					                <Icon
 | 
				
			||||||
 | 
					                  icon={{
 | 
				
			||||||
 | 
					                    public: 'globe',
 | 
				
			||||||
 | 
					                    unlisted: 'unlock',
 | 
				
			||||||
 | 
					                    private: 'lock',
 | 
				
			||||||
 | 
					                    direct: 'envelope',
 | 
				
			||||||
 | 
					                  }[sideArm]}
 | 
				
			||||||
 | 
					                />
 | 
				
			||||||
 | 
					              </span>
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					            title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${sideArm}.short` })}`}
 | 
				
			||||||
 | 
					          />
 | 
				
			||||||
 | 
					        ) : null}
 | 
				
			||||||
 | 
					        <Button
 | 
				
			||||||
 | 
					          className='primary'
 | 
				
			||||||
 | 
					          text={function () {
 | 
				
			||||||
 | 
					            switch (true) {
 | 
				
			||||||
 | 
					            case !!sideArm && sideArm !== 'none':
 | 
				
			||||||
 | 
					            case privacy === 'direct':
 | 
				
			||||||
 | 
					            case privacy === 'private':
 | 
				
			||||||
 | 
					              return (
 | 
				
			||||||
 | 
					                <span>
 | 
				
			||||||
 | 
					                  <Icon
 | 
				
			||||||
 | 
					                    icon={{
 | 
				
			||||||
 | 
					                      direct: 'envelope',
 | 
				
			||||||
 | 
					                      private: 'lock',
 | 
				
			||||||
 | 
					                      public: 'globe',
 | 
				
			||||||
 | 
					                      unlisted: 'unlock',
 | 
				
			||||||
 | 
					                    }[privacy]}
 | 
				
			||||||
 | 
					                  />
 | 
				
			||||||
 | 
					                  {' '}
 | 
				
			||||||
 | 
					                  <FormattedMessage {...messages.publish} />
 | 
				
			||||||
 | 
					                </span>
 | 
				
			||||||
 | 
					              );
 | 
				
			||||||
 | 
					            case privacy === 'public':
 | 
				
			||||||
 | 
					              return (
 | 
				
			||||||
 | 
					                <span>
 | 
				
			||||||
 | 
					                  <FormattedMessage
 | 
				
			||||||
 | 
					                    {...messages.publishLoud}
 | 
				
			||||||
 | 
					                    values={{ publish: <FormattedMessage {...messages.publish} /> }}
 | 
				
			||||||
 | 
					                  />
 | 
				
			||||||
 | 
					                </span>
 | 
				
			||||||
 | 
					              );
 | 
				
			||||||
 | 
					            default:
 | 
				
			||||||
 | 
					              return <span><FormattedMessage {...messages.publish} /></span>;
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					          }()}
 | 
				
			||||||
 | 
					          title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${privacy}.short` })}`}
 | 
				
			||||||
 | 
					          onClick={onSubmit}
 | 
				
			||||||
 | 
					          disabled={disabled || diff < 0}
 | 
				
			||||||
 | 
					        />
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    );
 | 
				
			||||||
 | 
					  };
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@ -1,122 +0,0 @@
 | 
				
			|||||||
//  Package imports.
 | 
					 | 
				
			||||||
import classNames from 'classnames';
 | 
					 | 
				
			||||||
import PropTypes from 'prop-types';
 | 
					 | 
				
			||||||
import React from 'react';
 | 
					 | 
				
			||||||
import {
 | 
					 | 
				
			||||||
  defineMessages,
 | 
					 | 
				
			||||||
  FormattedMessage,
 | 
					 | 
				
			||||||
} from 'react-intl';
 | 
					 | 
				
			||||||
import { length } from 'stringz';
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
//  Components.
 | 
					 | 
				
			||||||
import Button from 'flavours/glitch/components/button';
 | 
					 | 
				
			||||||
import Icon from 'flavours/glitch/components/icon';
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
//  Utils.
 | 
					 | 
				
			||||||
import { maxChars } from 'flavours/glitch/util/initial_state';
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
//  Messages.
 | 
					 | 
				
			||||||
const messages = defineMessages({
 | 
					 | 
				
			||||||
  publish: {
 | 
					 | 
				
			||||||
    defaultMessage: 'Toot',
 | 
					 | 
				
			||||||
    id: 'compose_form.publish',
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  publishLoud: {
 | 
					 | 
				
			||||||
    defaultMessage: '{publish}!',
 | 
					 | 
				
			||||||
    id: 'compose_form.publish_loud',
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
//  The component.
 | 
					 | 
				
			||||||
export default function ComposerPublisher ({
 | 
					 | 
				
			||||||
  countText,
 | 
					 | 
				
			||||||
  disabled,
 | 
					 | 
				
			||||||
  intl,
 | 
					 | 
				
			||||||
  onSecondarySubmit,
 | 
					 | 
				
			||||||
  onSubmit,
 | 
					 | 
				
			||||||
  privacy,
 | 
					 | 
				
			||||||
  sideArm,
 | 
					 | 
				
			||||||
}) {
 | 
					 | 
				
			||||||
  const diff = maxChars - length(countText || '');
 | 
					 | 
				
			||||||
  const computedClass = classNames('composer--publisher', {
 | 
					 | 
				
			||||||
    disabled: disabled || diff < 0,
 | 
					 | 
				
			||||||
    over: diff < 0,
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  //  The result.
 | 
					 | 
				
			||||||
  return (
 | 
					 | 
				
			||||||
    <div className={computedClass}>
 | 
					 | 
				
			||||||
      <span className='count'>{diff}</span>
 | 
					 | 
				
			||||||
      {sideArm && sideArm !== 'none' ? (
 | 
					 | 
				
			||||||
        <Button
 | 
					 | 
				
			||||||
          className='side_arm'
 | 
					 | 
				
			||||||
          disabled={disabled || diff < 0}
 | 
					 | 
				
			||||||
          onClick={onSecondarySubmit}
 | 
					 | 
				
			||||||
          style={{ padding: null }}
 | 
					 | 
				
			||||||
          text={
 | 
					 | 
				
			||||||
            <span>
 | 
					 | 
				
			||||||
              <Icon
 | 
					 | 
				
			||||||
                icon={{
 | 
					 | 
				
			||||||
                  public: 'globe',
 | 
					 | 
				
			||||||
                  unlisted: 'unlock',
 | 
					 | 
				
			||||||
                  private: 'lock',
 | 
					 | 
				
			||||||
                  direct: 'envelope',
 | 
					 | 
				
			||||||
                }[sideArm]}
 | 
					 | 
				
			||||||
              />
 | 
					 | 
				
			||||||
            </span>
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
          title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${sideArm}.short` })}`}
 | 
					 | 
				
			||||||
        />
 | 
					 | 
				
			||||||
      ) : null}
 | 
					 | 
				
			||||||
      <Button
 | 
					 | 
				
			||||||
        className='primary'
 | 
					 | 
				
			||||||
        text={function () {
 | 
					 | 
				
			||||||
          switch (true) {
 | 
					 | 
				
			||||||
          case !!sideArm && sideArm !== 'none':
 | 
					 | 
				
			||||||
          case privacy === 'direct':
 | 
					 | 
				
			||||||
          case privacy === 'private':
 | 
					 | 
				
			||||||
            return (
 | 
					 | 
				
			||||||
              <span>
 | 
					 | 
				
			||||||
                <Icon
 | 
					 | 
				
			||||||
                  icon={{
 | 
					 | 
				
			||||||
                    direct: 'envelope',
 | 
					 | 
				
			||||||
                    private: 'lock',
 | 
					 | 
				
			||||||
                    public: 'globe',
 | 
					 | 
				
			||||||
                    unlisted: 'unlock',
 | 
					 | 
				
			||||||
                  }[privacy]}
 | 
					 | 
				
			||||||
                />
 | 
					 | 
				
			||||||
                {' '}
 | 
					 | 
				
			||||||
                <FormattedMessage {...messages.publish} />
 | 
					 | 
				
			||||||
              </span>
 | 
					 | 
				
			||||||
            );
 | 
					 | 
				
			||||||
          case privacy === 'public':
 | 
					 | 
				
			||||||
            return (
 | 
					 | 
				
			||||||
              <span>
 | 
					 | 
				
			||||||
                <FormattedMessage
 | 
					 | 
				
			||||||
                  {...messages.publishLoud}
 | 
					 | 
				
			||||||
                  values={{ publish: <FormattedMessage {...messages.publish} /> }}
 | 
					 | 
				
			||||||
                />
 | 
					 | 
				
			||||||
              </span>
 | 
					 | 
				
			||||||
            );
 | 
					 | 
				
			||||||
          default:
 | 
					 | 
				
			||||||
            return <span><FormattedMessage {...messages.publish} /></span>;
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
        }()}
 | 
					 | 
				
			||||||
        title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${privacy}.short` })}`}
 | 
					 | 
				
			||||||
        onClick={onSubmit}
 | 
					 | 
				
			||||||
        disabled={disabled || diff < 0}
 | 
					 | 
				
			||||||
      />
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
  );
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
//  Props.
 | 
					 | 
				
			||||||
ComposerPublisher.propTypes = {
 | 
					 | 
				
			||||||
  countText: PropTypes.string,
 | 
					 | 
				
			||||||
  disabled: PropTypes.bool,
 | 
					 | 
				
			||||||
  intl: PropTypes.object.isRequired,
 | 
					 | 
				
			||||||
  onSecondarySubmit: PropTypes.func,
 | 
					 | 
				
			||||||
  onSubmit: PropTypes.func,
 | 
					 | 
				
			||||||
  privacy: PropTypes.oneOf(['direct', 'private', 'unlisted', 'public']),
 | 
					 | 
				
			||||||
  sideArm: PropTypes.oneOf(['none', 'direct', 'private', 'unlisted', 'public']),
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user