// @flow import { SEARCH_OPTIONS, SEARCH_PAGE_SIZE } from 'constants/search'; import * as ICONS from 'constants/icons'; import React, { useMemo } from 'react'; import { Form, FormField } from 'component/common/form'; import Button from 'component/button'; import Icon from 'component/common/icon'; import classnames from 'classnames'; const CLAIM_TYPES = { [SEARCH_OPTIONS.INCLUDE_FILES]: 'Files', [SEARCH_OPTIONS.INCLUDE_CHANNELS]: 'Channels', [SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS]: 'Everything', }; const TYPES_ADVANCED = { [SEARCH_OPTIONS.MEDIA_VIDEO]: 'Video', [SEARCH_OPTIONS.MEDIA_AUDIO]: 'Audio', [SEARCH_OPTIONS.MEDIA_IMAGE]: 'Image', [SEARCH_OPTIONS.MEDIA_TEXT]: 'Text', [SEARCH_OPTIONS.MEDIA_APPLICATION]: 'Other', }; const TIME_FILTER = { '': 'All', // [SEARCH_OPTIONS.TIME_FILTER_LAST_HOUR]: 'Last Hour', -- disable (doesn't work) [SEARCH_OPTIONS.TIME_FILTER_TODAY]: 'Last 24 Hours', [SEARCH_OPTIONS.TIME_FILTER_THIS_WEEK]: 'This Week', [SEARCH_OPTIONS.TIME_FILTER_THIS_MONTH]: 'This Month', [SEARCH_OPTIONS.TIME_FILTER_THIS_YEAR]: 'This Year', }; const SORT_BY = { '': 'Relevance', [SEARCH_OPTIONS.SORT_DESCENDING]: 'Newest first', [SEARCH_OPTIONS.SORT_ACCENDING]: 'Oldest first', }; type Props = { setSearchOption: (string, boolean | string | number) => void, options: {}, simple: boolean, expanded: boolean, toggleSearchExpanded: () => void, onSearchOptionsChanged: (string) => void, }; const SearchOptions = (props: Props) => { const { options, simple, setSearchOption, expanded, toggleSearchExpanded, onSearchOptionsChanged } = props; const stringifiedOptions = JSON.stringify(options); const isFilteringByChannel = useMemo(() => { const jsonOptions = JSON.parse(stringifiedOptions); const claimType = String(jsonOptions[SEARCH_OPTIONS.CLAIM_TYPE] || ''); return claimType.includes(SEARCH_OPTIONS.INCLUDE_CHANNELS); }, [stringifiedOptions]); if (simple) { delete TYPES_ADVANCED[SEARCH_OPTIONS.MEDIA_APPLICATION]; delete TYPES_ADVANCED[SEARCH_OPTIONS.MEDIA_IMAGE]; delete TYPES_ADVANCED[SEARCH_OPTIONS.MEDIA_AUDIO]; } React.useEffect(() => { // We no longer let the user set the search results count, but the value // will be in local storage for existing users. Override that. if (options[SEARCH_OPTIONS.RESULT_COUNT] !== SEARCH_PAGE_SIZE) { setSearchOption(SEARCH_OPTIONS.RESULT_COUNT, SEARCH_PAGE_SIZE); } }, []); function updateSearchOptions(option, value) { setSearchOption(option, value); if (onSearchOptionsChanged) { onSearchOptionsChanged(option); } } function addRow(label: string, value: any) { return ( {label} {value} ); } const OBJ_TO_OPTION_ELEM = (obj) => { return Object.entries(obj).map((x) => { return ( ); }); }; const typeElem = ( <>
{Object.entries(CLAIM_TYPES).map((t) => { const option = t[0]; if (option === SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS) { return null; } return (
{options[SEARCH_OPTIONS.CLAIM_TYPE] === SEARCH_OPTIONS.INCLUDE_FILES && (
{Object.entries(TYPES_ADVANCED).map((t) => { const option = t[0]; return ( updateSearchOptions(option, !options[option])} /> ); })}
)} ); const otherOptionsElem = ( <>
updateSearchOptions(SEARCH_OPTIONS.EXACT, !options[SEARCH_OPTIONS.EXACT])} label={__('Exact match')} />
); const uploadDateElem = (
updateSearchOptions(SEARCH_OPTIONS.TIME_FILTER, e.target.value)} blockWrap={false} > {OBJ_TO_OPTION_ELEM(TIME_FILTER)}
); const sortByElem = (
updateSearchOptions(SEARCH_OPTIONS.SORT, e.target.value)} > {OBJ_TO_OPTION_ELEM(SORT_BY)}
); const uploadDateLabel = options[SEARCH_OPTIONS.CLAIM_TYPE] === SEARCH_OPTIONS.INCLUDE_CHANNELS ? __('Creation Date') : __('Upload Date'); return (
); }; export default SearchOptions;