feat:添加通告栏组件

Author: yaochuxia

example/examples/src/routes.tsx

@@ -322,4 +322,12 @@ export const stackPageData: Routes[] = [
   //     description: 'QuickList 最基础的卡片容器，可承载文字、列表、图片、段落。',
   //   },
   // },
+  {
+    name: 'NoticeBar',
+    component: require('./routes/NoticeBar').default,
+    params: {
+      title: 'NoticeBar 通告栏',
+      description: '通告栏',
+    },
+  },
 ];

packages/core/src/NoticeBar/Marquee.tsx

@@ -0,0 +1,153 @@
+import React from 'react'
+import {
+  Animated,
+  Easing,
+  LayoutChangeEvent,
+  StyleProp,
+  Text,
+  TextStyle,
+  View,
+} from 'react-native'
+
+export interface MarqueeProps {
+  text?: React.ReactNode
+  loop?: boolean
+  leading?: number
+  trailing?: number
+  className?: string
+  fps?: number
+  style?: StyleProp<TextStyle>
+  maxWidth?: number
+}
+
+class Marquee extends React.PureComponent<MarqueeProps, any> {
+  static defaultProps = {
+    text: '',
+    loop: false,
+    leading: 500,
+    trailing: 800,
+    fps: 40,
+    maxWidth: 1000,
+  }
+
+  texts: any
+  left: any
+
+  constructor(props: MarqueeProps) {
+    super(props)
+
+    this.texts = {}
+    this.left = new Animated.Value(0)
+    this.state = {
+      twidth: 0,
+      width: 0,
+    }
+  }
+
+  onLayout = (e: LayoutChangeEvent) => {
+    if (this.state.twidth) {
+      return
+    }
+
+    this.setState(
+      {
+        twidth: e.nativeEvent.layout.width,
+      },
+      () => {
+        // onLayout may be earlier than onLayoutContainer on android, can not be sure width < twidth at that time.
+        this.tryStart()
+      },
+    )
+  }
+
+  tryStart() {
+    if (this.state.twidth > this.state.width && this.state.width) {
+      this.startMove()
+    }
+  }
+
+  onLayoutContainer = (e: LayoutChangeEvent) => {
+    if (!this.state.width) {
+      this.setState(
+        {
+          width: e.nativeEvent.layout.width,
+        },
+        () => {
+          this.left.setValue(0)
+          this.tryStart()
+        },
+      )
+    }
+  }
+
+  startMove = () => {
+    const { fps = 40, loop } = this.props
+    const SPPED = (1 / fps) * 1000
+    // tslint:disable-next-line:no-this-assignment
+    const { props } = this
+    Animated.timing(this.left, {
+      toValue: 1,
+      duration: this.state.twidth * SPPED,
+      easing: Easing.linear,
+      delay: props.leading,
+      isInteraction: false,
+      useNativeDriver: true,
+    }).start(() => {
+      if (loop) {
+        this.moveToHeader()
+      }
+    })
+  }
+
+  moveToHeader = () => {
+    Animated.timing(this.left, {
+      toValue: 0,
+      duration: 0,
+      delay: this.props.trailing,
+      isInteraction: false,
+      useNativeDriver: true,
+    }).start(() => {
+      this.startMove()
+    })
+  }
+
+  render() {
+    const { width, twidth } = this.state
+    const { style, text, maxWidth } = this.props
+
+    const textChildren = (
+      <Text
+        onLayout={this.onLayout}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        style={style}>
+        {text}
+      </Text>
+    )
+
+    return (
+      <View
+        style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}
+        onLayout={this.onLayoutContainer}>
+        <Animated.View
+          // tslint:disable-next-line:jsx-no-multiline-js
+          style={{
+            flexDirection: 'row',
+            transform: [
+              {
+                translateX: this.left.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [0, -twidth + width],
+                }),
+              },
+            ],
+            width: maxWidth,
+          }}>
+          {textChildren}
+        </Animated.View>
+      </View>
+    )
+  }
+}
+
+export default Marquee

