Skip to content

Commit d0484cc

Browse files
[infra] updated naming CodeArea -> CodeSnippetArea
1 parent ca5113d commit d0484cc

File tree

3 files changed

+123
-123
lines changed

3 files changed

+123
-123
lines changed
Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
1-
/*
2-
* Copyright 2020 Google LLC
3-
*
4-
* Licensed under the Apache License, Version 2.0 (the 'License');
5-
* you may not use this file except in compliance with the License.
6-
* You may obtain a copy of the License at
7-
*
8-
* https://www.apache.org/licenses/LICENSE-2.0
9-
*
10-
* Unless required by applicable law or agreed to in writing, software
11-
* distributed under the License is distributed on an 'AS IS' BASIS,
12-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13-
* See the License for the specific language governing permissions and
14-
* limitations under the License.
15-
*/
16-
17-
import React from 'react';
18-
import clsx from 'clsx';
19-
20-
import ReactCodeBlock from 'components/ReactCodeBlock';
21-
import styles from './style.module.css';
22-
import { reactLoadingPatterns } from 'utils/data/concepts';
23-
24-
const CodeArea = ({ selectedPatternId, className }) => {
25-
const pattern = reactLoadingPatterns.find(reactLoadingPattern => reactLoadingPattern.id === selectedPatternId);
26-
27-
return (
28-
<div className={clsx(styles['root'], className)}>
29-
<ReactCodeBlock
30-
linesInPrimary={pattern.linesInPrimary}
31-
linesInSecondary={pattern.linesInSecondary}
32-
value={pattern.codeSnippet} />
33-
</div>
34-
);
35-
};
36-
37-
export default CodeArea;
1+
/*
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the 'License');
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an 'AS IS' BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React from 'react';
18+
import clsx from 'clsx';
19+
20+
import ReactCodeBlock from 'components/ReactCodeBlock';
21+
import styles from './style.module.css';
22+
import { reactLoadingPatterns } from 'utils/data/concepts';
23+
24+
const CodeSnippetArea = ({ selectedPatternId, className }) => {
25+
const pattern = reactLoadingPatterns.find(reactLoadingPattern => reactLoadingPattern.id === selectedPatternId);
26+
27+
return (
28+
<div className={clsx(styles['root'], className)}>
29+
<ReactCodeBlock
30+
linesInPrimary={pattern.linesInPrimary}
31+
linesInSecondary={pattern.linesInSecondary}
32+
value={pattern.codeSnippet} />
33+
</div>
34+
);
35+
};
36+
37+
export default CodeSnippetArea;
Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
/*
2-
* Copyright 2020 Google LLC
3-
*
4-
* Licensed under the Apache License, Version 2.0 (the 'License');
5-
* you may not use this file except in compliance with the License.
6-
* You may obtain a copy of the License at
7-
*
8-
* https://www.apache.org/licenses/LICENSE-2.0
9-
*
10-
* Unless required by applicable law or agreed to in writing, software
11-
* distributed under the License is distributed on an 'AS IS' BASIS,
12-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13-
* See the License for the specific language governing permissions and
14-
* limitations under the License.
15-
*/
16-
17-
.root {
18-
font-size: 16px;
19-
}
20-
21-
@media only screen and (max-width: 600px) {
22-
.root {
23-
font-size: 8px;
24-
}
25-
}
1+
/*
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the 'License');
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an 'AS IS' BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
.root {
18+
font-size: 16px;
19+
}
20+
21+
@media only screen and (max-width: 600px) {
22+
.root {
23+
font-size: 8px;
24+
}
25+
}
Lines changed: 61 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,61 @@
1-
/*
2-
* Copyright 2020 Google LLC
3-
*
4-
* Licensed under the Apache License, Version 2.0 (the 'License');
5-
* you may not use this file except in compliance with the License.
6-
* You may obtain a copy of the License at
7-
*
8-
* https://www.apache.org/licenses/LICENSE-2.0
9-
*
10-
* Unless required by applicable law or agreed to in writing, software
11-
* distributed under the License is distributed on an 'AS IS' BASIS,
12-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13-
* See the License for the specific language governing permissions and
14-
* limitations under the License.
15-
*/
16-
17-
import React, { useState, useEffect } from 'react';
18-
19-
import CodeArea from 'components/CodeArea';
20-
import ConceptOptionList from 'components/ConceptOptionList';
21-
import TextDescription from 'components/TextDescription';
22-
import styles from './style.module.css';
23-
import { reactLoadingPatterns } from 'utils/data/concepts';
24-
25-
const checkHashWithPatternId = hashWithoutSharp => {
26-
const isMatchedWithPatternId = reactLoadingPatterns.findIndex(reactLoadingPattern => reactLoadingPattern.id === hashWithoutSharp) > -1;
27-
return isMatchedWithPatternId;
28-
};
29-
30-
const ReactLoadingPatterns = () => {
31-
const [selectedPatternId, setSelectedPatternId] = useState(reactLoadingPatterns[0].id);
32-
useEffect(() => {
33-
const hash = window.location.hash;
34-
const hashWithoutSharp = hash.replace('#', '');
35-
if (checkHashWithPatternId(hashWithoutSharp)) {
36-
setSelectedPatternId(hashWithoutSharp);
37-
}
38-
}, []);
39-
40-
const selectPatternHandler = event => {
41-
window.history.pushState('object or string', 'Title', `/#${event.currentTarget.value}`);
42-
setSelectedPatternId(event.currentTarget.value);
43-
};
44-
45-
return (
46-
<div className={styles['root']}>
47-
<h2>React Loading Patterns</h2>
48-
<div className={styles['flex-container']}>
49-
<ConceptOptionList
50-
selectOption={selectPatternHandler}
51-
selectedOptionId={selectedPatternId} />
52-
<CodeArea
53-
className={styles['code-area']}
54-
selectedPatternId={selectedPatternId} />
55-
</div>
56-
<TextDescription selectedPatternId={selectedPatternId} />
57-
</div>
58-
);
59-
};
60-
61-
export default ReactLoadingPatterns;
1+
/*
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the 'License');
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an 'AS IS' BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React, { useState, useEffect } from 'react';
18+
19+
import CodeSnippetArea from 'components/CodeSnippetArea';
20+
import ConceptOptionList from 'components/ConceptOptionList';
21+
import TextDescription from 'components/TextDescription';
22+
import styles from './style.module.css';
23+
import { reactLoadingPatterns } from 'utils/data/concepts';
24+
25+
const checkHashWithPatternId = hashWithoutSharp => {
26+
const isMatchedWithPatternId = reactLoadingPatterns.findIndex(reactLoadingPattern => reactLoadingPattern.id === hashWithoutSharp) > -1;
27+
return isMatchedWithPatternId;
28+
};
29+
30+
const ReactLoadingPatterns = () => {
31+
const [selectedPatternId, setSelectedPatternId] = useState(reactLoadingPatterns[0].id);
32+
useEffect(() => {
33+
const hash = window.location.hash;
34+
const hashWithoutSharp = hash.replace('#', '');
35+
if (checkHashWithPatternId(hashWithoutSharp)) {
36+
setSelectedPatternId(hashWithoutSharp);
37+
}
38+
}, []);
39+
40+
const selectPatternHandler = event => {
41+
window.history.pushState('object or string', 'Title', `/#${event.currentTarget.value}`);
42+
setSelectedPatternId(event.currentTarget.value);
43+
};
44+
45+
return (
46+
<div className={styles['root']}>
47+
<h2>React Loading Patterns</h2>
48+
<div className={styles['flex-container']}>
49+
<ConceptOptionList
50+
selectOption={selectPatternHandler}
51+
selectedOptionId={selectedPatternId} />
52+
<CodeSnippetArea
53+
className={styles['code-area']}
54+
selectedPatternId={selectedPatternId} />
55+
</div>
56+
<TextDescription selectedPatternId={selectedPatternId} />
57+
</div>
58+
);
59+
};
60+
61+
export default ReactLoadingPatterns;

0 commit comments

Comments
 (0)