+
+
- {props.children || text}
+ {text || children}
- {/* {RightIcon()} */}
+
- );
+ ) : null;
};
-export default withDefaultProps(React.memo(NoticeBar), defaultProps);
+export default withDefaultProps(NoticeBar, defaultProps);
diff --git a/components/notice-bar/style.tsx b/components/notice-bar/style.tsx
index 796984a..eb1049f 100644
--- a/components/notice-bar/style.tsx
+++ b/components/notice-bar/style.tsx
@@ -1,30 +1,36 @@
import styled from 'styled-components';
import { $notice_bar } from '../style/var';
+import { ellipsis } from '../style/mixins/ellipsis';
-export const View = styled.div`
+type ViewProps = {
+ background?: string;
+ color?: string;
+};
+
+export const View = styled.div
`
&.mul-notice-bar {
position: relative;
display: flex;
align-items: center;
height: ${$notice_bar.height};
padding: ${$notice_bar.padding};
- color: ${$notice_bar.text_color};
+ color: ${(props: ViewProps) => props.color || $notice_bar.text_color};
font-size: ${$notice_bar.font_size};
line-height: ${$notice_bar.line_height};
- background-color: ${$notice_bar.background_color};
+ background-color: ${(props: ViewProps) => props.background || $notice_bar.background_color};
- &__left-icon,
- &__right-icon {
+ .mul-notice-bar__left-icon,
+ .mul-notice-bar__right-icon {
min-width: ${$notice_bar.icon_min_width};
font-size: ${$notice_bar.icon_size};
}
- &__right-icon {
+ .mul-notice-bar__right-icon {
text-align: right;
cursor: pointer;
}
- &__wrap {
+ .mul-notice-bar__wrap {
position: relative;
display: flex;
flex: 1;
@@ -33,30 +39,28 @@ export const View = styled.div`
overflow: hidden;
}
- &__content {
+ .mul-notice-bar__content {
position: absolute;
white-space: nowrap;
transition-timing-function: linear;
&.mul-ellipsis {
max-width: 100%;
+ ${ellipsis()}
}
}
&--wrapable {
height: auto;
padding: ${$notice_bar.wrapable_padding};
+ .mul-notice-bar__wrap {
+ height: auto;
+ }
- .mul-notice-bar {
- &__wrap {
- height: auto;
- }
-
- &__content {
- position: relative;
- white-space: normal;
- word-wrap: break-word;
- }
+ .mul-notice-bar__content {
+ position: relative;
+ white-space: normal;
+ word-wrap: break-word;
}
}
}
diff --git a/components/notice-bar/test/index.test.tsx b/components/notice-bar/test/index.test.tsx
new file mode 100644
index 0000000..72de795
--- /dev/null
+++ b/components/notice-bar/test/index.test.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import 'regenerator-runtime';
+import NoticeBar from '../index';
+
+const EventDemo = (props: any) => {
+ const [text, setText] = React.useState('');
+ const onClick = () => {
+ setText('clicked');
+ };
+ const onReplay = () => {
+ setText('transitionend');
+ };
+ return (
+
+ {text}
+
+ );
+};
+
+describe('NoticeBar', () => {
+ afterEach(cleanup);
+ it('click event valid', () => {
+ const { container } = render();
+ const content = container.querySelector('.mul-notice-bar__content');
+ fireEvent.click(content!);
+ expect(content?.textContent).toBe('clicked');
+ });
+ it('close event valid', () => {
+ const { container } = render();
+ const rightIcon = container.querySelector('.mul-notice-bar__right-icon');
+
+ fireEvent.click(rightIcon!);
+ expect(container).toBeEmpty();
+ });
+ it('replay event valid', () => {
+ const { container } = render();
+ const content = container.querySelector('.mul-notice-bar__content');
+ fireEvent.transitionEnd(content!);
+ expect(content?.textContent).toBe('transitionend');
+ });
+});
diff --git a/components/style/var.ts b/components/style/var.ts
index c8550dc..cc3348b 100644
--- a/components/style/var.ts
+++ b/components/style/var.ts
@@ -219,15 +219,15 @@ export const $nav_bar = {
// NoticeBar
export const $notice_bar = {
- height: `40px`,
+ height: '40px',
padding: `0 ${$padding_md}`,
wrapable_padding: `${$padding_xs} ${$padding_md}`,
text_color: `${$orange_dark}`,
font_size: `${$font_size_md}`,
- line_height: `24px`,
+ line_height: '24px',
background_color: `${$orange_light}`,
- icon_size: `16px`,
- icon_min_width: `24px`,
+ icon_size: '16px',
+ icon_min_width: '24px',
};
// Notify