Add demo for UserProfileNavigator and fix issue (efc00ae4) · Commits · Patrik Meijer / react-components

demo/demoApp.jsx

+5 −0

Original line number	Diff line number	Diff line
		@@ -7,6 +7,7 @@ import Typography from '@material-ui/core/Typography';
		import DemoProjectSeedCards from '../src/components/ProjectSeedCards/demo';
		import DemoAttributeEditor from '../src/components/AttributeEditor/demo';
		import DemoConfirmDialog from '../src/components/ConfirmDialog/demo';
		import DemoUserProfileNavigator from '../src/components/UserProfileNavigator/demo';


		export default class demoApp extends Component {
		@@ -30,6 +31,10 @@ export default class demoApp extends Component {
		component: <DemoConfirmDialog/>,
		title: 'ConfirmDialog',
		},
		{
		component: <DemoUserProfileNavigator/>,
		title: 'UserProfileNavigator',
		},
		];

		return (

demo/static/gme-dist/webgme.classes.build.js

+8 −0

Original line number	Diff line number	Diff line
		@@ -503,6 +503,14 @@
		// Constraint Checking
		META_RULES_RESULT: 'META_RULES_RESULT',
		CONSTRAINT_RESULT: 'CONSTRAINT_RESULT'
		},
		gmeConfig: {
		authentication: {
		enable: false
		},
		client: {
		mountedPath: '',
		}
		}
		};
		};

package-lock.json

+7 −21

