Merge pull request #2 from AsishRaju/feature-branch

More Customizable Options

src/components/ComponentToImg.js

@@ -1,36 +1,33 @@
-import React from 'react';
+import React from "react";
 import { exportComponentAsJPEG, exportComponentAsPNG } from "react-component-export-image";
-import './CoverImage.css'
-
-
+import "./CoverImage.css";
 
 class ComponentToImg extends React.Component {
-    constructor(props) {
-        super(props);
-        this.componentRef = React.createRef();
-    }
+	constructor(props) {
+		super(props);
+		this.componentRef = React.createRef();
+	}
 
-    render() {
-        console.log(this.props.children);
-
-        return (
-            <React.Fragment>
-
-                <div ref={this.componentRef}>
-                    {this.props.children}
-                </div>
-
-                    {/* <button onClick={() => exportComponentAsJPEG(this.componentRef)}>
-                        Export As JPEG
-                    </button> */}
-
-                    <button onClick={() => exportComponentAsPNG(this.componentRef)}>
-                        Download
-                     </button>
-                
-            </React.Fragment>);
-    }
+	render() {
+		console.log(this.props.children);
+		let downloadButton;
+		switch (this.props.downloadAs) {
+			case "PNG":
+				downloadButton = <button onClick={() => exportComponentAsPNG(this.componentRef)}>Download</button>;
+				break;
+			case "JPEG":
+				downloadButton = <button onClick={() => exportComponentAsJPEG(this.componentRef)}>Download</button>;
+		}
+		console.log(downloadButton);
 
+		return (
+			<React.Fragment>
+				<div ref={this.componentRef}>{this.props.children}</div>
+				{/* <button onClick={() => exportComponentAsPNG(this.componentRef)}>Download</button> */}
+				{downloadButton}
+			</React.Fragment>
+		);
+	}
 }
 
 export default ComponentToImg;

src/components/ConfigCover.css

