feat: 为部分组件的显隐增加动画效果

NSFI · Oct 15, 2021 · 6d00def · 6d00def
1 parent e773eec
commit 6d00def
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 38 deletions.
diff --git a/source/components/ColorPicker/ColorPicker.tsx b/source/components/ColorPicker/ColorPicker.tsx
@@ -109,6 +109,7 @@ class ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {
     prefixCls: 'fishd-color-picker',
     quickMode: false,
     style: {},
+    transitionName: 'slide-up',
     popupStyle: {},
     esc: true,
   };
@@ -167,7 +168,7 @@ class ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {
     if (this.state.visible) {
       setTimeout(() => {
         panelDOMRef.focus();
-      }, 0);
+      }, 50);
     }
   };
 

diff --git a/source/components/ColorPicker/QuickPanel.tsx b/source/components/ColorPicker/QuickPanel.tsx
@@ -189,7 +189,7 @@ class QuickPanel extends React.Component<QuickPanelProps, QuickPanelState> {
     if (this.state.visible) {
       setTimeout(() => {
         panelDOMRef.focus();
-      }, 0);
+      }, 50);
     }
   };
 
@@ -321,6 +321,7 @@ class QuickPanel extends React.Component<QuickPanelProps, QuickPanelState> {
                   <div className={`${prefixCls}-inner`}>{this.getPickerElement()}</div>
                 </div>
               }
+              popupTransitionName="slide-up"
               builtinPlacements={placements}
               popupPlacement={'topCenter'}
               action={disabled ? [] : ['click']}

diff --git a/source/components/DatePicker/BasePicker.tsx b/source/components/DatePicker/BasePicker.tsx
@@ -489,6 +489,7 @@ class BasePicker extends React.Component<BasePickerProps, BasePickerState> {
         onPopupVisibleChange={this.onVisibleChange}
         popup={getPickerPanel() as unknown}
         popupPlacement={placement}
+        popupTransitionName="slide-up"
         popupVisible={pickerVisible}
         prefixCls={`${prefixCls}-date-time-picker-popup`}
         destroyPopupOnHide={true}

diff --git a/source/components/DatePicker/DateRangeBasePicker.tsx b/source/components/DatePicker/DateRangeBasePicker.tsx
@@ -538,6 +538,7 @@ class DateRangeBasePicker extends React.Component<
               onPopupVisibleChange={this.onVisibleChange}
               popup={getPickerPanel() as unknown}
               popupPlacement={placement}
+              popupTransitionName="slide-up"
               popupVisible={pickerVisible}
               prefixCls={`${prefixCls}-date-time-picker-popup`}
               destroyPopupOnHide={true}

diff --git a/source/components/DatePicker/panel/YearAndMonthPopover.js b/source/components/DatePicker/panel/YearAndMonthPopover.js
@@ -84,7 +84,7 @@ export default class YearAndMonthPopover extends React.Component {
 
     return (
       <Popover
-        transitionName={''}
+        transitionName="slide-up"
         content={content()}
         trigger="click"
         placement="bottom"

diff --git a/source/components/Select/Select.tsx b/source/components/Select/Select.tsx
@@ -432,7 +432,7 @@ class Select extends React.Component<SelectProps, SelectState> {
         ? this.selectSearch && this.selectSearch.searchInput.input
         : this.selection;
       targetElement && targetElement[event]();
-    }, 100);
+    }, 50);
   };
 
   // 聚焦
