feat: add ActionSheet

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

@@ -0,0 +1,15 @@
+import classNames from 'classnames'
+
+export default {
+  name: 'ActionSheetBody',
+  props: {
+    className: {
+      type: [Array, String],
+      default: () => '',
+    },
+  },
+  render() {
+    const rootClass = classNames('at-action-sheet__body', this.className)
+    return <view className={rootClass}>{this.$slots.default}</view>
+  },
+}

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

@@ -0,0 +1,29 @@
+import classNames from 'classnames'
+
+export default {
+  name: 'ActionSheetItem',
+  props: {
+    className: {
+      type: [Array, String],
+      default: () => '',
+    },
+    onClick: {
+      type: Function,
+      default: () => () => {},
+    },
+  },
+  methods: {
+    handleClick(e) {
+      this.onClick && this.onClick(e)
+    },
+  },
+  render() {
+    const rootClass = classNames('at-action-sheet__item', this.className)
+
+    return (
+      <view className={rootClass} onTap={this.handleClick}>
+        {this.slots.default}
+      </view>
+    )
+  },
+}

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

@@ -0,0 +1,29 @@
+import classNames from 'classnames'
+
+export default {
+  name: 'ActionSheetFooter',
+  props: {
+    className: {
+      type: [Array, String],
+      default: () => '',
+    },
+    onClick: {
+      type: Function,
+      default: () => () => {},
+    },
+  },
+  methds: {
+    handleClick(e) {
+      this.onClick && this.onClick(e)
+    },
+  },
+  render() {
+    const rootClass = classNames('at-action-sheet__footer', this.className)
+
+    return (
+      <view onTap={this.handleClick} className={rootClass}>
+        {this.$slots.default}
+      </view>
+    )
+  },
+}

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

@@ -0,0 +1,16 @@
+import classNames from 'classnames'
+
+export default {
+  name: 'ActionSheetHeader',
+  props: {
+    className: {
+      type: [Array, String],
+      default: () => '',
+    },
+  },
+  render() {
+    const rootClass = classNames('at-action-sheet__header', this.className)
+
+    return <view className={rootClass}>{this.$slots.default}</view>
+  },
+}

src/components/action-sheet/index.jsx

@@ -0,0 +1,86 @@
+import classNames from 'classnames'
+import ActionSheetBody from './body/index'
+import ActionSheetFooter from './footer/index'
+import ActionSheetHeader from './header/index'
+
+export default {
+  name: 'ActionSheet',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    cancelText: {
+      type: String,
+      default: '',
+    },
+    isOpened: {
+      type: Boolean,
+      default: false,
+    },
+    onClose: {
+      type: Function,
+      default: () => () => {},
+    },
+    onCancel: {
+      type: Function,
+      default: () => () => {},
+    },
+  },
+  data() {
+    return {
+      show: this.isOpened,
+    }
+  },
+  watch: {
+    isOpened(val) {
+      this.show = val
+      !val && this.handleClose()
+    },
+  },
+  methods: {
+    handleClose() {
+      if (typeof this.onClose === 'function') {
+        this.onClose()
+      }
+    },
+    handleCancel() {
+      if (typeof this.onCancel === 'function') {
+        return this.onCancel()
+      }
+      this.close()
+    },
+    close() {
+      this.show = false
+    },
+    handleTouchMove(e) {
+      e.stopPropagation()
+      e.preventDefault()
+    },
+  },
+  render() {
+    const { title, cancelText, className } = this
+    const { show } = this
+
+    const rootClass = classNames(
+      'at-action-sheet',
+      {
+        'at-action-sheet--active': show,
+      },
+      className
+    )
+
+    return (
+      <view className={rootClass} onTouchMove={this.handleTouchMove}>
+        <view onTap={this.close} className="at-action-sheet__overlay" />
+        <view className="at-action-sheet__container">
+          {title && <ActionSheetHeader>{title}</ActionSheetHeader>}
+          <ActionSheetBody>{this.$slots.default}</ActionSheetBody>
+          {cancelText && (
+            <ActionSheetFooter onTap={this.handleCancel}>{cancelText}</ActionSheetFooter>
+          )}
+        </view>
+      </view>
+    )
+  },
+}

src/components/button/index.jsx

@@ -199,9 +199,9 @@ export default {
     let loadingComponent = null
     if (loading) {
       loadingComponent = (
-        <View className="at-button__icon">
+        <view className="at-button__icon">
           <Loading color={loadingColor} size={loadingSize} />
-        </View>
+        </view>
       )
       rootClassName.push('at-button--icon')
     }
@@ -248,6 +248,7 @@ export default {
             <Loading color={loadingColor} size={loadingSize} />
           </view>
         )}
+        {loadingComponent}
         <view class="at-button__text">{this.$slots.default}</view>
       </view>
     )

src/components/countdown/index.jsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import CountdownItem from './item'
+import CountdownItem from './item/index'
 
 /**
  *

src/components/countdown/item/index.jsx

@@ -1,6 +1,6 @@
 /**
- * 
- * @param {number} num 
+ *
+ * @param {number} num
  */
 const formatNum = (num) => {
   return num <= 9 ? `0${num}` : `${num}`
@@ -11,22 +11,22 @@ export default {
   props: {
     num: {
       type: Number,
-      default: 0
+      default: 0,
     },
     separator: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   },
   render() {
     const { num, separator } = this
     return (
-      <view class='at-countdown__item'>
-        <view class='at-countdown__time-box'>
-          <text class='at-countdown__time'>{formatNum(num)}</text>
+      <view class="at-countdown__item">
+        <view class="at-countdown__time-box">
+          <text class="at-countdown__time">{formatNum(num)}</text>
         </view>
-        <text class='at-countdown__separator'>{separator}</text>
+        <text class="at-countdown__separator">{separator}</text>
       </view>
     )
-  }
-}
+  },
+}