generated from eea/volto-addon-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #127 from eea/develop
feat: added SingleTermFacet.jsx
- Loading branch information
Showing
5 changed files
with
196 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
159 changes: 159 additions & 0 deletions
159
searchlib/components/Facets/Unconnected/SingleTermFacet.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| import React from 'react'; | ||
| import { Icon } from 'semantic-ui-react'; | ||
| import cx from 'classnames'; | ||
| import { Resizable, ToggleSort, Term } from '@eeacms/search/components'; | ||
| import { useSort } from '@eeacms/search/lib/hocs'; | ||
| import { useAppConfig } from '@eeacms/search/lib/hocs'; | ||
|
|
||
| function getFilterValueDisplay(filterValue) { | ||
| if (filterValue === undefined || filterValue === null) return ''; | ||
| if (filterValue.hasOwnProperty('name')) return filterValue.name; | ||
| return String(filterValue); | ||
| } | ||
| const FacetOptions = (props) => { | ||
| const { sortedOptions, label, onSelect, onRemove, field } = props; | ||
| return ( | ||
| <div className="sui-multi-checkbox-facet"> | ||
| {sortedOptions.map((option) => { | ||
| const checked = option.selected; | ||
| return ( | ||
| <label | ||
| key={`${getFilterValueDisplay(option.value)}`} | ||
| htmlFor={`multiterm_facet_${label}${getFilterValueDisplay( | ||
| option.value, | ||
| )}`} | ||
| className="sui-multi-checkbox-facet__option-label" | ||
| > | ||
| <div className="sui-multi-checkbox-facet__option-input-wrapper"> | ||
| <input | ||
| id={`multiterm_facet_${label}${getFilterValueDisplay( | ||
| option.value, | ||
| )}`} | ||
| type="checkbox" | ||
| className="sui-multi-checkbox-facet__checkbox" | ||
| checked={checked} | ||
| onChange={() => { | ||
| sortedOptions.forEach((opt) => { | ||
| if (opt.value === option.value) { | ||
| onSelect(opt.value); | ||
| } else { | ||
| onRemove(opt.value); | ||
| } | ||
| }); | ||
| }} | ||
| /> | ||
| <span className="radio-checkmark" /> | ||
| <span className="sui-multi-checkbox-facet__input-text"> | ||
| <Term term={option.value} field={field} /> | ||
| </span> | ||
| </div> | ||
| <span className="sui-multi-checkbox-facet__option-count"> | ||
| ({option.count.toLocaleString('en')}) | ||
| </span> | ||
| </label> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const SingleTermFacetViewComponent = (props) => { | ||
| const { | ||
| className, | ||
| label, | ||
| onRemove, | ||
| onSelect, | ||
| options, // options is the actual value | ||
| showSearch, | ||
| onSearch, | ||
| field, | ||
| } = props; | ||
|
|
||
| const { appConfig } = useAppConfig(); | ||
| const facetConfig = appConfig.facets.find((f) => f.field === field); | ||
| const configSortOn = facetConfig.sortOn || 'count'; | ||
| const configSortOrder = facetConfig.sortOrder || 'descending'; | ||
| let defaultSortOrder = { | ||
| // each criteria has its own default sort order | ||
| count: 'descending', | ||
| value: 'ascending', | ||
| custom: 'ascending', | ||
| }; | ||
|
|
||
| defaultSortOrder[configSortOn] = configSortOrder; | ||
| const { sortedValues: sortedOptions, toggleSort, sorting } = useSort( | ||
| options, | ||
| ['value', 'count'], | ||
| { | ||
| defaultSortOn: configSortOn, | ||
| defaultSortOrder: defaultSortOrder, | ||
| }, | ||
| field, | ||
| ); | ||
|
|
||
| return ( | ||
| <fieldset className={cx('sui-facet searchlib-multiterm-facet', className)}> | ||
| {/*<legend className="sui-facet__title">{label}</legend>*/} | ||
|
|
||
| {showSearch && ( | ||
| <div className="sui-facet-search"> | ||
| {/* <Icon name="search" size="small" color="blue" /> */} | ||
| <input | ||
| className="sui-facet-search__text-input" | ||
| type="search" | ||
| placeholder={'Quick search'} | ||
| onChange={(e) => { | ||
| onSearch(e.target.value); | ||
| }} | ||
| /> | ||
| </div> | ||
| )} | ||
|
|
||
| {options.length < 1 && <div>No matching options</div>} | ||
|
|
||
| <div className="sui-multi-checkbox-facet facet-term-controls"> | ||
| <div className="sui-multi-checkbox-facet__option-label"> | ||
| <span className="sui-multi-checkbox-facet__option-count"> | ||
| <ToggleSort | ||
| label="Alphabetical order" | ||
| onToggle={() => toggleSort('value')} | ||
| // on={sorting.sortOn === 'value'} | ||
| icon={ | ||
| sorting.sortOrder === 'ascending' && | ||
| sorting.sortOn === 'value' ? ( | ||
| <Icon name="sort alphabet ascending" /> | ||
| ) : ( | ||
| <Icon name="sort alphabet descending" /> | ||
| ) | ||
| } | ||
| /> | ||
| <ToggleSort | ||
| label="Count" | ||
| onToggle={() => toggleSort('count')} | ||
| // on={sorting.sortOn === 'count'} | ||
| icon={ | ||
| sorting.sortOrder === 'ascending' && | ||
| sorting.sortOn === 'count' ? ( | ||
| <Icon name="sort numeric ascending" /> | ||
| ) : ( | ||
| <Icon name="sort numeric descending" /> | ||
| ) | ||
| } | ||
| /> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <Resizable> | ||
| <FacetOptions | ||
| sortedOptions={sortedOptions} | ||
| label={label} | ||
| onSelect={onSelect} | ||
| onRemove={onRemove} | ||
| field={field} | ||
| /> | ||
| </Resizable> | ||
| </fieldset> | ||
| ); | ||
| }; | ||
|
|
||
| export default SingleTermFacetViewComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters