This is an automated email from the ASF dual-hosted git repository. mintsweet pushed a commit to branch feat-6307 in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
commit 92ae82e1e88931d183ec618e2c246da4f6f2c670 Author: mintsweet <[email protected]> AuthorDate: Tue Nov 7 19:04:57 2023 +1300 refactor(config-ui): remove component table --- config-ui/src/components/index.ts | 1 - .../src/components/table/components/content.tsx | 95 ---------------------- config-ui/src/components/table/components/index.ts | 21 ----- .../src/components/table/components/loading.tsx | 27 ------ .../src/components/table/components/no-data.tsx | 42 ---------- config-ui/src/components/table/hooks/index.ts | 19 ----- .../components/table/hooks/use-row-selection.ts | 93 --------------------- config-ui/src/components/table/index.ts | 20 ----- config-ui/src/components/table/styled.ts | 55 ------------- config-ui/src/components/table/table.tsx | 56 ------------- config-ui/src/components/table/types.ts | 27 ------ 11 files changed, 456 deletions(-) diff --git a/config-ui/src/components/index.ts b/config-ui/src/components/index.ts index f039fc6f9..e67e2ac14 100644 --- a/config-ui/src/components/index.ts +++ b/config-ui/src/components/index.ts @@ -31,6 +31,5 @@ export * from './no-data'; export * from './page-header'; export * from './pagination'; export * from './selector'; -export * from './table'; export * from './toast'; export * from './tooltip'; diff --git a/config-ui/src/components/table/components/content.tsx b/config-ui/src/components/table/components/content.tsx deleted file mode 100644 index a77a283cf..000000000 --- a/config-ui/src/components/table/components/content.tsx +++ /dev/null @@ -1,95 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -import { Checkbox, Radio } from '@blueprintjs/core'; - -import { TextTooltip } from '@/components'; - -import { ColumnType } from '../types'; -import { useRowSelection, UseRowSelectionProps } from '../hooks'; -import * as S from '../styled'; - -export interface TableContentProps<T> extends UseRowSelectionProps<T> { - columns: ColumnType<T>; - dataSource: T[]; - noShadow?: boolean; -} - -export const TableContent = <T extends Record<string, any>>({ - columns, - dataSource, - noShadow, - rowSelection, -}: TableContentProps<T>) => { - const { canSelection, selectionType, getCheckedAll, onCheckedAll, getChecked, onChecked } = useRowSelection<T>({ - dataSource, - rowSelection, - }); - - return ( - <S.Table - style={{ - boxShadow: noShadow ? 'none' : '0px 2.4px 4.8px -0.8px rgba(0, 0, 0, 0.1), 0px 1.6px 8px rgba(0, 0, 0, 0.07)', - }} - > - <S.THeader> - <S.TR> - {canSelection && ( - <S.TH style={{ width: 40, textAlign: 'center' }}> - {selectionType === 'checkbox' && <Checkbox checked={getCheckedAll()} onChange={() => onCheckedAll()} />} - </S.TH> - )} - {columns.map(({ key, width, align = 'left', title }) => ( - <S.TH key={key} style={{ width, textAlign: align }}> - {title} - </S.TH> - ))} - </S.TR> - </S.THeader> - <S.TBody> - {dataSource.map((data, i) => ( - <S.TR key={i}> - {canSelection && ( - <S.TD style={{ width: 40, textAlign: 'center' }}> - {selectionType === 'checkbox' && ( - <Checkbox checked={getChecked(data)} onChange={() => onChecked(data)} /> - )} - {selectionType === 'radio' && <Radio checked={getChecked(data)} onChange={() => onChecked(data)} />} - </S.TD> - )} - {columns.map(({ key, width, align = 'left', ellipsis, dataIndex, render }) => { - const value = !dataIndex - ? null - : Array.isArray(dataIndex) - ? dataIndex.reduce((acc, cur) => { - acc[cur] = data[cur]; - return acc; - }, {} as any) - : data[dataIndex]; - return ( - <S.TD key={key} style={{ width, textAlign: align }}> - {render ? render(value, data) : ellipsis ? <TextTooltip content={value}>{value}</TextTooltip> : value} - </S.TD> - ); - })} - </S.TR> - ))} - </S.TBody> - </S.Table> - ); -}; diff --git a/config-ui/src/components/table/components/index.ts b/config-ui/src/components/table/components/index.ts deleted file mode 100644 index df5950d7f..000000000 --- a/config-ui/src/components/table/components/index.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -export * from './loading'; -export * from './no-data'; -export * from './content'; diff --git a/config-ui/src/components/table/components/loading.tsx b/config-ui/src/components/table/components/loading.tsx deleted file mode 100644 index c0d73a28b..000000000 --- a/config-ui/src/components/table/components/loading.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -import { Card, PageLoading } from '@/components'; - -export const TableLoading = () => { - return ( - <Card> - <PageLoading /> - </Card> - ); -}; diff --git a/config-ui/src/components/table/components/no-data.tsx b/config-ui/src/components/table/components/no-data.tsx deleted file mode 100644 index 6dbe94070..000000000 --- a/config-ui/src/components/table/components/no-data.tsx +++ /dev/null @@ -1,42 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -import { Button, Intent } from '@blueprintjs/core'; - -import { NoData } from '@/components'; - -interface Props { - text?: React.ReactNode; - btnText?: string; - onCreate?: () => void; -} - -export const TableNoData = ({ text, btnText, onCreate }: Props) => { - return ( - <NoData - text={text} - action={ - onCreate && ( - <Button intent={Intent.PRIMARY} icon="plus" onClick={onCreate}> - {btnText ?? 'Create'} - </Button> - ) - } - /> - ); -}; diff --git a/config-ui/src/components/table/hooks/index.ts b/config-ui/src/components/table/hooks/index.ts deleted file mode 100644 index 97fc28721..000000000 --- a/config-ui/src/components/table/hooks/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -export * from './use-row-selection'; diff --git a/config-ui/src/components/table/hooks/use-row-selection.ts b/config-ui/src/components/table/hooks/use-row-selection.ts deleted file mode 100644 index 5342811f8..000000000 --- a/config-ui/src/components/table/hooks/use-row-selection.ts +++ /dev/null @@ -1,93 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -import { useState, useEffect, useMemo } from 'react'; - -export interface UseRowSelectionProps<T> { - dataSource: T[]; - rowSelection?: { - rowKey?: ID; - getRowKey?: (data: T) => ID; - type?: 'checkbox' | 'radio'; - selectedRowKeys?: ID[]; - onChange?: (selectedRowKeys: ID[]) => void; - }; -} - -export const useRowSelection = <T>({ dataSource, rowSelection }: UseRowSelectionProps<T>) => { - const [selectedKeys, setSelectedKeys] = useState<ID[]>([]); - - const { - rowKey = 'id', - getRowKey = (data: T) => (data as any)[rowKey], - type = 'checkbox', - selectedRowKeys, - onChange, - } = { - rowKey: 'id', - type: 'checkbox', - ...rowSelection, - }; - - useEffect(() => { - setSelectedKeys(selectedRowKeys ?? []); - }, [selectedRowKeys]); - - const handleChecked = (data: T) => { - const key = getRowKey(data); - let result: ID[] = selectedKeys; - - switch (true) { - case !selectedKeys.includes(key) && type === 'radio': - result = [key]; - break; - case !selectedKeys.includes(key) && type === 'checkbox': - result = [...selectedKeys, key]; - break; - case selectedKeys.includes(key) && type === 'checkbox': - result = selectedKeys.filter((k) => k !== key); - break; - } - - onChange ? onChange(result) : setSelectedKeys(result); - }; - - const handleCheckedAll = () => { - let result: string[] = []; - - if (selectedKeys.length !== dataSource.length) { - result = dataSource.map(getRowKey); - } - - onChange ? onChange(result) : setSelectedKeys(result); - }; - - return useMemo( - () => ({ - canSelection: !!rowSelection, - selectionType: type, - getCheckedAll: () => dataSource.length === selectedKeys.length, - onCheckedAll: handleCheckedAll, - getChecked: (data: T) => { - return selectedKeys.includes(getRowKey(data)); - }, - onChecked: handleChecked, - }), - [selectedKeys], - ); -}; diff --git a/config-ui/src/components/table/index.ts b/config-ui/src/components/table/index.ts deleted file mode 100644 index 9ede1edc4..000000000 --- a/config-ui/src/components/table/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -export * from './table'; -export * from './types'; diff --git a/config-ui/src/components/table/styled.ts b/config-ui/src/components/table/styled.ts deleted file mode 100644 index 58d093623..000000000 --- a/config-ui/src/components/table/styled.ts +++ /dev/null @@ -1,55 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -import styled from 'styled-components'; - -export const Table = styled.table` - table-layout: fixed; - width: 100%; - background-color: #fff; - border-radius: 4px; - border-spacing: 0; -`; - -export const THeader = styled.thead` - background-color: #f0f4fe; -`; - -export const TBody = styled.tbody``; - -export const TR = styled.tr``; - -export const TH = styled.th` - padding: 12px 16px; - font-weight: 400; - border-bottom: 1px solid #dbdcdf; - - label.bp5-control { - margin-bottom: 0; - } -`; - -export const TD = styled.td` - padding: 12px 16px; - border-bottom: 1px solid #dbdcdf; - word-break: break-word; - - label.bp5-control { - margin-bottom: 0; - } -`; diff --git a/config-ui/src/components/table/table.tsx b/config-ui/src/components/table/table.tsx deleted file mode 100644 index b55b6021b..000000000 --- a/config-ui/src/components/table/table.tsx +++ /dev/null @@ -1,56 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -import type { PaginationProps } from '../pagination'; -import { Pagination } from '../pagination'; - -import type { TableContentProps } from './components'; -import { TableLoading, TableNoData, TableContent } from './components'; - -interface Props<T> extends TableContentProps<T> { - loading?: boolean; - noData?: { - text?: React.ReactNode; - btnText?: string; - onCreate?: () => void; - }; - pagination?: PaginationProps; -} - -export const Table = <T extends Record<string, any>>({ - loading, - dataSource, - noData = {}, - pagination, - ...props -}: Props<T>) => { - if (loading) { - return <TableLoading />; - } - - if (!dataSource.length) { - return <TableNoData {...noData} />; - } - - return ( - <> - <TableContent dataSource={dataSource} {...props} /> - {pagination && <Pagination {...pagination} />} - </> - ); -}; diff --git a/config-ui/src/components/table/types.ts b/config-ui/src/components/table/types.ts deleted file mode 100644 index 44d282912..000000000 --- a/config-ui/src/components/table/types.ts +++ /dev/null @@ -1,27 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * - */ - -export type ColumnType<T> = Array<{ - title: string; - dataIndex?: string | string[]; - key: string; - width?: number; - align?: 'left' | 'center' | 'right'; - ellipsis?: boolean; - render?: (value: any, row: T) => React.ReactNode; -}>;
