TEXT 11
App.txt Guest on 29th July 2020 11:51:27 AM
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3.  
  4. import JqxTree from '../../../jqwidgets-react/react_jqxtree.js';
  5. import JqxSplitter from '../../../jqwidgets-react/react_jqxsplitter.js';
  6. import JqxExpander from '../../../jqwidgets-react/react_jqxexpander.js';
  7. import JqxListBox from '../../../jqwidgets-react/react_jqxlistbox.js';
  8. import JqxPanel from '../../../jqwidgets-react/react_jqxpanel.js';
  9.  
  10. class App extends React.Component {
  11.     constructor(props) {
  12.       super(props);
  13.       this.state = {
  14.         config:
  15.         {
  16.             feeds: { 'CNN.com': 'cnn', 'Geek.com': 'geek', 'ScienceDaily': 'sciencedaily' },
  17.             currentFeedContent: {}
  18.         }
  19.       };
  20.     }
  21.     componentDidMount () {
  22.       this.refs.mainSplitter.expand();
  23.       let firstItem = this.refs.myTree.getItems()[0].element;
  24.       this.refs.myTree.expandItem(firstItem);
  25.       this.refs.myTree.on('select', (event) => {
  26.         let item = this.refs.myTree.getItem(event.args.element);
  27.         if(this.state.config['feeds'][item.label] !== undefined) {
  28.           this.getFeed(this.state.config['feeds'][item.label]);
  29.         }
  30.       });
  31.       this.refs.myListBox.on('select', (event) => {
  32.           this.loadContent(event.args.index);
  33.       });
  34.       this.getFeed('sciencedaily');
  35.     }
  36.     getFeed (feed) {
  37.       feed = 'data/' + feed + '.txt';
  38.       this.loadFeed(feed);
  39.     };
  40.     loadFeed (feed, callback) {
  41.         $.jqx.data.ajax({
  42.             'dataType': 'json',
  43.             'url': feed,
  44.             success: (data) => {
  45.                 let channel = data.rss.channel;
  46.                 this.setState({ config:
  47.                   {
  48.                       feeds: { 'CNN.com': 'cnn', 'Geek.com': 'geek', 'ScienceDaily': 'sciencedaily' },
  49.                       currentFeedContent: channel.item
  50.                   }
  51.                 });
  52.                 this.displayFeedList(this.state.config.currentFeedContent);
  53.                 this.displayFeedHeader(channel.title);
  54.                 this.selectFirst();
  55.             },
  56.             error: (msg) => {
  57.             }
  58.         });
  59.     };
  60.     displayFeedList (items) {
  61.         let headers = this.getHeaders(items);
  62.         this.refs.myListBox.source(headers);
  63.     };
  64.     displayFeedHeader (header) {
  65.         this.refs.feedListExpander.setHeaderContent(header);
  66.     };
  67.     selectFirst () {
  68.         this.refs.myListBox.selectIndex(0);
  69.         this.loadContent(0);
  70.     };
  71.     loadContent (index) {
  72.         let item = this.state.config.currentFeedContent[index];
  73.         if (item != null) {
  74.           this.refs.myPanel.clearcontent();
  75.           this.refs.myPanel.prepend('<div style="padding: 1px;"><span>' + item.description + '</span></div>');
  76.           this.addContentHeaderData(item);
  77.         }
  78.     };
  79.     getHeaders (items) {
  80.         let headers = [], header;
  81.         for (let i = 0; i < items.length; i += 1) {
  82.             header = items[i].title;
  83.             headers.push(header);
  84.         }
  85.         return headers;
  86.     };
  87.     addContentHeaderData (item) {
  88.       let link = document.createElement('a');
  89.       link.style.whiteSpace = 'nowrap';
  90.       link.style.marginLeft = '15px';
  91.       link.target = '_blank';
  92.       let text = document.createTextNode('Source');
  93.       link.appendChild(text);
  94.       let date = document.createElement('div');
  95.       date.style.whiteSpace = 'nowrap';
  96.       date.style.marginLeft = '30px';
  97.       date.appendChild(document.createTextNode(item.pubDate));
  98.       let container = document.createElement('table');
  99.       container.style.height = '100%';
  100.       let element1 = document.createElement('tr');
  101.       container.appendChild(element1);
  102.       container.appendChild(document.createElement('td'));
  103.       container.appendChild(document.createElement('td'));
  104.       link.href = item.link;
  105.       document.getElementById('feedItemHeader').innerHTML = null;
  106.       document.getElementById('feedItemHeader').appendChild(container);
  107.       container.getElementsByTagName('td')[0].appendChild(link);
  108.       container.querySelector('td:last-child').appendChild(date);
  109.       this.refs.feedListExpander.setHeaderContent(container.outerHTML);
  110.     };
  111.     render () {
  112.  
  113.         return (
  114.             <JqxSplitter ref='mainSplitter'
  115.               width={850} height={600}
  116.               panels={[{ size: 200, min: 100 }, {min: 200, size: 400}]}
  117.             >
  118.                 <JqxExpander style={{ border: 'none'}}
  119.                   width={'100%'} height={'100%'} showArrow={false} toggleMode={'none'}
  120.                 >
  121.                     <div className="jqx-hideborder">
  122.                         Feeds
  123.                     </div>
  124.                     <div className="jqx-hideborder jqx-hidescrollbars">
  125.                         <JqxTree ref='myTree' width={'100%'} height={'100%'}>
  126.                             <ul>
  127.                                 <li id="t1">
  128.                                     <img src='../images/contactsIcon.png' /><span>News and Blogs</span>
  129.                                     <ul>
  130.                                         <li>
  131.                                             <img src='../images/favorites.png' /><span>Favorites</span>
  132.                                             <ul>
  133.                                                 <li>
  134.                                                     <img src='../images/folder.png' /><span>ScienceDaily</span>
  135.                                                 </li>
  136.                                             </ul>
  137.                                         </li>
  138.                                         <li>
  139.                                             <img src='../images/folder.png' /><span>Geek.com</span>
  140.                                         </li>
  141.                                         <li>
  142.                                             <img src='../images/folder.png' /><span>CNN.com</span>
  143.                                         </li>
  144.                                     </ul>
  145.                                 </li>
  146.                             </ul>
  147.                         </JqxTree>
  148.                     </div>
  149.                 </JqxExpander>
  150.                 <div>
  151.                     <JqxSplitter
  152.                       width={850} height={600} orientation={'horizontal'}
  153.                       panels={[{ size: 400, min: 100, collapsible: false }, { min: 100, collapsible: true}]}
  154.                     >
  155.                         <div className="feed-item-list-container" id="feedUpperPanel">
  156.                             <JqxExpander ref='feedListExpander' className="jqx-hideborder"
  157.                                 width={'100%'} height={'100%'} showArrow={false} toggleMode={'none'}
  158.                             >
  159.                                 <div className="jqx-hideborder" id="feedHeader">
  160.                                 </div>
  161.                                 <div className="jqx-hideborder jqx-hidescrollbars">
  162.                                     <JqxListBox ref='myListBox' width={'100%'} height={'100%'} source={['1']} className="jqx-hideborder">
  163.                                     </JqxListBox>
  164.                                 </div>
  165.                             </JqxExpander>
  166.                         </div>
  167.                         <div id="feedContentArea">
  168.                             <JqxExpander className="jqx-hideborder"
  169.                                 width={'100%'} height={'100%'} showArrow={false} toggleMode={'none'}
  170.                             >
  171.                                 <div className="jqx-hideborder" id="feedItemHeader">
  172.                                 </div>
  173.                                 <div className="jqx-hideborder jqx-hidescrollbars">
  174.                                     <JqxPanel ref='myPanel' width={'100%'} height={'100%'} className="jqx-hideborder">
  175.                                         Select a news item to see it's content
  176.                                     </JqxPanel>
  177.                                 </div>
  178.                             </JqxExpander>
  179.                         </div>
  180.                     </JqxSplitter>
  181.                 </div>
  182.             </JqxSplitter>
  183.         )
  184.     }
  185. }
  186.  
  187. //Render our App Component to the desirable element
  188. ReactDOM.render(<App />, document.getElementById('app'));

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.