about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/features/filters/select_filter.js
diff options
context:
space:
mode:
authorRenaud Chaput <renchap@gmail.com>2023-02-25 14:34:32 +0100
committerClaire <claire.github-309c@sitedethib.com>2023-02-25 14:35:31 +0100
commit81ef21a0c802f1d905f37a2a818544a8b400793c (patch)
tree33043286868ca9efb627ed38accab03c756adbcb /app/javascript/flavours/glitch/features/filters/select_filter.js
parent859eb01aacc27fa01a8d4063f26a5a1f81e5d3a9 (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.js192
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>
-    );
-  }
-
-}