diff --git a/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.css b/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.css deleted file mode 100644 index ae0ebbc3..00000000 --- a/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.css +++ /dev/null @@ -1,70 +0,0 @@ -@import '../../marketplace.css'; - -.root { - padding-top: 24px; - padding-bottom: 17px; - border-bottom: 1px solid var(--matterColorNegative); -} - -.filterLabel, -.filterLabelSelected { - @apply --marketplaceH3FontStyles; - - /* Baseline adjustment for label text */ - margin-top: 0; - margin-bottom: 12px; - padding: 4px 0 2px 0; -} - -.filterLabel { - color: var(--matterColorDark); -} - -.filterLabelSelected { - color: var(--marketplaceColor); -} - -.labelButton { - /* Override button styles */ - outline: none; - text-align: left; - border: none; - padding: 0; - cursor: pointer; -} - -.optionsContainerOpen { - height: auto; - padding-left: 20px; - padding-bottom: 30px; -} - -.optionsContainerClosed { - height: 0; - overflow: hidden; -} - -.columnLayout { -} - -.clearButton { - @apply --marketplaceH5FontStyles; - font-weight: var(--fontWeightMedium); - color: var(--matterColorAnti); - - /* Layout */ - display: inline; - float: right; - margin-top: 6px; - padding: 0; - - /* Override button styles */ - outline: none; - text-align: left; - border: none; - - &:focus, - &:hover { - color: var(--matterColor); - } -} diff --git a/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.example.js b/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.example.js deleted file mode 100644 index 1c38bd08..00000000 --- a/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.example.js +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; -import { withRouter } from 'react-router-dom'; -import SelectMultipleFilterPlain from './SelectMultipleFilterPlain'; -import { stringify, parse } from '../../util/urlHelpers'; - -const URL_PARAM = 'pub_amenities'; - -const options = [ - { - key: 'towels', - label: 'Towels', - }, - { - key: 'bathroom', - label: 'Bathroom', - }, - { - key: 'swimming_pool', - label: 'Swimming pool', - }, - { - key: 'own_drinks', - label: 'Own drinks allowed', - }, - { - key: 'jacuzzi', - label: 'Jacuzzi', - }, - { - key: 'audiovisual_entertainment', - label: 'Audiovisual entertainment', - }, - { - key: 'barbeque', - label: 'Barbeque', - }, - { - key: 'own_food_allowed', - label: 'Own food allowed', - }, -]; - -const handleSelect = (urlParam, values, history) => { - console.log(`handle select`, values); - const queryParams = values ? `?${stringify({ [urlParam]: values.join(',') })}` : ''; - history.push(`${window.location.pathname}${queryParams}`); -}; - -const AmenitiesFilterComponent = props => { - const { history, location } = props; - - const params = parse(location.search); - const amenities = params[URL_PARAM]; - const initialValues = !!amenities ? amenities.split(',') : []; - - return ( - handleSelect(urlParam, values, history)} - initialValues={initialValues} - /> - ); -}; - -export const AmenitiesFilter = { - component: withRouter(AmenitiesFilterComponent), - props: {}, - group: 'misc', -}; diff --git a/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.js b/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.js deleted file mode 100644 index fe5e9a75..00000000 --- a/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.js +++ /dev/null @@ -1,119 +0,0 @@ -import React, { Component } from 'react'; -import { array, bool, func, string } from 'prop-types'; -import classNames from 'classnames'; -import { injectIntl, intlShape, FormattedMessage } from 'react-intl'; - -import { SelectMultipleFilterPlainForm } from '../../forms'; - -import css from './SelectMultipleFilterPlain.css'; - -class SelectMultipleFilterPlainComponent extends Component { - constructor(props) { - super(props); - this.state = { isOpen: true }; - - this.handleSelect = this.handleSelect.bind(this); - this.handleClear = this.handleClear.bind(this); - this.toggleIsOpen = this.toggleIsOpen.bind(this); - } - - handleSelect(values) { - const { urlParam, name, onSelect } = this.props; - const paramValues = values[name]; - onSelect(urlParam, paramValues); - } - - handleClear() { - const { urlParam, onSelect } = this.props; - onSelect(urlParam, null); - } - - toggleIsOpen() { - this.setState(prevState => ({ isOpen: !prevState.isOpen })); - } - - render() { - const { - rootClassName, - className, - id, - name, - label, - options, - initialValues, - intl, - twoColumns, - } = this.props; - - const classes = classNames(rootClassName || css.root, className); - - const hasInitialValues = initialValues.length > 0; - const labelClass = hasInitialValues ? css.filterLabelSelected : css.filterLabel; - - const labelText = hasInitialValues - ? intl.formatMessage( - { id: 'SelectMultipleFilterPlainForm.labelSelected' }, - { labelText: label, count: initialValues.length } - ) - : label; - - const optionsContainerClass = classNames({ - [css.optionsContainerOpen]: this.state.isOpen, - [css.optionsContainerClosed]: !this.state.isOpen, - [css.columnLayout]: twoColumns, - }); - - const namedInitialValues = { [name]: initialValues }; - - return ( -
-
- - -
- -
- ); - } -} - -SelectMultipleFilterPlainComponent.defaultProps = { - rootClassName: null, - className: null, - initialValues: [], - twoColumns: false, -}; - -SelectMultipleFilterPlainComponent.propTypes = { - rootClassName: string, - className: string, - id: string.isRequired, - name: string.isRequired, - urlParam: string.isRequired, - label: string.isRequired, - onSelect: func.isRequired, - options: array.isRequired, - initialValues: array, - twoColumns: bool, - - // from injectIntl - intl: intlShape.isRequired, -}; - -const SelectMultipleFilterPlain = injectIntl(SelectMultipleFilterPlainComponent); - -export default SelectMultipleFilterPlain; diff --git a/src/components/index.js b/src/components/index.js index 9f9bfb05..253bf418 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -102,7 +102,6 @@ export { default as SectionHowItWorks } from './SectionHowItWorks/SectionHowItWo export { default as SectionLocations } from './SectionLocations/SectionLocations'; export { default as SectionThumbnailLinks } from './SectionThumbnailLinks/SectionThumbnailLinks'; export { default as SelectMultipleFilter } from './SelectMultipleFilter/SelectMultipleFilter'; -export { default as SelectMultipleFilterPlain } from './SelectMultipleFilterPlain/SelectMultipleFilterPlain'; export { default as SelectSingleFilter } from './SelectSingleFilter/SelectSingleFilter'; export { default as SelectSingleFilterPlain } from './SelectSingleFilterPlain/SelectSingleFilterPlain'; export { default as StripeBankAccountTokenInputField } from './StripeBankAccountTokenInputField/StripeBankAccountTokenInputField'; diff --git a/src/examples.js b/src/examples.js index 8a81b56e..aacf23d8 100644 --- a/src/examples.js +++ b/src/examples.js @@ -59,7 +59,6 @@ import * as ReviewRating from './components/ReviewRating/ReviewRating.example'; import * as Reviews from './components/Reviews/Reviews.example'; import * as SectionThumbnailLinks from './components/SectionThumbnailLinks/SectionThumbnailLinks.example'; import * as SelectMultipleFilter from './components/SelectMultipleFilter/SelectMultipleFilter.example'; -import * as SelectMultipleFilterPlain from './components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.example'; import * as StripeBankAccountTokenInputField from './components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.example'; import * as TabNav from './components/TabNav/TabNav.example'; import * as TabNavHorizontal from './components/TabNavHorizontal/TabNavHorizontal.example'; @@ -169,7 +168,6 @@ export { Reviews, SectionThumbnailLinks, SelectMultipleFilter, - SelectMultipleFilterPlain, SendMessageForm, SignupForm, StripeBankAccountTokenInputField, diff --git a/src/forms/SelectMultipleFilterForm/SelectMultipleFilterForm.css b/src/forms/SelectMultipleFilterForm/SelectMultipleFilterForm.css deleted file mode 100644 index 563539f7..00000000 --- a/src/forms/SelectMultipleFilterForm/SelectMultipleFilterForm.css +++ /dev/null @@ -1,107 +0,0 @@ -@import '../../marketplace.css'; - -.root { - /* By default hide the content */ - visibility: hidden; - opacity: 0; - pointer-events: none; - - /* Position */ - position: absolute; - z-index: var(--zIndexPopup); - - /* Layout */ - margin-top: 7px; - padding: 15px 30px 20px 30px; - - /* Borders */ - background-color: var(--matterColorLight); - border-top: 1px solid var(--matterColorNegative); - box-shadow: var(--boxShadowPopup); - border-radius: 4px; - transition: var(--transitionStyleButton); - outline: none; -} - -.isOpen { - visibility: visible; - opacity: 1; - pointer-events: auto; -} - -.fieldGroup { - margin-bottom: 35px; - white-space: nowrap; -} - -.buttonsWrapper { - display: flex; -} - -.clearButton { - @apply --marketplaceH4FontStyles; - font-weight: var(--fontWeightMedium); - color: var(--matterColorAnti); - - /* Layout */ - margin: 0 auto 0 0; - padding: 0; - - /* Override button styles */ - outline: none; - border: none; - cursor: pointer; - - &:focus, - &:hover { - color: var(--matterColor); - transition: width var(--transitionStyleButton); - } -} - -.cancelButton { - @apply --marketplaceH4FontStyles; - font-weight: var(--fontWeightMedium); - color: var(--matterColorAnti); - - /* Layout */ - margin: 0; - padding: 0; - - /* Override button styles */ - outline: none; - border: none; - cursor: pointer; - - /* clearButton will add all available space between cancelButton, - * but some hard coded margin is still needed - */ - margin-left: 48px; - - &:focus, - &:hover { - color: var(--matterColor); - transition: width var(--transitionStyleButton); - } -} - -.submitButton { - @apply --marketplaceH4FontStyles; - font-weight: var(--fontWeightMedium); - color: var(--marketplaceColor); - - /* Layout */ - margin: 0 0 0 19px; - padding: 0; - - /* Override button styles */ - outline: none; - border: none; - cursor: pointer; - - &:focus, - &:hover { - color: var(--marketplaceColorDark); - transition: width var(--transitionStyleButton); - } -} diff --git a/src/forms/SelectMultipleFilterForm/SelectMultipleFilterForm.js b/src/forms/SelectMultipleFilterForm/SelectMultipleFilterForm.js deleted file mode 100644 index 88f87222..00000000 --- a/src/forms/SelectMultipleFilterForm/SelectMultipleFilterForm.js +++ /dev/null @@ -1,99 +0,0 @@ -import React from 'react'; -import { arrayOf, bool, func, node, object, shape, string } from 'prop-types'; -import classNames from 'classnames'; -import { Form as FinalForm } from 'react-final-form'; -import { injectIntl, intlShape } from 'react-intl'; -import arrayMutators from 'final-form-arrays'; - -import { FieldCheckboxGroup, Form } from '../../components'; -import css from './SelectMultipleFilterForm.css'; - -const SelectMultipleFilterFormComponent = props => { - return ( - { - const { - form, - handleSubmit, - id, - name, - onClear, - onCancel, - options, - isOpen, - contentRef, - style, - intl, - } = formRenderProps; - const classes = classNames(css.root, { [css.isOpen]: isOpen }); - - const handleCancel = () => { - // reset the final form to initialValues - form.reset(); - onCancel(); - }; - - const clear = intl.formatMessage({ id: 'SelectMultipleFilterForm.clear' }); - const cancel = intl.formatMessage({ id: 'SelectMultipleFilterForm.cancel' }); - const submit = intl.formatMessage({ id: 'SelectMultipleFilterForm.submit' }); - return ( -
- -
- - - -
- - ); - }} - /> - ); -}; - -SelectMultipleFilterFormComponent.defaultProps = { - contentRef: null, - style: null, -}; - -SelectMultipleFilterFormComponent.propTypes = { - id: string.isRequired, - name: string.isRequired, - onClear: func.isRequired, - onCancel: func.isRequired, - options: arrayOf( - shape({ - key: string.isRequired, - label: node.isRequired, - }) - ).isRequired, - isOpen: bool.isRequired, - contentRef: func, - style: object, - - // form injectIntl - intl: intlShape.isRequired, -}; - -const SelectMultipleFilterForm = injectIntl(SelectMultipleFilterFormComponent); - -export default SelectMultipleFilterForm; diff --git a/src/forms/SelectMultipleFilterPlainForm/SelectMultipleFilterPlainForm.js b/src/forms/SelectMultipleFilterPlainForm/SelectMultipleFilterPlainForm.js deleted file mode 100644 index 87e484da..00000000 --- a/src/forms/SelectMultipleFilterPlainForm/SelectMultipleFilterPlainForm.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import { arrayOf, bool, node, shape, string, func } from 'prop-types'; -import { Form as FinalForm, FormSpy } from 'react-final-form'; -import arrayMutators from 'final-form-arrays'; - -import { FieldCheckboxGroup, Form } from '../../components'; - -const SelectMultipleFilterPlainForm = props => { - const { onChange, ...rest } = props; - - const handleChange = formState => { - if (formState.dirty) { - onChange(formState.values); - } - }; - - return ( - null} - mutators={{ ...arrayMutators }} - render={formRenderProps => { - const { className, id, name, options, twoColumns } = formRenderProps; - return ( -
- - - - ); - }} - /> - ); -}; - -SelectMultipleFilterPlainForm.defaultProps = { - className: null, - twoColumns: false, - onChange: () => null, -}; - -SelectMultipleFilterPlainForm.propTypes = { - className: string, - id: string.isRequired, - name: string.isRequired, - options: arrayOf( - shape({ - key: string.isRequired, - label: node.isRequired, - }) - ).isRequired, - twoColumns: bool, - onChange: func, -}; - -export default SelectMultipleFilterPlainForm; diff --git a/src/forms/index.js b/src/forms/index.js index 198f53de..f3607e97 100644 --- a/src/forms/index.js +++ b/src/forms/index.js @@ -20,8 +20,6 @@ export { default as PriceFilterForm } from './PriceFilterForm/PriceFilterForm'; export { default as ProfileSettingsForm } from './ProfileSettingsForm/ProfileSettingsForm'; export { default as ReviewForm } from './ReviewForm/ReviewForm'; export { default as SendMessageForm } from './SendMessageForm/SendMessageForm'; -export { default as SelectMultipleFilterForm } from './SelectMultipleFilterForm/SelectMultipleFilterForm'; -export { default as SelectMultipleFilterPlainForm } from './SelectMultipleFilterPlainForm/SelectMultipleFilterPlainForm'; export { default as SignupForm } from './SignupForm/SignupForm'; export { default as StripePaymentForm } from './StripePaymentForm/StripePaymentForm'; export { default as TopbarSearchForm } from './TopbarSearchForm/TopbarSearchForm';