mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-10 08:26:19 +02:00
Code Issues Releases Wiki Activity

convert footer to fn component

Browse Source
This commit is contained in:
Kushagra Gour
2024-03-22 03:19:59 +05:30
parent c7e523c374
commit 7ef30d689c
2 changed files with 272 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/Footer.jsx
View File

@ -1,9 +1,10 @@
import { h, Component } from 'preact'; import { Component } from 'preact';
import { Button } from './common'; import { Button } from './common';
import { Trans, t } from '@lingui/macro'; import { Trans, t } from '@lingui/macro';
import { I18n } from '@lingui/react'; import { I18n } from '@lingui/react';
import { ProBadge } from './ProBadge'; import { ProBadge } from './ProBadge';
import { HStack } from './Stack'; import { HStack } from './Stack';
import { useState } from 'preact/hooks';
class JS13K extends Component { class JS13K extends Component {
constructor(props) { constructor(props) {
@ -54,26 +55,20 @@ class JS13K extends Component {
} }
} }
export default class Footer extends Component { export const Footer = props => {
constructor(props) { const [isKeyboardShortcutsModalOpen, setIsKeyboardShortcutsModalOpen] =
super(props); useState(false);
this.state = { const [isJs13kDropdownOpen, setIsJs13kDropdownOpen] = useState(false);
isKeyboardShortcutsModalOpen: false,
isJs13kDropdownOpen: false function layoutBtnClickhandler(layoutId) {
}; props.layoutBtnClickHandler(layoutId);
}
layoutBtnClickhandler(layoutId) {
this.props.layoutBtnClickHandler(layoutId);
} }
js13kClickHandler() { function js13kClickHandler() {
// console.log(999); // console.log(999);
this.setState({ setIsJs13kDropdownOpen(!isJs13kDropdownOpen);
isJs13kDropdownOpen: !this.state.isJs13kDropdownOpen
});
} }
render() {
return ( return (
<I18n> <I18n>
{({ i18n }) => ( {({ i18n }) => (
@ -85,7 +80,7 @@ export default class Footer extends Component {
&copy; &copy;
<span class="web-maker-with-tag">Web Maker</span> &nbsp;&nbsp; <span class="web-maker-with-tag">Web Maker</span> &nbsp;&nbsp;
<Button <Button
onClick={this.props.helpBtnClickHandler} onClick={props.helpBtnClickHandler}
data-event-category="ui" data-event-category="ui"
data-event-action="helpButtonClick" data-event-action="helpButtonClick"
class="footer__link hint--rounded hint--top-right" class="footer__link hint--rounded hint--top-right"
@ -99,7 +94,7 @@ export default class Footer extends Component {
</svg> </svg>
</Button> </Button>
<Button <Button
onClick={this.props.keyboardShortcutsBtnClickHandler} onClick={props.keyboardShortcutsBtnClickHandler}
data-event-category="ui" data-event-category="ui"
data-event-action="keyboardShortcutButtonClick" data-event-action="keyboardShortcutButtonClick"
class="footer__link hint--rounded hint--top-right hide-on-mobile" class="footer__link hint--rounded hint--top-right hide-on-mobile"
@ -132,9 +127,9 @@ export default class Footer extends Component {
<use xlinkHref="#twitter-icon" /> <use xlinkHref="#twitter-icon" />
</svg> </svg>
</a> </a>
{user?.isPro ? ( {props.user?.isPro ? (
<Button <Button
onClick={this.props.proBtnClickHandler} onClick={props.proBtnClickHandler}
data-event-category="ui" data-event-category="ui"
data-event-action="manageProFooterBtnClick" data-event-action="manageProFooterBtnClick"
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile support-link" class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile support-link"
@ -147,7 +142,7 @@ export default class Footer extends Component {
</Button> </Button>
) : ( ) : (
<Button <Button
onClick={this.props.proBtnClickHandler} onClick={props.proBtnClickHandler}
data-event-category="ui" data-event-category="ui"
data-event-action="proFooterBtnClick" data-event-action="proFooterBtnClick"
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile support-link" class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile support-link"
@ -163,20 +158,17 @@ export default class Footer extends Component {
)} )}
</div> </div>
{this.props.prefs.isJs13kModeOn ? ( {props.prefs.isJs13kModeOn ? (
<div class="flex flex-v-center"> <div class="flex flex-v-center">
<JS13K <JS13K
isOpen={this.state.isJs13kDropdownOpen} isOpen={isJs13kDropdownOpen}
codeSize={this.props.codeSize} codeSize={props.codeSize}
onClick={this.js13kClickHandler.bind(this)} onClick={js13kClickHandler}
onBlur={() => onBlur={() =>
setTimeout( setTimeout(() => setIsJs13kDropdownOpen(false), 300)
() => this.setState({ isJs13kDropdownOpen: false }),
300
)
} }
/> />
{this.state.isJs13kDropdownOpen && ( {isJs13kDropdownOpen && (
<div className="js13k__dropdown"> <div className="js13k__dropdown">
<button <button
class="btn" class="btn"
@ -185,7 +177,7 @@ export default class Footer extends Component {
display: 'block', display: 'block',
marginBottom: '16px' marginBottom: '16px'
}} }}
onClick={this.props.onJs13KDownloadBtnClick} onClick={props.onJs13KDownloadBtnClick}
> >
<Trans>Download game as zip</Trans> <Trans>Download game as zip</Trans>
</button> </button>
@ -205,7 +197,7 @@ export default class Footer extends Component {
<button <button
class="btn" class="btn"
style={{ width: '200px', display: 'block' }} style={{ width: '200px', display: 'block' }}
onClick={this.props.onJs13KHelpBtnClick} onClick={props.onJs13KHelpBtnClick}
> >
<Trans>Help</Trans> <Trans>Help</Trans>
</button> </button>
@ -216,7 +208,7 @@ export default class Footer extends Component {
<div class="footer__right"> <div class="footer__right">
<button <button
onClick={this.props.saveHtmlBtnClickHandler} onClick={props.saveHtmlBtnClickHandler}
id="saveHtmlBtn" id="saveHtmlBtn"
class="mode-btn hint--rounded hint--top-left hide-on-mobile hide-in-file-mode" class="mode-btn hint--rounded hint--top-left hide-on-mobile hide-in-file-mode"
aria-label={i18n._(t`Save as HTML file`)} aria-label={i18n._(t`Save as HTML file`)}
@ -239,7 +231,7 @@ export default class Footer extends Component {
</svg> </svg>
<button <button
onClick={this.props.codepenBtnClickHandler} onClick={props.codepenBtnClickHandler}
id="codepenBtn" id="codepenBtn"
class="mode-btn hint--rounded hint--top-left hide-on-mobile hide-in-file-mode" class="mode-btn hint--rounded hint--top-left hide-on-mobile hide-in-file-mode"
aria-label={i18n._(t`Edit on CodePen`)} aria-label={i18n._(t`Edit on CodePen`)}
@ -252,7 +244,7 @@ export default class Footer extends Component {
<button <button
id="screenshotBtn" id="screenshotBtn"
class="mode-btn hint--rounded hint--top-left show-when-extension" class="mode-btn hint--rounded hint--top-left show-when-extension"
onClick={this.props.screenshotBtnClickHandler} onClick={props.screenshotBtnClickHandler}
aria-label={i18n._(t`Take screenshot of preview`)} aria-label={i18n._(t`Take screenshot of preview`)}
> >
<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <svg style="width:24px;height:24px" viewBox="0 0 24 24">
@ -263,7 +255,7 @@ export default class Footer extends Component {
<div class="footer__separator hide-on-mobile" /> <div class="footer__separator hide-on-mobile" />
<button <button
onClick={this.layoutBtnClickhandler.bind(this, 1)} onClick={() => layoutBtnClickhandler(1)}
id="layoutBtn1" id="layoutBtn1"
class="mode-btn hide-on-mobile hide-in-file-mode" class="mode-btn hide-on-mobile hide-in-file-mode"
aria-label={i18n._(t`Switch to layout with preview on right`)} aria-label={i18n._(t`Switch to layout with preview on right`)}
@ -273,7 +265,7 @@ export default class Footer extends Component {
</svg> </svg>
</button> </button>
<button <button
onClick={this.layoutBtnClickhandler.bind(this, 2)} onClick={() => layoutBtnClickhandler(2)}
id="layoutBtn2" id="layoutBtn2"
class="mode-btn hide-on-mobile hide-in-file-mode" class="mode-btn hide-on-mobile hide-in-file-mode"
aria-label={i18n._(t`Switch to layout with preview on bottom`)} aria-label={i18n._(t`Switch to layout with preview on bottom`)}
@ -283,7 +275,7 @@ export default class Footer extends Component {
</svg> </svg>
</button> </button>
<button <button
onClick={this.layoutBtnClickhandler.bind(this, 3)} onClick={() => layoutBtnClickhandler(3)}
id="layoutBtn3" id="layoutBtn3"
class="mode-btn hide-on-mobile hide-in-file-mode" class="mode-btn hide-on-mobile hide-in-file-mode"
aria-label={i18n._(t`Switch to layout with preview on left`)} aria-label={i18n._(t`Switch to layout with preview on left`)}
@ -293,7 +285,7 @@ export default class Footer extends Component {
</svg> </svg>
</button> </button>
<button <button
onClick={this.layoutBtnClickhandler.bind(this, 5)} onClick={() => layoutBtnClickhandler(5)}
id="layoutBtn5" id="layoutBtn5"
class="mode-btn hide-on-mobile hide-in-file-mode" class="mode-btn hide-on-mobile hide-in-file-mode"
aria-label={i18n._(t`Switch to layout with all vertical panes`)} aria-label={i18n._(t`Switch to layout with all vertical panes`)}
@ -303,7 +295,7 @@ export default class Footer extends Component {
</svg> </svg>
</button> </button>
<button <button
onClick={this.layoutBtnClickhandler.bind(this, 4)} onClick={() => layoutBtnClickhandler(4)}
id="layoutBtn4" id="layoutBtn4"
class="mode-btn hint--top-left hint--rounded hide-on-mobile" class="mode-btn hint--top-left hint--rounded hide-on-mobile"
aria-label={i18n._(t`Toggle full screen preview`)} aria-label={i18n._(t`Toggle full screen preview`)}
@ -315,7 +307,7 @@ export default class Footer extends Component {
<button <button
class="mode-btn hint--top-left hint--rounded hide-on-mobile" class="mode-btn hint--top-left hint--rounded hide-on-mobile"
aria-label={i18n._(t`Detach preview`)} aria-label={i18n._(t`Detach preview`)}
onClick={this.props.detachedPreviewBtnHandler} onClick={props.detachedPreviewBtnHandler}
> >
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" /> <path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" />
@ -325,10 +317,10 @@ export default class Footer extends Component {
<div class="footer__separator" /> <div class="footer__separator" />
<button <button
onClick={this.props.notificationsBtnClickHandler} onClick={props.notificationsBtnClickHandler}
id="notificationsBtn" id="notificationsBtn"
class={`notifications-btn mode-btn hint--top-left hint--rounded ${ class={`notifications-btn mode-btn hint--top-left hint--rounded ${
this.props.hasUnseenChangelog ? 'has-new' : '' props.hasUnseenChangelog ? 'has-new' : ''
}`} }`}
aria-label={i18n._(t`See changelog`)} aria-label={i18n._(t`See changelog`)}
> >
@ -338,7 +330,7 @@ export default class Footer extends Component {
<span class="notifications-btn__dot" /> <span class="notifications-btn__dot" />
</button> </button>
<Button <Button
onClick={this.props.settingsBtnClickHandler} onClick={props.settingsBtnClickHandler}
data-event-category="ui" data-event-category="ui"
data-event-action="settingsBtnClick" data-event-action="settingsBtnClick"
class="mode-btn hint--top-left hint--rounded" class="mode-btn hint--top-left hint--rounded"
@ -353,5 +345,4 @@ export default class Footer extends Component {
)} )}
</I18n> </I18n>
); );
} };
}

5
src/components/app.jsx
View File

@ -6,7 +6,7 @@ import { h, Component } from 'preact';
import { MainHeader } from './MainHeader.jsx'; import { MainHeader } from './MainHeader.jsx';
import ContentWrap from './ContentWrap.jsx'; import ContentWrap from './ContentWrap.jsx';
import ContentWrapFiles from './ContentWrapFiles.jsx'; import ContentWrapFiles from './ContentWrapFiles.jsx';
import Footer from './Footer.jsx'; import { Footer } from './Footer.jsx';
import SavedItemPane from './SavedItemPane.jsx'; import SavedItemPane from './SavedItemPane.jsx';
import AddLibrary from './AddLibrary.jsx'; import AddLibrary from './AddLibrary.jsx';
import Modal from './Modal.jsx'; import Modal from './Modal.jsx';
@ -1134,7 +1134,7 @@ export default class App extends Component {
return false; return false;
} }
proBtnClickHandler() { proBtnClickHandler() {
if (user?.isPro) { if (this.state.user?.isPro) {
this.setState({ isProfileModalOpen: true }); this.setState({ isProfileModalOpen: true });
trackEvent('ui', 'manageProBtnClick'); trackEvent('ui', 'manageProBtnClick');
} else { } else {
@ -1708,6 +1708,7 @@ export default class App extends Component {
<Footer <Footer
prefs={this.state.prefs} prefs={this.state.prefs}
user={this.state.user}
layoutBtnClickHandler={this.layoutBtnClickHandler.bind(this)} layoutBtnClickHandler={this.layoutBtnClickHandler.bind(this)}
helpBtnClickHandler={() => helpBtnClickHandler={() =>
this.setState({ isHelpModalOpen: true }) this.setState({ isHelpModalOpen: true })