Reorder components/index.js and fix css for MenuContent

This commit is contained in:
Vesa Luusua 2019-02-19 13:42:31 +02:00
parent d3b8c558a5
commit 9e3c8ec51f
4 changed files with 128 additions and 82 deletions

View file

@ -154,10 +154,6 @@
}
.menuContent {
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
right: 0;
z-index: var(--zIndexPopup);

View file

@ -1,10 +1,6 @@
@import '../../marketplace.css';
.root {
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
z-index: var(--zIndexPopup);
@ -15,6 +11,12 @@
transition: var(--transitionStyleButton);
}
.isClosed {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.isOpen {
visibility: visible;
opacity: 1;

View file

@ -22,7 +22,8 @@ const MenuContent = props => {
} = props;
const rootClass = rootClassName || css.root;
const classes = classNames(rootClass, className, { [css.isOpen]: isOpen });
const openClasses = isOpen ? css.isOpen : css.isClosed;
const classes = classNames(rootClass, className, openClasses);
const contentClasses = classNames(contentClassName || css.content);
const arrowPositionStyle =

View file

@ -1,39 +1,16 @@
export { default as ActivityFeed } from './ActivityFeed/ActivityFeed';
export { default as AddImages } from './AddImages/AddImages';
export { default as Avatar, AvatarMedium, AvatarLarge } from './Avatar/Avatar';
export { default as BookingBreakdown } from './BookingBreakdown/BookingBreakdown';
export { default as BookingDateRangeFilter } from './BookingDateRangeFilter/BookingDateRangeFilter';
export { default as Button, PrimaryButton, SecondaryButton, InlineTextButton } from './Button/Button';
export { default as BookingPanel } from './BookingPanel/BookingPanel';
export { default as CookieConsent } from './CookieConsent/CookieConsent';
export { default as Discussion } from './Discussion/Discussion';
export { default as EditListingAvailabilityPanel } from './EditListingAvailabilityPanel/EditListingAvailabilityPanel';
export { default as EditListingDescriptionPanel } from './EditListingDescriptionPanel/EditListingDescriptionPanel';
export { default as EditListingFeaturesPanel } from './EditListingFeaturesPanel/EditListingFeaturesPanel';
export { default as EditListingLocationPanel } from './EditListingLocationPanel/EditListingLocationPanel';
export { default as EditListingPhotosPanel } from './EditListingPhotosPanel/EditListingPhotosPanel';
export { default as EditListingPoliciesPanel } from './EditListingPoliciesPanel/EditListingPoliciesPanel';
export { default as EditListingPricingPanel } from './EditListingPricingPanel/EditListingPricingPanel';
export { default as EditListingWizard } from './EditListingWizard/EditListingWizard';
export { default as ExpandingTextarea } from './ExpandingTextarea/ExpandingTextarea';
export { default as ExternalLink } from './ExternalLink/ExternalLink';
export { default as FieldBirthdayInput } from './FieldBirthdayInput/FieldBirthdayInput';
export { default as FieldBoolean } from './FieldBoolean/FieldBoolean';
export { default as FieldCheckbox } from './FieldCheckbox/FieldCheckbox';
export { default as FieldCheckboxGroup } from './FieldCheckboxGroup/FieldCheckboxGroup';
export { default as FieldCurrencyInput } from './FieldCurrencyInput/FieldCurrencyInput';
export { default as FieldDateInput } from './FieldDateInput/FieldDateInput';
export { default as FieldDateRangeController } from './FieldDateRangeController/FieldDateRangeController';
export { default as FieldDateRangeInput } from './FieldDateRangeInput/FieldDateRangeInput';
export { default as FieldRadioButton } from './FieldRadioButton/FieldRadioButton';
export { default as FieldPhoneNumberInput } from './FieldPhoneNumberInput/FieldPhoneNumberInput';
export { default as FieldReviewRating } from './FieldReviewRating/FieldReviewRating';
export { default as FieldSelect } from './FieldSelect/FieldSelect';
export { default as FieldTextInput } from './FieldTextInput/FieldTextInput';
export { default as FilterPlain } from './FilterPlain/FilterPlain';
export { default as FilterPopup } from './FilterPopup/FilterPopup';
export { default as Footer } from './Footer/Footer';
export { default as Form } from './Form/Form';
/**
* Independent components
* These components do not include any other components
*
* This order mitigates problems that might arise when trying to import components
* that have circular dependencies to other components.
* Note: import-order also affects to the generated CSS bundle file.
*
* Read more:
* https://medium.com/visual-development/how-to-fix-nasty-circular-dependency-issues-once-and-for-all-in-javascript-typescript-a04c987cf0de
*/
// Icons
export { default as IconAdd } from './IconAdd/IconAdd';
export { default as IconArrowHead } from './IconArrowHead/IconArrowHead';
export { default as IconBannedUser } from './IconBannedUser/IconBannedUser';
@ -52,42 +29,102 @@ export { default as IconSocialMediaFacebook } from './IconSocialMediaFacebook/Ic
export { default as IconSocialMediaInstagram } from './IconSocialMediaInstagram/IconSocialMediaInstagram';
export { default as IconSocialMediaTwitter } from './IconSocialMediaTwitter/IconSocialMediaTwitter';
export { default as IconSpinner } from './IconSpinner/IconSpinner';
export { default as ImageCarousel } from './ImageCarousel/ImageCarousel';
export { default as ImageFromFile } from './ImageFromFile/ImageFromFile';
export { default as LayoutSideNavigation } from './LayoutSideNavigation/LayoutSideNavigation';
export { default as LayoutSingleColumn } from './LayoutSingleColumn/LayoutSingleColumn';
export { default as LayoutWrapperFooter } from './LayoutWrapperFooter/LayoutWrapperFooter';
export { default as LayoutWrapperMain } from './LayoutWrapperMain/LayoutWrapperMain';
export { default as LayoutWrapperSideNav } from './LayoutWrapperSideNav/LayoutWrapperSideNav';
export { default as LayoutWrapperTopbar } from './LayoutWrapperTopbar/LayoutWrapperTopbar';
export { default as ListingCard } from './ListingCard/ListingCard';
export { default as ListingLink } from './ListingLink/ListingLink';
export { default as LocationAutocompleteInput, LocationAutocompleteInputField } from './LocationAutocompleteInput/LocationAutocompleteInput';
// Other independent components
export { default as ExternalLink } from './ExternalLink/ExternalLink';
export { default as ExpandingTextarea } from './ExpandingTextarea/ExpandingTextarea';
export { default as Form } from './Form/Form';
export { default as Logo } from './Logo/Logo';
export { default as ManageListingCard } from './ManageListingCard/ManageListingCard';
export { default as Map } from './Map/Map';
export { default as Menu } from './Menu/Menu';
export { default as MenuContent } from './MenuContent/MenuContent';
export { default as MenuItem } from './MenuItem/MenuItem';
export { default as MenuLabel } from './MenuLabel/MenuLabel';
export { default as Modal } from './Modal/Modal';
export { default as ModalInMobile } from './ModalInMobile/ModalInMobile';
export { default as ModalMissingInformation } from './ModalMissingInformation/ModalMissingInformation';
export { default as NamedLink } from './NamedLink/NamedLink';
export { default as NamedRedirect } from './NamedRedirect/NamedRedirect';
export { default as NotificationBadge } from './NotificationBadge/NotificationBadge';
export { default as OrderDiscussionPanel } from './OrderDiscussionPanel/OrderDiscussionPanel';
export { default as OutsideClickHandler } from './OutsideClickHandler/OutsideClickHandler';
export { default as Page } from './Page/Page';
export { default as PaginationLinks } from './PaginationLinks/PaginationLinks';
export { default as PriceFilter } from './PriceFilter/PriceFilter';
export { default as PrivacyPolicy } from './PrivacyPolicy/PrivacyPolicy';
export { default as Promised } from './Promised/Promised';
export { default as PropertyGroup } from './PropertyGroup/PropertyGroup';
export { default as RangeSlider } from './RangeSlider/RangeSlider';
export { default as ResponsiveImage } from './ResponsiveImage/ResponsiveImage';
export { default as ReviewModal } from './ReviewModal/ReviewModal';
export { default as UserDisplayName } from './UserDisplayName/UserDisplayName';
export { default as ValidationError } from './ValidationError/ValidationError';
/**
* Composite components
* These components include other components
*/
//////////////////////////////////////////////////////////
// First components that include only atomic components //
//////////////////////////////////////////////////////////
export { default as Button, PrimaryButton, SecondaryButton, InlineTextButton } from './Button/Button';
export { default as CookieConsent } from './CookieConsent/CookieConsent';
export { default as ImageCarousel } from './ImageCarousel/ImageCarousel';
export { default as ImageFromFile } from './ImageFromFile/ImageFromFile';
export { default as ListingLink } from './ListingLink/ListingLink';
export { default as PaginationLinks } from './PaginationLinks/PaginationLinks';
export { default as ReviewRating } from './ReviewRating/ReviewRating';
// Layout helpers
export { default as LayoutWrapperFooter } from './LayoutWrapperFooter/LayoutWrapperFooter';
export { default as LayoutWrapperMain } from './LayoutWrapperMain/LayoutWrapperMain';
export { default as LayoutWrapperSideNav } from './LayoutWrapperSideNav/LayoutWrapperSideNav';
export { default as LayoutWrapperTopbar } from './LayoutWrapperTopbar/LayoutWrapperTopbar';
export { default as LayoutSideNavigation } from './LayoutSideNavigation/LayoutSideNavigation';
export { default as LayoutSingleColumn } from './LayoutSingleColumn/LayoutSingleColumn';
// Menu
export { default as MenuItem } from './MenuItem/MenuItem';
export { default as MenuContent } from './MenuContent/MenuContent';
export { default as MenuLabel } from './MenuLabel/MenuLabel';
export { default as Menu } from './Menu/Menu';
// Modal
export { default as Modal } from './Modal/Modal';
export { default as ModalInMobile } from './ModalInMobile/ModalInMobile';
// Fields (for Final Form)
export { default as FieldBirthdayInput } from './FieldBirthdayInput/FieldBirthdayInput';
export { default as FieldCheckbox } from './FieldCheckbox/FieldCheckbox';
export { default as FieldCurrencyInput } from './FieldCurrencyInput/FieldCurrencyInput';
export { default as FieldDateInput } from './FieldDateInput/FieldDateInput';
export { default as FieldDateRangeController } from './FieldDateRangeController/FieldDateRangeController';
export { default as FieldDateRangeInput } from './FieldDateRangeInput/FieldDateRangeInput';
export { default as FieldRadioButton } from './FieldRadioButton/FieldRadioButton';
export { default as FieldReviewRating } from './FieldReviewRating/FieldReviewRating';
export { default as FieldSelect } from './FieldSelect/FieldSelect';
export { default as FieldTextInput } from './FieldTextInput/FieldTextInput';
// Fields that use other Fields
export { default as FieldBoolean } from './FieldBoolean/FieldBoolean';
export { default as FieldCheckboxGroup } from './FieldCheckboxGroup/FieldCheckboxGroup';
export { default as FieldPhoneNumberInput } from './FieldPhoneNumberInput/FieldPhoneNumberInput';
// Fields and inputs using old naming pattern
export { default as LocationAutocompleteInput, LocationAutocompleteInputField } from './LocationAutocompleteInput/LocationAutocompleteInput';
export { default as StripeBankAccountTokenInputField } from './StripeBankAccountTokenInputField/StripeBankAccountTokenInputField';
// Tab navigation
export { default as TabNav } from './TabNav/TabNav';
export { LinkTabNavHorizontal, ButtonTabNavHorizontal } from './TabNavHorizontal/TabNavHorizontal';
export { default as Tabs } from './Tabs/Tabs';
export { default as UserNav } from './UserNav/UserNav';
///////////////////////////////////////////////
// These components include other components //
///////////////////////////////////////////////
export { default as ActivityFeed } from './ActivityFeed/ActivityFeed';
export { default as AddImages } from './AddImages/AddImages';
export { default as Avatar, AvatarMedium, AvatarLarge } from './Avatar/Avatar';
export { default as BookingBreakdown } from './BookingBreakdown/BookingBreakdown';
export { default as BookingDateRangeFilter } from './BookingDateRangeFilter/BookingDateRangeFilter';
export { default as BookingPanel } from './BookingPanel/BookingPanel';
export { default as Discussion } from './Discussion/Discussion';
export { default as FilterPlain } from './FilterPlain/FilterPlain';
export { default as FilterPopup } from './FilterPopup/FilterPopup';
export { default as ListingCard } from './ListingCard/ListingCard';
export { default as ManageListingCard } from './ManageListingCard/ManageListingCard';
export { default as Map } from './Map/Map';
export { default as OrderDiscussionPanel } from './OrderDiscussionPanel/OrderDiscussionPanel';
export { default as Page } from './Page/Page';
export { default as PriceFilter } from './PriceFilter/PriceFilter';
export { default as Reviews } from './Reviews/Reviews';
export { default as SearchFilters } from './SearchFilters/SearchFilters';
export { default as SearchFiltersMobile } from './SearchFiltersMobile/SearchFiltersMobile';
@ -97,22 +134,32 @@ export { default as SearchMapGroupLabel } from './SearchMapGroupLabel/SearchMapG
export { default as SearchMapInfoCard } from './SearchMapInfoCard/SearchMapInfoCard';
export { default as SearchMapPriceLabel } from './SearchMapPriceLabel/SearchMapPriceLabel';
export { default as SearchResultsPanel } from './SearchResultsPanel/SearchResultsPanel';
export { default as SelectMultipleFilter } from './SelectMultipleFilter/SelectMultipleFilter';
export { default as SelectSingleFilter } from './SelectSingleFilter/SelectSingleFilter';
export { default as UserCard } from './UserCard/UserCard';
//////////////////////////////////////////////
// Page sections and modal content wrappers //
//////////////////////////////////////////////
export { default as ModalMissingInformation } from './ModalMissingInformation/ModalMissingInformation';
export { default as ReviewModal } from './ReviewModal/ReviewModal';
export { default as PrivacyPolicy } from './PrivacyPolicy/PrivacyPolicy';
export { default as TermsOfService } from './TermsOfService/TermsOfService';
export { default as EditListingAvailabilityPanel } from './EditListingAvailabilityPanel/EditListingAvailabilityPanel';
export { default as EditListingDescriptionPanel } from './EditListingDescriptionPanel/EditListingDescriptionPanel';
export { default as EditListingFeaturesPanel } from './EditListingFeaturesPanel/EditListingFeaturesPanel';
export { default as EditListingLocationPanel } from './EditListingLocationPanel/EditListingLocationPanel';
export { default as EditListingPhotosPanel } from './EditListingPhotosPanel/EditListingPhotosPanel';
export { default as EditListingPoliciesPanel } from './EditListingPoliciesPanel/EditListingPoliciesPanel';
export { default as EditListingPricingPanel } from './EditListingPricingPanel/EditListingPricingPanel';
export { default as EditListingWizard } from './EditListingWizard/EditListingWizard';
export { default as Footer } from './Footer/Footer';
export { default as SectionHero } from './SectionHero/SectionHero';
export { default as SectionHowItWorks } from './SectionHowItWorks/SectionHowItWorks';
export { default as SectionLocations } from './SectionLocations/SectionLocations';
export { default as SectionThumbnailLinks } from './SectionThumbnailLinks/SectionThumbnailLinks';
export { default as SelectMultipleFilter } from './SelectMultipleFilter/SelectMultipleFilter';
export { default as SelectSingleFilter } from './SelectSingleFilter/SelectSingleFilter';
export { default as StripeBankAccountTokenInputField } from './StripeBankAccountTokenInputField/StripeBankAccountTokenInputField';
export { default as TabNav } from './TabNav/TabNav';
export { LinkTabNavHorizontal, ButtonTabNavHorizontal } from './TabNavHorizontal/TabNavHorizontal';
export { default as Tabs } from './Tabs/Tabs';
export { default as TermsOfService } from './TermsOfService/TermsOfService';
export { default as Topbar } from './Topbar/Topbar';
export { default as TopbarDesktop } from './TopbarDesktop/TopbarDesktop';
export { default as TopbarMobileMenu } from './TopbarMobileMenu/TopbarMobileMenu';
export { default as TransactionPanel } from './TransactionPanel/TransactionPanel';
export { default as UserCard } from './UserCard/UserCard';
export { default as UserDisplayName } from './UserDisplayName/UserDisplayName';
export { default as UserNav } from './UserNav/UserNav';
export { default as ValidationError } from './ValidationError/ValidationError';