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