Commit 1f449005 authored by zhangwenshuai's avatar zhangwenshuai

update apolloTable date detail

parent dc692ba3
import React from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { Tooltip } from 'antd';
import classNames from 'classnames';
import { formatStr } from '../../_utils/setFormatter';
import s from '../input/index.less';
import { DateProps } from '../detailInterface';
import styles from '../input/index.less';
export const ApolloDateDetail = (props: DateProps) => {
const { value, formatter, componentAttr } = props;
const { value, formatter, componentAttr, className } = props;
const formatValue = formatter ? formatter(value) : value;
if (!formatValue) return null;
const [dotVisible, setDotVisible] = useState(false);
const container = useRef(null);
const dom = useRef(null);
useEffect(() => {
const containerTarget: any = container.current;
const target: any = dom.current;
if (containerTarget && target) {
if (target.clientWidth > containerTarget.clientWidth) {
setDotVisible(true);
} else {
setDotVisible(false);
}
}
}, [value]);
const { format = formatStr } = componentAttr || {};
let valueStr = '';
......@@ -16,5 +32,18 @@ export const ApolloDateDetail = (props: DateProps) => {
} else {
valueStr = formatValue.format ? formatValue.format(format) : formatValue;
}
return <div className={s.text}>{valueStr}</div>;
return (
<div className={styles.container} ref={container}>
{dotVisible ? (
<Tooltip title={valueStr}>
<div className={classNames(styles.text, className)}>{valueStr}</div>
</Tooltip>
) : (
<div className={classNames(styles.text, className)}>{valueStr}</div>
)}
<div className={styles.itemBgTxt} ref={dom}>
{valueStr}
</div>
</div>
);
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment