Skip to content

Commit ecb78e0

Browse files
imagine10255imagine10255
committed
Add Container fluid margin functionality, refactor mask stories for simplicity, and update repository reference in Banner.
1 parent a537994 commit ecb78e0

File tree

6 files changed

+83
-221
lines changed

6 files changed

+83
-221
lines changed

‎example/src/components/Banner/Banner.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ interface IProps {
1414

1515

1616

17-
const name = 'Acrool React Img';
18-
const repositoryUrl = 'https://github.com/acrool/acrool-react-img';
17+
const name = 'Acrool React Grid';
18+
const repositoryUrl = 'https://github.com/acrool/acrool-react-grid';
1919

2020

2121
const Banner = ({

‎example/src/components/Utilities/Mask/Mask.stories.tsx‎

Lines changed: 1 addition & 211 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const FilterMaskDirections: Story = {
3939
<h3 className="mb-2">filter-mask-{direction}</h3>
4040
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
4141
<img
42-
src={testImageUrl}
42+
src="/og.png"
4343
alt={`Test image with ${className}`}
4444
className={`w-100 ${className}`}
4545
style={{height: '200px', objectFit: 'cover'}}
@@ -53,213 +53,3 @@ export const FilterMaskDirections: Story = {
5353
);
5454
},
5555
};
56-
57-
export const FilterMaskWithContent: Story = {
58-
args: {},
59-
render: function Render(args: any) {
60-
return (
61-
<Container {...args}>
62-
<Flex column className="gap-4">
63-
<h2 className="text-center">Filter Mask 內容測試</h2>
64-
65-
<Row className="gap-4">
66-
{maskDirections.map(direction => {
67-
const className = `filter-mask-${direction}`;
68-
69-
return (
70-
<Col key={direction} col={6} md={4}>
71-
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
72-
<img
73-
src={testImageUrl}
74-
alt={`Test image with ${className}`}
75-
className={`w-100 ${className}`}
76-
style={{height: '150px', objectFit: 'cover'}}
77-
/>
78-
<div className="absolute-center text-center text-white">
79-
<h4>Mask {direction.toUpperCase()}</h4>
80-
<p className="text-sm">filter-mask-{direction}</p>
81-
</div>
82-
</div>
83-
</Col>
84-
);
85-
})}
86-
</Row>
87-
</Flex>
88-
</Container>
89-
);
90-
},
91-
};
92-
93-
export const FilterMaskBottom80: Story = {
94-
args: {},
95-
render: function Render(args: any) {
96-
return (
97-
<Container {...args}>
98-
<Flex column className="gap-4">
99-
<h2 className="text-center">Filter Mask Bottom 80% 測試</h2>
100-
101-
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
102-
<img
103-
src={testImageUrl}
104-
alt="Test image with filter-mask-b-80"
105-
className="w-100 filter-mask-b-80"
106-
style={{height: '300px', objectFit: 'cover'}}
107-
/>
108-
<div className="absolute-center text-center text-white">
109-
<h3>filter-mask-b-80</h3>
110-
<p>底部 80% 遮罩效果</p>
111-
</div>
112-
</div>
113-
</Flex>
114-
</Container>
115-
);
116-
},
117-
};
118-
119-
export const FilterMaskComparison: Story = {
120-
args: {},
121-
render: function Render(args: any) {
122-
return (
123-
<Container {...args}>
124-
<Flex column className="gap-4">
125-
<h2 className="text-center">Filter Mask 對比測試</h2>
126-
127-
<Row className="gap-4">
128-
<Col col={6}>
129-
<h3 className="text-center mb-2">原始圖片</h3>
130-
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
131-
<img
132-
src={testImageUrl}
133-
alt="Original test image"
134-
className="w-100"
135-
style={{height: '250px', objectFit: 'cover'}}
136-
/>
137-
</div>
138-
</Col>
139-
140-
<Col col={6}>
141-
<h3 className="text-center mb-2">遮罩效果</h3>
142-
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
143-
<img
144-
src={testImageUrl}
145-
alt="Test image with filter-mask-t"
146-
className="w-100 filter-mask-t"
147-
style={{height: '250px', objectFit: 'cover'}}
148-
/>
149-
<div className="absolute-center text-center text-white">
150-
<h4>filter-mask-t</h4>
151-
<p className="text-sm">頂部遮罩</p>
152-
</div>
153-
</div>
154-
</Col>
155-
</Row>
156-
157-
<Row className="gap-4 mt-4">
158-
<Col col={4}>
159-
<h4 className="text-center mb-2">左側遮罩</h4>
160-
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
161-
<img
162-
src={testImageUrl}
163-
alt="Test image with filter-mask-l"
164-
className="w-100 filter-mask-l"
165-
style={{height: '200px', objectFit: 'cover'}}
166-
/>
167-
</div>
168-
</Col>
169-
170-
<Col col={4}>
171-
<h4 className="text-center mb-2">右側遮罩</h4>
172-
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
173-
<img
174-
src={testImageUrl}
175-
alt="Test image with filter-mask-r"
176-
className="w-100 filter-mask-r"
177-
style={{height: '200px', objectFit: 'cover'}}
178-
/>
179-
</div>
180-
</Col>
181-
182-
<Col col={4}>
183-
<h4 className="text-center mb-2">底部遮罩</h4>
184-
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
185-
<img
186-
src={testImageUrl}
187-
alt="Test image with filter-mask-b"
188-
className="w-100 filter-mask-b"
189-
style={{height: '200px', objectFit: 'cover'}}
190-
/>
191-
</div>
192-
</Col>
193-
</Row>
194-
</Flex>
195-
</Container>
196-
);
197-
},
198-
};
199-
200-
export const FilterMaskInteractive: Story = {
201-
args: {},
202-
render: function Render(args: any) {
203-
return (
204-
<Container {...args}>
205-
<Flex column className="gap-4">
206-
<h2 className="text-center">Filter Mask 互動測試</h2>
207-
208-
<Row className="gap-4">
209-
<Col col={12} md={6}>
210-
<h3 className="text-center mb-2">水平遮罩 (X軸)</h3>
211-
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
212-
<img
213-
src={testImageUrl}
214-
alt="Test image with filter-mask-x"
215-
className="w-100 filter-mask-x"
216-
style={{height: '250px', objectFit: 'cover'}}
217-
/>
218-
<div className="absolute-center text-center text-white">
219-
<h4>filter-mask-x</h4>
220-
<p className="text-sm">左右兩側遮罩</p>
221-
</div>
222-
</div>
223-
</Col>
224-
225-
<Col col={12} md={6}>
226-
<h3 className="text-center mb-2">垂直遮罩 (Y軸)</h3>
227-
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
228-
<img
229-
src={testImageUrl}
230-
alt="Test image with filter-mask-y"
231-
className="w-100 filter-mask-y"
232-
style={{height: '250px', objectFit: 'cover'}}
233-
/>
234-
<div className="absolute-center text-center text-white">
235-
<h4>filter-mask-y</h4>
236-
<p className="text-sm">上下兩側遮罩</p>
237-
</div>
238-
</div>
239-
</Col>
240-
</Row>
241-
242-
<Row className="gap-4 mt-4">
243-
<Col col={12}>
244-
<h3 className="text-center mb-2">特殊遮罩效果</h3>
245-
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
246-
<img
247-
src={testImageUrl}
248-
alt="Test image with filter-mask-b-80"
249-
className="w-100 filter-mask-b-80"
250-
style={{height: '300px', objectFit: 'cover'}}
251-
/>
252-
<div className="absolute-center text-center text-white">
253-
<h4>filter-mask-b-80</h4>
254-
<p className="text-sm">底部 80% 漸變遮罩</p>
255-
<p className="text-sm">從底部開始漸變到透明</p>
256-
</div>
257-
</div>
258-
</Col>
259-
</Row>
260-
</Flex>
261-
</Container>
262-
);
263-
},
264-
};
265-

‎example/src/components/primary/Container/Container.stories.tsx‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export const WithOneSizeSpacer: Story = {
7777
},
7878
};
7979

80-
export const WithBreakpointsSpacer: Story = {
80+
export const WithSpacerBreakpoints: Story = {
8181
decorators: (Story) => (
8282
<GridThemeProvider gridTheme={{
8383
// spacer: '20px',
@@ -95,6 +95,37 @@ export const WithBreakpointsSpacer: Story = {
9595
};
9696

9797

98+
export const WithContainerFluidMargin: Story = {
99+
decorators: (Story) => (
100+
<GridThemeProvider gridTheme={{
101+
containerFluidMargin: '20px',
102+
}}>
103+
<Story />
104+
</GridThemeProvider>
105+
),
106+
args: {
107+
fluid: true,
108+
},
109+
};
110+
111+
112+
export const WithContainerFluidMarginBreakpoints: Story = {
113+
decorators: (Story) => (
114+
<GridThemeProvider gridTheme={{
115+
containerFluidMargin: {
116+
xs: '40px',
117+
lg: '80px',
118+
},
119+
}}>
120+
<Story />
121+
</GridThemeProvider>
122+
),
123+
args: {
124+
fluid: true,
125+
},
126+
};
127+
128+
98129

99130

100131
const Box = styled.div`

‎src/GridSystem/Container/Container.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styled, {css} from 'styled-components';
22

33
import {IContainerProps, IContainerStdProps,TStyledProps} from '../../types';
4-
import {createBreakpoint, createInfo} from './utils';
4+
import {createBreakpoint, createFluidBreakpoint, createInfo} from './utils';
55

66

77

@@ -17,10 +17,10 @@ const ContainerStd = styled.div<
1717
{ 'data-grid'?: string } & TStyledProps<IContainerStdProps>
1818
>`
1919
${props => css`
20-
${props.$fluid !== true && createBreakpoint({
21-
theme: props.theme,
22-
fluid: props.$fluid,
23-
} as TStyledProps<IContainerProps>)};
20+
${props.$fluid ?
21+
createFluidBreakpoint(props):
22+
createBreakpoint({theme: props.theme, fluid: props.$fluid} as TStyledProps<IContainerProps>)
23+
};
2424
`}
2525
`;
2626

‎src/GridSystem/Container/utils.ts‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,57 @@
1-
import {noXsMediaSizes, themeName} from '../../config';
1+
import {mediaSizes, noXsMediaSizes, themeName} from '../../config';
22
import media from '../../media';
33
import {IContainerProps, NoXsMediaSize,TStyledProps} from '../../types';
44

55

66

77

8+
/**
9+
* 產生 Breakpoint MaxSize 樣式
10+
* @param props
11+
*/
12+
export const createFluidBreakpoint = (props: TStyledProps<IContainerProps>) => {
13+
const containerFluidMargin = props.theme[themeName]?.containerFluidMargin;
14+
15+
if(!containerFluidMargin){
16+
return undefined;
17+
}
18+
19+
if(typeof containerFluidMargin === 'string'){
20+
return `
21+
margin-left: ${containerFluidMargin};
22+
margin-right: ${containerFluidMargin};
23+
`;
24+
}
25+
26+
return mediaSizes.reduce<string[]>((curr, sizeName) => {
27+
28+
const rwdContainerFluidMargin = containerFluidMargin[sizeName];
29+
if(rwdContainerFluidMargin){
30+
if(sizeName === 'xs'){
31+
return curr.concat(`
32+
margin-left: ${rwdContainerFluidMargin};
33+
margin-right: ${rwdContainerFluidMargin};
34+
`);
35+
}
36+
37+
return curr.concat(media[sizeName]`
38+
margin-left: ${rwdContainerFluidMargin};
39+
margin-right: ${rwdContainerFluidMargin};
40+
`);
41+
}
42+
43+
return curr;
44+
}, []);
45+
};
46+
47+
848
/**
949
* 產生 Breakpoint MaxSize 樣式
1050
* @param props
1151
*/
1252
export const createBreakpoint = (props: TStyledProps<IContainerProps>) => {
1353
const maxSizeConfig = getRWDMaxSize(props);
14-
return noXsMediaSizes.reduce((curr, sizeName) => {
54+
return noXsMediaSizes.reduce<string[]>((curr, sizeName) => {
1555
if(maxSizeConfig[sizeName]){
1656
return curr.concat(media[sizeName]`
1757
max-width: var(--acrool-container-max-width-${sizeName}, ${props.theme[themeName]?.containerMaxWidths[sizeName]}px);

‎src/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export interface IGridThemeProviderProps {
7474

7575
export interface IGridSetting {
7676
spacer: TGutterWidth|Partial<IBreakpointsTGutterWidth>
77+
containerFluidMargin?: TGutterWidth|Partial<IBreakpointsTGutterWidth>
7778
gridColumns: number
7879
gridBreakpoints: IBreakpoints
7980
containerMaxWidths: TContainerMaxWidths

0 commit comments

Comments
 (0)