Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

translation of NoticeBar #1227

Merged
merged 2 commits into from
Apr 28, 2017
Merged

translation of NoticeBar #1227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c035e34
Translation NoticeBar
ddcat1115 Apr 27, 2017
8d86053
update snap
ddcat1115 Apr 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions components/notice-bar/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
]
}
>
国庆期间余额宝收益和转出到账时间
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
</Text>
</View>
<View
Expand Down Expand Up @@ -154,7 +154,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
]
}
>
国庆期间余额宝收益和转出到账时间1
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
</Text>
<View
accessibilityComponentType={undefined}
Expand Down Expand Up @@ -256,7 +256,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
]
}
>
自定义 NoticeBar 前面的图标
Customized icon.
</Text>
<View
accessibilityComponentType={undefined}
Expand Down Expand Up @@ -371,7 +371,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
]
}
>
国庆期间余额宝收益和转出到账时间
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
</Text>
<Text
accessible={true}
Expand Down Expand Up @@ -474,7 +474,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
]
}
>
国庆期间余额宝收益和转出到账时间
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
</Text>
<Text
accessible={true}
Expand Down Expand Up @@ -541,7 +541,7 @@ exports[`renders ./components/notice-bar/demo/basic.tsx correctly 1`] = `
]
}
>
去除 NoticeBar 默认的喇叭图标
Remove the default icon.
</Text>
<View
accessibilityComponentType={undefined}
Expand Down
8 changes: 4 additions & 4 deletions components/notice-bar/__tests__/__snapshots__/demo.test.web.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ exports[`renders ./components/notice-bar/demo/basic.md correctly 1`] = `
class="am-notice-bar-marquee"
style="position:relative;right:0;white-space:nowrap;display:inline-block;padding:0 0.15rem;"
>
国庆期间余额宝收益和转出到账时间通知：由于国庆到来，余额宝收益到账将延迟，特此通知
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
</div>
</div>
</div>
Expand Down Expand Up @@ -67,7 +67,7 @@ exports[`renders ./components/notice-bar/demo/basic.md correctly 1`] = `
class="am-notice-bar-marquee"
style="position:relative;right:0;white-space:nowrap;display:inline-block;"
>
国庆期间余额宝收益和转出到账时间
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
</div>
</div>
</div>
Expand Down Expand Up @@ -100,7 +100,7 @@ exports[`renders ./components/notice-bar/demo/basic.md correctly 1`] = `
class="am-notice-bar-marquee"
style="position:relative;right:0;white-space:nowrap;display:inline-block;"
>
去除 NoticeBar 默认的喇叭图标
Remove the default icon.
</div>
</div>
</div>
Expand Down Expand Up @@ -146,7 +146,7 @@ exports[`renders ./components/notice-bar/demo/basic.md correctly 1`] = `
class="am-notice-bar-marquee"
style="position:relative;right:0;white-space:nowrap;display:inline-block;"
>
自定义 NoticeBar 前面的小图标
Customized icon.
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions components/notice-bar/demo/basic.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,17 @@ const NoticeBarExample = () => (
<div>
<WhiteSpace size="lg" />
<NoticeBar marqueeProps={{ loop: true, style: { padding: '0 0.15rem' } }}>
国庆期间余额宝收益和转出到账时间通知：由于国庆到来，余额宝收益到账将延迟，特此通知
Notice: The arrival time of incomes and transfers of Yu &#39;E Bao will be delayed during National Day.
</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar mode="link" onClick={() => alert('1')}>
国庆期间余额宝收益和转出到账时间
Notice: The arrival time of incomes and transfers of Yu &#39;E Bao will be delayed during National Day.
</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar mode="closable" icon={null}>去除 NoticeBar 默认的喇叭图标</NoticeBar>
<NoticeBar mode="closable" icon={null}>Remove the default icon.</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar mode="closable" icon={<Icon type="check-circle-o" size="xxs" />}>
自定义 NoticeBar 前面的小图标
Customized icon.
</NoticeBar>
</div>
);
Expand Down
18 changes: 12 additions & 6 deletions components/notice-bar/demo/basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,30 @@ export default class NoticeBarExample extends React.Component<any, any> {
return (
<View style={{ marginTop: 10 }}>
<WhiteSpace size="lg" />
<NoticeBar onClick={() => alert('click')}>国庆期间余额宝收益和转出到账时间</NoticeBar>
<NoticeBar onClick={() => alert('click')}>
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar mode="closable" onClick={() => alert('will close')}>
国庆期间余额宝收益和转出到账时间1
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar
mode="closable"
icon={customIcon}
>
自定义 NoticeBar 前面的图标
Customized icon.
</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar mode="link" onClick={() => alert('link')}>国庆期间余额宝收益和转出到账时间</NoticeBar>
<NoticeBar mode="link" onClick={() => alert('link')}>
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar mode="link">国庆期间余额宝收益和转出到账时间</NoticeBar>
<NoticeBar mode="link">
Notice: The arrival time of incomes and transfers of Yu 'E Bao will be delayed during National Day.
</NoticeBar>
<WhiteSpace size="lg" />
<NoticeBar mode="closable" icon={null}>去除 NoticeBar 默认的喇叭图标</NoticeBar>
<NoticeBar mode="closable" icon={null}>Remove the default icon.</NoticeBar>
</View>
);
}
Expand Down
15 changes: 8 additions & 7 deletions components/notice-bar/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,19 @@ type: Data Display
title: NoticeBar
---

在导航栏下方，一般用作系统提醒、活动提醒等通知。
Component to display a system message, event notice and etc. Which is under the navigation bar.

### 规则
- 需要引起用户关注时使用，重要级别低于 Modal ，高于 Toast。
### Rules

- Be used to attract user's attension, the importance level is lower than `Modal` and higher than `Toast`.

## API

Support WEB, React-Native.

Properties | Descrition | Type | Default
-----------|------------|------|--------
| mode | 提示类型，可选`closable`,`link` | String | '' |
| icon | notice 前的图标 | React.Element | `<Icon type={require('./trips.svg')} size="xxs" />`|
| onClick | 点击关闭或者操作区域的回调函数 | (): void | |
| marqueeProps (`web only`) | marquee 参数 | Object | `{loop: false, leading: 500, trailing: 800, fps: 40, style: {}}` |
| mode | Type of NoticeBar, options: `closable` `link` | String | '' |
| icon | To set the icon before notice | React.Element | `<Icon type={require('./trips.svg')} size="xxs" />`|
| onClick | A callback function, can be executed when you close the notice or click on the operating area | (): void | |
| marqueeProps (`web only`) | marquee params | Object | `{loop: false, leading: 500, trailing: 800, fps: 40, style: {}}` |