Qstick
3 years ago
parent
f69f96695b
commit
5d32bcf8b9
@ -0,0 +1,35 @@
|
|||||||
|
.groups {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.namingSelectContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.namingSelect {
|
||||||
|
composes: select from '~Components/Form/SelectInput.css';
|
||||||
|
|
||||||
|
margin-left: 10px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footNote {
|
||||||
|
display: flex;
|
||||||
|
color: $helpTextColor;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-top: 3px;
|
||||||
|
margin-right: 5px;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
padding: 0 1px;
|
||||||
|
border: 1px solid $borderColor;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,270 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import FieldSet from 'Components/FieldSet';
|
||||||
|
import SelectInput from 'Components/Form/SelectInput';
|
||||||
|
import TextInput from 'Components/Form/TextInput';
|
||||||
|
import Button from 'Components/Link/Button';
|
||||||
|
import Modal from 'Components/Modal/Modal';
|
||||||
|
import ModalBody from 'Components/Modal/ModalBody';
|
||||||
|
import ModalContent from 'Components/Modal/ModalContent';
|
||||||
|
import ModalFooter from 'Components/Modal/ModalFooter';
|
||||||
|
import ModalHeader from 'Components/Modal/ModalHeader';
|
||||||
|
import translate from 'Utilities/String/translate';
|
||||||
|
import QueryParameterOption from './QueryParameterOption';
|
||||||
|
import styles from './QueryParameterModal.css';
|
||||||
|
|
||||||
|
const searchOptions = [
|
||||||
|
{ key: 'search', value: 'Basic Search' },
|
||||||
|
{ key: 'tvsearch', value: 'TV Search' },
|
||||||
|
{ key: 'movie', value: 'Movie Search' },
|
||||||
|
{ key: 'music', value: 'Audio Search' },
|
||||||
|
{ key: 'book', value: 'Book Search' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const seriesTokens = [
|
||||||
|
{ token: '{ImdbId:tt1234567}', example: 'tt12345' },
|
||||||
|
{ token: '{TvdbId:12345}', example: '12345' },
|
||||||
|
{ token: '{TvMazeId:12345}', example: '54321' },
|
||||||
|
{ token: '{Season:00}', example: '01' },
|
||||||
|
{ token: '{Episode:00}', example: '01' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const movieTokens = [
|
||||||
|
{ token: '{ImdbId:tt1234567}', example: 'tt12345' },
|
||||||
|
{ token: '{TmdbId:12345}', example: '12345' },
|
||||||
|
{ token: '{Year:2000}', example: '2005' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const audioTokens = [
|
||||||
|
{ token: '{Artist:Some Body}', example: 'Nirvana' },
|
||||||
|
{ token: '{Album:Some Album}', example: 'Nevermind' },
|
||||||
|
{ token: '{Label:Some Label}', example: 'Geffen' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const bookTokens = [
|
||||||
|
{ token: '{Author:Some Author}', example: 'J. R. R. Tolkien' },
|
||||||
|
{ token: '{Title:Some Book}', example: 'Lord of the Rings' }
|
||||||
|
];
|
||||||
|
|
||||||
|
class QueryParameterModal extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Lifecycle
|
||||||
|
|
||||||
|
constructor(props, context) {
|
||||||
|
super(props, context);
|
||||||
|
|
||||||
|
this._selectionStart = null;
|
||||||
|
this._selectionEnd = null;
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
separator: ' '
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onInputSelectionChange = (selectionStart, selectionEnd) => {
|
||||||
|
this._selectionStart = selectionStart;
|
||||||
|
this._selectionEnd = selectionEnd;
|
||||||
|
}
|
||||||
|
|
||||||
|
onOptionPress = ({ isFullFilename, tokenValue }) => {
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
value,
|
||||||
|
onSearchInputChange
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const selectionStart = this._selectionStart;
|
||||||
|
const selectionEnd = this._selectionEnd;
|
||||||
|
|
||||||
|
if (isFullFilename) {
|
||||||
|
onSearchInputChange({ name, value: tokenValue });
|
||||||
|
} else if (selectionStart == null) {
|
||||||
|
onSearchInputChange({
|
||||||
|
name,
|
||||||
|
value: `${value}${tokenValue}`
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const start = value.substring(0, selectionStart);
|
||||||
|
const end = value.substring(selectionEnd);
|
||||||
|
const newValue = `${start}${tokenValue}${end}`;
|
||||||
|
|
||||||
|
onSearchInputChange({ name, value: newValue });
|
||||||
|
this._selectionStart = newValue.length - 1;
|
||||||
|
this._selectionEnd = newValue.length - 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onInputChange = ({ name, value }) => {
|
||||||
|
this.props.onSearchInputChange({ value: '' });
|
||||||
|
this.props.onInputChange({ name, value });
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
value,
|
||||||
|
searchType,
|
||||||
|
isOpen,
|
||||||
|
onSearchInputChange,
|
||||||
|
onModalClose
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
separator: tokenSeparator
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
isOpen={isOpen}
|
||||||
|
onModalClose={onModalClose}
|
||||||
|
>
|
||||||
|
<ModalContent onModalClose={onModalClose}>
|
||||||
|
<ModalHeader>
|
||||||
|
{translate('QueryOptions')}
|
||||||
|
</ModalHeader>
|
||||||
|
|
||||||
|
<ModalBody>
|
||||||
|
<FieldSet legend={translate('SearchType')}>
|
||||||
|
<div className={styles.groups}>
|
||||||
|
<SelectInput
|
||||||
|
className={styles.namingSelect}
|
||||||
|
name="searchType"
|
||||||
|
value={searchType}
|
||||||
|
values={searchOptions}
|
||||||
|
onChange={this.onInputChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</FieldSet>
|
||||||
|
|
||||||
|
{
|
||||||
|
searchType === 'tvsearch' &&
|
||||||
|
<FieldSet legend={translate('TvSearch')}>
|
||||||
|
<div className={styles.groups}>
|
||||||
|
{
|
||||||
|
seriesTokens.map(({ token, example }) => {
|
||||||
|
return (
|
||||||
|
<QueryParameterOption
|
||||||
|
key={token}
|
||||||
|
name={name}
|
||||||
|
value={value}
|
||||||
|
token={token}
|
||||||
|
example={example}
|
||||||
|
tokenSeparator={tokenSeparator}
|
||||||
|
onPress={this.onOptionPress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</FieldSet>
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
searchType === 'movie' &&
|
||||||
|
<FieldSet legend={translate('MovieSearch')}>
|
||||||
|
<div className={styles.groups}>
|
||||||
|
{
|
||||||
|
movieTokens.map(({ token, example }) => {
|
||||||
|
return (
|
||||||
|
<QueryParameterOption
|
||||||
|
key={token}
|
||||||
|
name={name}
|
||||||
|
value={value}
|
||||||
|
token={token}
|
||||||
|
example={example}
|
||||||
|
tokenSeparator={tokenSeparator}
|
||||||
|
onPress={this.onOptionPress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</FieldSet>
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
searchType === 'music' &&
|
||||||
|
<FieldSet legend={translate('AudioSearch')}>
|
||||||
|
<div className={styles.groups}>
|
||||||
|
{
|
||||||
|
audioTokens.map(({ token, example }) => {
|
||||||
|
return (
|
||||||
|
<QueryParameterOption
|
||||||
|
key={token}
|
||||||
|
name={name}
|
||||||
|
value={value}
|
||||||
|
token={token}
|
||||||
|
example={example}
|
||||||
|
tokenSeparator={tokenSeparator}
|
||||||
|
onPress={this.onOptionPress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</FieldSet>
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
searchType === 'book' &&
|
||||||
|
<FieldSet legend={translate('BookSearch')}>
|
||||||
|
<div className={styles.groups}>
|
||||||
|
{
|
||||||
|
bookTokens.map(({ token, example }) => {
|
||||||
|
return (
|
||||||
|
<QueryParameterOption
|
||||||
|
key={token}
|
||||||
|
name={name}
|
||||||
|
value={value}
|
||||||
|
token={token}
|
||||||
|
example={example}
|
||||||
|
tokenSeparator={tokenSeparator}
|
||||||
|
onPress={this.onOptionPress}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</FieldSet>
|
||||||
|
}
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
<ModalFooter>
|
||||||
|
<TextInput
|
||||||
|
name={name}
|
||||||
|
value={value}
|
||||||
|
onChange={onSearchInputChange}
|
||||||
|
onSelectionChange={this.onInputSelectionChange}
|
||||||
|
/>
|
||||||
|
<Button onPress={onModalClose}>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</ModalContent>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
QueryParameterModal.propTypes = {
|
||||||
|
name: PropTypes.string.isRequired,
|
||||||
|
value: PropTypes.string.isRequired,
|
||||||
|
searchType: PropTypes.string.isRequired,
|
||||||
|
isOpen: PropTypes.bool.isRequired,
|
||||||
|
onSearchInputChange: PropTypes.func.isRequired,
|
||||||
|
onInputChange: PropTypes.func.isRequired,
|
||||||
|
onModalClose: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default QueryParameterModal;
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
.option {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 3px;
|
||||||
|
border: 1px solid $borderColor;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.token {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
width: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token {
|
||||||
|
flex: 0 0 50%;
|
||||||
|
padding: 6px 16px;
|
||||||
|
background-color: #eee;
|
||||||
|
font-family: $monoSpaceFontFamily;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex: 0 0 50%;
|
||||||
|
padding: 6px 16px;
|
||||||
|
background-color: #ddd;
|
||||||
|
|
||||||
|
.footNote {
|
||||||
|
padding: 2px;
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.isFullFilename {
|
||||||
|
.token,
|
||||||
|
.example {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: $breakpointSmall) {
|
||||||
|
.option.small {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: $breakpointExtraSmall) {
|
||||||
|
.token,
|
||||||
|
.example {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
import classNames from 'classnames';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import Icon from 'Components/Icon';
|
||||||
|
import Link from 'Components/Link/Link';
|
||||||
|
import { icons, sizes } from 'Helpers/Props';
|
||||||
|
import styles from './QueryParameterOption.css';
|
||||||
|
|
||||||
|
class QueryParameterOption extends Component {
|
||||||
|
|
||||||
|
//
|
||||||
|
// Listeners
|
||||||
|
|
||||||
|
onPress = () => {
|
||||||
|
const {
|
||||||
|
token,
|
||||||
|
tokenSeparator,
|
||||||
|
isFullFilename,
|
||||||
|
onPress
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
let tokenValue = token;
|
||||||
|
|
||||||
|
tokenValue = tokenValue.replace(/ /g, tokenSeparator);
|
||||||
|
|
||||||
|
onPress({ isFullFilename, tokenValue });
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Render
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
token,
|
||||||
|
tokenSeparator,
|
||||||
|
example,
|
||||||
|
footNote,
|
||||||
|
isFullFilename,
|
||||||
|
size
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
className={classNames(
|
||||||
|
styles.option,
|
||||||
|
styles[size],
|
||||||
|
isFullFilename && styles.isFullFilename
|
||||||
|
)}
|
||||||
|
onPress={this.onPress}
|
||||||
|
>
|
||||||
|
<div className={styles.token}>
|
||||||
|
{token.replace(/ /g, tokenSeparator)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={styles.example}>
|
||||||
|
{example.replace(/ /g, tokenSeparator)}
|
||||||
|
|
||||||
|
{
|
||||||
|
footNote !== 0 &&
|
||||||
|
<Icon className={styles.footNote} name={icons.FOOTNOTE} />
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
QueryParameterOption.propTypes = {
|
||||||
|
token: PropTypes.string.isRequired,
|
||||||
|
example: PropTypes.string.isRequired,
|
||||||
|
footNote: PropTypes.number.isRequired,
|
||||||
|
tokenSeparator: PropTypes.string.isRequired,
|
||||||
|
isFullFilename: PropTypes.bool.isRequired,
|
||||||
|
size: PropTypes.oneOf([sizes.SMALL, sizes.LARGE]),
|
||||||
|
onPress: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
QueryParameterOption.defaultProps = {
|
||||||
|
footNote: 0,
|
||||||
|
size: sizes.SMALL,
|
||||||
|
isFullFilename: false
|
||||||
|
};
|
||||||
|
|
||||||
|
export default QueryParameterOption;
|
||||||
Loading…
Reference in new issue