Skip to content

Commit 2d76ade

Browse files
xiejay97xiejay97
committed
refactor(ui): remove badge container
1 parent fc7cef0 commit 2d76ade

11 files changed

Lines changed: 177 additions & 181 deletions

File tree

‎packages/site/src/styles/_app.scss‎

Lines changed: 80 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -180,10 +180,10 @@ h3 {
180180

181181
section[id^='Button'],
182182
section[id^='Dropdown'],
183-
section[id^='Notification'],
184-
section[id^='Toast'],
185183
section[id^='Modal'],
186-
section[id^='Stepper'] {
184+
section[id^='Notification'],
185+
section[id^='Stepper'],
186+
section[id^='Toast'] {
187187
.d-button {
188188
margin-right: 8px;
189189
margin-bottom: 12px;
@@ -206,17 +206,17 @@ h3 {
206206
@each $id,
207207
$selector
208208
in (
209-
'Tag': 'tag',
210-
'Select': 'select',
209+
'AutoComplete': 'input',
211210
'Cascader': 'cascader',
212-
'TreeSelect': 'tree-select',
213-
'Radio': 'radio',
211+
'DatePicker': 'date-picker',
212+
'Image': 'image',
214213
'Input': 'input',
214+
'Radio': 'radio',
215+
'Select': 'select',
215216
'Switch': 'switch',
217+
'Tag': 'tag',
216218
'TimePicker': 'time-picker',
217-
'DatePicker': 'date-picker',
218-
'AutoComplete': 'input',
219-
'Image': 'image'
219+
'TreeSelect': 'tree-select'
220220
)
221221
{
222222
section[id^='#{$id}'] {
@@ -234,6 +234,34 @@ h3 {
234234
}
235235
}
236236

237+
section[id^='Avatar'] {
238+
.d-avatar {
239+
margin-right: 24px;
240+
margin-bottom: 12px;
241+
}
242+
}
243+
244+
section[id^='Alert'] {
245+
.d-alert {
246+
margin-bottom: 20px;
247+
}
248+
}
249+
250+
section[id^='Badge'] {
251+
.app-demo-badge {
252+
position: relative;
253+
display: inline-block;
254+
width: 52px;
255+
height: 52px;
256+
margin-right: 24px;
257+
margin-bottom: 12px;
258+
text-align: center;
259+
background: var(--d-background-color-primary);
260+
/* stylelint-disable-next-line declaration-property-value-allowed-list */
261+
border-radius: 6px;
262+
}
263+
}
264+
237265
section[id^='Checkbox'] {
238266
.d-checkbox {
239267
margin-right: 8px;
@@ -248,31 +276,25 @@ h3 {
248276
}
249277
}
250278

251-
section[id^='Progress'] {
252-
.d-progress--dashboard,
253-
.d-progress--circle {
254-
margin-right: 8px;
255-
margin-bottom: 12px;
256-
}
257-
}
258-
259-
section[id^='Badge'] {
260-
.d-badge__container {
261-
margin-right: 24px;
262-
margin-bottom: 12px;
279+
section[id^='Form'] {
280+
.d-form--inline {
281+
min-width: 800px;
263282
}
264283
}
265284

266-
section[id^='Avatar'] {
267-
.d-avatar {
268-
margin-right: 24px;
269-
margin-bottom: 12px;
285+
section[id^='Grid'] {
286+
.app-demo-col {
287+
display: flex;
288+
align-items: center;
289+
justify-content: center;
290+
height: 48px;
291+
/* stylelint-disable-next-line declaration-property-value-allowed-list */
292+
color: #fff;
293+
background-color: var(--d-color-primary);
270294
}
271-
}
272295

273-
section[id^='Alert'] {
274-
.d-alert {
275-
margin-bottom: 20px;
296+
.app-demo-col--lighter {
297+
background-color: var(--d-color-primary-lighter);
276298
}
277299
}
278300

@@ -283,15 +305,11 @@ h3 {
283305
}
284306
}
285307

286-
section[id^='Form'] {
287-
.d-form--inline {
288-
min-width: 800px;
289-
}
290-
}
291-
292-
section[id^='Transfer'] {
293-
.d-transfer {
294-
min-width: 400px;
308+
section[id^='Progress'] {
309+
.d-progress--dashboard,
310+
.d-progress--circle {
311+
margin-right: 8px;
312+
margin-bottom: 12px;
295313
}
296314
}
297315

@@ -301,6 +319,19 @@ h3 {
301319
}
302320
}
303321

322+
section[id^='Slides'] {
323+
.app-demo-slide {
324+
display: flex;
325+
align-items: center;
326+
justify-content: center;
327+
width: 100%;
328+
height: 100%;
329+
/* stylelint-disable-next-line declaration-property-value-allowed-list */
330+
color: #fff;
331+
background: rgb(54 77 121);
332+
}
333+
}
334+
304335
section[id^='Table'] {
305336
.d-table {
306337
min-width: 600px;
@@ -311,45 +342,16 @@ h3 {
311342
margin-top: 20px;
312343
}
313344
}
314-
}
315-
316-
.app-demo-col {
317-
display: flex;
318-
align-items: center;
319-
justify-content: center;
320-
height: 48px;
321-
/* stylelint-disable-next-line declaration-property-value-allowed-list */
322-
color: #fff;
323-
background-color: var(--d-color-primary);
324-
}
325-
326-
.app-demo-col--lighter {
327-
background-color: var(--d-color-primary-lighter);
328-
}
329-
330-
.app-demo-badge {
331-
display: inline-block;
332-
width: 52px;
333-
height: 52px;
334-
text-align: center;
335-
background: var(--d-background-color-primary);
336-
/* stylelint-disable-next-line declaration-property-value-allowed-list */
337-
border-radius: 6px;
338-
}
339345

340-
.app-demo-container {
341-
display: flex;
342-
flex-direction: column;
343-
gap: 20px 0;
344-
}
346+
section[id^='Transfer'] {
347+
.d-transfer {
348+
min-width: 400px;
349+
}
350+
}
345351

346-
.app-demo-slide {
347-
display: flex;
348-
align-items: center;
349-
justify-content: center;
350-
width: 100%;
351-
height: 100%;
352-
/* stylelint-disable-next-line declaration-property-value-allowed-list */
353-
color: #fff;
354-
background: rgb(54 77 121);
352+
.app-demo-container {
353+
display: flex;
354+
flex-direction: column;
355+
gap: 20px 0;
356+
}
355357
}

‎packages/ui/src/components/_footer/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ export interface DFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
1313
dActions?: React.ReactNode[];
1414
dCancelProps?: DButtonProps;
1515
dOkProps?: DButtonProps;
16-
onCancelClick?: () => void | boolean | Promise<void | boolean>;
17-
onOkClick?: () => void | boolean | Promise<void | boolean>;
16+
onCancelClick?: () => void | false | Promise<void | false>;
17+
onOkClick?: () => void | false | Promise<void | false>;
1818
onClose?: () => void;
1919
}
2020

‎packages/ui/src/components/_header/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export interface DHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
1313
dTitleId?: string;
1414
dActions?: React.ReactNode[];
1515
dCloseProps?: DButtonProps;
16-
onCloseClick?: () => void | boolean | Promise<void | boolean>;
16+
onCloseClick?: () => void | false | Promise<void | false>;
1717
onClose?: () => void;
1818
}
1919

‎packages/ui/src/components/badge/Badge.tsx‎

Lines changed: 50 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { registerComponentMate, TTANSITION_DURING_BASE } from '../../utils';
77
import { DTransition } from '../_transition';
88
import { DNumber } from './Number';
99

10-
export interface DBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
10+
export interface DBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
1111
dValue: number;
1212
dTheme?: 'primary' | 'success' | 'warning' | 'danger';
1313
dColor?: string;
@@ -20,7 +20,6 @@ export interface DBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
2020
const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DBadge' });
2121
export function DBadge(props: DBadgeProps): JSX.Element | null {
2222
const {
23-
children,
2423
dValue,
2524
dTheme = 'danger',
2625
dColor,
@@ -60,64 +59,59 @@ export function DBadge(props: DBadgeProps): JSX.Element | null {
6059
}
6160

6261
return (
63-
<div
64-
{...restProps}
65-
className={getClassName(restProps.className, `${dPrefix}badge__container`)}
66-
title={restProps.title ?? (dDot ? undefined : dValue.toString())}
67-
>
68-
{children}
69-
<DTransition dIn={show} dDuring={TTANSITION_DURING_BASE}>
70-
{(state) => {
71-
let transitionStyle: React.CSSProperties = {};
72-
switch (state) {
73-
case 'enter':
74-
transitionStyle = { transform: 'scale(0)', opacity: 0 };
75-
break;
62+
<DTransition dIn={show} dDuring={TTANSITION_DURING_BASE}>
63+
{(state) => {
64+
let transitionStyle: React.CSSProperties = {};
65+
switch (state) {
66+
case 'enter':
67+
transitionStyle = { transform: 'scale(0)', opacity: 0 };
68+
break;
7669

77-
case 'entering':
78-
transitionStyle = {
79-
transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
80-
};
81-
break;
70+
case 'entering':
71+
transitionStyle = {
72+
transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-out`).join(', '),
73+
};
74+
break;
8275

83-
case 'leaving':
84-
transitionStyle = {
85-
transform: 'scale(0)',
86-
opacity: 0,
87-
transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
88-
};
89-
break;
76+
case 'leaving':
77+
transitionStyle = {
78+
transform: 'scale(0)',
79+
opacity: 0,
80+
transition: ['transform', 'opacity'].map((attr) => `${attr} ${TTANSITION_DURING_BASE}ms ease-in`).join(', '),
81+
};
82+
break;
9083

91-
default:
92-
break;
93-
}
84+
default:
85+
break;
86+
}
9487

95-
return state === 'leaved' ? null : (
96-
<div
97-
className={getClassName(`${dPrefix}badge`, {
98-
[`t-${dTheme}`]: dTheme,
99-
[`${dPrefix}badge--dot`]: dDot,
100-
})}
101-
style={{
102-
top: dOffset[0],
103-
left: dOffset[1],
104-
[`--${dPrefix}badge-color`]: dColor,
105-
}}
106-
>
107-
<div className={`${dPrefix}badge__wrapper`} style={transitionStyle}>
108-
{dDot ? null : (
109-
<>
110-
{nums.map((n, i) => (
111-
<DNumber key={nums.length - i} dValue={n} dDown={dataRef.current.dDown}></DNumber>
112-
))}
113-
{value > dMax ? '+' : ''}
114-
</>
115-
)}
116-
</div>
88+
return state === 'leaved' ? null : (
89+
<div
90+
{...restProps}
91+
className={getClassName(restProps.className, `${dPrefix}badge`, {
92+
[`t-${dTheme}`]: dTheme,
93+
[`${dPrefix}badge--dot`]: dDot,
94+
})}
95+
style={{
96+
top: dOffset[0],
97+
left: dOffset[1],
98+
[`--${dPrefix}badge-color`]: dColor,
99+
}}
100+
title={restProps.title ?? (dDot ? undefined : dValue.toString())}
101+
>
102+
<div className={`${dPrefix}badge__wrapper`} style={transitionStyle}>
103+
{dDot ? null : (
104+
<>
105+
{nums.map((n, i) => (
106+
<DNumber key={nums.length - i} dValue={n} dDown={dataRef.current.dDown}></DNumber>
107+
))}
108+
{value > dMax ? '+' : ''}
109+
</>
110+
)}
117111
</div>
118-
);
119-
}}
120-
</DTransition>
121-
</div>
112+
</div>
113+
);
114+
}}
115+
</DTransition>
122116
);
123117
}

‎packages/ui/src/components/badge/demos/1.Basic.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ import { DBadge } from '@react-devui/ui';
1818
export default function Demo() {
1919
return (
2020
<>
21-
<DBadge dValue={5} dDot>
22-
<div className="app-demo-badge"></div>
23-
</DBadge>
24-
<DBadge dValue={5}>
25-
<div className="app-demo-badge"></div>
26-
</DBadge>
21+
<div className="app-demo-badge">
22+
<DBadge dValue={5} dDot />
23+
</div>
24+
<div className="app-demo-badge">
25+
<DBadge dValue={5} />
26+
</div>
2727
</>
2828
);
2929
}

0 commit comments

Comments
 (0)