@@ -1068,6 +1068,7 @@ class Select extends React.Component<SelectProps, SelectState> {
         popupVisible={popupVisible}
         prefixCls={`${prefixCls}-popup`}
         popupStyle={popupStyle}
+        popupTransitionName="slide-up"
       >
         {this.getSelectionPanel(Locale)}
       </Trigger>

diff --git a/source/components/TreeSelect/rcTreeSelect/SearchInput.js b/source/components/TreeSelect/rcTreeSelect/SearchInput.js
@@ -7,8 +7,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {polyfill} from 'react-lifecycles-compat';
-import {createRef} from './util';
+import { polyfill } from 'react-lifecycles-compat';
+import { createRef } from './util';
 import classNames from 'classnames';
 
 export const searchContextTypes = {
@@ -33,8 +33,8 @@ class SearchInput extends React.Component {
   };
 
   static getDerivedStateFromProps(nextProps, prevState) {
-    const newState = {prevProps: nextProps};
-    const {prevProps = {}} = prevState;
+    const newState = { prevProps: nextProps };
+    const { prevProps = {} } = prevState;
     if (nextProps.searchValue != prevProps.searchValue) {
       newState.showClear = !!nextProps.searchValue;
     }
@@ -47,12 +47,12 @@ class SearchInput extends React.Component {
     this.inputRef = createRef();
     this.mirrorInputRef = createRef();
     this.state = {
-      showClear: !!this.props.searchValue
+      showClear: !!this.props.searchValue,
     };
   }
 
   componentDidMount() {
-    const {open, needAlign} = this.props;
+    const { open, needAlign } = this.props;
     if (needAlign) {
       this.alignInputWidth();
     }
@@ -63,7 +63,7 @@ class SearchInput extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const {open, searchValue, needAlign} = this.props;
+    const { open, searchValue, needAlign } = this.props;
 
     if (open && prevProps.open !== open) {
       this.focus();
@@ -79,21 +79,17 @@ class SearchInput extends React.Component {
    * ref: https://github.com/react-component/tree-select/issues/65
    */
   alignInputWidth = () => {
-    this.inputRef.current.style.width =
-      `${this.mirrorInputRef.current.clientWidth}px`;
+    this.inputRef.current.style.width = `${this.mirrorInputRef.current.clientWidth}px`;
   };
 
   /**
    * Need additional timeout for focus cause parent dom is not ready when didMount trigger
    */
-  focus = (isDidMount) => {
+  focus = () => {
     if (this.inputRef.current) {
-      this.inputRef.current.focus();
-      if (isDidMount) {
-        setTimeout(() => {
-          this.inputRef.current.focus();
-        }, 0);
-      }
+      setTimeout(() => {
+        this.inputRef.current.focus();
+      }, 50);
     }
   };
 
@@ -107,35 +103,37 @@ class SearchInput extends React.Component {
     let r = this.inputRef;
     r.current.value = '';
 
-    this.handleInputChange({target: {value: ''}});
+    this.handleInputChange({ target: { value: '' } });
   };
 
-  handleInputChange = (e) => {
-    const {rcTreeSelect: {onSearchInputChange, onSearchInputKeyDown}} = this.context;
-    let {target: {value}} = e;
+  handleInputChange = e => {
+    const {
+      rcTreeSelect: { onSearchInputChange, onSearchInputKeyDown },
+    } = this.context;
+    let {
+      target: { value },
+    } = e;
 
     if (value) {
-      this.setState({showClear: true});
+      this.setState({ showClear: true });
     } else {
-      this.setState({showClear: false});
+      this.setState({ showClear: false });
     }
 
     onSearchInputChange(e);
   };
 
   render() {
-    const {searchValue, prefixCls, disabled, renderPlaceholder, open, ariaId} = this.props;
+    const { searchValue, prefixCls, disabled, renderPlaceholder, open, ariaId } = this.props;
     const {
-      rcTreeSelect: {
-        onSearchInputChange, onSearchInputKeyDown,
-      }
+      rcTreeSelect: { onSearchInputChange, onSearchInputKeyDown },
     } = this.context;
-    const {showClear} = this.state;
+    const { showClear } = this.state;
 
     let clearIconClass = classNames({
-      'hide': !showClear,
+      hide: !showClear,
       'select-clear-icon': true,
-      [`${prefixCls}-selection__clear`]: true
+      [`${prefixCls}-selection__clear`]: true,
     });
 
     return (
@@ -148,16 +146,12 @@ class SearchInput extends React.Component {
           value={searchValue}
           disabled={disabled}
           className={`${prefixCls}-search__field`}
-
           aria-label="filter select"
           aria-autocomplete="list"
           aria-controls={open ? ariaId : undefined}
           aria-multiline="false"
         />
-        <span
-          ref={this.mirrorInputRef}
-          className={`${prefixCls}-search__field__mirror`}
-        >
+        <span ref={this.mirrorInputRef} className={`${prefixCls}-search__field__mirror`}>
           {searchValue}&nbsp;
         </span>