Skip to content

Commit e948398

Browse files
TechQueryTechQuery
committed
[optimize] rebuild Media Object & Block Button
[optimize] rename Left & Right align types to Start & End
1 parent 4fbf602 commit e948398

9 files changed

Lines changed: 107 additions & 95 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "boot-cell",
3-
"version": "2.0.0-alpha.1",
3+
"version": "2.0.0-alpha.2",
44
"license": "LGPL-3.0",
55
"author": "shiy2008@gmail.com",
66
"description": "Web Components UI library based on WebCell v2, BootStrap v5, BootStrap Icon v1 & FontAwesome v5",

‎source/Content/MediaObject.tsx‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export interface MediaObjectProps extends WebCellProps {
1111
title: string;
1212
image: string | VNodeChildElement;
1313
imageRow?: 'start' | 'center' | 'end';
14-
imageColumn?: 'left' | 'right';
14+
imageColumn?: 'start' | 'end';
1515
}
1616

1717
export function MediaObject({
@@ -20,41 +20,37 @@ export function MediaObject({
2020
title,
2121
image,
2222
imageRow = 'start',
23-
imageColumn = 'left',
23+
imageColumn = 'start',
2424
defaultSlot,
2525
...rest
2626
}: MediaObjectProps) {
27-
const left = imageColumn === 'left';
28-
29-
const Class = classNames('media', !left && 'flex-row-reverse', className),
30-
body = (
31-
<Fragment>
27+
const start = imageColumn === 'start';
28+
const Tag = listItem ? 'li' : 'div',
29+
Class = classNames('d-flex', !start && 'flex-row-reverse', className);
30+
const body = (
31+
<Fragment>
32+
<div className="flex-shrink-0">
3233
{typeof image === 'string' ? (
3334
<img
34-
className={`align-self-${imageRow} ${
35-
left ? 'me-3' : 'ms-3'
36-
}`}
35+
className={`align-self-${imageRow}`}
3736
style={{ width: '4rem' }}
3837
src={image}
3938
alt={title}
4039
/>
4140
) : (
4241
image
4342
)}
44-
<div className="media-body">
45-
<h5 className="mt-0">{title}</h5>
46-
{defaultSlot}
47-
</div>
48-
</Fragment>
49-
);
43+
</div>
44+
<div className={`flex-grow-1 ${start ? 'ms-3' : 'me-3'}`}>
45+
<h5 className="mt-0">{title}</h5>
46+
{defaultSlot}
47+
</div>
48+
</Fragment>
49+
);
5050

51-
return listItem ? (
52-
<li {...rest} className={Class}>
53-
{body}
54-
</li>
55-
) : (
56-
<div {...rest} className={Class}>
51+
return (
52+
<Tag {...rest} className={Class}>
5753
{body}
58-
</div>
54+
</Tag>
5955
);
6056
}

‎source/Form/Button.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,18 @@ export function Button({
2929
defaultSlot,
3030
...rest
3131
}: ButtonProps) {
32-
const colorClass = color && `btn${outline ? '-outline' : ''}-${color}`;
32+
const classList = [
33+
'btn',
34+
color && `btn${outline ? '-outline' : ''}-${color}`,
35+
size && `btn-${size}`,
36+
block && 'd-block w-100'
37+
];
3338

3439
return href ? (
3540
<a
3641
{...rest}
3742
className={classNames(
38-
'btn',
39-
colorClass,
40-
size && `btn-${size}`,
41-
block && 'd-block',
43+
...classList,
4244
disabled && 'disabled',
4345
className
4446
)}
@@ -53,13 +55,7 @@ export function Button({
5355
<button
5456
{...rest}
5557
type={type}
56-
className={classNames(
57-
'btn',
58-
colorClass,
59-
size && `btn-${size}`,
60-
block && 'd-block',
61-
className
62-
)}
58+
className={classNames(...classList, className)}
6359
disabled={disabled}
6460
tabIndex={tabIndex}
6561
>

‎source/Navigator/DropMenu.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,9 @@ export interface DropMenuProps extends WebCellProps {
6969
caption: WebCellElement;
7070
buttonColor?: ButtonProps['color'];
7171
buttonSize?: ButtonProps['size'];
72-
alignType?: 'left' | 'right';
72+
alignType?: 'start' | 'end';
7373
alignSize?: '' | 'sm' | 'md' | 'lg' | 'xl';
74-
direction?: 'up' | 'down' | 'left' | 'right';
74+
direction?: 'up' | 'down' | 'start' | 'end';
7575
href?: HTMLHyperLinkProps['href'];
7676
target?: HTMLHyperLinkProps['target'];
7777
open?: boolean;
@@ -102,7 +102,7 @@ export class DropMenu extends mixin<DropMenuProps>() {
102102

103103
@attribute
104104
@watch
105-
alignType: DropMenuProps['alignType'] = 'left';
105+
alignType: DropMenuProps['alignType'] = 'start';
106106

107107
@attribute
108108
@watch
@@ -162,7 +162,9 @@ export class DropMenu extends mixin<DropMenuProps>() {
162162
href || direction !== 'down' ? 'btn-group' : 'dropdown'
163163
);
164164

165-
if (href ? !['down', 'left'].includes(direction) : direction !== 'down')
165+
if (
166+
href ? !['down', 'start'].includes(direction) : direction !== 'down'
167+
)
166168
this.classList.add(`drop${direction}`);
167169
}
168170

@@ -220,10 +222,10 @@ export class DropMenu extends mixin<DropMenuProps>() {
220222
direction
221223
}: DropMenuProps) {
222224
const alignment =
223-
alignType === 'right'
224-
? [`dropdown-menu${alignSize && '-' + alignSize}-right`]
225-
: alignType === 'left' && alignSize
226-
? ['dropdown-menu-right', `dropdown-menu-${alignSize}-left`]
225+
alignType === 'end'
226+
? [`dropdown-menu${alignSize && '-' + alignSize}-end`]
227+
: alignType === 'start' && alignSize
228+
? ['dropdown-menu-end', `dropdown-menu-${alignSize}-start`]
227229
: [];
228230
const body = (
229231
<div
@@ -238,9 +240,9 @@ export class DropMenu extends mixin<DropMenuProps>() {
238240
</div>
239241
);
240242

241-
return href && direction === 'left' ? (
243+
return href && direction === 'start' ? (
242244
<Fragment>
243-
<div className="btn-group dropleft" role="group">
245+
<div className="btn-group dropstart" role="group">
244246
{body}
245247
</div>
246248
{this.renderButton()}

‎source/Navigator/NavBar/BannerNavBar.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -131,18 +131,14 @@ export class BannerNavBar extends mixin<BannerNavBarProps>() {
131131
)}
132132
</CollapseBox>
133133
<div className={`navbar navbar-${theme}`}>
134-
{narrow ? (
135-
<div
136-
className={classNames(
137-
'container',
138-
direction !== 'left' && 'flex-row-reverse'
139-
)}
140-
>
141-
{nav}
142-
</div>
143-
) : (
144-
nav
145-
)}
134+
<div
135+
className={classNames(
136+
narrow ? 'container' : 'container-fluid',
137+
direction !== 'left' && 'flex-row-reverse'
138+
)}
139+
>
140+
{nav}
141+
</div>
146142
</div>
147143
</Fragment>
148144
);

‎test/Content/MediaObject.spec.tsx‎

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,35 @@ describe('Media Item', () => {
77
it('should render Left layout defaultly', () => {
88
assertLooksLike(
99
<MediaObject title="Test" image="test.png" />,
10-
<div className="media">
11-
<img
12-
className="align-self-start me-3"
13-
style={{ width: '4rem' }}
14-
src="test.png"
15-
alt="Test"
16-
/>
17-
<div className="media-body">
10+
<div className="d-flex">
11+
<div className="flex-shrink-0">
12+
<img
13+
className="align-self-start"
14+
style={{ width: '4rem' }}
15+
src="test.png"
16+
alt="Test"
17+
/>
18+
</div>
19+
<div className="flex-grow-1 ms-3">
1820
<h5 className="mt-0">Test</h5>
1921
</div>
2022
</div>
2123
);
2224
});
2325

24-
it('should render Right layout based on Flex', () => {
26+
it('should render End layout based on Flex', () => {
2527
assertLooksLike(
26-
<MediaObject title="Test" image="test.png" imageColumn="right" />,
27-
<div className="media flex-row-reverse">
28-
<img
29-
className="align-self-start ms-3"
30-
style={{ width: '4rem' }}
31-
src="test.png"
32-
alt="Test"
33-
/>
34-
<div className="media-body">
28+
<MediaObject title="Test" image="test.png" imageColumn="end" />,
29+
<div className="d-flex flex-row-reverse">
30+
<div className="flex-shrink-0">
31+
<img
32+
className="align-self-start"
33+
style={{ width: '4rem' }}
34+
src="test.png"
35+
alt="Test"
36+
/>
37+
</div>
38+
<div className="flex-grow-1 me-3">
3539
<h5 className="mt-0">Test</h5>
3640
</div>
3741
</div>
@@ -43,13 +47,15 @@ describe('Media Item', () => {
4347
<MediaObject
4448
title="Test"
4549
image={<img src="test.png" />}
46-
imageColumn="right"
50+
imageColumn="end"
4751
>
4852
Example
4953
</MediaObject>,
50-
<div className="media flex-row-reverse">
51-
<img src="test.png" />
52-
<div className="media-body">
54+
<div className="d-flex flex-row-reverse">
55+
<div className="flex-shrink-0">
56+
<img src="test.png" />
57+
</div>
58+
<div className="flex-grow-1 me-3">
5359
<h5 className="mt-0">Test</h5>
5460
Example
5561
</div>

‎test/Form/Button.spec.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,17 @@ describe('Button', () => {
1616
);
1717
});
1818

19+
it('should render a Button as block', () => {
20+
assertLooksLike(
21+
<Button color="primary" block>
22+
Test
23+
</Button>,
24+
<button type="button" className="btn btn-primary d-block w-100">
25+
Test
26+
</button>
27+
);
28+
});
29+
1930
it('should render a disabled Anchor', () => {
2031
assertLooksLike(
2132
<Button href="/test" disabled>

‎test/Navigator/DropMenu.spec.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function InlineDropMenu({
1616
href,
1717
caption,
1818
target,
19-
alignType = 'left',
19+
alignType = 'start',
2020
alignSize = '',
2121
direction = 'down',
2222
defaultSlot
@@ -91,9 +91,9 @@ describe('Drop Menu', () => {
9191
);
9292
});
9393

94-
it('should render a Responsive Right-align Menu', () => {
94+
it('should render a Responsive End-align Menu', () => {
9595
assertLooksLike(
96-
<InlineDropMenu caption="Demo" alignType="right" alignSize="md" />,
96+
<InlineDropMenu caption="Demo" alignType="end" alignSize="md" />,
9797
<div>
9898
<Button
9999
className="dropdown-toggle"
@@ -104,16 +104,16 @@ describe('Drop Menu', () => {
104104
Demo
105105
</Button>
106106
<div
107-
className="dropdown-menu dropdown-menu-md-right"
107+
className="dropdown-menu dropdown-menu-md-end"
108108
aria-labelledby="test"
109109
/>
110110
</div>
111111
);
112112
});
113113

114-
it('should render a Responsive Left-align Menu', () => {
114+
it('should render a Responsive Start-align Menu', () => {
115115
assertLooksLike(
116-
<InlineDropMenu caption="Demo" alignType="left" alignSize="md" />,
116+
<InlineDropMenu caption="Demo" alignType="start" alignSize="md" />,
117117
<div>
118118
<Button
119119
className="dropdown-toggle"
@@ -124,7 +124,7 @@ describe('Drop Menu', () => {
124124
Demo
125125
</Button>
126126
<div
127-
className="dropdown-menu dropdown-menu-right dropdown-menu-md-left"
127+
className="dropdown-menu dropdown-menu-end dropdown-menu-md-start"
128128
aria-labelledby="test"
129129
/>
130130
</div>
@@ -150,9 +150,9 @@ describe('Drop Menu', () => {
150150
);
151151
});
152152

153-
it('should render a Single-layer Button group with Single Left direction', () => {
153+
it('should render a Single-layer Button group with Single Start direction', () => {
154154
assertLooksLike(
155-
<InlineDropMenu caption="Demo" direction="left" />,
155+
<InlineDropMenu caption="Demo" direction="start" />,
156156
<div>
157157
<Button
158158
className="dropdown-toggle"
@@ -167,9 +167,9 @@ describe('Drop Menu', () => {
167167
);
168168
});
169169

170-
it('should render a Double-layer Button group with Split Left direction', () => {
170+
it('should render a Double-layer Button group with Split Start direction', () => {
171171
assertLooksLike(
172-
<InlineDropMenu caption="Demo" href="example" direction="left" />,
172+
<InlineDropMenu caption="Demo" href="example" direction="start" />,
173173
<div>
174174
<div className="dropdown-menu" aria-labelledby="test" />
175175
<div className="btn-group">

‎test/Navigator/NavBar.spec.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,10 +96,15 @@ describe('Navigator Bar', () => {
9696
test
9797
</CollapseBox>
9898
<div className="navbar navbar-dark">
99-
<a className="navbar-brand" href=".">
100-
Test
101-
</a>
102-
<NavBarToggler aria-controls="test" aria-expanded="false" />
99+
<div className="container-fluid">
100+
<a className="navbar-brand" href=".">
101+
Test
102+
</a>
103+
<NavBarToggler
104+
aria-controls="test"
105+
aria-expanded="false"
106+
/>
107+
</div>
103108
</div>
104109
</Fragment>
105110
);

0 commit comments

Comments
 (0)