Merge remote-tracking branch 'upstream/nutui-react-dev' into nutui-react

src/config.json

@@ -211,7 +211,28 @@
     },
     {
       "name": "导航组件",
-      "packages": []
+      "packages": [
+        {
+          "version": "1.0.0",
+          "name": "NavBar",
+          "type": "component",
+          "cName": "导航组件",
+          "desc": "提供导航功能。",
+          "sort": 1,
+          "show": true,
+          "author": "dsj"
+        },
+        {
+          "version": "1.0.0",
+          "name": "Tabbar",
+          "type": "component",
+          "cName": "标签栏组件",
+          "desc": "底部导航常用场景",
+          "sort": 2,
+          "show": true,
+          "author": "dsj"
+        }
+      ]
     },
     {
       "name": "数据录入",

src/packages/navbar/demo.tsx

+import React from 'react'
+import { NavBar } from './navbar'
+
+const NavBarDemo = () => {
+  return (
+    <>
+      <div className="demo">
+        <h2>基础用法</h2>
+        <NavBar
+          title="订单详情"
+          icon="share"
+          leftShow={true}
+          onClickTitle={(e) => alert('标题')}
+          onClickBack={(e) => alert('返回')}
+          onClickIcon={(e) => alert('icon')}
+        ></NavBar>
+        <NavBar
+          title="浏览记录"
+          desc="清空"
+          leftShow={true}
+          onClickTitle={(e) => alert('标题')}
+          onClickBack={(e) => alert('返回')}
+          onClickClear={(e) => alert('清空')}
+        ></NavBar>
+        <NavBar
+          title="购物车"
+          icon="more"
+          desc="编辑"
+          titIcon="locationg3"
+          onClickTitle={(e) => alert('标题')}
+          onClickBack={(e) => alert('返回')}
+          onClickClear={(e) => alert('编辑')}
+          onClickIcon={(e) => alert('icon')}
+        ></NavBar>
+      </div>
+    </>
+  )
+}
+
+export default NavBarDemo

src/packages/navbar/doc.md

+# Navbar 头部导航
+
+### 介绍 
+
+
+提供导航功能。
+
+### 安装
+
+```javascript
+
+
+
+```
+
+### 代码示例
+
+### 基本用法
+
+```html
+   <NavBar
+      title="订单详情"
+      icon="share"
+      leftShow={true}
+      onClickTitle={(e) => alert('标题')}
+      onClickBack={(e) => alert('返回')}
+      onClickIcon={(e) => alert('icon')}
+    ></NavBar>
+    <NavBar
+      title="浏览记录"
+      desc="清空"
+      leftShow={true}
+      onClickTitle={(e) => alert('标题')}
+      onClickBack={(e) => alert('返回')}
+      onClickClear={(e) => alert('清空')}
+    ></NavBar>
+    <NavBar
+      title="购物车"
+      icon="more"
+      desc="编辑"
+      titIcon="locationg3"
+      onClickTitle={(e) => alert('标题')}
+      onClickBack={(e) => alert('返回')}
+      onClickClear={(e) => alert('编辑')}
+      onClickIcon={(e) => alert('icon')}
+    ></NavBar>
+
+```
+
+### 设置slot:tabs可以增加tab
+
+```html
+    <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-clear="edit" @on-click-send="list" desc="编辑" icon="horizontal">
+      <template v-slot:tabs>
+        <nut-tab>
+          <nut-tab-panel tab-title="商品"><p class="content">这里是页签全部内容</p></nut-tab-panel>
+          <nut-tab-panel tab-title="店铺"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
+        </nut-tab>
+      </template>
+    </nut-navbar>
+```
+
+### 多tab切换导航及增加右侧按钮
+
+```html
+    <nut-navbar @on-click-back="back" icon="share" @on-click-send="send">
+      <template v-slot:tabs>
+        <nut-tab>
+          <nut-tab-panel tab-title="商品"><p class="content">这里是页签全部内容</p></nut-tab-panel>
+          <nut-tab-panel tab-title="评价"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
+          <nut-tab-panel tab-title="详情"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
+          <nut-tab-panel tab-title="推荐"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
+        </nut-tab>
+      </template>
+
+      <template #icons >
+        <nut-icon class="icon" name="more" @on-click-slot-send="morelist"></nut-icon>
+      </template>
+    </nut-navbar>
+```
+
+### Prop  
+
+| 字段            | 说明                                                                                           | 类型    | 默认值  |
+|-----------------|------------------------------------------------------------------------------------------------|---------|---------|
+| title           | 标题名称                                                                                       | String  | -       |
+| desc            | 右侧描述                                                                                       | String  | -       |
+| left-show        | 是否展示左侧箭头                                                                              | Boolean | false   |
+| icon            | 左侧 [图标名称](#/icon) 或图片链接                                                             | String  | -       |
+| tit-icon         | 标题带icon                                                         | String  | -       |                                          
+
+### Event
+| 名称  | 说明     | 回调参数    |
+|-------|----------|-------------|
+| onClickTitle | 点击页面标题事件 | event:Event |
+| onClickClear | 点击右侧文案事件 | event:Event |
+| onClickBack | 点击返回上一页事件 | event:Event |
+| onClickIcon | 点击右侧icon事件 | event:Event |
\ No newline at end of file

src/packages/navbar/index.ts

+import { NavBar } from './navbar'
+export default NavBar

src/packages/navbar/navbar.scss

+.nut-navbar {
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 44px;
+  padding: 13px 16px;
+  background: #fff;
+  box-shadow: 0 1px 7px 0 #edeef1;
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 20px;
+  &__back {
+    padding: 0 16px;
+    &:before {
+      content: '\e673';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  &__icon {
+    display: flex;
+    margin-left: 16px;
+    .nut-icon:before {
+      max-width: 100%;
+    }
+  }
+  &__title {
+    flex: 1;
+    text-align: center;
+  }
+}

src/packages/navbar/navbar.tsx

+import React, { FunctionComponent } from 'react'
+import Icon from '../icon'
+import bem from '@/utils/bem'
+import './navbar.scss'
+
+export interface NavBarProps {
+  title: string
+  desc: string
+  leftShow: boolean
+  icon: string
+  titIcon: string
+  onClickTitle: (e: React.MouseEvent<HTMLDivElement>) => void
+  onClickIcon: (e: React.MouseEvent<HTMLDivElement>) => void
+  onClickBack: (e: React.MouseEvent<HTMLElement>) => void
+  onClickClear: (e: React.MouseEvent<HTMLDivElement>) => void
+}
+const defaultProps = {
+  title: '',
+  desc: '',
+  leftShow: false,
+  icon: '',
+  titIcon: '',
+} as NavBarProps
+export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
+  const {
+    desc,
+    icon,
+    title,
+    titIcon,
+    leftShow,
+    onClickTitle,
+    onClickIcon,
+    onClickBack,
+    onClickClear,
+  } = {
+    ...defaultProps,
+    ...props,
+  }
+  const b = bem('navbar')
+  return (
+    <div className="nut-navbar">
+      {leftShow && (
+        <i
+          className={['nut-icon', 'nutui-iconfont', `${b('back')}`].join(' ')}
+          onClick={(e) => onClickBack(e)}
+        ></i>
+      )}
+      <div className={`${b('title')}`} onClick={(e) => onClickTitle(e)}>
+        {title}
+        {titIcon && <Icon name={titIcon} />}
+      </div>
+      <div className={`${b('desc')}`} onClick={(e) => onClickClear(e)}>
+        {desc}
+      </div>
+      {icon && (
+        <div className={`${b('icon')}`} onClick={(e) => onClickIcon(e)}>
+          <Icon name={icon} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+NavBar.defaultProps = defaultProps
+NavBar.displayName = 'NutNavBar'

src/packages/tabbar/demo.tsx

+import React from 'react'
+import { Tabbar, TabbarProps } from './tabbar'
+//@ts-ignore todo..
+const { TabbarItem } = Tabbar
+const TabbarDemo = () => {
+  return (
+    <>
+      <div className="demo">
+        <h2>基础用法</h2>
+        <Tabbar
+          tabSwitch={(child, idx) => {
+            alert(idx)
+          }}
+        >
+          <TabbarItem tabTitle="首页" icon="home"></TabbarItem>
+          <TabbarItem tabTitle="分类" icon="category"></TabbarItem>
+          <TabbarItem tabTitle="发现" icon="find"></TabbarItem>
+          <TabbarItem tabTitle="购物车" icon="cart"></TabbarItem>
+          <TabbarItem tabTitle="我的" icon="my"></TabbarItem>
+        </Tabbar>
+
+        <h2>自定义选中</h2>
+        <Tabbar visible={2}>
+          <TabbarItem tabTitle="首页" icon="home"></TabbarItem>
+          <TabbarItem tabTitle="分类" icon="category"></TabbarItem>
+          <TabbarItem tabTitle="发现" icon="find"></TabbarItem>
+          <TabbarItem tabTitle="购物车" icon="cart"></TabbarItem>
+          <TabbarItem tabTitle="我的" icon="my"></TabbarItem>
+        </Tabbar>
+
+        <h2>徽标提示</h2>
+        <Tabbar>
+          <TabbarItem tabTitle="首页" icon="home" num="11"></TabbarItem>
+          <TabbarItem tabTitle="分类" icon="category"></TabbarItem>
+          <TabbarItem tabTitle="发现" icon="find"></TabbarItem>
+          <TabbarItem tabTitle="购物车" icon="cart" num="110"></TabbarItem>
+          <TabbarItem tabTitle="我的" icon="my"></TabbarItem>
+        </Tabbar>
+
+        <h2>自定义颜色</h2>
+        <Tabbar unactiveColor="#7d7e80" activeColor="#1989fa">
+          <TabbarItem tabTitle="首页" icon="home"></TabbarItem>
+          <TabbarItem tabTitle="分类" icon="category"></TabbarItem>
+          <TabbarItem tabTitle="发现" icon="find"></TabbarItem>
+          <TabbarItem tabTitle="购物车" icon="cart"></TabbarItem>
+          <TabbarItem tabTitle="我的" icon="my"></TabbarItem>
+        </Tabbar>
+        <h2>三个icon的tabbar</h2>
+        <Tabbar unactiveColor="#7d7e80" activeColor="#1989fa">
+          <TabbarItem tabTitle="首页" icon="home"></TabbarItem>
+          <TabbarItem tabTitle="分类" icon="category"></TabbarItem>
+          <TabbarItem tabTitle="发现" icon="find"></TabbarItem>
+        </Tabbar>
+        <h2>固定底部，可自由跳转</h2>
+        <Tabbar bottom={true}>
+          <TabbarItem tabTitle="首页" href="" icon="home"></TabbarItem>
+          <TabbarItem tabTitle="分类" icon="category"></TabbarItem>
+          <TabbarItem tabTitle="发现" icon="find"></TabbarItem>
+          <TabbarItem tabTitle="购物车" href="https://m.jd.com" icon="cart"></TabbarItem>
+          <TabbarItem tabTitle="我的" href="######" icon="my"></TabbarItem>
+        </Tabbar>
+      </div>
+    </>
+  )
+}
+
+export default TabbarDemo

src/packages/tabbar/doc.md

+#  Tabbar组件
+
+### 介绍
+
+基于 xxxxxxx
+
+### 安装
+
+
+
+## 代码演示
+
+### 基础用法1
+
+
+
+## API
+
+### Props
+
+| 参数         | 说明                             | 类型   | 默认值           |
+|--------------|----------------------------------|--------|------------------|
+| name         | 图标名称或图片链接               | String | -                |
+| color        | 图标颜色                         | String | -                |
+| size         | 图标大小，如 '20px' '2em' '2rem' | String | -                |
+| class-prefix | 类名前缀，用于使用自定义图标     | String | 'nutui-iconfont' |
+| tag          | HTML 标签                        | String | 'i'              |
+
+### Events
+
+| 事件名 | 说明           | 回调参数     |
+|--------|----------------|--------------|
+| click  | 点击图标时触发 | event: Event |

src/packages/tabbar/index.ts

+import { Tabbar } from './tabbar'
+export default Tabbar

src/packages/tabbar/tabbar.scss

+.nut-tabbar {
+  border: 0px;
+  border-bottom: 1px solid $tabbar-border-color;
+  border-top: 1px solid $tabbar-border-color;
+  width: 100%;
+  display: flex;
+  height: 50px;
+  box-sizing: border-box;
+  background: $white;
+
+  &:last-child {
+    border-right: 0;
+  }
+  &__bottom {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    z-index: 888;
+  }
+}

src/packages/tabbar/tabbar.tsx

+import React, { FunctionComponent, ReactComponentElement, useState } from 'react'
+import './tabbar.scss'
+import bem from '@/utils/bem'
+import { TabbarItem } from '../tabbaritem/tabbarItem'
+
+export interface TabbarProps {
+  visible: number | string
+  bottom: boolean
+  type: string
+  size: string
+  unactiveColor: string
+  activeColor: string
+  tabSwitch: (child: React.ReactElement<any>, active: number) => void
+}
+const defaultProps = {
+  visible: 0,
+  bottom: false,
+  type: '',
+  size: '',
+  unactiveColor: '',
+  activeColor: '',
+  tabSwitch: () => {},
+} as TabbarProps
+
+export const Tabbar: FunctionComponent<Partial<TabbarProps>> = (props) => {
+  const { children, visible, bottom, activeColor, unactiveColor, tabSwitch } = {
+    ...defaultProps,
+    ...props,
+  }
+
+  const b = bem('tabbar')
+
+  const [selectIndex, setSelectIndex] = useState(visible)
+
+  const handleClick = (idx: number) => {
+    setSelectIndex(idx)
+  }
+
+  return (
+    <div className={[`${b()}`, bottom ? `${b('bottom')}` : ''].join(' ')}>
+      {React.Children.map(children, (child, idx) => {
+        if (!React.isValidElement(child)) {
+          return null
+        }
+        const childProps = {
+          ...child.props,
+          active: idx === selectIndex,
+          index: idx,
+          unactiveColor: unactiveColor,
+          activeColor: activeColor,
+          handleClick: () => {
+            handleClick(idx)
+            tabSwitch(child, idx)
+          },
+        }
+        return React.cloneElement(child, childProps)
+      })}
+    </div>
+  )
+}
+//@ts-ignore  todo...
+Tabbar.TabbarItem = TabbarItem
+Tabbar.defaultProps = defaultProps
+Tabbar.displayName = 'NutTabbar'

src/packages/tabbaritem/tabbarItem.scss

+.nut-tabbar-item {
+  flex: 1;
+  text-align: center;
+  text-decoration: none;
+  color: $primary-color;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &--unactive {
+    color: $black;
+  }
+
+  &__icon-box {
+    padding: 0px;
+    display: inline-block;
+    position: relative;
+
+    &__tips {
+      position: absolute;
+      background: $tabbar-active-color;
+      border: 1px solid $white;
+      border-radius: 7px;
+      text-align: center;
+      top: -2px;
+      right: -7px;
+      box-shadow: 0 0 0 1px $white;
+      font-size: $font-size-1;
+      color: $white;
+      z-index: 1;
+    }
+
+    &__num {
+      line-height: 1;
+      font-size: $font-size-0;
+      color: $white;
+      padding: 1px 2px 2px 3px;
+    }
+
+    &__nums {
+      line-height: 1;
+      font-size: $font-size-0;
+      color: $white;
+      padding: 2px 1px 2px 2px;
+    }
+    &_icon {
+      display: block;
+      background-size: 100% 100%;
+      background-position: center center;
+    }
+    &--nav-word {
+      font-size: $font-size-0;
+      display: block;
+    }
+    &--big-word {
+      font-size: $font-size-large;
+      line-height: 1;
+    }
+  }
+}

src/packages/tabbaritem/tabbarItem.tsx

+import React, { FunctionComponent, useEffect } from 'react'
+import './tabbaritem.scss'
+import bem from '@/utils/bem'
+import Icon from '../icon'
+
+export interface TabbarItemProps {
+  tabTitle: string
+  icon: string
+  href: string
+  num: string | number
+  active: boolean
+  activeColor: string
+  unactiveColor: string
+  index: number
+  handleClick: (idx: number) => void
+}
+const defaultProps = {
+  tabTitle: '',
+  icon: '',
+  href: '',
+  num: '',
+  active: false,
+  activeColor: '',
+  unactiveColor: '',
+  index: 0,
+  handleClick: (idx) => {},
+} as TabbarItemProps
+
+export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (props) => {
+  const { tabTitle, icon, href, num, active, activeColor, unactiveColor, index, handleClick } = {
+    ...defaultProps,
+    ...props,
+  }
+  const b = bem('tabbar-item')
+  const bIcon = bem('tabbar-item__icon-box')
+
+  useEffect(() => {
+    if (active && href) {
+      window.location.href = href
+    }
+  }, [active])
+
+  return (
+    <div
+      className={`${b({ unactive: !active })}`}
+      style={{
+        color: active ? activeColor : unactiveColor,
+      }}
+      onClick={() => {
+        handleClick(index)
+      }}
+    >
+      <div className={`${bIcon()}`}>
+        {num && num <= 99 && <div className={`${bIcon('tips', [bIcon('num')])}`}>{num}</div>}
+        {num && num >= 100 && <div className={`${bIcon('tips', [bIcon('nums')])}`}>99+</div>}
+        {icon && (
+          <div>
+            <Icon size={20} name={icon}></Icon>
+          </div>
+        )}
+        <div className={bIcon({ 'nav-word': true }, [bIcon({ 'big-word': !icon })])}>
+          {tabTitle}
+        </div>
+      </div>
+    </div>
+  )
+}