chore: Update rc-trigger (#430)

* use ref hook

* update rc-trigger

* comment broken react/sort-comp eslint rule

* update trigger deps

* update doc

Author: zombieJ

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
   rules: {
     ...base.rules,
     'default-case': 0,
+    'react/sort-comp': 0,
     'jsx-a11y/interactive-supports-focus': 0,
     'jsx-a11y/no-autofocus': 0,
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],

README.md

@@ -96,7 +96,7 @@ React.render(c, container);
 |defaultValue | initial selected option(s) | String/Array<String> | - |
 |value | current selected option(s) | String/Array<String>/{key:String, label:React.Node}/Array<{key, label}> | - |
 |firstActiveValue | first active value when there is no value | String/Array<String> | - |
-|labelInValue| whether to embed label in value, see above value type | Bool | false |
+|labelInValue| whether to embed label in value, see above value type. Not support `combobox` mode | Bool | false |
 |backfill| whether backfill select option to search input (Only works in single and combobox mode) | Bool | false |
 |onChange | called when select an option or input value change(combobox) | function(value, option:Option/Array<Option>) | - |
 |onSearch | called when input changed | function | - |

package.json

@@ -41,7 +41,7 @@
   "dependencies": {
     "classnames": "2.x",
     "rc-animate": "^2.10.0",
-    "rc-trigger": "^2.6.5",
+    "rc-trigger": "^4.0.0-alpha.4",
     "rc-util": "^4.11.0",
     "rc-virtual-list": "^0.0.0-alpha.25",
     "warning": "^4.0.3"

src/SelectTrigger.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Trigger from 'rc-trigger';
 import classNames from 'classnames';
-import { RenderNode } from './interface';
+import { RenderDOMFunc } from './interface';
 
 const BUILT_IN_PLACEMENTS = {
   bottomLeft: {
@@ -40,9 +40,11 @@ export interface SelectTriggerProps {
   dropdownClassName: string;
   dropdownMatchSelectWidth?: true | number;
   dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
-  getPopupContainer?: RenderNode;
+  getPopupContainer?: RenderDOMFunc;
   dropdownAlign: object;
   empty: boolean;
+
+  getTriggerDOMNode: () => HTMLElement;
 }
 
 const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTriggerProps> = (
@@ -65,6 +67,7 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
     dropdownAlign,
     getPopupContainer,
     empty,
+    getTriggerDOMNode,
     ...restProps
   } = props;
 
@@ -106,6 +109,7 @@ const SelectTrigger: React.RefForwardingComponent<RefTriggerProps, SelectTrigger
         width:
           typeof dropdownMatchSelectWidth === 'number' ? dropdownMatchSelectWidth : containerWidth,
       }}
+      getTriggerDOMNode={getTriggerDOMNode}
     >
       {children}
     </Trigger>

src/Selector/index.tsx

@@ -75,6 +75,12 @@ export interface SelectorProps {
   onSearch: (searchValue: string) => boolean;
   onSelect: (value: RawValueType, option: { selected: boolean }) => void;
   onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+
+  /**
+   * @private get real dom for trigger align.
+   * This may be removed after React provides replacement of `findDOMNode`
+   */
+  domRef: React.Ref<HTMLDivElement>;
 }
 
 const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> = (props, ref) => {
@@ -87,6 +93,8 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
     onSearch,
     onToggleOpen,
     onInputKeyDown,
+
+    domRef,
   } = props;
 
   // ======================= Ref =======================
@@ -163,7 +171,12 @@ const Selector: React.RefForwardingComponent<RefSelectorProps, SelectorProps> =
   );
 
   return (
-    <div className={`${prefixCls}-selector`} onClick={onClick} onMouseDown={onMouseDown}>
+    <div
+      ref={domRef}
+      className={`${prefixCls}-selector`}
+      onClick={onClick}
+      onMouseDown={onMouseDown}
+    >
       {selectNode}
     </div>
   );

src/generate.tsx

@@ -12,7 +12,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import classNames from 'classnames';
 import Selector, { RefSelectorProps } from './Selector';
 import SelectTrigger, { RefTriggerProps } from './SelectTrigger';
-import { RenderNode, Mode } from './interface';
+import { RenderNode, Mode, RenderDOMFunc } from './interface';
 import {
   GetLabeledValue,
   FilterOptions,
@@ -103,7 +103,7 @@ export interface SelectProps<OptionsType extends object[], ValueType> extends Re
   dropdownAlign?: any;
   animation?: string;
   transitionName?: string;
-  getPopupContainer?: RenderNode;
+  getPopupContainer?: RenderDOMFunc;
 
   // Others
   disabled?: boolean;
@@ -333,6 +333,8 @@ export default function generateSelector<
       showSearch !== undefined ? showSearch : isMultiple || mode === 'combobox';
 
     // ============================== Ref ===============================
+    const selectorDomRef = React.useRef<HTMLDivElement>(null);
+
     React.useImperativeHandle(ref, () => ({
       focus: selectorRef.current.focus,
       blur: selectorRef.current.blur,
@@ -902,9 +904,11 @@ export default function generateSelector<
           dropdownAlign={dropdownAlign}
           getPopupContainer={getPopupContainer}
           empty={!mergedOptions.length}
+          getTriggerDOMNode={() => selectorDomRef.current}
         >
           <Selector
             {...props}
+            domRef={selectorDomRef}
             prefixCls={prefixCls}
             inputElement={customizeInputElement}
             ref={selectorRef}

src/interface/index.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Key } from './generator';
 
+export type RenderDOMFunc = (props: any) => HTMLElement;
+
 export type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
 
 export type Mode = 'multiple' | 'tags' | 'combobox';

tests/__snapshots__/Select.test.tsx.snap

@@ -27,7 +27,8 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
   </div>
   <div>
     <div
-      class="rc-select-dropdown  rc-select-dropdown-placement-bottomLeft "
+      class="rc-select-dropdown"
+      style="opacity:0"
     >
       <div>
         <div
@@ -124,7 +125,6 @@ exports[`Select.Basic filterOption could be true as described in default value 1
 >
   <div
     class="rc-select-selector"
-    style=""
   >
     <span
       class="rc-select-selection-search"
@@ -147,8 +147,8 @@ exports[`Select.Basic filterOption could be true as described in default value 1
   </div>
   <div>
     <div
-      class="rc-select-dropdown  rc-select-dropdown-placement-bottomLeft "
-      style="left: -999px; top: -995px; width: 0px;"
+      class="rc-select-dropdown"
+      style="opacity: 0; width: 0px;"
     >
       <div>
         <div
@@ -456,7 +456,8 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `
   </div>
   <div>
     <div
-      class="antd-dropdown  antd-dropdown-placement-bottomLeft "
+      class="antd-dropdown"
+      style="opacity:0"
     >
       <div>
         <div
@@ -685,7 +686,8 @@ exports[`Select.Basic should contain falsy children 1`] = `
   </div>
   <div>
     <div
-      class="rc-select-dropdown  rc-select-dropdown-placement-bottomLeft "
+      class="rc-select-dropdown"
+      style="opacity:0"
     >
       <div>
         <div
@@ -784,7 +786,6 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
 >
   <div
     class="rc-select-selector"
-    style=""
   >
     <span
       class="rc-select-selection-search"
@@ -810,8 +811,8 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
   </div>
   <div>
     <div
-      class="rc-select-dropdown  rc-select-dropdown-placement-bottomLeft "
-      style="left: -999px; top: -995px; width: 0px;"
+      class="rc-select-dropdown"
+      style="opacity: 0; width: 0px;"
     >
       <div>
         <div>

tests/__snapshots__/Tags.test.tsx.snap

@@ -7,7 +7,6 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
   >
     <div
       class="rc-select-selector"
-      style=""
     >
       <span
         class="rc-select-selection-item"
@@ -78,8 +77,8 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
     </div>
     <div>
       <div
-        class="rc-select-dropdown  rc-select-dropdown-placement-bottomLeft "
-        style="width: 0px; left: -999px; top: -995px;"
+        class="rc-select-dropdown"
+        style="width: 0px; opacity: 0;"
       >
         <div>
           <div