Bài 05: Khóa Học React-Viết Ứng dụng SettingColor

 

Trong tập tin App.js nhập mã nguồn sau :

<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';
import './App.css';
import ColorPicker from './components/ColorPicker';
import SizeSetting from './components/SizeSetting';
import Reset from './components/Reset';
import Result from './components/Result';

class App extends Component{
	 constructor(props){
		super(props);
		this.state = {
			color : 'red',
			fontSize : 12
		};
		this.onSetColor = this.onSetColor.bind(this);
		this.onChangeSize = this.onChangeSize.bind(this);
		this.onSettingDefault = this.onSettingDefault.bind(this);

	}
	onSetColor = (params) => {
		this.setState({
			color : params
		});
	}
	onChangeSize(value){
		if(this.state.fontSize + value >= 8 && this.state.fontSize + value <= 50){
			this.setState({
					fontSize : this.state.fontSize + value
			});
		}
	}
	onSettingDefault(value){
		if(value){
			this.setState({
				color : 'red',
				fontSize : 12
			});
		}
	}
	render() {
		return (
			<div>
				<div className="container mt-50">
					<div className="row">
						<ColorPicker color={this.state.color} onReceiveColor={this.onSetColor} />
						<div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
							<SizeSetting 
								fontSize={this.state.fontSize} 
								onChangeSize={this.onChangeSize } />
							<Reset onSettingDefault={this.onSettingDefault} />
						</div>
						<Result color={this.state.color} fontSize={this.state.fontSize} />
					</div> 
				</div>
			</div>
		);
	}
 }  

export default App;

//]]>
</script>

Trong tập tin Reset.js nhập mã nguồn sau :

<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';
 

class Reset extends Component{
	onResetDefault = () => {
		this.props.onSettingDefault(true);
	}
	render() {
		return (
			<button type="button" className="btn btn-primary"
			onClick ={this.onResetDefault}
			>Reset</button>
		);
	}
 }  
export default Reset;
//]]>
</script>

Trong tập tin Result.js nhập mã nguồn sau :

<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';


class Result extends Component{
	setStyle(){
		return {
			color : this.props.color,
			borderColor : this.props.color,
			fontSize : this.props.fontSize
		};
	}
	render() {
		return (
			<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				<p>Color : {this.props.color} - Fontsize : {this.props.fontSize}px</p>
				<div id="content" style={this.setStyle() } >
					Nội dung setting
				</div>
			</div>
		);
	}
 }  

export default Result  
//]]>
</script>

Trong tập tin Colorpicker.js nhập mã nguồn sau :

<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';


class ColorPicker extends Component{
	constructor(props){
		super(props);
		this.state = {
			colors : ['red', 'green', 'blue','#ccc']
		};
	}
	showColor(color){
		return {
			backgroundColor : color
		};
		
	}
	setActiveColor(color){
		  this.props.onReceiveColor(color);
	}
	render() {
		var elmColors = this.state.colors.map((color, index) =>{
			return <span 
						key = {index} 
						style={this.showColor(color) }
						className ={this.props.color === color ? 'active' : ' ' }
						onClick = { () => this.setActiveColor(color) }
					></span>
		});
		return (
			<div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
				<div className="panel panel-primary">
					<div className="panel-heading">
						<h3 className="panel-title">Color Picker</h3>
					</div>
					<div className="panel-body">
						{elmColors}
						<hr/>
					</div>
				</div>
			</div>
		);
	}
 }  

export default ColorPicker;
//]]>
</script>

Trong tập tin SizeSetting.js nhập mã nguồn sau :

<script type='text/javascript'>
//<![CDATA[
import React, { Component} from 'react';


class SizeSetting extends Component{
	changeSize(value){
		this.props.onChangeSize(value);
	}

	render() {
		return (
			<div className="panel panel-warning">
				<div className="panel-heading">
 					<h3 className="panel-title">Size : {this.props.fontSize}px </h3>
				</div>
				<div className="panel-body">
					<button type="button" className="btn btn-success"
					onClick={ () => this.changeSize(-2) } >Giảm</button>
					<button type="button" className="btn btn-success"
					onClick={ () => this.changeSize(+2) }>Tăng</button>
				</div>
			</div>
		);
	}
 }  

export default SizeSetting;
//]]>
</script>