packages/core/src/NoticeBar/index.tsx

@@ -0,0 +1,119 @@
+import React, {Component} from 'react';
+import { StyleProp, Text, TouchableWithoutFeedback, View, ViewStyle, StyleSheet } from 'react-native';
+import Icon from '../Icon';
+import Marquee, { MarqueeProps } from './Marquee'
+
+
+export type NoticeBarProps = {
+  children?: any;
+  mode?: string;
+  onPress?: any;
+  icon?: any;
+  action?: any;
+  style?: StyleProp<ViewStyle>
+  marqueeProps?: MarqueeProps
+};
+
+export default class NoticeBar extends Component<NoticeBarProps>{
+   constructor(props:any) {
+    super(props)
+    this.state = {
+      show: true,
+    }
+  }
+
+  onPress = () => {
+    const { mode, onPress } = this.props
+    if (onPress) {
+      onPress()
+    }
+    if (mode === 'closable') {
+      this.setState({
+        show: false,
+      })
+    }
+  }
+  render() {
+    let { children, mode, icon, style, action, marqueeProps } = this.props;
+    let operationDom: any = null;
+    icon = typeof icon === 'undefined' ? (<Icon fill="notification" color="#f4333c" />) : (icon);
+    if (mode === 'closable') {
+      operationDom = (
+        <TouchableWithoutFeedback onPress={this.onPress}>
+          <View style={styles.actionWrap}>
+            {action ? action : <Text style={[styles.close]}>×</Text>}
+          </View>
+        </TouchableWithoutFeedback>
+      )
+    } else if (mode === 'link') {
+      operationDom = (
+        <View style={styles.actionWrap}>
+          {action ? action : <Text style={[styles.link]}>∟</Text>}
+        </View>
+      )
+    }
+    const main = (
+      <View style={[styles.notice, style]}>
+        {icon && <View style={styles.left15}>{icon}</View>}
+          <View
+            style={[styles.container, icon ? styles.left6 : styles.left15]}>
+            <Marquee
+              style={styles.content}
+              text={children}
+              {...marqueeProps}
+            />
+          </View>
+          {operationDom}
+      </View>
+      )
+    return (
+      <View>
+        {mode === 'closable' ? (main) : (
+          <TouchableWithoutFeedback onPress={this.onPress}>{ main}</TouchableWithoutFeedback>
+        )}
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  notice: {
+      backgroundColor: '#fffada',
+      height: 36,
+      overflow: 'hidden',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    container: {
+      flex: 1,
+      marginRight: 15,
+      overflow: 'hidden',
+      width: 0, // ios bug: width size is wrong (usecase: with react-navigation).
+    },
+    content: {
+      fontSize: 15,
+      color: '#f4333c',
+    },
+    left6: {
+      marginLeft: 5,
+    },
+    left15: {
+      // marginLeft: 15,
+    },
+    actionWrap: {
+      marginRight: 15,
+    },
+    close: {
+      color: '#f4333c',
+      fontSize: 18,
+      fontWeight: '200',
+      textAlign: 'left',
+    },
+    link: {
+      transform: [{ rotate: '225deg' }],
+      color: '#f4333c',
+      fontSize: 10,
+      fontWeight: '500',
+      textAlign: 'left',
+    },
+});

packages/core/src/index.tsx

@@ -68,12 +68,14 @@ export * from './Rating'
 
 export { default as Timeline } from './Timeline';
 export * from './Timeline';
-export { default as Tabs } from './Tabs'
+export { default as Tabs } from './Tabs';
 export * from './Tabs'
-export { default as QuickList } from './QuickList'
-export * from './QuickList'
-export { default as Card } from './Card'
-export * from './Card'
+export { default as QuickList } from './QuickList';
+export * from './QuickList';
+export { default as Card } from './Card';
+export * from './Card';
+export { default as NoticeBar } from './NoticeBar';
+export * from './NoticeBar';
 
 /**
  * Typography