From 196a4351e3365e29818753176796fad645224f84 Mon Sep 17 00:00:00 2001 From: dingkang Date: Tue, 17 May 2022 10:19:38 +0800 Subject: [PATCH] docs: replace class component with hooks (#35580) * docs(badge): replace class component with hooks * docs(button): replace class component with hooks * docs(calendar): replace class component with hooks * docs(card): replace class component with hooks * docs(button): replace class component with hooks * chore(deps): remove webpack devDependencies * docs(cascader): replace class component with hooks * docs(checkbox): replace class component with hooks * docs(collapse): replace class component with hooks * docs(comment): replace class component with hooks * docs(descriptions): replace class component with hooks * docs(config-provider): replace class component with hooks * docs(date-picker): replace class component with hooks * docs(drawer): replace class component with hooks * docs(dropdown): replace class component with hooks * docs(dropdown): replace class component with hooks * docs(empty): replace class component with hooks * docs(grid): replace class component with hooks * docs(input): replace class component with hooks * docs(input-number): replace class component with hooks * docs(demo): fix lint error * docs(layout): replace class component with hooks * docs(list): replace class component with hooks * docs(mentions): replace class component with hooks * docs: fix code review issue --- .../layout/demo/custom-trigger-debug.md | 80 +++++----- components/layout/demo/custom-trigger.md | 112 +++++++------ components/layout/demo/side.md | 61 ++++---- components/list/demo/loadmore.md | 147 ++++++++---------- components/mentions/demo/async.md | 89 +++++------ components/mentions/demo/prefix.md | 48 +++--- 6 files changed, 239 insertions(+), 298 deletions(-) diff --git a/components/layout/demo/custom-trigger-debug.md b/components/layout/demo/custom-trigger-debug.md index 435a010e42..ac03e564cf 100644 --- a/components/layout/demo/custom-trigger-debug.md +++ b/components/layout/demo/custom-trigger-debug.md @@ -76,54 +76,46 @@ const items: MenuProps['items'] = [ }, ]; -class SiderDemo extends React.Component { - state = { - collapsed: true, +export default () => { + const [collapsed, setCollapsed] = React.useState(true); + + const toggle = () => { + setCollapsed(!collapsed); }; - toggle = () => { - this.setState({ - collapsed: !this.state.collapsed, - }); - }; - - render() { - return ( + return ( + + +
+ + - -
- - - -
- {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { - className: 'trigger', - onClick: this.toggle, - })} -
- - Content - - +
+ {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { + className: 'trigger', + onClick: toggle, + })} +
+ + Content + - ); - } -} - -export default () => ; + + ); +}; ``` ```css diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md index 1cb3e255c3..6de040316c 100644 --- a/components/layout/demo/custom-trigger.md +++ b/components/layout/demo/custom-trigger.md @@ -25,69 +25,61 @@ import { const { Header, Sider, Content } = Layout; -class SiderDemo extends React.Component { - state = { - collapsed: false, +export default () => { + const [collapsed, setCollapsed] = React.useState(false); + + const toggle = () => { + setCollapsed(!collapsed); }; - toggle = () => { - this.setState({ - collapsed: !this.state.collapsed, - }); - }; - - render() { - return ( - - -
- , - label: 'nav 1', - }, - { - key: '2', - icon: , - label: 'nav 2', - }, - { - key: '3', - icon: , - label: 'nav 3', - }, - ]} - /> - - -
- {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { - className: 'trigger', - onClick: this.toggle, - })} -
- - Content - - + return ( + + +
+ , + label: 'nav 1', + }, + { + key: '2', + icon: , + label: 'nav 2', + }, + { + key: '3', + icon: , + label: 'nav 3', + }, + ]} + /> + + +
+ {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { + className: 'trigger', + onClick: toggle, + })} +
+ + Content + - ); - } -} - -export default () => ; + + ); +}; ``` ```css diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md index 6161dabdb7..47856256dd 100644 --- a/components/layout/demo/side.md +++ b/components/layout/demo/side.md @@ -63,43 +63,36 @@ const items: MenuItem[] = [ getItem('Files', '9', ), ]; -class SiderDemo extends React.Component { - state = { - collapsed: false, +export default () => { + const [collapsed, setCollapsed] = React.useState(false); + + const onCollapse = (isCollapsed: boolean) => { + console.log(isCollapsed); + setCollapsed(isCollapsed); }; - onCollapse = (collapsed: boolean) => { - console.log(collapsed); - this.setState({ collapsed }); - }; - - render() { - const { collapsed } = this.state; - return ( - - -
- - - -
- - - User - Bill - -
- Bill is a cat. -
- -
Ant Design ©2018 Created by Ant UED
- + return ( + + +
+ + + +
+ + + User + Bill + +
+ Bill is a cat. +
+ +
Ant Design ©2018 Created by Ant UED
- ); - } -} - -export default () => ; + + ); +}; ``` ```css diff --git a/components/list/demo/loadmore.md b/components/list/demo/loadmore.md index 7ef72d592f..2a7375eb5c 100644 --- a/components/list/demo/loadmore.md +++ b/components/list/demo/loadmore.md @@ -14,101 +14,86 @@ title: Load more list with `loadMore` property. ```jsx +import React, { useEffect, useState } from 'react'; import { List, Avatar, Button, Skeleton } from 'antd'; const count = 3; const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`; -class LoadMoreList extends React.Component { - state = { - initLoading: true, - loading: false, - data: [], - list: [], - }; +export default () => { + const [initLoading, setInitLoading] = useState(true); + const [loading, setLoading] = useState(false); + const [data, setData] = useState([]); - componentDidMount() { + useEffect(() => { fetch(fakeDataUrl) .then(res => res.json()) .then(res => { - this.setState({ - initLoading: false, - data: res.results, - list: res.results, - }); + setInitLoading(false); + setData(res.results); }); - } + }, []); - onLoadMore = () => { - this.setState({ - loading: true, - list: this.state.data.concat( - [...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })), - ), - }); - fetch(fakeDataUrl) - .then(res => res.json()) - .then(res => { - const data = this.state.data.concat(res.results); - this.setState( - { - data, - list: data, - loading: false, - }, - () => { - // Resetting window's offsetTop so as to display react-virtualized demo underfloor. - // In real scene, you can using public method of react-virtualized: - // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized - window.dispatchEvent(new Event('resize')); - }, - ); - }); - }; + useEffect(() => { + // Resetting window's offsetTop so as to display react-virtualized demo underfloor. + // In real scene, you can using public method of react-virtualized: + // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized + window.dispatchEvent(new Event('resize')); + }, [JSON.stringify(data)]); - render() { - const { initLoading, loading, list } = this.state; - const loadMore = - !initLoading && !loading ? ( -
- -
- ) : null; - - return ( - ( - edit, more]} - > - - } - title={{item.name.last}} - description="Ant Design, a design language for background applications, is refined by Ant UED Team" - /> -
content
- - - )} - /> + const onLoadMore = () => { + setLoading(true); + const newData = data.concat( + [...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })), ); - } -} + setData(newData); -export default () => ; + fetch(fakeDataUrl) + .then(res => res.json()) + .then(res => { + setLoading(false); + setData(data.concat(res.results)); + }); + }; + + const loadMore = + !initLoading && !loading ? ( +
+ +
+ ) : null; + + return ( + ( + edit, more]} + > + + } + title={{item.name.last}} + description="Ant Design, a design language for background applications, is refined by Ant UED Team" + /> +
content
+ + + )} + /> + ); +}; ``` ```css diff --git a/components/mentions/demo/async.md b/components/mentions/demo/async.md index f686e01c6d..3e48539b05 100644 --- a/components/mentions/demo/async.md +++ b/components/mentions/demo/async.md @@ -14,68 +14,55 @@ title: async ```jsx +import React, { useState, useRef, useMemo } from 'react'; import { Mentions } from 'antd'; import debounce from 'lodash/debounce'; const { Option } = Mentions; -class AsyncMention extends React.Component { - constructor() { - super(); +export default () => { + const [loading, setLoading] = useState(false); + const [users, setUsers] = useState([]); + const searchRef = useRef(); - this.loadGithubUsers = debounce(this.loadGithubUsers, 800); - } + const loadGithubUsers = useMemo( + () => + debounce(key => { + if (!key) { + setUsers([]); + return; + } - state = { - search: '', - loading: false, - users: [], - }; + fetch(`https://api.github.com/search/users?q=${key}`) + .then(res => res.json()) + .then(({ items = [] }) => { + if (searchRef.current !== key) return; + setLoading(false); + setUsers(items.slice(0, 10)); + }); + }, 800), + [], + ); - onSearch = search => { - this.setState({ search, loading: !!search, users: [] }); + const onSearch = search => { + setLoading(!!search); + setUsers([]); + searchRef.current = search; console.log('Search:', search); - this.loadGithubUsers(search); + loadGithubUsers(search); }; - loadGithubUsers(key) { - if (!key) { - this.setState({ - users: [], - }); - return; - } - - fetch(`https://api.github.com/search/users?q=${key}`) - .then(res => res.json()) - .then(({ items = [] }) => { - const { search } = this.state; - if (search !== key) return; - - this.setState({ - users: items.slice(0, 10), - loading: false, - }); - }); - } - - render() { - const { users, loading } = this.state; - - return ( - - {users.map(({ login, avatar_url: avatar }) => ( - - ))} - - ); - } -} - -export default () => ; + return ( + + {users.map(({ login, avatar_url: avatar }) => ( + + ))} + + ); +}; ```