Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commita4fbdbb

Browse files
authored
chore(deps): latest next, improve image (#1143)
1 parentdb09525 commita4fbdbb

File tree

9 files changed

+177
-134
lines changed

9 files changed

+177
-134
lines changed

‎next-env.d.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/types/global" />
33
/// <reference types="next/image-types/global" />
4+
5+
// NOTE: This file should not be edited
6+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
"mobx-state-tree":"5.0.2",
8484
"module-alias":"^2.0.1",
8585
"nanoid":"^3.1.12",
86-
"next":"11.0.1",
86+
"next":"^11.1.0",
8787
"next-compose-plugins":"^2.2.0",
8888
"next-i18next":"4.4.1",
8989
"next-offline":"4.0.6",

‎src/components/ArticleMenu/RealArticleMenu.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,16 @@ type TProps = {
1919
}
2020

2121
constmenuOptions=[
22+
{
23+
key:'pin',
24+
icon:`${ICON}/edit/publish-pen.svg`,
25+
title:'置顶',
26+
},
27+
{
28+
key:'sink',
29+
icon:`${ICON}/edit/publish-pen.svg`,
30+
title:'下沉',
31+
},
2232
{
2333
key:'edit',
2434
icon:`${ICON}/edit/publish-pen.svg`,
Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,50 @@
1-
importReact,{useState}from'react'
2-
importTfrom'prop-types'
1+
import{FC,Fragment,ReactNode,memo,useState}from'react'
32

43
import{LazyLoadImage}from'react-lazy-load-image-component'
4+
import'react-lazy-load-image-component/src/effects/blur.css'
5+
56
import{Wrapper,FallbackWrapper}from'./styles/lazy_load_image'
67

8+
typeTProps={
9+
className?:string
10+
src:string
11+
alt?:string
12+
fallback?:ReactNode|null
13+
scrollPosition:any
14+
visibleByDefault?:boolean
15+
}
16+
717
/**
818
* lazy load images like .jpg .jpeg .png etc
919
* the fallback is for the image offen block in china, like github avatars
1020
* fallback 常被用于图片间歇性被墙的情况，比如 github 头像等
1121
*/
12-
constLazyLoadImg=({
13-
className,
22+
constLazyLoadImg:FC<TProps>=({
23+
className='img-class',
1424
src,
15-
alt,
16-
fallback,
17-
scrollPosition,
18-
visibleByDefault,
25+
alt='image',
26+
fallback=null,
27+
visibleByDefault=false,
1928
})=>{
2029
const[imgLoaded,setImgLoaded]=useState(false)
2130

2231
return(
2332
<Wrapper>
2433
<FallbackWrapper>
25-
{!imgLoaded&&<React.Fragment>{fallback}</React.Fragment>}
34+
{!imgLoaded&&<Fragment>{fallback}</Fragment>}
2635
</FallbackWrapper>
2736
<LazyLoadImage
2837
className={className}
2938
src={src}
3039
alt={alt}
3140
// placeholder={<PlaceHolder child={fallback} />}
3241
effect="blur"
33-
scrollPosition={scrollPosition}
42+
scrollPosition={null}
3443
visibleByDefault={visibleByDefault}
3544
afterLoad={()=>setImgLoaded(true)}
3645
/>
3746
</Wrapper>
3847
)
3948
}
4049

41-
LazyLoadImg.propTypes={
42-
src:T.string.isRequired,
43-
alt:T.string,
44-
className:T.string,
45-
fallback:T.oneOfType([T.node,T.instanceOf(null)]),
46-
scrollPosition:T.any,
47-
visibleByDefault:T.bool.isRequired,
48-
}
49-
50-
LazyLoadImg.defaultProps={
51-
alt:'image',
52-
className:'img-class',
53-
fallback:null,
54-
scrollPosition:null,
55-
}
56-
57-
exportdefaultReact.memo(LazyLoadImg)
50+
exportdefaultmemo(LazyLoadImg)

‎src/components/Img/NextImg.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import{FC,Fragment,ReactNode,memo,useState}from'react'
2+
importImagefrom'next/image'
3+
4+
import{Wrapper,FallbackWrapper}from'./styles/lazy_load_image'
5+
6+
typeTProps={
7+
className?:string
8+
src:string
9+
alt?:string
10+
fallback?:ReactNode|null
11+
visibleByDefault?:boolean
12+
}
13+
14+
/**
15+
* lazy load images like .jpg .jpeg .png etc
16+
* the fallback is for the image offen block in china, like github avatars
17+
* fallback 常被用于图片间歇性被墙的情况，比如 github 头像等
18+
*/
19+
constNextImg:FC<TProps>=({
20+
className='img-class',
21+
src,
22+
alt='image',
23+
fallback=null,
24+
})=>{
25+
const[imgLoaded,setImgLoaded]=useState(false)
26+
27+
return(
28+
<Wrapper>
29+
<FallbackWrapper>
30+
{!imgLoaded&&<Fragment>{fallback}</Fragment>}
31+
</FallbackWrapper>
32+
<Image
33+
className={className}
34+
src={src}
35+
alt={alt}
36+
placeholder="blur"
37+
onLoadStart={()=>setImgLoaded(true)}
38+
/>
39+
</Wrapper>
40+
)
41+
}
42+
43+
exportdefaultmemo(NextImg)

‎src/components/Img/NormalImg.js‎renamed to ‎src/components/Img/NormalImg.tsx‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,33 @@
1-
importReact,{useState,useEffect,useRef,useCallback}from'react'
2-
importTfrom'prop-types'
1+
import{
2+
FC,
3+
memo,
4+
useState,
5+
useEffect,
6+
useRef,
7+
useCallback,
8+
ReactNode,
9+
}from'react'
310

411
import{Image}from'./styles'
512

13+
typeTProps={
14+
className?:string
15+
src:string
16+
alt?:string
17+
fallback?:ReactNode|null
18+
}
19+
620
/**
721
* normal image like .jpg .jpeg .png etc
822
* the fallback is for the image offen block in china, like github avatars
923
* fallback 常被用于图片间歇性被墙的情况，比如 github 头像等
1024
*/
11-
constNormalImg=({ className, src, alt, fallback})=>{
25+
constNormalImg:FC<TProps>=({
26+
className='img-class',
27+
src,
28+
alt='image',
29+
fallback=null,
30+
})=>{
1231
constref=useRef(null)
1332
const[loadCheck,setLoadCheck]=useState(true)
1433
const[loadCheck2,setLoadCheck2]=useState(true)
@@ -44,17 +63,4 @@ const NormalImg = ({ className, src, alt, fallback }) => {
4463
)
4564
}
4665

47-
NormalImg.propTypes={
48-
src:T.string.isRequired,
49-
alt:T.string,
50-
className:T.string,
51-
fallback:T.oneOfType([T.node,T.instanceOf(null)]),
52-
}
53-
54-
NormalImg.defaultProps={
55-
alt:'image',
56-
className:'img-class',
57-
fallback:null,
58-
}
59-
60-
exportdefaultReact.memo(NormalImg)
66+
exportdefaultmemo(NormalImg)

‎src/components/Img/index.tsx‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { buildLog } from '@/utils/logger'
1010

1111
importSvgLoaderfrom'./SvgLoader'
1212
importNormalImgfrom'./NormalImg'
13+
// import NextImg from './NextImg'
1314
importLazyLoadImgfrom'./LazyLoadImg'
1415

1516
/* eslint-disable-next-line */
@@ -64,6 +65,12 @@ const Img: FC<IProps> = ({
6465
fallback={fallback}
6566
/>
6667
) :(
68+
// <NextImg
69+
// className={className}
70+
// src={src}
71+
// alt={alt}
72+
// fallback={fallback}
73+
// />
6774
<LazyLoadImg
6875
className={className}
6976
src={src}
@@ -77,28 +84,4 @@ const Img: FC<IProps> = ({
7784
)
7885
}
7986

80-
// Img.propTypes = {
81-
// src: T.string.isRequired,
82-
// alt: T.string,
83-
// className: T.string,
84-
// loading: T.any,
85-
// fallback: T.oneOfType([T.node, T.instanceOf(null)]),
86-
// noLazy: T.bool,
87-
// scrollPosition: T.any,
88-
// // see https://www.npmjs.com/package/react-lazy-load-image-component
89-
// visibleByDefault: T.bool,
90-
// onClick: T.func,
91-
// }
92-
93-
// Img.defaultProps = {
94-
// alt: 'img',
95-
// className: 'img-class',
96-
// loading: null,
97-
// fallback: null,
98-
// noLazy: false,
99-
// scrollPosition: null,
100-
// visibleByDefault: false,
101-
// onClick: log,
102-
// }
103-
10487
exportdefaultmemo(Img)

‎src/containers/layout/ThemePalette/ThirdPartyOverWrite.ts‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -58,24 +58,6 @@ const CustomOverWrite = createGlobalStyle`
5858
font-size: 1.3em;
5959
color:${theme('editor.content')};
6060
}
61-
62-
.lazy-load-image-background.blur {
63-
filter: blur(3px);
64-
}
65-
66-
.lazy-load-image-background.blur.lazy-load-image-loaded {
67-
filter: blur(0);
68-
transition: filter 0.2s;
69-
}
70-
71-
.lazy-load-image-background.blur > img {
72-
opacity: 0;
73-
}
74-
75-
.lazy-load-image-background.blur.lazy-load-image-loaded > img {
76-
opacity: 1;
77-
transition: opacity 0.2s;
78-
}
7961
`
8062

8163
exportdefaultCustomOverWrite

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp