feat: dropdownMenu、notify、grid

README.md

@@ -91,20 +91,20 @@ Uploader
 
 
 空镜
-Image
-Layout
+Image[完成]
+Layout[完成]
 
-DropdownMenu
-Loading
-Notify
-Cell
+DropdownMenu[完成]
+Loadingp[完成]
+Notify[完成]
+Cell[完成]
 SwipeCell
 Slider
 
 Calendar
-Picker
-DatetimePicker
-Grid
+Picker[完成]
+DatetimePicker[完成]
+Grid[完成]
 Sidebar
 
 

packages/vantui-demo/src/pages/index/index.tsx

@@ -1,5 +1,5 @@
 import { View } from '@tarojs/components'
-import { useEffect, useState, useCallback } from 'react'
+import { useEffect, useState, useCallback, useRef } from 'react'
 import { useDidHide, useDidShow } from '@tarojs/taro'
 import {
   Progress,
@@ -18,6 +18,14 @@ import {
   Skeleton,
   Tag,
   // CountDown,
+  // Tabbar,
+  // TabbarItem,
+  Notify,
+  Grid,
+  GridItem,
+  DropdownMenu,
+  DropdownItem,
+  // CountDown,
   Picker,
   CellGroup,
   Cell,
@@ -26,15 +34,29 @@ import {
   GoodsAction,
   GoodsActionIcon,
   GoodsActionButton,
+  // NavBar,
 } from '@antmjs/vantui'
 
 import './index.less'
 
+const option1 = [
+  { text: '全部商品', value: 0 },
+  { text: '新款商品', value: 1 },
+  { text: '活动商品', value: 2 },
+]
+const option2 = [
+  { text: '默认排序', value: 'a' },
+  { text: '好评排序', value: 'b' },
+  { text: '销量排序', value: 'c' },
+]
 const columns = ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州']
 
 export default function Index() {
   const [rate, setRate] = useState(2.5)
+  const NotifyInstance = useRef<any>(null)
   const [serachValue] = useState('ff')
+  const value1 = 0
+  const value2 = 'a'
   useEffect(function () {
     console.info('index page load.')
     return function () {
@@ -47,6 +69,13 @@ export default function Index() {
   useDidHide(function () {
     console.info('index page hide.')
   })
+  const NotifyShow = function () {
+    NotifyInstance.current.show({
+      message: '消息通知',
+      top: 20,
+      zIndex: 1000,
+    })
+  }
 
   const onChange = useCallback(function (a) {
     console.info(a, 'picker onChange')
@@ -60,8 +89,28 @@ export default function Index() {
 
   return (
     <View className="pages-index-index">
+      <Button onClick={NotifyShow}>Notify</Button>
+      <Notify ref={NotifyInstance} />
+      {/* <NavBar
+        fixed
+        border
+        title="标题"
+        leftText="返回"
+        rightText="按钮"
+        leftArrow
+      /> */}
       {/* <MiniNavBar title="标题" homeUrl="/pages/demo2/index" /> */}
       <Progress percentage={50} strokeWidth={4} />
+      <Grid>
+        <GridItem icon="photo-o" text="文字" />
+        <GridItem icon="photo-o" text="文字" />
+        <GridItem icon="photo-o" text="文字" />
+        <GridItem icon="photo-o" text="文字" />
+      </Grid>
+      <DropdownMenu>
+        <DropdownItem value={value1} options={option1} />
+        <DropdownItem value={value2} options={option2} />
+      </DropdownMenu>
       <View>
         <Icon name="chat" size={40} dot />
         <Icon name="chat" size={40} info="9" />

packages/vantui/src/components/dropdown-item/index.tsx

@@ -0,0 +1,227 @@
+import { View, Block } from '@tarojs/components'
+import { useState, useEffect, useCallback } from 'react'
+import Taro from '@tarojs/taro'
+import { DropdownItemProps } from '../../../types/dropdown-item'
+import * as utils from '../wxs/utils'
+import VanIcon from '../icon/index'
+import VanCell from '../cell'
+import VanPopup from '../popup'
+
+export default function Index(
+  props: DropdownItemProps & {
+    setChildrenInstance: any
+    index: number
+    parentInstance: any
+  },
+) {
+  const {
+    value,
+    popupStyle,
+    direction,
+    disabled = false,
+    duration,
+    closeOnClickOverlay,
+    activeColor,
+    setChildrenInstance,
+    parentInstance,
+    index,
+    onOpen = () => {},
+    onOpened = () => {},
+    onClose = () => {},
+    onClosed = () => {},
+    onChange = () => {},
+    options = [],
+    className = '',
+    style,
+    ...others
+  } = props
+
+  const [parentState, setParentState] = useState<any>({})
+  const [transition, setTransition] = useState(true)
+  const [showPopup, setShowPopup] = useState(false)
+  const [showWrapper, setShowWrapper] = useState(true)
+  const [displayTitle, setDisplayTitle] = useState('')
+  const [value_, setValue] = useState<number | string | undefined>('')
+
+  useEffect(
+    function () {
+      setValue(value)
+    },
+    [value],
+  )
+
+  useEffect(
+    function () {
+      setChildrenInstance(index, {
+        updateDataFromParent,
+        disabled,
+        transition,
+        showPopup,
+        index,
+        setDisplayTitle,
+        displayTitle,
+        options,
+        value: value_,
+        toggle,
+      })
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      index,
+      setChildrenInstance,
+      disabled,
+      transition,
+      showPopup,
+      index,
+      setDisplayTitle,
+      displayTitle,
+      options,
+      value_,
+    ],
+  )
+
+  useEffect(function () {
+    updateDataFromParent()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const updateDataFromParent = useCallback(
+    function () {
+      const { overlay, duration, activeColor, closeOnClickOverlay, direction } =
+        parentInstance
+
+      setParentState({
+        overlay,
+        duration,
+        activeColor,
+        closeOnClickOverlay,
+        direction,
+      })
+    },
+    [parentInstance],
+  )
+
+  const toggle = useCallback(
+    function (show: any, options = {}) {
+      if (typeof show !== 'boolean') {
+        show = !showPopup
+      }
+      if (show === showPopup) {
+        return
+      }
+
+      setTransition(!options.immediate)
+      setShowPopup(show)
+      if (show) {
+        !parentInstance
+          ? void 0
+          : parentInstance.getChildWrapperStyle().then((wrapperStyle: any) => {
+              if (wrapperStyle) {
+                wrapperStyle.width = '100vw'
+                wrapperStyle.height = '100vh'
+              }
+              setParentState({
+                ...parentState,
+                wrapperStyle,
+              })
+              setShowWrapper(true)
+              rerender()
+            })
+      } else {
+        rerender()
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [parentState, showPopup, parentInstance],
+  )
+
+  const rerender = useCallback(
+    function () {
+      Taro.nextTick(() => {
+        if (parentInstance) {
+          parentInstance.updateItemListData()
+        }
+      })
+    },
+    [parentInstance],
+  )
+
+  const onClosed_ = useCallback(
+    function () {
+      if (onClosed) onClosed()
+      setShowWrapper(false)
+    },
+    [onClosed],
+  )
+
+  const onOptionTap = function (_event: any, option: any) {
+    const shouldEmitChange = value_ !== option.value
+    setShowPopup(false)
+    setValue(option.value)
+    if (onClose) onClose()
+    rerender()
+    if (shouldEmitChange) {
+      onChange()
+    }
+  }
+
+  return (
+    showWrapper && (
+      <View
+        className={utils.bem('dropdown-item', direction) + ' ' + className}
+        style={utils.style([parentState.wrapperStyle, style])}
+      >
+        <VanPopup
+          show={showPopup}
+          style={utils.style([{ position: 'absolute' }, popupStyle])}
+          overlayStyle="position: absolute;"
+          overlay={!!parentInstance.overlay}
+          position={direction !== 'down' ? 'top' : 'bottom'}
+          duration={transition ? duration : 0}
+          closeOnClickOverlay={closeOnClickOverlay}
+          onEnter={onOpen}
+          onLeave={onClose}
+          onClose={toggle}
+          onAfterEnter={onOpened}
+          onAfterLeave={onClosed_}
+        >
+          <>
+            {options.map((item: any, index: number) => (
+              <VanCell
+                key={`${index}VanCell`}
+                data-option={item}
+                className={utils.bem('dropdown-item__option', {
+                  active: item.value === value_,
+                })}
+                clickable
+                icon={item.icon}
+                onClick={(e) => onOptionTap(e, item)}
+                renderTitle={
+                  <Block>
+                    <View
+                      className="van-dropdown-item__title"
+                      style={
+                        item.value === value_ ? 'color:' + activeColor : ''
+                      }
+                    >
+                      {item.text}
+                    </View>
+                  </Block>
+                }
+              >
+                {item.value === value_ && (
+                  <VanIcon
+                    name="success"
+                    className="van-dropdown-item__icon"
+                    color={activeColor}
+                  ></VanIcon>
+                )}
+              </VanCell>
+            ))}
+            {others.children}
+          </>
+        </VanPopup>
+      </View>
+    )
+  )
+}

packages/vantui/src/components/dropdown-item/wxs.ts

@@ -0,0 +1,28 @@
+import { style } from '../wxs/style'
+import { addUnit } from '../wxs/add-unit'
+
+function wrapperStyle(data: any) {
+  const width = 100 / data.columnNum + '%'
+
+  return style({
+    width: width,
+    'padding-top': data.square ? width : null,
+    'padding-right': addUnit(data.gutter),
+    'margin-top':
+      data.index >= data.columnNum && !data.square
+        ? addUnit(data.gutter)
+        : null,
+  })
+}
+
+function contentStyle(data: any) {
+  return data.square
+    ? style({
+        right: addUnit(data.gutter),
+        bottom: addUnit(data.gutter),
+        height: 'auto',
+      })
+    : ''
+}
+
+export { wrapperStyle, contentStyle }