Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

refactor(console): table column type (#2772)

Browse source
This commit is contained in:
Xiao Yijun 2022-12-30 15:31:02 +08:00 • committed by GitHub
parent 0e9a214140
commit caba72b06c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 13 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/components/Table/index.tsx
View file

@ -14,7 +14,7 @@ type Props<
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues> TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = { > = {
rowGroups: Array<RowGroup<TFieldValues>>; rowGroups: Array<RowGroup<TFieldValues>>;
columns: Array<Column<TFieldValues, TName>>; columns: Array<Column<TFieldValues>>;
rowIndexKey: TName; rowIndexKey: TName;
onClickRow?: (row: TFieldValues) => void; onClickRow?: (row: TFieldValues) => void;
className?: string; className?: string;
@ -90,7 +90,7 @@ const Table = <
> >
{columns.map(({ dataIndex, colSpan, className, render }) => ( {columns.map(({ dataIndex, colSpan, className, render }) => (
<td key={dataIndex} colSpan={colSpan} className={className}> <td key={dataIndex} colSpan={colSpan} className={className}>
{render(row[dataIndex], row)} {render(row)}
</td> </td>
))} ))}
</tr> </tr>

11
packages/console/src/components/Table/types.ts
View file

@ -1,13 +1,10 @@
import type { Key, ReactNode } from 'react'; import type { Key, ReactNode } from 'react';
import type { FieldPath, FieldPathValue, FieldValues } from 'react-hook-form'; import type { FieldValues } from 'react-hook-form';
export type Column< export type Column<TFieldValues extends FieldValues = FieldValues> = {
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
title: ReactNode; title: ReactNode;
dataIndex: TName; dataIndex: string;
render: (value: FieldPathValue<TFieldValues, TName>, row: TFieldValues) => ReactNode; render: (row: TFieldValues) => ReactNode;
colSpan?: number; colSpan?: number;
className?: string; className?: string;
}; };

4
packages/console/src/pages/ApiResources/index.tsx
View file

@ -103,7 +103,7 @@ const ApiResources = () => {
title: t('api_resources.api_name'), title: t('api_resources.api_name'),
dataIndex: 'name', dataIndex: 'name',
colSpan: 6, colSpan: 6,
render: (name, { id }) => ( render: ({ id, name }) => (
<ItemPreview <ItemPreview
title={name} title={name}
icon={<ResourceIcon className={styles.icon} />} icon={<ResourceIcon className={styles.icon} />}
@ -115,7 +115,7 @@ const ApiResources = () => {
title: t('api_resources.api_identifier'), title: t('api_resources.api_identifier'),
dataIndex: 'indicator', dataIndex: 'indicator',
colSpan: 10, colSpan: 10,
render: (indicator) => <CopyToClipboard value={indicator} variant="text" />, render: ({ indicator }) => <CopyToClipboard value={indicator} variant="text" />,
}, },
]} ]}
placeholder={ placeholder={

4
packages/console/src/pages/Applications/index.tsx
View file

@ -96,7 +96,7 @@ const Applications = () => {
title: t('applications.application_name'), title: t('applications.application_name'),
dataIndex: 'name', dataIndex: 'name',
colSpan: 6, colSpan: 6,
render: (name, { type, id }) => ( render: ({ id, name, type }) => (
<ItemPreview <ItemPreview
title={name} title={name}
subtitle={t(`${applicationTypeI18nKey[type]}.title`)} subtitle={t(`${applicationTypeI18nKey[type]}.title`)}
@ -109,7 +109,7 @@ const Applications = () => {
title: t('applications.app_id'), title: t('applications.app_id'),
dataIndex: 'id', dataIndex: 'id',
colSpan: 10, colSpan: 10,
render: (id) => <CopyToClipboard value={id} variant="text" />, render: ({ id }) => <CopyToClipboard value={id} variant="text" />,
}, },
]} ]}
placeholder={ placeholder={

6
packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageDetails.tsx
View file

@ -195,13 +195,13 @@ const LanguageDetails = () => {
{ {
title: t('sign_in_exp.others.manage_language.key'), title: t('sign_in_exp.others.manage_language.key'),
dataIndex: 'phraseKey', dataIndex: 'phraseKey',
render: (phraseKey) => phraseKey, render: ({ phraseKey }) => phraseKey,
className: styles.sectionDataKey, className: styles.sectionDataKey,
}, },
{ {
title: t('sign_in_exp.others.manage_language.logto_source_values'), title: t('sign_in_exp.others.manage_language.logto_source_values'),
dataIndex: 'sourceValue', dataIndex: 'sourceValue',
render: (sourceValue) => ( render: ({ sourceValue }) => (
<div className={styles.sectionBuiltInText}>{sourceValue}</div> <div className={styles.sectionBuiltInText}>{sourceValue}</div>
), ),
}, },
@ -229,7 +229,7 @@ const LanguageDetails = () => {
</span> </span>
), ),
dataIndex: 'fieldKey', dataIndex: 'fieldKey',
render: (fieldKey) => ( render: ({ fieldKey }) => (
<Textarea className={styles.sectionInputArea} {...register(fieldKey)} /> <Textarea className={styles.sectionInputArea} {...register(fieldKey)} />
), ),
className: styles.inputCell, className: styles.inputCell,