-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
66e2494
commit 9c3e931
Showing
45 changed files
with
1,425 additions
and
66 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { defineConfig } from 'father'; | ||
|
|
||
| const library = 'JandiasnowBasic'; | ||
|
|
||
| const externals = {}; | ||
|
|
||
| export default defineConfig({ | ||
| extends: '../../.fatherrc.base.ts', | ||
| cjs: { | ||
| input: 'src', // 默认编译目录 | ||
| platform: 'node', // 默认构建为 Node.js 环境的产物 | ||
| transformer: 'esbuild', // 默认使用 esbuild 以获得更快的构建速度 | ||
| }, | ||
| umd: { | ||
| entry: { | ||
| 'src/index.ts': { | ||
| name: library, | ||
| sourcemap: true, | ||
| externals, | ||
| }, | ||
| }, | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| node_modules | ||
| dist | ||
| .dumi |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| # @jandiasnow/basic | ||
|
|
||
| 🧩 [@jandiasnow/basic](https://www.npmjs.com/package/@jandiasnow/basic) is an warehouse of frontend basic | ||
|
|
||
| ## Development | ||
|
|
||
| ```bash | ||
| # install dependencies | ||
| $ pnpm install | ||
|
|
||
| # start dev server | ||
| $ pnpm start | ||
|
|
||
| # build docs | ||
| $ pnpm run build | ||
| ``` | ||
|
|
||
| ## LICENSE | ||
|
|
||
| MIT |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import { Tabs } from 'antd'; | ||
| import React, { Profiler, useState } from 'react'; | ||
|
|
||
| export default () => { | ||
| const [tab, setTab] = useState('key1'); | ||
| return ( | ||
| <Profiler | ||
| id="tabs" | ||
| onRender={(...params) => { | ||
| console.warn('<Profiler>:', params); | ||
| }} | ||
| > | ||
| <Tabs | ||
| activeKey={tab} | ||
| items={[ | ||
| { key: 'key1', label: 'label1', children: 'children1' }, | ||
| { key: 'key2', label: 'label2', children: 'children2' }, | ||
| ]} | ||
| onChange={v => { | ||
| setTab(v); | ||
| }} | ||
| /> | ||
| </Profiler> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { Space } from 'antd'; | ||
| import React, { StrictMode, useState } from 'react'; | ||
|
|
||
| let initialStories = [ | ||
| { id: 0, label: "Ankit's Story" }, | ||
| { id: 1, label: "Taylor's Story" }, | ||
| ]; | ||
|
|
||
| export default function App() { | ||
| let [stories] = useState(initialStories); | ||
| const [isHover, setIsHover] = useState(false); | ||
| const items = stories as any; | ||
| items.push({ id: 'create', label: 'Create Story' }); | ||
|
|
||
| return ( | ||
| <StrictMode> | ||
| <Space | ||
| onPointerEnter={() => setIsHover(true)} | ||
| onPointerLeave={() => setIsHover(false)} | ||
| style={{ | ||
| backgroundColor: isHover ? '#ddd' : '#fff', | ||
| }} | ||
| > | ||
| {items.map(story => ( | ||
| <li | ||
| key={story.id} | ||
| style={{ border: '1px solid #ddd', borderRadius: '4px', padding: '24px' }} | ||
| > | ||
| {story.label} | ||
| </li> | ||
| ))} | ||
| </Space> | ||
| </StrictMode> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { Space, Spin } from 'antd'; | ||
| import React, { Suspense } from 'react'; | ||
|
|
||
| export default () => { | ||
| return ( | ||
| <Suspense fallback={<Spin spinning={true}>loading</Spin>}> | ||
| <Space> | ||
| wrapper | ||
| <Suspense fallback={<Spin spinning={true}>loading1</Spin>}>info</Suspense> | ||
| </Space> | ||
| </Suspense> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { Button, Space, Typography } from 'antd'; | ||
| import React, { useId, useState } from 'react'; | ||
| import { createPortal } from 'react-dom'; | ||
|
|
||
| const ModalContent = ({ onClose }) => { | ||
| return ( | ||
| <Space style={{ border: '1px solid #ccc', padding: '24px', borderRadius: '4px' }}> | ||
| <Typography.Text>modal content</Typography.Text> | ||
| <Button onClick={() => onClose()}>close</Button> | ||
| </Space> | ||
| ); | ||
| }; | ||
|
|
||
| export default () => { | ||
| const [showModal, setShowModal] = useState(false); | ||
| const domId = useId(); | ||
|
|
||
| return ( | ||
| <Space> | ||
| <Button onClick={() => setShowModal(true)}>Show modal using a portal</Button> | ||
|
|
||
| <div id={domId}></div> | ||
|
|
||
| {showModal && | ||
| createPortal( | ||
| <ModalContent onClose={() => setShowModal(false)} />, | ||
| document.querySelector("[id=':r3:']") as any | ||
| )} | ||
| </Space> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { Button, Input, Space } from 'antd'; | ||
| import React, { useState } from 'react'; | ||
| import { flushSync } from 'react-dom'; | ||
|
|
||
| export default () => { | ||
| const [text, setText] = useState('init'); | ||
|
|
||
| const handleChange = () => { | ||
| flushSync(() => { | ||
| setText('change'); | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <Space> | ||
| {text} | ||
| <Button onClick={handleChange}>Change</Button> | ||
| <Input onChange={e => setText(e.target.value)} value={text} /> | ||
| </Space> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import { Checkbox, Space, Spin } from 'antd'; | ||
| import { Suspense, lazy, useState } from 'react'; | ||
|
|
||
| const delayForDemo = promise => { | ||
| return new Promise(resolve => { | ||
| setTimeout(resolve, 2000); | ||
| }).then(() => promise); | ||
| }; | ||
|
|
||
| const LazyComponent = lazy(() => delayForDemo(import('./lazyComponent.tsx'))); | ||
|
|
||
| export default () => { | ||
| const [showPreview, setShowPreview] = useState(false); | ||
|
|
||
| return ( | ||
| <Space> | ||
| <Checkbox onChange={e => setShowPreview(e.target.checked)} value={showPreview}> | ||
| Show preview | ||
| </Checkbox> | ||
| {showPreview && ( | ||
| <Suspense fallback={<Spin spinning={true} />}> | ||
| Preview: | ||
| <LazyComponent /> | ||
| </Suspense> | ||
| )} | ||
| </Space> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export default () => { | ||
| return 'lazyComponent'; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { Input, Space } from 'antd'; | ||
| import { memo, useState } from 'react'; | ||
|
|
||
| const MemoComponent = memo(({ name }) => { | ||
| console.warn('Greeting was rendered at', new Date().toLocaleTimeString()); | ||
| return ( | ||
| <Space> | ||
| {new Date().toLocaleTimeString()}: {name || '-'} | ||
| </Space> | ||
| ); | ||
| }); | ||
|
|
||
| export default function MyApp() { | ||
| const [name, setName] = useState(''); | ||
| const [address, setAddress] = useState(''); | ||
| return ( | ||
| <Space> | ||
| <Input onChange={e => setName(e.target.value)} placeholder="Name" value={name} /> | ||
| <Input onChange={e => setAddress(e.target.value)} placeholder="Address" value={address} /> | ||
| <MemoComponent name={name} /> | ||
| </Space> | ||
| ); | ||
| } |
Oops, something went wrong.