refactor: remove Popup component and add popup prop to Modal, close a…

…nt-design#1125
lixiaoyang1992 · Apr 26, 2018 · 6f43767 · 6f43767
1 parent 7e4c56b
commit 6f43767
Show file tree

Hide file tree

Showing 33 changed files with 182 additions and 934 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -46,6 +46,7 @@ timeline: true
   - `Modal`、`List.Item`、`Switch` use `ios` style by default, which means we will not detect UA and change the component style; [#1371](https://github.com/ant-design/ant-design-mobile/issues/1371)
   - use ref func to replace ref string [#1354](https://github.com/ant-design/ant-design-mobile/issues/1354)
   - `InputItem`, `TextareaItem` drop `focused`, `autoFocus` supported, use `focus()` instace method.
+  - 去除`Popup`组件，给`Modal`组件新增`popup`属性，相应地 Modal 组件中原`animationType`属性开始支持 web 版本、用以标识 popup 弹出动画的类型 [#1125](https://github.com/ant-design/ant-design-mobile/issues/1125)
 
 - **Theme**
   - 删除 `@fill-overlay-inverse`, `@color-shadow`, `@brand-hot`, `@font-size-display-sm`, `@font-size-display-md`, `@font-size-display-xl`, `@font-size-display-lg`,`@font-family-code`, `@font-family-base`；

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -47,6 +47,7 @@ timeline: true
   - 用 ref function 替换 ref string [#1354](https://github.com/ant-design/ant-design-mobile/issues/1354)
   - `InputItem`, `TextareaItem` 去除 `focused`, `autoFocus` api, 此需求用 `focus()` 实例方法代替。
   - 重构`Tabs`组件，底层重写，api全面更新
+  - 去除`Popup`组件，给`Modal`组件新增`popup`属性，相应地 Modal 组件中原`animationType`属性开始支持 web 版本、用以标识 popup 弹出动画的类型 [#1125](https://github.com/ant-design/ant-design-mobile/issues/1125)
 
 - **Theme**
   - 删除 `@fill-overlay-inverse`, `@color-shadow`, `@brand-hot`, `@font-size-display-sm`, `@font-size-display-md`, `@font-size-display-xl`, `@font-size-display-lg`,`@font-family-code`, `@font-family-base`；

diff --git a/components/index.native.tsx b/components/index.native.tsx
@@ -20,7 +20,6 @@ export { default as NoticeBar } from './notice-bar/index.native';
 export { default as Pagination } from './pagination/index.native';
 export { default as Picker } from './picker/index.native';
 export { default as Popover } from './popover/index.native';
-export { default as Popup } from './popup/index.native';
 export { default as Progress } from './progress/index.native';
 export { default as Radio } from './radio/index.native';
 export { default as RefreshControl } from './refresh-control/index.native';

diff --git a/components/index.tsx b/components/index.tsx
@@ -40,7 +40,6 @@ export { default as Pagination } from './pagination/index';
 export { default as Picker } from './picker/index';
 export { default as PickerView } from './picker-view/index';
 export { default as Popover } from './popover/index';
-export { default as Popup } from './popup/index';
 export { default as Progress } from './progress/index';
 
 export { default as Radio } from './radio/index';

diff --git a/components/modal/Modal.native.tsx b/components/modal/Modal.native.tsx
@@ -34,6 +34,7 @@ class AntmModal extends React.Component<IModalNativeProps, any> {
     },
     footer: [],
     transparent: false,
+    popup: false,
     animateAppear: true,
     styles: modalStyles,
     operation: false,
@@ -57,9 +58,9 @@ class AntmModal extends React.Component<IModalNativeProps, any> {
   }
 
   render() {
-    const {
+    let {
       title, closable, footer, children, style, animateAppear, maskClosable,
-      transparent, visible, onClose, bodyStyle, onAnimationEnd, operation,
+      popup, transparent, visible, onClose, bodyStyle, onAnimationEnd, operation,
     } = this.props;
 
     const styles = this.props.styles!;
@@ -149,6 +150,30 @@ class AntmModal extends React.Component<IModalNativeProps, any> {
         </View>
       );
     }
+    if (popup) {
+      let aType = 'SlideDown';
+      if (animType === 'slide-up') {
+        animType = 'slide-up';
+        aType = 'SlideUp';
+      } else {
+        animType = 'slide-down';
+      }
+      return (
+        <View style={styles.container}>
+          <RCModal
+            onClose={onClose}
+            animationType={animType}
+            style={[styles.popupContainer, styles[`popup${aType}`], style]}
+            visible={visible}
+            onAnimationEnd={onAnimationEnd}
+            animateAppear={animateAppear}
+            maskClosable={maskClosable}
+          >
+            <View ref={this.saveRoot} style={bodyStyle}>{children}</View>
+          </RCModal>
+        </View>
+      );
+    }
     if (animType === 'slide-up' || animType === 'slide-down' || animType === 'slide') {
       animType = 'slide';
     }

diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import Dialog from 'rc-dialog';
 import classNames from 'classnames';
 import { ModalProps, ModalComponent } from './PropsType';
-import omit from 'omit.js';
 import TouchFeedback from '../_util/touchFeedback';
 
 export default class Modal extends ModalComponent<ModalProps, any> {
   static defaultProps = {
     prefixCls: 'am-modal',
-    // transparent change to transparent by yiminghe
     transparent: false,
+    popup: false,
+    animationType: 'slide-down',
     animated: true,
     style: {},
     onShow() {},
@@ -70,68 +70,70 @@ export default class Modal extends ModalComponent<ModalProps, any> {
   }
 
   render() {
-    const {
-      prefixCls,
-      className,
-      transparent,
-      animated,
-      transitionName,
-      maskTransitionName,
-      style,
-      footer = [],
-      closable,
-      operation,
-      platform,
+    let {
+      prefixCls, className, wrapClassName, transitionName, maskTransitionName, style, platform,
+      footer = [], operation, animated, transparent, popup, animationType, ...restProps,
     } = this.props;
 
-    const wrapCls = classNames({
-      [className as string]: !!className,
-      [`${prefixCls}-transparent`]: transparent,
-      [`${prefixCls}-android`]: platform === 'android',
-    });
-
-    let anim = transitionName || (animated ? (transparent ? 'am-fade' : 'am-slide-up') : null);
-    let maskAnim = maskTransitionName || (animated ? (transparent ? 'am-fade' : 'am-slide-up') : null);
-
     const btnGroupClass = classNames({
       [`${prefixCls}-button-group-${footer.length === 2 && !operation ? 'h' : 'v'}`]: true,
       [`${prefixCls}-button-group-${operation ? 'operation' : 'normal'}`]: true,
     });
-
     const footerDom = footer.length ? <div className={btnGroupClass} role="group">
       {footer.map((button: any, i) => this.renderFooterButton(button, prefixCls, i))}
     </div> : null;
 
-    // transparent 模式下, 内容默认居中
-    const rootStyle = transparent ?
-      {
-        width: 270,
-        height: 'auto',
-        ...style,
-      } :
-      {
-        width: '100%',
-        height: '100%',
-        ...style,
-      };
+    // popup 模式自动禁止 transparent
+    if (popup) {
+      transparent = false;
+    }
+
+    let transName;
+    let maskTransName;
+    if (animated) {
+      if (transparent) {
+        transName = maskTransName = 'am-fade';
+      } else {
+        transName = maskTransName = 'am-slide-up';
+      }
+      if (popup) {
+        transName = animationType === 'slide-up' ? 'am-slide-up' : 'am-slide-down';
+        maskTransName = 'am-fade';
+      }
+    }
+
+    if (transparent) {
+      // transparent 模式下, 内容默认居中
+      style = { width: 270, height: 'auto', ...style };
+    } else {
+      if (!popup) {
+        style = { width: '100%', height: '100%', ...style };
+      }
+    }
 
-    const restProps = omit(this.props, [
-      'prefixCls', 'className', 'transparent', 'animated', 'transitionName', 'maskTransitionName',
-      'style', 'footer', 'touchFeedback', 'wrapProps', 'platform',
-    ]);
-    const wrapProps = { onTouchStart: e => this.isInModal(e) };
+    const wrapCls = classNames({
+      [wrapClassName as string]: !!wrapClassName,
+      [`${prefixCls}-wrap-popup`]: popup,
+    });
+    const cls = classNames({
+      [className as string]: !!className,
+      [`${prefixCls}-transparent`]: transparent,
+      [`${prefixCls}-popup`]: popup,
+      [`${prefixCls}-popup-${animationType}`]: popup && animationType,
+      [`${prefixCls}-android`]: platform === 'android',
+    });
 
     return (
       <Dialog
+        {...restProps}
         prefixCls={prefixCls}
-        className={wrapCls}
-        transitionName={anim}
-        maskTransitionName={maskAnim}
-        style={rootStyle}
+        className={cls}
+        wrapClassName={wrapCls}
+        transitionName={transitionName || transName}
+        maskTransitionName={maskTransitionName || maskTransName}
+        style={style}
         footer={footerDom}
-        wrapProps={wrapProps}
-        closable={closable}
-        {...restProps}
+        wrapProps={{ onTouchStart: e => this.isInModal(e) }}
       />
     );
   }

diff --git a/components/modal/PropsType.tsx b/components/modal/PropsType.tsx
@@ -7,8 +7,8 @@ export interface ModalProps {
   closable?: boolean;
   footer?: Array<{}>;
   onClose?: () => void;
-  /** react native only **/
   transparent?: boolean;
+  popup?: boolean;
   style?: {};
   animated?: boolean;
   bodyStyle?: {};

diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md
@@ -14,20 +14,17 @@ title:
 Basic Modal.
 
 ````jsx
-import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
+import { Modal, List, Button, WhiteSpace, WingBlank } from 'antd-mobile';
 
 class App extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       modal1: false,
       modal2: false,
-      modal3: false,
     };
   }
   showModal = key => (e) => {
-    // 现象：如果弹出的弹框上的 x 按钮的位置、和手指点击 button 时所在的位置「重叠」起来，
-    // 会触发 x 按钮的点击事件而导致关闭弹框 (注：弹框上的取消/确定等按钮遇到同样情况也会如此)
     e.preventDefault(); // 修复 Android 上点击穿透
     this.setState({
       [key]: true,
@@ -40,44 +37,49 @@ class App extends React.Component {
   }
   render() {
     return (
-      <div>
-        <WhiteSpace />
-        <WingBlank>
-          <Button onClick={this.showModal('modal2')}> Android UI </Button>
-        </WingBlank>
+      <WingBlank>
+        <Button onClick={this.showModal('modal1')}>basic</Button>
         <WhiteSpace />
         <Modal
-          title="Title"
+          visible={this.state.modal1}
           transparent
           maskClosable={false}
-          visible={this.state.modal2}
-          onClose={this.onClose('modal2')}
-          footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('modal2')(); } }]}
-          platform="android"
+          onClose={this.onClose('modal1')}
+          title="Title"
+          footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
         >
           Content...<br />
           Content...<br />
         </Modal>
-        <WingBlank>
-          <Button onClick={this.showModal('modal3')}> iOS UI</Button>
-        </WingBlank>
+
+        <Button onClick={this.showModal('modal2')}>popup</Button>
         <WhiteSpace />
         <Modal
-          title="title"
+          visible={this.state.modal2}
+          popup
           transparent
           maskClosable={false}
-          visible={this.state.modal3}
-          onClose={this.onClose('modal3')}
-          footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('modal3')(); } }]}
-          platform="ios"
+          animationType="slide-up"
         >
-          Content...<br />
-          Content...<br />
+          <List renderHeader={() => <div>委托买入</div>} className="popup-list">
+            {['股票名称', '股票代码', '买入价格'].map((i, index) => (
+              <List.Item key={index}>{i}</List.Item>
+            ))}
+            <List.Item>
+              <Button type="primary" onClick={this.onClose('modal2')}>买入</Button>
+            </List.Item>
+          </List>
         </Modal>
-      </div>
+      </WingBlank>
     );
   }
 }
 
 ReactDOM.render(<App />, mountNode);
 ````
+````css
+.popup-list .am-list-body {
+  height: 210px;
+  overflow: auto;
+}
+````