Modal.operation (#925)

* Modal.operation

components/modal/Modal.tsx

@@ -30,6 +30,7 @@ class AntmModal extends React.Component<ModalPropsType, any> {
     transparent: false,
     animateAppear: true,
     styles: modalStyle,
+    operation: false,
   };
 
   root: any;
@@ -55,12 +56,12 @@ class AntmModal extends React.Component<ModalPropsType, any> {
   render() {
     const {
       title, closable, footer, children, style, animateAppear,
-      transparent, visible, onClose, bodyStyle, onAnimationEnd, styles,
+      transparent, visible, onClose, bodyStyle, onAnimationEnd, styles, operation,
     } = this.props;
 
     let btnGroupStyle = styles.buttonGroupV;
     let horizontalFlex = {};
-    if (footer && footer.length === 2) {
+    if (footer && footer.length === 2 && !operation) {
       btnGroupStyle = styles.buttonGroupH;
       horizontalFlex = { flex: 1 };
     }
@@ -69,6 +70,9 @@ class AntmModal extends React.Component<ModalPropsType, any> {
     if (footer && footer.length) {
       const footerButtons = footer.map((button: any, i) => {
         let buttonStyle = {};
+        if (operation) {
+          buttonStyle = styles.buttonTextOperation;
+        }
         if (button.style) {
           buttonStyle = button.style;
           if (typeof buttonStyle === 'string') {

components/modal/Modal.web.tsx

@@ -14,6 +14,7 @@ export default class Modal extends React.Component<ModalProps, any> {
     style: {},
     onShow() {},
     footer: [],
+    operation: false,
   };
 
   isInModal(e) {
@@ -73,6 +74,7 @@ export default class Modal extends React.Component<ModalProps, any> {
       maskTransitionName,
       style,
       footer = [],
+      operation,
     } = this.props;
 
     const wrapCls = classNames({
@@ -84,7 +86,7 @@ export default class Modal extends React.Component<ModalProps, any> {
     let anim = transitionName || (animated ? (transparent ? 'am-fade' : 'am-slide-up') : null);
     let maskAnim = maskTransitionName || (animated ? (transparent ? 'am-fade' : 'am-slide-up') : null);
 
-    const btnGroupClass = `${prefixCls}-button-group-${footer.length === 2 ? 'h' : 'v'}`;
+    const btnGroupClass = `${prefixCls}-button-group-${footer.length === 2 && !operation ? 'h' : 'v'}`;
     const footerDom = footer.length ? <div className={btnGroupClass}>
       {footer.map((button: any, i) => this.renderFooterButton(button, prefixCls, i))}
     </div> : null;

components/modal/OperationContainer.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import Modal from './Modal';
+import modalStyle from './style/index';
+
+export type OperationButtonType = {
+  text: string;
+  onPress?: () => void;
+  style?: any;
+};
+
+export interface OperationContainerProps {
+  actions: Array<OperationButtonType>;
+  onAnimationEnd?: (visible: boolean) => void;
+};
+
+export default class OperationContainer extends React.Component<OperationContainerProps, any> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: true,
+    };
+  }
+
+  onClose= () => {
+    this.setState({
+      visible: false,
+    });
+  }
+
+  render() {
+    const { actions, onAnimationEnd } = this.props;
+    const footer = actions.map((button) => {
+      const orginPress = button.onPress || function () {};
+      button.onPress = () => {
+        const res = orginPress();
+        if (res && (res as any).then) {
+          (res as any).then(() => {
+            this.onClose();
+          });
+        } else {
+          this.onClose();
+        }
+      };
+      return button;
+    });
+    return (
+      <Modal
+        operation
+        transparent
+        maskClosable
+        visible={this.state.visible}
+        onClose={this.onClose}
+        onAnimationEnd={onAnimationEnd}
+        style={modalStyle.operationContainer}
+        bodyStyle={modalStyle.operationBody}
+        footer={footer}
+      />
+    );
+  }
+}

components/modal/PropsType.tsx

@@ -22,6 +22,7 @@ interface ModalProps {
   wrapClassName?: string;
   touchFeedback?: boolean;
   wrapProps?: {};
+  operation?: boolean;
 };
 
 export default ModalProps;

components/modal/demo/basic.tsx

@@ -47,6 +47,13 @@ export default class BasicModalExample extends React.Component<any, any> {
     );
   }
 
+  onButtonClick2 = () => {
+    Modal.operation([
+      { text: '标为未读', onPress: () => console.log('标为未读被点击了') },
+      { text: '置顶聊天', onPress: () => console.log('置顶聊天被点击了') },
+    ]);
+  }
+
   render() {
     const footerButtons = [
       { text: 'Cancel', onPress: () => console.log('cancel') },
@@ -60,6 +67,8 @@ export default class BasicModalExample extends React.Component<any, any> {
           <Button onClick={this.showModal2}>显示全屏对话框</Button>
           <WhiteSpace />
           <Button onClick={this.onButtonClick}>显示 Modal.alert</Button>
+          <WhiteSpace />
+          <Button onClick={this.onButtonClick2}>显示 Modal.opertation</Button>
         </WingBlank>
         <Modal
           transparent={false}

components/modal/demo/operation.md

@@ -0,0 +1,29 @@
+---
+order: 3
+title: 
+  zh-CN: 操作
+  en-US: operation
+---
+
+操作对话框
+
+````jsx
+import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
+
+const operation = Modal.operation;
+
+const App = () => (
+  <WingBlank size="lg">
+    <WhiteSpace size="lg" />
+    <Button onClick={() => operation([
+      { text: '标为未读', onPress: () => console.log('标为未读被点击了') },
+      { text: '置顶聊天', onPress: () => console.log('置顶聊天被点击了') },
+    ])}
+    >操作按钮</Button>
+    <WhiteSpace size="lg" />
+  </WingBlank>
+);
+
+ReactDOM.render(<App />, mountNode);
+
+````

components/modal/index.tsx

@@ -1,7 +1,9 @@
 import Modal from './Modal';
 import alert from './alert';
+import operation from './operation';
 
 (Modal as any).alert = alert;
+(Modal as any).operation = operation;
 
 (Modal as any).prompt = () => {
   console.warn('Modal.prompt is on the road, use react native "AlertIOS" temporarily');

components/modal/index.web.tsx

@@ -1,8 +1,10 @@
 import Modal from './Modal';
 import alert from './alert.web';
 import prompt from './prompt.web';
+import operation from './operation.web';
 
 (Modal as any).alert = alert;
 (Modal as any).prompt = prompt;
+(Modal as any).operation = operation;
 
 export default Modal;

components/modal/operation.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import topView from 'rn-topview';
+import OperationContainer from './OperationContainer';
+
+export default function (...args) {
+  const actions = args[0] || [{ text: '确定' }];
+
+  const onAnimationEnd = (visible) => {
+    if (!visible) {
+      topView.remove();
+    }
+  };
+
+  topView.set(
+    <OperationContainer
+      actions={actions}
+      onAnimationEnd={onAnimationEnd}
+    />,
+  );
+}

components/modal/operation.web.tsx

@@ -0,0 +1,49 @@
+/* tslint:disable:no-unused-variable */
+import React from 'react';
+/* tslint:enable:no-unused-variable */
+import ReactDOM from 'react-dom';
+import Modal from './Modal';
+
+export default function (...args) {
+  const actions = args[0] || [{ text: '确定' }];
+
+  const prefixCls = 'am-modal';
+  let div: any = document.createElement('div');
+  document.body.appendChild(div);
+
+  function close() {
+    ReactDOM.unmountComponentAtNode(div);
+    div.parentNode.removeChild(div);
+  }
+
+  const footer = actions.map((button) => {
+    const orginPress = button.onPress || function() {};
+    button.onPress = () => {
+      const res = orginPress();
+      if (res && res.then) {
+        res.then(() => {
+          close();
+        });
+      } else {
+        close();
+      }
+    };
+    return button;
+  });
+
+  ReactDOM.render(
+    <Modal
+      visible
+      operation
+      transparent
+      prefixCls={prefixCls}
+      transitionName="am-zoom"
+      closable={false}
+      maskClosable
+      onClose={close}
+      footer={footer}
+      maskTransitionName="am-fade"
+      className="am-modal-operation"
+    /> , div
+  );
+}

components/modal/style/Dialog.less

@@ -89,4 +89,20 @@
     height: 100%;
     overflow: auto;
   }
+
+  &&-operation {
+    .@{modalPrefixClass}-content {
+      border-radius: @radius-lg;
+      height: auto;
+      padding-top: 0;
+      .@{modalPrefixClass}-body {
+        padding: 0;
+      }
+      .@{modalPrefixClass}-button {
+        color: @color-text-base;
+        text-align: start;
+        padding-left: 30px;
+      }
+    }
+  }
 }

components/modal/style/index.tsx

@@ -81,4 +81,16 @@ export default StyleSheet.create({
     fontSize: variables.link_button_font_size,
     backgroundColor: 'transparent',
   },
+  operationContainer: {
+    paddingTop: 0,
+  },
+  operationBody: {
+    paddingBottom: 0,
+    paddingHorizontal: 0,
+  },
+  buttonTextOperation: {
+    color: variables.color_text_base,
+    textAlign: 'left',
+    paddingHorizontal: 15,
+  },
 });