@@ -1,37 +1,49 @@
-body{background-color: #f2f2f2;}
-
-.main-container{
-    width:auto;
-    justify-content: center;
-    align-items: center;
-    display:flex;
-    flex-direction: row;
-}
-.tagline{max-width: 300px;}
-.inputData{
-    display:flex;
-    flex-direction: column;
-    align-items: center;
-    padding:15px;
-}
-.blog-cover{
-    display: flex;
-    flex-direction: column;
-}
-label{margin:5px;}
-input{margin:4px;}
-
-.inputTitle{
-    height:40px;
-    width:auto;
-    border-radius:4px;
-    padding-left:20px;
+body {
+	background-color: #f2f2f2;
 }
 
-@media screen and (max-width:600px){
-   .main-container{
-       display:flex;
-       flex-direction:column;
-   } 
-
+.main-container {
+	width: auto;
+	justify-content: center;
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+}
+.tagline {
+	max-width: 300px;
+}
+.inputData {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 15px;
+}
+.blog-cover {
+	display: flex;
+	flex-direction: column;
+}
+label {
+	margin: 5px;
+}
+input {
+	margin: 4px;
+}
+
+.inputTitle {
+	height: 40px;
+	width: auto;
+	border-radius: 4px;
+	padding-left: 20px;
+}
+
+.reset-btn {
+	background-color: #fc5c65;
+	margin-top: 10px;
+}
+
+@media screen and (max-width: 600px) {
+	.main-container {
+		display: flex;
+		flex-direction: column;
+	}
 }

src/components/ConfigCover.js

@@ -1,80 +1,127 @@
-import React from 'react';
-import './ConfigCover.css'
-import CoverImage from './CoverImage';
-import ComponentToImg from './ComponentToImg';
-import '../assets/css/patterns.css'
+import React from "react";
+import "./ConfigCover.css";
+import CoverImage from "./CoverImage";
+import ComponentToImg from "./ComponentToImg";
+
+const defaultSettings = {
+	title: "How I built my first project with react",
+	bgColor: "#00ff99",
+	borderColor: "#8c52ff",
+	borderSize: "18",
+	borderType: "solid",
+	pattern: "",
+	download: "PNG",
+	foregroundColor: "#ffffff",
+	textColor: "#676683",
+	opacity: 1,
+};
+
 class ConfigCover extends React.Component {
+	state = defaultSettings;
 
-    state = {
-        title: 'How I built my first project with react',
-        bgcolor: '',
-        border: '',
-        pattern: ''
+	handleReset = () => {
+		this.setState(defaultSettings);
+	};
 
-    };
+	render() {
+		return (
+			<div className="main-container">
+				<div className="inputData card">
+					<h1>CoverView</h1>
+					<p className="tagline">🛠 Create awesome cover images for your blog posts quickly</p>
+					<input
+						type="text"
+						placeholder="Enter title here"
+						className="inputTitle form-control"
+						onChange={(e) => this.setState({ title: e.target.value })}
+					></input>
 
-    render() {
-        return (
-            <div className="main-container">
+					<div>
+						<label>Background</label>
+						<input type="color" value={this.state.bgColor} onChange={(e) => this.setState({ bgColor: e.target.value })} />
 
-                <div className="inputData card">
+						<label>Border</label>
+						<input type="color" value={this.state.borderColor} onChange={(e) => this.setState({ borderColor: e.target.value })} />
+					</div>
+					<div>
+						<label>Foreground</label>
+						<input
+							type="color"
+							value={this.state.foregroundColor}
+							onChange={(e) => this.setState({ foregroundColor: e.target.value })}
+						/>
 
-                    <h1>CoverView</h1>
-                    <p className="tagline">🛠 Create awesome cover images for your blog posts quickly</p>
-                    <input type="text" placeholder="Enter title here" className="inputTitle form-control"
-                        onChange={e => this.setState({ title: e.target.value })}></input>
+						<label>Text</label>
+						<input type="color" value={this.state.textColor} onChange={(e) => this.setState({ textColor: e.target.value })} />
+					</div>
+					<label>Opacity</label>
+					<input
+						type="range"
+						min="0"
+						max="1"
+						step="0.1"
+						value={this.state.opacity}
+						onChange={(e) => this.setState({ opacity: e.target.value })}
+					></input>
+					<label>Border size</label>
+					<input type="number" value={this.state.borderSize} onChange={(e) => this.setState({ borderSize: e.target.value })} />
 
+					<label>Border type</label>
+					<select
+						onChange={(e) => this.setState({ borderType: e.target.value })}
+						className="form-control"
+						value={this.state.borderType}
+					>
+						<option>dotted</option>
+						<option>dashed</option>
+						<option>solid</option>
+						<option>double</option>
+						<option>groove</option>
+						<option>ridge</option>
+						<option>inset</option>
+						<option>outset</option>
+						<option>none</option>
+					</select>
 
-                    <div>
-                        <label>Background</label>
-                        <input type="color" defaultValue="#00ff99"
-                            onChange={e => this.setState({ bgcolor: e.target.value })} />
-
-                        <label>border</label>
-                        <input type="color" defaultValue="#8c52ff"
-                            onChange={e => this.setState({ border: e.target.value })} />
-                    </div>
-
-                    <label>Background Pattern</label>
-                    <select onChange={e => this.setState({ pattern: e.target.value })}
-                        className="form-control">
-                        <option>None</option>
-                        <option>graph-paper</option>
-                        <option>jigsaw</option>
-                        <option>hideout</option>
-                        <option>dots</option>
-                        <option>falling-triangles</option>
-                        <option>circuit-board</option>
-                        <option>temple</option>
-                        <option>anchors</option>
-                        <option>brickwall</option>
-                        <option>overlapping-circles</option>
-                        <option>wiggle</option>
-                        <option>tic-tac-toe</option>
-                        <option>leaf</option>
-                        <option>bubbles</option>
-                        <option>squares</option>
-
-                    </select>
-
-                </div>
-
-                <div className="blog-cover">
-                    <ComponentToImg>
-                        <CoverImage
-
-                            title={this.state.title}
-                            bgcolor={this.state.bgcolor}
-                            border={this.state.border}
-                            pattern={this.state.pattern}
-
-                        />
-                    </ComponentToImg>
-
-                </div>
-            </div>
-        );
-    }
+					<label>Background Pattern</label>
+					<select onChange={(e) => this.setState({ pattern: e.target.value })} className="form-control" value={this.state.pattern}>
+						<option>None</option>
+						<option>graph-paper</option>
+						<option>jigsaw</option>
+						<option>hideout</option>
+						<option>dots</option>
+						<option>falling-triangles</option>
+						<option>circuit-board</option>
+						<option>temple</option>
+						<option>anchors</option>
+						<option>brickwall</option>
+						<option>overlapping-circles</option>
+						<option>wiggle</option>
+						<option>tic-tac-toe</option>
+						<option>leaf</option>
+						<option>bubbles</option>
+						<option>squares</option>
+						<option>explorer</option>
+						<option>jupiter</option>
+						<option>sun</option>
+					</select>
+					<label>Dowload As</label>
+					<select onChange={(e) => this.setState({ download: e.target.value })} className="form-control" value={this.state.download}>
+						<option>PNG</option>
+						<option>JPEG</option>
+					</select>
+					<button className="reset-btn" onClick={this.handleReset}>
+						Reset
+					</button>
+				</div>
+				<div className="blog-cover">
+					<ComponentToImg downloadAs={this.state.download}>
+						<CoverImage {...this.state} />
+					</ComponentToImg>
+				</div>
+			</div>
+		);
+	}
 }
 
 export default ConfigCover;

src/components/CoverImage.js

@@ -1,21 +1,38 @@
-import React from 'react';
-import './CoverImage.css';
+import React from "react";
+import "./CoverImage.css";
+import "../assets/css/patterns.css";
 
 class CoverImage extends React.Component {
+	hexToRgbA(hex, opacity) {
+		var c;
+		if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+			c = hex.substring(1).split("");
+			if (c.length == 3) {
+				c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+			}
+			c = "0x" + c.join("");
+			return "rgba(" + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(",") + `,${opacity})`;
+		}
+		throw new Error("Bad Hex");
+	}
 
-    render() {
-        return (
-            <div className={` cover ${this.props.pattern} `}
-                style={{ backgroundColor: this.props.bgcolor }}>
-                <div className={`${this.props.pattern}`}>
-                    <div className="title-card"
-                        style={{ borderTop: `18px solid ${this.props.border}` }}>
-                        <p>{this.props.title}</p>
-                    </div>
-                </div>
-            </div>
-        );
-    }
+	render() {
+		const { title, bgColor, borderColor, borderSize, borderType, pattern, foregroundColor, textColor, opacity } = this.props;
+		const styleToApply = {
+			borderTop: `${borderSize}px ${borderType} ${borderColor}`,
+			backgroundColor: `${this.hexToRgbA(foregroundColor, opacity)}`,
+			color: `${textColor}`,
+		};
+		return (
+			<div className={` cover ${pattern} `} style={{ backgroundColor: bgColor }}>
+				<div className={`${pattern}`}>
+					<div className="title-card" style={styleToApply}>
+						<p>{title}</p>
+					</div>
+				</div>
+			</div>
+		);
+	}
 }
 
 export default CoverImage;