1+ import './sand-box.css' ;
2+
3+ import React from 'react' ;
4+ import ReactDOM from 'react-dom' ;
5+
6+ import JYCMLib , {
7+ JYCMRender ,
8+ JYCMContext ,
9+ IUseJYCMProps ,
10+ IJYCMRenderProps ,
11+ useJYCM ,
12+ useJYCMContext
13+ } from "./index" ;
14+ import MonacoEditor from 'react-monaco-editor' ;
15+ import { DiffDetailViewer } from './components/jycm-diff-detail-viewer-simple' ;
16+
17+
18+ const safeJSONCallback = ( value : string , cb : ( v : string ) => void ) => {
19+ try {
20+ JSON . parse ( value ) ;
21+ return cb ( value )
22+ } catch ( e ) {
23+ return false ;
24+ }
25+ }
26+
27+ const useInterval = ( func : ( ) => void , timeout : number ) => {
28+ const funcRef = React . useRef ( func ) ;
29+
30+ React . useEffect ( ( ) => {
31+ function doJob ( ) {
32+ funcRef . current && funcRef . current ( )
33+ }
34+ const timer = setInterval ( doJob , timeout ) ;
35+
36+ return ( ) => {
37+ clearInterval ( timer ) ;
38+ }
39+ } , [ func , timeout ] )
40+ }
41+
42+
43+
44+ const useWindowData = ( ) => {
45+ const [ leftJsonStr , setLeftJsonStr ] = React . useState ( '{}' )
46+ const [ rightJsonStr , setRightJsonStr ] = React . useState ( '{}' )
47+ const [ diffResult , setJYCMResult ] = React . useState ( { } ) ;
48+
49+ const obData = React . useCallback ( ( ) => {
50+ // // @ts -ignore
51+ // console.log('ob', window.jycmLeftJsonStr, window.jycmLeftJsonStr, window.diffResult)
52+ // @ts -ignore
53+ safeJSONCallback ( window . jycmLeftJsonStr , v => setLeftJsonStr ( v ) )
54+ // @ts -ignore
55+ safeJSONCallback ( window . jycmRightJsonStr , v => setRightJsonStr ( v ) )
56+ // @ts -ignore
57+ if ( window . diffResult && typeof window . diffResult === 'object' ) {
58+ // @ts -ignore
59+ setJYCMResult ( window . diffResult || { } )
60+ }
61+ } , [ ] )
62+
63+ useInterval ( obData , 1000 ) ;
64+
65+ return {
66+ leftJsonStr,
67+ rightJsonStr,
68+ diffResult
69+ }
70+ }
71+
72+ function SandBox ( ) {
73+ const {
74+ leftJsonStr,
75+ rightJsonStr,
76+ diffResult,
77+ } = useWindowData ( ) ;
78+
79+ // use this can ave your time! see provider below
80+ const jycmContextValue = useJYCM ( {
81+ leftJsonStr,
82+ rightJsonStr,
83+ diffResult,
84+ } ) ;
85+
86+ // In your component you can use all properties from jycm
87+ // using code
88+ // const jycmContext = useContext(JYCMContext)!;
89+
90+
91+ return < div style = { { height : "100%" , width : "100%" } } >
92+ < div style = { { height : "100%" , width : "100%" } } >
93+ { /********** any component under this provider can have access to the diff etc.
94+ You can control the editor very easy. **********/ }
95+ < JYCMContext . Provider value = { jycmContextValue } >
96+ { /* <JYCMRender leftTitle="BenchMark" rightTitle="Actual" /> */ }
97+ < div style = { { display : "flex" , alignItems : "center" , height : "100%" } } >
98+ < div style = { { flexGrow : 1 , height : "100%" } } >
99+ < JYCMRender leftTitle = 'Left' rightTitle = 'Right' />
100+ </ div >
101+ < div style = { { flexBasis : "24%" , height : '100%' , display : "flex" , flexDirection : "column" } } >
102+ < div style = { { textAlign : 'center' , fontWeight : 700 } } > Diff Detail</ div >
103+ < div style = { { flexGrow : 1 } } >
104+ < DiffDetailViewer />
105+ </ div >
106+ </ div >
107+ </ div >
108+ </ JYCMContext . Provider >
109+
110+ </ div >
111+ </ div >
112+ }
113+
114+ ReactDOM . render (
115+ < SandBox /> ,
116+ document . getElementById ( 'root' ) as HTMLElement
117+ )
0 commit comments