diff options
author | kibigo! <marrus-sh@users.noreply.github.com> | 2017-12-26 16:54:28 -0800 |
---|---|---|
committer | kibigo! <marrus-sh@users.noreply.github.com> | 2018-01-04 18:21:59 -0800 |
commit | 3c29f5740447270a4122b334281a907ecbdd4165 (patch) | |
tree | dd3daba631f2eddf0ede5af76b8e29eda8874854 /app/javascript/flavours/glitch/features/drawer/results/index.js | |
parent | 924ffe81d477a8cf890c8117efb94b908760bccc (diff) |
WIP <Compose> Refactor; <Drawer> ed.
Diffstat (limited to 'app/javascript/flavours/glitch/features/drawer/results/index.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/drawer/results/index.js | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/drawer/results/index.js b/app/javascript/flavours/glitch/features/drawer/results/index.js new file mode 100644 index 000000000..559d56da5 --- /dev/null +++ b/app/javascript/flavours/glitch/features/drawer/results/index.js @@ -0,0 +1,114 @@ +// Package imports. +import PropTypes from 'prop-types'; +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { + FormattedMessage, + defineMessages, +} from 'react-intl'; +import spring from 'react-motion/lib/spring'; +import { Link } from 'react-router-dom'; + +// Components. +import AccountContainer from 'flavours/glitch/containers/account_container'; +import StatusContainer from 'flavours/glitch/containers/status_container'; + +// Utils. +import Motion from 'flavours/glitch/util/optional_motion'; + +// Messages. +const messages = defineMessages({ + total: { + defaultMessage: '{count, number} {count, plural, one {result} other {results}}', + id: 'search_results.total', + }, +}); + +// The component. +export default function DrawerPager ({ + results, + visible, +}) { + const accounts = results ? results.get('accounts') : null; + const statuses = results ? results.get('statuses') : null; + const hashtags = results ? results.get('hashtags') : null; + + const count = [accounts, statuses, hashtags].reduce(function (size, item) { + if (item && item.size) { + return size + item.size; + } + return size; + }, 0); + + // The result. + return ( + <Motion + defaultStyle={{ x: -100 }} + style={{ + x: spring(visible ? 0 : -100, { + stiffness: 210, + damping: 20, + }), + }} + > + {({ x }) => ( + <div + className='drawer--results' + style={{ + transform: `translateX(${x}%)`, + visibility: x === -100 ? 'hidden' : 'visible', + }} + > + <header> + <FormattedMessage + {...messages.total} + values={{ count }} + /> + </header> + {accounts && accounts.size ? ( + <section> + {accounts.map( + accountId => ( + <AccountContainer + id={accountId} + key={accountId} + /> + ) + )} + </section> + ) : null} + {statuses && statuses.size ? ( + <section> + {statuses.map( + statusId => ( + <StatusContainer + id={statusId} + key={statusId} + /> + ) + )} + </section> + ) : null} + {hashtags && hashtags.size ? ( + <section> + {hashtags.map( + hashtag => ( + <Link + className='hashtag' + key={hashtag} + to={`/timelines/tag/${hashtag}`} + >#{hashtag}</Link> + ) + )} + </section> + ) : null} + </div> + )} + </Motion> + ); +} + +DrawerPager.propTypes = { + results: ImmutablePropTypes.map, + visible: PropTypes.bool, +}; |