Feat/3.2.0 (#1697)

Co-authored-by: drl990114 <[email protected]>
Co-authored-by: honlyHuang <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: shixing.peng <[email protected]>
Co-authored-by: P4X666 <[email protected]>

Author: 6 people

.eslintrc.json

@@ -78,7 +78,8 @@
               "^UNSAFE_"
             ]
           }
-        ]
+        ],
+        "@typescript-eslint/ban-ts-comment": "off"
       },
       "settings": {
         "import/ignore": [

README.md

@@ -26,7 +26,7 @@ Taro 是由 [凹凸实验室](https://aotu.io) 倾力打造的多端开发解决
 
 ## 相关链接
 
-- [Taro UI 使用文档](https://taro-ui.jd.com)
+- [Taro UI 使用文档](https://taro-ui.taro.zone)
 - [Taro UI 官方示例](https://github.com/NervJS/taro-ui-demo)
 - [Taro](https://taro.jd.com/)
 - [Taro 物料市场](https://taro-ext.jd.com)

packages/taro-ui-demo-rn/src/pages/view/timeline/index.tsx

@@ -7,7 +7,7 @@ import './index.scss'
 
 export default class TimelinePage extends React.Component {
   public config: Taro.PageConfig = {
-    navigationBarTitleText: 'Taro UI',
+    navigationBarTitleText: 'Taro UI'
   }
 
   public render(): JSX.Element {
@@ -26,7 +26,7 @@ export default class TimelinePage extends React.Component {
                     { title: '刷牙洗脸' },
                     { title: '吃早餐' },
                     { title: '上班' },
-                    { title: '睡觉' },
+                    { title: '睡觉' }
                   ]}
                 ></AtTimeline>
               </View>
@@ -43,7 +43,7 @@ export default class TimelinePage extends React.Component {
                     { title: '刷牙洗脸' },
                     { title: '吃早餐', color: 'green' },
                     { title: '上班', color: 'red' },
-                    { title: '睡觉', color: 'yellow' },
+                    { title: '睡觉', color: 'yellow' }
                   ]}
                 ></AtTimeline>
               </View>
@@ -60,7 +60,7 @@ export default class TimelinePage extends React.Component {
                     { title: '刷牙洗脸', icon: 'check-circle' },
                     { title: '吃早餐', icon: 'clock' },
                     { title: '上班', icon: 'clock' },
-                    { title: '睡觉', icon: 'clock' },
+                    { title: '睡觉', icon: 'clock' }
                   ]}
                 ></AtTimeline>
               </View>
@@ -78,7 +78,7 @@ export default class TimelinePage extends React.Component {
                     { title: '刷牙洗脸' },
                     { title: '吃早餐' },
                     { title: '上班' },
-                    { title: '睡觉' },
+                    { title: '睡觉' }
                   ]}
                 ></AtTimeline>
               </View>
@@ -96,24 +96,48 @@ export default class TimelinePage extends React.Component {
                     {
                       title: '刷牙洗脸',
                       content: ['大概8:00'],
-                      icon: 'check-circle',
+                      icon: 'check-circle'
                     },
                     {
                       title: '吃早餐',
                       content: ['牛奶+面包', '餐后记得吃药'],
-                      icon: 'clock',
+                      icon: 'clock'
                     },
                     {
                       title: '上班',
                       content: ['查看邮件', '写PPT', '发送PPT给领导'],
-                      icon: 'clock',
+                      icon: 'clock'
                     },
-                    { title: '睡觉', content: ['不超过23:00'], icon: 'clock' },
+                    { title: '睡觉', content: ['不超过23:00'], icon: 'clock' }
                   ]}
                 ></AtTimeline>
               </View>
             </View>
           </View>
+
+          {/* 点击节点事件 */}
+          <View className='panel'>
+            <View className='panel__title'>点击节点</View>
+            <View className='panel__content'>
+              <View className='example-item'>
+                <AtTimeline
+                  pending
+                  items={[
+                    { title: '刷牙洗脸' },
+                    { title: '吃早餐' },
+                    { title: '上班' },
+                    { title: '睡觉' }
+                  ]}
+                  onClickItem={index => {
+                    Taro.showToast({
+                      title: `点击了第 ${index} 个节点`,
+                      icon: 'none'
+                    })
+                  }}
+                ></AtTimeline>
+              </View>
+            </View>
+          </View>
         </View>
       </View>
     )

packages/taro-ui-demo/src/pages/layout/card/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AtCard, AtIcon } from 'taro-ui'
+import { AtButton, AtCard, AtIcon } from 'taro-ui'
 import { View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import DocsHeader from '../../components/doc-header'
@@ -117,6 +117,25 @@ export default class CardPage extends React.Component {
                   这也是内容区 可以随意定义功能
                 </AtCard>
               </View>
+              <View className='example-item'>
+                <AtCard
+                  note='小Tips'
+                  extra={
+                    <AtButton size='small' type='primary'>
+                      提交
+                    </AtButton>
+                  }
+                  extraStyle={{
+                    fontSize: '12px',
+                    maxWidth: '200px',
+                    color: '#6190e8'
+                  }}
+                  title='这是个标题'
+                  thumb='http://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png'
+                >
+                  这也是内容区 可以随意定义功能
+                </AtCard>
+              </View>
             </View>
           </View>
 

packages/taro-ui-demo/src/pages/layout/list/index.tsx

@@ -125,7 +125,26 @@ export default class ListPage extends React.Component {
               </View>
             </View>
           </View>
-
+          {/* 自定义图标 */}
+          <View className='panel'>
+            <View className='panel__title'>
+              支持自定义图标(不能与thumb同时存在)
+            </View>
+            <View className='panel__content no-padding'>
+              <View className='example-item'>
+                <AtList>
+                  <AtListItem
+                    title='标题文字'
+                    note='描述信息'
+                    arrow='right'
+                    iconInfo={{ size: 25, color: '#78A4FA', value: 'calendar' }}
+                    thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
+                    icon={<View className='at-icon at-icon-bookmark' />}
+                  />
+                </AtList>
+              </View>
+            </View>
+          </View>
           {/* 无边框 */}
           <View className='panel'>
             <View className='panel__title'>无边框</View>

packages/taro-ui-demo/src/pages/view/timeline/index.tsx

@@ -114,6 +114,30 @@ export default class TimelinePage extends React.Component {
               </View>
             </View>
           </View>
+
+          {/* 点击节点事件 */}
+          <View className='panel'>
+            <View className='panel__title'>点击节点</View>
+            <View className='panel__content'>
+              <View className='example-item'>
+                <AtTimeline
+                  pending
+                  items={[
+                    { title: '刷牙洗脸' },
+                    { title: '吃早餐' },
+                    { title: '上班' },
+                    { title: '睡觉' }
+                  ]}
+                  onClickItem={index => {
+                    Taro.showToast({
+                      title: `点击了第 ${index} 个节点`,
+                      icon: 'none'
+                    })
+                  }}
+                ></AtTimeline>
+              </View>
+            </View>
+          </View>
         </View>
       </View>
     )

packages/taro-ui-docs/components/footer/index.jsx

@@ -24,7 +24,7 @@ const Footer = () => (
           <p>
             <a
               className='link'
-              href='https://taro-ui.jd.com/'
+              href='https://taro-ui.taro.zone/'
               target='_blank'
               rel='noopener noreferrer'
             >
@@ -87,33 +87,27 @@ const Footer = () => (
               微信
               <span className='wechat_qrcode_icon'>
                 <svg
-                  t='1554966525626'
                   className='icon svgicon'
                   viewBox='0 0 1024 1024'
                   version='1.1'
                   xmlns='http://www.w3.org/2000/svg'
-                  p-id='2588'
                   data-spm-anchor-id='a313x.7781069.0.i0'
                 >
                   <path
                     d='M240.071 241.095h59.278v59.278h-59.278v-59.278z'
                     fill=''
-                    p-id='2589'
                   />
                   <path
                     d='M405.959 134.485h-272.611v272.611h106.723v47.445h59.278v-47.445h106.723v-59.278h47.445v-47.445h-47.445l-0.114-165.888zM346.795 347.819h-154.169v-154.055h154.055v154.055h0.114zM240.071 727.154h59.278v59.278h-59.278v-59.278zM726.016 241.095h59.278v59.278h-59.278v-59.278zM512.683 509.042v63.943h59.278v-59.165h47.445v-59.278h-47.445v-47.445h-59.278v101.945zM512.683 725.789v60.643h59.278v-106.723h47.445v-59.278h-106.723v105.358zM571.961 786.432h47.445v47.445h-47.445v-47.445zM453.405 833.877v59.165h118.557v-59.165h-118.557z'
                     fill=''
-                    p-id='2590'
                   />
                   <path
                     d='M678.685 679.709h-59.278v106.723h106.61v-59.278h-47.331v-47.445zM726.016 893.042h166.002v-59.165h-106.723v-47.445h-59.278v106.61zM892.018 513.821v-59.278h-106.723v59.278h106.723zM832.739 727.154h59.278v59.278h-59.278v-59.278zM453.405 347.819h59.278v59.278h-59.278v-59.278zM726.016 454.542v-47.445h166.002v-272.611h-272.611v59.278h-106.723v47.445h106.723v59.165h-47.445v47.445h47.445v59.278h59.278v47.445h47.331zM678.685 193.763h154.055v154.055h-154.055v-154.055zM678.685 572.985h47.331v47.445h-47.331v-47.445zM785.294 679.709h-59.278v47.445h106.723v-106.723h59.278v-47.445h-106.723v106.723zM453.405 241.095h59.278v59.278h-59.278v-59.278zM299.349 513.821h47.445v59.165h-47.445v-59.165zM453.405 454.542h-106.61v59.278h59.165v59.165h47.445v-118.443z'
                     fill=''
-                    p-id='2591'
                   />
                   <path
                     d='M405.959 786.432v-106.723h47.445v-59.278h-213.333v-106.61h-106.723v59.278h59.278v47.445h-59.278v272.611h272.611v-59.278h47.445v-47.445h-47.445zM346.795 833.877h-154.169v-154.169h154.055v154.169h0.114zM453.405 572.985h59.278v47.445h-59.278v-47.445zM619.406 513.821h59.278v59.165h-59.278v-59.165zM726.016 513.821h59.278v59.165h-59.278v-59.165z'
                     fill=''
-                    p-id='2592'
                   />
                 </svg>
               </span>

packages/taro-ui-docs/markdown/card.md

@@ -47,7 +47,7 @@ import { AtCard } from "taro-ui"
 | note   | 元素的辅助信息 | String  | -      | -      |
 | thumb  | 元素的缩略图   | String  | -      | -      |
 | renderIcon | 元素自定义图标 | Jsx | - | - |  
-| extra  | 元素的额外信息 | String  | -      | -      |
+| extra  | 元素的额外信息 | Jsx  | -      | -      |
 | extraStyle | 元素的额外信息自定义样式 | Object | - | - | 
 | isFull | 是否通栏       | Boolean | -      | -      |
 

packages/taro-ui-docs/markdown/list.md

@@ -107,7 +107,29 @@ import { AtList, AtListItem } from "taro-ui"
   />
 </AtList>
 ```
+:::
+
+## 支持图标的 Item
+
+:::demo
 
+```jsx
+<AtList>
+  <AtListItem
+    title='标题文字'
+    note='描述信息'
+    arrow='right'
+    iconInfo={{ size: 25, color: '#78A4FA', value: 'calendar' }}
+    thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
+    icon={<View className='at-icon at-icon-bookmark' />}
+  />
+</AtList>
+```
+:::
+
+::: caution
+
+当 icon、thumb、iconInfo 属性同时存在时，优先级为 icon >  iconInfo > thumb
 :::
 
 ## 无边框的 Item
@@ -149,6 +171,7 @@ import { AtList, AtListItem } from "taro-ui"
 
 :::
 
+
 ## AtList 参数
 
 | 参数      | 说明       | 类型    | 可选值 | 默认值 |
@@ -157,24 +180,26 @@ import { AtList, AtListItem } from "taro-ui"
 
 ## AtListItem 参数
 
-| 参数          | 说明             | 类型                                                                 | 可选值                 | 默认值  |
-| ------------- | ---------------- | -------------------------------------------------------------------- | ---------------------- | ------- |
-| title         | 元素的标题       | JSX.Element                                                          | -                      | -       |
-| disabled      | 是否禁用         | Boolean                                                              | -                      | `false` |
-| note          | 元素的描述信息   | JSX.Element                                                          | -                      | -       |
-| thumb         | 元素的主要缩略图 | String                                                               | -                      | -       |
-| arrow         | 箭头的方向       | String                                                               | `right`,`top`,`down` | -       |
-| extraText     | 额外信息的文本   | JSX.Element                                                          | -                      | -       |
-| extraThumb    | 额外信息的缩略图 | String                                                               | -                      | -       |
-| isSwitch      | 额外信息是否开关 | Boolean                                                              | -                      | `false` |
-| switchColor   | 开关的颜色       | String                                                               | -                      | `#6190E8` |
-| switchIsCheck | 额外信息开关的值 | Boolean                                                              | -                      | `false` |
-| hasBorder     | 是否有边框       | Boolean                                                              | -                      | `true`  |
-| iconInfo      | icon 信息        | {'{ value , size? , color?, prefixClass?,className?,customStyle? }'} | -                      | `true`  |
+| 参数          | 说明             | 类型                                                                 | 可选值               | 默认值    |
+| ------------- | ---------------- | -------------------------------------------------------------------- | -------------------- | --------- |
+| title         | 元素的标题       | JSX.Element                                                          | -                    | -         |
+| disabled      | 是否禁用         | Boolean                                                              | -                    | `false`   |
+| note          | 元素的描述信息   | JSX.Element                                                          | -                    | -         |
+| thumb         | 元素的主要缩略图 | String                                                               | -                    | -         |
+| arrow         | 箭头的方向       | String                                                               | `right`,`top`,`down` | -         |
+| extraText     | 额外信息的文本   | JSX.Element                                                          | -                    | -         |
+| extraThumb    | 额外信息的缩略图 | String                                                               | -                    | -         |
+| isSwitch      | 额外信息是否开关 | Boolean                                                              | -                    | `false`   |
+| switchColor   | 开关的颜色       | String                                                               | -                    | `#6190E8` |
+| switchIsCheck | 额外信息开关的值 | Boolean                                                              | -                    | `false`   |
+| hasBorder     | 是否有边框       | Boolean                                                              | -                    | `true`    |
+| iconInfo      | icon 信息        | {'{ value , size? , color?, prefixClass?,className?,customStyle? }'} | -                    | `true`    |
+| icon          | icon 的内容      | JSX.Element                                                          | -                    | -         |
 
 ## AtListItem 事件
 
 | 事件名称       | 说明                       | 返回参数 |
 | -------------- | -------------------------- | -------- |
 | onClick        | 用户点击元素触发的事件     | -        |
 | onSwitchChange | 用户点击切换 Switch 时触发 | -        |
+

packages/taro-ui-docs/markdown/timeline.md

@@ -106,6 +106,12 @@ import { AtTimeline } from 'taro-ui'
 |:-------------|:----------------------------------------|:----------------|:-----------------|:-------|
 | pending      | 最后一项是否为未完成态                  | Boolean         | -                | false  |
 | items        | 需展示的内容。数组对象参数参考下文 item | Array Of Object | -                | []     |
+| onClickItem  | 点击 item 触发的事件 | (current, e) => void | -                | []     |
+
+## Timeline 事件
+| 事件名称 | 说明          | 返回参数  |
+|---------- |-------------- |---------- |
+| onClickItem | 点击 item 触发的事件 | current,步骤索引值  |
 
 ## items object 字段详解