AntD Select + AutoComplete

简单介绍一下 AntD Select 的用法

mode: undefined, tag, multiple

• undefine: 默认值，就是dropdown,
• tag: 跟multple 唯一的区别就是，输入的值不在list 内，敲回车，自动插入.
• multiple, 就是多值选择。

一些约定

• showSearch: 看这段代码 const mergedShowSearch = showSearch !== undefined ? showSearch : isMultiple || mode === 'combobox'; 结论: 如果显示设置，优先级最高，隐含的其次，也就是 tags, multiple, combobox 也是可以showSearch.
  • 类似的开关还有很多，例如： showArrow 在其他的组件中，这个约定也是类似的。当然这些开关只是第一层，开关，默认有这个开关就可以打开，但是也有一些相关的属性进一步控制这个开关，例如 filterOption=false 就可以关闭search的功能，这个在SearchBox 或者Email 这种组件中使用。例如以下代码，尽管，我们打开了showSearch 开关，但是我们通过filterOption={false}关闭了该功能，我们通过onSearchevent来刷新options。

const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
<Select
        showSearch
        value={this.state.value}
        placeholder={this.props.placeholder}
        showArrow={false}
        filterOption={false}
        onSearch={this.handleSearch}
        onChange={this.handleChange}
        notFoundContent={null}
      >
        {options}
      </Select>

谈谈 Select 里面的animation.

首先，我们可以通过transitionName 参数来提供一个transtionName, 看这段代码：transitionName={getTransitionName(rootPrefixCls, 'slide-up', props.transitionName)}, 如果不提供，默认就是slide-up 这个transitionName,
第一个问题，这个transtionName 有神马用途，或者，用它会发生什么，首先它会传递个CSSMotion ，如果有同学对CSSMotion 不理解，参考CSSMotion.
简单说一下，下来菜单在展开或者关闭的过程，className 会如此变化。

• 展开
  • .ant-slide-up-enter(Dom 已经存在) 或者 .ant-slide-up-appear（Dom 刚刚创建）
  • .ant-slide-up-enter-(prepare/start/active) 依次发生变化, 一般我们只关心start 与active
  • 最后动画结束，与动画相关的类名全部移除。
• 关闭
  • .ant-slide-leave
  • .ant-slide-up-leave-(parepare/start/active) 依次发生，同样，我们只关心start 跟active
  • 最后动画结束，与动画相关的类名全部移除，附加上ant-select-dropdown-hidden 类.

下面是slide-up 相关的css ，变化的就是opacity 跟 transform 两个属性

.motion-common(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.motion-common-leave(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  .@{className}-enter,
  .@{className}-appear {
    .motion-common(@duration);

    animation-play-state: paused;
  }
  .@{className}-leave {
    .motion-common-leave(@duration);

    animation-play-state: paused;
  }
  .@{className}-enter.@{className}-enter-active,
  .@{className}-appear.@{className}-appear-active {
    animation-name: ~'@{keyframeName}In';
    animation-play-state: running;
  }
  .@{className}-leave.@{className}-leave-active {
    animation-name: ~'@{keyframeName}Out';
    animation-play-state: running;
    pointer-events: none;
  }
}


.slide-motion(@className, @keyframeName) {
  @name: ~'@{ant-prefix}-@{className}';
  .make-motion(@name, @keyframeName);
  .@{name}-enter,
  .@{name}-appear {
    opacity: 0;
    animation-timing-function: @ease-out-quint;
  }
  .@{name}-leave {
    animation-timing-function: @ease-in-quint;
  }
}

.slide-motion(slide-up, antSlideUp);
@keyframes antSlideUpIn {
  0% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

谈谈Select 里面的Option OptionGroup

首先，Rc-Select 里面的Option 类型是 export type OptionsType = (OptionData | OptionGroupData)[]; 我们来看一下代码片段。

export interface OptionCoreData {
  key?: Key;
  disabled?: boolean;
  value: Key;
  title?: string;
  className?: string;
  style?: React.CSSProperties;
  label?: React.ReactNode;
  /** @deprecated Only works when use `children` as option data */
  children?: React.ReactNode;
}

export interface OptionData extends OptionCoreData {
  /** Save for customize data */
  [prop: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
}

export interface OptionGroupData {
  key?: Key;
  label?: React.ReactNode;
  options: OptionData[];
  className?: string;
  style?: React.CSSProperties;

  /** Save for customize data */
  [prop: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
}

export type OptionsType = (OptionData | OptionGroupData)[];

同时Select 暴露出了Option, OptGroup 来用于提供Options, 常用于AntD Select. 看一下OptGroup类型定义. 它没有Options 属性。Options 直接来源于children.

export interface OptGroupProps extends Omit<OptionGroupData, 'options'> {
  children?: React.ReactNode;
}

export interface OptionGroupFC extends React.FC<OptGroupProps> {
  /** Legacy for check if is a Option Group */
  isSelectOptGroup: boolean;
}

const OptGroup: OptionGroupFC = () => null;
OptGroup.isSelectOptGroup = true;

export default OptGroup;

这个是Option的定义，它没有label这个属性，label 直接来源于children.

export interface OptionProps extends Omit<OptionCoreData, 'label'> {
  children: React.ReactNode;

  /** Save for customize data */
  [prop: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
}

export interface OptionFC extends React.FC<OptionProps> {
  /** Legacy for check if is a Option Group */
  isSelectOption: boolean;
}

/** This is a placeholder, not real render in dom */
const Option: OptionFC = () => null;
Option.isSelectOption = true;

export default Option;

对于AutoComplete 这个组件，它也是基于Select 来做的，它的Options 是通过Options这个属性来提供的，它的代码片段如下

export interface DataSourceItemObject {
  value: string;
  text: string;
}
export type DataSourceItemType = DataSourceItemObject | React.ReactNode;

export interface AutoCompleteProps
  extends Omit<
    InternalSelectProps<string>,
    'inputIcon' | 'loading' | 'mode' | 'optionLabelProp' | 'labelInValue'
  > {
  dataSource?: DataSourceItemType[];
}

那么对于分组这种情况，它的Options 应该张这样

[
    {label:xxx,options:[xxx,xxx,...]},
    {label:xxx,options:[xxx,xxx,...]},
    {label:xxx,options:[xxx,xxx,...]},
    {label:xxx,options:[xxx,xxx,...]},
]

对于未分组的情况，它的Options 应该长这样

[
    {label:xx,value:xxx,key:xxx},
    {label:xx,value:xxx,key:xxx},
    {label:xx,value:xxx,key:xxx},
    {label:xx,value:xxx,key:xxx},
    ...
]

在Rc-Select/utils/valueUtil.tsx 里面有这个函数flattenOptions 来解析以上这些数据结构.

export function flattenOptions(options: SelectOptionsType): FlattenOptionData[] {
  const flattenList: FlattenOptionData[] = [];

  function dig(list: SelectOptionsType, isGroupOption: boolean) {
    list.forEach((data) => {
      if (isGroupOption || !('options' in data)) {
        // Option
        flattenList.push({
          key: getKey(data, flattenList.length),
          groupOption: isGroupOption,
          data,
        });
      } else {
        // Option Group
        flattenList.push({
          key: getKey(data, flattenList.length),
          group: true,
          data,
        });

        dig(data.options, true);
      }
    });
  }

  dig(options, false);

  return flattenList;
}