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.

chore(deps): latest next, improve image#1143

Merged
mydearxym merged 1 commit intodevfromdeps-next
Aug 12, 2021
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletionsnext-env.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
2 changes: 1 addition & 1 deletionpackage.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -83,7 +83,7 @@
"mobx-state-tree": "5.0.2",
"module-alias": "^2.0.1",
"nanoid": "^3.1.12",
"next": "11.0.1",
"next": "^11.1.0",
"next-compose-plugins": "^2.2.0",
"next-i18next": "4.4.1",
"next-offline": "4.0.6",
Expand Down
10 changes: 10 additions & 0 deletionssrc/components/ArticleMenu/RealArticleMenu.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,6 +19,16 @@ type TProps = {
}

const menuOptions = [
{
key: 'pin',
icon: `${ICON}/edit/publish-pen.svg`,
title: '置顶',
},
{
key: 'sink',
icon: `${ICON}/edit/publish-pen.svg`,
title: '下沉',
},
{
key: 'edit',
icon: `${ICON}/edit/publish-pen.svg`,
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,50 @@
import React, { useState } from 'react'
import T from 'prop-types'
import { FC, Fragment, ReactNode, memo, useState } from 'react'

import { LazyLoadImage } from 'react-lazy-load-image-component'
import 'react-lazy-load-image-component/src/effects/blur.css'

import { Wrapper, FallbackWrapper } from './styles/lazy_load_image'

type TProps = {
className?: string
src: string
alt?: string
fallback?: ReactNode | null
scrollPosition: any
visibleByDefault?: boolean
}

/**
* lazy load images like .jpg .jpeg .png etc
* the fallback is for the image offen block in china, like github avatars
* fallback 常被用于图片间歇性被墙的情况，比如 github 头像等
*/
const LazyLoadImg = ({
className,
const LazyLoadImg: FC<TProps> = ({
className = 'img-class',
src,
alt,
fallback,
scrollPosition,
visibleByDefault,
alt = 'image',
fallback = null,
visibleByDefault = false,
}) => {
const [imgLoaded, setImgLoaded] = useState(false)

return (
<Wrapper>
<FallbackWrapper>
{!imgLoaded && <React.Fragment>{fallback}</React.Fragment>}
{!imgLoaded && <Fragment>{fallback}</Fragment>}
</FallbackWrapper>
<LazyLoadImage
className={className}
src={src}
alt={alt}
// placeholder={<PlaceHolder child={fallback} />}
effect="blur"
scrollPosition={scrollPosition}
scrollPosition={null}
visibleByDefault={visibleByDefault}
afterLoad={() => setImgLoaded(true)}
/>
</Wrapper>
)
}

LazyLoadImg.propTypes = {
src: T.string.isRequired,
alt: T.string,
className: T.string,
fallback: T.oneOfType([T.node, T.instanceOf(null)]),
scrollPosition: T.any,
visibleByDefault: T.bool.isRequired,
}

LazyLoadImg.defaultProps = {
alt: 'image',
className: 'img-class',
fallback: null,
scrollPosition: null,
}

export default React.memo(LazyLoadImg)
export default memo(LazyLoadImg)
43 changes: 43 additions & 0 deletionssrc/components/Img/NextImg.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
import { FC, Fragment, ReactNode, memo, useState } from 'react'
import Image from 'next/image'

import { Wrapper, FallbackWrapper } from './styles/lazy_load_image'

type TProps = {
className?: string
src: string
alt?: string
fallback?: ReactNode | null
visibleByDefault?: boolean
}

/**
* lazy load images like .jpg .jpeg .png etc
* the fallback is for the image offen block in china, like github avatars
* fallback 常被用于图片间歇性被墙的情况，比如 github 头像等
*/
const NextImg: FC<TProps> = ({
className = 'img-class',
src,
alt = 'image',
fallback = null,
}) => {
const [imgLoaded, setImgLoaded] = useState(false)

return (
<Wrapper>
<FallbackWrapper>
{!imgLoaded && <Fragment>{fallback}</Fragment>}
</FallbackWrapper>
<Image
className={className}
src={src}
alt={alt}
placeholder="blur"
onLoadStart={() => setImgLoaded(true)}
/>
</Wrapper>
)
}

export default memo(NextImg)
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,33 @@
import React, { useState, useEffect, useRef, useCallback } from 'react'
import T from 'prop-types'
import {
FC,
memo,
useState,
useEffect,
useRef,
useCallback,
ReactNode,
} from 'react'

import { Image } from './styles'

type TProps = {
className?: string
src: string
alt?: string
fallback?: ReactNode | null
}

/**
* normal image like .jpg .jpeg .png etc
* the fallback is for the image offen block in china, like github avatars
* fallback 常被用于图片间歇性被墙的情况，比如 github 头像等
*/
const NormalImg = ({ className, src, alt, fallback }) => {
const NormalImg: FC<TProps> = ({
className = 'img-class',
src,
alt = 'image',
fallback = null,
}) => {
const ref = useRef(null)
const [loadCheck, setLoadCheck] = useState(true)
const [loadCheck2, setLoadCheck2] = useState(true)
Expand DownExpand Up@@ -44,17 +63,4 @@ const NormalImg = ({ className, src, alt, fallback }) => {
)
}

NormalImg.propTypes = {
src: T.string.isRequired,
alt: T.string,
className: T.string,
fallback: T.oneOfType([T.node, T.instanceOf(null)]),
}

NormalImg.defaultProps = {
alt: 'image',
className: 'img-class',
fallback: null,
}

export default React.memo(NormalImg)
export default memo(NormalImg)
31 changes: 7 additions & 24 deletionssrc/components/Img/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,6 +10,7 @@ import { buildLog } from '@/utils/logger'

import SvgLoader from './SvgLoader'
import NormalImg from './NormalImg'
// import NextImg from './NextImg'
import LazyLoadImg from './LazyLoadImg'

/* eslint-disable-next-line */
Expand DownExpand Up@@ -64,6 +65,12 @@ const Img: FC<IProps> = ({
fallback={fallback}
/>
) : (
// <NextImg
// className={className}
// src={src}
// alt={alt}
// fallback={fallback}
// />
<LazyLoadImg
className={className}
src={src}
Expand All@@ -77,28 +84,4 @@ const Img: FC<IProps> = ({
)
}

// Img.propTypes = {
// src: T.string.isRequired,
// alt: T.string,
// className: T.string,
// loading: T.any,
// fallback: T.oneOfType([T.node, T.instanceOf(null)]),
// noLazy: T.bool,
// scrollPosition: T.any,
// // see https://www.npmjs.com/package/react-lazy-load-image-component
// visibleByDefault: T.bool,
// onClick: T.func,
// }

// Img.defaultProps = {
// alt: 'img',
// className: 'img-class',
// loading: null,
// fallback: null,
// noLazy: false,
// scrollPosition: null,
// visibleByDefault: false,
// onClick: log,
// }

export default memo(Img)
18 changes: 0 additions & 18 deletionssrc/containers/layout/ThemePalette/ThirdPartyOverWrite.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -58,24 +58,6 @@ const CustomOverWrite = createGlobalStyle`
font-size: 1.3em;
color: ${theme('editor.content')};
}

.lazy-load-image-background.blur {
filter: blur(3px);
}

.lazy-load-image-background.blur.lazy-load-image-loaded {
filter: blur(0);
transition: filter 0.2s;
}

.lazy-load-image-background.blur > img {
opacity: 0;
}

.lazy-load-image-background.blur.lazy-load-image-loaded > img {
opacity: 1;
transition: opacity 0.2s;
}
`

export default CustomOverWrite
Loading
[8]ページ先頭
©2009-2025 Movatter.jp