Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: format code with Prettier and StandardJS #501

Closed
wants to merge 1 commit into from
Closed

style: format code with Prettier and StandardJS #501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
75 changes: 34 additions & 41 deletions src/components/stateless/Spotlight/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,60 @@
import React, { useRef, useState, useEffect } from "react"
import useMousePosition from "@hooks/useMousePosition"
import React, { useRef, useState, useEffect } from 'react'

Check failure on line 1 in src/components/stateless/Spotlight/index.jsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

ESLint 

ESLint: Install the 'eslint' package
import useMousePosition from '@hooks/useMousePosition'

export default function Spotlight({children, className = "",}) {
const containerRef = useRef(null);
const mousePosition = useMousePosition();
const mouse = useRef({ x: 0, y: 0 });
const containerSize = useRef({ w: 0, h: 0 });
const [boxes, setBoxes] = useState([]);
export default function Spotlight ({ children, className = '' }) {
const containerRef = useRef(null)
const mousePosition = useMousePosition()
const mouse = useRef({ x: 0, y: 0 })
const containerSize = useRef({ w: 0, h: 0 })
const [boxes, setBoxes] = useState([])

useEffect(() => {
containerRef.current &&
setBoxes(
Array.from(containerRef.current.children).map(
(el) => el,
),
);
}, []);
containerRef.current && setBoxes(Array.from(containerRef.current.children).map((el) => el))
}, [])

useEffect(() => {
initContainer();
window.addEventListener("resize", initContainer);
initContainer()
window.addEventListener('resize', initContainer)

return () => {
window.removeEventListener("resize", initContainer);
};
}, [boxes]);
window.removeEventListener('resize', initContainer)
}
}, [boxes])

useEffect(() => {
onMouseMove();
}, [mousePosition]);
onMouseMove()
}, [mousePosition])

const initContainer = () => {
if (containerRef.current) {
containerSize.current.w = containerRef.current.offsetWidth;
containerSize.current.h = containerRef.current.offsetHeight;
containerSize.current.w = containerRef.current.offsetWidth
containerSize.current.h = containerRef.current.offsetHeight
}
};
}

const onMouseMove = () => {
if (containerRef.current) {
const rect = containerRef.current.getBoundingClientRect();
const { w, h } = containerSize.current;
const x = mousePosition.x - rect.left;
const y = mousePosition.y - rect.top;
const inside = x < w && x > 0 && y < h && y > 0;
const rect = containerRef.current.getBoundingClientRect()
const { w, h } = containerSize.current
const x = mousePosition.x - rect.left
const y = mousePosition.y - rect.top
const inside = x < w && x > 0 && y < h && y > 0
if (inside) {
mouse.current.x = x;
mouse.current.y = y;
mouse.current.x = x
mouse.current.y = y
boxes.forEach((box) => {
const boxX =
-(box.getBoundingClientRect().left - rect.left) + mouse.current.x;
const boxY =
-(box.getBoundingClientRect().top - rect.top) + mouse.current.y;
box.style.setProperty("--mouse-x", `${boxX}px`);
box.style.setProperty("--mouse-y", `${boxY}px`);
});
const boxX = -(box.getBoundingClientRect().left - rect.left) + mouse.current.x
const boxY = -(box.getBoundingClientRect().top - rect.top) + mouse.current.y
box.style.setProperty('--mouse-x', `${boxX}px`)
box.style.setProperty('--mouse-y', `${boxY}px`)
})
}
}
};
}

return (
<div className={className} ref={containerRef}>
{children}
</div>
);
)
}
58 changes: 24 additions & 34 deletions src/pages/home/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { version, useState, useRef } from 'react'

Check failure on line 1 in src/pages/home/index.jsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

ESLint 

ESLint: Install the 'eslint' package
import { Input, Flex, Button } from 'antd'
import { SendOutlined } from '@ant-design/icons'
import { Atom, Merge, GitMerge, GitPullRequestArrow } from 'lucide-react'
import CountUp from 'react-countup'
import { PinInput } from 'react-input-pin-code'
import Spotlight from '@stateless/Spotlight'

Check warning on line 7 in src/pages/home/index.jsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused import 

