From ac216279cad285f504b3e3ac917963ec462692f4 Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Mon, 6 Jan 2020 18:56:30 +0800
Subject: [PATCH] =?UTF-8?q?Select=20=E5=A4=9A=E9=80=89=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=20tip=20=E6=B2=A1=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Select.tsx | 186 +++++++++++++++++++-------------------
 src/renderers/PopOver.tsx |  11 +--
 2 files changed, 98 insertions(+), 99 deletions(-)

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 7ffbfafc..d56788f4 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -5,24 +5,24 @@
  * @date 2017-11-07
  */
 
-import uncontrollable = require("uncontrollable");
-import React from "react";
-import "react-datetime/css/react-datetime.css";
-import Overlay from "./Overlay";
-import PopOver from "./PopOver";
-import Downshift, { ControllerStateAndHelpers } from "downshift";
-import { closeIcon, Icon } from "./icons";
+import uncontrollable = require('uncontrollable');
+import React from 'react';
+import 'react-datetime/css/react-datetime.css';
+import Overlay from './Overlay';
+import PopOver from './PopOver';
+import Downshift, {ControllerStateAndHelpers} from 'downshift';
+import {closeIcon, Icon} from './icons';
 // @ts-ignore
-import matchSorter from "match-sorter";
-import { noop, isObject } from "../utils/helper";
-import find = require("lodash/find");
-import isPlainObject = require("lodash/isPlainObject");
-import union = require("lodash/union");
-import { highlight } from "../renderers/Form/Options";
-import { findDOMNode } from "react-dom";
-import { ClassNamesFn, themeable } from "../theme";
-import Checkbox from "./Checkbox";
-import Input from "./Input";
+import matchSorter from 'match-sorter';
+import {noop, isObject} from '../utils/helper';
+import find = require('lodash/find');
+import isPlainObject = require('lodash/isPlainObject');
+import union = require('lodash/union');
+import {highlight} from '../renderers/Form/Options';
+import {findDOMNode} from 'react-dom';
+import {ClassNamesFn, themeable} from '../theme';
+import Checkbox from './Checkbox';
+import Input from './Input';
 
 export interface Option {
   label?: string;
@@ -46,7 +46,7 @@ export interface OptionProps {
   delimiter?: string;
   clearable?: boolean;
   placeholder?: string;
-  autoFill?: { [propName: string]: any };
+  autoFill?: {[propName: string]: any};
   creatable?: boolean;
   onAdd?: (
     idx?: number | Array<number>,
@@ -68,8 +68,8 @@ export function value2array(
   props: Partial<OptionProps>
 ): Array<Option> {
   if (props.multi || props.multiple) {
-    if (typeof value === "string") {
-      value = value.split(props.delimiter || ",");
+    if (typeof value === 'string') {
+      value = value.split(props.delimiter || ',');
     }
 
     if (!Array.isArray(value)) {
@@ -98,14 +98,14 @@ export function expandValue(
   const valueType = typeof value;
 
   if (
-    valueType !== "string" &&
-    valueType !== "number" &&
-    valueType !== "boolean"
+    valueType !== 'string' &&
+    valueType !== 'number' &&
+    valueType !== 'boolean'
   ) {
     return value as Option;
   }
 
-  let { options } = props;
+  let {options} = props;
 
   if (!options) {
     return null;
@@ -113,38 +113,38 @@ export function expandValue(
 
   return find(
     options,
-    optionValueCompare(value, props.valueField || "value")
+    optionValueCompare(value, props.valueField || 'value')
   ) as Option;
 }
 
 export function matchOptionValue(
   a: OptionValue,
   b: Option,
-  valueField: string = "value"
+  valueField: string = 'value'
 ) {
   return isObject(a)
-    ? a === b[valueField || "value"]
-    : String(b[valueField || "value"]) === String(a);
+    ? a === b[valueField || 'value']
+    : String(b[valueField || 'value']) === String(a);
 }
 
 export function optionValueCompare(
   a: OptionValue,
-  valueField: string = "value"
+  valueField: string = 'value'
 ) {
   return (b: Option) => matchOptionValue(a, b, valueField);
 }
 
 export function normalizeOptions(
-  options: string | { [propName: string]: string } | Array<string> | Options
+  options: string | {[propName: string]: string} | Array<string> | Options
 ): Options {
-  if (typeof options === "string") {
-    return options.split(",").map(item => ({
+  if (typeof options === 'string') {
+    return options.split(',').map(item => ({
       label: item,
       value: item
     }));
   } else if (
     Array.isArray(options as Array<string>) &&
-    typeof (options as Array<string>)[0] === "string"
+    typeof (options as Array<string>)[0] === 'string'
   ) {
     return (options as Array<string>).map(item => ({
       label: item,
@@ -157,7 +157,7 @@ export function normalizeOptions(
         value: item && item.value
       };
 
-      if (typeof option.children !== "undefined") {
+      if (typeof option.children !== 'undefined') {
         option.children = normalizeOptions(option.children);
       }
 
@@ -165,7 +165,7 @@ export function normalizeOptions(
     });
   } else if (isPlainObject(options)) {
     return Object.keys(options).map(key => ({
-      label: (options as { [propName: string]: string })[key] as string,
+      label: (options as {[propName: string]: string})[key] as string,
       value: key
     }));
   }
@@ -224,22 +224,22 @@ export class Select extends React.Component<SelectProps, SelectState> {
     multiple: false,
     clearable: true,
     creatable: false,
-    createBtnLabel: "新增选项",
-    searchPromptText: "输入内容进行检索",
-    loadingPlaceholder: "加载中..",
-    noResultsText: "未找到任何结果",
-    clearAllText: "移除所有",
-    clearValueText: "移除",
-    placeholder: "请选择",
-    valueField: "value",
-    labelField: "label",
-    spinnerClassName: "fa fa-spinner fa-spin fa-1x fa-fw",
+    createBtnLabel: '新增选项',
+    searchPromptText: '输入内容进行检索',
+    loadingPlaceholder: '加载中..',
+    noResultsText: '未找到任何结果',
+    clearAllText: '移除所有',
+    clearValueText: '移除',
+    placeholder: '请选择',
+    valueField: 'value',
+    labelField: 'label',
+    spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw',
     inline: false,
     disabled: false,
     checkAll: false,
-    checkAllLabel: "全选",
+    checkAllLabel: '全选',
     defaultCheckAll: false,
-    overlayPlacement: "auto"
+    overlayPlacement: 'auto'
   };
 
   input: HTMLInputElement;
@@ -269,7 +269,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
     this.state = {
       isOpen: props.defaultOpen || false,
       isFocused: false,
-      inputValue: "",
+      inputValue: '',
       highlightedIndex: -1,
       selection: value2array(props.value, props)
     };
@@ -284,7 +284,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       onChange,
       simpleValue
     } = this.props;
-    let { selection } = this.state;
+    let {selection} = this.state;
 
     if (multiple && defaultCheckAll && options.length) {
       selection = union(options, selection);
@@ -298,7 +298,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       onChange(simpleValue ? selection.map(item => item.value) : selection);
     }
 
-    loadOptions && loadOptions("");
+    loadOptions && loadOptions('');
   }
 
   componentWillReceiveProps(nextProps: SelectProps) {
@@ -395,8 +395,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
   }
 
   toggleCheckAll() {
-    const { options, onChange, simpleValue } = this.props;
-    let { selection } = this.state;
+    const {options, onChange, simpleValue} = this.props;
+    let {selection} = this.state;
     const optionsValues = options.map(option => option.value);
     const selectionValues = selection.map(select => select.value);
     const checkedAll = optionsValues.every(
@@ -408,11 +408,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
   }
 
   removeItem(index: number, e?: React.MouseEvent<HTMLElement>) {
-    const { onChange, simpleValue, disabled } = this.props;
+    const {onChange, simpleValue, disabled} = this.props;
     if (disabled) {
       return;
     }
-    let { selection: value } = this.state;
+    let {selection: value} = this.state;
 
     e && e.stopPropagation();
     value = Array.isArray(value) ? value.concat() : [value];
@@ -422,7 +422,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
   }
 
   handleInputChange(evt: React.ChangeEvent<HTMLInputElement>) {
-    const { loadOptions } = this.props;
+    const {loadOptions} = this.props;
 
     this.setState(
       {
@@ -433,8 +433,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
   }
 
   handleChange(selectItem: any) {
-    const { onChange, multiple, simpleValue } = this.props;
-    let { selection } = this.state;
+    const {onChange, multiple, simpleValue} = this.props;
+    let {selection} = this.state;
 
     if (multiple) {
       const selectionValues = selection.map(item => item.value);
@@ -452,7 +452,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
   }
 
   handleStateChange(changes: any) {
-    const { multiple, checkAll } = this.props;
+    const {multiple, checkAll} = this.props;
     let update: any = {};
     const loadOptions = this.props.loadOptions;
     let doLoad = false;
@@ -482,13 +482,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
     if (Object.keys(update).length) {
       this.setState(
         update,
-        doLoad && loadOptions ? () => loadOptions("") : undefined
+        doLoad && loadOptions ? () => loadOptions('') : undefined
       );
     }
   }
 
   handleKeyPress(e: React.KeyboardEvent) {
-    if (e.key === " ") {
+    if (e.key === ' ') {
       this.toggle();
     }
   }
@@ -497,29 +497,29 @@ export class Select extends React.Component<SelectProps, SelectState> {
     const onChange = this.props.onChange;
     e.preventDefault();
     e.stopPropagation();
-    onChange("");
+    onChange('');
   }
 
   handleAddClick() {
-    const { onAdd } = this.props;
+    const {onAdd} = this.props;
     onAdd && onAdd();
   }
 
   handleEditClick(e: Event, item: any) {
-    const { onEdit } = this.props;
+    const {onEdit} = this.props;
     e.preventDefault();
     e.stopPropagation();
     onEdit && onEdit(item);
   }
 
   handleDeleteClick(e: Event, item: any) {
-    const { onDelete } = this.props;
+    const {onDelete} = this.props;
     e.preventDefault();
     e.stopPropagation();
     onDelete && onDelete(item);
   }
 
-  renderValue({ inputValue, isOpen }: ControllerStateAndHelpers<any>) {
+  renderValue({inputValue, isOpen}: ControllerStateAndHelpers<any>) {
     const {
       multiple,
       placeholder,
@@ -542,18 +542,18 @@ export class Select extends React.Component<SelectProps, SelectState> {
       multiple ? (
         <div className={`${ns}Select-value`} key={index}>
           <span
-            className={`${ns}Select-valueIcon ${disabled ? "is-disabled" : ""}`}
+            className={`${ns}Select-valueIcon ${disabled ? 'is-disabled' : ''}`}
             onClick={this.removeItem.bind(this, index)}
           >
             ×
           </span>
           <span className={`${ns}Select-valueLabel`}>
-            {item[labelField || "label"]}
+            {item[labelField || 'label']}
           </span>
         </div>
       ) : (
         <div className={`${ns}Select-value`} key={index}>
-          {item[labelField || "label"]}
+          {item[labelField || 'label']}
         </div>
       )
     );
@@ -588,14 +588,14 @@ export class Select extends React.Component<SelectProps, SelectState> {
       removable,
       overlayPlacement
     } = this.props;
-    const { selection } = this.state;
+    const {selection} = this.state;
 
     let checkedAll = false;
     let checkedPartial = false;
     let filtedOptions: Array<Option> =
       inputValue && isOpen && !loadOptions
         ? matchSorter(options, inputValue, {
-            keys: [labelField || "label", valueField || "value"]
+            keys: [labelField || 'label', valueField || 'value']
           })
         : options.concat();
 
@@ -612,11 +612,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
     }
 
     const menu = (
-      <div ref={this.menu} className={cx("Select-menu")}>
+      <div ref={this.menu} className={cx('Select-menu')}>
         {searchable ? (
           <div
             className={cx(`Select-input`, {
-              "is-focused": this.state.isFocused
+              'is-focused': this.state.isFocused
             })}
           >
             <Icon icon="search" className="icon" />
@@ -634,7 +634,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
         ) : null}
 
         {multiple && checkAll && filtedOptions.length ? (
-          <div className={cx("Select-option")}>
+          <div className={cx('Select-option')}>
             <Checkbox
               checked={checkedPartial}
               partial={checkedPartial && !checkedAll}
@@ -654,7 +654,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
               <div
                 {...getItemProps({
                   key:
-                    typeof item.value === "string"
+                    typeof item.value === 'string'
                       ? `${item.label}-${item.value}`
                       : index,
                   index,
@@ -662,9 +662,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
                   disabled: item.disabled
                 })}
                 className={cx(`Select-option`, {
-                  "is-disabled": item.disabled,
-                  "is-highlight": highlightedIndex === index,
-                  "is-active": checked
+                  'is-disabled': item.disabled,
+                  'is-highlight': highlightedIndex === index,
+                  'is-active': checked
                 })}
               >
                 {removable ? (
@@ -699,8 +699,10 @@ export class Select extends React.Component<SelectProps, SelectState> {
                       : highlight(
                           item[labelField],
                           inputValue as string,
-                          cx("Select-option-hl")
+                          cx('Select-option-hl')
                         )}
+
+                    {item.tip}
                   </Checkbox>
                 ) : (
                   <span>
@@ -709,7 +711,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                       : highlight(
                           item[labelField],
                           inputValue as string,
-                          cx("Select-option-hl")
+                          cx('Select-option-hl')
                         )}
                     {item.tip}
                   </span>
@@ -718,11 +720,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
             );
           })
         ) : (
-          <div className={cx("Select-noResult")}>{noResultsText}</div>
+          <div className={cx('Select-noResult')}>{noResultsText}</div>
         )}
 
         {creatable && !disabled ? (
-          <a className={cx("Select-addBtn")} onClick={this.handleAddClick}>
+          <a className={cx('Select-addBtn')} onClick={this.handleAddClick}>
             <Icon icon="plus" className="icon" />
             {createBtnLabel}
           </a>
@@ -739,8 +741,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
       >
         <PopOver
           overlay
-          className={cx("Select-popover")}
-          style={{ minWidth: this.target ? this.target.offsetWidth : "auto" }}
+          className={cx('Select-popover')}
+          style={{minWidth: this.target ? this.target.offsetWidth : 'auto'}}
           onHide={this.close}
         >
           {menu}
@@ -781,10 +783,10 @@ export class Select extends React.Component<SelectProps, SelectState> {
             : this.handleChange
         }
         onStateChange={this.handleStateChange}
-        itemToString={item => (item ? item[labelField] : "")}
+        itemToString={item => (item ? item[labelField] : '')}
       >
         {(options: ControllerStateAndHelpers<any>) => {
-          const { isOpen } = options;
+          const {isOpen} = options;
           return (
             <div
               tabIndex={disabled ? -1 : 0}
@@ -798,9 +800,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
                   [`Select--multi`]: multiple,
                   [`Select--inline`]: inline,
                   [`Select--searchable`]: searchable,
-                  "is-opened": isOpen,
-                  "is-focused": this.state.isFocused,
-                  "is-disabled": disabled
+                  'is-opened': isOpen,
+                  'is-focused': this.state.isFocused,
+                  'is-disabled': disabled
                 },
                 className
               )}
@@ -809,17 +811,17 @@ export class Select extends React.Component<SelectProps, SelectState> {
                 {this.renderValue(options)}
               </div>
               {clearable && !disabled && value && value.length ? (
-                <a onClick={this.clearValue} className={cx("Select-clear")}>
+                <a onClick={this.clearValue} className={cx('Select-clear')}>
                   <Icon icon="close" className="icon" />
                 </a>
               ) : null}
               {loading ? (
-                <span className={cx("Select-spinner")}>
+                <span className={cx('Select-spinner')}>
                   <i className={spinnerClassName} />
                 </span>
               ) : null}
 
-              <span className={cx("Select-arrow")} />
+              <span className={cx('Select-arrow')} />
               {isOpen ? this.renderOuter(options) : null}
             </div>
           );
@@ -831,6 +833,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
 export default themeable(
   uncontrollable(Select, {
-    value: "onChange"
+    value: 'onChange'
   })
 );
diff --git a/src/renderers/PopOver.tsx b/src/renderers/PopOver.tsx
index a4df5ce3..fb3308c3 100644
--- a/src/renderers/PopOver.tsx
+++ b/src/renderers/PopOver.tsx
@@ -12,8 +12,6 @@ import {RootCloseWrapper} from 'react-overlays';
 import PopOver, {Offset} from '../components/PopOver';
 import Overlay from '../components/Overlay';
 
-const allowedPositions = ['center', 'top'];
-
 export interface PopOverConfig {
   saveImmediately?: boolean;
   mode?: 'dialog' | 'drawer' | 'popOver';
@@ -30,8 +28,8 @@ export interface PopOverConfig {
     | 'fixed-right-top'
     | 'fixed-left-bottom'
     | 'fixed-right-bottom';
+  offset?: Offset;
   [propName: string]: any;
-  offset: Offset;
 }
 
 export interface PopOverProps extends RendererProps {
@@ -159,6 +157,7 @@ export const HocPopOver = (config: Partial<PopOverConfig> = {}) => (
       const isFixed = /^fixed\-/.test(position);
 
       return isFixed ? (
+        // @ts-ignore
         <RootCloseWrapper
           disabled={!this.state.isOpened}
           onRootClose={this.closePopOver}
@@ -179,7 +178,7 @@ export const HocPopOver = (config: Partial<PopOverConfig> = {}) => (
           <PopOver
             classPrefix={ns}
             className={cx('PopOverAble-popover')}
-            offset={popOver.offset}
+            offset={(popOver as PopOverConfig).offset}
           >
             {content}
           </PopOver>
@@ -189,13 +188,11 @@ export const HocPopOver = (config: Partial<PopOverConfig> = {}) => (
 
     render() {
       const {
-        onQuickChange,
         popOver,
         popOverEnabled,
         className,
         noHoc,
-        classnames: cx,
-        render
+        classnames: cx
       } = this.props;
 
       if (!popOver || popOverEnabled === false || noHoc) {