mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-10 08:26:19 +02:00
convert footer to fn component
This commit is contained in:
@ -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 {
|
|||||||
©
|
©
|
||||||
<span class="web-maker-with-tag">Web Maker</span>
|
<span class="web-maker-with-tag">Web Maker</span>
|
||||||
<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>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
}
|
|
||||||
|
@ -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 })
|
||||||
|
Reference in New Issue
Block a user