Merge remote-tracking branch 'microsoft/0.1.0-dev'

lesliekim · Sep 12, 2016 · 1ffb844 · 1ffb844
2 parents e23f213 + 3bb1cbc
commit 1ffb844
Show file tree

Hide file tree

Showing 14 changed files with 299 additions and 25 deletions.
diff --git a/demos/vnext/rows/index.js b/demos/vnext/rows/index.js
@@ -53,14 +53,15 @@ window.gridView = pgrid.factory({ vnext: true }).create({
       'column-header-rows',
     ],
     bodyRows: [{
-      name: 'data-rows',
+      type: 'data-rows',
       classes: {
         redColor: true,
         longer: (row) => { return row.ShipAddress.length > 15; }, 
       }
     }, {
       item: {
         CustomerID: 'foobar',
+        OrderID: 'custom-row',
       },
     }],
     footRows: [{

diff --git a/js/index.js b/js/index.js
@@ -6,4 +6,5 @@ module.exports = {
   projections: require('./projection/index'),
   layout: require('./layout/index'),
   factory,
+  popupEditorPrompt: require('./popup-editor/index'),
 };
diff --git a/js/popup-editor/index.jade b/js/popup-editor/index.jade
@@ -1,6 +1,6 @@
 form.form-inline(style='padding: 5px; background: #e0e0e0')
   input.form-control.editor(type='text', value=value)
   &nbsp
-  button.btn.btn-primary.save(type='button') Save
+  button.btn.btn-primary.save(type='button')=saveButtonText
   &nbsp
-  button.btn.btn-default.cancel(type='button') Cancel
+  button.btn.btn-default.cancel(type='button')=cancelButtonText
diff --git a/js/popup-editor/index.js b/js/popup-editor/index.js
@@ -29,6 +29,8 @@ define([
       this.position = options.position;
       this.model = options.model;
       this.property = options.property;
+      this.saveButtonText = options.saveButtonText || 'Save';
+      this.cancelButtonText = options.cancelButtonText || 'Cancel';
     },
 
     getValue: function () {
@@ -52,7 +54,11 @@ define([
     render: function () {
       var val = this.getValue();
 
-      this.$el.html(template({ value: val }));
+      this.$el.html(template({
+        value: val,
+        saveButtonText: this.saveButtonText,
+        cancelButtonText: this.cancelButtonText,
+      }));
       this.$el.css({ position: 'absolute' });
 
       if (this.position.left) {

diff --git a/js/projection/editable.js b/js/projection/editable.js
@@ -5,7 +5,7 @@ define([
   'component/grid/layout/template/editable.jade',
   'component/popup-editor/index',
   '../../less/editable.less',
-], function (_, $, BaseProjection, editableTemplate, prompt) {
+], function (_, $, BaseProjection, defaultEditableTemplate, prompt) {
   'use strict';
 
   function isReadonlyRow(item) {
@@ -20,6 +20,7 @@ define([
       'column.editable': [],
       'editable.icon.class': ['glyphicon', 'glyphicon-pencil'],
       'editable.tooltip.text': 'Edit',
+      'editable.template': defaultEditableTemplate,
     },
     name: 'column-editable',
     events: {
@@ -70,6 +71,7 @@ define([
         var columns = model.get('columns');
         var iconClasses = this.get('editable.icon.class');
         var tooltipText = this.get('editable.tooltip.text');
+        var editableTemplate = this.get('editable.template');
 
         _.each(this.viewConfig, function (view, key) {
           var column = columns[key] || { property: key };
@@ -125,11 +127,11 @@ define([
         e.target.tagName !== 'A' &&
         $(e.target).closest('.is-not-trigger').length === 0) {
         schema = arg.grid.options.get('schema');
-        let editor = this.viewConfig[property] || prompt;
+        let editor = this.viewConfig[arg.property] || prompt;
         editor({
           model: arg.model,
           schema: schema,
-          position: arg.grid.layout.container.offset(e.target),
+          position: arg.grid.layout.container.offset(e.currentTarget),
           property: property,
           onSubmit: model => {
             this.trigger('edit', model, property);

diff --git a/js/vnext/grid-view.js b/js/vnext/grid-view.js
@@ -1,4 +1,5 @@
 import _ from 'underscore';
+import $ from 'jquery';
 import Backbone from 'backbone';
 import Promise from 'bluebird';
 import {
@@ -228,6 +229,23 @@ export class GridView extends Backbone.View {
     return _.result(this._chainData.state, 'itemCount', 0);
   }
 
+  itemWithKey(key) {
+    return _.chain(this._chainData.state)
+      .result('itemIndex')
+      .result(key, null)
+      .value();
+  }
+
+  keyOfElement(el) {
+    const $tr = $(el).closest('tr', this.$el);
+
+    if ($tr.length > 0) {
+      return $tr.attr('data-key') || null;
+    }
+
+    return null;
+  }
+
   itemAt(index) {
     return _.result(this._chainData.state, 'items', []).slice(index, index + 1)[0];
   }

diff --git a/js/vnext/layout/table-view.js b/js/vnext/layout/table-view.js
@@ -168,6 +168,10 @@ export class TableView extends Backbone.View {
     const $stickyHeaderFiller = this.$('.sticky-header-filler');
     const $table = this.$('.sticky-header-filler + table');
     const adjustStickyHeader = () => {
+      if (!this.$el.is(':visible')) {
+        return;
+      }
+
       const topVP = listView.viewport.getMetrics().outer.top;
       const offset = _.result(this._props.scrolling.header, 'offset', 0);
       const rectContainer =  $tableContainer.get(0).getBoundingClientRect();

diff --git a/js/vnext/projection/cells.js b/js/vnext/projection/cells.js
@@ -1,7 +1,12 @@
 import _ from 'underscore';
 import { normalizeClasses } from './common.js';
 
-function translateRow(columnGroup, row, rowType) {
+function translateRow({
+  columnGroup,
+  row,
+  rowType,
+  primaryKey,
+}) {
   const patch = {};
 
   if (_.has(row, 'html')) {
@@ -38,6 +43,10 @@ function translateRow(columnGroup, row, rowType) {
 
       return cell;
     });
+
+    patch.attributes = _.defaults({
+      'data-key': row.item[primaryKey],
+    }, row.attributes);
   }
 
   return _.defaults(patch, row, { attributes: {} });
@@ -59,24 +68,40 @@ export const cells = {
   name: 'cells',
   handler(state) {
     const columnGroup = state.columnGroup;
+    const primaryKey = this.primaryKey;
 
     const headRows = _.reduce(state.headRows, (memo, row) => {
       if (row === 'column-header-rows') {
         return memo.concat(columnGroup.headerRows);
       }
-      memo.push(translateRow(columnGroup, row, 'head'));
+      memo.push(translateRow({
+        columnGroup,
+        row,
+        rowType: 'head',
+        primaryKey,
+      }));
       return memo;
     }, []);
 
     const bodyRows = {
       length: state.bodyRows.length,
       slice: (begin = 0, end = state.bodyRows.length) => {
         return state.bodyRows.slice(begin, end)
-          .map(row => translateRow(columnGroup, row, 'body'));
+          .map(row => translateRow({
+            columnGroup,
+            row,
+            rowType: 'body',
+            primaryKey,
+          }));
       },
     };
 
-    const footRows = _.map(state.footRows, row => translateRow(columnGroup, row, 'foot'));
+    const footRows = _.map(state.footRows, row => translateRow({
+      columnGroup,
+      row,
+      rowType: 'foot',
+      primaryKey,
+    }));
 
     return _.defaults({
       headRows,

diff --git a/js/vnext/projection/editable.js b/js/vnext/projection/editable.js
@@ -15,8 +15,8 @@ function deepClone(obj) {
 function editInColumn(column) {
   return function (e) {
     const $td = $(e.target).closest('td');
-    const index = this.indexOfElement(e.target);
-    const item = this.itemAt(index);
+    const key = this.keyOfElement(e.target);
+    const item = this.itemWithKey(key);
 
     if($td.hasClass('grid-editable-cell')) {
       this.trigger('willEdit', item);
@@ -68,6 +68,10 @@ export const editable = {
     const bodyRows = {
       length: state.bodyRows.length,
       slice: (...args) => state.bodyRows.slice(...args).map(row => {
+        if (row.type !== 'data') {
+          return row;
+        }
+
         const cells = _.map(row.cells, (cell, index) => {
           const col = leafColumns[index];
 

diff --git a/js/vnext/projection/rows.js b/js/vnext/projection/rows.js
@@ -20,7 +20,7 @@ export const rows = {
   handler(state, {
     headRows = ['column-header-rows'],
     footRows = [],
-    bodyRows = [{ name: 'data-rows' }],
+    bodyRows = ['data-rows'],
   } = {}) {
     const patch = { headRows, footRows };
 
@@ -30,7 +30,7 @@ export const rows = {
     const items = state.items.slice(0, state.items.length);
 
     patch.bodyRows = _.reduce(bodyRows, (memo, row) => {
-      if (row === 'data-rows' || row.name === 'data-rows') {
+      if (row === 'data-rows' || row.type === 'data-rows') {
         _.each(items, item => {
           const key = item[primaryKey];
           const bufferState = _.chain(changed).result(key).result('state').value();
@@ -39,7 +39,7 @@ export const rows = {
             _.result(bufferStateClasses, bufferState, [])
           );
 
-          memo.push({ item, classes });
+          memo.push({ item, classes, type: 'data' });
         });
       } else if (row.view) {
         throw new Error('Body row cannot have subviews');

diff --git a/js/vnext/projection/selection.js b/js/vnext/projection/selection.js
@@ -53,8 +53,7 @@ export function setSelectRow(gridView, key, checked) {
 }
 
 function changeSelectRow(e) {
-  const index = this.indexOfElement(e.target);
-  const key = _.result(this.itemAt(index), this.primaryKey);
+  const key = this.keyOfElement(e.target);
 
   setSelectRow(this, key, e.target.checked);
 }
@@ -83,7 +82,6 @@ export const selection = {
 
     const columns = [{
       name: 'selection',
-      width: '30px',
       html: selectionHeadTemplate({
         single,
         checked: this.countRows > 0 && selected.length === this.countRows,

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "name": "Ahmed Kamel"
   },
   "main": "dist/projection-grid.js",
-  "version": "0.1.0-22",
+  "version": "0.1.0-26",
   "files": [
     "dist"
   ],