Inline DrawerSearchPopout in DrawerSearch
This commit is contained in:
Thibaut Girka
ThibG
parent
c19b983986
commit
c92ab35b19
2 changed files with 40 additions and 117 deletions
|
|
@ -3,27 +3,59 @@ import classNames from 'classnames';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
import spring from 'react-motion/lib/spring';
|
||||||
import {
|
import {
|
||||||
injectIntl,
|
injectIntl,
|
||||||
|
FormattedMessage,
|
||||||
defineMessages,
|
defineMessages,
|
||||||
} from 'react-intl';
|
} from 'react-intl';
|
||||||
import Overlay from 'react-overlays/lib/Overlay';
|
import Overlay from 'react-overlays/lib/Overlay';
|
||||||
|
|
||||||
// Components.
|
// Components.
|
||||||
import Icon from 'flavours/glitch/components/icon';
|
import Icon from 'flavours/glitch/components/icon';
|
||||||
import DrawerSearchPopout from './popout';
|
|
||||||
|
|
||||||
// Utils.
|
// Utils.
|
||||||
import { focusRoot } from 'flavours/glitch/util/dom_helpers';
|
import { focusRoot } from 'flavours/glitch/util/dom_helpers';
|
||||||
|
import { searchEnabled } from 'flavours/glitch/util/initial_state';
|
||||||
|
import Motion from 'flavours/glitch/util/optional_motion';
|
||||||
|
|
||||||
// Messages.
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
placeholder: {
|
placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
|
||||||
defaultMessage: 'Search',
|
|
||||||
id: 'search.placeholder',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
class SearchPopout extends React.PureComponent {
|
||||||
|
|
||||||
|
static propTypes = {
|
||||||
|
style: PropTypes.object,
|
||||||
|
};
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { style } = this.props;
|
||||||
|
const extraInformation = searchEnabled ? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' /> : <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames and hashtags' />;
|
||||||
|
return (
|
||||||
|
<div style={{ ...style, position: 'absolute', width: 285 }}>
|
||||||
|
<Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
|
||||||
|
{({ opacity, scaleX, scaleY }) => (
|
||||||
|
<div className='drawer--search--popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
|
||||||
|
<h4><FormattedMessage id='search_popout.search_format' defaultMessage='Advanced search format' /></h4>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><em>#example</em> <FormattedMessage id='search_popout.tips.hashtag' defaultMessage='hashtag' /></li>
|
||||||
|
<li><em>@username@domain</em> <FormattedMessage id='search_popout.tips.user' defaultMessage='user' /></li>
|
||||||
|
<li><em>URL</em> <FormattedMessage id='search_popout.tips.user' defaultMessage='user' /></li>
|
||||||
|
<li><em>URL</em> <FormattedMessage id='search_popout.tips.status' defaultMessage='status' /></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{extraInformation}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Motion>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
// The component.
|
// The component.
|
||||||
export default @injectIntl
|
export default @injectIntl
|
||||||
class DrawerSearch extends React.PureComponent {
|
class DrawerSearch extends React.PureComponent {
|
||||||
|
|
@ -61,7 +93,7 @@ class DrawerSearch extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
handleBlur () {
|
handleBlur = () => {
|
||||||
this.setState({ expanded: false });
|
this.setState({ expanded: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -117,7 +149,7 @@ class DrawerSearch extends React.PureComponent {
|
||||||
<Icon icon='times-circle' />
|
<Icon icon='times-circle' />
|
||||||
</div>
|
</div>
|
||||||
<Overlay show={expanded && !active} placement='bottom' target={this}>
|
<Overlay show={expanded && !active} placement='bottom' target={this}>
|
||||||
<DrawerSearchPopout />
|
<SearchPopout />
|
||||||
</Overlay>
|
</Overlay>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1,109 +0,0 @@
|
||||||
// Package imports.
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import {
|
|
||||||
FormattedMessage,
|
|
||||||
defineMessages,
|
|
||||||
} from 'react-intl';
|
|
||||||
import spring from 'react-motion/lib/spring';
|
|
||||||
|
|
||||||
// Utils.
|
|
||||||
import Motion from 'flavours/glitch/util/optional_motion';
|
|
||||||
import { searchEnabled } from 'flavours/glitch/util/initial_state';
|
|
||||||
|
|
||||||
// Messages.
|
|
||||||
const messages = defineMessages({
|
|
||||||
format: {
|
|
||||||
defaultMessage: 'Advanced search format',
|
|
||||||
id: 'search_popout.search_format',
|
|
||||||
},
|
|
||||||
hashtag: {
|
|
||||||
defaultMessage: 'hashtag',
|
|
||||||
id: 'search_popout.tips.hashtag',
|
|
||||||
},
|
|
||||||
status: {
|
|
||||||
defaultMessage: 'status',
|
|
||||||
id: 'search_popout.tips.status',
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
defaultMessage: 'Simple text returns matching display names, usernames and hashtags',
|
|
||||||
id: 'search_popout.tips.text',
|
|
||||||
},
|
|
||||||
full_text: {
|
|
||||||
defaultMessage: 'Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.',
|
|
||||||
id: 'search_popout.tips.full_text',
|
|
||||||
},
|
|
||||||
user: {
|
|
||||||
defaultMessage: 'user',
|
|
||||||
id: 'search_popout.tips.user',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// The spring used by our motion.
|
|
||||||
const motionSpring = spring(1, { damping: 35, stiffness: 400 });
|
|
||||||
|
|
||||||
// The component.
|
|
||||||
export default function DrawerSearchPopout ({ style }) {
|
|
||||||
|
|
||||||
// The result.
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className='drawer--search--popout'
|
|
||||||
style={{
|
|
||||||
...style,
|
|
||||||
position: 'absolute',
|
|
||||||
width: 285,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Motion
|
|
||||||
defaultStyle={{
|
|
||||||
opacity: 0,
|
|
||||||
scaleX: 0.85,
|
|
||||||
scaleY: 0.75,
|
|
||||||
}}
|
|
||||||
style={{
|
|
||||||
opacity: motionSpring,
|
|
||||||
scaleX: motionSpring,
|
|
||||||
scaleY: motionSpring,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{({ opacity, scaleX, scaleY }) => (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
opacity: opacity,
|
|
||||||
transform: `scale(${scaleX}, ${scaleY})`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h4><FormattedMessage {...messages.format} /></h4>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<em>#example</em>
|
|
||||||
{' '}
|
|
||||||
<FormattedMessage {...messages.hashtag} />
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<em>@username@domain</em>
|
|
||||||
{' '}
|
|
||||||
<FormattedMessage {...messages.user} />
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<em>URL</em>
|
|
||||||
{' '}
|
|
||||||
<FormattedMessage {...messages.user} />
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<em>URL</em>
|
|
||||||
{' '}
|
|
||||||
<FormattedMessage {...messages.status} />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
{ searchEnabled ? <FormattedMessage {...messages.full_text} /> : <FormattedMessage {...messages.text} /> }
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Motion>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Props.
|
|
||||||
DrawerSearchPopout.propTypes = { style: PropTypes.object };
|
|
||||||
Loading…
Reference in a new issue