ant-design/.dumi/theme/common/BehaviorMap/index.tsx
lijianan 2acb7b217a
site: use css token ()
* site: use css token

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix

* fix: fix
2024-04-06 16:11:17 +08:00

42 lines
1.1 KiB
TypeScript

import type { FC } from 'react';
import React, { Suspense } from 'react';
import { Skeleton } from 'antd';
import { createStyles } from 'antd-style';
import type { BehaviorMapProps } from './BehaviorMap';
const InternalBehaviorMap = React.lazy(() => import('./BehaviorMap'));
const useStyle = createStyles(({ token, css }) => ({
fallback: css`
width: 100%;
> * {
width: 100% !important;
border-radius: ${token.borderRadiusLG}px;
}
`,
placeholder: css`
color: ${token.colorTextDescription};
font-size: ${token.fontSizeLG}px;
`,
}));
const BehaviorMapFallback: React.FC = () => {
const { styles } = useStyle();
return (
<div className={styles.fallback}>
<Skeleton.Node active style={{ height: 600, width: '100%' }}>
<span className={styles.placeholder}>...</span>
</Skeleton.Node>
</div>
);
};
const BehaviorMap: FC<BehaviorMapProps> = (props) => (
<Suspense fallback={<BehaviorMapFallback />}>
<InternalBehaviorMap {...props} />
</Suspense>
);
export default BehaviorMap;