“This is the 15th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Project source: gitee.com/yang-yiming…

Let’s take a page from the Flying book and implement the task list component today

Create a file

Create a new Components folder under TaskList to store TaskItem

Also create index.tsx index.less in the TaskItem folder

index.tsx

import styles from './index.less';

export default function TaskItem() {
  return (
    <div>
    </div>
  );
Copy the code

Constraints on the data

Let’s take a look at what data is required for this component and constrain the data types

import styles from './index.less';
interface TaskProps{
    title:string,
    desc:string,
    startTime:string,
    endTiem:string,
    status: 'doing|done'
}
export default function TaskItem(props:TaskProps) {
  return (
    <div>

    </div>
  );
}
Copy the code

Start drawing our components

The result is something like this

Change the layout of the main menu

We made some changes to the main menu to fit the task list on the right.

MainMenu/index.tsx

import { useState } from 'react';
import MenuItem from './components/MenuItem';
import config from './config';
import styles from './index.less';

export default function MainMenu() {
  const [activeKy,setActiveKey] = useState('doing');
  return (
    <div className={styles.main_menu}>// Add a new package layer<div className={styles.title_container}>
        <h1 className={styles.title}>The main menu</h1>
      </div>
     
      {
        config.map((item)=>(
          <MenuItem name={item.name} active={activeKy= =item.key} onClick={()= >setActiveKey(item.key)} count={item.count} key={item.key}/>
        ))
      }
    </div>
  );
}
Copy the code

MainMenu/index.less

.main_menu {
  width: 20%;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  padding:0px 4px 0px 20px;
  // Add new margins
  .title_container{
    margin:3px; }}Copy the code

TaskItem components

index.tsx

import styles from './index.less';
interface TaskProps{
    title:string,
    desc:string,
    startTime:string,
    endTime:string,
    status:'doing'|'done'
}
export default function TaskItem(props:TaskProps) {
    const {title,desc,startTime,endTime,status} = props
  return (
    <div className={styles.task_item}>
        <div className={styles.task_item_info}>
            <div className={styles.task_item_title}>
                {title}
            </div>
            <div className={styles.task_item_desc}>
                {desc}
            </div>
        </div>
        <div className={styles.task_item_status}>
            <div className={styles.task_item_time}>{endTime}</div>
            <button className={styles.task_item_btn}>complete</button>
        </div>
    </div>
  );
}
Copy the code

index.less

.task_item{// Place its child in absolute positionposition: relative;
  width: 100%;
  height: 80px;
  justify-content: center;
  display: flex;
  flex: 1; // Each task_item is distributed by columnflex-direction: column;
  box-shadow: 0 0 1px 1px #dddadaad;
  transition: all .4s cubic-bezier(.215.610.355.1);
  background: white;
  margin-bottom: 8px;
  border-radius:5px;
  cursor:cell; // Add hover shadow &:hover {
    box-shadow: 0 0 2px 2px #c2bfbfad; } // task_item_info and task_item_status are two child elements of task_item.task_item_info {
    display: flex;
    flex-direction: column; // Use absolute positionposition: absolute; / / to cooperateposition: Absolute use, left20px
    left: 20px;
    // align-items: center; // Center alignmentjustify-content: center;
    height: 80px;
    // title
    .task_item_title{
        margin-bottom:10px;
    }
    // desc
    .task_item_desc{
        color:#7e7e7e}}.task_item_status {
    display: flex;
    position: absolute;
    flex-direction: column;
    position: absolute; // Use it with absolute positioning20px
    right: 20px;
    margin: auto;
    .task_item_time{
        margin-bottom:10px;
        color: #7971f3;
        background-color: aliceblue;
        border-radius:3px;
        padding: 2px 6px;
    }
    .task_item_btn{}}}Copy the code

Task list Layout

Let’s replicate the effect of multiple TaskItem. When TaskItem is high, we let it scroll. But the scroll bar isn’t very nice, so we’ll hide it here, but it still scrolls.

TaskList/index.tsx

import TaskItem from './components/TaskItem';
import styles from './index.less';

export default function TaskList() {
  return (
    <div className={styles.task_list}>
      <div>
         <h1 className={styles.title}>The task list</h1>
      </div>
      <div className={styles.taskItem_contanier}>
      <TaskItem title={'test'}desc={'This is the description '}endTime={'The 2022-2-9'} status={'doing'} startTime={'20222-2-9'} / >
      <TaskItem title={'test'}desc={'This is the description '}endTime={'The 2022-2-9'} status={'doing'} startTime={'20222-2-9'} / >
      <TaskItem title={'test'}desc={'This is the description '}endTime={'The 2022-2-9'} status={'doing'} startTime={'20222-2-9'} / >
      <TaskItem title={'test'}desc={'This is the description '}endTime={'The 2022-2-9'} status={'doing'} startTime={'20222-2-9'} / >
      <TaskItem title={'test'}desc={'This is the description '}endTime={'The 2022-2-9'} status={'doing'} startTime={'20222-2-9'} / >
      <TaskItem title={'test'}desc={'This is the description '}endTime={'The 2022-2-9'} status={'doing'} startTime={'20222-2-9'} / >
      <TaskItem title={'test'}desc={'This is the description '}endTime={'The 2022-2-9'} status={'doing'} startTime={'20222-2-9'} / >
      <TaskItem title={'test'}desc={'This is the description '}endTime={'The 2022-2-9'} status={'doing'} startTime={'20222-2-9'} / >
      <TaskItem title={'test'}desc={'This is the description '}endTime={'The 2022-2-9'} status={'doing'} startTime={'20222-2-9'} / >
      <TaskItem title={'test'}desc={'This is the description '}endTime={'The 2022-2-9'} status={'doing'} startTime={'20222-2-9'} / >
      <TaskItem title={'test'}desc={'This is the description '}endTime={'The 2022-2-9'} status={'doing'} startTime={'20222-2-9'} / >
      <TaskItem title={'test'}desc={'This is the description '}endTime={'The 2022-2-9'} status={'doing'} startTime={'20222-2-9'} / >
      </div>
    </div>
  );
}
Copy the code

TaskList/index.less

.task_list{// take up the remaining spaceflex: 1;
  display: flex;
  flex-direction: column;
  padding: 0px 20px 0px 20px;
  .taskItem_contanier{
    padding:3px 20px 0px 10px;
    overflow:auto;
  
  }
}
::-webkit-scrollbar {
  width: 1px; /* For vertical flow strips */
  height: 10px; /* For horizontal flow strips */
  }
Copy the code