History

Duane Johnson 848a566f6b Implement PostGrades dialog in ReactJS Replaces the PostGradesModel and PostGradesDialog with functional ReactJS code. - more visual feedback for users during correction step: - green check mark when whole row/assignment is good - uses an "ignore" (minus) icon instead of an X - rows stay on page, even after corrected (allowing users to correct any mistakes during data entry) - when name is not unique a visual hint is shown: "The assignment name must be unique" - "Ignore All" button is now "Ignore These" since it pertains to uncorrected rows, rather than all rows - "Ignore All" button becomes "Continue" button after all corrections have been made - calendar datepicker no longer freezes / has issues - when the user has fixed all assignments with errors, the title becomes: "No Assignments with Errors, click Continue" - if the user ignores a single assignment (with the minus "-" button) he/she can restore the assignment by editing the assignment name or due date - corrected assignments (names, due dates) are now saved all at once when the user presses "Continue" (or "Ignore These" if he/she wants to ignore remaining issues) - the gradebook "Post Grades" button that opens the dialog: - appears when selecting a section with an SIS ID, and disappears when the section has no SIS ID - is now styled like other buttons - when closing the dialog and re-opening, the dialog returns to the "correction" step - ungraded submissions message on the summary page if one or more students have submitted work but the teacher has not yet graded it - clicking the ungraded submissions message/link takes the user to a screen showing ungraded submissions that are clickable (takes the user to speedgrader) Fixes SIS-646 Fixes SIS-654 Change-Id: I464fc85a3b96e5051bdad078e4483d979cfaf3e0 Reviewed-on: https://gerrit.instructure.com/44491 Tested-by: Jenkins <jenkins@instructure.com> Reviewed-by: Ken Romney <kromney@instructure.com> QA-Review: Jeremy Putnam <jeremyp@instructure.com> Product-Review: Cosme Salazar <cosme@instructure.com>		2014-11-19 23:55:56 +00:00
..
gradebook/SISGradePassback	Implement PostGrades dialog in ReactJS	2014-11-19 23:55:56 +00:00
shared	added createStore.js	2014-11-04 17:58:08 +00:00
README.md	typo in jsx README	2014-11-04 23:06:46 +00:00
sample.jsx	Implement PostGrades dialog in ReactJS	2014-11-19 23:55:56 +00:00

README.md

This directory is temporary until we rework the front-end build This is where we are headed.

Stuff you can do in Canvas JSX files

BUT WAIT!

Your file needs to:

Have a file name with the .jsx extension.
Start with /** @jsx React.DOM */

JSX

function foo(paths) {
  return <svg>{paths}</svg>;
}

Arrow Functions

Arrow Function Reference

var arr = ['hydrogen', 'helium', 'lithium'];

// es5
var a = arr.map(function(s){ return s.length });

// es6
var b = arr.map( s => s.length );

// with curlies requires normal return
var b = arr.map( (s) => {
  return s.length
});

// lexical `this`
var obj = {
  multiplier: 3,
  
  multiplyStuff (stuff) {
    return stuff.map((x) =>
      // no bind!
      return this.multiplier * x;
    )
  }
};

Classes

Class Reference

class EventEmitter {
  constructor() {
    // called when created
  }
  emit() {
    // ...
  }
  on() {
    // ...
  }
  once() {
    // ...
  }
  removeListener() {
    // ...
  }
  removeAllListeners() {
    // ...
  }
}

Extending and calling super.

class Domain extends EventEmitter {
  constructor() {
    super();
    this.members = [];
  }
}

Creating instances

var domain = new Domain();

Destructuring

// es5
var map = _.map;
var each = _.each;

// es6
var {map, each} = _;

Concise Object Methods

// es5
var obj = {
  foo: function() {}
  bar: function() {}
};

// es6
var obj = {
  foo() {}
  bar() {}
};

Object Short Notation

// es5
function() {
  // ...
  return {foo: foo, bar: bar, x: 10};
}

// es6
function() {
  // ...
  return {foo, bar, x: 10};
}

Rest Parameters

Rest Parameters Reference

// es5
function multiply(multiplier) {
  var numbers = Array.prototype.slice.call(arguments, 0);
  return number.map(function(n) { return multiplier * n; });
}

// es6
function multiply(multiplier, ...numbers) {
  return numbers.map( n => multiplier * n);
}

String Templates

String Template Reference

Multiline strings:

// es5
console.log("string text line 1" +
"string text line 2");

// es6
console.log(`string text line 1
string text line 2`);

Interpolated strings

var a = 5;
var b = 10;

// es5
console.log("Fifteen is " + (a + b) + " and not " + (2 * a + b) + ".");

// es6
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);