refactor: upgrade rc-trigger (#18)

* refactor: upgrade rc-trigger

* fix lint fail

* upgrade rc-menu and define KeywordTriggerProps children type

* fix textarea example transitionName fail

* update package.json

* v1.0.0-alpha.0

Author: shaodahong

examples/textarea.js

@@ -22,7 +22,7 @@ export default () => (
     </Mentions>
 
     <div style={{ paddingTop: 200 }}>
-      <Mentions placeholder="placement: top" placement="top" transitionName="motion">
+      <Mentions placeholder="placement: top" placement="top" transitionName="motion-zoom">
         <Option value="light">Light</Option>
         <Option value="bamboo">Bamboo</Option>
         <Option value="cat">Cat</Option>

examples/textarea.less

@@ -1,3 +1,55 @@
 .motion {
-  transform: scale(.3);
+
+  .effect() {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+  }
+
+  &-zoom-enter,&-zoom-appear {
+    opacity: 0;
+    .effect();
+    animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+    animation-play-state: paused;
+  }
+
+  &-zoom-leave {
+    .effect();
+    animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+    animation-play-state: paused;
+  }
+
+  &-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active {
+    animation-name: rcTriggerZoomIn;
+    animation-play-state: running;
+  }
+
+  &-zoom-leave&-zoom-leave-active {
+    animation-name: rcTriggerZoomOut;
+    animation-play-state: running;
+  }
+
+  @keyframes rcTriggerZoomIn {
+    0% {
+      opacity: 0;
+      transform-origin: 50% 50%;
+      transform: scale(0, 0);
+    }
+    100% {
+      opacity: 1;
+      transform-origin: 50% 50%;
+      transform: scale(1, 1);
+    }
+  }
+  @keyframes rcTriggerZoomOut {
+    0% {
+      opacity: 1;
+      transform-origin: 50% 50%;
+      transform: scale(1, 1);
+    }
+    100% {
+      opacity: 0;
+      transform-origin: 50% 50%;
+      transform: scale(0, 0);
+    }
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-mentions",
-  "version": "0.4.1",
+  "version": "1.0.0-alpha.0",
   "description": "React Mentions",
   "keywords": [
     "react",
@@ -29,7 +29,7 @@
     "start": "father doc dev --storybook",
     "build": "father doc build --storybook",
     "compile": "father build",
-    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish",
+    "prepublishOnly": "npm run compile && np --no-cleanup --yolo --no-publish --any-branch",
     "lint": "eslint src/ --ext .tsx,.ts",
     "test": "father test",
     "now-build": "npm run build"
@@ -55,9 +55,8 @@
   "dependencies": {
     "@ant-design/create-react-context": "^0.2.4",
     "classnames": "^2.2.6",
-    "rc-menu": "^7.4.22",
-    "rc-trigger": "^2.6.2",
-    "rc-util": "^4.6.0",
-    "react-lifecycles-compat": "^3.0.4"
+    "rc-menu": "^8.0.0-alpha.2",
+    "rc-trigger": "^4.0.0-alpha.4",
+    "rc-util": "^4.6.0"
   }
 }

src/DropdownMenu.tsx

@@ -28,7 +28,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
       <Menu
         prefixCls={`${prefixCls}-menu`}
         activeKey={activeOption.value}
-        onSelect={({ key }: { key: string }) => {
+        onSelect={({ key }) => {
           const option = options.find(({ value }) => value === key);
           selectOption(option);
         }}

src/KeywordTrigger.tsx

@@ -31,6 +31,7 @@ interface KeywordTriggerProps {
   placement?: Placement;
   visible?: boolean;
   transitionName?: string;
+  children?: React.ReactElement;
   getPopupContainer?: () => HTMLElement;
 }
 

src/Mentions.tsx

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
-import { polyfill } from 'react-lifecycles-compat';
 import KeywordTrigger from './KeywordTrigger';
 import { MentionsContextProvider } from './MentionsContext';
 import Option, { OptionProps } from './Option';
@@ -57,6 +56,12 @@ interface MentionsState {
 class Mentions extends React.Component<MentionsProps, MentionsState> {
   public static Option = Option;
 
+  public textarea?: HTMLTextAreaElement;
+
+  public measure?: HTMLDivElement;
+
+  public focusId: number | undefined = undefined;
+
   public static defaultProps = {
     prefixCls: 'rc-mentions',
     prefix: '@',
@@ -77,12 +82,6 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     return newState;
   }
 
-  public textarea?: HTMLTextAreaElement;
-
-  public measure?: HTMLDivElement;
-
-  public focusId: number | undefined = undefined;
-
   constructor(props: MentionsProps) {
     super(props);
     this.state = {
@@ -399,6 +398,4 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
   }
 }
 
-polyfill(Mentions);
-
 export default Mentions;

typings/index.d.ts

@@ -1,4 +1 @@
-declare module 'react-lifecycles-compat';
-declare module 'rc-trigger';
 declare module 'rc-util/*';
-declare module 'rc-menu';