const SaveButton = (props) => button({
className: classNames({
[css.saveButton]: true,
[css.saveButtonVisible]: props.isVisible,
}),
onClick: props.onClick,
}, t('web.listings.save_and_close_availability_editing'));
render: function () {
const state = this.context.puxStore.state
return (
r.div([
r.div([
r.button({onClick: this.increment}, "Increment"),
r.span(
{style: {marginLeft: 10, marginRight: 10}},
String(state.count)
),
r.button({onClick: this.decrement}, "Decrement")
]),
r.button({onClick: this.reset}, "Reset"),
r.div([
r.textarea({onInput: this.textInput, value: state.text}),
r.p(state.text)
])
])
)
}
render() {
const { mode, keywordPlaceholder, locationPlaceholder, keywordQuery, locationQuery } = this.props;
// Custom color support disabled for now until further discussion.
// const bgColor = customColor || variables['--SearchBar_mobileBackgroundColor'];
// const bgColorDarkened = brightness(bgColor, 80);
const bgColor = '#34495E';
const bgColorDarkened = '#2C3E50 ';
const keywordInput = input({
type: 'search',
className: css.keywordInput,
placeholder: keywordPlaceholder,
defaultValue: keywordQuery,
ref: (c) => {
this.keywordInput = c;
},
});
const locationInput = input({
type: 'search',
className: css.locationInput,
placeholder: locationPlaceholder,
defaultValue: locationQuery,
autoComplete: 'off',
// When the user edits the selected location value, the fetched
// place object is not up to date anymore and has to be cleared.
onChange: () => this.setState({ selectedPlace: null }),
ref: (c) => {
this.locationInput = c;
},
});
const hasKeywordInput = mode === SEARCH_MODE_KEYWORD || mode === SEARCH_MODE_KEYWORD_AND_LOCATION;
const hasLocationInput = mode === SEARCH_MODE_LOCATION || mode === SEARCH_MODE_KEYWORD_AND_LOCATION;
// Ugly, but we have to add the class to body since the Google
// Maps Places Autocomplete .pac-container is within the body
// element.
if (typeof document === 'object' && document.body) {
if (this.state.mobileSearchOpen) {
if (!document.body.classList.contains(css.mobileSearchOpen)) {
document.body.classList.add(css.mobileSearchOpen);
}
} else if (document.body.classList.contains(css.mobileSearchOpen)) {
document.body.classList.remove(css.mobileSearchOpen);
}
}
return div({
className: css.root,
classSet: {
[css.root]: true,
[css.mobileSearchOpen]: this.state.mobileSearchOpen,
},
}, [
button({
className: css.mobileToggle,
onClick: () => this.setState({ mobileSearchOpen: !this.state.mobileSearchOpen }),
}, [
div({
dangerouslySetInnerHTML: { __html: icon },
}),
span({
className: css.mobileToggleArrow,
style: {
borderBottomColor: this.state.mobileSearchOpen ? bgColor : 'transparent',
},
}),
]),
form({
classSet: { [css.form]: true },
onSubmit: (e) => {
e.preventDefault();
this.handleSubmit();
},
style: {
backgroundColor: this.state.mobileSearchOpen ? bgColor : 'transparent',
},
}, [
hasKeywordInput ? keywordInput : null,
hasLocationInput ? locationInput : null,
button({
type: 'submit',
className: css.searchButton,
dangerouslySetInnerHTML: { __html: icon },
style: {
backgroundColor: this.state.mobileSearchOpen ? bgColorDarkened : 'transparent',
},
}),
span({ className: css.focusContainer }),
]),
]);
}