Merge pull request #11 from olyy111/NoticeBar

feat: add NoticeBar
mulcloud · Aug 7, 2020 · af5fead · af5fead
2 parents 4fb1540 + c853bd4
commit af5fead
Show file tree

Hide file tree

Showing 8 changed files with 242 additions and 187 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@
 /node_modules
 *.bak
 /site
-yarn-error.log
+yarn-error.log
+**/**/.DS_Store
diff --git a/components/notice-bar/README.md b/components/notice-bar/README.md
@@ -2,7 +2,7 @@
 
 ### Install
 
-```js;
+```js
 import { NoticeBar } from '@trillion/muld';
 ```
 
@@ -22,15 +22,15 @@ import { NoticeBar } from '@trillion/muld';
 
 <!-- Disable scroll when text is long -->
 <NoticeBar
-  scrollable="false"
+  scrollable
   text="Technology is the common soul of the people who developed it."
 />
 ```
 
 ### Wrapable
 
 ```html
-<NoticeBar wrapable scrollable="false">
+<NoticeBar wrapable scrollable={false}">
   Notice Content
 </NoticeBar>
 ```
@@ -50,12 +50,11 @@ import { NoticeBar } from '@trillion/muld';
 ### Custom Style
 
 ```html
-<NoticeBar color="#1989fa" background="#ecf9ff" left-icon="info-o">
+<NoticeBar color="#1989fa" background="#ecf9ff" leftIcon="info-o">
   Notice Content
 </NoticeBar>
 ```
 
-
 ## API
 
 ### Props
@@ -66,24 +65,16 @@ import { NoticeBar } from '@trillion/muld';
 | text | Notice text content | _string_ | `''` | - |
 | color | Text color | _string_ | `#f60` |
 | background | Background color | _string_ | `#fff7cc` |
-| left-icon | Left Icon | _string_ | - |
-| delay | Animation delay (s) | _number \| string_ | `1` |
-| speed | Scroll speed (px/s) | _number \| string_ | `50` |
+| leftIcon | Left Icon | _string_ | - |
+| delay | Animation delay (s) | _number_ | `1` |
+| speed | Scroll speed (px/s) | _number_ | `50` |
 | scrollable | Whether to scroll content | _boolean_ | - |
 | wrapable | Whether to enable text wrap | _boolean_ | `false` | - |
 
 ### Events
 
 | Event           | Description                    | Arguments      |
 | --------------- | ------------------------------ | -------------- |
-| click           | Triggered when click NoticeBar | _event: Event_ |
-| close           | Triggered when closed          | _event: Event_ |
-| replay `v2.6.2` | Triggered when replay          | -              |
-
-### Slots
-
-| Name       | Description         |
-| ---------- | ------------------- |
-| default    | Notice text content |
-| left-icon  | Custom left icon    |
-| right-icon | Custom right icon   |
+| onClick           | Triggered when click NoticeBar | _event: React.MouseEvent__ |
+| onClose           | Triggered when closed          | _event: React.MouseEvent__ |
+| onReplay     | Triggered when replay          | -              |
diff --git a/components/notice-bar/README.zh-CN.md b/components/notice-bar/README.zh-CN.md
@@ -1,3 +1,4 @@
+
 # NoticeBar 通知栏
 
 ### 引入
@@ -82,24 +83,17 @@ import { NoticeBar } from '@trillion/muld';
 | text | 通知文本内容 | _string_ | `''` |
 | color | 通知文本颜色 | _string_ | `#f60` |
 | background | 滚动条背景 | _string_ | `#fff7cc` |
-| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
-| delay | 动画延迟时间 (s) | _number \| string_ | `1` |
-| speed | 滚动速率 (px/s) | _number \| string_ | `50` |
+| leftIcon | 左侧[图标名称](#/zh-CN/icon) | _string_ | - |
+| delay | 动画延迟时间 (s) | _number_  | `1` |
+| speed | 滚动速率 (px/s) | _number_ | `50` |
 | scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_ | - |
 | wrapable | 是否开启文本换行，只在禁用滚动时生效 | _boolean_ | `false` |
 
 ### Events
 
 | 事件名          | 说明                         | 回调参数       |
 | --------------- | ---------------------------- | -------------- |
-| click           | 点击通知栏时触发             | _event: Event_ |
-| close           | 关闭通知栏时触发             | _event: Event_ |
-| replay `v2.6.2` | 每当滚动栏重新开始滚动时触发 | -              |
-
-### Slots
+| onClick            | 点击通知栏时触发             | _event: React.MouseEvent_|
+| onClose           | 关闭通知栏时触发             | _event: React.MouseEvent_ |
+| onReplay          | 每当滚动栏重新开始滚动时触发 | -              |
 
-| 名称       | 内容           |
-| ---------- | -------------- |
-| default    | 通知文本内容   |
-| left-icon  | 自定义左侧图标 |
-| right-icon | 自定义右侧图标 |
diff --git a/components/notice-bar/demo/index.tsx b/components/notice-bar/demo/index.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import DemoSection from '@trillion/muld-tools/site/mobile/layout/DemoSection';
+import DemoBlock from '@trillion/muld-tools/site/mobile/layout/DemoBlock';
+import styled from 'styled-components';
+import NoticeBar from '..';
+import { $padding_base } from '../../style/var';
+
+export default function NoticeBarDemo() {
+    function onClose() {
+        console.log('closed!!');
+    }
+    const longText = '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。';
+    const shortText = '技术是开发它的人的共同灵魂。';
+    return (
+        <View className="demo-notice-bar">
+            <DemoBlock title="基础用法">
+                <NoticeBar leftIcon="volume-o" text={longText} />
+            </DemoBlock>
+            <DemoBlock title="滚动播放">
+                <div className="demo-row">
+                    <NoticeBar scrollable={true} text={shortText} />
+                </div>
+                <NoticeBar scrollable={false} text={longText} />
+            </DemoBlock>
+            <DemoBlock title="多行展示">
+                <NoticeBar wrapable scrollable={false} text={longText} />
+            </DemoBlock>
+            <DemoBlock title="通知栏模式">
+                <div className="demo-row">
+                    <NoticeBar mode="closeable" onClose={onClose}>
+                        {shortText}
+                    </NoticeBar>
+                </div>
+                <NoticeBar mode="link" text={shortText} />
+            </DemoBlock>
+            <DemoBlock title="自定义样式">
+                <NoticeBar leftIcon="info-o" color="#1989fa" background="#ecf9ff" text={longText} />
+            </DemoBlock>
+        </View>
+    );
+}
+
+const View = styled(DemoSection)`
+    &.demo-notice-bar {
+        background: #fff;
+        .demo-row {
+            margin-bottom: ${$padding_base};
+        }
+    }
+`;