Merge pull request #24 from ngduc/basic-formatter-3

refactor: separated tabulator styles; refactored MultiValueFormatter;

CHANGELOG.md

@@ -1,10 +1,12 @@
-## [0.6.11] - 2018-11-13
+## [0.7.0] - 2018-11-13
 
 ### Added
-- MultiValuesFormatter
+- MultiValueFormatter
 ### Changed
-- BREAKING: moved "css" directory out of "lib" - usage: import "react-tabulator/styles.css";
-- fix: upgraded default styles.css to 4.1.1
+- BREAKING: moved "css" directory out of "lib" - usage: import "react-tabulator/styles.css"
+- BREAKING: separated required styles.css and tabulator theme css (import them separately)
+- upgraded tabulator to 4.1.2
+- fix: upgraded default styles.css to 4.1.2
 
 ## [0.6.6] - 2018-11-05
 

README.md

@@ -25,15 +25,16 @@ Plus:
 - Tslint
 - Jest-puppeteer for testing
 - React Cell Editors: DateEditor, etc.
-- React Cell Formatters: MultiValuesFormatter, etc.
+- React Cell Formatters: MultiValueFormatter, etc.
 - React Filters (TBD)
 
 ### 📦 Usage
 
 ```JS
 $ npm install react-tabulator
 
-import 'react-tabulator/lib/styles.css'; // default theme
+import 'react-tabulator/lib/styles.css'; // required styles
+import 'react-tabulator/lib/css/tabulator.min.css'; // theme
 import { ReactTabulator } from 'react-tabulator'; // for React 15.x, use import { React15Tabulator }
 
 <ReactTabulator data={data} />

demo/src/index.js

@@ -2,8 +2,9 @@ import React, { Component } from 'react';
 import { render } from 'react-dom';
 import './styles.css';
 
-// import '../../styles.css'; // default styles
-import '../../css/bootstrap/tabulator_bootstrap.min.css'; // use Theme(s)
+import '../../styles.css'; // required styles
+// import '../../css/tabulator.min.css';  // tabulator theme
+import '../../css/bootstrap/tabulator_bootstrap.min.css'; // bootstrap theme
 
 import { ReactTabulatorExample } from '../../lib';
 // import { ReactTabulator, ReactTabulatorExample } from '../../lib';

lib/ReactTabulatorExample.js

@@ -17,7 +17,7 @@ var _a;
 var React = require("react");
 var ReactTabulator_1 = require("./ReactTabulator");
 var DateEditor_1 = require("./editors/DateEditor");
-var MultiValuesFormatter_1 = require("./formatters/MultiValuesFormatter");
+var MultiValueFormatter_1 = require("./formatters/MultiValueFormatter");
 var columns = [
     { title: 'Name', field: 'name', width: 150 },
     { title: 'Age', field: 'age', align: 'left', formatter: 'progress' },
@@ -58,7 +58,7 @@ var editableColumns = [
         headerFilterParams: { values: colorOptions }
     },
     { title: 'Date Of Birth', field: 'dob', editor: DateEditor_1["default"], editorParams: { format: 'MM/dd/yyyy' } },
-    { title: 'Pets', field: 'pets', formatter: MultiValuesFormatter_1["default"] },
+    { title: 'Pets', field: 'pets', formatter: MultiValueFormatter_1["default"], formatterParams: { style: 'PILL' } },
     { title: 'Passed?', field: 'passed', align: 'center', formatter: 'tickCross', editor: true }
 ];
 var default_1 = /** @class */ (function (_super) {

lib/formatters/MultiValueFormatter.js

@@ -0,0 +1,26 @@
+"use strict";
+exports.__esModule = true;
+var React = require("react");
+var react_dom_1 = require("react-dom");
+var createCellEl = function () {
+    var el = document.createElement('div');
+    el.style.height = '100%';
+    return el;
+};
+// example: { title: 'Pets', field: 'pets', formatter: MultiValueFormatter, formatterParams: { style: 'PILL' } }
+// default style: comma separated plain text
+// other styles: TAG, PILL
+function default_1(cell, formatterParams, onRendered) {
+    var style = formatterParams.style || ''; // comma separated plain text
+    var arr = cell.getValue() || [];
+    var content = arr.join(', ');
+    if (style === 'PILL') {
+        content = (React.createElement(React.Fragment, null, arr.map(function (value) { return (React.createElement("span", null, value)); })));
+    }
+    var el = createCellEl();
+    el.className = 'multi-value-formatter-content';
+    el.title = arr.join(', ');
+    react_dom_1.render(content, el);
+    return el;
+}
+exports["default"] = default_1;