render() {
return (
<div style={this.props.style} className={this.props.className}>
{this.props.title && <Title className={getClassName(this.props.innerClass, 'title') || null}>{this.props.title}</Title>}
<UL className={getClassName(this.props.innerClass, 'list') || null}>
{
this.props.data.map(item => (
<li key={item.label} className={`${this.state.selectedValues[item.label] ? 'active' : ''}`}>
<Checkbox
className={getClassName(this.props.innerClass, 'checkbox') || null}
id={item.label}
name={this.props.componentId}
value={item.label}
onChange={this.handleClick}
checked={!!this.state.selectedValues[item.label]}
show={this.props.showCheckbox}
/>
<label
className={getClassName(this.props.innerClass, 'label') || null}
htmlFor={item.label}
>
{item.label}
</label>
</li>
))
}
</UL>
</div>
);
}
renderSearchAsMove = () => {
if (this.props.showSearchAsMove) {
return (
<div
style={{
position: 'absolute',
bottom: 30,
left: 10,
width: 240,
backgroundColor: '#fff',
padding: '8px 10px',
boxShadow: 'rgba(0,0,0,0.3) 0px 1px 4px -1px',
borderRadius: 2,
}}
className={getClassName(this.props.innerClass, 'checkboxContainer') || null}
>
<Checkbox
className={getClassName(this.props.innerClass, 'checkbox') || null}
id="searchasmove"
onChange={this.toggleSearchAsMove}
checked={this.state.searchAsMove}
/>
<label
className={getClassName(this.props.innerClass, 'label') || null}
htmlFor="searchasmove"
>
Search as I move the map
</label>
</div>
);
}
return null;
};
.map((item) => {
const size = ((item.doc_count / highestCount) * (max - min)) + min;
return (
<span
key={item.key}
onClick={() => this.setValue(item.key)}
onKeyPress={e => handleA11yAction(e, () => this.setValue(item.key))}
style={{ fontSize: `${size}em` }}
className={
this.state.currentValue[item.key]
? `${getClassName(this.props.innerClass, 'input') || ''} active`
: getClassName(this.props.innerClass, 'input')
}
role="menuitem"
tabIndex="0"
>
{item.key}
{
this.props.showCount
&& ` (${item.doc_count})`
}
</span>
);
})
render() {
return (
<DateContainer
showBorder={!this.props.showClear}
style={this.props.style}
className={this.props.className}
>
{this.props.title && (
<Title
className={getClassName(this.props.innerClass, 'title') || null}
>
{this.props.title}
</Title>
)}
<Flex
showBorder={this.props.showClear}
iconPosition="right"
style={{
background: this.props.theme.colors.backgroundColor || 'transparent',
}}
>
<DayPickerInput
showOverlay={this.props.focused}
formatDate={this.formatInputDate}
value={this.state.currentDate}
placeholder={this.props.placeholder}
dayPickerProps={{
numberOfMonths: this.props.numberOfMonths,
initialMonth: this.props.initialMonth,
}}
clickUnselectsDay={this.props.clickUnselectsDay}
onDayChange={this.handleDayPicker}
inputProps={{
readOnly: true,
}}
classNames={{
container:
getClassName(this.props.innerClass, 'daypicker-container')
|| 'DayPickerInput',
overlayWrapper:
getClassName(
this.props.innerClass,
'daypicker-overlay-wrapper',
) || 'DayPickerInput-OverlayWrapper',
overlay:
getClassName(this.props.innerClass, 'daypicker-overlay')
|| 'DayPickerInput-Overlay',
}}
{...this.props.dayPickerInputProps}
/>
{
this.props.showClear && this.state.currentDate
&& <CancelSvg onClick={this.clearDayPicker} />
}
</Flex>
</DateContainer>
);
}
render() {
return (
<div style={this.props.style} className={this.props.className}>
{this.props.title && <Title className={getClassName(this.props.innerClass, 'title') || null}>{this.props.title}</Title>}
<Input
type="text"
className={getClassName(this.props.innerClass, 'input') || null}
placeholder={this.props.placeholder}
onChange={this.handleChange}
value={this.state.currentValue}
/>
</div>
);
}
render() {
if (!this.state.currentValue || !this.state.range) {
return null;
}
const { startLabel, endLabel } = this.getRangeLabels();
return (
<Slider primary style={this.props.style} className={this.props.className}>
{this.props.title && (
<Title
className={getClassName(this.props.innerClass, 'title') || null}
>
{this.props.title}
</Title>
)}
{this.state.stats.length && this.props.showHistogram ? (
<HistogramContainer
stats={this.state.stats}
range={this.state.range}
interval={this.getValidInterval(this.props, this.state.range)}
/>
) : null}
<Rheostat
min={this.state.range.start}
max={this.state.range.end}
values={this.state.currentValue}
onChange={this.handleSlider}
onValuesUpdated={this.handleDrag}
snap={this.props.snap}
snapPoints={this.props.snap ? this.getSnapPoints() : null}
className={getClassName(this.props.innerClass, 'slider')}
/>
<div className={rangeLabelsContainer}>
<RangeLabel
align="left"
className={getClassName(this.props.innerClass, 'label') || null}
>
{startLabel}
</RangeLabel>
<RangeLabel
align="right"
className={getClassName(this.props.innerClass, 'label') || null}
>
{endLabel}
</RangeLabel>
</div>
</Slider>
);
}
render() {
const { className, style, ...rest } = this.props;
return (
<div style={style} className={className}>
<RangeSlider
{...rest}
defaultSelected={{
start: this.state.isStartValid ? Number(this.state.start) : this.props.range.start,
end: this.state.isEndValid ? Number(this.state.end) : this.props.range.end,
}}
onValueChange={this.handleSlider}
className={getClassName(this.props.innerClass, 'slider-container') || null}
/>
<Flex className={getClassName(this.props.innerClass, 'input-container') || null}>
<Flex direction="column" flex={2}>
<Input
name="start"
type="number"
onChange={this.handleInputChange}
value={this.state.start}
step={this.props.stepValue}
alert={!this.state.isStartValid}
className={getClassName(this.props.innerClass, 'input') || null}
/>
{
!this.state.isStartValid
&& <Content alert>Input range is invalid</Content>
}
</Flex>
<Flex justifyContent="center" alignItems="center" flex={1}>-</Flex>
<Flex direction="column" flex={2}>
<Input
name="end"
type="number"
onChange={this.handleInputChange}
value={this.state.end}
step={this.props.stepValue}
alert={!this.state.isEndValid}
className={getClassName(this.props.innerClass, 'input') || null}
/>
{
!this.state.isEndValid
&& <Content alert>Input range is invalid</Content>
}
</Flex>
</Flex>
</div>
);
}
render() {
const min = 0.8;
const max = 3;
if (this.state.options.length === 0) {
return null;
}
let highestCount = 0;
this.state.options.forEach((item) => {
highestCount = item.doc_count > highestCount ? item.doc_count : highestCount;
});
return (
<div style={this.props.style} className={this.props.className}>
{this.props.title && <Title className={getClassName(this.props.innerClass, 'title') || null}>{this.props.title}</Title>}
<TagList className={getClassName(this.props.innerClass, 'list') || null}>
{
this.state.options
.map((item) => {
const size = ((item.doc_count / highestCount) * (max - min)) + min;
return (
<span
key={item.key}
onClick={() => this.setValue(item.key)}
onKeyPress={e => handleA11yAction(e, () => this.setValue(item.key))}
style={{ fontSize: `${size}em` }}
className={
this.state.currentValue[item.key]
? `${getClassName(this.props.innerClass, 'input') || ''} active`
: getClassName(this.props.innerClass, 'input')
}
role="menuitem"
tabIndex="0"
>
{item.key}
{
this.props.showCount
&& ` (${item.doc_count})`
}
</span>
);
})
}
</TagList>
</div>
);
}
render={({
getInputProps,
getItemProps,
isOpen,
highlightedIndex,
}) => (
<div className={suggestionsContainer}>
<Input
showIcon={this.props.showIcon}
iconPosition={this.props.iconPosition}
{...getInputProps({
className: getClassName(this.props.innerClass, 'input'),
placeholder: this.props.placeholder,
value:
this.state.currentValue === null
? ''
: this.state.currentValue,
onChange: this.onInputChange,
onBlur: this.props.onBlur,
onFocus: this.handleFocus,
onKeyPress: this.props.onKeyPress,
onKeyDown: this.handleKeyDown,
onKeyUp: this.props.onKeyUp,
})}
/>
<InputIcon iconPosition={this.props.iconPosition}>
{this.renderIcon()}
</InputIcon>
{isOpen && suggestionsList.length ? (
<ul
className={`${suggestions} ${getClassName(this.props.innerClass, 'list')}`}
>
{suggestionsList.slice(0, 10).map((item, index) => (
<li
{...getItemProps({ item })}
key={item.label}
style={{
backgroundColor:
highlightedIndex === index ? '#eee' : '#fff',
}}
>
<Text primary={!!item.category}>{item.label}</Text>
</li>
))}
</ul>
) : null}
</div>
)}
render() {
return (
<Container style={this.props.style} className={this.props.className}>
{this.props.title && <Title className={getClassName(this.props.innerClass, 'title') || null}>{this.props.title}</Title>}
<ul className={ratingsList}>
{
this.props.data.map(item => (
<li
role="menuitem"
tabIndex="0"
className={
this.state.currentValue
&& this.state.currentValue[0] === item.start
? 'active'
: ''
}
onClick={() => this.setValue([item.start, item.end])}
onKeyPress={e => handleA11yAction(e, () => this.setValue([item.start, item.end]))}
key={`${this.props.componentId}-${item.start}-${item.end}`}
>
<StarRating stars={item.start} />
{
item.label
? (<span>{item.label}</span>)
: null
}
</li>
))
}
</ul>
</Container>
);
}
this.props.data.map(item => (
<li key={item.label} className={`${this.state.selectedValues[item.label] ? 'active' : ''}`}>
<Checkbox
className={getClassName(this.props.innerClass, 'checkbox') || null}
id={item.label}
name={this.props.componentId}
value={item.label}
onChange={this.handleClick}
checked={!!this.state.selectedValues[item.label]}
show={this.props.showCheckbox}
/>
<label
className={getClassName(this.props.innerClass, 'label') || null}
htmlFor={item.label}
>
{item.label}
</label>
</li>
))
.map(item => (
<li key={item.key} className={`${this.state.currentValue[item.key] ? 'active' : ''}`}>
<Checkbox
className={getClassName(this.props.innerClass, 'checkbox') || null}
id={item.key}
name={this.props.componentId}
value={item.key}
onChange={this.handleClick}
checked={!!this.state.currentValue[item.key]}
show={this.props.showCheckbox}
/>
<label className={getClassName(this.props.innerClass, 'label') || null} htmlFor={item.key}>
{item.key}
{
this.props.showCount
&& ` (${item.doc_count})`
}
</label>
</li>
))
.map(item => (
<li key={item.key} className={`${this.state.currentValue[item.key] ? 'active' : ''}`}>
<Checkbox
className={getClassName(this.props.innerClass, 'checkbox') || null}
id={`${this.props.componentId}-${item.key}`}
name={this.props.componentId}
value={item.key}
onChange={this.handleClick}
checked={!!this.state.currentValue[item.key]}
show={this.props.showCheckbox}
/>
<label
className={getClassName(this.props.innerClass, 'label') || null}
htmlFor={`${this.props.componentId}-${item.key}`}
>
{
renderListItem
? renderListItem(item.key, item.doc_count)
: (
<span>
{item.key}
{
this.props.showCount
&& (
<span
className={
getClassName(this.props.innerClass, 'count')
|| null
}
>
({item.doc_count})
</span>
)
}
</span>
)
}
</label>
</li>
))
renderAsCard = (item) => {
const result = this.props.onData(item);
if (result) {
return (
<Card
key={item._id}
href={result.url}
className={getClassName(this.props.innerClass, 'listItem')}
target={this.props.target}
rel={this.props.target === '_blank' ? 'noopener noreferrer' : null}
>
<Image
style={{ backgroundImage: `url(${result.image})` }}
className={getClassName(this.props.innerClass, 'image')}
/>
{
typeof result.title === 'string'
? <Title
dangerouslySetInnerHTML={{ __html: result.title }}
className={getClassName(this.props.innerClass, 'title')}
/>
: (
<Title className={getClassName(this.props.innerClass, 'title')}>
{result.title}
</Title>
)
}
{
typeof result.description === 'string'
? <article dangerouslySetInnerHTML={{ __html: result.description }} />
: <article>{result.description}</article>
}
</Card>
);
}
return null;
};
renderSearch = () => {
if (this.props.showSearch) {
return (<Input
className={getClassName(this.props.innerClass, 'input') || null}
onChange={this.handleInputChange}
value={this.state.searchTerm}
placeholder={this.props.placeholder}
style={{
margin: '0 0 8px',
}}
/>);
}
return null;
};
render() {
return (
<div style={this.props.style} className={this.props.className}>
{this.props.title && <Title className={getClassName(this.props.innerClass, 'title') || null}>{this.props.title}</Title>}
<Dropdown
innerClass={this.props.innerClass}
items={this.props.data}
onChange={this.setValue}
selectedItem={this.state.currentValue}
placeholder={this.props.placeholder}
keyField="label"
returnsObject
/>
</div>
);
}
render() {
let selectAll = [];
if (this.state.options.length === 0) {
return null;
}
if (this.props.selectAllLabel) {
selectAll = [{
key: this.props.selectAllLabel,
}];
}
return (
<Container style={this.props.style} className={this.props.className}>
{this.props.title && <Title className={getClassName(this.props.innerClass, 'title') || null}>{this.props.title}</Title>}
<Dropdown
innerClass={this.props.innerClass}
items={
[
...selectAll,
...this.state.options
.filter(item => String(item.key).trim().length)
.map(item => ({ ...item, key: String(item.key) })),
]
}
onChange={this.setValue}
selectedItem={this.state.currentValue}
placeholder={this.props.placeholder}
labelField="key"
showCount={this.props.showCount}
themePreset={this.props.themePreset}
renderListItem={this.props.renderListItem}
/>
</Container>
);
}
render() {
let suggestionsList = [];
if (
!this.state.currentValue
&& this.props.defaultSuggestions
&& this.props.defaultSuggestions.length
) {
suggestionsList = this.props.defaultSuggestions;
} else if (this.state.currentValue) {
suggestionsList = this.state.suggestions;
}
if (
this.state.currentValue
&& this.state.suggestions.length
&& this.props.categories
&& this.props.categories.length
) {
let categorySuggestions = [
{
label: `${this.state.currentValue} in all categories`,
value: this.state.currentValue,
category: '*',
},
{
label: `${this.state.currentValue} in ${
this.props.categories[0].key
}`,
value: this.state.currentValue,
category: this.props.categories[0].key,
},
];
if (this.props.categories.length > 1) {
categorySuggestions = [
...categorySuggestions,
{
label: `${this.state.currentValue} in ${
this.props.categories[1].key
}`,
value: this.state.currentValue,
category: this.props.categories[1].key,
},
];
}
suggestionsList = [...categorySuggestions, ...suggestionsList];
}
return (
<div style={this.props.style} className={this.props.className}>
{this.props.title && (
<Title
className={getClassName(this.props.innerClass, 'title') || null}
>
{this.props.title}
</Title>
)}
{this.props.autosuggest ? (
<Downshift
onChange={this.onSuggestionSelected}
onOuterClick={this.handleOuterClick}
onStateChange={this.handleStateChange}
isOpen={this.state.isOpen}
itemToString={i => i}
render={({
getInputProps,
getItemProps,
isOpen,
highlightedIndex,
}) => (
<div className={suggestionsContainer}>
<Input
showIcon={this.props.showIcon}
iconPosition={this.props.iconPosition}
{...getInputProps({
className: getClassName(this.props.innerClass, 'input'),
placeholder: this.props.placeholder,
value:
this.state.currentValue === null
? ''
: this.state.currentValue,
onChange: this.onInputChange,
onBlur: this.props.onBlur,
onFocus: this.handleFocus,
onKeyPress: this.props.onKeyPress,
onKeyDown: this.handleKeyDown,
onKeyUp: this.props.onKeyUp,
})}
/>
<InputIcon iconPosition={this.props.iconPosition}>
{this.renderIcon()}
</InputIcon>
{isOpen && suggestionsList.length ? (
<ul
className={`${suggestions} ${getClassName(this.props.innerClass, 'list')}`}
>
{suggestionsList.slice(0, 10).map((item, index) => (
<li
{...getItemProps({ item })}
key={item.label}
style={{
backgroundColor:
highlightedIndex === index ? '#eee' : '#fff',
}}
>
<Text primary={!!item.category}>{item.label}</Text>
</li>
))}
</ul>
) : null}
</div>
)}
/>
) : (
<div className={suggestionsContainer}>
<Input
className={getClassName(this.props.innerClass, 'input')}
placeholder={this.props.placeholder}
value={this.state.currentValue ? this.state.currentValue : ''}
onChange={this.onInputChange}
onBlur={this.props.onBlur}
onFocus={this.props.onFocus}
onKeyPress={this.props.onKeyPress}
onKeyDown={this.props.onKeyDown}
onKeyUp={this.props.onKeyUp}
autoFocus={this.props.autoFocus}
iconPosition={this.props.iconPosition}
showIcon={this.props.showIcon}
/>
<InputIcon iconPosition={this.props.iconPosition}>
{this.renderIcon()}
</InputIcon>
</div>
)}
</div>
);
}
render() {
const { selectAllLabel, renderListItem } = this.props;
if (this.state.options.length === 0) {
return null;
}
return (
<Container style={this.props.style} className={this.props.className}>
{this.props.title && <Title className={getClassName(this.props.innerClass, 'title') || null}>{this.props.title}</Title>}
{this.renderSearch()}
<UL className={getClassName(this.props.innerClass, 'list') || null}>
{
selectAllLabel
? (
<li key={selectAllLabel} className={`${this.state.currentValue[selectAllLabel] ? 'active' : ''}`}>
<Checkbox
className={getClassName(this.props.innerClass, 'checkbox') || null}
id={`${this.props.componentId}-${selectAllLabel}`}
name={selectAllLabel}
value={selectAllLabel}
onChange={this.handleClick}
checked={!!this.state.currentValue[selectAllLabel]}
show={this.props.showCheckbox}
/>
<label
className={getClassName(this.props.innerClass, 'label') || null}
htmlFor={`${this.props.componentId}-${selectAllLabel}`}
>
{selectAllLabel}
</label>
</li>
)
: null
}
{
this.state.options
.filter((item) => {
if (String(item.key).length) {
if (this.props.showSearch && this.state.searchTerm) {
return String(item.key).toLowerCase()
.includes(this.state.searchTerm.toLowerCase());
}
return true;
}
return false;
})
.map(item => (
<li key={item.key} className={`${this.state.currentValue[item.key] ? 'active' : ''}`}>
<Checkbox
className={getClassName(this.props.innerClass, 'checkbox') || null}
id={`${this.props.componentId}-${item.key}`}
name={this.props.componentId}
value={item.key}
onChange={this.handleClick}
checked={!!this.state.currentValue[item.key]}
show={this.props.showCheckbox}
/>
<label
className={getClassName(this.props.innerClass, 'label') || null}
htmlFor={`${this.props.componentId}-${item.key}`}
>
{
renderListItem
? renderListItem(item.key, item.doc_count)
: (
<span>
{item.key}
{
this.props.showCount
&& (
<span
className={
getClassName(this.props.innerClass, 'count')
|| null
}
>
({item.doc_count})
</span>
)
}
</span>
)
}
</label>
</li>
))
}
</UL>
</Container>
);
}