random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Large update for all components

Browse Source 
reorganization, linting, updating file imports, consolidation
warning: there will be errors in this commit
todo: update webpack, add missing styles, scss files, consolidate the rest of components within features/*
This commit is contained in:
mgabdev
2019-08-07 01:02:36 -04:00
parent 5505f60119
commit 280dc51d85
341 changed files with 8876 additions and 8321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/gabsocial/features/compose/components/action_bar.js
View File

@@ -1,5 +1,4 @@
import { openModal } from '../../../actions/modal';
import ImmutablePropTypes from 'react-immutable-proptypes';
import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
import { defineMessages, injectIntl } from 'react-intl';
import { meUsername } from 'gabsocial/initial_state';

22
app/javascript/gabsocial/features/compose/components/autosuggest_account.js
View File

@@ -1,9 +1,21 @@
import Avatar from '../../../components/avatar';
import DisplayName from '../../../components/display_name';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Avatar from '../../../components/avatar/avatar';
import DisplayName from '../../../components/display_name/display_name';
import { makeGetAccount } from '../../../selectors';
export default class AutosuggestAccount extends ImmutablePureComponent {
const makeMapStateToProps = () => {
const getAccount = makeGetAccount();
const mapStateToProps = (state, { id }) => ({
account: getAccount(state, id),
});
return mapStateToProps;
};
export default @connect(makeMapStateToProps)
class AutosuggestAccount extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
@@ -14,7 +26,9 @@ export default class AutosuggestAccount extends ImmutablePureComponent {
return (
<div className='autosuggest-account' title={account.get('acct')}>
<div className='autosuggest-account-icon'><Avatar account={account} size={18} /></div>
<div className='autosuggest-account-icon'>
<Avatar account={account} size={18} />
</div>
<DisplayName account={account} />
</div>
);

42
app/javascript/gabsocial/features/compose/components/compose_form.js
View File

@@ -1,24 +1,23 @@
import CharacterCounter from './character_counter';
import Button from '../../../components/button';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { length } from 'stringz';
import ImmutablePropTypes from 'react-immutable-proptypes';
import classNames from 'classnames';
import CharacterCounter from './character_counter';
import ReplyIndicatorContainer from '../containers/reply_indicator_container';
import AutosuggestTextarea from '../../../components/autosuggest_textarea';
import AutosuggestInput from '../../../components/autosuggest_input';
import AutosuggestTextbox from '../../../components/autosuggest_textbox';
import PollButtonContainer from '../containers/poll_button_container';
import UploadButtonContainer from '../containers/upload_button_container';
import { defineMessages, injectIntl } from 'react-intl';
import SpoilerButtonContainer from '../containers/spoiler_button_container';
import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container';
import PollFormContainer from '../containers/poll_form_container';
import UploadFormContainer from '../containers/upload_form_container';
import UploadForm from './upload_form';
import WarningContainer from '../containers/warning_container';
import { isMobile } from '../../../utils/is_mobile';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { length } from 'stringz';
import { countableText } from '../util/counter';
import Icon from 'gabsocial/components/icon';
import Icon from '../../../components/icon';
import Button from '../../../components/button';
const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
const maxPostCharacterCount = 3000;
@@ -104,10 +103,10 @@ class ComposeForm extends ImmutablePureComponent {
}
handleSubmit = () => {
if (this.props.text !== this.autosuggestTextarea.textarea.value) {
if (this.props.text !== this.autosuggestTextarea.textbox.value) {
// Something changed the text inside the textarea (e.g. browser extensions like Grammarly)
// Update the state to match the current text
this.props.onChange(this.autosuggestTextarea.textarea.value);
this.props.onChange(this.autosuggestTextarea.textbox.value);
}
// Submit disabled:
@@ -171,8 +170,8 @@ class ComposeForm extends ImmutablePureComponent {
selectionStart = selectionEnd;
}
this.autosuggestTextarea.textarea.setSelectionRange(selectionStart, selectionEnd);
this.autosuggestTextarea.textarea.focus();
this.autosuggestTextarea.textbox.setSelectionRange(selectionStart, selectionEnd);
this.autosuggestTextarea.textbox.focus();
}
}
@@ -189,9 +188,9 @@ class ComposeForm extends ImmutablePureComponent {
}
handleEmojiPick = (data) => {
const { text } = this.props;
const position = this.autosuggestTextarea.textarea.selectionStart;
const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
const { text } = this.props;
const position = this.autosuggestTextarea.textbox.selectionStart;
const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
this.props.onPickEmoji(position, data, needsSpace);
}
@@ -215,7 +214,7 @@ class ComposeForm extends ImmutablePureComponent {
const composeClassNames = classNames({
'compose-form': true,
'condensed': condensed,
})
});
return (
<div className={composeClassNames} ref={this.setForm} onClick={this.handleClick}>
@@ -224,7 +223,7 @@ class ComposeForm extends ImmutablePureComponent {
{ !shouldCondense && <ReplyIndicatorContainer /> }
<div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`}>
<AutosuggestInput
<AutosuggestTextbox
placeholder={intl.formatMessage(messages.spoiler_placeholder)}
value={this.props.spoilerText}
onChange={this.handleChangeSpoilerText}
@@ -245,7 +244,8 @@ class ComposeForm extends ImmutablePureComponent {
<EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
</div>
<AutosuggestTextarea
<AutosuggestTextbox
textarea={true}
ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
placeholder={intl.formatMessage(messages.placeholder)}
disabled={disabled}
@@ -263,11 +263,11 @@ class ComposeForm extends ImmutablePureComponent {
{
!condensed &&
<div className='compose-form__modifiers'>
<UploadFormContainer />
<UploadForm />
<PollFormContainer />
</div>
}
</AutosuggestTextarea>
</AutosuggestTextbox>
{
!condensed &&

2
app/javascript/gabsocial/features/compose/components/emoji_picker_dropdown.js
View File

@@ -4,7 +4,7 @@ import Overlay from 'react-overlays/lib/Overlay';
import classNames from 'classnames';
import ImmutablePropTypes from 'react-immutable-proptypes';
import detectPassiveEvents from 'detect-passive-events';
import { buildCustomEmojis } from '../../emoji/emoji';
import { buildCustomEmojis } from '../../../components/emoji/emoji';
const messages = defineMessages({
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },

14
app/javascript/gabsocial/features/compose/components/navigation_bar.js
View File

@@ -5,8 +5,16 @@ import Permalink from '../../../components/permalink';
import IconButton from '../../../components/icon_button';
import { FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { me } from '../../../initial_state';
export default class NavigationBar extends ImmutablePureComponent {
const mapStateToProps = state => {
return {
account: state.getIn(['accounts', me]),
};
};
export default @connect(mapStateToProps)
class NavigationBar extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
@@ -26,7 +34,9 @@ export default class NavigationBar extends ImmutablePureComponent {
<strong className='navigation-bar__profile-account'>@{this.props.account.get('acct')}</strong>
</Permalink>
<a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a>
<a href='/settings/profile' className='navigation-bar__profile-edit'>
<FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' />
</a>
</div>
<div className='navigation-bar__actions'>

14
app/javascript/gabsocial/features/compose/components/poll_form.js
View File

@@ -1,12 +1,10 @@
'use strict';
import classNames from 'classnames';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import IconButton from 'gabsocial/components/icon_button';
import Icon from 'gabsocial/components/icon';
import AutosuggestInput from 'gabsocial/components/autosuggest_input';
import classNames from 'classnames';
import IconButton from '../../../components/icon_button';
import Icon from '../../../components/icon';
import AutosuggestTextbox from '../../../components/autosuggest_textbox';
const messages = defineMessages({
option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' },
@@ -75,7 +73,7 @@ class Option extends PureComponent {
tabIndex='0'
/>
<AutosuggestInput
<AutosuggestTextbox
placeholder={intl.formatMessage(messages.option_placeholder, { number: index + 1 })}
maxLength={25}
value={title}
@@ -143,7 +141,7 @@ class PollForm extends ImmutablePureComponent {
<div className='poll__footer'>
{options.size < 4 && (
<button className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button>
<button className='button button--secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button>
)}
<select value={expiresIn} onChange={this.handleSelectDuration}>

8
app/javascript/gabsocial/features/compose/components/privacy_dropdown.js
View File

@@ -1,11 +1,11 @@
import { injectIntl, defineMessages } from 'react-intl';
import IconButton from '../../../components/icon_button';
import Overlay from 'react-overlays/lib/Overlay';
import Motion from '../../ui/util/optional_motion';
import spring from 'react-motion/lib/spring';
import detectPassiveEvents from 'detect-passive-events';
import classNames from 'classnames';
import Icon from 'gabsocial/components/icon';
import Overlay from 'react-overlays/lib/Overlay';
import IconButton from '../../../components/icon_button';
import Motion from '../../ui/util/optional_motion';
import Icon from '../../../components/icon';
const messages = defineMessages({
public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },

4
app/javascript/gabsocial/features/compose/components/search.js
View File

@@ -1,9 +1,9 @@
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import Overlay from 'react-overlays/lib/Overlay';
import Motion from '../../ui/util/optional_motion';
import spring from 'react-motion/lib/spring';
import Motion from '../../ui/util/optional_motion';
import { searchEnabled } from '../../../initial_state';
import Icon from 'gabsocial/components/icon';
import Icon from '../../../components/icon';
const messages = defineMessages({
placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },

9
app/javascript/gabsocial/features/compose/components/search_results.js
View File

@@ -3,10 +3,9 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import AccountContainer from '../../../containers/account_container';
import StatusContainer from '../../../containers/status_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Hashtag from '../../../components/hashtag';
import Icon from 'gabsocial/components/icon';
import WhoToFollowPanel from '../../ui/components/who_to_follow_panel';
// import TrendsPanel from '../../ui/components/trends_panel';
import TrendingItem from '../../../components/trending_item';
import Icon from '../../../components/icon';
import WhoToFollowPanel from '../../../components/panel';
export default @injectIntl
class SearchResults extends ImmutablePureComponent {
@@ -64,7 +63,7 @@ class SearchResults extends ImmutablePureComponent {
<div className='search-results__section'>
<h5><Icon id='hashtag' fixedWidth /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
{results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
{results.get('hashtags').map(hashtag => <TrendingItem key={hashtag.get('name')} hashtag={hashtag} />)}
</div>
);
}

6
app/javascript/gabsocial/features/compose/components/upload.js
View File

@@ -1,10 +1,10 @@
import ImmutablePropTypes from 'react-immutable-proptypes';
import Motion from '../../ui/util/optional_motion';
import spring from 'react-motion/lib/spring';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import Icon from 'gabsocial/components/icon';
import spring from 'react-motion/lib/spring';
import Motion from '../../ui/util/optional_motion';
import Icon from '../../../components/icon';
const messages = defineMessages({
description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },

11
app/javascript/gabsocial/features/compose/components/upload_form.js
View File

@@ -1,10 +1,15 @@
import ImmutablePropTypes from 'react-immutable-proptypes';
import UploadProgressContainer from '../containers/upload_progress_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
import UploadProgress from './upload_progress';
import UploadContainer from '../containers/upload_container';
import SensitiveButtonContainer from '../containers/sensitive_button_container';
export default class UploadForm extends ImmutablePureComponent {
const mapStateToProps = state => ({
mediaIds: state.getIn(['compose', 'media_attachments']).map(item => item.get('id')),
});
export default @connect(mapStateToProps)
class UploadForm extends ImmutablePureComponent {
static propTypes = {
mediaIds: ImmutablePropTypes.list.isRequired,
@@ -15,7 +20,7 @@ export default class UploadForm extends ImmutablePureComponent {
return (
<div className='compose-form__upload-wrapper'>
<UploadProgressContainer />
<UploadProgress />
<div className='compose-form__uploads-wrapper'>
{mediaIds.map(id => (

14
app/javascript/gabsocial/features/compose/components/upload_progress.js
View File

@@ -1,9 +1,15 @@
import Motion from '../../ui/util/optional_motion';
import spring from 'react-motion/lib/spring';
import { FormattedMessage } from 'react-intl';
import Icon from 'gabsocial/components/icon';
import spring from 'react-motion/lib/spring';
import Motion from '../../ui/util/optional_motion';
import Icon from '../../../components/icon';
export default class UploadProgress extends PureComponent {
const mapStateToProps = state => ({
active: state.getIn(['compose', 'is_uploading']),
progress: state.getIn(['compose', 'progress']),
});
export default @connect(mapStateToProps)
class UploadProgress extends PureComponent {
static propTypes = {
active: PropTypes.bool,

14
app/javascript/gabsocial/features/compose/containers/autosuggest_account_container.js
View File

@@ -1,14 +0,0 @@
import AutosuggestAccount from '../components/autosuggest_account';
import { makeGetAccount } from '../../../selectors';
const makeMapStateToProps = () => {
const getAccount = makeGetAccount();
const mapStateToProps = (state, { id }) => ({
account: getAccount(state, id),
});
return mapStateToProps;
};
export default connect(makeMapStateToProps)(AutosuggestAccount);

11
app/javascript/gabsocial/features/compose/containers/navigation_container.js
View File

@@ -1,11 +0,0 @@
import { connect } from 'react-redux';
import NavigationBar from '../components/navigation_bar';
import { me } from '../../../initial_state';
const mapStateToProps = state => {
return {
account: state.getIn(['accounts', me]),
};
};
export default connect(mapStateToProps)(NavigationBar);

7
app/javascript/gabsocial/features/compose/containers/upload_form_container.js
View File

@@ -1,7 +0,0 @@
import UploadForm from '../components/upload_form';
const mapStateToProps = state => ({
mediaIds: state.getIn(['compose', 'media_attachments']).map(item => item.get('id')),
});
export default connect(mapStateToProps)(UploadForm);

8
app/javascript/gabsocial/features/compose/containers/upload_progress_container.js
View File

@@ -1,8 +0,0 @@
import UploadProgress from '../components/upload_progress';
const mapStateToProps = state => ({
active: state.getIn(['compose', 'is_uploading']),
progress: state.getIn(['compose', 'progress']),
});
export default connect(mapStateToProps)(UploadProgress);

14
app/javascript/gabsocial/features/compose/index.js
View File

@@ -1,17 +1,17 @@
import ComposeFormContainer from './containers/compose_form_container';
import NavigationContainer from './containers/navigation_container';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { mountCompose, unmountCompose } from '../../actions/compose';
import { Link } from 'react-router-dom';
import { injectIntl, defineMessages } from 'react-intl';
import SearchContainer from './containers/search_container';
import Motion from '../ui/util/optional_motion';
import spring from 'react-motion/lib/spring';
import Motion from '../ui/util/optional_motion';
import ComposeFormContainer from './containers/compose_form_container';
import NavigationBar from './components/navigation_bar';
import { mountCompose, unmountCompose } from '../../actions/compose';
import SearchContainer from './containers/search_container';
import SearchResultsContainer from './containers/search_results_container';
import { changeComposing } from '../../actions/compose';
import elephantUIPlane from '../../../images/logo_ui_column_footer.png';
import { mascot } from '../../initial_state';
import Icon from 'gabsocial/components/icon';
import Icon from '../../components/icon';
const messages = defineMessages({
start: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
@@ -102,7 +102,7 @@ class Compose extends PureComponent {
<div className='drawer__pager'>
{!isSearchPage && <div className='drawer__inner' onFocus={this.onFocus}>
<NavigationContainer onClose={this.onBlur} />
<NavigationBar onClose={this.onBlur} />
<ComposeFormContainer />