Ivan Asmer před 5 roky
rodič
revize
92663cab90
14 změnil soubory, kde provedl 14227 přidání a 1 odebrání
  1. 2485 1
      README.md
  2. 11285 0
      package-lock.json
  3. 18 0
      package.json
  4. binární
      public/favicon.ico
  5. 40 0
      public/index.html
  6. 15 0
      public/manifest.json
  7. 28 0
      src/App.css
  8. 50 0
      src/App.js
  9. 9 0
      src/App.test.js
  10. 5 0
      src/index.css
  11. 8 0
      src/index.js
  12. 7 0
      src/logo.svg
  13. 117 0
      src/registerServiceWorker.js
  14. 160 0
      src/test_input.js

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 2485 - 1
README.md


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 11285 - 0
package-lock.json


+ 18 - 0
package.json

@@ -0,0 +1,18 @@
+{
+  "name": "r",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "react-redux": "^5.0.7",
+    "react-scripts": "1.1.5",
+    "redux": "^4.0.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}

binární
public/favicon.ico


+ 40 - 0
public/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

+ 15 - 0
public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

+ 28 - 0
src/App.css

@@ -0,0 +1,28 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.App-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.App-title {
+  font-size: 1.5em;
+}
+
+.App-intro {
+  font-size: large;
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}

+ 50 - 0
src/App.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+let Header = p => 
+<header>
+    Header
+</header>
+
+let Alert = p =>
+<div className={`alert alert-${p.type}`} role="alert">
+    {p.children}
+</div>
+
+let MenuItem = (p =>
+<li className="nav-item ">
+   <a className="nav-link" href={p.href}>
+        {p.children}
+   </a>
+</li>)
+
+let MyImg = p =>
+<div className='imgContainer'>
+    <img src={p.src} />
+</div>
+
+
+let App = p => 
+<div>
+    <Header />
+    <main>
+        Main
+        <Alert type="info">
+            Some info
+        </Alert>
+        <Alert type="danger">
+            Some info
+        </Alert>
+        <ul>
+        <MenuItem href="/about/"><MenuItem>About</MenuItem></MenuItem>
+        <MenuItem href="/">Home</MenuItem>
+        <MenuItem href="/contacts">Contact</MenuItem>
+        <MyImg src="favicon.ico" />
+        </ul>
+    </main>
+    <footer>
+        Footer
+    </footer>
+</div>
+export default App;

+ 9 - 0
src/App.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

+ 5 - 0
src/index.css

@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}

+ 8 - 0
src/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import registerServiceWorker from './registerServiceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+registerServiceWorker();

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 7 - 0
src/logo.svg


+ 117 - 0
src/registerServiceWorker.js

@@ -0,0 +1,117 @@
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the "N+1" visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export default function register() {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Lets check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://goo.gl/SC7cgQ'
+          );
+        });
+      } else {
+        // Is not local host. Just register service worker
+        registerValidSW(swUrl);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the old content will have been purged and
+              // the fresh content will have been added to the cache.
+              // It's the perfect time to display a "New content is
+              // available; please refresh." message in your web app.
+              console.log('New content is available; please refresh.');
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+            }
+          }
+        };
+      };
+    })
+    .catch(error => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then(response => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      if (
+        response.status === 404 ||
+        response.headers.get('content-type').indexOf('javascript') === -1
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then(registration => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl);
+      }
+    })
+    .catch(() => {
+      console.log(
+        'No internet connection found. App is running in offline mode.'
+      );
+    });
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister();
+    });
+  }
+}

+ 160 - 0
src/test_input.js

