maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-26 06:47:17 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Delete unused code related to SelectMultipleFilter

Browse source
This commit is contained in:
Jenni Nurmi 2018-11-21 11:55:42 +02:00 • committed by Vesa Luusua
parent 4c6435e569
commit d89aa64e57
9 changed files with 0 additions and 528 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.css
View file

@ -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);
}
}

73
src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.example.js
View file

@ -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 (
<SelectMultipleFilterPlain
id="SelectMultipleFilterPlainExample"
name="amenities"
urlParam={URL_PARAM}
label="Amenities"
options={options}
onSelect={(urlParam, values) => handleSelect(urlParam, values, history)}
initialValues={initialValues}
/>
);
};
export const AmenitiesFilter = {
component: withRouter(AmenitiesFilterComponent),
props: {},
group: 'misc',
};

119
src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.js
View file

@ -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 (
<div className={classes}>
<div className={labelClass}>
<button type="button" className={css.labelButton} onClick={this.toggleIsOpen}>
<span className={labelClass}>{labelText}</span>
</button>
<button type="button" className={css.clearButton} onClick={this.handleClear}>
<FormattedMessage id={'SelectMultipleFilterPlainForm.clear'} />
</button>
</div>
<SelectMultipleFilterPlainForm
id={id}
className={optionsContainerClass}
name={name}
options={options}
initialValues={namedInitialValues}
onChange={this.handleSelect}
twoColumns={twoColumns}
enableReinitialize
keepDirtyOnReinitialize
/>
</div>
);
}
}
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;

1
src/components/index.js
View file

@ -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';

2
src/examples.js
View file

@ -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,

107
src/forms/SelectMultipleFilterForm/SelectMultipleFilterForm.css
View file

@ -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);
}
}

99
src/forms/SelectMultipleFilterForm/SelectMultipleFilterForm.js
View file

@ -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 (
<FinalForm
{...props}
mutators={{ ...arrayMutators }}
render={formRenderProps => {
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 (
<Form
className={classes}
onSubmit={handleSubmit}
tabIndex="0"
contentRef={contentRef}
style={style}
>
<FieldCheckboxGroup
className={css.fieldGroup}
name={name}
id={`${id}-checkbox-group`}
options={options}
/>
<div className={css.buttonsWrapper}>
<button className={css.clearButton} type="button" onClick={onClear}>
{clear}
</button>
<button className={css.cancelButton} type="button" onClick={handleCancel}>
{cancel}
</button>
<button className={css.submitButton} type="submit">
{submit}
</button>
</div>
</Form>
);
}}
/>
);
};
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;

55
src/forms/SelectMultipleFilterPlainForm/SelectMultipleFilterPlainForm.js
View file

@ -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 (
<FinalForm
{...rest}
onSubmit={() => null}
mutators={{ ...arrayMutators }}
render={formRenderProps => {
const { className, id, name, options, twoColumns } = formRenderProps;
return (
<Form className={className}>
<FormSpy onChange={handleChange} subscription={{ values: true, dirty: true }} />
<FieldCheckboxGroup name={name} id={id} options={options} twoColumns={twoColumns} />
</Form>
);
}}
/>
);
};
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;

2
src/forms/index.js
View file

@ -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';