From b10cb0879f2bc0a9185ac675165baf4f527f33c0 Mon Sep 17 00:00:00 2001 From: TechQuery Date: Wed, 12 Jul 2023 01:23:40 +0800 Subject: [PATCH] [optimize] simplify Selectable Scroll List components --- components/Git/CardList.tsx | 5 ++- components/Git/index.tsx | 30 -------------- components/Organization/OrganizationList.tsx | 41 ++++--------------- .../PlatformAdmin/PlatformAdminList.tsx | 31 -------------- components/User/HackathonAdminList.tsx | 5 ++- components/User/StaffList.tsx | 30 -------------- components/layout/ScrollList.tsx | 2 +- .../activity/[name]/manage/administrator.tsx | 14 +++++-- pages/activity/[name]/manage/git.tsx | 16 ++++++-- pages/activity/[name]/manage/organization.tsx | 14 +++++-- pages/admin/platform-admin.tsx | 14 +++++-- 11 files changed, 59 insertions(+), 143 deletions(-) delete mode 100644 components/Git/index.tsx delete mode 100644 components/PlatformAdmin/PlatformAdminList.tsx delete mode 100644 components/User/StaffList.tsx diff --git a/components/Git/CardList.tsx b/components/Git/CardList.tsx index bccfd46c..39e0e426 100644 --- a/components/Git/CardList.tsx +++ b/components/Git/CardList.tsx @@ -1,4 +1,5 @@ import { text2color } from 'idea-react'; +import { FC } from 'react'; import { Badge, Button, Card, Col, Form, Row } from 'react-bootstrap'; import { GitTemplate } from '../../models/TemplateRepo'; @@ -8,11 +9,11 @@ import { GitLogo } from './Logo'; const { t } = i18n; -export const CardList = ({ +export const CardList: FC> = ({ defaultData = [], selectedIds = [], onSelect, -}: XScrollListProps) => ( +}) => ( {defaultData.map( ({ diff --git a/components/Git/index.tsx b/components/Git/index.tsx deleted file mode 100644 index 183842f7..00000000 --- a/components/Git/index.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { observer } from 'mobx-react'; - -import { GitTemplate, GitTemplateModal } from '../../models/TemplateRepo'; -import { XScrollList, XScrollListProps } from '../layout/ScrollList'; -import { CardList } from './CardList'; - -export interface GitListProps extends XScrollListProps { - store: GitTemplateModal; -} - -@observer -export class GitList extends XScrollList { - store = this.props.store; - - constructor(props: GitListProps) { - super(props); - - this.boot(); - } - - renderList() { - return ( - - ); - } -} diff --git a/components/Organization/OrganizationList.tsx b/components/Organization/OrganizationList.tsx index 0583a44d..664f937e 100644 --- a/components/Organization/OrganizationList.tsx +++ b/components/Organization/OrganizationList.tsx @@ -1,25 +1,20 @@ -import { observer } from 'mobx-react'; +import { FC } from 'react'; import { Form, Image, Table } from 'react-bootstrap'; import { Organization, - OrganizationModel, - OrganizationTypeName, + OrganizationTypeName } from '../../models/Organization'; import { i18n } from '../../models/Translation'; import styles from '../../styles/Table.module.less'; -import { XScrollList, XScrollListProps } from '../layout/ScrollList'; +import { XScrollListProps } from '../layout/ScrollList'; import { OrganizationCard } from './OrganizationCard'; const { t } = i18n; -export interface OrganizationListProps extends XScrollListProps { - store: OrganizationModel; -} - -export const OrganizationListLayout = ({ +export const OrganizationListLayout: FC> = ({ defaultData = [], -}: Pick) => ( +}) => (
    {defaultData.map(item => (
  • @@ -29,11 +24,11 @@ export const OrganizationListLayout = ({
); -export const OrganizationTableLayout = ({ +export const OrganizationTableLayout: FC> = ({ defaultData = [], selectedIds = [], onSelect, -}: Omit) => ( +}) => ( @@ -109,25 +104,3 @@ export const OrganizationTableLayout = ({
); - -@observer -export class OrganizationTable extends XScrollList { - store = this.props.store; - - constructor(props: OrganizationListProps) { - super(props); - - this.boot(); - } - - renderList() { - return ( - - ); - } -} diff --git a/components/PlatformAdmin/PlatformAdminList.tsx b/components/PlatformAdmin/PlatformAdminList.tsx deleted file mode 100644 index 0adeb769..00000000 --- a/components/PlatformAdmin/PlatformAdminList.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { observer } from 'mobx-react'; - -import { PlatformAdmin, PlatformAdminModel } from '../../models/PlatformAdmin'; -import { XScrollList, XScrollListProps } from '../layout/ScrollList'; -import { HackathonAdminList } from '../User/HackathonAdminList'; - -export interface PlatformAdminListProps - extends XScrollListProps { - store: PlatformAdminModel; -} - -@observer -export class PlatformAdminList extends XScrollList { - store = this.props.store; - - constructor(props: PlatformAdminListProps) { - super(props); - - this.boot(); - } - - renderList() { - return ( - - ); - } -} diff --git a/components/User/HackathonAdminList.tsx b/components/User/HackathonAdminList.tsx index fd747217..f0971df9 100644 --- a/components/User/HackathonAdminList.tsx +++ b/components/User/HackathonAdminList.tsx @@ -1,5 +1,6 @@ import 'array-unique-proposal'; +import { FC } from 'react'; import { Form, Table } from 'react-bootstrap'; import { HackathonAdmin } from '../../models/HackathonAdmin'; @@ -23,11 +24,11 @@ const TableHeads = [ t('remark'), ]; -export const HackathonAdminList = ({ +export const HackathonAdminList: FC> = ({ defaultData = [], selectedIds = [], onSelect, -}: XScrollListProps) => ( +}) => ( diff --git a/components/User/StaffList.tsx b/components/User/StaffList.tsx deleted file mode 100644 index 0323e1c2..00000000 --- a/components/User/StaffList.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { observer } from 'mobx-react'; - -import { Staff, StaffModel } from '../../models/Staff'; -import { XScrollList, XScrollListProps } from '../layout/ScrollList'; -import { HackathonAdminList } from './HackathonAdminList'; - -export interface StaffListProps extends XScrollListProps { - store: StaffModel; -} - -@observer -export class StaffList extends XScrollList { - store = this.props.store; - - constructor(props: StaffListProps) { - super(props); - - this.boot(); - } - - renderList() { - return ( - - ); - } -} diff --git a/components/layout/ScrollList.tsx b/components/layout/ScrollList.tsx index f2ec56f2..4ec10271 100644 --- a/components/layout/ScrollList.tsx +++ b/components/layout/ScrollList.tsx @@ -6,7 +6,7 @@ import { ScrollList, ScrollListProps } from 'mobx-restful-table'; import { i18n } from '../../models/Translation'; export interface XScrollListProps - extends ScrollListProps { + extends Pick, 'defaultData'> { selectedIds?: string[]; onSelect?: (selectedIds: string[]) => any; } diff --git a/pages/activity/[name]/manage/administrator.tsx b/pages/activity/[name]/manage/administrator.tsx index 1343e348..c86bd387 100644 --- a/pages/activity/[name]/manage/administrator.tsx +++ b/pages/activity/[name]/manage/administrator.tsx @@ -2,13 +2,14 @@ import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { observable } from 'mobx'; import { observer } from 'mobx-react'; +import { ScrollList } from 'mobx-restful-table'; import { InferGetServerSidePropsType } from 'next'; import { FormEvent, PureComponent } from 'react'; import { Badge, Button, Col, Form, ListGroup, Row } from 'react-bootstrap'; import { ActivityManageFrame } from '../../../../components/Activity/ActivityManageFrame'; import { AdministratorModal } from '../../../../components/User/ActivityAdministratorModal'; -import { StaffList } from '../../../../components/User/StaffList'; +import { HackathonAdminList } from '../../../../components/User/HackathonAdminList'; import activityStore from '../../../../models/Activity'; import { i18n } from '../../../../models/Translation'; import { withRoute } from '../../../api/core'; @@ -102,9 +103,16 @@ export default class AdministratorPage extends PureComponent< - (this.selectedIds = list)} + renderList={allItems => ( + (this.selectedIds = list)} + /> + )} /> diff --git a/pages/activity/[name]/manage/git.tsx b/pages/activity/[name]/manage/git.tsx index 5d8f4ae3..fc467768 100644 --- a/pages/activity/[name]/manage/git.tsx +++ b/pages/activity/[name]/manage/git.tsx @@ -2,12 +2,13 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { observable } from 'mobx'; import { observer } from 'mobx-react'; +import { ScrollList } from 'mobx-restful-table'; import { InferGetServerSidePropsType } from 'next'; import { FormEvent, PureComponent } from 'react'; import { Button, Container, Form } from 'react-bootstrap'; import { ActivityManageFrame } from '../../../../components/Activity/ActivityManageFrame'; -import { GitList } from '../../../../components/Git'; +import { CardList } from '../../../../components/Git/CardList'; import { GitModal } from '../../../../components/Git/Modal'; import activityStore from '../../../../models/Activity'; import { i18n } from '../../../../models/Translation'; @@ -62,9 +63,16 @@ export default class ActivityManageGitPage extends PureComponent< - (this.selectedIds = list)} + ( + (this.selectedIds = list)} + /> + )} /> - (this.selectedIds = list)} + renderList={allItems => ( + (this.selectedIds = list)} + /> + )} /> diff --git a/pages/admin/platform-admin.tsx b/pages/admin/platform-admin.tsx index 64457d3b..acafecad 100644 --- a/pages/admin/platform-admin.tsx +++ b/pages/admin/platform-admin.tsx @@ -2,12 +2,13 @@ import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { observable } from 'mobx'; import { observer } from 'mobx-react'; +import { ScrollList } from 'mobx-restful-table'; import { FormEvent, PureComponent } from 'react'; import { Button, Form } from 'react-bootstrap'; import { PlatformAdminFrame } from '../../components/PlatformAdmin/PlatformAdminFrame'; -import { PlatformAdminList } from '../../components/PlatformAdmin/PlatformAdminList'; import { PlatformAdminModal } from '../../components/PlatformAdmin/PlatformAdminModal'; +import { HackathonAdminList } from '../../components/User/HackathonAdminList'; import { PlatformAdminModel } from '../../models/PlatformAdmin'; import { i18n } from '../../models/Translation'; @@ -63,9 +64,16 @@ class PlatformAdmin extends PureComponent { {t('delete')} - (this.selectedIds = list)} + renderList={allItems => ( + (this.selectedIds = list)} + /> + )} />