Unused import Spotlight from '@stateless/Spotlight'
import Typewriter from 'typewriter-effect'
import FixTabPanel from '@stateless/FixTabPanel'
import TypedText from '@stateless/TypedText'
Expand Down Expand Up @@ -83,8 +83,8 @@
[
{
content: text,
role: 'user',
},
role: 'user'
}
],
key,
signal
Expand Down Expand Up @@ -171,36 +171,32 @@
I love coding in <AlternatingText alternateText={['javascript', 'typescript', 'rect', 'vue']} />.
</section>
<section style={{ marginBottom: 40 }}>
<AutoLink text="foo bar baz http://example.org bar https://github.com/wkylin/pro-react-admin" />
<AutoLink text='foo bar baz http://example.org bar https://github.com/wkylin/pro-react-admin' />
</section>
<section className={styles.line}></section>
<section className={styles.line} />
<section>
<AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />
<AvatarCard avatar='https://picsum.photos/seed/picsum/300/160' text="Hi, I'm a developer." />
</section>
<section>
<IsometricCard text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?" />
<IsometricCard text='Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti repellat, consequuntur doloribus voluptate esse iure?' />
</section>
<StarRating value={2} />
<LineBordered text="A line bordered text." />
<LineBordered text='A line bordered text.' />
<section style={{ display: 'flex', alignItems: 'center', marginTop: 10, marginBottom: 40 }}>
<Atom /> <Merge /> <GitMerge /> <GitPullRequestArrow />
</section>
<section style={{ marginBottom: 40 }}>
<ScrollAnimation>
<LazyLoadImage src="https://picsum.photos/seed/picsum/300/160" alt="Strawberries" />
<LazyLoadImage src='https://picsum.photos/seed/picsum/300/160' alt='Strawberries' />
</ScrollAnimation>
</section>
<section style={{ marginBottom: 40, fontSize: 36 }}>
<Typewriter
options={{
strings: [
"Software Developer.",
"Full Stack Developer.",
"Open Source Contributor.",
],
strings: ['Software Developer.', 'Full Stack Developer.', 'Open Source Contributor.'],
autoStart: true,
loop: true,
deleteSpeed: 50,
deleteSpeed: 50
}}
/>
</section>
Expand All @@ -226,18 +222,18 @@
</section>
<section style={{ marginBottom: 40 }}>
<AnimateOnScreen.FadeIn>
<AvatarCard avatar="https://picsum.photos/seed/picsum/300/160" text="Hi, I'm a developer." />
<AvatarCard avatar='https://picsum.photos/seed/picsum/300/160' text="Hi, I'm a developer." />
</AnimateOnScreen.FadeIn>
</section>
<section style={{ marginBottom: 40 }}>
<AnimateOnScreen.FadeUp>
<img src="https://picsum.photos/360/200.jpg" alt="" />
<img src='https://picsum.photos/360/200.jpg' alt='' />
</AnimateOnScreen.FadeUp>
</section>
<section style={{ marginBottom: 40, width: 360, height: 200 }}>
<AnimateOnScreen.ScaleIn>
<>
<img src="https://picsum.photos/360/200/?blur=2" alt="" />
<img src='https://picsum.photos/360/200/?blur=2' alt='' />
<section className={styles['blend-me']}>Mix Blend Mode</section>
</>
</AnimateOnScreen.ScaleIn>
Expand All @@ -262,16 +258,16 @@
mask
</section>
<section style={{ marginBottom: 40 }}>
<button className={styles['button']}>
<button className={styles.button}>
<span className={styles['button-label']}>Click Me</span>
</button>
</section>

<section style={{ position: 'relative', margin: '80px 0 160px 50px' }}>
<div className={styles['circle-1']}></div>
<div className={styles['circle-2']}></div>
<div className={styles['circle-3']}></div>
<div className={styles['circle-4']}></div>
<div className={styles['circle-1']} />
<div className={styles['circle-2']} />
<div className={styles['circle-3']} />
<div className={styles['circle-4']} />
</section>

<section style={{ margin: 20 }} className={styles.eHElAY}>
Expand All @@ -288,22 +284,16 @@
</div>
</section>
<section style={{ margin: 20, fontSize: 40 }}>
<CountUp
start={20}
end={10000}
duration={10}
enableScrollSpy
scrollSpyDelay={1000}
/>
<CountUp start={20} end={10000} duration={10} enableScrollSpy scrollSpyDelay={1000} />
</section>
<section style={{ width: 600, margin: '30px 0' }}>
<Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
<Flex align="center">
<Input defaultValue={apiKey} placeholder='api key' onChange={changeApiKey} style={{ marginBottom: 20 }} />
<Flex align='center'>
{/* <LinearWrap> */}
<Input.TextArea

Check notice on line 293 in src/pages/home/index.jsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unresolved JSX component 

Unresolved component Input.TextArea
ref={textareaRef}
defaultValue={chatText}
placeholder="来，说点什么呗...Meta + Enter发送"
placeholder='来，说点什么呗...Meta + Enter发送'
onChange={changeChatText}
onKeyDown={onInputKeyDown}
autoSize
Expand All @@ -313,13 +303,13 @@
<Button
style={{ margin: '0 10px' }}
icon={<SendOutlined rotate={-60} />}
type="primary"
type='primary'
disabled={isStream}
onClick={onSubmit}
>
发送
</Button>
<Button icon={<SendOutlined rotate={-60} />} type="primary" disabled={!isStream} onClick={onStop}>
<Button icon={<SendOutlined rotate={-60} />} type='primary' disabled={!isStream} onClick={onStop}>
停止
</Button>
</Flex>
Expand Down
Loading