diff options
author | Renaud Chaput <renchap@gmail.com> | 2023-02-25 14:34:32 +0100 |
---|---|---|
committer | Claire <claire.github-309c@sitedethib.com> | 2023-02-25 14:35:31 +0100 |
commit | 81ef21a0c802f1d905f37a2a818544a8b400793c (patch) | |
tree | 33043286868ca9efb627ed38accab03c756adbcb /app/javascript/flavours/glitch/features/filters/select_filter.js | |
parent | 859eb01aacc27fa01a8d4063f26a5a1f81e5d3a9 (diff) |
[Glitch] Rename JSX files with proper `.jsx` extension
Port 44a7d87cb1f5df953b6c14c16c59e2e4ead1bcb9 to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/features/filters/select_filter.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/filters/select_filter.js | 192 |
1 files changed, 0 insertions, 192 deletions
diff --git a/app/javascript/flavours/glitch/features/filters/select_filter.js b/app/javascript/flavours/glitch/features/filters/select_filter.js deleted file mode 100644 index 57adb59cc..000000000 --- a/app/javascript/flavours/glitch/features/filters/select_filter.js +++ /dev/null @@ -1,192 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import { toServerSideType } from 'flavours/glitch/utils/filters'; -import { loupeIcon, deleteIcon } from 'flavours/glitch/utils/icons'; -import Icon from 'flavours/glitch/components/icon'; -import fuzzysort from 'fuzzysort'; - -const messages = defineMessages({ - search: { id: 'filter_modal.select_filter.search', defaultMessage: 'Search or create' }, - clear: { id: 'emoji_button.clear', defaultMessage: 'Clear' }, -}); - -const mapStateToProps = (state, { contextType }) => ({ - filters: Array.from(state.get('filters').values()).map((filter) => [ - filter.get('id'), - filter.get('title'), - filter.get('keywords')?.map((keyword) => keyword.get('keyword')).join('\n'), - filter.get('expires_at') && filter.get('expires_at') < new Date(), - contextType && !filter.get('context').includes(toServerSideType(contextType)), - ]), -}); - -export default @connect(mapStateToProps) -@injectIntl -class SelectFilter extends React.PureComponent { - - static propTypes = { - onSelectFilter: PropTypes.func.isRequired, - onNewFilter: PropTypes.func.isRequired, - filters: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.object)), - intl: PropTypes.object.isRequired, - }; - - state = { - searchValue: '', - }; - - search () { - const { filters } = this.props; - const { searchValue } = this.state; - - if (searchValue === '') { - return filters; - } - - return fuzzysort.go(searchValue, filters, { - keys: ['1', '2'], - limit: 5, - threshold: -10000, - }).map(result => result.obj); - } - - renderItem = filter => { - let warning = null; - if (filter[3] || filter[4]) { - warning = ( - <span className='language-dropdown__dropdown__results__item__common-name'> - ( - {filter[3] && <FormattedMessage id='filter_modal.select_filter.expired' defaultMessage='expired' />} - {filter[3] && filter[4] && ', '} - {filter[4] && <FormattedMessage id='filter_modal.select_filter.context_mismatch' defaultMessage='does not apply to this context' />} - ) - </span> - ); - } - - return ( - <div key={filter[0]} role='button' tabIndex='0' data-index={filter[0]} className='language-dropdown__dropdown__results__item' onClick={this.handleItemClick} onKeyDown={this.handleKeyDown}> - <span className='language-dropdown__dropdown__results__item__native-name'>{filter[1]}</span> {warning} - </div> - ); - }; - - renderCreateNew (name) { - return ( - <div key='add-new-filter' role='button' tabIndex='0' className='language-dropdown__dropdown__results__item' onClick={this.handleNewFilterClick} onKeyDown={this.handleKeyDown}> - <Icon id='plus' fixedWidth /> <FormattedMessage id='filter_modal.select_filter.prompt_new' defaultMessage='New category: {name}' values={{ name }} /> - </div> - ); - } - - handleSearchChange = ({ target }) => { - this.setState({ searchValue: target.value }); - }; - - setListRef = c => { - this.listNode = c; - }; - - handleKeyDown = e => { - const index = Array.from(this.listNode.childNodes).findIndex(node => node === e.currentTarget); - - let element = null; - - switch(e.key) { - case ' ': - case 'Enter': - e.currentTarget.click(); - break; - case 'ArrowDown': - element = this.listNode.childNodes[index + 1] || this.listNode.firstChild; - break; - case 'ArrowUp': - element = this.listNode.childNodes[index - 1] || this.listNode.lastChild; - break; - case 'Tab': - if (e.shiftKey) { - element = this.listNode.childNodes[index - 1] || this.listNode.lastChild; - } else { - element = this.listNode.childNodes[index + 1] || this.listNode.firstChild; - } - break; - case 'Home': - element = this.listNode.firstChild; - break; - case 'End': - element = this.listNode.lastChild; - break; - } - - if (element) { - element.focus(); - e.preventDefault(); - e.stopPropagation(); - } - }; - - handleSearchKeyDown = e => { - let element = null; - - switch(e.key) { - case 'Tab': - case 'ArrowDown': - element = this.listNode.firstChild; - - if (element) { - element.focus(); - e.preventDefault(); - e.stopPropagation(); - } - - break; - } - }; - - handleClear = () => { - this.setState({ searchValue: '' }); - }; - - handleItemClick = e => { - const value = e.currentTarget.getAttribute('data-index'); - - e.preventDefault(); - - this.props.onSelectFilter(value); - }; - - handleNewFilterClick = e => { - e.preventDefault(); - - this.props.onNewFilter(this.state.searchValue); - }; - - render () { - const { intl } = this.props; - - const { searchValue } = this.state; - const isSearching = searchValue !== ''; - const results = this.search(); - - return ( - <React.Fragment> - <h3 className='report-dialog-modal__title'><FormattedMessage id='filter_modal.select_filter.title' defaultMessage='Filter this post' /></h3> - <p className='report-dialog-modal__lead'><FormattedMessage id='filter_modal.select_filter.subtitle' defaultMessage='Use an existing category or create a new one' /></p> - - <div className='emoji-mart-search'> - <input type='search' value={searchValue} onChange={this.handleSearchChange} onKeyDown={this.handleSearchKeyDown} placeholder={intl.formatMessage(messages.search)} autoFocus /> - <button className='emoji-mart-search-icon' disabled={!isSearching} aria-label={intl.formatMessage(messages.clear)} onClick={this.handleClear}>{!isSearching ? loupeIcon : deleteIcon}</button> - </div> - - <div className='language-dropdown__dropdown__results emoji-mart-scroll' role='listbox' ref={this.setListRef}> - {results.map(this.renderItem)} - {isSearching && this.renderCreateNew(searchValue) } - </div> - - </React.Fragment> - ); - } - -} |