// import React, { FC, useState, useCallback, useRef } from 'react';
// import classNames from 'classnames';
// import './index.css';
// export interface Option {
//   option: any; // 表面的数据
//   value: any; // 背后的值
// }
// interface DropDownSelectorProps {
//   value?: string | number; //default value
//   option?: string | number;
//   className?: any;
//   overlayClassName?: any;
//   options: Option[];
//   labelText?: string;
//   hasEmptyLabel?: boolean;
//   onUpdateValue: (...arg: any[]) => any;
//   onClick?: (...arg: any[]) => any;
//   style?: React.CSSProperties;
//   direction?: 'up'|'down';
// }
// // POP 重构之前再重构这里
// const DropDownSelector: FC<DropDownSelectorProps> = (props) => {
//   const { options, labelText, hasEmptyLabel, option, style, className, overlayClassName, direction = 'down', value, onUpdateValue, onClick } = props;
//   const [showDropDown, setShowDropDown] = useState(false);
//   const ulDomRef = useRef();
//   const liDomListRef = useRef([]);
//   const scrollToSelected = useCallback(() => {
//     const index = options.findIndex(o => o.value == value);
//     if (index == 0 || index == -1) return;
//     let liDom = liDomListRef.current[index];
//     // FIXME 首次加载的时候 liRef 的 offsetHeight = 0
//     // 但是选中在打开就又好了
//     if (!ulDomRef || !liDom) return;
//     let h = liDom.offsetTop - (ulDomRef.current.offsetHeight - liDom.offsetHeight) / 2;
//     h = Math.min(ulDomRef.current.scrollHeight, Math.max(0, h));
//     if (ulDomRef.current.scrollTo) {
//       ulDomRef.current.scrollTo(0, h);
//     } else {
//       ulDomRef.current.scrollTop = h;
//     }
//   }, [])
//   const handleShowDropDown = useCallback(() => {
//     if (!showDropDown) {
//       scrollToSelected();
//     }
//     setShowDropDown(!showDropDown)
//     onClick && onClick();
//   }, [showDropDown, onClick, setShowDropDown])
//   const renderLabel = useCallback(() => {
//     if (labelText && labelText.length > 0) {
//       return <span className='drop-down-label'>{labelText}</span>;
//     } else {
//       return hasEmptyLabel && <span className='empty-holder'></span>;
//     }
//   }, [labelText, hasEmptyLabel])
//   const handleBlur = () => {
//     // IE11 直接就 onBlur 了 跟 Chrome不一样
//     setTimeout(() => {
//       setShowDropDown(false);
//     }, 200);
//   };
//   return (
//     <div className='titaui-dropdown-wrapper'>
//       {renderLabel}
//       <span className={classNames('tt-drop-down-wrapper', 'dropdown-container', overlayClassName)} style={style} onClick={handleShowDropDown} tabIndex={0} onBlur={handleBlur}>
//         <span className={className} style={{ lineHeight: '17px'}}>
//           {option}
//         </span>
//         <span className={classNames('tu-icon-arrow-down', showDropDown && 'dropdown-active')}></span>
//         <div className={classNames('options-wrapper', showDropDown ? 'show-dropdown' : 'hide-dropdown')} style={direction == 'up' ? {top: 'auto',bottom:'116%'} : {}}>
//           <ul ref={ulDomRef}>
//             {options.map(({ option, value }, index) => (
//               <li className='option' style={value === value ? { backgroundColor: '#f5f8fa' } : {}} ref={r => (liDomListRef.current[index] = r)} key={index} onClick={() => onUpdateValue({ value, option })}>
//                 {option}
//               </li>
//             ))}
//           </ul>
//         </div>
//       </span>
//     </div>
//   );
// }
// export default DropDownSelector;
"use strict";