@yorkjs/hive-ui 2.1.2 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorkjs/hive-ui",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Hive UI - Taro React component library",
   "main": "src/index.ts",
   "module": "src/index.ts",

package/src/components/Overlay/index.module.styl

@@ -0,0 +1,11 @@
+.overlay-root
+  position fixed
+  top 0
+  left 0
+  right 0
+  bottom 0
+  width 100%
+  height 100%
+  background-color rgba(0, 0, 0, 0.7)
+  transition-property opacity
+  transition-timing-function ease

package/src/components/Overlay/index.tsx

@@ -0,0 +1,66 @@
+import React, { useMemo, useEffect, useState } from 'react'
+import { View, ITouchEvent } from '@tarojs/components'
+import { formatClassNames } from '../../util/function'
+import styles from './index.module.styl'
+
+export interface OverlayProps {
+  visible: boolean
+  zIndex?: number
+  duration?: number
+  className?: string
+  style?: React.CSSProperties
+  closeOnOverlayClick?: boolean
+  lockScroll?: boolean
+  onClick?: (event: ITouchEvent) => void
+}
+
+const Overlay: React.FC<OverlayProps> = (props) => {
+  const {
+    visible = false,
+    zIndex = 1000,
+    duration = 300,
+    className,
+    style,
+    closeOnOverlayClick = true,
+    lockScroll = true,
+    onClick,
+  } = props
+
+  const [innerVisible, setInnerVisible] = useState(visible)
+
+  useEffect(() => {
+    setInnerVisible(visible)
+  }, [visible])
+
+  const handleClick = (e: ITouchEvent) => {
+    if (closeOnOverlayClick) {
+      onClick?.(e)
+    }
+  }
+
+  const preventTouchMove = (e: any) => {
+    if (lockScroll) {
+      e.stopPropagation()
+      return false
+    }
+  }
+
+  const combinedStyle: React.CSSProperties = useMemo(() => ({
+    ...style,
+    zIndex,
+    transitionDuration: `${duration}ms`,
+    display: innerVisible ? 'block' : 'none'
+  }), [style, zIndex, duration, innerVisible])
+
+  return (
+    <View
+      className={formatClassNames(styles['overlay-root'], className)}
+      style={combinedStyle}
+      onClick={handleClick}
+      catchMove={lockScroll}
+      onTouchMove={preventTouchMove}
+    />
+  )
+}
+
+export default Overlay

package/src/components/SimpleModal/index.module.styl

@@ -0,0 +1,53 @@
+@import '../../styles/mixin.styl'
+
+.simple-modal-root
+  position fixed
+  top 0
+  left 0
+  right 0
+  bottom 0
+  z-index 1500
+  display flex
+  align-items center
+  justify-content center
+  pointer-events auto
+
+  :global
+    .modal-main-wrapper
+      position relative
+      z-index 1501
+      width 80%
+      max-width 320PX
+      display flex
+      flex-direction column
+      align-items center
+
+    .modal-content-box
+      width 100%
+      background-color #fff
+      border-radius 10PX
+      padding 15PX
+      box-sizing border-box
+      overflow hidden
+      animation modal-show 0.3s ease-out
+
+    .modal-close-section
+      display flex
+      flex-direction column
+      align-items center
+      margin-top 24PX
+
+      .close-circle-btn
+        display flex
+        align-items center
+        justify-content center
+        &:active
+          opacity 0.7
+
+@keyframes modal-show
+  from
+    transform scale(0.8)
+    opacity 0
+  to
+    transform scale(1)
+    opacity 1

package/src/components/SimpleModal/index.tsx

@@ -0,0 +1,78 @@
+import Taro from '@tarojs/taro'
+import React, { useEffect } from 'react'
+import { View } from '@tarojs/components'
+
+import Overlay from '../Overlay'
+import Icon from '../Icon'
+import { formatClassNames } from '../../util/function'
+
+import styles from './index.module.styl'
+
+export interface SimpleModalProps {
+  /** 是否显示 */
+  visible: boolean
+  /** 关闭回调 */
+  onClose: () => void
+  /** 弹窗内容 */
+  children?: React.ReactNode
+  /** 自定义内容区类名 */
+  className?: string
+  /** 点击遮罩层是否关闭 */
+  closeOnOverlayClick?: boolean
+}
+
+const SimpleModal: React.FC<SimpleModalProps> = (props) => {
+  const {
+    visible,
+    onClose,
+    children,
+    className,
+    closeOnOverlayClick = true
+  } = props
+
+  if (!visible) return null
+
+  const stopPropagation = (e: any) => {
+    e.stopPropagation()
+  }
+
+  useEffect(() => {
+    if (visible && Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+      document.body.style.overflow = 'hidden'
+    }
+    return () => {
+      if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+        document.body.style.overflow = 'auto'
+      }
+    }
+  }, [visible])
+
+  return (
+    <View className={styles['simple-modal-root']}
+      catchMove
+      onTouchMove={stopPropagation}
+    >
+      <Overlay
+        visible={visible}
+        onClick={() => closeOnOverlayClick && onClose()}
+      />
+
+      <View className="modal-main-wrapper">
+
+        <View className={formatClassNames('modal-content-box', className)}>
+          {children}
+        </View>
+
+        <View className="modal-close-section" onClick={onClose}>
+          <View className="close-line" />
+          <View className="close-circle-btn">
+            <Icon name="close-circle" size={33} color="#fff" />
+          </View>
+        </View>
+
+      </View>
+    </View>
+  )
+}
+
+export default SimpleModal

package/src/index.ts

@@ -12,6 +12,7 @@ export { default as SectionCard } from './components/SectionCard'
 export { default as RemoteImage } from './components/RemoteImage'
 export { default as Alert } from './components/Alert'
 export { default as Switch } from './components/Switch'
+export { default as SimpleModal } from './components/SimpleModal'
 
 export { default as FlowItem } from './item/FlowItem'
 export { default as ListItem } from './item/ListItem'