diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/drawer')
6 files changed, 68 insertions, 72 deletions
diff --git a/app/javascript/flavours/glitch/features/drawer/account/index.js b/app/javascript/flavours/glitch/features/drawer/account/index.js index 9afe8ba3e..168d0c2cf 100644 --- a/app/javascript/flavours/glitch/features/drawer/account/index.js +++ b/app/javascript/flavours/glitch/features/drawer/account/index.js @@ -27,7 +27,7 @@ export default function DrawerAccount ({ account }) { // We need an account to render. if (!account) { return ( - <div className='drawer--pager--account'> + <div className='drawer--account'> <a className='edit' href='/settings/profile' @@ -40,7 +40,7 @@ export default function DrawerAccount ({ account }) { // The result. return ( - <div className='drawer--pager--account'> + <div className='drawer--account'> <Permalink className='avatar' href={account.get('url')} @@ -67,4 +67,5 @@ export default function DrawerAccount ({ account }) { ); } +// Props. DrawerAccount.propTypes = { account: ImmutablePropTypes.map }; diff --git a/app/javascript/flavours/glitch/features/drawer/header/index.js b/app/javascript/flavours/glitch/features/drawer/header/index.js index fd79b6e18..6949cd028 100644 --- a/app/javascript/flavours/glitch/features/drawer/header/index.js +++ b/app/javascript/flavours/glitch/features/drawer/header/index.js @@ -51,7 +51,7 @@ export default function DrawerHeader ({ }) { // Only renders the component if the column isn't being shown. - const renderForColumn = conditionalRender.bind( + const renderForColumn = conditionalRender.bind(null, columnId => !columns || !columns.some( column => column.get('id') === columnId ) @@ -110,6 +110,7 @@ export default function DrawerHeader ({ ); } +// Props. DrawerHeader.propTypes = { columns: ImmutablePropTypes.list, intl: PropTypes.object, diff --git a/app/javascript/flavours/glitch/features/drawer/index.js b/app/javascript/flavours/glitch/features/drawer/index.js index d184dfd9b..9ade1f87a 100644 --- a/app/javascript/flavours/glitch/features/drawer/index.js +++ b/app/javascript/flavours/glitch/features/drawer/index.js @@ -34,23 +34,13 @@ const mapStateToProps = state => ({ }); // Dispatch mapping. -const mapDispatchToProps = dispatch => ({ - change (value) { - dispatch(changeSearch(value)); - }, - clear () { - dispatch(clearSearch()); - }, - show () { - dispatch(showSearch()); - }, - submit () { - dispatch(submitSearch()); - }, - openSettings () { - dispatch(openModal('SETTINGS', {})); - }, -}); +const mapDispatchToProps = { + onChange: changeSearch, + onClear: clearSearch, + onShow: showSearch, + onSubmit: submitSearch, + onOpenSettings: openModal.bind(null, 'SETTINGS', {}), +}; // The component. class Drawer extends React.Component { @@ -63,23 +53,19 @@ class Drawer extends React.Component { // Rendering. render () { const { - dispatch: { - change, - clear, - openSettings, - show, - submit, - }, + account, + columns, intl, multiColumn, - state: { - account, - columns, - results, - searchHidden, - searchValue, - submitted, - }, + onChange, + onClear, + onOpenSettings, + onShow, + onSubmit, + results, + searchHidden, + searchValue, + submitted, } = this.props; // The result. @@ -89,15 +75,15 @@ class Drawer extends React.Component { <DrawerHeader columns={columns} intl={intl} - onSettingsClick={openSettings} + onSettingsClick={onOpenSettings} /> ) : null} <DrawerSearch intl={intl} - onChange={change} - onClear={clear} - onShow={show} - onSubmit={submit} + onChange={onChange} + onClear={onClear} + onShow={onShow} + onSubmit={onSubmit} submitted={submitted} value={searchValue} /> @@ -117,23 +103,23 @@ class Drawer extends React.Component { // Props. Drawer.propTypes = { - dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, multiColumn: PropTypes.bool, - state: PropTypes.shape({ - account: ImmutablePropTypes.map, - columns: ImmutablePropTypes.list, - results: ImmutablePropTypes.map, - searchHidden: PropTypes.bool, - searchValue: PropTypes.string, - submitted: PropTypes.bool, - }).isRequired, -}; -// Default props. -Drawer.defaultProps = { - dispatch: {}, - state: {}, + // State props. + account: ImmutablePropTypes.map, + columns: ImmutablePropTypes.list, + results: ImmutablePropTypes.map, + searchHidden: PropTypes.bool, + searchValue: PropTypes.string, + submitted: PropTypes.bool, + + // Dispatch props. + onChange: PropTypes.func, + onClear: PropTypes.func, + onShow: PropTypes.func, + onSubmit: PropTypes.func, + onOpenSettings: PropTypes.func, }; // Connecting and export. diff --git a/app/javascript/flavours/glitch/features/drawer/results/index.js b/app/javascript/flavours/glitch/features/drawer/results/index.js index 559d56da5..f2a79eb59 100644 --- a/app/javascript/flavours/glitch/features/drawer/results/index.js +++ b/app/javascript/flavours/glitch/features/drawer/results/index.js @@ -25,7 +25,7 @@ const messages = defineMessages({ }); // The component. -export default function DrawerPager ({ +export default function DrawerResults ({ results, visible, }) { @@ -33,6 +33,7 @@ export default function DrawerPager ({ const statuses = results ? results.get('statuses') : null; const hashtags = results ? results.get('hashtags') : null; + // This gets the total number of items. const count = [accounts, statuses, hashtags].reduce(function (size, item) { if (item && item.size) { return size + item.size; @@ -108,7 +109,8 @@ export default function DrawerPager ({ ); } -DrawerPager.propTypes = { +// Props. +DrawerResults.propTypes = { results: ImmutablePropTypes.map, visible: PropTypes.bool, }; diff --git a/app/javascript/flavours/glitch/features/drawer/search/index.js b/app/javascript/flavours/glitch/features/drawer/search/index.js index ed69f71ed..2d739349c 100644 --- a/app/javascript/flavours/glitch/features/drawer/search/index.js +++ b/app/javascript/flavours/glitch/features/drawer/search/index.js @@ -30,18 +30,18 @@ const messages = defineMessages({ // Handlers. const handlers = { - blur () { + handleBlur () { this.setState({ expanded: false }); }, - change ({ target: { value } }) { + handleChange ({ target: { value } }) { const { onChange } = this.props; if (onChange) { onChange(value); } }, - clear (e) { + handleClear (e) { const { onClear, submitted, @@ -53,7 +53,7 @@ const handlers = { } }, - focus () { + handleFocus () { const { onShow } = this.props; this.setState({ expanded: true }); if (onShow) { @@ -61,7 +61,7 @@ const handlers = { } }, - keyUp (e) { + handleKeyUp (e) { const { onSubmit } = this.props; switch (e.key) { case 'Enter': @@ -78,19 +78,21 @@ const handlers = { // The component. export default class DrawerSearch extends React.PureComponent { + // Constructor. constructor (props) { super(props); assignHandlers(this, handlers); this.state = { expanded: false }; } + // Rendering. render () { const { - blur, - change, - clear, - focus, - keyUp, + handleBlur, + handleChange, + handleClear, + handleFocus, + handleKeyUp, } = this.handlers; const { intl, @@ -110,23 +112,22 @@ export default class DrawerSearch extends React.PureComponent { type='text' placeholder={intl.formatMessage(messages.placeholder)} value={value || ''} - onChange={change} - onKeyUp={keyUp} - onFocus={focus} - onBlur={blur} + onChange={handleChange} + onKeyUp={handleKeyUp} + onFocus={handleFocus} + onBlur={handleBlur} /> </label> <div aria-label={intl.formatMessage(messages.placeholder)} className='icon' - onClick={clear} + onClick={handleClear} role='button' tabIndex='0' > <Icon icon='search' /> <Icon icon='fa-times-circle' /> </div> - <Overlay placement='bottom' show={expanded && !(value || '').length && !submitted} @@ -138,6 +139,7 @@ export default class DrawerSearch extends React.PureComponent { } +// Props. DrawerSearch.propTypes = { value: PropTypes.string, submitted: PropTypes.bool, diff --git a/app/javascript/flavours/glitch/features/drawer/search/popout/index.js b/app/javascript/flavours/glitch/features/drawer/search/popout/index.js index bd36275f5..b5ea86ff1 100644 --- a/app/javascript/flavours/glitch/features/drawer/search/popout/index.js +++ b/app/javascript/flavours/glitch/features/drawer/search/popout/index.js @@ -34,9 +34,13 @@ const messages = defineMessages({ }, }); +// The spring used by our motion. const motionSpring = spring(1, { damping: 35, stiffness: 400 }); +// The component. export default function DrawerSearchPopout ({ style }) { + + // The result. return ( <Motion defaultStyle={{ |