Write less css and leave work early! Antd finishes the todo-list style layout

  • Antd is a library of UI components that works well with React
  • Save time writing css styles by using UI Libraries
  • If we compress our css writing time by more than half, we may be able to leave work earlier ~

About Antd

How to use antd?

  • Install antd
npm install antd -S
  • Introducing antd and some of its components into the react component
import 'antd/dist/antd.css';
import { Input, List, Tag, Switch} from 'antd';
  • Use antd in react components (for example, labels)
{/*Here the item is an array*/}
<Tag color="orange" style={{position: "absolute", right: 0}}>Creation date: {item[2]}</Tag>

Write a to-do list with antd

  • Automatically add creation date
  • Turn tasks on and off (click the switch component or click the text)
  • Support for deleting tasks (click on task text when off)

Core Component Source

import React, { Component } from 'react';
import './App.css';
import 'antd/dist/antd.css';
import { Input, List, Tag, Switch} from 'antd';


class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      list: [],
      inputValue: ''
    }
    this.addContent = this.addContent.bind(this);
    this.handleInputValue = this.handleInputValue.bind(this);
    this.removeItem = this.removeItem.bind(this);
    this.handleNewTodoKeyDown = this.handleNewTodoKeyDown.bind(this);
    this.getCurrentDate = this.getCurrentDate.bind(this);
  }

  componentDidMount(){
    // Autofocus after page loading
    this.nameInput.focus();
  }

  // Add Input Box Content to List
  addContent() {
    let tmpValue =  this.state.inputValue
    // Content is empty and cannot be added
    if (tmpValue === "") {
      return
    }
    // Get the current time
    let tmpDate = this.getCurrentDate()

    let tmpList = JSON.parse(JSON.stringify(this.state.list));
    tmpList.unshift([tmpValue, 0, tmpDate])
    // Empty input box contents
    this.setState({inputValue: ''});
    // Render List
    this.setState({list: tmpList})
    // Refocus
    this.nameInput.focus();

  }

  // Binding real-time input
  handleInputValue(event) {
    let tmpInputValue = event.target.value;
    this.setState({inputValue: tmpInputValue});
  }

  // Get dom of current time
  getCurrentDate(){
    // Add Creation Date
    let dt = new Date()
    let year = dt.getFullYear();
    let month = dt.getMonth();
    let day = dt.getDate();
    let hour = dt.getHours();
    let minute = dt.getMinutes();
    let second= dt.getSeconds();
    // Add month to 1
    month = month + 1;
    if (month <= 9){month = "0" + month;}
    if (day <= 9){day = "0" + day;}
    if (hour <= 9){hour = "0" + hour;}
    if (minute <= 9){minute = "0" + minute;}
    if (second <= 9){second = "0" + second;}
    let creteData = year+ "year" + month+ "month" + day+ "day" + hour+ "time" + minute+ "branch" + second+ "second";
    return creteData

  }

  // Remove clicked content
  removeItem(index){
    let tmpListdata = JSON.parse(JSON.stringify(this.state.list))
    // Cut out an array of elements
    let tmpItem = tmpListdata.splice(index, 1);
    // Clicked element index plus 1
    tmpItem[0][1] += 1;
    // Single dash
    if (tmpItem[0][1] === 1){
      // Replace Elements
      tmpListdata.splice(index, 0, ...tmpItem);
    }
      // Update List Data
    this.setState({list: tmpListdata});
  }

  // Capture Enter Action
  handleNewTodoKeyDown(event) {
    let ENTER_KEY = 13;
    if (event.keyCode === ENTER_KEY) {
      this.addContent();
    }
  }
  
  // Handle switch buttons
  handleSwitch(index){
    let tmpList = JSON.parse(JSON.stringify(this.state.list));
    tmpList[index][1] = tmpList[index][1] ? 0 : 1;
    this.setState({list: tmpList});
  } 

  render() {
  return (
    <div className="App">
      <Input 
      style = {{marginTop: 20, marginBottom: 20}}
      className="app-input" size="large" placeholder="Please enter a to-do(Enter Add)" 
      onChange={this.handleInputValue.bind(this)} 
      value={this.state.inputValue}
      onKeyDown={this.handleNewTodoKeyDown}
      ref={(input) => { this.nameInput = input; }} />


      <List
      size="large"
      bordered
      dataSource={this.state.list}
      style={{color: "#4091F7", fontWeight: "bold"}}
      renderItem={
        (item, index) => (
          <List.Item>
          <Switch style={{marginRight: 20}} onChange={this.handleSwitch.bind(this, index)} checked = {item[1] ? false : true} />
          <Tag color="orange" style={{position: "absolute", right: 0}}>Creation date: {item[2]}</Tag>
          <div onClick={this.removeItem.bind(this, index)} style={{cursor:"pointer"}}>
          {item[1] ? <div style={{textDecoration:"line-through"}}>{item[0]}</div> : <div>{item[0]}</div>}
          </div>
          </List.Item>)
      }
      />

    </div>
  );
  }
}

export default App;

For ease of management, related resources are integrated into a separate post with the following links:
http://www.jianshu.com/p/4f28e1ae08b1

Tags: JSON React github npm

Posted on Thu, 20 Feb 2020 08:34:42 -0800 by rdennisak