|  |  |  | 
|---|
|  |  |  | import React, { useState, useRef, useEffect } from 'react'; | 
|---|
|  |  |  | import { Card, Form, Button } from 'antd'; | 
|---|
|  |  |  | import { Spin, Form, Button } from 'antd'; | 
|---|
|  |  |  | import { FormattedMessage, useIntl, useModel } from '@umijs/max'; | 
|---|
|  |  |  | import { LoadingOutlined } from '@ant-design/icons'; | 
|---|
|  |  |  | import { createStyles } from 'antd-style'; | 
|---|
|  |  |  | import * as Utils from '../../utils' | 
|---|
|  |  |  | import Http from '@/utils/http'; | 
|---|
|  |  |  | 
|---|
|  |  |  | zIndex: 99, | 
|---|
|  |  |  | width: '500px', | 
|---|
|  |  |  | height: '600px', | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | const ShelfView = (props) => { | 
|---|
|  |  |  | const intl = useIntl(); | 
|---|
|  |  |  | const { styles } = useStyles(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // console.log(props.data); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const refContainer = useRef(); | 
|---|
|  |  |  | const [loading, setLoading] = React.useState(true); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | useEffect(() => { | 
|---|
|  |  |  | shelfThree = new ShelfThree(refContainer.current); | 
|---|
|  |  |  | shelfThree.startup(); | 
|---|
|  |  |  | console.log(props); | 
|---|
|  |  |  | setTimeout(() => { | 
|---|
|  |  |  | setLoading(false); | 
|---|
|  |  |  | shelfThree = new ShelfThree(refContainer.current); | 
|---|
|  |  |  | shelfThree.startup(); | 
|---|
|  |  |  | }, 1000) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return () => { | 
|---|
|  |  |  | shelfThree?.destroy(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, []); | 
|---|
|  |  |  | }, [props]); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <> | 
|---|
|  |  |  | <div className={styles.threeContainer} ref={refContainer}></div> | 
|---|
|  |  |  | <Spin | 
|---|
|  |  |  | spinning={loading} | 
|---|
|  |  |  | indicator={<LoadingOutlined spin />} | 
|---|
|  |  |  | size={'large'} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div ref={refContainer} className={styles.threeContainer}></div> | 
|---|
|  |  |  | </Spin> | 
|---|
|  |  |  | </> | 
|---|
|  |  |  | ) | 
|---|
|  |  |  | } | 
|---|