feat: 添加tabbar功能

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
+npm test

README.md

@@ -25,7 +25,7 @@ src/style/index.less
 import { Button } from '@antmjs/vantui'
 ```
 
-yarn
+yarn && npx husky install
 
 npx lerna bootstrap
 
@@ -124,16 +124,27 @@ TreeSelect
 Area
 
 三少
+
 Button[完成]
+
 Icon[完成]
 
 Progress[完成]
+
 Skeleton[完成]
+
 CountDown[完成]
+
 Tag[完成]
+
 Sticky[完成]
+
 Rate[完成]
+
 Search[完成]
+
 NavBar[完成]
-Tab
-TabBar
+
+Tab[完成]
+
+TabBar[完成]

package.json

@@ -95,7 +95,8 @@
     "release:lerna": "lerna version --exact --no-git-tag-version --force-publish",
     "release:beta": "lerna publish --force-publish=* --exact --skip-temp-tag  --preid=beta --npm-tag=beta",
     "release": "npm run release:lerna && npm run changelog && node ./pullRequest.js",
-    "test": "npx lerna run test"
+    "test": "npx lerna run test",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@commitlint/cli": "^12.1.4",
@@ -136,6 +137,7 @@
   "devDependencies": {
     "@antmjs/babel-preset": "^1.12.0",
     "@antmjs/eslint": "^1.12.0",
-    "@antmjs/stylelint": "^1.12.0"
+    "@antmjs/stylelint": "^1.12.0",
+    "husky": "^7.0.0"
   }
 }

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

@@ -18,6 +18,8 @@ import {
   Skeleton,
   Tag,
   CountDown,
+  Tabbar,
+  TabbarItem,
 } from '@antmjs/vantui'
 
 import './index.less'
@@ -179,6 +181,20 @@ export default function Index() {
       <Loading type="circular" size={80}>
         加载中...
       </Loading>
+      <Tabbar active={1}>
+        <TabbarItem info={null} name={null} icon="home-o">
+          标签
+        </TabbarItem>
+        <TabbarItem info={null} name={null} icon="search" dot>
+          标签
+        </TabbarItem>
+        <TabbarItem name={null} icon="friends-o" info="5">
+          标签
+        </TabbarItem>
+        <TabbarItem name={null} icon="setting-o" info="20">
+          标签
+        </TabbarItem>
+      </Tabbar>
     </View>
   )
 }

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

@@ -0,0 +1,85 @@
+import { View, Block } from '@tarojs/components'
+import * as utils from '../wxs/utils'
+import Icon from '../icon'
+import Info from '../info'
+import { TabbarItemProps } from '../../../types/tabbar-item'
+
+export default function Index(
+  props: TabbarItemProps & {
+    index: number
+    active?: number
+    activeColor?: string
+    inactiveColor?: string
+    onChange?: (data?: string | number) => void
+  },
+) {
+  const {
+    icon,
+    name,
+    iconPrefix = 'van-icon',
+    dot,
+    info = null,
+    renderIconactive,
+    renderIcon,
+    index,
+    active,
+    activeColor,
+    inactiveColor,
+    onChange,
+    children,
+    style,
+    className,
+    onClick,
+    ...others
+  } = props
+
+  const _click = function () {
+    if (onChange) {
+      const _active = name || index
+      if (_active !== active) {
+        onChange(_active)
+      }
+    }
+
+    onClick?.(name || index)
+  }
+
+  return onChange ? (
+    <View
+      className={
+        utils.bem('tabbar-item', {
+          active: active === (name || index),
+        }) +
+        ' custom-class' +
+        ` ${className}`
+      }
+      style={utils.style([
+        {
+          color: active === (name || index) ? activeColor : inactiveColor,
+        },
+        style,
+      ])}
+      {...others}
+      onClick={_click}
+    >
+      <View className="van-tabbar-item__icon">
+        {icon ? (
+          <Icon
+            info={null}
+            name={icon}
+            classPrefix={iconPrefix}
+            className="van-tabbar-item__icon__inner"
+          ></Icon>
+        ) : (
+          <Block>
+            {active === (name || index) ? renderIconactive : renderIcon}
+          </Block>
+        )}
+        <Info dot={dot} info={info} className="van-tabbar-item__info"></Info>
+      </View>
+      <View className="van-tabbar-item__text">{children}</View>
+    </View>
+  ) : (
+    <></>
+  )
+}

packages/vantui/src/components/tabbar/index.tsx

@@ -0,0 +1,143 @@
+import Taro from '@tarojs/taro'
+import {
+  useState,
+  isValidElement,
+  cloneElement,
+  useEffect,
+  useCallback,
+} from 'react'
+import toArray from 'rc-util/lib/Children/toArray'
+import { View, Block } from '@tarojs/components'
+import * as utils from '../wxs/utils'
+import { getRect } from '../common/utils'
+import { TabbarProps } from '../../../types/tabbar'
+import { TabbarItemProps } from '../../../types/tabbar-item'
+
+function parseTabList(children: React.ReactNode): any[] {
+  return toArray(children)
+    .map((node: React.ReactElement<TabbarItemProps>) => {
+      if (isValidElement(node)) {
+        const key = node.key !== undefined ? String(node.key) : undefined
+        return {
+          key,
+          ...node.props,
+          node,
+        }
+      }
+
+      return null
+    })
+    .filter((tab) => tab)
+}
+
+export default function Index(props: TabbarProps) {
+  const [state, setState]: any = useState({
+    height: 50,
+    current: 0,
+  })
+  const { height, current } = state
+
+  const {
+    active,
+    activeColor,
+    inactiveColor,
+    border = true,
+    fixed = true,
+    safeAreaInsetBottom = true,
+    zIndex = 1,
+    placeholder,
+    onChange,
+    style,
+    className,
+    children,
+    ...others
+  } = props
+  const _change = useCallback(
+    function (data) {
+      setState((pre: any) => {
+        return {
+          ...pre,
+          current: data,
+        }
+      })
+      onChange?.(data)
+    },
+    [onChange],
+  )
+  const tabs = parseTabList(children)
+  const newChildren: any = tabs.map((tab, index) => {
+    return cloneElement(tab.node, {
+      key: index,
+      index: index,
+      active: current,
+      activeColor: activeColor,
+      inactiveColor: inactiveColor,
+      onChange: _change,
+    })
+  })
+
+  useEffect(
+    function () {
+      setState((pre: any) => {
+        return {
+          ...pre,
+          current: active,
+        }
+      })
+    },
+    [active],
+  )
+
+  useEffect(
+    function () {
+      if (!fixed || !placeholder) {
+        return
+      }
+      Taro.nextTick(() => {
+        getRect(null, '.van-tabbar').then((res: any) => {
+          setState((pre: any) => {
+            return {
+              ...pre,
+              height: res.height,
+            }
+          })
+        })
+      })
+    },
+    [fixed, placeholder],
+  )
+  // useEffect(
+  //   function () {
+  //     if (!Array.isArray(children) || !children.length) {
+  //       return
+  //     }
+  //     children.forEach((child) => child.updateFromParent())
+  //   },
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  //   [active, activeColor, inactiveColor],
+  // )
+
+  return (
+    <Block>
+      <View
+        className={
+          (border ? 'van-hairline--top-bottom' : '') +
+          ' ' +
+          utils.bem('tabbar', {
+            fixed,
+            safe: safeAreaInsetBottom,
+          }) +
+          ' custom-class' +
+          ` ${className}`
+        }
+        style={utils.style([zIndex ? 'z-index: ' + zIndex : '', style])}
+        {...others}
+      >
+        {newChildren}
+      </View>
+      {fixed && placeholder && (
+        <View style={'height: ' + height + 'px;'}></View>
+      )}
+    </Block>
+  )
+}

packages/vantui/src/index.ts

@@ -19,3 +19,5 @@ export { default as Search } from './components/search'
 export { default as Skeleton } from './components/skeleton'
 export { default as Tag } from './components/tag'
 export { default as CountDown } from './components/count-down'
+export { default as Tabbar } from './components/tabbar'
+export { default as TabbarItem } from './components/tabbar-item'

packages/vantui/src/style/components/tabbar-item.less

@@ -10,6 +10,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  flex: 1;
   height: 100%;
   .theme(color, '@tabbar-item-text-color');
   .theme(font-size, '@tabbar-item-font-size');

packages/vantui/types/index.d.ts

@@ -19,3 +19,5 @@ export { Search } from './search.d'
 export { Skeleton } from './skeleton.d'
 export { CountDown } from './count-down.d'
 export { Tag } from './tag.d'
+export { Tabbar } from './tabbar.d'
+export { TabbarItem } from './tabbar-item.d'

packages/vantui/types/tabbar-item.d.ts

@@ -0,0 +1,18 @@
+import { ComponentClass, ReactNode } from 'react'
+import { StandardProps } from '@tarojs/components'
+
+export interface TabbarItemProps extends Omit<StandardProps, 'onClick'> {
+  info: null | string
+  name: null | string | number
+  icon?: string
+  dot?: boolean
+  iconPrefix?: string
+  renderIconactive?: ReactNode
+  renderIcon?: ReactNode
+  children?: ReactNode
+  onClick?: (data: string | number) => void
+}
+
+declare const TabbarItem: ComponentClass<TabbarItemProps>
+
+export { TabbarItem }

packages/vantui/types/tabbar.d.ts

@@ -0,0 +1,19 @@
+import { ComponentClass, ReactNode } from 'react'
+import { StandardProps } from '@tarojs/components'
+
+export interface TabbarProps extends StandardProps {
+  active?: number
+  activeColor?: string
+  inactiveColor?: string
+  fixed?: boolean
+  placeholder?: boolean
+  border?: boolean
+  zIndex?: number
+  safeAreaInsetBottom?: boolean
+  children?: ReactNode
+  onChange?: (data?: string | number) => void
+}
+
+declare const Tabbar: ComponentClass<TabbarProps>
+
+export { Tabbar }