fix: 添加Modal

src/components/modal/action/button.js

@@ -0,0 +1,26 @@
+import Taro from '@tarojs/taro'
+import { Button } from '@tarojs/components'
+
+import _isFunction from 'lodash/isFunction'
+
+import './index.scss'
+
+export default class ModalButton extends Taro.Component {
+  constructor() {
+    super(...arguments)
+  }
+
+  handleClick = () => {
+    const { onClick } = this.props
+    _isFunction(onClick) && onClick()
+  }
+
+  render() {
+    const { children } = this.props
+    return (
+      <Button className='at-modal-action__button' onClick={this.handleClick}>
+        {children}
+      </Button>
+    )
+  }
+}

src/components/modal/footer/index.js → src/components/modal/action/index.js

@@ -1,17 +1,23 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 
+import ModalButton from './button.js'
+
 import './index.scss'
 
 export default class ModalFooter extends Taro.Component {
   constructor() {
     super(...arguments)
   }
 
+  static Button = ModalButton
+
   render() {
     const { children } = this.props
     return (
-      <View className='at-modal-header'>{children}</View>
+      <View className='at-modal-footer'>
+        <View className='at-modal-footer__action'>{children}</View>
+      </View>
     )
   }
-}
+}

src/components/modal/action/index.scss

@@ -0,0 +1,17 @@
+.at-modal-footer {
+  border-top: 2px solid #e5e5e5;
+  &__action {
+    display: flex;
+  }
+}
+
+.at-modal-action__button {
+  outline: 0;
+  flex: auto;
+  border: none;
+  font-size: 28px;
+  background-color: white;
+  &:not(:first-child) {
+    border-left: 2px solid #e5e5e5;
+  }
+}

src/components/modal/index.js

@@ -1,8 +1,9 @@
 import Taro from '@tarojs/taro'
-import { View, Button } from '@tarojs/components'
+import { View } from '@tarojs/components'
 
-import ModalBody from './body/index'
 import ModalHeader from './header/index'
+import ModalAction from './action/index'
+import ModalContent from './content/index'
 
 import './index.scss'
 
@@ -15,8 +16,9 @@ export default class Modal extends Taro.Component {
     }
   }
 
-  static Body = ModalBody
+  static Content = ModalContent
   static Header = ModalHeader
+  static Action = ModalAction
 
   componentWillReceiveProps(nextProps) {
     const { open } = nextProps
@@ -45,23 +47,11 @@ export default class Modal extends Taro.Component {
 
   render() {
     const { open } = this.state
-    const { children, buttons } = this.props
+    const { children } = this.props
     return open ? (
       <View className='at-modal'>
         <View className='at-modal__overlay' onClick={this.handleClickOverlay} />
-        <View className='at-modal__container'>
-          {children}
-          <View className='at-modal__container-footer at-footer' />
-          <View className='at-footer__actions'>
-            {buttons.map((item, key) => {
-              return (
-                <Button key={key} className='at-button'>
-                  {item.name}
-                </Button>
-              )
-            })}
-          </View>
-        </View>
+        <View className='at-modal__container'>{children}</View>
       </View>
     ) : null
   }

src/pages/action/modal/index.js

@@ -18,7 +18,7 @@ export default class ModalPage extends Taro.Component {
   }
 
   handleClick = e => {
-    const state = Object.assign({}, e.currentTarget.dataset)
+    const state = Object.assign({ isOpen: true }, e.currentTarget.dataset)
     this.setState(state)
   }
 
@@ -31,18 +31,20 @@ export default class ModalPage extends Taro.Component {
             <Text className='example__header-title'>基本案例</Text>
           </View>
           <View className='example__body'>
-            <Button data-open={true} onClick={this.handleClick}>
-              打开Modal
-            </Button>
+            <Button onClick={this.handleClick}>打开Modal</Button>
           </View>
         </View>
         <Modal open={open}>
           <Modal.Header>
             <Text>这是标题知道吧</Text>
           </Modal.Header>
-          <Modal.Body>
+          <Modal.Content>
             <View>这是内容知道吧</View>
-          </Modal.Body>
+          </Modal.Content>
+          <Modal.Action>
+            <Modal.Action.Button onClick={console.log.bind(this,1)}>取消</Modal.Action.Button>
+            <Modal.Action.Button>确认</Modal.Action.Button>
+          </Modal.Action>
         </Modal>
       </View>
     )