Original line number	Diff line number	Diff line
		@@ -3104,14 +3104,12 @@
		"balanced-match": {
		"version": "1.0.0",
		"bundled": true,
		"dev": true,
		"optional": true
		"dev": true
		},
		"brace-expansion": {
		"version": "1.1.11",
		"bundled": true,
		"dev": true,
		"optional": true,
		"requires": {
		"balanced-match": "^1.0.0",
		"concat-map": "0.0.1"
		@@ -3126,20 +3124,17 @@
		"code-point-at": {
		"version": "1.1.0",
		"bundled": true,
		"dev": true,
		"optional": true
		"dev": true
		},
		"concat-map": {
		"version": "0.0.1",
		"bundled": true,
		"dev": true,
		"optional": true
		"dev": true
		},
		"console-control-strings": {
		"version": "1.1.0",
		"bundled": true,
		"dev": true,
		"optional": true
		"dev": true
		},
		"core-util-is": {
		"version": "1.0.2",
		@@ -3256,8 +3251,7 @@
		"inherits": {
		"version": "2.0.3",
		"bundled": true,
		"dev": true,
		"optional": true
		"dev": true
		},
		"ini": {
		"version": "1.3.5",
		@@ -3269,7 +3263,6 @@
		"version": "1.0.0",
		"bundled": true,
		"dev": true,
		"optional": true,
		"requires": {
		"number-is-nan": "^1.0.0"
		}
		@@ -3284,7 +3277,6 @@
		"version": "3.0.4",
		"bundled": true,
		"dev": true,
		"optional": true,
		"requires": {
		"brace-expansion": "^1.1.7"
		}
		@@ -3292,14 +3284,12 @@
		"minimist": {
		"version": "0.0.8",
		"bundled": true,
		"dev": true,
		"optional": true
		"dev": true
		},
		"minipass": {
		"version": "2.2.4",
		"bundled": true,
		"dev": true,
		"optional": true,
		"requires": {
		"safe-buffer": "^5.1.1",
		"yallist": "^3.0.0"
		@@ -3318,7 +3308,6 @@
		"version": "0.5.1",
		"bundled": true,
		"dev": true,
		"optional": true,
		"requires": {
		"minimist": "0.0.8"
		}
		@@ -3399,8 +3388,7 @@
		"number-is-nan": {
		"version": "1.0.1",
		"bundled": true,
		"dev": true,
		"optional": true
		"dev": true
		},
		"object-assign": {
		"version": "4.1.1",
		@@ -3412,7 +3400,6 @@
		"version": "1.4.0",
		"bundled": true,
		"dev": true,
		"optional": true,
		"requires": {
		"wrappy": "1"
		}
		@@ -3534,7 +3521,6 @@
		"version": "1.0.2",
		"bundled": true,
		"dev": true,
		"optional": true,
		"requires": {
		"code-point-at": "^1.0.0",
		"is-fullwidth-code-point": "^1.0.0",

src/components/UserProfileNavigator/UserProfileNavigator.jsx

+16 −6

Original line number	Diff line number	Diff line
		@@ -22,7 +22,8 @@ export default class UserProfileNavigator extends Component {
		};

		openMenu = (event) => {
		this.setState({anchorEl: event.currentTarget});
		const {enable} = this.props.gmeClient.gmeConfig.authentication;
		this.setState({anchorEl: enable ? event.currentTarget : null});
		};

		closeMenu = () => {
		@@ -33,7 +34,7 @@ export default class UserProfileNavigator extends Component {
		const {gmeClient} = this.props;
		const tempAnchor = window.document.createElement('a');
		tempAnchor.target = '_self';
		tempAnchor.href = `${gmeClient.mountedPath \|\| ''}/profile/home`;
		tempAnchor.href = `${gmeClient.gmeConfig.client.mountedPath}/profile/home`;
		window.document.body.appendChild(tempAnchor);
		tempAnchor.click();
		};
		@@ -42,7 +43,7 @@ export default class UserProfileNavigator extends Component {
		const {gmeClient} = this.props;
		const tempAnchor = window.document.createElement('a');
		tempAnchor.target = '_self';
		tempAnchor.href = `${gmeClient.mountedPath \|\| ''}/logout`;
		tempAnchor.href = `${gmeClient.gmeConfig.client.mountedPath}/logout`;
		window.document.body.appendChild(tempAnchor);
		window.document.cookie = `${gmeClient.gmeConfig.authentication.jwt.cookieId}\
		=; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
		@@ -53,7 +54,7 @@ export default class UserProfileNavigator extends Component {

		render() {
		const {anchorEl} = this.state;
		const {userInfo, color} = this.props;
		const {userInfo, color, gmeClient} = this.props;

		if (userInfo === null) {
		return null;
		@@ -61,9 +62,18 @@ export default class UserProfileNavigator extends Component {

		return (
		<div>
		<Button size="small" onClick={this.openMenu} style={{width: '100%', color}}>
		<Button size="small"
		onClick={this.openMenu}
		style={{width: '100%', color}}>
		<AccountCircle/>
		<span style={{marginLeft: 5, fontSize: 16}}> {userInfo.displayName \|\| userInfo._id}</span>
		<span
		title={userInfo.displayName \|\| userInfo._id}
		style={{
		marginLeft: 5,
		fontSize: 16,
		textOverflow: 'ellipsis',
		overflowX: 'auto',
		}}> {userInfo.displayName \|\| userInfo._id}</span>
		</Button>
		<Menu
		id="simple-menu"

src/components/UserProfileNavigator/demo.jsx

0 → 100644

+52 −0

Original line number	Diff line number	Diff line
		import React, {Component} from 'react';

		import UserProfileNavigator from './index'

		export default class DemoUserProfileNavigator extends Component {
		constructor(props) {
		super(props);
		this.gmeClient = new window.GME.classes.Client(window.GME.gmeConfig);
		this.gmeClient2 = new window.GME.classes.Client(window.GME.gmeConfig);

		this.gmeClient2.gmeConfig.authentication.enable = true;
		}

		render() {
		const userInfo = {
		_id: 'demo',
		};

		const userInfo2 = {
		_id: 'ALongNameToEnsureItIsCropped',
		};

		const userInfo3 = {
		_id: 'ALongNameShownInLargerWidget',
		};

		return (
		<div style={{width: '20%'}}>
		<div style={{width: '50%'}}>
		<UserProfileNavigator
		gmeClient={this.gmeClient}
		userInfo={userInfo}
		color={'lightblue'}
		/>
		</div>
		<div style={{width: '50%'}}>
		<UserProfileNavigator
		gmeClient={this.gmeClient2}
		userInfo={userInfo2}
		/>
		</div>
		<div style={{width: '100%'}}>
		<UserProfileNavigator
		gmeClient={this.gmeClient2}
		userInfo={userInfo3}
		color={'grey'}
		/>
		</div>
		</div>
		)
		}
		}
		No newline at end of file

Admin message