History

Clay Diffrient fa343f9715 Refactors Add Module Item for Files Converts the "Add File" portion of the "Add Module Item" dialog into a React component. It also sets up a Folder and File store for interacting with the API. It also modifies the behavior so that folders that do not contain any files are not shown in the select box. fixes CNVS-13036 closes CNVS-18302 Test Plan: - Go to the modules page in a course that has some files. - Add a file to a module via the file menu. - Create 200+ folders with at least one file in each. You can import and expand this zip to make this a lot easier: http://goo.gl/lNtfx5 - All files should be visible. - Create another folder, with no files within it. - That folder should not be visible. Change-Id: I93e520135acb66bd821b3d19cc387eec59b347c7 Reviewed-on: https://gerrit.instructure.com/49028 Tested-by: Jenkins Reviewed-by: Dan Minkevitch <dan@instructure.com> QA-Review: Jahnavi Yetukuri <jyetukuri@instructure.com> Product-Review: Clay Diffrient <cdiffrient@instructure.com>		2015-03-10 23:57:38 +00:00
..
context_modules	Refactors Add Module Item for Files	2015-03-10 23:57:38 +00:00
course_wizard	upgrade bower react & react-router but change nothing existing	2015-02-11 19:42:38 +00:00
external_apps	Don’t override external tool’s shared secret if nothing changed	2015-03-05 22:00:45 +00:00
gradebook/SISGradePassback	Starting point for upgrading SISGradePassback to current react	2015-03-03 18:06:16 +00:00
grading	show correct info when adding multiple grading schemes	2015-02-27 20:24:49 +00:00
groups	upgrade bower react & react-router but change nothing existing	2015-02-11 19:42:38 +00:00
outcomes	allows deletion of alignments from outcomes/show	2015-02-19 23:14:06 +00:00
shared	added createStore.js	2014-11-04 17:58:08 +00:00
styleguide	upgrade styleguide to current react and react-modal	2015-02-11 19:42:55 +00:00
README.md	typo in jsx README	2014-11-04 23:06:46 +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}.`);