leo-design-ui/dist/components/Select/select.js

React Design Library

// import classNames from "classnames"
// import React, { createContext, ReactNode, useRef, useState } from "react"
// import Input from "../Input/input"
// import Transition from "../Transition/transition";
// import { SelectOptionProps } from "./option";
// import useClickOutside from "@/hooks/useClickOutside";
// export interface SelectProps {
//     defaultValue?:string,
//     placeholder?:string,
//     disabled?:boolean,
//     onChange?:(val:string) => void
//     name?: string;
//     children:ReactNode;
//     style?:React.CSSProperties;
// }
// export interface ISelectContext {
//     onSelect?: (value: string, isSelected?: boolean) => void;
//     selectedValues: string[];
//     multiple?: boolean;
//   }
// export const SelectContext = createContext<ISelectContext>({
//     selectedValues:[]
// })
// const Select = ({
//     defaultValue = '',
//     placeholder,
//     disabled,
//     onChange,
//     name,
//     children,
//     style,
// }:SelectProps) => {
//     const [value,setValue] = useState(defaultValue)
//     const [menuOpen,setMenuOpen] = useState(false)
//     const containerRef = useRef(null)
//     const containerClass = classNames('leo-select',{
//         'menu-is-open': menuOpen,
//         'is-disabled': disabled,
//     })
//     const handlerClick = () => {
//         setMenuOpen(!menuOpen)
//     }
//     // 点击dom外，收回dropdown
//     useClickOutside(containerRef,() => setMenuOpen(false))
//     const passedContext = {
//         // onSelect: handleOptionClick,
//         // selectedValues: selectedValues,
//     }
//     const generateOptions = () => {
//         return React.Children.map(children, (child:any,i:number) => {
//             const childrenElement = child as React.FunctionComponentElement<SelectOptionProps>
//             if(childrenElement.type.displayName === 'Option') {
//                 return React.cloneElement(childrenElement, {
//                     index: `select-${i}`
//                 })
//             } else {
//                 console.error("Warning: Select has a child which is not a Option component")
//             }
//         })
//     }
//     return (
//         <div className={containerClass} ref={containerRef} style={style}>
//             <div className="leo-select-input" style={style} onClick={handlerClick}>
//                 <Input
//                     readOnly
//                     value={value}
//                     icon="angle-down"
//                     name={name}
//                     disabled={disabled}
//                 />
//             </div>
//                 <Transition
//                     in={menuOpen}
//                     animation="zoom-in-top"
//                     timeout={300}
//                 >
//                     <ul className="leo-select-dropdown">
//                         { generateOptions() }
//                     </ul>
//                 </Transition>
//         </div>
//     )
// }
// export default Select