Merge branch 'develop'

.babelrc

@@ -0,0 +1,9 @@
+{
+    "presets": ["es2015", "react", "babel-preset-react"],
+    "plugins": ["transform-object-rest-spread"],
+    "env": {
+      "test": {
+        "plugins": ["transform-es2015-modules-commonjs"]
+      }
+    }
+}

.gitignore

@@ -1,2 +1,8 @@
+.DS_Store
 node_modules/
 npm-debug.log.*
+jest/*
+*.log*
+.idea/*
+__tests__/components/__snapshots__/*
+coverage/lcov-report/*

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mocks__/request.js

@@ -0,0 +1,13 @@
+const rows = {"rows":[
+  {"GT_RowId":123,"title":"Test Bar 123st row","id":123,"desc":"Lorem Ipsum is simply dummy Bar 7196 text of the printing and typesetting","info":"some info some info some info some info","date":"13:23:43 02:04:2017","field1":123,"field2":1357,"field3":12468},
+  {"GT_RowId":66,"title":"Test Foo 66st row","id":66,"desc":"Lorem Ipsum is simply dummy Foo 9608 text of the printing and typesetting","info":"some info some info some info some info","date":"13:24:40 02:04:2017","field1":0,"field2":1300,"field3":12411},
+  {"GT_RowId":105,"title":"Test Bar 105st row","id":105,"desc":"Lorem Ipsum is simply dummy Bar 7258 text of the printing and typesetting","info":"some info some info some info some info","date":"13:24:01 02:04:2017","field1":null,"field2":1339,"field3":12450}
+]};
+
+export default function fetch(url) {
+  return new Promise((resolve, reject) => {
+    process.nextTick(
+      () => resolve(rows)
+    );
+  });
+}

__mocks__/styleMock.js

@@ -0,0 +1,3 @@
+module.exports = {
+
+};

__tests__/components/Button.test.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Button from '../../src/components/Button.js'
+import { shallow } from 'enzyme';
+
+it('renders Button correctly', () => {
+  const tree = renderer.create(
+    <Button
+    action="create"
+    active={true}
+    showPopup={() => {}}
+    selectedRows={[]}
+    key={1}>New</Button>
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+
+  const obj = shallow(
+    <Button
+    action="create"
+    active={true}
+    showPopup={() => {}}
+    selectedRows={[]}
+    key={1}>New</Button>
+  );
+
+  obj.instance().shouldComponentUpdate({
+    active: true,
+    action: "edit"
+  });
+
+  obj.instance().onClick({
+    target: {
+      dataset: 'title'
+    }
+  });
+});

__tests__/components/Column.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Column from '../../src/components/Column.js'
+import { shallow } from 'enzyme';
+
+it('renders Column correctly', () => {
+  const tree = renderer.create(
+    <Column
+    count={0}
+    dataIndex="desc"
+    gteRowId={71}
+    minRow="0"
+    maxRow="0"
+    selectedRows={[]}>Lorem Ipsum is simply dummy Bar 725 text of the printing and typesetting</Column>
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+
+  const obj = shallow(
+    <Column
+    count={0}
+    dataIndex="desc"
+    gteRowId={71}
+    minRow="0"
+    maxRow="0"
+    selectedRows={[]}>Lorem Ipsum is simply dummy Bar 725 text of the printing and typesetting</Column>
+  );
+
+  obj.instance().shouldComponentUpdate({
+    gteRowId: 1,
+    count: 1,
+    selectedRows: [],
+    dataIndex: 'title'
+  });
+});

__tests__/components/Editor.test.js

@@ -0,0 +1,159 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Editor from '../../src/components/Editor.js'
+
+var editor = {
+  ajax: 'http://gigatables.loc/editor.php',
+  ajaxFiles: 'uploadFiles.php',
+  struct: {
+    buttons: ['top', 'bottom'] // buttons
+  },
+  fields: [
+    {
+      label: "ID",
+      name: "id",
+      type: 'hidden'
+    },
+    {// an example of using select - automatically selected if matches with data in table column
+      label: "Types:",
+      name: "types[]",
+      values: [// if select,checkbox,radio etc types - need this pre-set structure of values
+        {'key1': 'val1'},
+        {'key2': 'val2'}
+      ],
+      type: 'checkbox', // select,checkbox,radio
+//              attrs: [
+//                {'multiple':true}
+//              ]
+    },
+    {
+      label: "Article title:",
+      name: "title",
+      type: 'text', // default, other: password, file, select, multiselect etc
+      attrs: [
+        {'pattern': '^[A-Za-z0-9_]+$'}
+      ]
+    },
+    {
+      label: "Description:",
+      name: "desc",
+      type: 'textarea'
+    },
+    {
+      label: "Date Time:",
+      name: "date",
+      type: 'date'
+    },
+    {
+      label: "Image:",
+      name: "image",
+      type: 'file'
+    },
+  ]
+};
+
+var settings = {
+ struct: {
+   search: ['top', 'bottom'],
+   rowsSelector: ['desc', 'top', 'bottom'],
+   pagination: ['bottom']
+ },
+ lang: 'en', // english default
+ perPageRows: [25, 50, 100, 200],
+ defaultPerPage: 100,
+ ajax: 'http://gigatables.loc/gigatables.php',
+ // ajaxAutoloadData: true, // default false
+ // ajaxAutoloadPeriod: 8, // sec
+ requestType: 'GET',
+ columns: [
+   {// include all defaults
+     data: "id",
+     sortable: true, // true by defualt
+     visible: true, // true by defualt
+     searchable: true, // true by defualt
+     discreteSearch: true, // false by default
+     discreteSearchValue: function (title) {
+       return 'Search by field - ' + title;
+     }
+   },
+   {
+     data: "title",
+     cISearch: true // default false
+   },
+   {
+     data: "desc",
+     sortable: false,
+     discreteSearch: true,
+     discreteCISearch: true // default false
+   },
+   {
+     data: "date",
+     searchable: false
+   },
+   {
+     data: "info"
+   },
+   {data:"field1"},
+   {data:"field2"},
+   {data:"field3", visible: false}
+ ],
+ columnOpts: [
+   {
+     render: (data, row, type) => (
+       <div>
+         <form method="post" action="">
+          <input type="hidden" name="action" value="forms" />
+          <input type="hidden" name="id" value={row.id} />
+          <div>{data}</div>
+        </form>
+      </div>),
+     target: 'title' // provide data column index to match opts
+   },
+   {
+     render: (data, row, type) => (
+        <div>
+          <div>{data}</div>
+          <div>{(row.id % 2 === 0) ? '**' : '*'}</div>
+        </div>
+       ),
+     target: 'date'
+   }
+ ],
+ tableOpts: {
+   buttons: [
+     {extended: "editor_create", editor: editor, triggerAfter: (function () {
+         console.log('after create');
+       }), triggerBefore: (function () {
+         console.log('before create');
+       })},
+     {extended: "editor_edit", editor: editor, triggerBefore: (function () {
+       console.log('before edit');
+     })},
+     {extended: "editor_remove", editor: editor, triggerAfter: (function () {
+         console.log('after del');
+       })}
+   ],
+   buttonsPosition: ['top', 'bottom'],
+   theme: 'std'
+ }
+};
+
+it('renders Editor correctly', () => {
+  const tree = renderer.create(
+    <Editor
+    lang="en"
+    countRows="229"
+    fromRow="0"
+    page="1"
+    perPage="50"
+    active={true}
+    editor={editor}
+    columns={editor.fields}
+    struct={settings.struct}
+    tableOpts={settings.tableOpts}
+    selectedRows={[1]}
+    selectedIds={[187]}
+    fieldsEdit={{}} />
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+});

__tests__/components/Header.test.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Header from '../../src/components/Header.js'
+import { shallow } from 'enzyme';
+
+const columns = [
+   {// include all defaults
+     data: "id",
+     sortable: true, // true by defualt
+     visible: true, // true by defualt
+     searchable: true, // true by defualt
+     discreteSearch: true, // false by default
+     discreteSearchValue: function (title) {
+       return 'Search by field - ' + title;
+     }
+   },
+   {
+     data: "title",
+     cISearch: true // default false
+   },
+   {
+     data: "desc",
+     sortable: false,
+     discreteSearch: true,
+     discreteCISearch: true // default false
+   },
+   {
+     data: "date",
+     searchable: false
+   },
+   {
+     data: "info"
+   },
+   {data:"field1"},
+   {data:"field2"},
+   {data:"field3", visible: false}
+ ];
+
+it('renders Header title correctly', () => {
+  const tree = renderer.create(
+    <Header
+    gteSort="sortable"
+    data="title"
+    sortDirection="0"
+    sortId="1"
+    columnsSearch={{}}
+    columns={columns}>Title</Header>
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+
+  const obj = shallow(
+    <Header
+    gteSort="sortable"
+    data="id"
+    sortDirection="1"
+    sortId="0"
+    columnsSearch={{}}
+    columns={columns}>Id</Header>
+  );
+
+  obj.instance().shouldComponentUpdate({
+    gteSort: "sortable",
+    sortId: 1,
+    sortDirection: 0
+  });
+});

__tests__/components/PagesSelector.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import PagesSelector from '../../src/components/PagesSelector.js'
+import { shallow } from 'enzyme';
+
+it('renders PagesSelector correctly', () => {
+  const tree = renderer.create(
+    <PagesSelector
+    lang="en"
+    defaultPerPage="100"
+    perPageRows={[25, 50, 100, 200]}
+    page="1"
+    perPage={50} />
+  ).toJSON();
+  expect(tree).toMatchSnapshot();
+
+  const obj = shallow(
+    <PagesSelector
+    lang="en"
+    defaultPerPage="100"
+    perPageRows={[25, 50, 100, 200]}
+    page="1"
+    perPage={50} />
+  );
+
+  obj.instance().shouldComponentUpdate({
+    perPageRows: [25, 50, 100, 200],
+    perPage: 100
+  });
+});