6 tahun lalu · 92663cab90
--- a/README.md
+++ b/README.md
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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"
			
 
				+  }
			
 
				+}
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/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>
			
--- a/public/manifest.json
+++ b/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"
			
 
				+}
			
--- a/src/App.css
+++ b/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); }
			
 
				+}
			
--- a/src/App.js
+++ b/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;
			
--- a/src/App.test.js
+++ b/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);
			
 
				+});
			
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,5 @@
 
				+body {
			
 
				+  margin: 0;
			
 
				+  padding: 0;
			
 
				+  font-family: sans-serif;
			
 
				+}
			
--- a/src/index.js
+++ b/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();
			
--- a/src/logo.svg
+++ b/src/logo.svg
--- a/src/registerServiceWorker.js
+++ b/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();
			
 
				+    });
			
 
				+  }
			
 
				+}
			
--- a/src/test_input.js
+++ b/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;

			
 
				+