docs:修改组件,添加文档

uiwjs · Aug 13, 2021 · 67430ea · 67430ea
1 parent 603aae4
commit 67430ea
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 40 deletions.
diff --git a/example/examples/src/routes/NoticeBar/index.tsx b/example/examples/src/routes/NoticeBar/index.tsx
@@ -1,9 +1,9 @@
-import React from 'react'
+import React, {Component} from 'react'
 import { Image, Text, View } from 'react-native'
-import { NoticeBar, WingBlank } from '@uiw/react-native';
+import { NoticeBar, Spacing } from '@uiw/react-native';
 
 
-export default class NoticeBarExample extends React.Component{
+export default class NoticeBarExample extends Component{
   render() {
      const customIcon = (
       <Image
@@ -15,16 +15,41 @@ export default class NoticeBarExample extends React.Component{
       />
     )
     return (
-       <View style={{ marginTop: 10 }}>
-          <WingBlank size="large">
-          {/* marqueeProps.style only support text style props*/}
-          <NoticeBar
-            onPress={() => console.log('click')}
-            marqueeProps={{ loop: true, style: { fontSize: 12, color: 'red' } }}>
-             Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
-             delayed during National Day.
-          </NoticeBar>
-         </WingBlank>
+      <View style={{ marginTop: 10 }}>
+        <NoticeBar
+          onPress={() => console.log('click')}
+          marqueeProps={{ loop: true, style: { fontSize: 12, color: 'red' } }}>
+            Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
+            delayed during National Day.
+        </NoticeBar>
+         <Spacing />
+        <NoticeBar mode="closable" onPress={() => console.log('will close')}>
+          Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
+          delayed during National Day.
+        </NoticeBar>
+         <Spacing />
+        <NoticeBar mode="closable" icon={customIcon}>
+          Customized icon.
+        </NoticeBar>
+        <Spacing />
+        <NoticeBar mode="link" onPress={() => console.log('link')}>
+          Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
+          delayed during National Day.
+        </NoticeBar>
+        <Spacing />
+        <NoticeBar mode="closable" icon={undefined}>
+          Remove the default icon.
+        </NoticeBar>
+        <Spacing />
+        <NoticeBar
+          mode="closable"
+          action={<Text style={{ color: '#a1a1a1' }}>不再提示</Text>}>
+          Closable demo for `actionText`.
+        </NoticeBar>
+        <Spacing />
+        <NoticeBar mode="link" action={<Text>去看看</Text>}>
+          Link demo for `actionText`.
+        </NoticeBar>
       </View>
     )
   }

diff --git a/packages/core/src/NoticeBar/README.md b/packages/core/src/NoticeBar/README.md
@@ -0,0 +1,74 @@
+NoticeBar 通告栏
+---
+
+在导航栏下方，一般用作系统提醒、活动提醒等通知。
+
+### 基础示例
+
+<!--DemoStart--> 
+```jsx
+import React from 'react';
+import {  NoticeBar, Spacing } from '@uiw/react-native';
+
+const NoticeBarExample = () => {
+  const customIcon = (
+    <Image
+      // tslint:disable-next-line:jsx-no-multiline-js
+      source={{
+        uri: 'https://zos.alipayobjects.com/rmsportal/bRnouywfdRsCcLU.png',
+      }}
+      style={{ width: 12, height: 12 }}
+    />
+  )
+  return (
+      <View style={{ marginTop: 10 }}>
+        <NoticeBar
+          onPress={() => console.log('click')}
+          marqueeProps={{ loop: true, style: { fontSize: 12, color: 'red' } }}>
+            Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
+            delayed during National Day.
+        </NoticeBar>
+         <Spacing />
+        <NoticeBar mode="closable" onPress={() => console.log('will close')}>
+          Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
+          delayed during National Day.
+        </NoticeBar>
+         <Spacing />
+        <NoticeBar mode="closable" icon={customIcon}>
+          Customized icon.
+        </NoticeBar>
+        <Spacing />
+        <NoticeBar mode="link" onPress={() => console.log('link')}>
+          Notice: The arrival time of incomes and transfers of Yu 'E Bao will be
+          delayed during National Day.
+        </NoticeBar>
+        <Spacing />
+        <NoticeBar mode="closable" icon={undefined}>
+          Remove the default icon.
+        </NoticeBar>
+        <Spacing />
+        <NoticeBar
+          mode="closable"
+          action={<Text style={{ color: '#a1a1a1' }}>不再提示</Text>}>
+          Closable demo for `actionText`.
+        </NoticeBar>
+        <Spacing />
+        <NoticeBar mode="link" action={<Text>去看看</Text>}>
+          Link demo for `actionText`.
+        </NoticeBar>
+      </View>
+    )
+}
+export default NoticeBarExample;
+```
+<!--End-->
+
+## Props
+
+属性 | 说明 | 类型 | 默认值
+----|-----|------|------
+| mode    | 提示类型，可选 `closable`,`link`   | String |  ''  |
+| icon    | 在开始位置设置图标  |  ReactNode | `<Icon type={require('./trips.svg')} size="xxs" />`|
+| onPress | 点击关闭或者操作区域的回调函数        | (): void |   |
+| marqueeProps | marquee 参数 | Object | `{loop: false, leading: 500, trailing: 800, fps: 40, style: {}}`  |
+| action | 用于替换操作 icon 的文案 | ReactElement | |
diff --git a/packages/core/src/NoticeBar/index.tsx b/packages/core/src/NoticeBar/index.tsx
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {useState} from 'react';
 import { StyleProp, Text, TouchableWithoutFeedback, View, ViewStyle, StyleSheet } from 'react-native';
 import Icon from '../Icon';
 import Marquee, { MarqueeProps } from './Marquee'
@@ -14,32 +14,24 @@ export type NoticeBarProps = {
   marqueeProps?: MarqueeProps
 };
 
-export default class NoticeBar extends Component<NoticeBarProps>{
-   constructor(props:any) {
-    super(props)
-    this.state = {
-      show: true,
-    }
-  }
+export default (props: NoticeBarProps) => {
+  const [show, setShow] = useState(true);
 
-  onPress = () => {
-    const { mode, onPress } = this.props
+  const onPress = () => {
+    const { mode, onPress } = props
     if (onPress) {
-      onPress()
+      onPress();
     }
     if (mode === 'closable') {
-      this.setState({
-        show: false,
-      })
+      setShow(false)
     }
   }
-  render() {
-    let { children, mode, icon, style, action, marqueeProps } = this.props;
+    let { children, mode, icon, style, action, marqueeProps } = props;
     let operationDom: any = null;
-    icon = typeof icon === 'undefined' ? (<Icon fill="notification" color="#f4333c" />) : (icon);
+    icon = typeof icon === 'undefined' ? (<Icon name="notification" color="#f4333c" size={15} />) : (icon);
     if (mode === 'closable') {
       operationDom = (
-        <TouchableWithoutFeedback onPress={this.onPress}>
+        <TouchableWithoutFeedback onPress={onPress}>
           <View style={styles.actionWrap}>
             {action ? action : <Text style={[styles.close]}>×</Text>}
           </View>
@@ -65,15 +57,14 @@ export default class NoticeBar extends Component<NoticeBarProps>{
           </View>
           {operationDom}
       </View>
-      )
-    return (
-      <View>
-        {mode === 'closable' ? (main) : (
-          <TouchableWithoutFeedback onPress={this.onPress}>{ main}</TouchableWithoutFeedback>
-        )}
-      </View>
     )
-  }
+  return (
+    <View>
+      {show ? (mode === 'closable' ? (main) : (
+        <TouchableWithoutFeedback onPress={onPress}>{ main}</TouchableWithoutFeedback>
+      )) : null}
+    </View>
+  )
 }
 
 const styles = StyleSheet.create({
@@ -83,6 +74,7 @@ const styles = StyleSheet.create({
       overflow: 'hidden',
       flexDirection: 'row',
       alignItems: 'center',
+      color: '#f4333c',
     },
     container: {
       flex: 1,
@@ -98,7 +90,7 @@ const styles = StyleSheet.create({
       marginLeft: 5,
     },
     left15: {
-      // marginLeft: 15,
+      marginLeft: 15,
     },
     actionWrap: {
       marginRight: 15,