WIP <Compose> Refactor; <OnboardingModal> ed.

This commit is contained in:
kibigo! 2017-12-27 14:28:41 -08:00
parent 3c29f57404
commit 8713659dff
4 changed files with 35 additions and 39 deletions

View file

@ -434,6 +434,12 @@ Composer.propTypes = {
}).isRequired, }).isRequired,
}; };
// Default props.
Composer.defaultProps = {
dispatch: {},
state: {},
};
// Connecting and export. // Connecting and export.
export { Composer as WrappedComponent }; export { Composer as WrappedComponent };
export default wrap(Composer, mapStateToProps, mapDispatchToProps, true); export default wrap(Composer, mapStateToProps, mapDispatchToProps, true);

View file

@ -143,6 +143,12 @@ Drawer.propTypes = {
}).isRequired, }).isRequired,
}; };
// Default props.
Drawer.defaultProps = {
dispatch: {},
state: {},
};
// Connecting and export. // Connecting and export.
export { Drawer as WrappedComponent }; export { Drawer as WrappedComponent };
export default wrap(Drawer, mapStateToProps, mapDispatchToProps, true); export default wrap(Drawer, mapStateToProps, mapDispatchToProps, true);

View file

@ -109,7 +109,7 @@ export default class DrawerSearch extends React.PureComponent {
<input <input
type='text' type='text'
placeholder={intl.formatMessage(messages.placeholder)} placeholder={intl.formatMessage(messages.placeholder)}
value={value} value={value || ''}
onChange={change} onChange={change}
onKeyUp={keyUp} onKeyUp={keyUp}
onFocus={focus} onFocus={focus}
@ -129,7 +129,7 @@ export default class DrawerSearch extends React.PureComponent {
<Overlay <Overlay
placement='bottom' placement='bottom'
show={expanded && !value.length && !submitted} show={expanded && !(value || '').length && !submitted}
target={this} target={this}
><DrawerSearchPopout /></Overlay> ><DrawerSearchPopout /></Overlay>
</div> </div>

View file

@ -6,14 +6,10 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ReactSwipeableViews from 'react-swipeable-views'; import ReactSwipeableViews from 'react-swipeable-views';
import classNames from 'classnames'; import classNames from 'classnames';
import Permalink from 'flavours/glitch/components/permalink'; import Permalink from 'flavours/glitch/components/permalink';
import ComposeForm from 'flavours/glitch/features/compose/components/compose_form'; import { WrappedComponent as RawComposer } from 'flavours/glitch/features/composer';
import Search from 'flavours/glitch/features/compose/components/search'; import DrawerPagerAccount from 'flavours/glitch/features/drawer/pager/account';
import NavigationBar from 'flavours/glitch/features/compose/components/navigation_bar'; import DrawerSearch from 'flavours/glitch/features/drawer/search';
import ColumnHeader from './column_header'; import ColumnHeader from './column_header';
import {
List as ImmutableList,
Map as ImmutableMap,
} from 'immutable';
import { me } from 'flavours/glitch/util/initial_state'; import { me } from 'flavours/glitch/util/initial_state';
const noop = () => { }; const noop = () => { };
@ -44,29 +40,21 @@ PageOne.propTypes = {
domain: PropTypes.string.isRequired, domain: PropTypes.string.isRequired,
}; };
const PageTwo = ({ myAccount }) => ( const composerState = {
showSearch: true,
text: 'Awoo! #introductions',
};
const PageTwo = ({ intl, myAccount }) => (
<div className='onboarding-modal__page onboarding-modal__page-two'> <div className='onboarding-modal__page onboarding-modal__page-two'>
<div className='figure non-interactive'> <div className='figure non-interactive'>
<div className='pseudo-drawer'> <div className='pseudo-drawer'>
<NavigationBar onClose={noop} account={myAccount} /> <DrawerPagerAccount account={myAccount} />
<RawComposer
intl={intl}
state={composerState}
/>
</div> </div>
<ComposeForm
text='Awoo! #introductions'
suggestions={ImmutableList()}
mentionedDomains={[]}
spoiler={false}
onChange={noop}
onSubmit={noop}
onPaste={noop}
onPickEmoji={noop}
onChangeSpoilerText={noop}
onClearSuggestions={noop}
onFetchSuggestions={noop}
onSuggestionSelected={noop}
onPrivacyChange={noop}
showSearch
settings={ImmutableMap.of('side_arm', 'none')}
/>
</div> </div>
<p><FormattedMessage id='onboarding.page_two.compose' defaultMessage='Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.' /></p> <p><FormattedMessage id='onboarding.page_two.compose' defaultMessage='Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.' /></p>
@ -74,22 +62,17 @@ const PageTwo = ({ myAccount }) => (
); );
PageTwo.propTypes = { PageTwo.propTypes = {
intl: PropTypes.object.isRequired,
myAccount: ImmutablePropTypes.map.isRequired, myAccount: ImmutablePropTypes.map.isRequired,
}; };
const PageThree = ({ myAccount }) => ( const PageThree = ({ intl, myAccount }) => (
<div className='onboarding-modal__page onboarding-modal__page-three'> <div className='onboarding-modal__page onboarding-modal__page-three'>
<div className='figure non-interactive'> <div className='figure non-interactive'>
<Search <DrawerSearch intl={intl} />
value=''
onChange={noop}
onSubmit={noop}
onClear={noop}
onShow={noop}
/>
<div className='pseudo-drawer'> <div className='pseudo-drawer'>
<NavigationBar onClose={noop} account={myAccount} /> <DrawerPagerAccount account={myAccount} />
</div> </div>
</div> </div>
@ -99,6 +82,7 @@ const PageThree = ({ myAccount }) => (
); );
PageThree.propTypes = { PageThree.propTypes = {
intl: PropTypes.object.isRequired,
myAccount: ImmutablePropTypes.map.isRequired, myAccount: ImmutablePropTypes.map.isRequired,
}; };
@ -192,8 +176,8 @@ export default class OnboardingModal extends React.PureComponent {
const { myAccount, admin, domain, intl } = this.props; const { myAccount, admin, domain, intl } = this.props;
this.pages = [ this.pages = [
<PageOne acct={myAccount.get('acct')} domain={domain} />, <PageOne acct={myAccount.get('acct')} domain={domain} />,
<PageTwo myAccount={myAccount} />, <PageTwo myAccount={myAccount} intl={intl} />,
<PageThree myAccount={myAccount} />, <PageThree myAccount={myAccount} intl={intl} />,
<PageFour domain={domain} intl={intl} />, <PageFour domain={domain} intl={intl} />,
<PageSix admin={admin} domain={domain} />, <PageSix admin={admin} domain={domain} />,
]; ];