immuto-react
Version:
React bindings for Immuto
70 lines • 3.77 kB
JavaScript
;
var React = require("react");
var index_1 = require("../index");
var immuto_1 = require("immuto");
var Names;
(function (Names) {
Names.empty = [];
Names.at = immuto_1.array(immuto_1.primitive());
Names.reduce = immuto_1.reducer(Names.empty).action(Names.at);
})(Names = exports.Names || (exports.Names = {}));
var DependentSelectComputed;
(function (DependentSelectComputed) {
DependentSelectComputed.names = immuto_1.reference("NAMES", Names, function (s) { return s.names; });
DependentSelectComputed.selectedIndex = immuto_1.property("SELECTED_INDEX", function (s) { return s.selectedIndex; });
/**
* An example of a "virtual" or "computed" property. It's really
* just another way of setting selectedIndex. Compare with
* DependentSelectedReal, which does it the hard way.
*/
DependentSelectComputed.selectedName = immuto_1.property("COMPUTED_NAME", function (s) { return s.names[s.selectedIndex] || ""; }, function (s, selectedName) {
var selectedIndex = s.names.indexOf(selectedName);
return selectedIndex === -1 ? s : immuto_1.amend(s, { selectedIndex: selectedIndex });
});
DependentSelectComputed.empty = {
names: ["Homer", "Marge", "Bart", "Lisa", "Maggie"],
selectedIndex: 0
};
DependentSelectComputed.reduce = immuto_1.reducer(DependentSelectComputed.empty)
.action(DependentSelectComputed.names)
.action(DependentSelectComputed.selectedIndex)
.action(DependentSelectComputed.selectedName);
})(DependentSelectComputed = exports.DependentSelectComputed || (exports.DependentSelectComputed = {}));
function DependentSelectComputedEditor(_a) {
var binding = _a.binding;
var numbers = [];
for (var n = 0; n < binding.state.names.length; n++) {
numbers.push(n);
}
return (React.createElement("div", null,
React.createElement("table", null,
React.createElement("tbody", null,
React.createElement("tr", null,
React.createElement("td", null, "Select by index"),
React.createElement("td", null,
React.createElement(index_1.SelectNumber, {binding: binding.$(DependentSelectComputed.selectedIndex), options: numbers})
)),
React.createElement("tr", null,
React.createElement("td", null, "Select by name"),
React.createElement("td", null,
React.createElement(index_1.SelectString, {binding: binding.$(DependentSelectComputed.selectedName), options: binding.state.names})
)),
React.createElement("tr", null,
React.createElement("td", null, "Edit name"),
React.createElement("td", null,
React.createElement(index_1.TextInput, {binding: binding.$(DependentSelectComputed.names)
.$(Names.at(binding.state.selectedIndex))})
)),
React.createElement("tr", null,
React.createElement("td", null, "Radio buttons"),
React.createElement("td", null, binding.state.names.map(function (name) { return (React.createElement("div", {key: name},
React.createElement("label", null,
React.createElement(index_1.RadioButtonString, {binding: binding.$(DependentSelectComputed.selectedName), selectionValue: name}),
" ",
name)
)); }))))
)
));
}
exports.DependentSelectComputedEditor = DependentSelectComputedEditor;
//# sourceMappingURL=dependentSelectComputed.js.map