yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-27 09:58:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add copy function for stats table sample value (#5331)

Browse Source
This commit is contained in:
Amanda Ng 2022-07-08 00:17:49 +08:00 committed by GitHub
parent 558a65a3c3
commit 3a169c2a5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 38 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
datahub-web-react/src/app/entity/shared/tabs/Dataset/Stats/snapshot/ColumnStats.tsx
View File

@ -1,10 +1,11 @@
import { Tag, Typography } from 'antd';
import { Typography } from 'antd';
import { ColumnsType, ColumnType } from 'antd/lib/table';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { DatasetFieldProfile } from '../../../../../../../types.generated';
import { StyledTable } from '../../../../components/styled/StyledTable';
import { ANTD_GRAY } from '../../../../constants';
import SampleValueTag from './SampleValueTag';
type Props = {
columnStats: Array<DatasetFieldProfile>;
@ -128,7 +129,7 @@ export default function ColumnStats({ columnStats }: Props) {
(sampleValues &&
sampleValues
.slice(0, sampleValues.length < 3 ? sampleValues?.length : 3)
.map((value) => <Tag>{value}</Tag>)) ||
.map((value) => <SampleValueTag value={value} />)) ||
unknownValue()
);
},

35
datahub-web-react/src/app/entity/shared/tabs/Dataset/Stats/snapshot/SampleValueTag.tsx Normal file
View File

@ -0,0 +1,35 @@
import React, { useState } from 'react';
import { Tag, Tooltip } from 'antd';
import styled from 'styled-components';
const StyledTag = styled(Tag)`
cursor: pointer;
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
&&:hover {
color: ${(props) => props.theme.styles['primary-color']};
border-color: ${(props) => props.theme.styles['primary-color']};
}
`;
type Props = {
value: string;
};
export default function SampleValueTag({ value }: Props) {
const [copied, setCopied] = useState(false);
const onClick = () => {
setCopied(true);
navigator.clipboard.writeText(value);
setTimeout(() => setCopied(false), 2000);
};
return (
<Tooltip title={copied ? 'Copied' : 'Click to copy'}>
<StyledTag onClick={onClick}>{value}</StyledTag>
</Tooltip>
);
}