Skip to content

Commit d49e586

Browse files
yanqirenshiyanqirenshi
committed
var 0.0.3
1 parent 68cf1b5 commit d49e586

25 files changed

+2185
-3103
lines changed

‎dev/package-lock.json

+1,828-2,327
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dev/package.json

-5
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,6 @@
99
"@testing-library/jest-dom": "^5.17.0",
1010
"@testing-library/react": "^13.4.0",
1111
"@testing-library/user-event": "^13.5.0",
12-
"element-resize-detector": "^1.2.4",
13-
"imagesloaded": "^5.0.0",
14-
"lodash": "^4.17.21",
15-
"masonry-layout": "^4.2.2",
16-
"prop-types": "^15.8.1",
1712
"react": "^18.2.0",
1813
"react-dom": "^18.2.0",
1914
"react-measure": "^2.5.2",

‎dev/src/App.js

-3
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,13 @@ import {Wall, Frame, Section, Table, Tabs} from './lib/index.js';
66

77
import Showcases from './panels/Showcases.js';
88
import Example from './panels/Example.js';
9-
import MasonryLayout from './panels/MasonryLayout.js';
109

1110
export default function App (props) {
1211
const [tabs, setTabs] = React.useState({
1312
selected: 'masonry',
1413
list: [
1514
{ code: 'example', label:'Example' },
1615
{ code: 'showcase', label:'Showcase' },
17-
{ code: 'masonry', label:'Masonry' },
1816
],
1917
});
2018

@@ -26,7 +24,6 @@ export default function App (props) {
2624

2725
{'example' ===tabs.selected && <Example/>}
2826
{'showcase'===tabs.selected && <Showcases/>}
29-
{'masonry'===tabs.selected && <MasonryLayout/>}
3027

3128
</Frame>
3229
</Wall>

‎dev/src/lib/components/FrameTabs.js

+32-32
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
import * as React from 'react';
2-
3-
import Measure from 'react-measure';
4-
import Box from '@mui/material/Box';
5-
6-
import Frame from './Frame.js';
7-
import Tabs from './Tabs.js';
8-
9-
export default function FrameTabs (props) {
10-
const children = props.children;
11-
const tabs = props.tabs;
12-
const onChangeTabs = props.onChangeTabs;
13-
14-
const [bounds, setBounds] = React.useState({height:0});
15-
16-
return (
17-
<Frame>
18-
<Measure bounds onResize={rect => setBounds(rect.bounds)}>
19-
{({ measureRef }) => (
20-
<Box ref={measureRef}>
21-
<Tabs data={tabs}
22-
onChange={(new_tabs)=>onChangeTabs(new_tabs)}/>
23-
</Box>
24-
)}
25-
</Measure>
26-
27-
<Box sx={{height: `calc(100% - ${bounds.height}px)`}}>
28-
{children}
29-
</Box>
30-
</Frame>
31-
);
32-
}
1+
import * as React from 'react';
2+
3+
import Measure from 'react-measure';
4+
import Box from '@mui/material/Box';
5+
6+
import Frame from './Frame.js';
7+
import Tabs from './Tabs.js';
8+
9+
export default function FrameTabs (props) {
10+
const children = props.children;
11+
const tabs = props.tabs;
12+
const onChangeTabs = props.onChangeTabs;
13+
14+
const [bounds, setBounds] = React.useState({height:0});
15+
16+
return (
17+
<Frame>
18+
<Measure bounds onResize={rect => setBounds(rect.bounds)}>
19+
{({ measureRef }) => (
20+
<Box ref={measureRef}>
21+
<Tabs data={tabs}
22+
onChange={(new_tabs)=>onChangeTabs(new_tabs)}/>
23+
</Box>
24+
)}
25+
</Measure>
26+
27+
<Box sx={{height: `calc(100% - ${bounds.height}px)`}}>
28+
{children}
29+
</Box>
30+
</Frame>
31+
);
32+
}

‎dev/src/lib/components/GithubCorners.js

+40-40
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
1-
import * as React from 'react';
2-
3-
// import {Link as RrLink} from "react-router-dom";
4-
5-
export default function GithubCorners (props) {
6-
const style = {
7-
fill: '#151513',
8-
color: '#fff',
9-
position: 'absolute',
10-
top: 0,
11-
border: 0,
12-
right: 0,
13-
};
14-
15-
return (
16-
<a href="https://github.com/orgs/mobilus-co-jp/teams/mooa-developers/projects?query=is%3Aopen"
17-
target="_blank"
18-
rel="noopener noreferrer"
19-
className="github-corner"
20-
aria-label="View source on GitHub">
21-
<svg width="80"
22-
height="80"
23-
viewBox="0 0 250 250"
24-
style={style}
25-
aria-hidden="true">
26-
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z">
27-
</path>
28-
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
29-
fill="currentColor"
30-
style={{transformOrigin: '130px 106px'}}
31-
className="octo-arm">
32-
</path>
33-
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
34-
fill="currentColor"
35-
className="octo-body">
36-
</path>
37-
</svg>
38-
</a>
39-
);
40-
}
1+
import * as React from 'react';
2+
3+
// import {Link as RrLink} from "react-router-dom";
4+
5+
export default function GithubCorners (props) {
6+
const style = {
7+
fill: '#151513',
8+
color: '#fff',
9+
position: 'absolute',
10+
top: 0,
11+
border: 0,
12+
right: 0,
13+
};
14+
15+
return (
16+
<a href="https://github.com/orgs/mobilus-co-jp/teams/mooa-developers/projects?query=is%3Aopen"
17+
target="_blank"
18+
rel="noopener noreferrer"
19+
className="github-corner"
20+
aria-label="View source on GitHub">
21+
<svg width="80"
22+
height="80"
23+
viewBox="0 0 250 250"
24+
style={style}
25+
aria-hidden="true">
26+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z">
27+
</path>
28+
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
29+
fill="currentColor"
30+
style={{transformOrigin: '130px 106px'}}
31+
className="octo-arm">
32+
</path>
33+
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
34+
fill="currentColor"
35+
className="octo-body">
36+
</path>
37+
</svg>
38+
</a>
39+
);
40+
}

‎dev/src/lib/components/LinkOutSite.js

+28-28
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import * as React from 'react';
2-
3-
import MaterialLink from '@mui/material/Link';
4-
5-
export default function LinkOutSite (props) {
6-
const href = props.href;
7-
const children = props.children;
8-
const style = props.style || {};
9-
10-
const style_org = {
11-
color: 'rgba(0, 0, 0, 0.87)',
12-
textDecorationStyle: 'dotted',
13-
textDecorationColor: 'rgba(188, 188, 188, 0.88)',
14-
textDecorationThickness: '0.05em',
15-
};
16-
17-
return (
18-
<MaterialLink href={href}
19-
target="_blank"
20-
rel="noreferrer"
21-
style={{
22-
...style_org,
23-
...style,
24-
}}>
25-
{children || href}
26-
</MaterialLink>
27-
);
28-
}
1+
import * as React from 'react';
2+
3+
import MaterialLink from '@mui/material/Link';
4+
5+
export default function LinkOutSite (props) {
6+
const href = props.href;
7+
const children = props.children;
8+
const style = props.style || {};
9+
10+
const style_org = {
11+
color: 'rgba(0, 0, 0, 0.87)',
12+
textDecorationStyle: 'dotted',
13+
textDecorationColor: 'rgba(188, 188, 188, 0.88)',
14+
textDecorationThickness: '0.05em',
15+
};
16+
17+
return (
18+
<MaterialLink href={href}
19+
target="_blank"
20+
rel="noreferrer"
21+
style={{
22+
...style_org,
23+
...style,
24+
}}>
25+
{children || href}
26+
</MaterialLink>
27+
);
28+
}

‎dev/src/lib/components/LinkReactRouter.js

+26-26
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
import * as React from 'react';
2-
3-
import {Link as RrLink} from "react-router-dom";
4-
5-
export default function LinkReactRouter (props) {
6-
const href = props.href;
7-
const children = props.children;
8-
const style = props.style;
9-
10-
const style_org = {
11-
color: 'rgba(0, 0, 0, 0.87)',
12-
textDecorationStyle: 'dotted',
13-
textDecorationColor: 'rgba(188, 188, 188, 0.88)',
14-
textDecorationThickness: '0.05em',
15-
};
16-
17-
return (
18-
<RrLink to={href}
19-
style={{
20-
...style_org,
21-
...style,
22-
}}>
23-
{children}
24-
</RrLink>
25-
);
26-
}
1+
import * as React from 'react';
2+
3+
import {Link as RrLink} from "react-router-dom";
4+
5+
export default function LinkReactRouter (props) {
6+
const href = props.href;
7+
const children = props.children;
8+
const style = props.style;
9+
10+
const style_org = {
11+
color: 'rgba(0, 0, 0, 0.87)',
12+
textDecorationStyle: 'dotted',
13+
textDecorationColor: 'rgba(188, 188, 188, 0.88)',
14+
textDecorationThickness: '0.05em',
15+
};
16+
17+
return (
18+
<RrLink to={href}
19+
style={{
20+
...style_org,
21+
...style,
22+
}}>
23+
{children}
24+
</RrLink>
25+
);
26+
}

0 commit comments

Comments
 (0)