124 lines
4.1 KiB
React
124 lines
4.1 KiB
React
|
// @flow
|
||
|
|
import * as ICONS from 'constants/icons';
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import { SEARCH_OPTIONS } from 'lbry-redux';
|
||
|
|
import { Form, FormField } from 'component/common/form';
|
||
|
|
import posed from 'react-pose';
|
||
|
|
import Button from 'component/button';
|
||
|
|
|
||
|
|
const ExpandableOptions = posed.div({
|
||
|
|
hide: { height: 0, opacity: 0 },
|
||
|
|
show: { height: 280, opacity: 1 },
|
||
|
|
});
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
setSearchOption: (string, boolean | string | number) => void,
|
||
|
|
options: {},
|
||
|
|
};
|
||
|
|
|
||
|
|
const SearchOptions = (props: Props) => {
|
||
|
|
const { options, setSearchOption } = props;
|
||
|
|
const [expanded, setExpanded] = useState(false);
|
||
|
|
const resultCount = options[SEARCH_OPTIONS.RESULT_COUNT];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="card card--section search__options-wrapper">
|
||
|
|
<div className="card--space-between">
|
||
|
|
<Button
|
||
|
|
label={__('SEARCH OPTIONS')}
|
||
|
|
icon={ICONS.OPTIONS}
|
||
|
|
onClick={() => setExpanded(!expanded)}
|
||
|
|
/>
|
||
|
|
{/*
|
||
|
|
Will be added back when api is ready
|
||
|
|
<div className="media__action-group">
|
||
|
|
<span>{__('Find what you were looking for?')}</span>
|
||
|
|
<Button description={__('Yes')} icon={ICONS.YES} />
|
||
|
|
<Button description={__('No')} icon={ICONS.NO} />
|
||
|
|
</div> */}
|
||
|
|
</div>
|
||
|
|
<ExpandableOptions pose={expanded ? 'show' : 'hide'}>
|
||
|
|
{expanded && (
|
||
|
|
<Form className="card__content search__options">
|
||
|
|
<fieldset>
|
||
|
|
<legend className="search__legend--1">{__('Search For')}</legend>
|
||
|
|
{[
|
||
|
|
{
|
||
|
|
option: SEARCH_OPTIONS.INCLUDE_FILES,
|
||
|
|
label: __('Files'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
option: SEARCH_OPTIONS.INCLUDE_CHANNELS,
|
||
|
|
label: __('Channels'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
option: SEARCH_OPTIONS.INCLUDE_FILES_AND_CHANNELS,
|
||
|
|
label: __('Everything'),
|
||
|
|
},
|
||
|
|
].map(({ option, label }) => (
|
||
|
|
<FormField
|
||
|
|
key={option}
|
||
|
|
type="radio"
|
||
|
|
blockWrap={false}
|
||
|
|
label={label}
|
||
|
|
checked={options[SEARCH_OPTIONS.CLAIM_TYPE] === option}
|
||
|
|
onChange={() => setSearchOption(SEARCH_OPTIONS.CLAIM_TYPE, option)}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend className="search__legend--2">{__('File Types')}</legend>
|
||
|
|
{[
|
||
|
|
{
|
||
|
|
option: SEARCH_OPTIONS.MEDIA_VIDEO,
|
||
|
|
label: __('Videos'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
option: SEARCH_OPTIONS.MEDIA_AUDIO,
|
||
|
|
label: __('Sounds'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
option: SEARCH_OPTIONS.MEDIA_IMAGE,
|
||
|
|
label: __('Images'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
option: SEARCH_OPTIONS.MEDIA_TEXT,
|
||
|
|
label: __('Text'),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
option: SEARCH_OPTIONS.MEDIA_APPLICATION,
|
||
|
|
label: __('Other Files'),
|
||
|
|
},
|
||
|
|
].map(({ option, label }) => (
|
||
|
|
<FormField
|
||
|
|
key={option}
|
||
|
|
type="checkbox"
|
||
|
|
blockWrap={false}
|
||
|
|
disabled={options[SEARCH_OPTIONS.CLAIM_TYPE] === SEARCH_OPTIONS.INCLUDE_CHANNELS}
|
||
|
|
label={label}
|
||
|
|
checked={options[option]}
|
||
|
|
onChange={() => setSearchOption(option, !options[option])}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</fieldset>
|
||
|
|
|
||
|
|
<fieldset>
|
||
|
|
<legend className="search__legend--3">{__('Other Options')}</legend>
|
||
|
|
<FormField
|
||
|
|
type="number"
|
||
|
|
value={resultCount}
|
||
|
|
onChange={e => setSearchOption(SEARCH_OPTIONS.RESULT_COUNT, e.target.value)}
|
||
|
|
blockWrap={false}
|
||
|
|
label={__('Returned Results')}
|
||
|
|
/>
|
||
|
|
</fieldset>
|
||
|
|
</Form>
|
||
|
|
)}
|
||
|
|
</ExpandableOptions>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SearchOptions;
|