Add ProjectSeedCards (e35f77ea) · Commits · Patrik Meijer / react-components

package-lock.json

+83 −1

Original line number	Diff line number	Diff line
		{
		"name": "react-components",
		"name": "webgme-react-components",
		"version": "0.0.1",
		"lockfileVersion": 1,
		"requires": true,
		@@ -184,6 +184,28 @@
		"ua-parser-js": "^0.7.18"
		}
		},
		"history": {
		"version": "4.7.2",
		"resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
		"integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
		"requires": {
		"invariant": "^2.2.1",
		"loose-envify": "^1.2.0",
		"resolve-pathname": "^2.2.0",
		"value-equal": "^0.4.0",
		"warning": "^3.0.0"
		},
		"dependencies": {
		"warning": {
		"version": "3.0.0",
		"resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
		"integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
		"requires": {
		"loose-envify": "^1.0.0"
		}
		}
		}
		},
		"hoist-non-react-statics": {
		"version": "2.5.5",
		"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
		@@ -210,6 +232,14 @@
		"symbol-observable": "1.0.4"
		}
		},
		"invariant": {
		"version": "2.2.4",
		"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
		"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
		"requires": {
		"loose-envify": "^1.0.0"
		}
		},
		"is-function": {
		"version": "1.0.1",
		"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
		@@ -233,6 +263,11 @@
		"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
		"integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
		},
		"isarray": {
		"version": "0.0.1",
		"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
		"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
		},
		"isobject": {
		"version": "3.0.1",
		"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
		@@ -444,6 +479,14 @@
		"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
		"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
		},
		"path-to-regexp": {
		"version": "1.7.0",
		"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
		"integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
		"requires": {
		"isarray": "0.0.1"
		}
		},
		"popper.js": {
		"version": "1.14.4",
		"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.4.tgz",
		@@ -470,6 +513,7 @@
		"version": "16.5.1",
		"resolved": "https://registry.npmjs.org/react/-/react-16.5.1.tgz",
		"integrity": "sha512-E+23+rbpPsJgSX812LQkwupUCFnbVE84+L8uxlkqN5MU0DcraWMlVf9cRvKCKtGu0XvScyRnW7Z+9d7ymkjy3A==",
		"dev": true,
		"requires": {
		"loose-envify": "^1.1.0",
		"object-assign": "^4.1.1",
		@@ -526,6 +570,33 @@
		"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
		"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
		},
		"react-router": {
		"version": "4.3.1",
		"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
		"integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
		"requires": {
		"history": "^4.7.2",
		"hoist-non-react-statics": "^2.5.0",
		"invariant": "^2.2.4",
		"loose-envify": "^1.3.1",
		"path-to-regexp": "^1.7.0",
		"prop-types": "^15.6.1",
		"warning": "^4.0.1"
		}
		},
		"react-router-dom": {
		"version": "4.3.1",
		"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
		"integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
		"requires": {
		"history": "^4.7.2",
		"invariant": "^2.2.4",
		"loose-envify": "^1.3.1",
		"prop-types": "^15.6.1",
		"react-router": "^4.3.1",
		"warning": "^4.0.1"
		}
		},
		"react-transition-group": {
		"version": "2.4.0",
		"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.4.0.tgz",
		@@ -563,6 +634,11 @@
		"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
		"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
		},
		"resolve-pathname": {
		"version": "2.2.0",
		"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
		"integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
		},
		"safer-buffer": {
		"version": "2.1.2",
		"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
		@@ -572,6 +648,7 @@
		"version": "0.4.0",
		"resolved": "https://registry.npmjs.org/schedule/-/schedule-0.4.0.tgz",
		"integrity": "sha512-hYjmoaEMojiMkWCxKr6ue+LYcZ29u29+AamWYmzwT2VOO9ws5UJp/wNhsVUPiUeNh+EdRfZm7nDeB40ffTfMhA==",
		"dev": true,
		"requires": {
		"object-assign": "^4.1.1"
		}
		@@ -607,6 +684,11 @@
		"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
		"integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA=="
		},
		"value-equal": {
		"version": "0.4.0",
		"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
		"integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
		},
		"warning": {
		"version": "4.0.2",
		"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",

src/components/ProjectSeedCards/ProjectSeedCards.jsx

0 → 100644

+97 −0

Original line number	Diff line number	Diff line
		import React, {Component} from 'react';
		import PropTypes from 'prop-types';

		import Card from '@material-ui/core/Card';
		import CardActions from '@material-ui/core/CardActions';
		import CardContent from '@material-ui/core/CardContent';
		import CardMedia from '@material-ui/core/CardMedia';
		import Button from '@material-ui/core/Button';
		import Typography from '@material-ui/core/Typography';
		import Grid from '@material-ui/core/Grid';

		export default class ProjectSeedCards extends Component {
		static propTypes = {
		seedsInfo: PropTypes.arrayOf(PropTypes.object).isRequired,
		onCreate: PropTypes.func,
		mediaStyle: PropTypes.object,
		contentStyle: PropTypes.object,
		};

		static defaultProps = {
		onCreate: (createData) => {
		console.log('onCreate', createData);
		},
		mediaStyle: {
		height: 120,
		},
		contentStyle: {
		minHeight: 160,
		},
		};

		render() {
		const {seedsInfo} = this.props;

		const cards = seedsInfo.map((seedInfo) => {
		const {infoUrl} = seedInfo;
		const buttons = [];
		const createBtn = (
		<Button
		key="createBtn"
		size="small"
		color="primary"
		onClick={() => {
		this.props.onCreate(seedInfo.createData);
		}}
		>
		Create
		</Button>);

		buttons.push(createBtn);

		if (infoUrl) {
		const infoBtn = (
		<a href={infoUrl} target="_blank" rel="noopener noreferrer" style={{textDecoration: 'none'}}>
		<Button
		key="infoBtn"
		size="small"
		color="primary"
		>
		Learn More
		</Button>
		</a>);

		buttons.push(infoBtn);
		}

		return (
		<Grid item lg={6} md={12} sm={6} xs={12} key={seedInfo.title}>
		<Card>
		<CardMedia
		style={this.props.mediaStyle}
		image={`/${seedInfo.imageUrl}`}
		title={seedInfo.title}
		/>
		<CardContent style={this.props.contentStyle}>
		<Typography variant="headline">
		{seedInfo.title}
		</Typography>
		<Typography component="p">
		{seedInfo.description}
		</Typography>
		</CardContent>
		<CardActions>
		{buttons}
		</CardActions>
		</Card>
		</Grid>
		);
		});

		return (
		<Grid container spacing={24}>
		{cards}
		</Grid>
		);
		}
		}

src/components/ProjectSeedCards/index.js

0 → 100644

+1 −0

Original line number	Diff line number	Diff line
		export {default} from './ProjectSeedCards';
		No newline at end of file

Admin message