From 21d85816b4326a6b952a93a7a644b9d71108fc05 Mon Sep 17 00:00:00 2001
From: Sigve <sigvekvalsvik@gmail.com>
Date: Thu, 8 Dec 2016 10:44:04 -0500
Subject: [PATCH] Simple intro joyride POC using react-joyride
---
app/components/App.jsx | 61 +++++++++++++++++++++----
app/components/all.scss | 3 ++
app/components/modules/Header.jsx | 28 +++++++++++-
app/components/modules/TopRightMenu.jsx | 4 +-
npm-shrinkwrap.json | 30 ++++++++++++
package.json | 1 +
6 files changed, 116 insertions(+), 11 deletions(-)
diff --git a/app/components/App.jsx b/app/components/App.jsx
index 89f0d1fc1..e58317ead 100644
--- a/app/components/App.jsx
+++ b/app/components/App.jsx
@@ -17,13 +17,22 @@ import {key_utils} from 'shared/ecc';
import MiniHeader from 'app/components/modules/MiniHeader';
import { translate } from '../Translator.js';
import PageViewsCounter from 'app/components/elements/PageViewsCounter';
+import Joyride from 'react-joyride';
class App extends React.Component {
constructor(props) {
super(props);
- this.state = {open: null, showCallout: true, showBanner: true, expandCallout: false};
+ this.state = {
+ open: null,
+ showCallout: true,
+ showBanner: true,
+ expandCallout: false,
+ steps: [],
+ ready: false
+ };
this.toggleOffCanvasMenu = this.toggleOffCanvasMenu.bind(this);
// this.shouldComponentUpdate = shouldComponentUpdate(this, 'App')
+ this.addSteps = this.addSteps.bind(this);
}
componentWillMount() {
@@ -31,15 +40,16 @@ class App extends React.Component {
this.props.loginUser();
}
- componentDidMount() {
- // setTimeout(() => this.setState({showCallout: false}), 15000);
- }
-
- componentDidUpdate(nextProps) {
+ componentDidUpdate(prevProps, prevState) {
// setTimeout(() => this.setState({showCallout: false}), 15000);
- if (nextProps.location.pathname !== this.props.location.pathname) {
+ if (prevProps.location.pathname !== this.props.location.pathname) {
this.setState({showBanner: false, showCallout: false})
}
+
+ console.log('didUpdate', this.state, prevState);
+ if (this.state.ready && !prevState.ready) {
+ this.joyride.start();
+ }
}
shouldComponentUpdate(nextProps, nextState) {
@@ -50,6 +60,26 @@ class App extends React.Component {
p.flash !== n.flash || this.state !== nextState;
}
+ addSteps(steps) {
+ if (!Array.isArray(steps)) {
+ steps = [steps];
+ }
+
+ if (!steps.length) {
+ return false;
+ }
+
+ this.setState((currentState) => {
+ currentState.steps = currentState.steps.concat(this.joyride.parseSteps(steps));
+ currentState.ready = true;
+ return currentState;
+ });
+ }
+
+ addTooltip(data) {
+ this.joyride.addTooltip(data);
+ }
+
toggleOffCanvasMenu(e) {
e.preventDefault();
// this.setState({open: this.state.open ? null : 'left'});
@@ -234,7 +264,7 @@ class App extends React.Component {
</li>
</ul>
</SidePanel>
- {miniHeader ? <MiniHeader /> : <Header toggleOffCanvasMenu={this.toggleOffCanvasMenu} menuOpen={this.state.open} />}
+ {miniHeader ? <MiniHeader /> : <Header addSteps={this.addSteps} toggleOffCanvasMenu={this.toggleOffCanvasMenu} menuOpen={this.state.open} />}
<div className="App__content">
{welcome_screen}
{callout}
@@ -244,6 +274,21 @@ class App extends React.Component {
<Dialogs />
<Modals />
<PageViewsCounter />
+ <Joyride
+ ref={c => (this.joyride = c)}
+ steps={this.state.steps}
+ debug
+ type="continuous"
+ showOverlay
+ showSkipButton
+ locale={{
+ back: (<span>Back</span>),
+ close: (<span>Close</span>),
+ last: (<span>Finish</span>),
+ next: (<span>Next</span>),
+ skip: (<span>Skip</span>)
+ }}
+ />
</div>
}
}
diff --git a/app/components/all.scss b/app/components/all.scss
index f3127ad2a..c48a05803 100644
--- a/app/components/all.scss
+++ b/app/components/all.scss
@@ -53,3 +53,6 @@
@import "./pages/UserProfile";
@import "./pages/Market";
@import "./pages/TagsIndex";
+
+// vendor
+@import "~react-joyride/lib/styles/react-joyride";
diff --git a/app/components/modules/Header.jsx b/app/components/modules/Header.jsx
index 091e89aa4..9a2335f95 100644
--- a/app/components/modules/Header.jsx
+++ b/app/components/modules/Header.jsx
@@ -53,6 +53,32 @@ class Header extends React.Component {
componentDidMount() {
window.addEventListener('scroll', this.hideSubheader);
+
+ setTimeout(() => {
+ this.props.addSteps([
+ {
+ title: 'Home button',
+ text: 'Click here to take you back to your feed.',
+ selector: '#Header__top-logo',
+ position: 'bottom-right',
+ type: 'hover'
+ },
+ {
+ title: 'User options',
+ text: 'Click here to see options related to your account',
+ selector: '#Header__userpic',
+ position: 'bottom-left',
+ type: 'hover'
+ },
+ {
+ title: 'Menu',
+ text: 'Click here to see more options',
+ selector: '#Header__dropdown',
+ position: 'bottom-right',
+ type: 'hover'
+ }
+ ])
+ }, 1000);
}
componentWillUnmount() {
@@ -188,7 +214,7 @@ class Header extends React.Component {
<div className="expanded row">
<div className="columns">
<ul className="menu">
- <li className="Header__top-logo">
+ <li className="Header__top-logo" id="Header__top-logo">
<Link to={logo_link}>
<Icon name="steem" size="2x" />
</Link>
diff --git a/app/components/modules/TopRightMenu.jsx b/app/components/modules/TopRightMenu.jsx
index 7035cd5ab..5270ad0df 100644
--- a/app/components/modules/TopRightMenu.jsx
+++ b/app/components/modules/TopRightMenu.jsx
@@ -55,14 +55,14 @@ function TopRightMenu({username, showLogin, logout, loggedIn, vertical, navigate
<VerticalMenu items={user_menu} title={username} />
}
>
- {!vertical && <li className={'Header__userpic '}>
+ {!vertical && <li id="Header__userpic" className={'Header__userpic '}>
<a href={account_link} title={username} onClick={e => e.preventDefault()}>
<Userpic account={username} />
</a>
<div className="TopRightMenu__notificounter"><NotifiCounter fields="total" /></div>
</li>}
</LinkWithDropdown>
- {toggleOffCanvasMenu && <li className="toggle-menu"><a href="#" onClick={toggleOffCanvasMenu}>
+ {toggleOffCanvasMenu && <li id="Header__dropdown" className="toggle-menu"><a href="#" onClick={toggleOffCanvasMenu}>
<span className="hamburger" />
</a></li>}
</ul>
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 0a05f3434..bf68e62d7 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -4117,6 +4117,11 @@
"from": "minimist@>=1.2.0 <2.0.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz"
},
+ "mixpanel": {
+ "version": "0.5.0",
+ "from": "mixpanel@>=0.5.0 <0.6.0",
+ "resolved": "https://registry.npmjs.org/mixpanel/-/mixpanel-0.5.0.tgz"
+ },
"mkdirp": {
"version": "0.5.1",
"from": "mkdirp@>=0.5.1 <0.6.0",
@@ -4208,6 +4213,11 @@
"from": "negotiator@0.6.1",
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz"
},
+ "nested-property": {
+ "version": "0.0.7",
+ "from": "nested-property@>=0.0.7 <0.0.8",
+ "resolved": "https://registry.npmjs.org/nested-property/-/nested-property-0.0.7.tgz"
+ },
"net": {
"version": "1.0.2",
"from": "net@>=1.0.2 <2.0.0",
@@ -5024,6 +5034,11 @@
"from": "querystring-es3@>=0.2.0 <0.3.0",
"resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz"
},
+ "rafl": {
+ "version": "1.2.2",
+ "from": "rafl@>=1.2.1 <1.3.0",
+ "resolved": "https://registry.npmjs.org/rafl/-/rafl-1.2.2.tgz"
+ },
"ramda": {
"version": "0.19.1",
"from": "ramda@>=0.19.1 <0.20.0",
@@ -5081,6 +5096,11 @@
"from": "react-addons-test-utils@>=15.3.1 <16.0.0",
"resolved": "https://registry.npmjs.org/react-addons-test-utils/-/react-addons-test-utils-15.3.2.tgz"
},
+ "react-autobind": {
+ "version": "1.0.6",
+ "from": "react-autobind@>=1.0.0 <2.0.0",
+ "resolved": "https://registry.npmjs.org/react-autobind/-/react-autobind-1.0.6.tgz"
+ },
"react-deep-force-update": {
"version": "1.0.1",
"from": "react-deep-force-update@>=1.0.0 <2.0.0",
@@ -5106,6 +5126,11 @@
"from": "react-intl@>=2.1.3 <3.0.0",
"resolved": "https://registry.npmjs.org/react-intl/-/react-intl-2.1.5.tgz"
},
+ "react-joyride": {
+ "version": "1.5.2",
+ "from": "react-joyride@latest",
+ "resolved": "https://registry.npmjs.org/react-joyride/-/react-joyride-1.5.2.tgz"
+ },
"react-lazy-cache": {
"version": "3.0.1",
"from": "react-lazy-cache@>=3.0.1 <4.0.0",
@@ -5500,6 +5525,11 @@
"from": "sax@>=1.2.1 <1.3.0",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz"
},
+ "scroll": {
+ "version": "2.0.0",
+ "from": "scroll@>=2.0.0 <3.0.0",
+ "resolved": "https://registry.npmjs.org/scroll/-/scroll-2.0.0.tgz"
+ },
"scroll-behavior": {
"version": "0.7.0",
"from": "scroll-behavior@>=0.7.0 <0.8.0",
diff --git a/package.json b/package.json
index f8cc32a34..87642efa3 100644
--- a/package.json
+++ b/package.json
@@ -91,6 +91,7 @@
"react-foundation-components": "git+https://github.com/valzav/react-foundation-components.git#lib",
"react-highcharts": "^8.3.3",
"react-intl": "^2.1.3",
+ "react-joyride": "^1.5.2",
"react-medium-editor": "^1.8.0",
"react-notification": "^5.0.7",
"react-overlays": "0.6.4",
--
GitLab