Skip to content

Instantly share code, notes, and snippets.

@jiaming0708

jiaming0708/HugeComponent.jsx

Last active March 13, 2019 13:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jiaming0708/9218dae11fca571f215a0173de9e09ad to your computer and use it in GitHub Desktop.
Save jiaming0708/9218dae11fca571f215a0173de9e09ad to your computer and use it in GitHub Desktop.
Download ZIP
React Component
Raw
HugeComponent.jsx
function HugeComponent(){
return (
<div className={styles.root}>
{/* chat related content */}
<div className={styles.left}>
<div className={styles.top}>
{
showCancelPopup && (
<Modal
onClose={this.closePopup}
>
<SimpleDialog
title={t('')}
theme={dialogTheme}
>
<Button
theme={gray}
ghost
onClick={this.closePopup}
text={t('')}
/>
<Button
theme={pink}
onClick={onCancelQ}
text={t('')}
/>
</SimpleDialog>
</Modal>
)
}
{
showEndPopup && (
<Modal
onClose={this.closePopup}
>
<SimpleDialog
title={isT ? t('') : t('')}
description={isT ? t('') : ''}
theme={dialogTheme}
>
<Button
theme={gray}
ghost
onClick={this.closePopup}
text={isT ? t('') : t('')}
/>
<Button
onClick={this.handleEnd}
text={isT ? t('') : t('')}
/>
</SimpleDialog>
</Modal>
)
}
<div className={styles.left}>
{/* go back icon */}
{
!isT &&
<div
className={styles.back}
onClick={previous}
>
<IcBack
width={16}
height={16}
/>
</div>
}
{/* title */}
<div className={styles.title}>
{
theOthersNameImage
? (
<ProfileAvatar
url={theOthersNameImage}
width={50}
height={50}
/>
)
: (
<div className={styles.dotsLoadingContainer}>
<DotsLoading />
</div>
)
}
<div className={styles.indicator}>
{
showFindT
? t('')
: theOthersName
}
</div>
</div>
</div>
<div className={styles.right}>
{/* cancel question */}
{
showCancelButton && (
<div className={styles.button}>
<Button
secondary
theme={gray}
text={t('')}
onClick={this.toggleCancelPopup}
>
<IcCloseThick
width={14}
height={14}
/>
</Button>
</div>
)
}
{
showEndButton && (
<div className={styles.button}>
<a
className={styles.report}
href={url}
target="_blank"
>
<Report
width={22}
height={22}
/>
</a>
{
isT &&
<div
className={styles.photoLibrary}
onClick={this.toggleSidebar}
>
<PhotoLibrary
width={22}
height={22}
/>
</div>
}
<Button
secondary
text={t('')}
onClick={this.toggleEndPopup}
disabled={isT && stages === 0}
/>
</div>
)
}
</div>
</div>
<div className={styles.bottom}>
{children}
</div>
</div>
{/* chat sidebar */}
<div
className={cx(
styles.right,
{
hideSidebar: !showSidebar,
rightTutorial: isTutorial,
})
}
>
{
isT && (
<div className={styles.chatTutorialContainer}>
<TutorialPopUp
text={t('')}
onClickNextStep={onClickNextStep}
buttonText={t('')}
right
/>
</div>
)
}
<ChatroomSideBar
tutorInfo={tutorInfo}
showFindTutor={showFindTutor}
isTutor
/>
</div>
</div>
);
}
Raw
HugeStep1.jsx
function HugeComponent(){
const renderCancelPopup = (
<Modal
onClose={this.closePopup}
>
<SimpleDialog
title={t('')}
theme={dialogTheme}
>
<Button
theme={gray}
ghost
onClick={this.closePopup}
text={t('')}
/>
<Button
theme={pink}
onClick={onCancelQ}
text={t('')}
/>
</SimpleDialog>
</Modal>
);
const renderEndPopup = (
<Modal
onClose={this.closePopup}
>
<SimpleDialog
title={isT ? t('') : t('')}
description={isT ? t('') : ''}
theme={dialogTheme}
>
<Button
theme={gray}
ghost
onClick={this.closePopup}
text={isT ? t('') : t('')}
/>
<Button
onClick={this.handleEnd}
text={isT ? t('') : t('')}
/>
</SimpleDialog>
</Modal>
);
renderCancelButton = (
<div className={styles.button}>
<Button
secondary
theme={gray}
text={t('')}
onClick={this.toggleCancelPopup}
>
<IcCloseThick
width={14}
height={14}
/>
</Button>
</div>
);
renderEndButton = (
<div className={styles.button}>
<a
className={styles.report}
href={url}
target="_blank"
>
<Report
width={22}
height={22}
/>
</a>
{
isT &&
<div
className={styles.photoLibrary}
onClick={this.toggleSidebar}
>
<PhotoLibrary
width={22}
height={22}
/>
</div>
}
<Button
secondary
text={t('')}
onClick={this.toggleEndPopup}
disabled={isT && stages === 0}
/>
</div>
);
return (
<div className={styles.root}>
{/* chat related content */}
<div className={styles.left}>
<div className={styles.top}>
{showCancelPopup && renderCancelPopup()}
{showEndPopup && renderEndPopup()}
<div className={styles.left}>
{/* go back icon */}
{
!isT &&
<div
className={styles.back}
onClick={previous}
>
<IcBack
width={16}
height={16}
/>
</div>
}
{/* title */}
<div className={styles.title}>
{
theOthersNameImage
? (
<ProfileAvatar
url={theOthersNameImage}
width={50}
height={50}
/>
)
: (
<div className={styles.dotsLoadingContainer}>
<DotsLoading />
</div>
)
}
<div className={styles.indicator}>
{
showFindT
? t('')
: theOthersName
}
</div>
</div>
</div>
<div className={styles.right}>
{/* cancel question */}
{showCancelButton && renderCancelButton()}
{showEndButton && renderEndButton()}
</div>
</div>
<div className={styles.bottom}>
{children}
</div>
</div>
{/* chat sidebar */}
<div
className={cx(
styles.right,
{
hideSidebar: !showSidebar,
rightTutorial: isTutorial,
})
}
>
{
isT && (
<div className={styles.chatTutorialContainer}>
<TutorialPopUp
text={t('')}
onClickNextStep={onClickNextStep}
buttonText={t('')}
right
/>
</div>
)
}
<ChatroomSideBar
tutorInfo={tutorInfo}
showFindTutor={showFindTutor}
isTutor
/>
</div>
</div>
);
}
Raw
HugeStep1OnlyRender.jsx
return (
<div className={styles.root}>
{/* chat related content */}
<div className={styles.left}>
<div className={styles.top}>
{showCancelPopup && renderCancelPopup()}
{showEndPopup && renderEndPopup()}
<div className={styles.left}>
{/* go back icon */}
{
!isT &&
<div
className={styles.back}
onClick={previous}
>
<IcBack
width={16}
height={16}
/>
</div>
}
{/* title */}
<div className={styles.title}>
{
theOthersNameImage
? (
<ProfileAvatar
url={theOthersNameImage}
width={50}
height={50}
/>
)
: (
<div className={styles.dotsLoadingContainer}>
<DotsLoading />
</div>
)
}
<div className={styles.indicator}>
{
showFindT
? t('')
: theOthersName
}
</div>
</div>
</div>
<div className={styles.right}>
{/* cancel question */}
{showCancelButton && renderCancelButton()}
{showEndButton && renderEndButton()}
</div>
</div>
<div className={styles.bottom}>
{children}
</div>
</div>
{/* chat sidebar */}
<div
className={cx(
styles.right,
{
hideSidebar: !showSidebar,
rightTutorial: isTutorial,
})
}
>
{
isT && (
<div className={styles.chatTutorialContainer}>
<TutorialPopUp
text={t('')}
onClickNextStep={onClickNextStep}
buttonText={t('')}
right
/>
</div>
)
}
<ChatroomSideBar
tutorInfo={tutorInfo}
showFindTutor={showFindTutor}
isTutor
/>
</div>
</div>
);
Raw
HugeStep2.jsx
function HugeComponent(){
const renderCancelPopup = (
<Modal
onClose={this.closePopup}
>
<SimpleDialog
title={t('')}
theme={dialogTheme}
>
<Button
theme={gray}
ghost
onClick={this.closePopup}
text={t('')}
/>
<Button
theme={pink}
onClick={onCancelQ}
text={t('')}
/>
</SimpleDialog>
</Modal>
);
const renderEndPopup = (
<Modal
onClose={this.closePopup}
>
<SimpleDialog
title={isT ? t('') : t('')}
description={isT ? t('') : ''}
theme={dialogTheme}
>
<Button
theme={gray}
ghost
onClick={this.closePopup}
text={isT ? t('') : t('')}
/>
<Button
onClick={this.handleEnd}
text={isT ? t('') : t('')}
/>
</SimpleDialog>
</Modal>
);
renderCancelButton = (
<div className={styles.button}>
<Button
secondary
theme={gray}
text={t('')}
onClick={this.toggleCancelPopup}
>
<IcCloseThick
width={14}
height={14}
/>
</Button>
</div>
);
renderEndButton = (
<div className={styles.button}>
<a
className={styles.report}
href={url}
target="_blank"
>
<Report
width={22}
height={22}
/>
</a>
{
isT &&
<div
className={styles.photoLibrary}
onClick={this.toggleSidebar}
>
<PhotoLibrary
width={22}
height={22}
/>
</div>
}
<Button
secondary
text={t('')}
onClick={this.toggleEndPopup}
disabled={isT && stages === 0}
/>
</div>
);
const renderTopProfileBlock = (
<div className={styles.left}>
{/* go back icon */}
{
!isT &&
<div
className={styles.back}
onClick={previous}
>
<IcBack
width={16}
height={16}
/>
</div>
}
{/* title */}
<div className={styles.title}>
{
theOthersNameImage
? (
<ProfileAvatar
url={theOthersNameImage}
width={50}
height={50}
/>
)
: (
<div className={styles.dotsLoadingContainer}>
<DotsLoading />
</div>
)
}
<div className={styles.indicator}>
{
showFindT
? t('')
: theOthersName
}
</div>
</div>
</div>
);
const renderSideBar = (
<div
className={cx(
styles.right,
{
hideSidebar: !showSidebar,
rightTutorial: isTutorial,
})
}
>
{
isT && (
<div className={styles.chatTutorialContainer}>
<TutorialPopUp
text={t('')}
onClickNextStep={onClickNextStep}
buttonText={t('')}
right
/>
</div>
)
}
<ChatroomSideBar
tutorInfo={tutorInfo}
showFindTutor={showFindTutor}
isTutor
/>
</div>
);
return (
<div className={styles.root}>
{/* chat related content */}
<div className={styles.left}>
<div className={styles.top}>
{showCancelPopup && renderCancelPopup()}
{showEndPopup && renderEndPopup()}
{renderTopProfileBlock()}
<div className={styles.right}>
{/* cancel question */}
{showCancelButton && renderCancelButton()}
{showEndButton && renderEndButton()}
</div>
</div>
<div className={styles.bottom}>
{children}
</div>
</div>
{renderSideBar()}
</div>
);
}
Raw
HugeStep2OnlyRender.jsx
return (
<div className={styles.root}>
{/* chat related content */}
<div className={styles.left}>
<div className={styles.top}>
{showCancelPopup && renderCancelPopup()}
{showEndPopup && renderEndPopup()}
{renderTopProfileBlock()}
<div className={styles.right}>
{/* cancel question */}
{showCancelButton && renderCancelButton()}
{showEndButton && renderEndButton()}
</div>
</div>
<div className={styles.bottom}>
{children}
</div>
</div>
{renderSideBar()}
</div>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment