😅html for change color, size, reset (ok)

382KB

reactjs.zip

archive

C:\Users\Administrator\Desktop\test2\src\App.tsx

import * as React from 'react';
import './App.css';
import ColorPicker from './components/ColorPicker';
import SizeSetting from './components/SizeSetting';
import Result from './components/Result';
interface IAppProps { [propName: string]: any }
interface IAppState {
  color: string;
  size: number;
}
class App extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppProps, color: IAppState) {
    super(props);
    this.state = {
      color: "red",
      size: 12
    };
  }
  private getColor = (color: string): void => {
    this.setState({
      color: color
    })
  }
  private getSize = (size: number): void => {
    this.setState({
      size: this.state.size + size
    })
  }
  private resetData = () => {
    this.setState({
      color: "red",
      size: 12
    })
  };
  public render() {
    var { color, size } = this.state;
    return (
      <div className="container" id="root">
        <div className="row">
          <ColorPicker color={color} getColor={(s: string) => this.getColor(s)} />
          <SizeSetting size={size} getSize={(n: number) => this.getSize(n)} resetData={() => this.resetData()} />
          <Result color={color} size={size} />
        </div>
      </div>
    );
  }
}
export default App;

C:\Users\Administrator\Desktop\test2\src\components\ColorPicker.tsx

import * as React from 'react';
interface IAppProps { [propName: string]: any }
interface IAppState {
  colors: string[];
}
class ColorPicker extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppProps, colors: IAppState) {
    super(props);
    this.state = {
      colors: [
        "red",
        "blue",
        "green",
        "pink"
      ]
    };
  }
  getColor = (color: string): void => {
    return this.props.getColor(color);
  }
  public render() {
    var { colors } = this.state;
    var colorP = this.props.color;
    return (
      <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div className="panel panel-default">
          <div className="panel-heading">
            <h3 className="panel-title">
              ColorPicker
            </h3>
          </div>
          <div className="panel-body">
            {
              colors.map((color, index) => {
                return <span onClick={() => this.getColor(color)} className={(colorP === color) ? "active" : ""} key={index} style={{ background: color }}></span>;
              })
            }
          </div>
        </div>
      </div>
    );
  }
}
export default ColorPicker;

C:\Users\Administrator\Desktop\test2\src\components\Reset.tsx

import * as React from 'react';
interface IAppProps { [propName: string]: any }
interface IAppState {
}
class Reset extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppProps, obj: {}) {
    super(props);
  }
  private resetData = ():any => {
    return this.props.resetData();
  };
  public render() {
    return (
      <div className="panel panel-default">
        <div className="panel-footer">
          <button onClick={() => this.resetData()} className="btn btn-default" type="button">Reset</button>
        </div>
      </div>
    );
  }
}
export default Reset;

C:\Users\Administrator\Desktop\test2\src\components\Result.tsx

import * as React from 'react';
interface IAppProps {
  color: string;
  size: number;
}
interface IAppState {
}
class Result extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppProps, object: {}) {
    super(props);
  }
  public render() {
    var { color, size } = this.props;
    return (
      <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div className="panel panel-default">
          <div className="panel-heading">
            <h3 className="panel-title" style={{ color: `${color}`, fontSize: `${size}px` }}>
              color: {color} - fontSize: {size}px
            </h3>
          </div>
          <div className="panel-body">
            <p style={{ color: `${color}`, fontSize: `${size}px` }}>
              Loading 99,99% ...
            </p>
          </div>
        </div>
      </div>
    );
  }
}
export default Result;

C:\Users\Administrator\Desktop\test2\src\components\SizeSetting.tsx

import * as React from 'react';
import Reset from './Reset';
interface IAppProps { [propName: string]: any }
interface IAppState {
  status: boolean;
}
class SizeSetting extends React.Component<IAppProps, IAppState> {
  constructor(props: IAppProps, status: IAppState) {
    super(props);
    this.state = {
      status: false
    };
  }
  private changeSize = (num: number) => {
    return this.props.getSize(num)
  }
  private resetData = () => {
    return this.props.resetData();
  };
  public render() {
    var { size } = this.props;
    return (
      <div className="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div className="panel panel-default">
          <div className="panel-heading">
            <h3 className="panel-title">
              SizeSetting: {size}px
            </h3>
          </div>
          <div className="panel-body">
            <button onClick={() => this.changeSize(-1)} className="btn btn-default" type="button">
              Giảm
            </button>
            <button onClick={() => this.changeSize(1)} className="btn btn-default" type="button">
              Tăng
            </button>
          </div>
        </div>
        <Reset resetData={() => this.resetData()} />
      </div>
    );
  }
}
export default SizeSetting;