Skip to content

Commit ad30859

Browse files
Lukas742Lukas742
committed
fix(Notification): removed 'visible', 'isChild' and 'isLastChild' prop, renamed 'showCloseButton' and 'hideShowMoreButton'
1 parent 0cd1c08 commit ad30859

File tree

7 files changed

+29
-56
lines changed

7 files changed

+29
-56
lines changed

‎packages/main/src/components/Notification/Notification.test.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,20 +38,14 @@ describe('Notification', () => {
3838
datetime="1337 Minutes ago"
3939
avatar="ME"
4040
priority={Priority.High}
41-
visible
42-
hideShowMoreButton={false}
43-
showCloseButton
41+
noShowMoreButton={false}
42+
noCloseButton={false}
4443
truncate
4544
/>
4645
);
4746
expect(wrapper).toMatchSnapshot();
4847
});
4948

50-
test('Hidden', () => {
51-
const wrapper = renderThemedComponent(<Notification visible={false} />);
52-
expect(wrapper).toMatchSnapshot();
53-
});
54-
5549
test('w/ custom Avatar', () => {
5650
const wrapper = renderThemedComponent(
5751
<Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />

‎packages/main/src/components/Notification/__snapshots__/Notification.test.tsx.snap‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,6 @@ exports[`Notification Default 1`] = `
7070
</div>
7171
`;
7272

73-
exports[`Notification Hidden 1`] = `null`;
74-
7573
exports[`Notification Long Title and Description 1`] = `
7674
<div
7775
class="Notification--notificationContainer- undefined"

‎packages/main/src/components/Notification/demo.stories.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,10 @@ export const defaultStory = () => (
3030
datetime={text('datetime', 'Datetime')}
3131
avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />}
3232
priority={select('priority', Priority, Priority.None)}
33-
visible={boolean('visible', true)}
3433
onClick={action('Notification clicked')}
35-
hideShowMoreButton={boolean('hideShowMoreButton', false)}
34+
noShowMoreButton={boolean('noShowMoreButton', false)}
3635
truncate={boolean('truncate', true)}
37-
showCloseButton={boolean('showCloseButton', true)}
36+
noCloseButton={boolean('noCloseButton', false)}
3837
onClose={action('Closed')}
3938
/>
4039
);

‎packages/main/src/components/Notification/index.tsx‎

Lines changed: 13 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,15 @@ export interface NotificationProptypes extends CommonProps {
2727
loading?: boolean;
2828
datetime?: string;
2929
priority?: Priority;
30-
showCloseButton?: boolean;
31-
visible?: boolean;
30+
noCloseButton?: boolean;
3231
onClick?: (e: any) => any;
33-
hideShowMoreButton?: boolean;
32+
noShowMoreButton?: boolean;
3433
truncate?: boolean;
3534
onClose?: (event: Event) => void;
3635

3736
children?: React.ReactElement<NotificationProptypes> | React.ReactElement<NotificationProptypes>[];
3837
collapsed?: boolean;
3938
autoPriority?: boolean;
40-
41-
isChild?: boolean;
42-
isLastChild?: boolean;
4339
}
4440

4541
const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'Notification' });
@@ -56,31 +52,24 @@ const Notification: FC<NotificationProptypes> = forwardRef(
5652
datetime,
5753
avatar,
5854
priority,
59-
visible,
6055
onClick,
6156
children,
6257
collapsed,
6358
className,
6459
tooltip,
6560
style,
66-
isChild,
67-
isLastChild,
6861
autoPriority,
69-
hideShowMoreButton,
62+
noShowMoreButton,
7063
truncate,
71-
showCloseButton,
64+
noCloseButton,
7265
onClose
7366
} = props;
7467

7568
const classes = useStyles(props);
76-
const [visibleState, toggleVisible] = useState(visible);
69+
const [visibleState, toggleVisible] = useState(true);
7770
const [showChildren, toggleChildrenVisible] = useState(!collapsed);
7871
const [showMore, toggleShowMore] = useState(!truncate);
7972

80-
useEffect(() => {
81-
toggleVisible(visible);
82-
}, [visible]);
83-
8473
useEffect(() => {
8574
toggleChildrenVisible(!collapsed);
8675
}, [collapsed]);
@@ -129,6 +118,9 @@ const Notification: FC<NotificationProptypes> = forwardRef(
129118
toggleShowMore(!showMore);
130119
}, [showMore]);
131120

121+
const isLastChild = props['isLastChild'];
122+
const isChild = props['isChild'];
123+
132124
const notificationContainerStyles = useMemo(() => {
133125
const borderRadius = () => {
134126
if (isChild) {
@@ -211,11 +203,13 @@ const Notification: FC<NotificationProptypes> = forwardRef(
211203
return React.Children.map(children, (item, index) => {
212204
if (React.Children.count(children) === index + 1) {
213205
return React.cloneElement(item, {
206+
// @ts-ignore
214207
isLastChild: true,
215208
className: `${item.props.className} ${classes.notificationContainerChild}`
216209
});
217210
}
218211
return React.cloneElement(item, {
212+
// @ts-ignore
219213
isChild: true,
220214
className: `${item.props.className} ${classes.notificationContainerChild}`
221215
});
@@ -256,7 +250,7 @@ const Notification: FC<NotificationProptypes> = forwardRef(
256250
<div className={classes.semanticIcon}>{renderSemanticIcon}</div>
257251
)}
258252
<div className={`${classes.title} ${truncate ? classes.titleEllipsised : ''}`}>{title}</div>
259-
{showCloseButton && (
253+
{!noCloseButton && (
260254
<Button
261255
className={classes.closeButton}
262256
design={ButtonDesign.Transparent}
@@ -284,7 +278,7 @@ const Notification: FC<NotificationProptypes> = forwardRef(
284278
</div>
285279
<div className={classes.footer}>
286280
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
287-
{!hideShowMoreButton && (
281+
{!noShowMoreButton && (
288282
<Button design={ButtonDesign.Transparent} onClick={handleShowMore}>
289283
{showMore ? 'Show Less' : 'Show More'}
290284
</Button>
@@ -311,9 +305,7 @@ const Notification: FC<NotificationProptypes> = forwardRef(
311305
);
312306

313307
Notification.defaultProps = {
314-
visible: true,
315-
truncate: true,
316-
showCloseButton: true
308+
truncate: true
317309
};
318310

319311
Notification.displayName = 'Notification';

‎packages/main/src/components/NotificationGroup/Notification.test.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,8 @@ describe('NotificationGroup', () => {
3434
datetime="1337 Minutes ago"
3535
avatar="ME"
3636
priority={Priority.High}
37-
visible
38-
hideShowMoreButton={false}
39-
showCloseButton
37+
noShowMoreButton={false}
38+
noCloseButton={false}
4039
truncate
4140
/>
4241
<Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />
@@ -76,9 +75,8 @@ describe('NotificationGroup', () => {
7675
datetime="1337 Minutes ago"
7776
avatar="ME"
7877
priority={Priority.High}
79-
visible
80-
hideShowMoreButton={false}
81-
showCloseButton
78+
noShowMoreButton={false}
79+
noCloseButton={false}
8280
truncate
8381
/>
8482
<Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />
@@ -104,9 +102,8 @@ describe('NotificationGroup', () => {
104102
datetime="1337 Minutes ago"
105103
avatar="ME"
106104
priority={Priority.High}
107-
visible
108-
hideShowMoreButton={false}
109-
showCloseButton
105+
noShowMoreButton={false}
106+
noCloseButton={false}
110107
truncate
111108
/>
112109
<Notification avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />} />
@@ -132,9 +129,8 @@ describe('NotificationGroup', () => {
132129
datetime="1337 Minutes ago"
133130
avatar="ME"
134131
priority={Priority.High}
135-
visible
136-
hideShowMoreButton={false}
137-
showCloseButton
132+
noShowMoreButton={false}
133+
noCloseButton={false}
138134
truncate
139135
>
140136
<Notification description="description" title="title" />

‎packages/main/src/components/NotificationGroup/demo.stories.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,11 @@ export const defaultStory = () => (
3131
datetime={text('datetime', 'Datetime')}
3232
avatar={<Avatar size={AvatarSize.XS} shape={AvatarShape.Circle} image={sampleAvatar} />}
3333
priority={select('priority', Priority, Priority.None)}
34-
visible={boolean('visible', true)}
3534
onClick={action('Notification clicked')}
36-
hideShowMoreButton={boolean('hideShowMoreButton', false)}
35+
noShowMoreButton={boolean('noShowMoreButton', false)}
3736
autoPriority={boolean('autoPriority', true)}
3837
collapsed={boolean('collapsed', false)}
39-
showCloseButton={boolean('showCloseButton', true)}
38+
noCloseButton={boolean('noCloseButton', false)}
4039
truncate={boolean('truncate', true)}
4140
onClose={action('Group closed')}
4241
>
@@ -47,18 +46,15 @@ export const defaultStory = () => (
4746
authorName="Author"
4847
avatar="LH"
4948
priority={Priority.Medium}
50-
visible={true}
51-
showCloseButton={false}
5249
truncate={boolean('truncate', true)}
5350
/>
5451
<Notification
5552
description="Short description"
5653
title="Very long Title. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
5754
authorName="Author"
5855
priority={Priority.Low}
59-
visible={true}
6056
onClick={action('Child Notification clicked')}
61-
showCloseButton={false}
57+
noCloseButton={true}
6258
truncate={boolean('truncate', true)}
6359
/>
6460
</NotificationGroup>

‎packages/main/src/components/NotificationGroup/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,8 @@ const NotificationGroup: FC<NotificationProptypes> = forwardRef(
1111
);
1212

1313
NotificationGroup.defaultProps = {
14-
visible: true,
1514
autoPriority: true,
16-
truncate: true,
17-
showCloseButton: true
15+
truncate: true
1816
};
1917

2018
NotificationGroup.displayName = 'Notification Group';

0 commit comments

Comments
 (0)