This is an automated email from the ASF dual-hosted git repository.
likyh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new 8330efd0 feat(config-ui): add new component table (#3841)
8330efd0 is described below
commit 8330efd013a79fc91cc650edd14109b1b0c0dd87
Author: 青湛 <[email protected]>
AuthorDate: Fri Dec 2 09:36:07 2022 +0800
feat(config-ui): add new component table (#3841)
---
config-ui/src/components/index.ts | 1 +
config-ui/src/components/{ => table}/index.ts | 7 +--
.../src/components/{index.ts => table/styled.ts} | 47 +++++++++++++--
config-ui/src/components/table/table.tsx | 70 ++++++++++++++++++++++
.../src/components/{index.ts => table/types.ts} | 12 ++--
5 files changed, 122 insertions(+), 15 deletions(-)
diff --git a/config-ui/src/components/index.ts
b/config-ui/src/components/index.ts
index 00f17f5d..6bd807bd 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/index.ts
@@ -21,3 +21,4 @@ export * from './divider'
export * from './page-header'
export * from './selector'
export * from './dialog'
+export * from './table'
diff --git a/config-ui/src/components/index.ts
b/config-ui/src/components/table/index.ts
similarity index 85%
copy from config-ui/src/components/index.ts
copy to config-ui/src/components/table/index.ts
index 00f17f5d..eeda3f41 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/table/index.ts
@@ -16,8 +16,5 @@
*
*/
-export * from './loading'
-export * from './divider'
-export * from './page-header'
-export * from './selector'
-export * from './dialog'
+export * from './table'
+export * from './types'
diff --git a/config-ui/src/components/index.ts
b/config-ui/src/components/table/styled.ts
similarity index 51%
copy from config-ui/src/components/index.ts
copy to config-ui/src/components/table/styled.ts
index 00f17f5d..a90db3b0 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/table/styled.ts
@@ -16,8 +16,45 @@
*
*/
-export * from './loading'
-export * from './divider'
-export * from './page-header'
-export * from './selector'
-export * from './dialog'
+import styled from '@emotion/styled'
+
+export const Container = styled.div`
+ position: relative;
+`
+
+export const TableWrapper = styled.ul<{ loading?: boolean }>`
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ transition: opacity 0.3s linear;
+
+ ${({ loading }) => (loading ? 'opacity: 0.2; ' : '')}
+`
+
+export const TableRow = styled.li`
+ display: flex;
+ align-items: center;
+ padding: 12px 16px;
+ border-top: 1px solid #dbe4fd;
+
+ & > span {
+ flex: 1;
+ }
+`
+
+export const TableHeader = styled(TableRow)`
+ font-size: 14px;
+ font-weight: 600;
+ border-top: none;
+`
+
+export const TableMask = styled.div`
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`
diff --git a/config-ui/src/components/table/table.tsx
b/config-ui/src/components/table/table.tsx
new file mode 100644
index 00000000..0a100faf
--- /dev/null
+++ b/config-ui/src/components/table/table.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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 React from 'react'
+
+import { Loading } from '@/components'
+
+import { ColumnType } from './types'
+import * as S from './styled'
+
+interface Props<T> {
+ loading?: boolean
+ columns: ColumnType<T>
+ dataSource: T[]
+}
+
+export const Table = <T extends Record<string, any>>({
+ loading,
+ columns,
+ dataSource
+}: Props<T>) => {
+ return (
+ <S.Container>
+ <S.TableWrapper loading={loading}>
+ <S.TableHeader>
+ {columns.map(({ key, title }) => (
+ <span key={key}>{title}</span>
+ ))}
+ </S.TableHeader>
+ {dataSource.map((data, i) => (
+ <S.TableRow key={i}>
+ {columns.map(({ key, align = 'left', dataIndex, render }) => {
+ const value = Array.isArray(dataIndex)
+ ? dataIndex.reduce((acc, cur) => {
+ acc[cur] = data[cur]
+ return acc
+ }, {} as any)
+ : data[dataIndex]
+ return (
+ <span key={key} style={{ textAlign: align }}>
+ {render ? render(value, data) : value}
+ </span>
+ )
+ })}
+ </S.TableRow>
+ ))}
+ </S.TableWrapper>
+ {loading && (
+ <S.TableMask>
+ <Loading />
+ </S.TableMask>
+ )}
+ </S.Container>
+ )
+}
diff --git a/config-ui/src/components/index.ts
b/config-ui/src/components/table/types.ts
similarity index 81%
copy from config-ui/src/components/index.ts
copy to config-ui/src/components/table/types.ts
index 00f17f5d..44b2fa80 100644
--- a/config-ui/src/components/index.ts
+++ b/config-ui/src/components/table/types.ts
@@ -16,8 +16,10 @@
*
*/
-export * from './loading'
-export * from './divider'
-export * from './page-header'
-export * from './selector'
-export * from './dialog'
+export type ColumnType<T> = Array<{
+ title: string
+ dataIndex: string | string[]
+ key: string
+ align?: 'left' | 'center' | 'right'
+ render?: (value: any, row: T) => React.ReactNode
+}>
