feat(action): 更改命名、完成一期任务

src/app.js

@@ -8,7 +8,7 @@ class App extends Component {
     pages: [
       'pages/index/index',
       'pages/action/toast/index',
-      // 'pages/action/modal/index',
+      'pages/action/modal/index',
       'pages/action/progress/index',
       'pages/action/action-sheet/index',
       'pages/action/activity-indicator/index',

src/components/action-sheet/body/index.js

@@ -0,0 +1,15 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import AtActionSheetItem from './item/index.js'
+
+import './index.scss'
+
+export default class AtActionSheetBody extends Taro.Component {
+  static Item = AtActionSheetItem
+
+  render () {
+    const { children } = this.props
+    return <View className='at-action-sheet-body'>{children}</View>
+  }
+}

src/components/action-sheet/body/index.scss

@@ -0,0 +1,3 @@
+.at-action-sheet-body {
+  text-align: center;
+}

src/components/action-sheet/body/item/index.js

@@ -0,0 +1,24 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import _isFunction from 'lodash/isFunction'
+
+import './index.scss'
+
+export default class AtActionSheetItem extends Taro.Component {
+  handleClick () {
+    const { onClick } = this.props
+    if (_isFunction(onClick)) {
+      return onClick()
+    }
+  }
+
+  render () {
+    const { children } = this.props
+    return (
+      <View className='at-action-sheet-item' onClick={this.handleClick}>
+        {children}
+      </View>
+    )
+  }
+}

src/components/action-sheet/body/item/index.scss

@@ -0,0 +1,11 @@
+@import "../../../../style/mixins/index.scss";
+@import "../../../../style/theme/default.scss";
+
+.at-action-sheet-item {
+  font-size: 36px;
+  padding: 25px 0;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid rgba($color: $color-black-0, $alpha: 0.1);
+  }
+}

src/components/action-sheet/footer/index.js

@@ -0,0 +1,25 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import _isFunction from 'lodash/isFunction'
+
+import './index.scss'
+
+export default class AtActionSheetFooter extends Taro.Component {
+  handleClick = () => {
+    const { onClick, $$close } = this.props
+    if (_isFunction(onClick)) {
+      return onClick()
+    }
+    $$close()
+  }
+
+  render () {
+    const { children } = this.props
+    return (
+      <View className='at-action-sheet-footer' onClick={this.handleClick}>
+        {children}
+      </View>
+    )
+  }
+}

src/components/action-sheet/footer/index.scss

@@ -0,0 +1,5 @@
+.at-action-sheet-footer {
+  font-size: 36px;
+  padding: 25px 0;
+  border-top: 12px solid rgba($color: #cdcdd1, $alpha: 0.3);
+}

src/components/action-sheet/header/index.js

@@ -0,0 +1,11 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import './index.scss'
+
+export default class AtActionSheetHeader extends Taro.Component {
+  render () {
+    const { children } = this.props
+    return <View className='at-action-sheet-header'>{children}</View>
+  }
+}

src/components/action-sheet/header/index.scss

@@ -0,0 +1,9 @@
+@import "../../../style/mixins/index.scss";
+@import "../../../style/theme/default.scss";
+
+.at-action-sheet-header {
+  font-size: 28px;
+  padding: 25px 0;
+  color: #888;
+  border-bottom: 1px solid rgba($color: $color-black-0, $alpha: 0.1);
+}

src/components/action-sheet/index.js

@@ -1,28 +1,80 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 
+import AtActionSheetBody from './body'
+import AtActionSheetHeader from './header'
+import AtActionSheetFooter from './footer'
+
 import './index.scss'
 
-export default class ActionSheet extends Taro.Component {
+export default class AtActionSheet extends Taro.Component {
+  static Body = AtActionSheetBody
+  static Header = AtActionSheetHeader
+  static Footer = AtActionSheetFooter
+
+  constructor (props) {
+    super(...arguments)
+    const { isOpened } = props
+    this.state = {
+      isOpened
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    const { isOpened } = nextProps
+    if (isOpened !== this.state.isOpened) {
+      this.setState({
+        isOpened
+      })
+    }
+  }
+
+  _close () {
+    this.setState({
+      isOpened: false
+    })
+  }
+
+  _open () {
+    this.setState({
+      isOpened: true
+    })
+  }
+
+  handleClickOverlay = () => {
+    this._close()
+  }
+
   render () {
-    return (
+    const { children } = this.props
+    const { isOpened } = this.state
+
+    console.log(children)
+
+    if (children) {
+      const index = children.findIndex(
+        item => item.name === 'AtActionSheetFooter'
+      )
+
+      if (index === -1) return
+
+      children[index].props = Object.assign(
+        {
+          $$close: this._close.bind(this),
+          $$open: this._open.bind(this)
+        },
+        children[index].props
+      )
+    }
+
+    return isOpened ? (
       <View className='at-action-sheet'>
-        <View className='at-action-sheet__overlay' />
-        <View className='at-action-sheet__container'>
-          <View className='at-action-sheet__container-header'>
-            <View>清除位置信息后， 别人将不能查看到你</View>
-            <View>这里最多显示两行</View>
-          </View>
-          <View className='at-action-sheet__container-body body__list'>
-            <View className='body__list-item'>清除位置信息并退出 </View>
-            <View className='body__list-item'>清除位置信息并退出</View>
-            <View className='body__list-item'>清除位置信息并退出</View>
-          </View>
-          <View className='at-action-sheet__container-footer'>
-            <View>取消</View>
-          </View>
-        </View>
+        <View
+          onClick={this.handleClickOverlay}
+          className='at-action-sheet__overlay'
+        />
+        <View className='at-action-sheet__container'>{children}</View>
       </View>
-    )
+    ) : null
   }
 }

src/components/action-sheet/index.scss

@@ -19,31 +19,5 @@
     text-align: center;
     position: absolute;
     background-color: white;
-
-    &-header {
-      font-size: 28px;
-      padding: 25px 0;
-      color: #888;
-      border-bottom: 1px solid rgba($color: $color-black-0, $alpha: 0.1);
-    }
-
-    &-footer {
-      font-size: 36px;
-      padding: 25px 0;
-      border-top: 12px solid rgba($color: #cdcdd1, $alpha: 0.3);
-    }
-  }
-}
-
-.body__list {
-  text-align: center;
-
-  &-item {
-    font-size: 36px;
-    padding: 25px 0;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid rgba($color: $color-black-0, $alpha: 0.1);
-    }
   }
 }

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

@@ -5,20 +5,19 @@ import _isFunction from 'lodash/isFunction'
 
 import './index.scss'
 
-export default class ModalButton extends Taro.Component {
-  constructor() {
-    super(...arguments)
-  }
-
+export default class AtModalButton extends Taro.Component {
   handleClick = () => {
-    const { onClick } = this.props
-    _isFunction(onClick) && onClick()
+    const { onClick, $$close } = this.props
+    if (_isFunction(onClick)) {
+      return onClick()
+    }
+    $$close()
   }
 
-  render() {
+  render () {
     const { children } = this.props
     return (
-      <Button className='at-modal-action__button' onClick={this.handleClick}>
+      <Button className='at-modal-action-button' onClick={this.handleClick}>
         {children}
       </Button>
     )

src/components/modal/action/button/index.scss

@@ -0,0 +1,11 @@
+.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/action/index.js

@@ -1,15 +1,22 @@
 import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 
-import ModalButton from './button.js'
+import AtModalButton from './button/index.js'
 
 import './index.scss'
 
-export default class ModalFooter extends Taro.Component {
-  static Button = ModalButton
+export default class AtModalFooter extends Taro.Component {
+  static Button = AtModalButton
 
   render () {
-    const { children } = this.props
+    let { children } = this.props
+    const { $$close } = this.props
+
+    children = children.map(item => {
+      item.props.$$close = $$close
+      return item
+    })
+
     return (
       <View className='at-modal-footer'>
         <View className='at-modal-footer__action'>{children}</View>

src/components/modal/action/index.scss

@@ -1,17 +1,8 @@
 .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/content/index.js

@@ -3,7 +3,7 @@ import { View } from '@tarojs/components'
 
 import './index.scss'
 
-export default class ModalFooter extends Taro.Component {
+export default class AtModalContent extends Taro.Component {
   render () {
     const { children } = this.props
     return <View className='at-modal-body'>{children}</View>

src/components/modal/header/index.js

@@ -3,7 +3,7 @@ import { View } from '@tarojs/components'
 
 import './index.scss'
 
-export default class ModalHeader extends Taro.Component {
+export default class AtModalHeader extends Taro.Component {
   render () {
     const { children } = this.props
     return (