select选择器组件（4）|青训营日记

这是我参与「第五届青训营 」伴学笔记创作活动的第 11天

今天做了啥子嘞

首先是二叉树的层序遍历，用一个队列来保存每一层的节点（一层的节点为一个List），然后poll出来一个List（一层的结点）将其放入result中，就将每个结点的左右结点放入一个新的List中，当前List全部处理完成后，将新的List offer进队列，这样就完成了层序遍历，如果希望从底往上层序遍历，则将最终结果倒转。

然后是可恶的select组件，先完成了组件大小变化，传入size可变。 本来是准备实现其多选，但是一个未解决参数传值的问题，导致每次渲染值就恢复原状啊啊啊啊啊啊，不知道啥时候能解决。

下面是我专门写了个组件来实现多值，明天查一下回调函数。

import React, { useEffect, useState } from "react";
import { Mode, Option } from "./select";
interface selectedItemsProps{
    selectedItems?:Option[],
    mode?:Mode
};
const SelectedItems:React.FC<selectedItemsProps> = (props) => {
    const {
        selectedItems,
        mode
    } = props;
    const [selected,setselected] = useState(selectedItems);
    const SelectedItems = selectedItems;
    const Delete = (index:number) => {
        if(SelectedItems != undefined){
            SelectedItems.splice(index,1);
            console.log(SelectedItems); 
        }    
    }
    useEffect(() => {
        console.log(SelectedItems);
        setselected(SelectedItems);
      });
    return (
        <span>
        {
            selected &&
            selected.map((selectedItem,i) => (
            <span key={selectedItem.label} onClick={()=>{Delete(i)}}>
             {selectedItem.value}
            </span>
            )
        )
        }
        </span>
    )
};
export default SelectedItems;

下面是为了实现size而修改的样式代码

@import "../../theme/themes/default/index.scss";
@import "./mixin";
@import "./basic.scss";
#root{
    width: 250px;
}
//基础样式
.ai-select{
    font-size: $font-size-base;
    display:flex;
    padding:4px 8px;
    border-color:$border-color ;
    border:1.5px solid;
    width: 200px;
    justify-content: space-between;
    background-color:#ffffff00;
    border-radius: $border-radius;
    margin: auto;
    box-shadow: $box-shadow;
    line-height: $line-height-base;
}
.ai-select-true{
    cursor: not-allowed;
    color: $menu-item-disabled-color;
    // box-shadow: 0px 0px 3px 1px rgb(172, 172, 175) inset;
}

.ai-select-false{
    cursor: pointer;
}
.ai-options{
    width: 220px;
    border: 1px solid #aec0bf;
    border-radius: 5px;
    margin: auto;
    box-shadow:$box-shadow
}

.ai-options-sm{
    width: 215px;
}
.ai-options-lg{
    width: 235px;
}

.ai-option{
    padding:4px 8px;
    width: 200px;
    font-size: 14px; 
    cursor: pointer;
    font-size: $font-size-base;
    margin: auto;
}

.ai-mouse:hover{
    background-color: $gray-500;
}

.ai-downangle{
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-top: 8px #000000 solid;
    position: relative;
    top: 8px;
}
.ai-downangle-lg{ 
    top: 16px;
}
.ai-upangle{
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid transparent;
    border-bottom: 8px #000000 solid;
    position: relative;
    bottom: 4px;
}
.ai-upangle-lg{
    top: 8px;
}
.ai-mouse {
    display: flex;
    align-items: center;
    height: 30px;
}
.ai-mouse-sm{
    height: 25px;
}
.ai-mouse-lg{
    height: 35px;
}
button{
    border: #ffffff 0.5px;
    background-color: #ffffff;
    position: relative;
}
.ai-select-option-lg , .ai-select-lg{
    @include select-size(
        $line-height-lg,
        $ai-select-padding-x-lg,
        $ai-select-padding-y-lg,
        $font-size-lg,
        $border-radius-lg
    )
}

.ai-select-sm{
    @include select-size(
        $line-height-sm,
        $ai-select-padding-x-sm,
        $ai-select-padding-y-sm,
        $font-size-sm,
        $border-radius-sm,
    )
}
.ai-select-options-sm{
    width: 200px;
}
.ai-select-option-sm {
    width: 200px;
    @include select-size(
        $line-height-sm,
        $ai-select-padding-x-sm,
        $ai-select-padding-y-sm,
        $font-size-sm,
        $border-radius-sm,
    )
}