Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generic Bootstrap Grid wrapper for ReactJS, WIP
(function (exports, DOM, undefined) {
'use strict';
var namespace = 'ReactLayout';
// Data Column = Column { size :: Integer, component :: ReactComponent }
//-- Constants ------------------------------------------------------
var COLUMNS_TOTAL = 12,
CONTAINER = 'row-fluid',
CELL = 'span';
//-- Export ---------------------------------------------------------
exports[namespace] = {
Column: Column,
Row: Row
};
//-- Module ---------------------------------------------------------
//+ Row :: [Column] -> Maybe ReactDOM
function Row(cs) {
assert_length_to_total(length(cs));
return DOM.div({className:CONTAINER}, cs.map(to_HTML));
}
//+ Column :: String -> ReactComponent -> Column
function Column(s, c) { return {size:s, component:c}; }
//-- Errors ---------------------------------------------------------
//+ error_column_length :: Integer -> Maybe IO ()
function error_column_length(l) {
throw ['Column','length','is',l,'should','be',COLUMNS_TOTAL].join(' ');
}
//-- Asserts --------------------------------------------------------
//+ assert_length_to_total :: Integer -> Maybe IO ()
function assert_length_to_total(int) {
if(!equals_total(int)) { error_column_length(int); }
function equals_total(l) { return (l === COLUMNS_TOTAL); }
}
//-- Helpers --------------------------------------------------------
//+ pluck :: Object => String -> Object -> A
function pluck(string) {
return function pluck_from(object) { return object[string]; };
}
//+ length :: [Column] -> Integer
function length(cs) {
return cs.map(pluck('size')).reduce(add, 0);
function add(x,y) { return x+y; }
}
//+ to_HTML :: Column -> ReactDOM
function to_HTML(c) {
return DOM.div({className:to_class(c.size)}, c.component);
function to_class(x) { return CELL+x }
}
}(window, React.DOM));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.