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

Extract heading section into a separate file

Browse source
This commit is contained in:
Kimmo Puputti 2018-04-10 14:32:43 +03:00
parent f6507657d4
commit 6f844e9517
4 changed files with 91 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/containers/ListingPage/ListingPage.css
View file

@ -255,7 +255,7 @@
}
}
.headingContainer {
.sectionHeading {
margin-top: 22px;
margin-bottom: 34px;

40
src/containers/ListingPage/ListingPage.js
View file

@ -25,7 +25,6 @@ import {
NamedLink,
NamedRedirect,
Modal,
InlineTextButton,
LayoutSingleColumn,
LayoutWrapperTopbar,
LayoutWrapperMain,
@ -39,6 +38,7 @@ import { BookingDatesForm, TopbarContainer, EnquiryForm, NotFoundPage } from '..
import { sendEnquiry, loadData, setInitialValues } from './ListingPage.duck';
import SectionImages from './SectionImages';
import SectionHeading from './SectionHeading';
import SectionRulesMaybe from './SectionRulesMaybe';
import SectionMapMaybe from './SectionMapMaybe';
import css from './ListingPage.css';
@ -469,35 +469,15 @@ export class ListingPageComponent extends Component {
</div>
<div className={css.mainContent}>
<div className={css.headingContainer}>
<div className={css.desktopPriceContainer}>
<div className={css.desktopPriceValue} title={priceTitle}>
{formattedPrice}
</div>
<div className={css.desktopPerUnit}>
<FormattedMessage id="ListingPage.perUnit" />
</div>
</div>
<div className={css.heading}>
<h1 className={css.title}>{richTitle}</h1>
<div className={css.author}>
{category}
<FormattedMessage id="ListingPage.hostedBy" values={{ name: hostLink }} />
{showContactUser ? (
<span className={css.contactWrapper}>
<span className={css.separator}>•</span>
<InlineTextButton
className={css.contactLink}
onClick={this.onContactUser}
>
<FormattedMessage id="ListingPage.contactUser" />
</InlineTextButton>
</span>
) : null}
</div>
</div>
</div>
<SectionHeading
priceTitle={priceTitle}
formattedPrice={formattedPrice}
richTitle={richTitle}
category={category}
hostLink={hostLink}
showContactUser={showContactUser}
onContactUser={this.onContactUser}
/>
<div className={css.descriptionContainer}>
<h2 className={css.descriptionTitle}>
<FormattedMessage id="ListingPage.descriptionTitle" />

46
src/containers/ListingPage/SectionHeading.js Normal file
View file

@ -0,0 +1,46 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { InlineTextButton } from '../../components';
import css from './ListingPage.css';
const SectionHeading = props => {
const {
priceTitle,
formattedPrice,
richTitle,
category,
hostLink,
showContactUser,
onContactUser,
} = props;
return (
<div className={css.sectionHeading}>
<div className={css.desktopPriceContainer}>
<div className={css.desktopPriceValue} title={priceTitle}>
{formattedPrice}
</div>
<div className={css.desktopPerUnit}>
<FormattedMessage id="ListingPage.perUnit" />
</div>
</div>
<div className={css.heading}>
<h1 className={css.title}>{richTitle}</h1>
<div className={css.author}>
{category}
<FormattedMessage id="ListingPage.hostedBy" values={{ name: hostLink }} />
{showContactUser ? (
<span className={css.contactWrapper}>
<span className={css.separator}>•</span>
<InlineTextButton className={css.contactLink} onClick={onContactUser}>
<FormattedMessage id="ListingPage.contactUser" />
</InlineTextButton>
</span>
) : null}
</div>
</div>
</div>
);
};
export default SectionHeading;

96
src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
View file

@ -157,69 +157,41 @@ exports[`ListingPage matches snapshot 1`] = `
</NamedLink>
</div>
<div>
<div>
<div>
<div
title={55}
>
55
</div>
<div>
<FormattedMessage
id="ListingPage.perUnit"
values={Object {}}
/>
</div>
</div>
<div>
<h1>
<span>
listing1
title
</span>
</h1>
<div>
<FormattedMessage
id="ListingPage.hostedBy"
values={
Object {
"name": <NamedLink
className={undefined}
name="ListingPage"
params={
Object {
"id": "listing1",
"slug": "listing1-title",
}
}
to={
Object {
"hash": "#host",
}
}
>
user-1 display name
</NamedLink>,
}
<SectionHeading
category={null}
formattedPrice={55}
hostLink={
<NamedLink
className={undefined}
name="ListingPage"
params={
Object {
"id": "listing1",
"slug": "listing1-title",
}
/>
<span>
<span>
•
</span>
<InlineTextButton
onClick={[Function]}
>
<FormattedMessage
id="ListingPage.contactUser"
values={Object {}}
/>
</InlineTextButton>
</span>
</div>
</div>
</div>
}
to={
Object {
"hash": "#host",
}
}
>
user-1 display name
</NamedLink>
}
onContactUser={[Function]}
priceTitle={55}
richTitle={
<span>
listing1
title
</span>
}
showContactUser={true}
/>
<div>
<h2>
<FormattedMessage