@@ -0,0 +1,160 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+import { connect, Provider} from 'react-redux';
+import { createStore, combineReducers } from 'redux';
+import { stat } from 'fs';
+
+
+var dataGrid = []
+function data () {
+let dataGrid = [[{value: 5, formula: 5}, {value: 2, formula: 2}, {value: 3, formula: 3}],
+               [{value: 4, formula: 4}, {value: 6, formula: 6}, {value: 7, formula: 7}],
+               [{value: 8, formula: 8}, {value: 9, formula: 9}, {value: 1, formula: 1}], ]
+    return dataGrid
+}
+
+dataGrid = data ()
+
+class CellComponent extends Component {
+    onClick = () => {
+        this.props.onClick(this.props.rows, this.props.columns); 
+        console.log (this.props)
+        };
+    render() {
+        return(
+        <td onClick = {this.onClick}> {this.props.cellData.value} </td>
+        )
+    }
+}
+
+
+class TestFromInput extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            cell_input: true,
+            row: 0,
+            column: 0
+            };
+        this.inputCell = this.inputCell.bind(this.value);
+        this.onChange = this.onChange.bind(this);
+    }
+
+    cellClick = (i,j) => {
+        console.log (j,i)
+        this.input.value = this.props.dataGrid [i][j].formula 
+        this.setState(() => ({
+            row: i, 
+            column: j
+        }))
+        store.dispatch ({type: 'CHANGE_INPUT', dataFormula: this.props.dataGrid [i][j].formula})
+    };
+
+    inputCell() {       
+        this.setState(
+            (prevState, props) => ({
+                cell_input: this.input.value
+            })
+        );
+    }
+    onChange(i, j){
+        console.log ('inputCell', this.input.value)
+        this.props.dataGrid [this.state.row][this.state.column].formula = this.input.value
+        
+        store.dispatch ({type: 'CHANGE_CELL', dataInput: this.input.value})
+        //todo dispatch
+    }
+  
+    render (){
+        console.log ('render', this.props)
+        var trs= new Array();
+                    for (var i = 0; i < this.props.rows; i++) {
+                    var tds = new Array();
+                    for (var j = 0; j < this.props.columns; j++) {
+                        var oneCell = {}
+                        oneCell['adress']= String.fromCharCode(65+i) +  (+(+ j))
+                        oneCell['formula'] = " "
+                        oneCell[String.fromCharCode(65+i) +  (+(+ j))] = {i} + {j}
+                        tds.push (<CellComponent
+                            adress = {oneCell.adress}
+                            columns = {j} rows = {i} 
+                            onClick = {this.cellClick.bind(this, j, i)}
+                            onChange = {this.inputCell}
+                            ref={ c => this.td = c}
+                             cellData = {this.props.data[j][i]}
+                            >  </CellComponent>)
+                        }
+                    trs.push(<tr>{tds}</tr>)
+                    }
+        
+        return (
+            <div>
+                <input                  
+                className = "dataInput" 
+                onChange={this.onChange}  
+                ref={ c => this.input = c}/>
+                <table> 
+                    <tbody>
+                        {trs}
+                    </tbody>
+                </table>        
+            </div>                
+        )
+    };
+};
+
+function tableReducer(state =[], action){
+    if (action.type === 'CHANGE_INPUT'){
+        return [...state, action.dataFormula]
+    }
+    if (action.type === 'CHANGE_CELL'){
+        return [...state, action.dataInput]
+    }
+    return state;
+}
+
+const store = createStore (tableReducer)
+store.subscribe(() => {
+    console.log('subcribe', store.getState())
+})
+
+const mapStateToProps = function (store) {
+    return {
+        tableReducer: store,
+    
+    };
+  }
+  
+data = connect(mapStateToProps)(data)
+  
+
+// const cellData = combineReducers({
+//     //   sheet: sheetsReducer,
+//       cell: cellPlace
+//     })
+
+
+// const store = createStore (cellData);
+// store.subscribe(() => {
+//     console.log('subcribe', store.getState())
+// })
+
+class AppInput extends Component {
+    render() {
+        //todo connect data from store
+      return (
+        <Provider store={store}>
+        
+            <div className="App">
+            
+              <TestFromInput columns = {3} rows = {3} data = {dataGrid}/> 
+            </div>
+        </Provider>
+      );
+    }
+  }
+
+  export default AppInput;
+