import React , { FC , useEffect , useCallback } from 'react' ; import { useSelector , useDispatch } from 'redux-with-domain' ; import { DndProvider } from 'react-dnd' ; import Backend from 'react-dnd-html5-backend' ; import _ from 'lodash' ; import PageModule from '../index' ; import './index.css' ; import Attribute from '../../../container/workbook/chartAttribute/ui' ; import DatasetFields from '../../../container/workbook/datasetField/ui' ; import DatasetList from '../../../container/workbook/datasetList/ui' ; import ReportCanvas from '../../../container/common/reportCanvas/ui' ; import ReportList from '../../../container/workbook/reportList/ui' ; interface Props { } const Workbook = props => { const dispatch = useDispatch ( ) ; const id = _ . get ( props , 'match.params.id' ) ; useEffect ( ( ) => { dispatch ( PageModule . actions . init ( id ) ) ; } , [ id ] ) ; const name = useSelector ( ( state ) => { return PageModule . selectors . getWorkbookName ( state ) ; } ) ; const reportId = useSelector ( state => { return PageModule . selectors . getSelectedReportId ( state ) ; } ) ; const onPreview = useCallback ( ( ) => { window . open ( `${ window . location . origin }/report/${ reportId }` ) ; } , [ reportId ] ) ; return ( < DndProvider backend = { Backend } > < div className = "workbook" > < div className = "header" > < span > { `KOP Demo:${ name }` } < /span> < button onClick = { onPreview } > 预览 < /button> < /div> < div className = "content" > < div className = "sidebar" > < div className = "sidebar-header" > 数据 < /div> < div className = "sidebar-main" > < div className = "left" > < DatasetList /> < DatasetFields / > < /div> < div className = "right" > < Attribute /> < /div> < /div> < /div> < div className = "main-container" > < ReportCanvas reportId = { reportId } /> < ReportList / > < /div> < /div> < /div> < /DndProvider>); } ; export default Workbook ;