102 | {/* ScrollbarSize gives the code information about how wide the scroll bar is */ } 103 | 104 | 105 | {/* put the header in place */} 106 | 107 | 108 | {/* put the header in place */} 109 | 110 | 111 | {/* Overlay Data Components: if needed, put the date picker / menu picker overlay in place */} 112 | {(this.props.GridStore.showDatePicker||this.props.GridStore.showDateTimePicker) && } 113 | {(this.props.GridStore.showMenuPicker) && } 114 | 115 | {/* Column Header help text on mouse over */} 116 | 117 | 118 | {/* VirtualList renders only the rows that are visible */ } 119 | 125 |

126 | 137 |

} 138 | /> 139 | 140 | {/* Either keeps size and show a box to fill unused space, or just shrink the grid vertical space used. */ } 141 | {this.props.gridHighCollapse === false && ui.collapseAvailable>0 && 142 |

157 | } 158 | 159 | {/* Draw a bottom line if it is needed. */ } 160 | {ui.showBottomGridLine && // needs the 2x border wide added because this is only a top border 161 |

168 | } 169 | 170 | {/* Render any tools that are enabled. */ } 171 | 172 | 173 |

174 | ); 175 | } 176 | }) 177 | 178 | 179 | 180 | export default GridBody; -------------------------------------------------------------------------------- /src/GridCell.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import VirtualList from 'react-tiny-virtual-list'; 4 | import { observable, action } from 'mobx'; 5 | import { observer } from 'mobx-react'; 6 | import ScrollbarSize from 'react-scrollbar-size'; 7 | import autoBind from 'react-autobind'; 8 | import ReactTooltip from 'react-tooltip'; 9 | 10 | import moment from 'moment'; 11 | import accounting from 'accounting'; 12 | 13 | import DatePicker from 'react-datepicker'; 14 | import 'react-datepicker/dist/react-datepicker.css'; 15 | import isEmpty from './util/isEmpty'; 16 | 17 | import EasyBool from './easyTools/EasyBool'; 18 | 19 | window.reactJsonGridFocusInput = function(elem){ 20 | elem.focus(); 21 | elem.setSelectionRange(elem.value.length,elem.value.length); 22 | } 23 | 24 | 25 | @observer class GridCell extends React.Component { 26 | constructor(props) { super(props); autoBind(this); } 27 | 28 | @action isEditDisabled(){ 29 | var ed=(this.props.uiMath.editDisabled === true); 30 | if( (this.props.GridStore.colDefListByKey && 31 | this.props.GridStore.colDefListByKey[this.props.objKey] && // edit disabled by column 32 | this.props.GridStore.colDefListByKey[this.props.objKey].editDisabled === true)){ 33 | ed=true; 34 | } 35 | return ed; 36 | } 37 | 38 | @action onClick(evt) 39 | { 40 | this.props.GridStore.autoFocus=true; // if we edit, auto focus. 41 | 42 | if (this.props.x === this.props.GridStore.cursor.x && // clicked the currently highlighted cell 43 | this.props.y === this.props.GridStore.cursor.y && // clicked the currently highlighted cell 44 | this.isEditDisabled() === false // edit is allowable 45 | ) { 46 | this.props.GridStore.cursor.editX = this.props.x; 47 | this.props.GridStore.cursor.editY = this.props.y; 48 | this.props.GridStore.cursor.editObjKey = this.props.objKey; 49 | this.props.GridStore.curEditingValue = this.props.cellData; 50 | 51 | // check for dates and menus 52 | if (this.props.GridStore.colDefListByKey && this.props.GridStore.colDefListByKey[this.props.objKey] && this.props.GridStore.colDefListByKey[this.props.objKey].easyDate){ 53 | this.props.GridStore.showDatePicker=true; 54 | } 55 | else if (this.props.GridStore.colDefListByKey && this.props.GridStore.colDefListByKey[this.props.objKey] && this.props.GridStore.colDefListByKey[this.props.objKey].easyDateTime){ 56 | this.props.GridStore.showDateTimePicker=true; 57 | } 58 | else if (this.props.GridStore.colDefListByKey && this.props.GridStore.colDefListByKey[this.props.objKey] && this.props.GridStore.colDefListByKey[this.props.objKey].easyMenu) { 59 | this.props.GridStore.showMenuPicker = true; 60 | } 61 | else if (this.props.GridStore.colDefListByKey && this.props.GridStore.colDefListByKey[this.props.objKey] && this.props.GridStore.colDefListByKey[this.props.objKey].overlayComp) { 62 | this.props.GridStore.showOverlayComp = true; 63 | } 64 | } 65 | else{ 66 | this.props.GridStore.cursor.x = this.props.x; 67 | this.props.GridStore.cursor.y = this.props.y; 68 | if (this.props.GridStore.cursor.x < 0) { this.props.GridStore.cursor.x=0; } // can't edit row headers 69 | } 70 | } 71 | 72 | @action onKeyDownWhenViewing(e) 73 | { 74 | this.props.GridStore.autoFocus=true; // if we edit, auto focus it. 75 | 76 | var editDisabled = this.isEditDisabled(); 77 | 78 | if (this.props.x !== this.props.GridStore.cursor.editX || 79 | this.props.y !== this.props.GridStore.cursor.editY) { 80 | if (e.keyCode == '37' || e.keyCode == '38' || e.keyCode == '39' || e.keyCode == '40' ) { // arrows 81 | this.props.GridStore.cellMoveKey(e); 82 | } 83 | else if (e.keyCode == '13') { // enter 84 | if(e.shiftKey) { 85 | // back-enter 86 | this.props.GridStore.cursor.y--; 87 | if (this.props.GridStore.cursor.y < 0 ) { 88 | this.props.GridStore.cursor.y = 0; 89 | } 90 | } 91 | else{ 92 | // forward-enter 93 | this.props.GridStore.cursor.y++; 94 | if (this.props.GridStore.cursor.y > this.props.GridStore.cursor.maxY) { 95 | this.props.GridStore.cursor.y = 0; 96 | } 97 | } 98 | } 99 | else if (e.keyCode == '9') { // tab 100 | if(e.shiftKey) { 101 | // back tab 102 | this.props.GridStore.cursor.x--; 103 | if (this.props.GridStore.cursor.x < 0) { 104 | this.props.GridStore.cursor.x = this.props.GridStore.cursor.maxX; 105 | this.props.GridStore.cursor.y--; 106 | } 107 | if (this.props.GridStore.cursor.y < 0) { 108 | this.props.GridStore.cursor.y = 0; 109 | } 110 | } 111 | else{ 112 | // forward tab 113 | this.props.GridStore.cursor.x++; 114 | if (this.props.GridStore.cursor.x > this.props.GridStore.cursor.maxX) { 115 | this.props.GridStore.cursor.x = 0; 116 | this.props.GridStore.cursor.y++; 117 | } 118 | if (this.props.GridStore.cursor.y > this.props.GridStore.cursor.maxY) { 119 | this.props.GridStore.cursor.y = 0; 120 | } 121 | } 122 | } 123 | else if (e.keyCode == '32' && editDisabled === false) { // space 124 | // cell edit 125 | this.props.GridStore.cursor.editX = this.props.x; 126 | this.props.GridStore.cursor.editY = this.props.y; 127 | this.props.GridStore.cursor.editObjKey = this.props.objKey; 128 | this.props.GridStore.curEditingValue = this.props.GridStore.getDataRespectingPivotAtEditCursor(this.props.data); 129 | // pop overlay editors if needed 130 | if (this.props.GridStore.colDefListByKey && this.props.GridStore.colDefListByKey[this.props.objKey] && this.props.GridStore.colDefListByKey[this.props.objKey].easyDate){ 131 | this.props.GridStore.showDatePicker=true; 132 | } 133 | else if (this.props.GridStore.colDefListByKey && this.props.GridStore.colDefListByKey[this.props.objKey] && this.props.GridStore.colDefListByKey[this.props.objKey].easyDateTime){ 134 | this.props.GridStore.showDateTimePicker=true; 135 | } 136 | else if (this.props.GridStore.colDefListByKey && this.props.GridStore.colDefListByKey[this.props.objKey] && this.props.GridStore.colDefListByKey[this.props.objKey].easyMenu) { 137 | this.props.GridStore.showMenuPicker = true; 138 | } 139 | else if (this.props.GridStore.colDefListByKey && this.props.GridStore.colDefListByKey[this.props.objKey] && this.props.GridStore.colDefListByKey[this.props.objKey].overlayComp) { 140 | this.props.GridStore.showOverlayComp = true; 141 | } 142 | } 143 | else if (e.keyCode == '46' && editDisabled === false) { // delete: instant kill! 144 | this.props.GridStore.onChangePivotWrapper(this.props.x, this.props.y, this.props.objKey, ''); 145 | } 146 | else{ 147 | if (e.key.length === 1 && editDisabled === false){ // must be a char 148 | // not that the react code calls a javascript function to make sure the cursor goes to the end of the input so you can keep typing naturally. 149 | this.props.GridStore.cursor.editX = this.props.x; 150 | this.props.GridStore.cursor.editY = this.props.y; 151 | this.props.GridStore.cursor.editObjKey = this.props.objKey; 152 | if (this.props.GridStore.colDefListByKey && this.props.GridStore.colDefListByKey[this.props.objKey] && this.props.GridStore.colDefListByKey[this.props.objKey].easyDate){ 153 | this.props.GridStore.showDatePicker=true; 154 | } 155 | else if (this.props.GridStore.colDefListByKey && this.props.GridStore.colDefListByKey[this.props.objKey] && this.props.GridStore.colDefListByKey[this.props.objKey].easyDateTime){ 156 | this.props.GridStore.showDateTimePicker=true; 157 | } 158 | else if (this.props.GridStore.colDefListByKey && this.props.GridStore.colDefListByKey[this.props.objKey] && this.props.GridStore.colDefListByKey[this.props.objKey].easyMenu) { 159 | this.props.GridStore.showMenuPicker = true; 160 | } 161 | else if (this.props.GridStore.colDefListByKey && this.props.GridStore.colDefListByKey[this.props.objKey] && this.props.GridStore.colDefListByKey[this.props.objKey].overlayComp) { 162 | this.props.GridStore.showOverlayComp = true; 163 | } 164 | else{ 165 | this.props.GridStore.curEditingValue = ''+e.key; 166 | } 167 | } 168 | } 169 | } 170 | e.stopPropagation(); 171 | e.preventDefault(); 172 | } 173 | 174 | 175 | @action valChange(evt){ 176 | this.props.GridStore.curEditingValue = evt.target.value; 177 | } 178 | 179 | @action valChangeDate(value) { 180 | this.props.GridStore.curEditingValue = value; 181 | } 182 | 183 | 184 | @action endEdit() 185 | { 186 | if (this.props.GridStore.colDefListByKey && 187 | this.props.GridStore.colDefListByKey[this.props.objKey]) { 188 | if ( 189 | (this.props.GridStore.colDefListByKey[this.props.objKey].easyInt && !this.props.GridStore.curEditIsValidFor.isValidInt) || 190 | (this.props.GridStore.colDefListByKey[this.props.objKey].easyFloat && !this.props.GridStore.curEditIsValidFor.isValidFloat) || 191 | ( (this.props.GridStore.colDefListByKey[this.props.objKey].easyDollar || 192 | this.props.GridStore.colDefListByKey[this.props.objKey].easyEuro || 193 | this.props.GridStore.colDefListByKey[this.props.objKey].easyPound) 194 | && !this.props.GridStore.curEditIsValidFor.isValidFloat) 195 | ) { 196 | // value is not valid for the field definition. Do not make the change. 197 | this.props.GridStore.cursor.editX = -1; 198 | this.props.GridStore.cursor.editY = -1; 199 | return; 200 | } 201 | } 202 | 203 | this.props.GridStore.onChangePivotWrapper(this.props.x, this.props.y, this.props.objKey, this.props.GridStore.curEditingValue); 204 | this.props.GridStore.cursor.editX = -1; 205 | this.props.GridStore.cursor.editY = -1; 206 | } 207 | 208 | @action onKeyDownWhenEditing(e) { 209 | 210 | if (e.keyCode == '13') { 211 | // commit the value 212 | this.endEdit(); 213 | // move the cursor 214 | if(e.shiftKey) { 215 | // back-enter 216 | this.props.GridStore.cursor.y--; 217 | if (this.props.GridStore.cursor.y < 0 ) { 218 | this.props.GridStore.cursor.y = 0; 219 | } 220 | } 221 | else{ 222 | // forward-enter 223 | this.props.GridStore.cursor.y++; 224 | if (this.props.GridStore.cursor.y > this.props.GridStore.cursor.maxY) { 225 | this.props.GridStore.cursor.y = 0; 226 | } 227 | } 228 | 229 | // start editing new location 230 | this.props.GridStore.cursor.editX = this.props.GridStore.cursor.x; 231 | this.props.GridStore.cursor.editY = this.props.GridStore.cursor.y; 232 | this.props.GridStore.curEditingValue = this.props.GridStore.getDataRespectingPivotAtEditCursor(this.props.data); 233 | } 234 | else if (e.keyCode == '9') { // tab 235 | // commit the value 236 | this.endEdit(); 237 | 238 | // move the cursor 239 | if(e.shiftKey) { 240 | // back tab 241 | this.props.GridStore.cursor.x--; 242 | if (this.props.GridStore.cursor.x < 0) { 243 | this.props.GridStore.cursor.x = this.props.GridStore.cursor.maxX; 244 | this.props.GridStore.cursor.y--; 245 | } 246 | if (this.props.GridStore.cursor.y < 0) { 247 | this.props.GridStore.cursor.y = 0; 248 | } 249 | } 250 | else{ 251 | // forward tab 252 | this.props.GridStore.cursor.x++; 253 | if (this.props.GridStore.cursor.x > this.props.GridStore.cursor.maxX) { 254 | this.props.GridStore.cursor.x = 0; 255 | this.props.GridStore.cursor.y++; 256 | } 257 | if (this.props.GridStore.cursor.y > this.props.GridStore.cursor.maxY) { 258 | this.props.GridStore.cursor.y = 0; 259 | } 260 | } 261 | 262 | // start editing the next one 263 | this.props.GridStore.cursor.editX = this.props.GridStore.cursor.x; 264 | this.props.GridStore.cursor.editY = this.props.GridStore.cursor.y; 265 | this.props.GridStore.curEditingValue = this.props.GridStore.getDataRespectingPivotAtEditCursor(this.props.data); 266 | this.props.GridStore.autoFocus=true; 267 | e.stopPropagation(); 268 | e.preventDefault(); 269 | } 270 | else if (e.keyCode == '27') { 271 | // cell edit abort 272 | this.props.GridStore.cursor.editX = -1; 273 | this.props.GridStore.cursor.editY = -1; 274 | } 275 | 276 | } 277 | 278 | 279 | renderZero(tval) { 280 | if (0 === tval) { return '0'; } 281 | else if ('false' === ''+tval) { return 'false'; } 282 | else if ('true' === ''+tval) { return 'true'; } 283 | else { return tval } 284 | } 285 | 286 | 287 | 288 | render() { 289 | 290 | // Build Render Style object 291 | var style={...this.props.styleCell,boxSizing: 'content-box'}; 292 | var styleIn={...this.props.styleInput,boxSizing: 'content-box'}; 293 | var isSelected = false; 294 | 295 | if (this.props.GridStore.selectionBounds.l <= this.props.x && 296 | this.props.GridStore.selectionBounds.r >= this.props.x && 297 | this.props.GridStore.selectionBounds.t <= this.props.y && 298 | this.props.GridStore.selectionBounds.b >= this.props.y 299 | ) { 300 | // CSSNOTE! 301 | style.zIndex = 5; 302 | isSelected = true; 303 | } 304 | 305 | if(!this.props.isFirstColumn){ 306 | style.marginLeft=-1*this.props.uiMath.borderWide; 307 | styleIn.marginLeft=-1*this.props.uiMath.borderWide; 308 | } 309 | else{ 310 | style.marginLeft=0; 311 | styleIn.marginLeft=0; 312 | } 313 | 314 | // over ride width if needed 315 | if (this.props.GridStore.colDefListByKey[this.props.objKey]) { // is there a colDef that uses this key? 316 | var curColWide = style.width; 317 | if(this.props.GridStore.colDefListByKey[this.props.objKey].forceColWide){ 318 | curColWide = this.props.GridStore.colDefListByKey[this.props.objKey].forceColWide; 319 | } 320 | style.width = curColWide; 321 | } 322 | 323 | // render data standard 324 | var renderPlan = ''; 325 | var isFocusNeeded = this.props.GridStore.autoFocus && this.props.x === this.props.GridStore.cursor.x && this.props.y === this.props.GridStore.cursor.y; 326 | 327 | 328 | var assumeEditOk=true; 329 | if (this.props.GridStore.colDefListByKey && 330 | this.props.GridStore.colDefListByKey[this.props.objKey] && 331 | (this.props.GridStore.colDefListByKey[this.props.objKey].easyBool===true || // boolean doesn't need the editor 332 | this.props.GridStore.colDefListByKey[this.props.objKey].easyMenu===true ) // menu doesn't need the editor 333 | ){ 334 | assumeEditOk = false; 335 | } 336 | if(this.isEditDisabled()){ assumeEditOk=false; } 337 | 338 | //=== Editor Handling 339 | if (assumeEditOk && 340 | this.props.x === this.props.GridStore.cursor.x && // cur render cell is cur cell 341 | this.props.y === this.props.GridStore.cursor.y && // cur render cell is cur cell 342 | this.props.x === this.props.GridStore.cursor.editX && // cur cell is edit cell 343 | this.props.y === this.props.GridStore.cursor.editY // cur cell is edit cell 344 | ) 345 | { 346 | styleIn.verticalAlign='top'; 347 | styleIn.width = style.width; // use the column defined width override if needed. 348 | 349 | // check for easy column tools 350 | if(this.props.GridStore.colDefListByKey && 351 | this.props.GridStore.colDefListByKey[this.props.objKey]){ 352 | 353 | // check validation 354 | if ( 355 | (this.props.GridStore.colDefListByKey[this.props.objKey].easyInt && !this.props.GridStore.curEditIsValidFor.isValidInt) || 356 | (this.props.GridStore.colDefListByKey[this.props.objKey].easyFloat && !this.props.GridStore.curEditIsValidFor.isValidFloat) || 357 | ((this.props.GridStore.colDefListByKey[this.props.objKey].easyDollar || 358 | this.props.GridStore.colDefListByKey[this.props.objKey].easyEuro || 359 | this.props.GridStore.colDefListByKey[this.props.objKey].easyPound) && !this.props.GridStore.curEditIsValidFor.isValidFloat) 360 | ){ 361 | styleIn.outline="5px red dashed"; 362 | } 363 | 364 | // check right alignment 365 | if ( 366 | (this.props.GridStore.colDefListByKey[this.props.objKey].easyInt) || 367 | (this.props.GridStore.colDefListByKey[this.props.objKey].easyFloat) || 368 | ((this.props.GridStore.colDefListByKey[this.props.objKey].easyDollar || 369 | this.props.GridStore.colDefListByKey[this.props.objKey].easyEuro || 370 | this.props.GridStore.colDefListByKey[this.props.objKey].easyPound)) 371 | ) { 372 | styleIn.textAlign = "right"; 373 | } 374 | } 375 | 376 | var curDisplayVal = this.props.GridStore.curEditingValue; 377 | if(null === curDisplayVal){ curDisplayVal = this.props.cellData;} 378 | 379 | // check for easy Date 380 | if (this.props.GridStore.colDefListByKey && 381 | this.props.GridStore.colDefListByKey[this.props.objKey] && 382 | this.props.GridStore.colDefListByKey[this.props.objKey].easyDate){ 383 | renderPlan=

{curDisplayVal}

384 | } 385 | else if (this.props.GridStore.colDefListByKey && 386 | this.props.GridStore.colDefListByKey[this.props.objKey] && 387 | this.props.GridStore.colDefListByKey[this.props.objKey].easyDateTime) { 388 | renderPlan=

{curDisplayVal}

389 | } 390 | else if (this.props.GridStore.colDefListByKey && 391 | this.props.GridStore.colDefListByKey[this.props.objKey] && 392 | this.props.GridStore.colDefListByKey[this.props.objKey].easyMenu) { 393 | renderPlan=

{curDisplayVal}

394 | } 395 | else{ 396 | // use the normal text input editor 397 | var cellClassName = this.props.GridStore.classInput; 398 | 399 | renderPlan = 400 | input && window.reactJsonGridFocusInput(input)} 406 | onBlur={this.endEdit} 407 | /> 408 | } 409 | } 410 | else{ 411 | //===== VIEW SIDE 412 | var altText=''; 413 | 414 | var renderVal = '' + (this.renderZero(this.props.cellData)||''); 415 | if (this.props.GridStore.colDefListByKey && 416 | this.props.GridStore.colDefListByKey[this.props.objKey] 417 | ){ 418 | // we have a custom view component. Render it. 419 | // it may want to change values directly, so give it everything it needs 420 | 421 | var styleByCol={}; 422 | if(this.props.x>=0){ 423 | styleByCol = (this.props.GridStore.colDefListByKey[this.props.objKey].styleCell||{}) 424 | } 425 | 426 | // check right alignment 427 | if ( 428 | (this.props.GridStore.colDefListByKey[this.props.objKey].easyInt) || 429 | (this.props.GridStore.colDefListByKey[this.props.objKey].easyFloat) || 430 | (this.props.GridStore.colDefListByKey[this.props.objKey].easyDate) || 431 | (this.props.GridStore.colDefListByKey[this.props.objKey].easyDateTime) || 432 | ((this.props.GridStore.colDefListByKey[this.props.objKey].easyDollar || 433 | this.props.GridStore.colDefListByKey[this.props.objKey].easyEuro || 434 | this.props.GridStore.colDefListByKey[this.props.objKey].easyPound)) 435 | ) { 436 | style.textAlign = "right"; 437 | // check validation 438 | if ( 439 | (this.props.GridStore.colDefListByKey[this.props.objKey].easyInt && !this.props.GridStore.checkValidInt(this.props.cellData) ) || 440 | (this.props.GridStore.colDefListByKey[this.props.objKey].easyFloat && !this.props.GridStore.checkValidFloat(this.props.cellData) ) || 441 | ((this.props.GridStore.colDefListByKey[this.props.objKey].easyDollar || 442 | this.props.GridStore.colDefListByKey[this.props.objKey].easyEuro || 443 | this.props.GridStore.colDefListByKey[this.props.objKey].easyPound) && !this.props.GridStore.checkValidFloat(this.props.cellData) ) 444 | ) { 445 | style.outline = "3px orange dashed"; 446 | } 447 | 448 | // since we're here: format the money: 449 | if (this.props.GridStore.colDefListByKey[this.props.objKey].easyDollar) { 450 | renderVal = accounting.formatMoney(this.props.cellData, "$", 2, ",", "."); 451 | } 452 | else if (this.props.GridStore.colDefListByKey[this.props.objKey].easyEuro) { 453 | renderVal = accounting.formatMoney(this.props.cellData, "€", 2, ".", ","); 454 | } 455 | else if (this.props.GridStore.colDefListByKey[this.props.objKey].easyPound) { 456 | renderVal = accounting.formatMoney(this.props.cellData, "£", 2, ".", ","); 457 | } 458 | // since we're here: highlight invalid dates & times 459 | if (this.props.GridStore.colDefListByKey[this.props.objKey].easyDate) { 460 | var parsed = moment(this.props.cellData, this.props.uiMath.formatDate); 461 | if(!parsed.isValid){ 462 | style.outline = "3px orange dashed"; 463 | } 464 | else{ 465 | renderVal = parsed.format(this.props.uiMath.formatDate); 466 | } 467 | } 468 | else if (this.props.GridStore.colDefListByKey[this.props.objKey].easyDateTime) { 469 | var parsed = moment(this.props.cellData, this.props.uiMath.formatDate+' '+this.props.uiMath.formatTime); 470 | if(!parsed.isValid){ 471 | style.outline = "3px orange dashed"; 472 | } 473 | else{ 474 | renderVal = parsed.format(this.props.uiMath.formatDate+' '+this.props.uiMath.formatTime); 475 | } 476 | } 477 | 478 | } 479 | 480 | // check for custom renders 481 | if (this.props.GridStore.colDefListByKey[this.props.objKey].compCell){ 482 | renderVal = { 483 | React.cloneElement( 484 | this.props.GridStore.colDefListByKey[this.props.objKey].compCell, 485 | { 486 | x: (this.props.GridStore.pivotOn || 0 === this.props.GridStore.pivotOn) ? this.props.y : this.props.x, 487 | y: (this.props.GridStore.pivotOn || 0 === this.props.GridStore.pivotOn) ? this.props.x : this.props.x, 488 | objKey: this.props.objKey, 489 | cellData: this.props.cellData, 490 | id: this.props.id+'-comp', 491 | onChange: this.props.onChange , 492 | } 493 | ) 494 | }; 495 | } 496 | 497 | // handle easyBool 498 | if (this.props.GridStore.colDefListByKey[this.props.objKey].easyBool) { 499 | 500 | var disableEdit = this.isEditDisabled(); 501 | 502 | // note that the false || 0 check is required to pivot on the 0th column. 503 | renderVal = 511 | } 512 | 513 | } 514 | 515 | 516 | 517 | // build the className and style strings 518 | var cellClassName=''; 519 | var dataClassName=''; 520 | var finalStyleCell={}; 521 | var finalStyleData={}; 522 | 523 | if(this.props.x===-1){ 524 | // this is a row header. Precedence is classHeaderCell, classRowHeaderCell 525 | cellClassName = (this.props.GridStore.classHeaderCell||'')+' '+(this.props.GridStore.classRowHeaderCell||''); // header + rowHeader cell 526 | dataClassName = (this.props.GridStore.classHeaderData||'')+' '+(this.props.GridStore.classRowHeaderData||''); // header + rowHeader data 527 | 528 | var rowKey = this.props.uiMath.rowHeaderList[this.props.y]; // add column specifications 529 | if(this.props.GridStore.colDefListByKey && this.props.GridStore.colDefListByKey[rowKey]){ 530 | cellClassName = cellClassName +' '+ (this.props.GridStore.colDefListByKey[rowKey].classHeaderCell||''); 531 | dataClassName = dataClassName +' '+ (this.props.GridStore.colDefListByKey[rowKey].classHeaderData||''); 532 | } 533 | 534 | var defaultHeaderStyle ={}; 535 | if(isEmpty(this.props.GridStore.styleHeaderCell) && isEmpty(this.props.GridStore.classHeaderCell) && isEmpty(this.props.GridStore.styleRowHeaderCell)){ 536 | defaultHeaderStyle = {backgroundColor: '#F3F3F3',textAlign:'center'}; 537 | } 538 | 539 | finalStyleCell = {...defaultHeaderStyle,...this.props.GridStore.styleHeaderCell,...this.props.GridStore.styleRowHeaderCell,...style}; // make the grid styling override the user styling 540 | finalStyleData = {...this.props.GridStore.styleHeaderData,...this.props.GridStore.styleRowHeaderData}; // just user stying on data 541 | 542 | if (this.props.GridStore.colDefListByKey[rowKey] && this.props.GridStore.colDefListByKey[rowKey].altText) { 543 | altText = this.props.GridStore.colDefListByKey[rowKey ].altText; 544 | } 545 | 546 | } 547 | else{ 548 | // this is a normal row 549 | cellClassName = cellClassName+' '+this.props.GridStore.classCell; // cell 550 | dataClassName = dataClassName+' '+this.props.GridStore.classData; // data 551 | finalStyleCell = {...this.props.GridStore.styleCell,...style}; // make the grid styling override the user styling 552 | finalStyleData = {...this.props.GridStore.styleData}; // just user stying on data 553 | 554 | if(this.props.y % 2 === 1){ 555 | cellClassName = cellClassName+' '+this.props.GridStore.classCellOddRow; // cell 556 | dataClassName = dataClassName+' '+this.props.GridStore.classDataOddRow; // data 557 | finalStyleCell = {...finalStyleCell,...this.props.GridStore.styleCellOddRow}; // make the grid styling override the user styling 558 | finalStyleData = {...finalStyleData,...this.props.GridStore.styleDataOddRow}; // make the grid styling override the user styling 559 | } 560 | } 561 | 562 | if(isSelected){ 563 | var defaultSelection = {}; 564 | if(isEmpty(this.props.GridStore.styleSelected) && isEmpty(this.props.GridStore.classSelected)){ 565 | defaultSelection = {backgroundColor: 'lightblue'}; 566 | } 567 | finalStyleCell = { ...finalStyleCell, ...defaultSelection, ...this.props.GridStore.styleSelected}; 568 | cellClassName = cellClassName+' '+this.props.GridStore.classSelected; 569 | } 570 | 571 | //--- handle row header help text - currently broken! 572 | var helpComp; 573 | if (this.props.x === -1 && this.props.GridStore.colDefListByKey && 574 | this.props.GridStore.colDefListByKey[rowKey] && 575 | this.props.GridStore.colDefListByKey[rowKey].altText 576 | ) { 577 | // handle alt text. Note that the 'text' could be a component. regular header 578 | renderPlan = 579 |

div && isFocusNeeded && div.focus()} 585 | onKeyDown={this.onKeyDownWhenViewing}> 586 | 588 |

{renderVal}

589 | 590 |

591 | } 592 | else{ 593 | renderPlan =

div && isFocusNeeded && div.focus()} 599 | onKeyDown={this.onKeyDownWhenViewing}> 600 |

{renderVal}

601 |

; 602 | } 603 | } 604 | 605 | return(renderPlan); 606 | 607 | } 608 | } 609 | /*** 610 | * 611 | ASDF{altText} 612 | 613 | 614 | */ 615 | 616 | 617 | export default GridCell; 618 | -------------------------------------------------------------------------------- /src/GridHeader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { observable, action } from 'mobx'; 4 | import { observer } from 'mobx-react'; 5 | import autoBind from 'react-autobind'; 6 | import ReactTooltip from 'react-tooltip'; 7 | import isEmpty from './util/isEmpty'; 8 | 9 | 10 | 11 | @observer class GridHeader extends React.Component { 12 | constructor(props) { super(props); autoBind(this); } 13 | 14 | render(){ 15 | 16 | var header=[]; 17 | var marginOffset=0; 18 | var ui = this.props.uiMath; 19 | 20 | 21 | 22 | if (!this.props.colHeaderHide && !ui.forceColHeaderHide) { // provide a header row. 23 | for(var ctr=0;ctr0){ // this code should be removed when I'm confident it's not needed. Note left 5/2018 35 | if (this.props.GridStore.colDefListByKey[ this.props.GridStore.keyList[ctr-1] ].altText) { 36 | helpComp = this.props.GridStore.colDefListByKey[ this.props.GridStore.keyList[ctr-1] ].altText; 37 | } 38 | } 39 | */ 40 | var targetCol = 0; 41 | for (var tctr = 0; tctr < ui.colHeaderKeyList.length; tctr++) { 42 | if (''+ui.colHeaderKeyList[tctr] === ''+this.props.pivotOn) { targetCol = tctr; }// this is the header index matching the pivotOn key, offset by 1 due to leading '/' 43 | } 44 | colTitle = ''+this.props.GridStore.getDataRespectingPivotAtLocation(this.props.data, ctr - 1, targetCol - 1);// both -1 are to account for the '/' in the header row. 45 | } 46 | else{ 47 | //== NonPivot, With ColDefs 48 | gridColLocalStyle = (this.props.GridStore.colDefListByKey[keyName].styleHeader || {}); 49 | if (this.props.GridStore.colDefListByKey[keyName].widePx) { // width by px 50 | curColWide = this.props.GridStore.colDefListByKey[keyName].widePx; 51 | } 52 | else if (this.props.GridStore.colDefListByKey[keyName].widePct) { // width by pct 53 | curColWide = ui.rowWide * (this.props.GridStore.colDefListByKey[keyName].widePct / 100); 54 | } 55 | 56 | colTitle = ''+(this.props.GridStore.colDefListByKey[keyName].title || keyName); // if there is a title for the colDef use it, or just stick with thekey 57 | if (this.props.GridStore.colDefListByKey[keyName].altText) { 58 | // handle alt text. Note that the 'text' could be a component. regular header 59 | helpComp = this.props.GridStore.colDefListByKey[keyName].altText; 60 | } 61 | } 62 | } 63 | else{ 64 | if (this.props.pivotOn || this.props.pivotOn === 0) { 65 | // no column defs, Pivot On 66 | if(ctr>=0){ 67 | // find the index of the colDefListByKey item for the pivotOn target: 68 | var targetCol=0; 69 | for(var tctr=0;tctr 110 |

126 |

127 | {colTitle} 128 |

129 |

130 | ); 131 | marginOffset=-1*ui.borderWide; 132 | } 133 | } 134 | else{ // header is hidden so provide a top border line. The 2x borderWide extra width is needed because this is a top only border 135 | if(!ui.forceColHeaderHide){ 136 | header.push(

); 143 | } 144 | } 145 | 146 | return( 147 |

148 | {header} 149 |

150 | ); 151 | } 152 | } 153 | 154 | export default GridHeader; -------------------------------------------------------------------------------- /src/GridMath.jsx: -------------------------------------------------------------------------------- 1 | import autoBind from 'react-autobind'; 2 | 3 | 4 | 5 | class GridMath 6 | { // Just a class. Used to calculate valudes needed by the UI. 7 | constructor() { 8 | autoBind(this); 9 | } 10 | 11 | // javascript sucks at math 12 | makeValidInt(inputVal,defaultVal){ 13 | var res = (inputVal||defaultVal); // use a default instead of null. 14 | if(inputVal===0){res=inputVal;} // zero is clearly indistinguishabel from null, so if you meant zero, use zero not the default. 15 | if(res<0){ res = defaultVal; } // but negative numbers are just daft. Us the default after all. 16 | if( (''+res).includes('px') ){ console.log('Please pass numbers to Grid. You do not need to add "px" to anything. This number will be ignored. Using '+defaultVal+' instead.'); return defaultVal;} 17 | return Number(res); // oh, and make sure it's actully a number 18 | } 19 | 20 | // this used to all be in the render method of GridBody. 21 | // It was moved here so that it could be unit tested without having to render anything. 22 | calcGridBody(props,scrollBarWide) 23 | { 24 | if(props.debugGridMath){ 25 | console.log('do the math'); 26 | } 27 | 28 | // object to return 29 | var result={}; 30 | result.keyNames=[]; // always the keys present either from data inspection, or column definition 31 | result.showBottomGridLine=false; 32 | result.rowHeaderList=[]; 33 | result.colHeaderKeyList=[]; // when pivoted, this will NOT match the keyNames list. 34 | result.saveColumnForRowHeader=0; 35 | result.debugGridMath = props.debugGridMath; 36 | result.id = props.id || 'reactJsonGridId'; 37 | 38 | 39 | // math needs access to columns by key name. 40 | if (props.columnList && props.columnList.length>0) { 41 | result.colDefListByKey = {}; 42 | // make a map of keys to objects for easy access later. 43 | for (var clctr = 0; clctr < props.columnList.length; clctr++) { 44 | // THIS IS VITAL! Otherwise you risk one grid bleeding into another grid during test or object re-use. 45 | result.colDefListByKey[props.columnList[clctr].key] = Object.assign({},props.columnList[clctr]); 46 | } 47 | } 48 | else { 49 | result.colDefListByKey = {}; 50 | } 51 | 52 | // empty object checking & data cleanup 53 | if(!scrollBarWide){ result.notReady='missing scrollbar size'; return result } 54 | if(!props){ result.notReady='missing grid props'; return result } 55 | if(!props.data && !props.columnList){ result.notReady = "No Data Provided"; return result } 56 | 57 | // try to handle bad input data 58 | var data = props.data; 59 | if(!props.data && props.columnList){ data=[]; } 60 | 61 | if( (typeof data === 'string' || data instanceof String) || // array of strings 62 | (typeof data === 'number' && isFinite(data) ) || // array of numbers 63 | (typeof data === 'boolean') ){ // array of booleans 64 | result.notReady='Grid data must be an array'; return result; 65 | } 66 | 67 | // don't us foo.isArray because MobX and other arrays don't look like arrays, but are. 68 | if(!data.length && 0!==data.length){ result.notReady = "Input Data is not an array"; return result } 69 | if(data.length===0 && !props.columnList){ result.notReady = "No sample data supplied and no column definition list supplied. To start with an empty array, please define the columns."; return result; } 70 | if(data.length>0 && !props.columnList && 71 | (data[0]===null || typeof data[0] === 'undefined')){ 72 | result.notReady = "Falsey sample data supplied with no column definition list supplied."; return result; 73 | } 74 | 75 | // add validation that "px" should not be used, and only numbers should be passed as parameters. 76 | 77 | if( data[0] && typeof data[0] === 'object' && data[0].constructor === RegExp){ result.notReady = "Grids of RegExp objects are not supported."; return result; } 78 | if(typeof data[0] === 'symbol'){ result.notReady = "Grids of Symbol objects are not supported."; return result; } 79 | if(typeof data[0] === 'function'){ result.notReady = "Grids of Function objects are not supported."; return result; } 80 | 81 | // if it's an array of primitivs, make sure to treat it as if it were an array of objects 82 | if( (typeof data[0] === 'string' || data[0] instanceof String) || // array of strings 83 | (typeof data[0] === 'number' && isFinite(data[0]) ) || // array of numbers 84 | (typeof data[0] === 'boolean') ){ // array of booleans 85 | result.isPrimitiveData=true; 86 | } 87 | 88 | if(props.columnList && !props.columnList.length){ 89 | result.notReady = "If the columnList property is set, it must be an array with more that one object in it."; return result; 90 | } 91 | 92 | // validate any column data 93 | if (props.columnList) { 94 | if(result.isPrimitiveData && props.columnList ){ 95 | // make sure at least one column is 'data' for primitives 96 | var foundPrimCol = false; 97 | for (var cctr = 0; cctr < props.columnList.length;cctr++){ 98 | if(props.columnList[cctr].key==='data'){foundPrimCol=true;} 99 | } 100 | if(!foundPrimCol){ 101 | result.notReady = "When using a list of primitives, and a columnList, one of the column keys must be named 'data'. (Prim Lists use a hard coded key)"; return result; 102 | } 103 | } 104 | else{ 105 | // make sure at least one column key matches a data key. 106 | var foundPrimCol = false; 107 | for (var cctr = 0; cctr < props.columnList.length; cctr++) { 108 | if (data[0][ props.columnList[cctr].key ]) { foundPrimCol = true; } 109 | } 110 | if (!foundPrimCol) { 111 | result.notReady = "None of the key properties of your columnList match a key in your data. For arrray data, use integer keys. For object data you field names."; return result; 112 | } 113 | } 114 | } 115 | 116 | //TODO: make the data conversion and hold onto the converted data. 117 | // just give data available calls? onChange pass an object that can get the translation? 118 | // give an object that can be used to ask for translation at any time. 119 | // data.asJSON() 120 | // data.asCSV() 121 | // data.asPSV() 122 | 123 | // general info 124 | result.borderWide = this.makeValidInt(props.borderWide,1); 125 | result.padWide = this.makeValidInt(props.padWide, 3); 126 | 127 | result.gridWide = this.makeValidInt(props.gridWide,800); 128 | result.autoColWide = 0; // width of the default filled column, before weights 129 | result.fixedRowCount = props.rowCount; // what is the rowCount limit 130 | 131 | result.editDisabled = props.editDisabled || false; 132 | 133 | // how high is each row: user requested height does NOT include padding. 134 | result.rowHighNoPad = this.makeValidInt(props.rowHigh, 18); 135 | if (-1 === result.rowHighNoPad) { result.rowHighNoPad=23;} 136 | result.rowHighWithPad = this.makeValidInt(result.rowHighNoPad, 18); 137 | result.rowHighWithPad += result.padWide; 138 | result.rowHighWithPad += result.padWide; 139 | 140 | // column header height 141 | result.colHeaderHigh = (props.colHeaderHigh||-1); 142 | if (-1 === result.colHeaderHigh) { result.colHeaderHigh = 18; } 143 | if (props.colHeaderHide) { result.colHeaderHigh = 0; } // hide not wide or high 144 | 145 | // header height 146 | if (props.colHeaderHide || result.forceColHeaderHide) { // provide a header row. 147 | result.headerUsage=1; 148 | } 149 | else{ 150 | result.headerUsage=(result.colHeaderHigh+(2*result.padWide)+(2*result.borderWide)); 151 | } 152 | 153 | // tools height 154 | result.toolUsage = 0; 155 | if(props.showToolsAddCut || props.showToolsImpExp || props.showToolsPage || props.showToolsCustom){ 156 | result.toolUsage = 35; 157 | } 158 | 159 | // collapsed grid height 160 | result.collapseAmount=0; 161 | 162 | 163 | result.formatDate = props.formatDate||'YYYY-MM-DD'; 164 | result.formatTime = props.formatTime||'HH:mm'; 165 | var autoColCount=0; 166 | // look at the data to display and figure out what we need to do. 167 | if( (data && data.length>0) || (props.columnList && props.columnList.length>0) ){ // col def from colList or from data 168 | if(result.isPrimitiveData){ 169 | // ==== PRIMITIVES we have only one line of data to display 170 | result.keyNames.push('data'); 171 | if(props.pivotOn || props.pivotOn===0){ 172 | result.rowHeaderList=['data']; // one row header 173 | result.fixedRowCount = 1; // one row 174 | result.saveColumnForRowHeader=1; // will have a row header. 175 | result.forceColHeaderHide=true; // no column headers allowed on pivoted primitives. 176 | result.headerUsage=1; 177 | result.colHeaderKeyList=[]; // I mean it: no column headers allowed! 178 | result.colHeaderKeyList.push('\\'); // extra column on header for row headers. 179 | for(var pctr=0;pctr width 183 | result.dataHigh = 1; // 1 row hight 184 | } 185 | else{ 186 | result.colHeaderKeyList=result.keyNames; // just one header 187 | result.fixedRowCount = data.length; // amount of data is the rows 188 | result.dataWide = 1; // 1 item wide. 189 | result.dataHigh = data.length; // length items tall. 190 | } 191 | } 192 | else{ 193 | // ==== OBJECTS we have rows of objects to display 194 | if(props.pivotOn || props.pivotOn === 0){ // pivot the data using this key as the col header 195 | //---- PIVOTED FLOW 196 | result.colHeaderKeyList.push('\\'); // extra column on header for row headers. 197 | var temp = Object.keys(data[0]); 198 | for(var pctr=0;pctr data width. (data high handled later) 222 | } 223 | else{ // no column defs, inspect the first object. 224 | if(data[0].length){ // probably an array-look-alike. Use indexes 225 | for (var ictr = 0; ictr < data[0].length;ictr++){ 226 | result.keyNames.push(ictr); 227 | } 228 | result.colHeaderKeyList = result.keyNames; // keys => columns here 229 | result.dataWide = data[0].length; // keynames is width (data high handled later) 230 | } 231 | else{ // likely an object. Treat it normally. 232 | result.keyNames = Object.keys(data[0]); // pull the key names 233 | result.colHeaderKeyList = result.keyNames; // keys => columns here 234 | result.dataWide = result.keyNames.length; // keynames is width (data high handled later) 235 | } 236 | } 237 | 238 | result.fixedRowCount = data.length; // allow over-ride item count. 239 | result.dataHigh = result.fixedRowCount; 240 | } 241 | } 242 | 243 | // fix degenerate sizing 244 | if(result.gridWide < scrollBarWide + 10*result.keyNames.length){ 245 | result.gridWide = scrollBarWide + 10*result.keyNames.length; 246 | } 247 | result.rowWide = result.gridWide - (scrollBarWide||16); // how wide is each row. 248 | var availableWide = result.rowWide; // amount of space to allocate evenly 249 | 250 | autoColCount = result.colHeaderKeyList.length; 251 | if ((props.pivotOn || props.pivotOn === 0) && props.pivotRowHeaderWide && props.pivotRowHeaderWide!==-1){ 252 | // don't autoColCount the rowHeader 253 | autoColCount--; 254 | } 255 | 256 | // calculate wide row headers, respecting pivots 257 | if ((props.pivotOn || props.pivotOn === 0) && props.pivotRowHeaderWide && props.pivotRowHeaderWide !== -1) { 258 | result.pivotRowHeaderWide = Number(props.pivotRowHeaderWide); 259 | result.pivotRowHeaderWideTotal = result.pivotRowHeaderWide; 260 | result.pivotRowHeaderWideTotal += (result.borderWide); // each column minus right border amount 261 | result.pivotRowHeaderWideTotal += (result.padWide); // each column minus left pad amount 262 | result.pivotRowHeaderWideTotal += (result.padWide); // each column minus right pad amount 263 | availableWide -= result.pivotRowHeaderWideTotal; // allow a set width pivot header, but still only autocol for pivoted data 264 | } 265 | else { 266 | result.pivotRowHeaderWide = 0; 267 | result.pivotRowHeaderWideTotal = 0; 268 | } 269 | 270 | //==== now calculate column actual sizes and autocol size 271 | 272 | 273 | var fixedWide = 0; // becomes the new rowWide is all columns are specified 274 | var pctColCount = 0; // how many pct columns do we have. 275 | var cellBuffer = Number(result.borderWide) + Number(result.padWide) + Number(result.padWide); 276 | var change = 0; 277 | if (props.columnList && result.colHeaderKeyList.length && !props.pivotOn && props.pivotOn!==0){ // only autosize allowed on pivoted data 278 | autoColCount = 0; // number of columns that need auto width, i.e. column defs without a pct or px 279 | 280 | //--- round 1: handle the fixed px width columns 281 | for (var cctr = 0; cctr < result.colHeaderKeyList.length;cctr++){ 282 | change=0; 283 | 284 | if (result.colDefListByKey[result.colHeaderKeyList[cctr]]) { // is there a colDef that uses this key? 285 | if (result.colDefListByKey[result.colHeaderKeyList[cctr]].widePx) { 286 | change = Number(result.colDefListByKey[result.colHeaderKeyList[cctr]].widePx); // user requested size 287 | result.colDefListByKey[result.colHeaderKeyList[cctr]].forceColWide = change; // goal user area, without buffer 288 | change += cellBuffer; // actual cell size = user requested + cell buffer (padding and border) 289 | fixedWide+=change; 290 | availableWide -= change; 291 | } 292 | else if (result.colDefListByKey[result.colHeaderKeyList[cctr]].widePct) { 293 | // wait for later until we know all the fixed widths. 294 | pctColCount++; 295 | } 296 | else{ 297 | autoColCount++; // take away a default amount for each autocol 298 | } 299 | } 300 | } 301 | //-- now hold space for autocol columns and cell buffers 302 | availableWide -= (autoColCount * (5 + cellBuffer)) + (pctColCount*cellBuffer); 303 | //--- round 2: handle the pct width columns 304 | for (var cctr = 0; cctr < result.colHeaderKeyList.length; cctr++) { 305 | //change = 0; 306 | 307 | if (result.colDefListByKey[result.colHeaderKeyList[cctr]]) { // is there a colDef that uses this key? 308 | if (result.colDefListByKey[result.colHeaderKeyList[cctr]].widePx) { 309 | // already done 310 | } 311 | else if (result.colDefListByKey[result.colHeaderKeyList[cctr]].widePct) { 312 | change = (availableWide 313 | * (Number(result.colDefListByKey[result.colHeaderKeyList[cctr]].widePct) / 100)); 314 | // user area as pct of availble space. cell buffer was already removed, and so should not be in the user area number 315 | result.colDefListByKey[result.colHeaderKeyList[cctr]].forceColWide = change - cellBuffer; 316 | } 317 | else { 318 | // already done 319 | } 320 | } 321 | } 322 | 323 | } 324 | 325 | 326 | //--- no column width data 327 | if(autoColCount>0){ 328 | result.autoColWide = 329 | ( availableWide - // total width 330 | result.borderWide // minus left most border bar 331 | // scrollbar already handled by basin on rowWide. 332 | ) / (autoColCount) 333 | } 334 | else{ result.autoColWide=0; } 335 | result.autoColWideWithBorderAndPad = result.autoColWide; 336 | result.autoColWide -= (result.borderWide); // each column minus right border amount 337 | result.autoColWide -= (result.padWide); // each column minus left pad amount 338 | result.autoColWide -= (result.padWide); // each column minus right pad amount 339 | 340 | // calculate the used row width 341 | result.rowWide= fixedWide + (result.autoColWideWithBorderAndPad * autoColCount) - result.borderWide; 342 | 343 | // grid height - can't calculate this until dataHigh is defined due to pivot concerns 344 | var testStyleHeight = null; 345 | if(props.style){ testStyleHeight = props.style.height}; // needed for null safety on props.style. Needs to remove trailing px or % !!! 346 | result.gridHigh = testStyleHeight || 347 | this.makeValidInt(props.gridHigh) || 348 | Math.min(result.rowHighWithPad*result.dataHigh+result.headerUsage+(result.borderWide*3)+10 ,400); // read from style, read from attributes, read from gridHigh attribute, default to 300 349 | if (result.gridHigh === -1) { 350 | result.gridHigh = 400; 351 | } 352 | 353 | // How high should the grid be? 354 | result.dataFullHigh = result.dataHigh * (result.rowHighWithPad + result.borderWide); 355 | result.dataAvailableHigh = result.gridHigh-result.headerUsage-result.toolUsage; // this is the virtList height. 356 | 357 | if(result.dataFullHigh > result.dataAvailableHigh){ 358 | result.showBottomGridLine=true; // less data than space: no bottom line is needed. 359 | } 360 | else{ 361 | result.showBottomGridLine=false; 362 | result.dataAvailableHigh -= (result.borderWide) 363 | } 364 | //result.bottomGridLineWide = (result.keyNames.length * (result.autoColWide + result.borderWide + result.padWide + result.padWide))-result.borderWide; 365 | result.bottomGridLineWide = result.rowWide; 366 | 367 | result.bottomLineUsage=0; 368 | if (result.showBottomGridLine) { 369 | result.bottomLineUsage = result.borderWide; 370 | result.dataAvailableHigh -= result.bottomLineUsage; 371 | } 372 | 373 | // fix a degenerate case 374 | if(result.dataAvailableHigh<0){ 375 | result.dataAvailableHigh=100; 376 | result.gridHigh=150; 377 | result.showBottomGridLine=false; 378 | } 379 | 380 | 381 | // check wether to shrink the grid if there is not enough data to fill it. 382 | result.collapseAvailable = result.gridHigh - result.headerUsage 383 | - result.dataFullHigh 384 | - result.bottomLineUsage 385 | - (result.borderWide*2) 386 | - result.toolUsage ; // amount to fill 387 | 388 | if(result.collapseAvailable < 0) { result.collapseAvailable = 0 } // amount to shrink by 389 | result.dataAvailableHigh -= result.collapseAvailable; // don't let the grid consume needless space. 390 | if (props.gridHighCollapse){ 391 | result.gridHigh -= result.collapseAvailable; // shrink whole component if requested 392 | } 393 | 394 | } 395 | else if(props.getRowData){ 396 | // ==== ROW DATA METHOD we have rows of objects to display ( check for an array ) 397 | result.autoColWide= 398 | result.gridWide - 399 | (scrollBarWide||20) - 400 | (result.borderWide*2); 401 | result.colHeaderKeyList = ["No Data Provided"]; 402 | } 403 | else{ 404 | // ==== NO DATA PROVIDED 405 | result.autoColWide = 406 | result.gridWide - 407 | (scrollBarWide||20) - 408 | (result.borderWide * 2); 409 | result.colHeaderKeyList = ["No Data Provided"]; 410 | } 411 | 412 | return result; 413 | } 414 | } 415 | 416 | export default GridMath; 417 | 418 | -------------------------------------------------------------------------------- /src/GridRow.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import VirtualList from 'react-tiny-virtual-list'; 4 | import { observable, action } from 'mobx'; 5 | import { observer } from 'mobx-react'; 6 | import ScrollbarSize from 'react-scrollbar-size'; 7 | import autoBind from 'react-autobind'; 8 | import GridCell from './GridCell'; 9 | 10 | 11 | 12 | @observer class GridRow extends React.Component { 13 | constructor(props) { super(props); autoBind(this); } 14 | 15 | showRowHeaderAltText(e,x,y) 16 | { 17 | this.props.GridStore.cursor.showAltX = x; 18 | this.props.GridStore.cursor.showAltY = y; 19 | } 20 | hideRowHeaderAltText(e,x,y) 21 | { 22 | if(this.props.GridStore.cursor.showAltX === x && this.props.GridStore.cursor.showAltY === y){ 23 | this.props.GridStore.cursor.showAltX = -1; // don't mess with it if values were set by someone else. 24 | this.props.GridStore.cursor.showAltY = -1; 25 | } 26 | } 27 | 28 | render() { 29 | 30 | var selRow=false; 31 | if(this.props.GridStore.cursor.y===this.props.index){ 32 | selRow=true; 33 | } 34 | 35 | var cellArray = []; 36 | var marginOffset = Math.floor(-1 * this.props.uiMath.borderWide); 37 | 38 | 39 | 40 | var topBorder = (this.props.colHeaderHide || this.props.uiMath.forceColHeaderHide) ? this.props.uiMath.borderWide:0; 41 | 42 | var sharedBaseStyleLeftCol = { 43 | width: this.props.uiMath.autoColWide, 44 | borderStyle: 'solid', 45 | borderColor: 'black', 46 | padding: (this.props.uiMath.padWide || 0) + 'px', 47 | borderLeftWidth: this.props.uiMath.borderWide, 48 | borderRightWidth: this.props.uiMath.borderWide, 49 | borderBottomWidth: this.props.uiMath.borderWide, 50 | borderTopWidth: topBorder, 51 | height: this.props.uiMath.rowHighNoPad, 52 | display: 'inline-block', 53 | outline: outline, 54 | overflow:'hidden', 55 | }; 56 | 57 | var sharedBaseStyleInput={ width: this.props.uiMath.autoColWide, 58 | borderStyle: 'solid', 59 | borderColor: 'black', 60 | borderLeftWidth: this.props.uiMath.borderWide, 61 | borderRightWidth: this.props.uiMath.borderWide, 62 | borderBottomWidth: this.props.uiMath.borderWide, 63 | borderTopWidth: topBorder, 64 | backgroundColor: '#fffef4', 65 | padding: (this.props.uiMath.padWide||0)+'px', 66 | height: this.props.uiMath.rowHighNoPad, 67 | display: 'inline-block', 68 | outline: outline, 69 | marginLeft: marginOffset , 70 | overflow: 'hidden', 71 | }; 72 | var sharedBaseStyle2={ width: this.props.uiMath.autoColWide, 73 | borderStyle: 'solid', 74 | borderColor: 'black', 75 | borderLeftWidth: this.props.uiMath.borderWide, 76 | borderRightWidth: this.props.uiMath.borderWide, 77 | borderBottomWidth: this.props.uiMath.borderWide, 78 | borderTopWidth: topBorder, 79 | padding: (this.props.uiMath.padWide||0)+'px', 80 | height: this.props.uiMath.rowHighNoPad, 81 | display: 'inline-block', 82 | outline: outline, 83 | marginLeft: marginOffset , 84 | overflow: 'hidden', 85 | }; 86 | 87 | var cellStyleFirst = Object.assign(sharedBaseStyleLeftCol, (this.props.styleCell||{})); 88 | var cellStyleLocal = Object.assign(sharedBaseStyle2, (this.props.styleCell || {})); 89 | 90 | var inputStyleFirst = Object.assign(sharedBaseStyleLeftCol, (this.props.styleCell||{})); 91 | var inputStyleLocal = Object.assign(sharedBaseStyleInput, (this.props.styleInput || {})); 92 | 93 | 94 | var keyName = null; // used for pivoted data only 95 | 96 | var columnCount = this.props.GridStore.cursor.maxX+1; 97 | if (this.props.pivotOn || this.props.pivotOn === 0){ 98 | columnCount = this.props.data.length; 99 | } 100 | var isFirst=true; 101 | for (var ctr = -1; ctr < columnCount; ctr++) { 102 | var borderColor='black'; 103 | var zIndex=0; 104 | var outline=''; 105 | 106 | cellStyleLocal.marginLeft=marginOffset+'px'; 107 | 108 | // row header / pivot work 109 | if(ctr===-1){ 110 | cellStyleFirst = {width: this.props.uiMath.autoColWide, 111 | borderStyle: 'solid', 112 | borderColor: 'black', 113 | padding: (this.props.uiMath.padWide || 0) + 'px', 114 | borderLeftWidth: this.props.uiMath.borderWide, 115 | borderRightWidth: this.props.uiMath.borderWide, 116 | borderBottomWidth: this.props.uiMath.borderWide, 117 | borderTopWidth: topBorder, 118 | height: this.props.uiMath.rowHighNoPad, 119 | display: 'inline-block', 120 | outline: outline, 121 | overflow:'hidden'} 122 | ; // don't add global cell style on row headers 123 | 124 | if(this.props.uiMath.rowHeaderList && this.props.uiMath.rowHeaderList.length > this.props.index) { 125 | var keyName = this.props.uiMath.rowHeaderList[this.props.index]; // what key am I on? 126 | var titleText = keyName; 127 | if (this.props.GridStore.colDefListByKey[keyName]) { // is there a colDef that uses this key? 128 | titleText = this.props.GridStore.colDefListByKey[keyName].title || keyName; // if there is a title for the colDef use it, or just stick with thekey 129 | } 130 | 131 | if(this.props.uiMath.pivotRowHeaderWide){ 132 | cellStyleFirst.width = Number(this.props.uiMath.pivotRowHeaderWide); 133 | } 134 | isFirst=false; 135 | 136 | // add in the row header style 137 | var gridColLocalStyle = {}; 138 | if(this.props.GridStore.colDefListByKey[keyName]){ 139 | gridColLocalStyle = (this.props.GridStore.colDefListByKey[keyName].styleHeader || {}); 140 | } 141 | 142 | var rowHeaderStyle={...cellStyleFirst,...gridColLocalStyle}; 143 | 144 | cellArray.push( 145 | 159 | ); 160 | } 161 | } 162 | else{ 163 | 164 | var curColKey = this.props.uiMath.colHeaderKeyList[ctr]; // the xth column defined in the colHeaderKey list 165 | if (this.props.pivotOn || this.props.pivotOn === 0) { 166 | if (this.props.GridStore.colDefListByIdx){ 167 | // pvt ON, colDef ON 168 | //console.log(this.props.index, this.props.GridStore.colDefListByIdx[this.props.index]); 169 | curColKey = this.props.uiMath.rowHeaderList[this.props.index]; 170 | } 171 | else{ 172 | curColKey = this.props.uiMath.colHeaderKeyList[this.props.index + 1]; // use Y instead of X and ofset for the row header. this seems like it could be smoother. 173 | //curColKey = this.props.index; // use Y instead of X and ofset for the row header. this seems like it could be smoother. 174 | } 175 | } 176 | var cellData = this.props.GridStore.getDataRespectingPivotAtLocation(this.props.data,ctr,this.props.index); 177 | 178 | cellArray.push( 179 | 194 | ); 195 | isFirst = false; 196 | 197 | } 198 | } 199 | 200 | return( 201 |

202 | {cellArray} 203 |

204 | ); 205 | 206 | } 207 | } 208 | 209 | 210 | export default GridRow; -------------------------------------------------------------------------------- /src/GridStore.jsx: -------------------------------------------------------------------------------- 1 | import { observable, computed, action } from 'mobx'; 2 | import GridMath from './GridMath'; 3 | 4 | class GridStore { // Just a class. Nothing fancy here. 5 | constructor() { 6 | this.uiMathInst = new GridMath(); 7 | 8 | } 9 | 10 | @observable cursor = {x:0,y:0, // cursor x and y values 11 | maxX:-1,maxY:-1, // max legal x and y values. 12 | selectToX:-1,selectToY:-1, // selection box for shift selection 13 | editX:-1,editY:-1,editObjKey:-1, // cell being edited 14 | showAltX:-1,showAltY:-1, // for displaying alt text help 15 | shiftSelInProgress:false // for shift arrow selecting cells 16 | }; 17 | @observable selectedCells = []; // for control clicking cells. 18 | @observable curEditingValue=''; // value being edited before it is applied. 19 | 20 | @observable autoFocus=false; // if true, rendering a selected cell will cause that cell to take focus 21 | @observable inst = ''; // if true, rendering a selected cell will cause that cell to take focus 22 | @observable pivotOn = ''; // from props. Here for easy cell access. 23 | 24 | @observable colDefListByKey = {}; // column definition meta data accessible by keyName 25 | @observable colDefListByIdx = []; // column definition meta data accessible by ordered index 26 | @observable keyList=[] // list of the keys in the given data object. 27 | 28 | @observable showDatePicker = false; // due to scrolling issues, the react-datepicker popup cannot be used. This add a non-scrolled over-lay picker. 29 | @observable showDateTimePicker = false; // due to scrolling issues, the react-datepicker popup cannot be used. This add a non-scrolled over-lay picker. 30 | @observable showMenuPicker = false; // due to scrolling issues, the react-datepicker popup cannot be used. This add a non-scrolled over-lay picker. 31 | @observable showOverlayComp = false; // due to scrolling issues, the react-datepicker popup cannot be used. This add a non-scrolled over-lay picker. 32 | 33 | @observable scrollBarWide = 20; 34 | 35 | 36 | // javascript sucks at math 37 | makeValidInt(inputVal, defaultVal) { 38 | var res = (inputVal || defaultVal); 39 | if (inputVal === 0) { res = inputVal; } 40 | if (res < 0) { res = defaultVal; } 41 | return Number(res); 42 | } 43 | 44 | // all the default handlers inform the user that there is no handler specified. 45 | @action logNoChangeHandlerMessage() { console.log('no onChange handler supplied.');} 46 | @action logNoOnRowAddHandlerMessage() { console.log('no onRowAdd handler supplied.'); } 47 | @action logNoOnRowCutHandlerMessage() { console.log('no onRowCut handler supplied.'); } 48 | @action logNoOnGotoPageHandlerMessage() { console.log('no onGotoPage handler supplied.'); } 49 | @action logNoOnImportHandlerMessage() { console.log('no onImport handler supplied.'); } 50 | @action logNoOnExportHandlerMessage() { console.log('no onExport handler supplied.'); } 51 | @action logNoOnReplaceDataHandlerMessage() { console.log('no onReplaceData handler supplied. (Required for text mode editing)'); } 52 | 53 | // don't call the user supplied on change directly. 54 | // call this to ensure that the pivot variables get swizzled correctly. 55 | onChangePivotWrapper(x,y,objKey,val){ 56 | if(val===null) return; // cannot set null via the UI. prevents unintended changes. 57 | if (this.pivotOn || 0 === this.pivotOn) { 58 | this.onChange(y, x, objKey, val); 59 | } 60 | else { 61 | this.onChange(x, y, objKey, val); 62 | } 63 | } 64 | 65 | /* 66 | this method takes the props and updates the grid store. 67 | */ 68 | @action prepSelectionField(props) 69 | { 70 | // make the calculations 71 | this.uiMath = this.uiMathInst.calcGridBody(props, (this.scrollBarWide||20)); 72 | 73 | // ease of access 74 | this.colDefListByKey = this.uiMath.colDefListByKey; 75 | this.colDefListByIdx = props.columnList; 76 | 77 | //--- style data holders 78 | this.styleCell = props.styleCell||{}; 79 | this.styleCellOddRow = props.styleCellOddRow||{}; 80 | this.styleHeaderCell = props.styleHeaderCell||{}; 81 | this.styleRowHeaderCell = props.styleRowHeaderCell||{}; 82 | 83 | this.styleData = props.styleData||{}; 84 | this.styleDataOddRow = props.styleDataOddRow||{}; 85 | this.styleHeaderData = props.styleHeaderData||{}; 86 | this.styleRowHeaderData = props.styleRowHeaderData||{}; 87 | 88 | this.styleInput = props.styleInput||{}; 89 | this.styleSelected = props.styleSelected||{}; 90 | 91 | 92 | //--- class data holders 93 | this.classCell = props.classCell||''; 94 | this.classCellOddRow = props.classCellOddRow||''; 95 | this.classHeaderCell = props.classHeaderCell||''; 96 | this.classRowHeaderCell = props.classRowHeaderCell||''; 97 | 98 | this.classData = props.classData||''; 99 | this.classDataOddRow = props.classDataOddRow||''; 100 | this.classHeaderData = props.classHeaderData||''; 101 | this.classRowHeaderData = props.classRowHeaderData||''; 102 | 103 | this.classInput = props.classInput||''; 104 | this.classSelected = props.classSelected||''; 105 | 106 | this.keyList = this.uiMath.keyNames; 107 | 108 | 109 | var dataWide = this.uiMath.dataWide; 110 | var dataHigh = this.uiMath.dataHigh; 111 | 112 | // ensure that we only set the values if they've actuallly changed. 113 | if (this.cursor.maxX !== dataWide - 1 || this.cursor.maxY !== dataHigh - 1) { 114 | this.cursor.maxX = dataWide-1; 115 | this.cursor.maxY = dataHigh-1; 116 | } 117 | 118 | if(props.testCursor){ 119 | this.cursor.x = props.testCursor.x; 120 | this.cursor.y = props.testCursor.y; 121 | this.cursor.selectToX = (props.testCursor.selectToX||-1); 122 | this.cursor.selectToY = (props.testCursor.selectToY||-1); 123 | this.cursor.editX = (props.testCursor.editX||-1); 124 | this.cursor.editY = (props.testCursor.editY||-1); 125 | this.cursor.shiftSelInProgress = props.testCursor.shiftSelInProgress; 126 | } 127 | 128 | // make handlers easily available and log messages if they're missing. 129 | this.onChange = (props.onChange || this.logNoChangeHandlerMessage ); 130 | this.onRowAdd = (props.onRowAdd || this.logNoOnRowAddHandlerMessage); 131 | this.onRowCut = (props.onRowCut || this.logNoOnRowCutHandlerMessage); 132 | this.onGotoPage = (props.onGotoPage || this.logNoGotoPageHandlerMessage); 133 | this.onExport = (props.onExport || this.logNoOnExportHandlerMessage); 134 | this.onImport = (props.onImport || this.logNoOnImportHandlerMessage); 135 | this.onReplaceData = (props.onReplaceData || this.logNoOnReplaceDataHandlerMessage); 136 | 137 | this.pivotOn = props.pivotOn; // easy availability to cells 138 | } 139 | 140 | 141 | // sets a selected cell 142 | @action cellSelectSet(x,y,val){ 143 | selectedCells[y][x]=val; 144 | } 145 | 146 | // handles keyboard movement. takes an event. 147 | @action cellMoveKey(e) 148 | { 149 | // only worry about arrow keys: 150 | if(e.shiftKey){ 151 | // was it already down? if no, start a selection 152 | // note: google sheets does not allow 2 separate shift-cell-selections at a time. It's one block+click collection , but not 2 blocks. 153 | if(!this.cursor.shiftSelInProgress){ 154 | this.cursor.selectToX=this.cursor.x; 155 | this.cursor.selectToY=this.cursor.y; 156 | this.cursor.shiftSelInProgress=true; 157 | } 158 | } 159 | else{ 160 | this.cursor.shiftSelInProgress = false; 161 | } 162 | if (e.keyCode == '38') { 163 | // up arrow 164 | this.cursor.y--; 165 | if (this.cursor.y < 0) this.cursor.y = 0; 166 | } 167 | else if (e.keyCode == '40') { 168 | // down arrow 169 | if (this.cursor.y < this.cursor.maxY) this.cursor.y++; 170 | } 171 | else if (e.keyCode == '37') { 172 | // left arrow 173 | this.cursor.x--; 174 | if (this.cursor.x < 0) this.cursor.x = 0; 175 | } 176 | else if (e.keyCode == '39') { 177 | // right arrow 178 | if (this.cursor.x < this.cursor.maxX) this.cursor.x++; 179 | } 180 | e.stopPropagation(); 181 | e.preventDefault(); 182 | } 183 | 184 | // computes the selection bounds based on changes to the selected cell position and shift key. 185 | @computed get selectionBounds(){ 186 | var res={l:-1,r:-1,t:-1,b:-1}; 187 | // block selection 188 | if(this.cursor.shiftSelInProgress){ 189 | res.l = Math.min(this.cursor.x, this.cursor.selectToX); 190 | res.r = Math.max(this.cursor.x, this.cursor.selectToX); 191 | res.t = Math.min(this.cursor.y, this.cursor.selectToY); 192 | res.b = Math.max(this.cursor.y, this.cursor.selectToY); 193 | } 194 | else{ 195 | res.l = res.r = this.cursor.x; 196 | res.t = res.b = this.cursor.y; 197 | } 198 | // click selection 199 | 200 | return res; 201 | } 202 | 203 | // validates some input fields 204 | @computed get curEditIsValidFor() { 205 | var res={}; 206 | res.isValidInt = this.checkValidInt(this.curEditingValue); 207 | res.isValidFloat = this.checkValidFloat (this.curEditingValue); 208 | return res; 209 | } 210 | 211 | // very basic validity checks. 212 | checkValidInt(t){ 213 | if(!t) return true; // blank+null is ok. 214 | return (!isNaN(t) && (function (x) { return (x | 0) === x; })(parseFloat(t))); 215 | } 216 | checkValidFloat(t) { 217 | if(!t) return true; // blank+null is ok. 218 | return (!isNaN(t)); 219 | } 220 | 221 | // because the data may be in a pivot display, use this layer to find the real coordinates of the data for the cell 222 | getDataRespectingPivotAtEditCursor(clientData) 223 | { 224 | if(this.uiMath.isPrimitiveData){ 225 | // non-object data. Just pretend it's a grid. Only one coordinate will matter. 226 | if (this.pivotOn || this.pivotOn === 0){ 227 | return clientData[this.cursor.editY]; // y is rows down / outer array 228 | } 229 | else{ 230 | return clientData[this.cursor.editX]; 231 | } 232 | } 233 | else{ 234 | if(this.pivotOn || this.pivotOn===0){ 235 | return clientData[this.cursor.editX][this.uiMath.rowHeaderList[this.cursor.editY]]; // y is rows down / outer array 236 | } 237 | else{ 238 | return clientData[this.cursor.editY][this.uiMath.colHeaderKeyList[this.cursor.editX]]; 239 | } 240 | } 241 | } 242 | 243 | // because the data may be in a pivot display, use this layer to find the real coordinates of the data for the cell. arbirary location 244 | getDataRespectingPivotAtLocation(clientData,x,y) 245 | { 246 | if(x<0 && y<0){ return '/' } 247 | if (x < 0) { return '/' } 248 | if (y < 0) { return '/' } 249 | if(typeof clientData !== "object"){ console.log('Remember that the first parameter of this method must be the user client data. Currently it is '+clientData);} 250 | if(this.uiMath.isPrimitiveData){ 251 | // non-object data. Just pretend it's a grid. Only one coordinate will matter. 252 | if (this.pivotOn || 0 === this.pivotOn){ 253 | return clientData[x]; // y is rows down / outer array 254 | } 255 | else{ 256 | return clientData[y]; 257 | } 258 | } 259 | else{ 260 | // object data. Use the real stuff. 261 | if (this.pivotOn || 0 === this.pivotOn){ 262 | if (this.uiMath.rowHeaderList){ 263 | return clientData[x][this.uiMath.rowHeaderList[y]]; // x data items into outer list. Y+1 adjusts for the "/" column heading 264 | } 265 | else{ 266 | return clientData[x][y]; // x data items into outer list. Y+1 adjusts for the "/" column heading 267 | } 268 | } 269 | else{ 270 | return clientData[y][this.uiMath.colHeaderKeyList[x]]; // y is depth in outer list, x is the column into the inner list/object 271 | } 272 | } 273 | } 274 | 275 | 276 | // some error handling helpers 277 | @observable jsonAsTxtError = ''; 278 | @observable textDataLinesLength=0; 279 | @observable textGoalFormat = ''; 280 | 281 | // data conversion for text editor support 282 | @action convertJSONtoTXT(data){ 283 | this.textDataLinesLength=0; 284 | this.keyList=[]; 285 | var res = ''; 286 | 287 | if(!data || data.length===0){ 288 | return ''; 289 | } 290 | this.textDataLinesLength = data.length; 291 | 292 | if (typeof data[0] === 'object' || typeof data[0] === 'array'){ 293 | 294 | this.textGoalFormat=typeof data[0]; 295 | this.textDataLinesLength = data.length; 296 | this.keyList = Object.keys(data[0]); 297 | if(this.keyList.length===0){ 298 | // fake object. Treat it as an array 299 | this.textGoalFormat='array'; 300 | if(data[0].length){ 301 | for(var fi=0;fix[this.cursor.objKey]).join('\n'); // get the "objKey"th item from each object into an array of primitives then newline-join it together for the response. 317 | } 318 | else{ 319 | this.textGoalFormat='prims'; // single array of primitives 320 | return data.join('\n').trim(); 321 | } 322 | } 323 | 324 | // TODO 325 | // - tool button to switch between editor types. 326 | // - remember if the input was obj, array, or prim array and use it to convert back 327 | // - Get user specified components working everywhere 328 | @action convertTXTtoJSON(txt){ 329 | var lines = txt.split('\n'); 330 | // bonehead implementation. this is intended for lists of less than 200 items. 331 | var result = []; 332 | for(var ctr=0;ctrkctr){ 345 | curObj[ this.keyList[kctr] ]=items[kctr]; 346 | } 347 | else{ 348 | curObj[ this.keyList[kctr] ]=''; 349 | } 350 | } 351 | result.push(curObj); 352 | } 353 | } 354 | 355 | if(this.uiMath.debugGridMath){ 356 | console.log(result); 357 | } 358 | this.onReplaceData(result); 359 | 360 | } 361 | 362 | } 363 | 364 | export default GridStore; 365 | 366 | 367 | -------------------------------------------------------------------------------- /src/GridTextBox.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { observable,action,trace } from 'mobx'; 4 | import { observer } from 'mobx-react'; 5 | import autoBind from 'react-autobind'; 6 | 7 | import GridHeader from './GridHeader'; 8 | import GridTools from './GridTools'; 9 | 10 | 11 | // Wrapper for the grid 12 | // This grid allows deep styling via style objects, 13 | // but retains control of border and padding to ensure that the grid lines up. 14 | @observer class GridTextBox extends React.Component 15 | { 16 | 17 | @observable txt = ''; // keep track of how wide the scroll bar will be 18 | 19 | constructor(props) { 20 | super(props); 21 | autoBind(this); 22 | this.componentWillReceiveProps(props); // first call needs to set up the data store 23 | //this.refuseUpdates=false; 24 | } 25 | 26 | componentWillReceiveProps(nextProps) 27 | { 28 | //if(this.refuseUpdates){return;} 29 | 30 | var testTxt = this.props.GridStore.convertJSONtoTXT(nextProps.data); 31 | if(this.txt!==testTxt){ 32 | this.txt=testTxt; // don't set the value unless you have to, it will move the cursor! 33 | } 34 | } 35 | 36 | 37 | @action onChange(evt){ 38 | //if (this.refuseUpdates) return; 39 | var curText = evt.target.value; 40 | 41 | if (this.txt !== curText) { 42 | this.refuseUpdates=true; 43 | this.props.GridStore.convertTXTtoJSON(curText); 44 | this.txt = curText; 45 | this.refuseUpdates = false; 46 | } 47 | } 48 | 49 | render(){ 50 | var ui = this.props.uiMath; 51 | 52 | return( 53 |

54 | {/* put the header in place */} 55 | 56 | 57 | {/* render the text area */} 58 | 69 | 70 | {/* put the tools in place */} 71 | 72 |

73 | ); 74 | } 75 | } 76 | 77 | export default GridTextBox; 78 | -------------------------------------------------------------------------------- /src/GridTools.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { observable, action } from 'mobx'; 4 | import { observer } from 'mobx-react'; 5 | import autoBind from 'react-autobind'; 6 | 7 | import PlaylistRemoveIcon from 'mdi-react/PlaylistRemoveIcon'; 8 | import PlaylistPlusIcon from 'mdi-react/PlaylistPlusIcon'; 9 | 10 | import PackageUpIcon from 'mdi-react/PackageUpIcon'; 11 | import PackageDownIcon from 'mdi-react/PackageDownIcon'; 12 | 13 | import FirstIcon from 'mdi-react/ArrowCollapseLeftIcon'; 14 | import LeftIcon from 'mdi-react/ArrowLeftIcon'; 15 | import RightIcon from 'mdi-react/ArrowRightIcon'; 16 | import LastIcon from 'mdi-react/ArrowCollapseRightIcon'; 17 | 18 | import ReactTooltip from 'react-tooltip'; 19 | 20 | 21 | 22 | @observer class GridTools extends React.Component { 23 | constructor(props) { super(props); autoBind(this); } 24 | 25 | 26 | @observable curPage=1; 27 | 28 | @action addRow(){ 29 | this.props.GridStore.onRowAdd(this.props.GridStore.cursor.x, this.props.GridStore.cursor.y, 30 | this.props.GridStore.keyList[this.props.GridStore.cursor.x]); 31 | } 32 | @action cutRow() { 33 | this.props.GridStore.onRowCut(this.props.GridStore.cursor.x, this.props.GridStore.cursor.y, 34 | this.props.GridStore.keyList[this.props.GridStore.cursor.x]); 35 | } 36 | 37 | @action onImport(){this.props.GridStore.onImport()} 38 | @action onExport(){this.props.GridStore.onExport()} 39 | 40 | @action onPageFirst(){this.props.onGotoPage(0);} 41 | @action onPagePrev(){ this.curPage--; if(this.curPage<1){this.curPage=1;}; this.props.onGotoPage(this.curPage); } 42 | @action onPageNext(){ var maxPage = (this.props.pageCount||1); this.curPage++; if(this.curPage>=maxPage){this.curPage=maxPage;}; this.props.onGotoPage(this.curPage); } 43 | @action onPageLast(){ var maxPage = (this.props.pageCount||1); this.curPage=maxPage; this.props.onGotoPage(this.curPage);} 44 | 45 | @action onChange(evt){ 46 | var tst = evt.target.value; 47 | if(!evt.target.value){this.curPage='';return;} 48 | this.curPage = (Number(tst)||1); 49 | if(this.curPage<0) this.curPage=1; 50 | if(this.curPage>(this.props.pageCount||1)){this.curPage=(this.props.pageCount||1)}; 51 | this.props.onGotoPage(this.curPage) 52 | } 53 | 54 | render(){ 55 | var ui = this.props.uiMath; 56 | if(this.props.editDisabled){ 57 | return ''; 58 | } 59 | 60 | return( 61 |

62 | {this.props.showToolsAddCut && 63 |

64 | 65 | 66 | Add Row 67 | 68 | 69 | 70 | Delete Row 71 | 72 |

73 | } 74 | {this.props.showToolsImpExp && 75 |

76 | 77 | 78 | Replace Grid with Uploaded JSON 79 | 80 | 81 | 82 | Download Grid to JSON file 83 | 84 |

85 | } 86 | {this.props.showToolsPage && 87 |

88 | 89 | 90 | Goto Page 1 of {(this.props.pageCount||1)} 91 | 92 | 93 | 94 | Goto Page {Math.max(this.curPage-1,1)} of {(this.props.pageCount||1)} 95 | 96 | 97 | 98 | 99 | Goto Page {Math.min(this.curPage+1,((this.props.pageCount||1)))} of {(this.props.pageCount||1)} 100 | 101 | 102 | 103 | Goto Page {(this.props.pageCount||1)} of {(this.props.pageCount||1)} 104 | 105 |

106 | } 107 | {this.props.showToolsCustom && 108 |

109 | {this.props.showToolsCustom} 110 |

111 | } 112 |

113 | ); 114 | } 115 | } 116 | 117 | export default GridTools; -------------------------------------------------------------------------------- /src/animTest/AnimTest.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import autoBind from 'react-autobind'; 3 | 4 | import { observable } from 'mobx'; 5 | import { observer } from 'mobx-react'; 6 | 7 | 8 | @observer class AnimTest extends React.Component 9 | { 10 | constructor(props) { 11 | super(props); 12 | autoBind(this); 13 | } 14 | @observable x = 50; 15 | @observable y = 50; 16 | @observable rot = 0; 17 | 18 | click(evt){ 19 | this.x=evt.clientX-10-20; 20 | this.y = evt.clientY-10-20; 21 | } 22 | 23 | move(evt) { 24 | var cx = this.x+30; 25 | var cy = this.y+30; 26 | var ex = evt.clientX; 27 | var ey = evt.clientY; 28 | var n = ey-cy; 29 | var d = ex-cx; 30 | this.rot = (Math.atan(n/(d||0.0001)) * 180/Math.PI); 31 | if(ex>cx){ this.rot+=180; } 32 | this.rot-=90; 33 | } 34 | 35 | render() { 36 | 37 | return ( 38 |

46 | Click to move the box. 47 |

57 |

58 | ); 59 | } 60 | } 61 | 62 | 63 | export default AnimTest; 64 | 65 | -------------------------------------------------------------------------------- /src/docTool/ColumnUI.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import autoBind from 'react-autobind'; 3 | 4 | 5 | class ColumnUI extends React.Component { 6 | constructor(props) { super(props); autoBind(this); } 7 | 8 | 9 | render() { 10 | return ( 11 |

12 | Column 13 |

{this.props.label}

14 | 15 |

16 | ); 17 | } 18 | } 19 | 20 | 21 | export default ColumnUI; -------------------------------------------------------------------------------- /src/docTool/CompactObjView.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import autoBind from 'react-autobind'; 3 | 4 | 5 | class CompactObjView extends React.Component { 6 | constructor(props) { super(props); autoBind(this); } 7 | 8 | formatThing(val){ 9 | if(val===true || val==='true' || val==='TRUE') return true; 10 | if(val===false || val==='false' || val==='FALSE') return false; 11 | return "'"+val+"'"; 12 | } 13 | 14 | render() { 15 | var items=[]; 16 | var keyList = Object.keys( this.props.target ); 17 | for(var ctr=0;ctr{keyList[ctr] + ":" + this.formatThing(this.props.target[keyList[ctr]])+", "}) 20 | } 21 | } 22 | 23 | return ( 24 |

{{items}},

25 | ); 26 | } 27 | } 28 | 29 | 30 | export default CompactObjView; -------------------------------------------------------------------------------- /src/docTool/DataMaker.jsx: -------------------------------------------------------------------------------- 1 | import autoBind from 'react-autobind'; 2 | 3 | class DataMaker 4 | { 5 | 6 | 7 | constructor(updateDataFunction) { 8 | autoBind(this); 9 | this.updateDataText = updateDataFunction; //must be specificed by the owning object before these data makers are useful. 10 | } 11 | 12 | makeS() { 13 | var res = "["; // faster to generate strings 14 | for(var ctr=0;ctr<5;ctr++){res+='{r:'+(5-ctr)+',a:5,b:6,c:8,d:90},';} 15 | res = res.substring(0, res.length-1);res+=']'; 16 | this.updateDataText(res); 17 | } 18 | makeM() { 19 | var res = "["; // faster to generate strings 20 | for(var ctr=0;ctr<150;ctr++){res+='{r:'+(150-ctr)+',a:5,b:6,c:8,d:90},';} 21 | res = res.substring(0, res.length-1);res+=']'; 22 | this.updateDataText(res); 23 | } 24 | makeL() { 25 | var res = "["; // faster to generate strings 26 | for(var ctr=0;ctr<50000;ctr++){res+='{"r":'+(50000-ctr)+',"a":5,"b":6,"c":8,"d":90},';} 27 | res = res.substring(0, res.length-1);res+=']'; 28 | this.updateDataText(res); 29 | } 30 | makeSA() { 31 | var res = "["; // faster to generate strings 32 | for(var ctr=0;ctr<5;ctr++){res+='[1'+ctr+','+(2*ctr)+',3,4,5],';} 33 | res = res.substring(0, res.length-1);res+=']'; 34 | this.updateDataText(res); 35 | } 36 | makeMA() { 37 | var res = "["; // faster to generate strings 38 | for(var ctr=0;ctr<150;ctr++){res+='[1'+ctr+','+(2*ctr)+',3,4,5],';} 39 | res = res.substring(0, res.length-1);res+=']'; 40 | this.updateDataText(res); 41 | } 42 | makeLA() { 43 | var res = "["; // faster to generate strings 44 | for(var ctr=0;ctr<50000;ctr++){res+='[1'+ctr+','+(2*ctr)+',3,4,5],';} 45 | res = res.substring(0, res.length-1);res+=']'; 46 | this.updateDataText(res); 47 | } 48 | makeAInt() { 49 | var res = "["; // faster to generate strings 50 | for(var ctr=0;ctr<50;ctr++){res+=ctr+','} 51 | res = res.substring(0, res.length-1);res+=']'; 52 | this.updateDataText(res); 53 | } 54 | makeAWords() { 55 | var res = "["; // faster to generate strings 56 | for(var ctr=0;ctr<25;ctr++){res+='"arnold","bernard","clementine","dolores",'} 57 | res = res.substring(0, res.length-1);res+=']'; 58 | this.updateDataText(res); 59 | } 60 | makeKVP() { 61 | var res = "["; // faster to generate strings 62 | for(var ctr=0;ctr<50;ctr++){res+='{a:"test '+ctr+'"},'} 63 | res = res.substring(0, res.length-1);res+=']'; 64 | this.updateDataText(res); 65 | } 66 | makeCSV() { 67 | var res = "Col A,Col B,Col C,Col D,Col E\n" ; // faster to generate strings 68 | for(var ctr=0;ctr<50;ctr++){res+='a '+ctr+',b '+(ctr*3)+',c,d,e\n'} 69 | this.updateDataText(res); 70 | } 71 | makePSV() { 72 | var res = "Col A|Col B|Col C|Col D|Col E\n" ; // faster to generate strings 73 | for(var ctr=0;ctr<50;ctr++){res+='a '+ctr+'|b '+(ctr*3)+'|c|d|e\n'} 74 | this.updateDataText(res); 75 | } 76 | makeKVE() { 77 | var res = '' ; // faster to generate strings 78 | for(var ctr=0;ctr<50;ctr++){res+=''+ctr.toString(16)+'='+ctr+'\n'} 79 | this.updateDataText(res); 80 | } 81 | 82 | 83 | 84 | 85 | 86 | } 87 | 88 | export default DataMaker; -------------------------------------------------------------------------------- /src/docTool/DocStore.jsx: -------------------------------------------------------------------------------- 1 | import { observable, computed, action } from 'mobx'; 2 | import autoBind from 'react-autobind'; 3 | 4 | 5 | class DocStore { // Just a class. Nothing fancy here. 6 | constructor() { 7 | autoBind(this); 8 | this.addColDefRow('a'); 9 | this.addColDefRow('b'); 10 | this.addColDefRow('c'); 11 | this.addColDefRow('d'); 12 | } 13 | 14 | @action addColDefRow(keyName) 15 | { 16 | this.colDef.push( 17 | observable.object({ 18 | key: (keyName||'key'), title: (keyName||'key')+' Col', 19 | editDisabled: '', 20 | widePct: '', widePx: '', 21 | easyBool: '', easyInt: '', easyFloat: '', easyDollar: '', easyEuro: '', easyPound: '', 22 | easyDate: '',easyDateTime: '', easyMenu: '', 23 | altText: '', 24 | styleCell: '', styleData:'', styleHeaderCell: '', styleHeaderData: '', 25 | classCell: '', classData:'', classHeaderCell: '', classHeaderData: '', 26 | compHeader: '', compInput: '', compCell: '' 27 | }) ); 28 | } 29 | 30 | 31 | @observable showOutline = false; 32 | @action toggleOutline() { this.showOutline = !this.showOutline; } 33 | 34 | @observable hideEditor = false; 35 | @action toggleEditor() { this.hideEditor = !this.hideEditor; } 36 | 37 | // determine which onChangeHandler help and variables to use 38 | @observable onChangeHandlerType = 'normal'; // fast,primitive, rowReplace 39 | 40 | @observable showToolsAddCut = false; 41 | @observable showToolsPage = false; 42 | @observable showToolsImpExp = false; 43 | @observable showToolsCustom = false; 44 | @observable toolsButtonClass = ''; 45 | @observable pageCount = 0; 46 | @action toggleToolsAddCut() { this.showToolsAddCut = !this.showToolsAddCut; } 47 | @action toggleToolsPage() { this.showToolsPage = !this.showToolsPage; } 48 | @action toggleToolsImpExp() { this.showToolsImpExp = !this.showToolsImpExp; } 49 | @action toggleToolsCustom() { this.showToolsCustom = !this.showToolsCustom; } 50 | @action setToolsButtonClass(evt) { this.toolsButtonClass = evt.target.value; } 51 | @action setPageCount(val) { this.pageCount = val; if(this.pageCount<0){this.pageCount=0;} } 52 | 53 | 54 | @observable editDisabled = false; 55 | @action toggleEditDisabled() { this.editDisabled = !this.editDisabled; } 56 | 57 | @observable editAsText = false; 58 | @action toggleEditAsText() { this.editAsText = !this.editAsText; } 59 | 60 | @observable propBorderWide = -1; 61 | @action setBorderWidth(val) { this.propBorderWide = val; } 62 | 63 | @observable propPadWide = -1; 64 | @action setPadWidth(val) { this.propPadWide = val; } 65 | 66 | @observable propGridWide = -1; 67 | @action setGridWide(val) { this.propGridWide = val; } 68 | 69 | @observable propGridHigh = -1; 70 | @action setGridHigh(val) { this.propGridHigh = val; } 71 | 72 | @observable gridHighCollapse = false; 73 | @action toggleGridHighCollapse(val) { this.gridHighCollapse = !this.gridHighCollapse; } 74 | 75 | @observable propRowHigh = -1; 76 | @action setRowHigh(val) { this.propRowHigh = val; } 77 | 78 | @observable propRowHeaderHigh = -1; 79 | @action setRowHeaderHigh(val) { this.propRowHeaderHigh = val; } 80 | 81 | @observable propMinColWide = -1; 82 | @action setMinColWide(val) { this.propMinColWide = val; } 83 | 84 | @observable colHeaderHide = false; 85 | @action toggleColHeaderHide() { this.colHeaderHide = !this.colHeaderHide; } 86 | 87 | @observable pivotOn = false; 88 | @action togglePivotOn() { this.pivotOn = !this.pivotOn; } 89 | 90 | @observable pivotRowHeaderWide = -1; 91 | @action setPivotRowHeaderWide(val) { this.pivotRowHeaderWide = val; } 92 | 93 | @observable columnList = false; 94 | @action toggleColumnList() { this.columnList = !this.columnList; } 95 | 96 | @observable showSizeStuff = false; 97 | @observable showFormatStuff = false; 98 | @observable showStyleStuff = false; 99 | @observable showClassStuff = false; 100 | @observable showPivotStuff = false; 101 | @observable showEditStuff = false; 102 | @observable showDebugStuff = false; 103 | @observable showKeyboardStuff = false; 104 | @observable showCompStuff = false; 105 | @action toggleShowStyleStuff() { this.showStyleStuff = !this.showStyleStuff; } 106 | @action toggleShowSizeStuff() { this.showSizeStuff = !this.showSizeStuff; } 107 | @action toggleShowFormatStuff() { this.showFormatStuff = !this.showFormatStuff; } 108 | @action toggleShowClassStuff() { this.showClassStuff = !this.showClassStuff; } 109 | @action toggleShowPivotStuff() { this.showPivotStuff = !this.showPivotStuff; } 110 | @action toggleShowEditStuff() { this.showEditStuff = !this.showEditStuff; } 111 | @action toggleShowDebugStuff() { this.showDebugStuff = !this.showDebugStuff; } 112 | @action toggleShowKeyboardStuff() { this.showKeyboardStuff = !this.showKeyboardStuff ; } 113 | @action toggleShowCompStuff() { this.showCompStuff = !this.showCompStuff; } 114 | 115 | @observable debugGridMath = false; 116 | @action toggleDebugGridMath() { this.debugGridMath = !this.debugGridMath; } 117 | 118 | 119 | 120 | 121 | @observable classCell = ''; 122 | @observable classData = ''; 123 | @observable classHeaderCell = ''; 124 | @observable classHeaderData = ''; 125 | @observable classRowHeaderCell = ''; 126 | @observable classRowHeaderData = ''; 127 | @observable classCellOddRow = ''; 128 | @observable classDataOddRow = ''; 129 | @observable classInput = ''; 130 | @observable classSelected = ''; 131 | 132 | @action setClassCell(evt) { this.classCell = evt.target.value; } 133 | @action setClassData(evt) { this.classData = evt.target.value; } 134 | @action setClassHeaderCell(evt) { this.classHeaderCell = evt.target.value; } 135 | @action setClassHeaderData(evt) { this.classHeaderData = evt.target.value; } 136 | @action setClassRowHeaderCell(evt) { this.classRowHeaderCell = evt.target.value; } 137 | @action setClassRowHeaderData(evt) { this.classRowHeaderData = evt.target.value; } 138 | @action setClassCellOddRow(evt) { this.classCellOddRow = evt.target.value; } 139 | @action setClassDataOddRow(evt) { this.classDataOddRow = evt.target.value; } 140 | @action setClassInput(evt) { this.classInput = evt.target.value; } 141 | @action setClassSelected(evt) { this.classSelected = evt.target.value; } 142 | 143 | @observable formatDate = ''; 144 | @observable formatTime = ''; 145 | @action setFormatDate(evt) { this.formatDate = evt.target.value; } 146 | @action setFormatTime(evt) { this.formatTime = evt.target.value; } 147 | 148 | @observable colDef = []; 149 | 150 | @action setColDefValue(x, y, objKey, newValue) { 151 | this.colDef[y][objKey] = newValue; 152 | } 153 | 154 | @computed get outlineCSS() { 155 | if (this.showOutline) { return '2px green dashed';} 156 | else{return '';} 157 | } 158 | 159 | 160 | @observable styleCell = ''; 161 | @observable styleCellOddRow = ''; 162 | @observable styleHeaderCell = ''; 163 | @observable styleRowHeaderCell = ''; 164 | 165 | @observable styleData = ''; 166 | @observable styleDataOddRow = ''; 167 | @observable styleHeaderData = ''; 168 | @observable styleRowHeaderData = ''; 169 | 170 | @observable styleInput = ''; 171 | @observable styleSelected = ''; 172 | 173 | @action setStyleCell(evt) { this.styleCell = evt.target.value; } 174 | @action setStyleCellOddRow(evt) { this.styleCellOddRow = evt.target.value; } 175 | @action setStyleHeaderCell(evt) { this.styleHeaderCell = evt.target.value; } 176 | @action setStyleRowHeaderCell(evt) { this.styleRowHeaderCell = evt.target.value; } 177 | 178 | @action setStyleData(evt) { this.styleData = evt.target.value; } 179 | @action setStyleDataOddRow(evt) { this.styleDataOddRow = evt.target.value; } 180 | @action setStyleHeaderData(evt) { this.styleHeaderData = evt.target.value; } 181 | @action setStyleRowHeaderData(evt) { this.styleRowHeaderData = evt.target.value; } 182 | 183 | @action setStyleInput(evt) { this.styleInput = evt.target.value; } 184 | @action setStyleSelected(evt) { this.styleSelected = evt.target.value; } 185 | 186 | 187 | makeJSON(value,error){ 188 | var res={}; 189 | if(value){ 190 | try { res = JSON.parse(this.rrjs.stringToJson(value));} 191 | catch(e) { res={backgroundColor:'red',err:error}; console.log('ERROR',e,error);} 192 | } 193 | return res; 194 | } 195 | 196 | @computed get jsonStyleCell(){ return this.makeJSON(this.styleCell,'invalid Cell JSX Style');} 197 | @computed get jsonStyleCellOddRow(){ return this.makeJSON(this.styleCellOddRow,'invalid Odd Row Cell JSX Style');} 198 | @computed get jsonStyleHeaderCell(){ return this.makeJSON(this.styleHeaderCell,'Invalid JSX Header Cell Style');} 199 | @computed get jsonStyleRowHeaderCell(){ return this.makeJSON(this.styleRowHeaderCell,'Invalid JSX Header Cell Style');} 200 | 201 | @computed get jsonStyleData(){ return this.makeJSON(this.styleData,'invalid Data JSX Style');} 202 | @computed get jsonStyleDataOddRow(){ return this.makeJSON(this.styleDataOddRow,'invalid JSX Odd Row Data Style');} 203 | @computed get jsonStyleHeaderData(){ return this.makeJSON(this.styleHeaderData,'Invalid JSX Header Data Style');} 204 | @computed get jsonStyleRowHeaderData(){ return this.makeJSON(this.styleRowHeaderData,'Invalid JSX Header Data Style');} 205 | 206 | @computed get jsonStyleInput(){ return this.makeJSON(this.styleInput,'Invalid JSX Input Cell Style');} 207 | @computed get jsonStyleSelected(){ return this.makeJSON(this.styleSelected,'Invalid JSX Selected Cell Style'); } 208 | 209 | 210 | } 211 | 212 | export default DocStore; -------------------------------------------------------------------------------- /src/docTool/DocUI.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { toJS,observable,action,computed } from 'mobx'; 3 | import { observer } from 'mobx-react'; 4 | import autoBind from 'react-autobind'; 5 | import Grid from '../Grid'; 6 | import rrjsTool from '../rrj-compile/index.js'; 7 | 8 | import '../../static/TestCSS.css'; 9 | import Toggle from './Toggle'; 10 | import ToggleFolder from './ToggleFolder'; 11 | import NumWheel from './NumWheel'; 12 | import TextParam from './TextParam'; 13 | import CompactObjView from './CompactObjView'; 14 | import DataMaker from './DataMaker'; 15 | 16 | import DocStore from './DocStore'; 17 | 18 | 19 | @observer class DocUI extends React.Component { 20 | 21 | constructor(props) { 22 | super(props); autoBind(this); 23 | this.rrjs = rrjsTool.createParser(); 24 | this.printer = new rrjsTool.PrettyPrinter( rrjsTool.PrettyPrinter.Options.Companion.JsonPretty); 25 | this.dm = new DataMaker(this.updateDataText); 26 | this.ds = new DocStore(); 27 | this.ds.rrjs = this.rrjs; // for convenience in the computed values. 28 | 29 | this.dataAsObject(); 30 | } 31 | 32 | @observable data = `[ 33 | { "a": 1, "b": 20, "c": 3, "d": 4.5 }, 34 | { "a": 21, "b": 30, "c": 33, "d": "asdf" }, 35 | { "a": 31, "b": 40, "c": 333, "d": "zing" }, 36 | { "a": 41, "b": 30, "c": 33, "d": "asdf" }, 37 | { "a": 51, "b": 40, "c": 333, "d": "zing" }, 38 | { "a": 61, "b": 30, "c": 33, "d": "asdf" }, 39 | { "a": 71, "b": 40, "c": 333, "d": "zing" }, 40 | { "a": 81, "b": 30, "c": 33, "d": "asdf" }, 41 | { "a": 91, "b": 40, "c": 333, "d": "zing" }, 42 | { "a": 101, "b": 30, "c": 33, "d": "asdf" }, 43 | { "a": 111, "b": 40, "c": 333, "d": "zing" }, 44 | { "a": 121, "b": 30, "c": 33, "d": "asdf" }, 45 | { "a": 131, "b": 40, "c": 333, "d": "zing" }, 46 | { "a": 131, "b": 30, "c": 33, "d": "asdf" }, 47 | { "a": 141, "b": 40, "c": 333, "d": "zing" }, 48 | { "a": 151, "b": 30, "c": 33, "d": "asdf" }, 49 | { "a": 161, "b": 40, "c": 333, "d": "zing" }, 50 | { "a": 171, "b": 30, "c": 33, "d": "asdf" }, 51 | { "a": 181, "b": 40, "c": 333, "d": "zing" }, 52 | { "a": 191, "b": 50, "c": 3333, "d": "zong" } 53 | ] 54 | `; // the data AS A STRING for the test editor 55 | @observable cleanData = {}; // the data AS JSON for the fast editor 56 | @observable dataErr = ''; 57 | 58 | @action updateData(evt) { 59 | this.data = evt.target.value; 60 | this.dataAsObject(); 61 | } 62 | @action updateDataText(txt) { 63 | this.data = txt; 64 | this.dataAsObject(); 65 | } 66 | 67 | 68 | 69 | @action setValue(x,y,objKey,newValue) 70 | { 71 | // this is just for the test UI. By making the "source of truth" the text file, i keep things in sync 72 | // cost is that I lose update performance for this test UI. Try another test gui for perf testing. 73 | if(!this.ds.hideEditor){ 74 | this.cleanData = JSON.parse(this.rrjs.stringToJson(this.data)); 75 | this.cleanData[y][objKey]=newValue; 76 | this.data = JSON.stringify(this.cleanData); 77 | } 78 | else{ 79 | this.cleanData[y][objKey]=newValue; 80 | } 81 | } 82 | 83 | cleanClone(){ 84 | var target={}; 85 | Object.assign(target,this.cleanData[0]); 86 | var keyList = Object.keys(this.cleanData[0]); 87 | for (var kc = 0; kc < keyList.length; kc++) { 88 | target[keyList[kc]]=''; 89 | } 90 | return target; 91 | } 92 | 93 | @action onRowAdd(x, y, objKey) { 94 | if(!this.ds.hideEditor){ 95 | this.cleanData = JSON.parse(this.rrjs.stringToJson(this.data)); 96 | this.cleanData.splice(y + 1, 0, this.cleanClone()); 97 | this.data = JSON.stringify(this.cleanData); 98 | } 99 | else{ 100 | this.cleanData.splice(y + 1, 0, this.cleanClone()); 101 | } 102 | } 103 | 104 | @action onRowCut(x, y, objKey) { 105 | if(!this.ds.hideEditor){ 106 | this.cleanData = JSON.parse(this.rrjs.stringToJson(this.data)); 107 | this.cleanData.splice(y, 1); 108 | this.data = JSON.stringify(this.cleanData); 109 | } 110 | else{ 111 | this.cleanData.splice(y, 1); 112 | } 113 | } 114 | 115 | @action onReplaceData(newData) { 116 | if(!this.ds.hideEditor){ 117 | this.cleanData = newData; 118 | this.data = JSON.stringify(this.cleanData); 119 | } 120 | else{ 121 | this.cleanData = newData; 122 | } 123 | } 124 | 125 | 126 | @action onColAdd(x, y, objKey) { }// not implemented yet. 127 | @action onColCut(x, y, objKey) { }// not implemented yet. 128 | @action onDataClear(x, y, objKey) { }// not implemented yet. 129 | @action onGotoPage(page) { window.alert('please load page '+page); } 130 | @action onExport() { window.alert('please export'); } 131 | @action onImport() { window.alert('please import'); } 132 | 133 | @action addColDefRow() { this.ds.addColDefRow(); } 134 | 135 | @action cutColDefRow(x, y, objKey) { 136 | this.ds.colDef.splice(x, 1); 137 | } 138 | 139 | @observable curParamHelp = ""; 140 | 141 | dataAsObject(){ 142 | this.cleanData=[]; 143 | this.dataErr=""; 144 | try { 145 | this.cleanData = JSON.parse(this.rrjs.stringToJson(this.data)); 146 | if (this.cleanData && typeof this.cleanData === "object") { this.dataErr="";} 147 | else{this.cleanData=[];this.dataErr="Invalid JSON."} 148 | } 149 | catch (e) { 150 | try{ 151 | this.cleanData = JSON.parse(this.data); 152 | } 153 | catch(e2){ 154 | this.dataErr="Invalid JSON. Keys and values need to be in quotes."; console.log(e); 155 | } 156 | } 157 | }; 158 | 159 | goMakeL(){ 160 | this.dataErr="Building 50K objects... Disabling text data editor for performance."; 161 | this.ds.hideEditor=true; 162 | this.ds.showDebugStuff=true; 163 | var saneThis = this; 164 | setTimeout(function(){ saneThis.dm.makeL(); saneThis.dataErr=''; }, 100); 165 | } 166 | goMakeLA(){ 167 | this.dataErr="Building 50K arrays... Disabling text data editor for performance."; 168 | this.ds.hideEditor=true; 169 | this.ds.showDebugStuff=true; 170 | var saneThis = this; 171 | setTimeout(function(){ saneThis.dm.makeLA(); saneThis.dataErr=''; }, 100); 172 | } 173 | 174 | 175 | 176 | render() { 177 | 178 | var colListAsText=[]; 179 | for(var cctr=0;cctr); 181 | } 182 | 183 | 184 | toJS(this.ds.jsonStyleCell); 185 | toJS(this.ds.jsonStyleCellOddRow); 186 | toJS(this.ds.jsonStyleHeaderCell); 187 | toJS(this.ds.jsonStyleRowHeaderCell); 188 | toJS(this.ds.jsonStyleData); 189 | toJS(this.ds.jsonStyleDataOddRow); 190 | toJS(this.ds.jsonStyleHeaderData); 191 | toJS(this.ds.jsonStyleRowHeaderData); 192 | toJS(this.ds.jsonStyleInput); 193 | toJS(this.ds.jsonStyleSelected); 194 | 195 | 196 | return ( 197 |

198 |

200 |

201 |
202 |

react-json-grid

203 |

Easy to use, high performance, JSON Grid Editor.

204 | 205 |

Mouseover each tag attribute to see it's purpose.
206 | Click the attribute to show a description.
207 | Shift-Click text boxes to paste in a sample value.
208 | Please report issues at the github page linked above.

Thanks for trying it out!

209 |
210 | Example Data Generators
211 | 212 | 213 | 214 |
215 | 216 | 217 | 218 |
219 | 220 | 221 | 222 |
223 | 224 | 225 |
226 | {this.dataErr}
227 | {this.data} Use this to see that the grid and the data are in sync.
228 | {!this.ds.hideEditor && 229 |

230 |           }
231 |           
232 |           <br/>              
233 |               <br/>Parameter UI<br/>
234 |               <div style={{display:'inline-block',verticalAlign:'top',margin:'5px'}}>
235 |               <ToggleFolder action={this.ds.toggleShowSizeStuff} toggleValue={this.ds.showSizeStuff} label='Sizing' help='display API for sizing' />
236 |               { this.ds.showSizeStuff &&  
237 |               <div style={{marginLeft:'40px'}}>
238 |                 <NumWheel action={this.ds.setBorderWidth} curValue={this.ds.propBorderWide} mouseOverValue={5} label='borderWide' help='width of the border between cells' />
239 |                 <NumWheel action={this.ds.setPadWidth} curValue={this.ds.propPadWide} label='padWide' mouseOverValue={5} help='width of the padding inside each cell' />
240 |                 <NumWheel action={this.ds.setGridWide} incr={100} curValue={this.ds.propGridWide} mouseOverValue={150} label='gridWide' help={<div>Forced width of the grid.<br />Not set by CSS because the number is needed for javascript calculations.</div>} />
241 |                 <NumWheel action={this.ds.setGridHigh} incr={100} curValue={this.ds.propGridHigh}  mouseOverValue={250} label='gridHigh' help={<div>Forced height of the grid.<br />Not set by CSS because the number is needed for javascript calculations.</div>} />
242 |                 <NumWheel action={this.ds.setRowHigh} curValue={this.ds.propRowHigh} label='rowHigh'  mouseOverValue={50} help='over-ride default row height' />
243 |                 <NumWheel action={this.ds.setRowHeaderHigh} curValue={this.ds.propRowHeaderHigh} mouseOverValue={50}  label='colHeaderHigh' help='over-ride row header height' />
244 |                 <NumWheel action={this.ds.setMinColWide} incr={5} curValue={this.ds.propMinColWide} mouseOverValue={50} label='minColWide' help='forced minimum auto grid width.  Over-ridden by column properties.' />
245 |                 <Toggle action={this.ds.toggleColHeaderHide} toggleValue={this.ds.colHeaderHide} label='colHeaderHide' help='hide/show column header.' />
246 |                 <Toggle action={this.ds.toggleGridHighCollapse} toggleValue={this.ds.gridHighCollapse} label='gridHighCollapse' help='If there are fewer rows than needed by the gridHigh setting, shrink the height of the grid.  Otherwise, use the full space.' />
247 |                 </div>
248 |               }
249 |               <ToggleFolder action={this.ds.toggleShowStyleStuff} toggleValue={this.ds.showStyleStuff} label='Style' help='display API for style objects' />
250 |               {this.ds.showStyleStuff &&
251 |                 <div style={{ marginLeft: '40px' }}>
252 |                   NOTE: enter styles in the JSX format.<br />For example:  {backgroundColor:'lightblue'}<br />
253 |                   <br /><u>background style objects</u>
254 |                   <TextParam action={this.ds.setStyleCell} curValue={this.ds.styleCell} label='styleCell' help='style for cells.' mouseOverValue="{backgroundColor:'beige'}" />
255 |                   <TextParam action={this.ds.setStyleCellOddRow} curValue={this.ds.styleCellOddRow} label='styleCellOddRow' help='style for cells in odd numbered rows.' mouseOverValue="{backgroundColor:'beige'}" />
256 |                   <TextParam action={this.ds.setStyleHeaderCell} curValue={this.ds.styleHeaderCell} label='styleHeaderCell' help='style for column header cells (and row headers, if row header style is not specified.)' mouseOverValue="{backgroundColor:'beige'}" />
257 |                   <TextParam action={this.ds.setStyleRowHeaderCell} curValue={this.ds.styleRowHeaderCell} label='styleRowHeaderCell' help='style for row header cells (only visible when pivotOn is set)' mouseOverValue="{backgroundColor:'beige'}" />
258 | 
259 |                   <br /><u>data style objects</u>
260 |                   <TextParam action={this.ds.setStyleData} curValue={this.ds.styleData} label='styleData' help='style for data in cells' mouseOverValue="{textAlign:'center',backgroundColor:'lightgreen',transform: rotate(45deg)}" />
261 |                   <TextParam action={this.ds.setStyleDataOddRow} curValue={this.ds.styleDataOddRow} label='styleDataOddRow' help='style for data in cells in odd numbered rows.' mouseOverValue="{textAlign:'center',backgroundColor:'lightgreen',transform: rotate(45deg)}" />
262 |                   <TextParam action={this.ds.setStyleHeaderData} curValue={this.ds.styleHeaderData} label='styleHeaderData' help='style for data in column header cells (and row headers, if row header style is not specified.)' mouseOverValue="{textAlign:'center',backgroundColor:'lightgreen',transform: rotate(45deg)}" />
263 |                   <TextParam action={this.ds.setStyleRowHeaderData} curValue={this.ds.styleRowHeaderData} label='styleRowHeaderData' help='style for data in row header cells (only visible when pivotOn is set)' mouseOverValue="{textAlign:'center',backgroundColor:'lightgreen',transform: rotate(45deg)}" />
264 | 
265 |                   <br /><u>selection/input classes</u>
266 |                   <TextParam action={this.ds.setStyleInput} curValue={this.ds.styleInput} label='styleInput' help='style for default cells.  cannot control border or padding.' mouseOverValue="{backgroundColor:'lightgreen'}" />
267 |                   <TextParam action={this.ds.setStyleSelected} curValue={this.ds.styleSelected} label='styleSelected' help='style object to apply to the currently selected cell' mouseOverValue="{backgroundColor:'black',color:'white'}" />
268 | 
269 |                 </div>
270 |               }
271 |               <ToggleFolder action={this.ds.toggleShowClassStuff} toggleValue={this.ds.showClassStuff} label='Class' help='display API for css class usage' />
272 |               {this.ds.showClassStuff &&
273 |                 <div style={{ marginLeft: '40px' }}>
274 |                   NOTE: here are some CSS class names to try:<br />
275 |                   <div style={{ marginLeft: '10px' }}>BasicBeige, GreenRotate , PinkRotate , RedRotate</div>
276 |                   <div style={{ marginLeft: '10px' }}>BackgroundBlue , BackgroundYellow</div>
277 |                   <div style={{ marginLeft: '10px' }}>Gradient1 , Gradient2</div>
278 | 
279 |                   <br /><u>background classes</u>
280 |                   <TextParam action={this.ds.setClassCell} curValue={this.ds.classCell} mouseOverValue='Gradient1' label='classCell' help='class name for cell container boxes.  ( for example, background color )' />
281 |                   <TextParam action={this.ds.setClassCellOddRow} curValue={this.ds.classCellOddRow} mouseOverValue='Gradient1' label='classCellOddRow' help='class name for cell backgrounds on odd row numbers.' />
282 |                   <TextParam action={this.ds.setClassHeaderCell} curValue={this.ds.classHeaderCell} mouseOverValue='Gradient1' label='classHeaderCell' help='classname to apply to header cells.  For example: background colors.  cannot control border or padding.' />
283 |                   <TextParam action={this.ds.setClassRowHeaderCell} curValue={this.ds.classRowHeaderCell} mouseOverValue='Gradient1' label='classRowHeaderCell' help='style for row header cells when pivotOn is set.  cannot control border or padding.' />
284 | 
285 |                   <br /><u>data classes</u>
286 |                   <TextParam action={this.ds.setClassData} curValue={this.ds.classData} mouseOverValue='GreenRotate' label='classData' help='class name for cell data. (for example, rotations )' />
287 |                   <TextParam action={this.ds.setClassDataOddRow} curValue={this.ds.classDataOddRow} mouseOverValue='GreenRotate' label='classDataOddRow' help='class name for cell data on odd row numbers.' />
288 |                   <TextParam action={this.ds.setClassHeaderData} curValue={this.ds.classHeaderData} mouseOverValue='GreenRotate' label='classHeaderData' help='classname to apply to header data. For example: text rotations where you do not want to rotate the cell itself.  cannot control border or padding.' />
289 |                   <TextParam action={this.ds.setClassRowHeaderData} curValue={this.ds.classRowHeaderData} mouseOverValue='GreenRotate' label='classRowHeaderData' help='style for row header cells when pivotOn is set.  cannot control border or padding.' />
290 | 
291 |                   <br /><u>selection/input classes</u>
292 |                   <TextParam action={this.ds.setClassInput} curValue={this.ds.classInput} mouseOverValue='Gradient1' label='classInput' help='class name for input cells' />
293 |                   <TextParam action={this.ds.setClassSelected} curValue={this.ds.classSelected} mouseOverValue='Gradient1' label='classSelected' help='class name for selected cells..' />
294 |                 </div>
295 |               }              
296 |               <ToggleFolder action={this.ds.toggleShowEditStuff} toggleValue={this.ds.showEditStuff} label='Tools' help='display edit tools' />
297 |               {this.ds.showEditStuff &&
298 |                 <div style={{ marginLeft: '40px' }}>
299 |                   <Toggle action={this.ds.toggleToolsAddCut} toggleValue={this.ds.showToolsAddCut} label='showToolsAddCut' help='shows buttons to add/remove rows' />
300 |                   <Toggle action={this.ds.toggleToolsPage} toggleValue={this.ds.showToolsPage} label='showToolsPage' help='show buttons to select different pages of data' />
301 |                   <Toggle action={this.ds.toggleToolsImpExp} toggleValue={this.ds.showToolsImpExp} label='showToolsImpExp' help='show buttons to import or export the data' />
302 |                   <Toggle action={this.ds.toggleToolsCustom} toggleValue={this.ds.showToolsCustom} label='showToolsCustom' help={<div>shows user supplied buttons.<br />Note that you must supply an array of components to this attribute</div>} />
303 |                   <TextParam action={this.ds.setToolsButtonClass} curValue={this.ds.toolsButtonClass} label='toolsButtonClass' help='class to apply to tool buttons.' mouseOverValue='Gradient1' />
304 |                   <NumWheel action={this.ds.setPageCount} curValue={this.ds.pageCount} label='pageCount' help={<div>when using the page tools, this sets the number of pages to have available. The value shows in Alt-Text for the buttons.</div>} />
305 |                   <Toggle action={this.ds.toggleEditDisabled} toggleValue={this.ds.editDisabled} label='editDisabled' help='disable all grid editing' />
306 |                   <Toggle action={this.ds.toggleEditAsText} toggleValue={this.ds.editAsText} label='editAsText' help={<div>Converts the JSON to pipe delimited text<br />one item per line, for easy text editing.<br />Best for one dimensional arrays.</div>} />
307 |                 </div>
308 |               }              
309 |               <ToggleFolder action={this.ds.toggleColumnList} toggleValue={this.ds.columnList} label='Columns' help='define column meta data' />
310 |               {this.ds.columnList &&
311 |                 <div style={{marginLeft:'10px'}}>
312 |                   <Grid
313 |                   data={this.ds.colDef}
314 |                   columnList={[
315 |                     { key: 'key', altText: 'key name (or index) of the data for this column.  You can re-order the key names to re-order the columns displayed.' },
316 |                     { key: 'title', altText: 'text in the title bar of the column' },
317 |                     { key: 'editDisabled', easyBool: true, altText: 'disable editing for this column' },
318 |                     { key: 'widePct', easyFloat: true, altText: 'percent of grid width to make this column.  Too big will cause side scrolling!' },
319 |                     { key: 'widePx', easyInt: true, altText: 'width in pixels to make this column.  Too big will cause side scrolling!' },
320 |                     { key: 'easyBool', easyBool: true, altText: 'render this column as a check box' },
321 |                     { key: 'easyInt', easyBool: true, altText: 'render and validate this column as an integer' },
322 |                     { key: 'easyFloat', easyBool: true, altText: 'render and validate this column as an float' },
323 |                     { key: 'easyDollar', easyBool: true, altText: 'render and validate this column as dollars' },
324 |                     { key: 'easyEuro', easyBool: true, altText: 'render and validate this column as euros' },
325 |                     { key: 'easyPound', easyBool: true, altText: 'render and validate this column as pounds' },
326 |                     { key: 'easyDate', easyBool: true, altText: 'render and validate this column as a date' },
327 |                     { key: 'easyDateTime', easyBool: true, altText: 'render and validate this column as a datetime' },
328 |                     { key: 'easyMenu', altText: 'render and validate this column as a menu. supply an array of values easyMenu={[a,b,c,d]} or a pipe separated list easyMenu={"a|b|c|d"}' },
329 |                     { key: 'altText', altText: 'provide help text when mousing over the column header' },
330 | 
331 |                     { key: 'styleCell', altText: 'provide help text when mousing over the column header' },
332 |                     { key: 'styleData', altText: 'provide help text when mousing over the column header' },
333 |                     { key: 'styleHeaderCell', altText: 'provide help text when mousing over the column header' },
334 |                     { key: 'styleHeaderData', altText: 'provide help text when mousing over the column header' },
335 | 
336 | 
337 |                     { key: 'classCell', altText: 'provide help text when mousing over the column header' },
338 |                     { key: 'classData', altText: 'provide help text when mousing over the column header' },
339 |                     { key: 'classHeaderCell', altText: 'provide help text when mousing over the column header' },
340 |                     { key: 'classHeaderData', altText: 'provide help text when mousing over the column header' },
341 | 
342 |                     { key: 'compHeader', altText: 'provide help text when mousing over the column header' },
343 |                     { key: 'compInput', altText: 'provide help text when mousing over the column header' },
344 |                     { key: 'compCell', altText: 'provide help text when mousing over the column header' },
345 |                   ]}
346 |                   pivotOn='title'
347 |                   showToolsAddCut
348 |                   onRowAdd={this.addColDefRow}
349 |                   onRowCut={this.cutColDefRow}
350 |                   pivotRowHeaderWide={110}
351 |                   onChange={this.ds.setColDefValue}
352 |                   styleRowHeaderCell={{ textAlign: 'left' }}
353 |                   styleCell={{ backgroundColor: 'white' }}
354 |                   gridHigh={900}
355 |                   gridWide={380}
356 |                   gridHighCollapse
357 |                   
358 |                 />
359 |                 </div>
360 |               }
361 |               <ToggleFolder action={this.ds.toggleShowPivotStuff} toggleValue={this.ds.showPivotStuff} label='Pivot' help='display data pivot' />
362 |               {this.ds.showPivotStuff &&
363 |                 <div style={{marginLeft:'40px'}}>
364 |                   <Toggle action={this.ds.togglePivotOn} toggleValue={this.ds.pivotOn} label='pivotOn' help='pivot the data on a key.' />
365 |                   <NumWheel action={this.ds.setPivotRowHeaderWide} incr={25} curValue={this.ds.pivotRowHeaderWide} label='pivotRowHeaderWide' help={<div>when pivotOn is set,<br />use this to set the pixel width of the row header</div>} />
366 |                 </div>
367 |               }
368 |               <ToggleFolder action={this.ds.toggleShowFormatStuff} toggleValue={this.ds.showFormatStuff} label='Format' help='display API for date, time and other formatters' />
369 |               {this.ds.showFormatStuff &&
370 |               <div style={{marginLeft:'40px'}}>
371 |                 <TextParam action={this.ds.setFormatDate} curValue={this.ds.formatDate} label='formatDate' help='preferred date format.' />
372 |                 <TextParam action={this.ds.setFormatTime} curValue={this.ds.formatTime} label='formatTime' help='preferred time format.' />
373 |                 </div>
374 |               }
375 |               <ToggleFolder action={this.ds.toggleShowDebugStuff} toggleValue={this.ds.showDebugStuff} label='Debug' help='grid tools to help you debug your grid usage.' />
376 |               { this.ds.showDebugStuff &&  
377 |               <div style={{marginLeft:'40px'}}>
378 |                 <Toggle action={this.ds.toggleOutline} toggleValue={this.ds.showOutline} label='Show test outline' help='Not grid related.  Just shows an outline around the container holding the Grid.' />
379 |                 <Toggle action={this.ds.toggleDebugGridMath} toggleValue={this.ds.debugGridMath} label='debugGridMath' help='Look at the logs to see what the grid thinks sizes should be.  Used to debug external CSS issues.' />
380 |                 <Toggle action={this.ds.toggleEditor} toggleValue={this.ds.hideEditor} label='Hide text editor' help='Not grid related.  Keeping the data text editor in sync with the grid costs more performance than the grid does.  When running large data test, this editor is disabled.' />
381 |                 ( The Example Data text editor<br/> has much worse performance than react-json-grid.<br/>Use "Hide text editor" to disable it<br/> while doing performance tests. )
382 |               </div>}              
383 |               <ToggleFolder action={this.ds.toggleShowKeyboardStuff} toggleValue={this.ds.showKeyboardStuff} label='Keys' help='enabled keyboard bindings.' />
384 |                 {this.ds.showKeyboardStuff &&
385 |                 <div style={{ marginLeft: '40px' }}>
386 |                 Key Bindings: <br />Arrows, PgUp, PgDn, Home, End, <br />
387 |                 Enter, Shift-Enter, Tab, Shift-Tab, , Escape<br /> 
388 |                 Ctrl-C, Ctrl-V, Ctrl-X.<br /><br />
389 |                 Multi-Select Features: <br/>Block Select via Shift-Arrow Keys and Shift-Click<br />
390 |               </div>}
391 | 
392 |               <ToggleFolder action={this.ds.toggleShowCompStuff} toggleValue={this.ds.showCompStuff} label='Components' help='ability to use components for key items.' />
393 |                {this.ds.showCompStuff &&
394 |                 <div style={{ marginLeft: '40px' }}>              
395 |                 <br/><u>component slots</u>
396 |                   <TextParam action={this.ds.setClassCell}            curValue={this.ds.classCell} label='compCell' help='class name for cell container boxes.  ( for example, background color )' />
397 |                   <TextParam action={this.ds.setClassHeaderCell}      curValue={this.ds.classHeaderCell} label='compHeader' help='classname to apply to header cells.  For example: background colors.  cannot control border or padding.' />
398 |                   <TextParam action={this.ds.setClassRowHeaderCell}   curValue={this.ds.classRowHeaderCell} label='compRowHeader' help='style for row header cells when pivotOn is set.  cannot control border or padding.' />              
399 |                 </div>}
400 |               <br /><br /><br /><br /><br /><br />
401 |             </div>
402 |           </div>
403 | 
404 |         </div>
405 | 
406 |   <div style={{marginLeft:'25px',position:'absolute',top:'0px',bottom:'0px',left:'455px',right:'0px',overflow:'auto'}}>
407 |           <br />
408 |           <br />
409 |           <br />
410 |       <Grid style={{ outline: this.ds.outlineCSS }}
411 |         gridHigh={this.ds.propGridHigh}
412 |         gridWide={this.ds.propGridWide}      
413 |         editDisabled={this.ds.editDisabled}
414 |         editAsText={this.ds.editAsText}
415 | 
416 | 
417 | 
418 | 
419 |         rowHigh={this.ds.propRowHigh}
420 |         colHeaderHigh={this.ds.propRowHeaderHigh}
421 |         colHeaderHide={this.ds.colHeaderHide}
422 |         gridHighCollapse={this.ds.gridHighCollapse}
423 |         borderWide={this.ds.propBorderWide}
424 |         padWide={this.ds.propPadWide}
425 |         data={this.cleanData}
426 |         onChange={this.setValue}
427 |         onRowAdd={this.onRowAdd}
428 |         onRowCut={this.onRowCut}
429 |         onReplaceData={this.onReplaceData}        
430 |         onColAdd={this.onColAdd}
431 |         onColCut={this.onColCut}
432 |         onImport={this.onImport}
433 |         onExport={this.onExport}
434 |         onGotoPage={this.onGotoPage}
435 |         pivotOn={ this.ds.pivotOn? ( Object.keys( (this.cleanData[0]||{a:5}) )[0] ) :null}
436 |         pivotRowHeaderWide={this.ds.pivotRowHeaderWide}
437 |         columnList={ this.ds.columnList?this.ds.colDef:null }
438 | 
439 |         showToolsAddCut={this.ds.showToolsAddCut}
440 |         showToolsPage={this.ds.showToolsPage}
441 |         showToolsImpExp={this.ds.showToolsImpExp}
442 |         showToolsCustom={this.ds.showToolsCustom && <div>Some Funky Thing</div>}
443 |         toolsButtonClass={this.ds.toolsButtonClass}
444 |         pageCount={this.ds.pageCount}
445 | 
446 |         formatDate={this.ds.formatDate}
447 |         formatTime={this.ds.formatTime}
448 | 
449 |         styleCell={this.ds.jsonStyleCell}        
450 |         styleCellOddRow={this.ds.jsonStyleCellOddRow}        
451 |         styleHeaderCell={this.ds.jsonStyleHeaderCell}
452 |         styleRowHeaderCell={this.ds.jsonStyleRowHeaderCell}
453 |         styleData={this.ds.jsonStyleData}        
454 |         styleDataOddRow={this.ds.jsonStyleDataOddRow}        
455 |         styleHeaderData={this.ds.jsonStyleHeaderData}
456 |         styleRowHeaderData={this.ds.jsonStyleRowHeaderData}
457 |         styleInput={this.ds.jsonStyleInput}
458 |         styleSelected={this.ds.jsonStyleSelected} 
459 | 
460 |         classCell={this.ds.classCell}
461 |         classData={this.ds.classData}
462 |         classHeaderCell={this.ds.classHeaderCell}
463 |         classHeaderData={this.ds.classHeaderData}
464 |         classRowHeaderCell={this.ds.classRowHeaderCell}
465 |         classRowHeaderData={this.ds.classRowHeaderData}
466 |         classCellOddRow={this.ds.classCellOddRow}
467 |         classDataOddRow={this.ds.classDataOddRow}
468 |         classInput={this.ds.classInput}
469 |         classSelected={this.ds.classSelected}
470 | 
471 |         debugGridMath={this.ds.debugGridMath}
472 |       />
473 |       <br/>
474 |       <div style={{font:'20px monospace'}}>
475 |           <Grid
476 |           {this.ds.propGridWide > -1 && <span><br />  gridWide={{this.ds.propGridWide}}  </span>}
477 |           {this.ds.propGridHigh > -1 && <span><br />  gridHigh={{this.ds.propGridHigh}}  </span>}
478 |           {this.ds.propRowHigh > -1 && <span><br />  rowHigh={{this.ds.propRowHigh}}  </span>}
479 |           {this.ds.editDisabled && <span><br />  editDisabled={{''+this.ds.editDisabled}}  </span>}
480 |           {this.ds.editAsText && <span><br />  editAsText={{''+this.ds.editAsText}}  </span>}
481 |           {this.ds.propRowHeaderHigh > -1 && <span><br />  colHeaderHigh={{this.ds.propRowHeaderHigh}}  </span>}
482 |           {this.ds.propBorderWide > -1 && <span><br />  borderWide={{this.ds.propBorderWide}}  </span>}
483 |           {this.ds.pivotOn && <span><br />  pivotOn={ Object.keys( (this.cleanData[0]||{a:5}) )[0] }  </span>}
484 |           {this.ds.pivotRowHeaderWide > -1 && <span><br />  pivotRowHeaderWide={{''+this.ds.pivotRowHeaderWide}}  </span>}          
485 | 
486 |           {this.ds.showToolsAddCut && <span><br />  showToolsAddCut</span>}
487 |           {this.ds.showToolsImpExp && <span><br />  showToolsImpExp</span>}
488 |           {this.ds.showToolsPage && <span><br />  showToolsPage</span>}
489 |           {this.ds.showToolsCustom && <span><br />  showToolsCustom={{'<YourCustomComponent/>'}}  </span>}
490 |           {this.ds.toolsButtonClass && <span><br />  toolsButtonClass='{''+this.ds.toolsButtonClass}'</span>}
491 |           {(this.ds.pageCount>0) && <span><br />  pageCount={{''+this.ds.pageCount}}</span>}
492 | 
493 |           {this.ds.propPadWide > -1 && <span><br />  padWide={{this.ds.propPadWide}}  </span>}
494 |           {this.ds.colHeaderHide && <span><br />  colHeaderHide={{''+this.ds.colHeaderHide}}  </span>}
495 | 
496 |         {this.ds.styleCell && <span><br />  styleCell={{this.ds.styleCell}}</span>}
497 |         {this.ds.styleCellOddRow && <span><br />  styleCellOddRow={{this.ds.styleCellOddRow}}</span>}
498 |         {this.ds.styleHeaderCell && <span><br />  styleHeaderCell={{this.ds.styleHeaderCell}}</span>}
499 |         {this.ds.styleRowHeaderCell && <span><br />  styleRowHeaderCell={{this.ds.styleRowHeaderCell}}</span>}
500 | 
501 |         {this.ds.styleData && <span><br />  styleData={{this.ds.styleData}}</span>}
502 |         {this.ds.styleDataOddRow && <span><br />  styleDataOddRow={{this.ds.styleDataOddRow}}</span>}
503 |         {this.ds.styleHeaderData && <span><br />  styleHeaderData={{this.ds.styleHeaderData}}</span>}
504 |         {this.ds.styleRowHeaderData && <span><br />  styleRowHeaderData={{this.ds.styleRowHeaderData}}</span>}
505 | 
506 |         {this.ds.styleInput && <span><br />  styleInput={{this.ds.styleInput}}</span>}
507 |         {this.ds.styleSelected && <span><br />  styleSelected={{this.ds.styleSelected}}</span>}
508 | 
509 | 
510 | 
511 |           {this.ds.classCell && <span><br />  classCell='{this.ds.classCell}'</span>}
512 |           {this.ds.classCellOddRow && <span><br />  classCellOddRow='{this.ds.classCellOddRow}'</span>}
513 |           {this.ds.classHeaderCell && <span><br />  classHeaderCell='{this.ds.classHeaderCell}'</span>}
514 |           {this.ds.classRowHeaderCell && <span><br />  classRowHeaderCell='{this.ds.classRowHeaderCell}'</span>}
515 |           {this.ds.classData && <span><br />  classData='{this.ds.classData}'</span>}
516 |           {this.ds.classDataOddRow && <span><br />  classDataOddRow='{this.ds.classDataOddRow}'</span>}
517 |           {this.ds.classHeaderData && <span><br />  classHeaderData='{this.ds.classHeaderData}'</span>}
518 |           {this.ds.classRowHeaderData && <span><br />  classRowHeaderData='{this.ds.classRowHeaderData}'</span>}
519 |           {this.ds.classInput && <span><br />  classInput='{this.ds.classInput}'</span>}
520 |           {this.ds.classSelected && <span><br />  classSelected='{this.ds.classSelected}'</span>}
521 |                   
522 |                   
523 |           {this.ds.formatDate && <span><br />  formatDate={{this.ds.formatDate}}</span>}
524 |           {this.ds.formatTime && <span><br />  formatTime={{this.ds.formatTime}}</span>}
525 |           {this.ds.gridHighCollapse && <span><br />  gridHighCollapse</span>}
526 |           {this.ds.debugGridMath && <span><br />  debugGridMath</span>}                    
527 |           {this.ds.columnList && <span><br />  columnList={[{colListAsText}  ]}</span>}          
528 |           <br/>  data={this.data}
529 |           <br/>  onChange={(x,y,objKey,value)=>{}}  
530 |           
531 |           <br />/>
532 |       </div>
533 |     </div>
534 |   </div>
535 |     );
536 |   }
537 | }
538 | 
539 | 
540 | export default DocUI;

--------------------------------------------------------------------------------
/src/docTool/NumWheel.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import autoBind from 'react-autobind';
 3 | 
 4 | import ArrowLeftThick from 'mdi-react/ArrowLeftThickIcon';
 5 | import ArrowRightThick from 'mdi-react/ArrowRightThickIcon';
 6 | import ArrowLeft from 'mdi-react/ArrowLeftIcon';
 7 | import ArrowRight from 'mdi-react/ArrowRightIcon';
 8 | import CloseOctagonOutline from 'mdi-react/CloseOctagonOutlineIcon';
 9 | 
10 | import { observable, action } from 'mobx';
11 | import { observer } from 'mobx-react';
12 | 
13 | 
14 | @observer class NumWheel extends React.Component {
15 |   constructor(props) { 
16 |     super(props); autoBind(this); 
17 |     this.holdVal = -1;
18 |   }
19 | 
20 |   @observable isShowingHelp=false;
21 |   @action toggleHelpOn(){ this.isShowingHelp=!this.isShowingHelp; }
22 |   @action toggleHelpOff(){ this.isShowingHelp=false; }
23 | 
24 |   defVal() { this.props.action(-1); } // account for rounding error
25 | 
26 |   @action onmouseenter(){
27 |     this.holdVal = this.props.curValue;
28 |     if(this.props.mouseOverValue){ this.props.action(this.props.mouseOverValue); }
29 |     
30 |   }
31 |   @action onmouseleave(){
32 |     this.props.action(this.holdVal);
33 |   }
34 |   
35 | 
36 |   onChange(evt){
37 |     var val = Number(evt.target.value);
38 |     if(!val){ val=-1; }
39 |     this.props.action(val);
40 |   }
41 | 
42 |   more1() {        
43 |     this.props.action(this.props.curValue + 1);  
44 |   }
45 |   moreVal() {    
46 |     if(this.props.curValue===-1){    this.props.action(this.props.incr||5);return;} // make nice round increments
47 |     this.props.action(this.props.curValue + (this.props.incr||5));  
48 |   }
49 | 
50 |   less1() {
51 |     if (this.props.curValue - 1 < -1){
52 |       this.props.action(-1);
53 |       return;
54 |     }
55 |     this.props.action(this.props.curValue - 1);
56 |   } // account for rounding error
57 |   lessVal() {
58 |     if ((this.props.curValue - (this.props.incr||5)) <= 0) {
59 |       this.props.action(-1)
60 |       return;
61 |     };
62 |     
63 |     this.props.action(this.props.curValue - (this.props.incr||5));
64 |   } // account for rounding error
65 | 
66 |   render() {
67 | 
68 |     var displayVal = this.props.curValue;
69 |     if (-1 === displayVal) { displayVal='-'; }
70 |     var helpDisplay={transition:'0.1s',height:'0px',marginLeft:'15px',overflow:'hidden'};
71 |     if(this.isShowingHelp){ helpDisplay={transition:'0.1s',height:'75px',marginLeft:'15px',overflow:'hidden'}}
72 | 
73 |     return( 
74 |     <div>
75 |       <div style={{verticalAlign: 'middle',lineHeight:'normal',display: 'flex',alignItems:'center'}}>
76 |         <div style={{display:'inline-block',minWidth:'175px',font:'16px monospace',cursor:'help'}} onClick={this.toggleHelpOn}  onMouseEnter={this.onmouseenter} onMouseLeave={this.onmouseleave} >{this.props.label}</div>
77 |         <CloseOctagonOutline onClick={this.defVal}/>
78 |         <ArrowLeftThick onClick={this.lessVal}/>
79 |         <ArrowLeft onClick={this.less1}/>
80 |         <input style={{display:'inline-block',minWidth:'40px',maxWidth:'40px',textAlign:'center'}} value={displayVal} onChange={this.onChange}/>
81 |         <ArrowRight onClick={this.more1}/> 
82 |         <ArrowRightThick onClick={this.moreVal}/> 
83 |       </div>
84 |       <div style={helpDisplay}>{this.props.help}</div>
85 |     </div>
86 |     );
87 |   }
88 | }
89 | 
90 | 
91 | export default NumWheel;

--------------------------------------------------------------------------------
/src/docTool/TextParam.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import autoBind from 'react-autobind';
 3 | 
 4 | import { observable, action } from 'mobx';
 5 | import { observer } from 'mobx-react';
 6 | 
 7 | 
 8 | @observer class TextParam extends React.Component {
 9 |   constructor(props) { 
10 |     super(props); 
11 |     autoBind(this); 
12 |     this.holdVal='';
13 | 
14 |   }
15 | 
16 |   @observable isShowingHelp=false;
17 |   @action toggleHelpOn(){ this.isShowingHelp=!this.isShowingHelp; }
18 |   @action toggleHelpOff(){ this.isShowingHelp=false; }
19 | 
20 |   @action onmouseenter(){
21 |     this.holdVal = this.props.curValue;
22 |     var fakeEvt={};
23 |     fakeEvt.target={};
24 |     fakeEvt.target.value=this.props.mouseOverValue;
25 |     if(this.props.mouseOverValue && this.props.action){ this.props.action(fakeEvt); }    
26 |   }
27 |   @action onmouseleave(){
28 |     var fakeEvt={};
29 |     fakeEvt.target={};
30 |     fakeEvt.target.value=this.holdVal;
31 |     if(this.props.mouseOverValue && this.props.action){this.props.action(fakeEvt);}
32 |   }
33 |   @action onClick(evt){ 
34 |     if(evt.shiftKey){
35 |       var fakeEvt={};
36 |       fakeEvt.target={};
37 |       fakeEvt.target.value=this.props.mouseOverValue;
38 |       this.props.action(fakeEvt);
39 |     }  
40 |   }
41 |   
42 |   
43 | 
44 |   render() {    
45 |     var helpDisplay={transition:'0.1s',height:'0px',marginLeft:'15px',overflow:'hidden'};
46 |     if(this.isShowingHelp){ helpDisplay={transition:'0.1s',height:'75px',marginLeft:'15px',overflow:'hidden'}}
47 |     
48 |     return (
49 |       <div>
50 |         <div style={{verticalAlign: 'middle',lineHeight:'normal',display: 'flex',alignItems:'center'}}>
51 |           <div style={{display:'inline-block',minWidth:'175px',font:'16px monospace',cursor:'help'}} 
52 |                onClick={this.toggleHelpOn} onMouseEnter={this.onmouseenter} onMouseLeave={this.onmouseleave} >{this.props.label}</div>
53 |           <input style={{display: 'inline-block',width:'200px',verticalAlign:'middle' }} onChange={this.props.action} value={this.props.curValue} onClick={this.onClick}/>
54 |         </div>
55 |         <div style={helpDisplay}>{this.props.help}</div>
56 |       </div>
57 |         
58 |     );
59 |   }
60 | }
61 | 
62 | 
63 | export default TextParam;

--------------------------------------------------------------------------------
/src/docTool/Toggle.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import autoBind from 'react-autobind';
 3 | import CheckEmpty from 'mdi-react/CheckboxBlankOutlineIcon';
 4 | import CheckFull from 'mdi-react/CheckboxMarkedOutlineIcon';
 5 | 
 6 | import { observable, action } from 'mobx';
 7 | import { observer } from 'mobx-react';
 8 | 
 9 | 
10 | 
11 | @observer class Toggle extends React.Component {
12 |   constructor(props) { 
13 |     super(props); autoBind(this); 
14 |     this.holdVal = false;
15 |   }
16 | 
17 |   @observable isShowingHelp = false;
18 |   @action toggleHelpOn() { this.isShowingHelp = !this.isShowingHelp; }
19 |   @action toggleHelpOff() { this.isShowingHelp = false; }
20 | 
21 | 
22 | 
23 |   @action onmouseenter(){
24 |     this.holdVal = this.props.toggleValue;
25 |     if(!this.props.toggleValue){ this.props.action(); }
26 |     
27 |   }
28 |   @action onmouseleave(){
29 |     if(!this.holdVal && this.props.toggleValue){ this.props.action(); }
30 |   }
31 | 
32 |   render() {    
33 |     var rval = 'rotate(90deg)';
34 |     if(this.props.toggleValue){rval='rotate(00deg)';}
35 |     var helpDisplay = { transition: '0.1s', height: '0px', marginLeft: '15px', overflow: 'hidden' };
36 |     if (this.isShowingHelp) { helpDisplay = { transition: '0.1s', height: '75px', marginLeft: '15px', overflow: 'hidden' } }
37 |     
38 |   
39 |     return (
40 |     <div>      
41 |       <div style={{display: 'flex',alignItems:'center'}}>
42 |         <div style={{ display: 'inline-block', minWidth: '175px', font: '16px monospace', cursor: 'help' }} 
43 |              onClick={this.toggleHelpOn} onMouseEnter={this.onmouseenter} onMouseLeave={this.onmouseleave} >
44 |           {this.props.label}
45 |         </div>
46 |         <div style={{verticalAlign:'middle',display: 'inline-block',transform: rval,transition: '0.2s'}}  onClick={this.props.action} >
47 |           {this.props.toggleValue?<CheckFull style={{marginLeft:'2px'}}/>:<CheckEmpty style={{marginRight:'2px'}}/>}
48 |         </div> 
49 |       </div>
50 |       <div style={helpDisplay}>{this.props.help}</div>
51 |     </div >      
52 |     );
53 |   }
54 | }
55 | 
56 | 
57 | export default Toggle;

--------------------------------------------------------------------------------
/src/docTool/ToggleFolder.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import autoBind from 'react-autobind';
 3 | import FolderOpen from 'mdi-react/FolderOpenIcon';
 4 | import FolderClose from 'mdi-react/FolderIcon';
 5 | 
 6 | import { observable, action } from 'mobx';
 7 | import { observer } from 'mobx-react';
 8 | 
 9 | 
10 | 
11 | @observer class ToggleFolder extends React.Component {
12 |   constructor(props) { super(props); autoBind(this); }
13 | 
14 |   render() {    
15 |   
16 |     return (
17 |     <div>      
18 |         <div style={{ display: 'flex', alignItems: 'center' }} onClick={this.props.action}>
19 |         <div style={{verticalAlign:'middle',display: 'inline-block',fontSize:'22px',marginTop:'2px'}}  >
20 |           {this.props.toggleValue?<FolderOpen/>:<FolderClose/>}
21 |         </div>
22 |           <div style={{ display: 'inline-block', minWidth: '175px',color:'black', font: '22px monospace', cursor: 'help', fontWeight: 'bold' }}> {this.props.label}</div>
23 |       </div>
24 |     </div >      
25 |     );
26 |   }
27 | }
28 | 
29 | 
30 | export default ToggleFolder;

--------------------------------------------------------------------------------
/src/easyTools/AltTextOverlay.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import autoBind from 'react-autobind';
 3 | 
 4 | import { observer } from 'mobx-react';
 5 | 
 6 | 
 7 | @observer class AltTextOverlay extends React.Component {
 8 |   constructor(props) { super(props); autoBind(this); }
 9 | 
10 |   render() {
11 |     if(this.props.GridStore.cursor.showAltX===-1 && this.props.GridStore.cursor.showAltY===-1){ return null;}
12 |     var targetX=this.props.GridStore.cursor.showAltX;
13 |     var targetY=this.props.GridStore.cursor.showAltY;
14 |     var idx = targetY;
15 |     if(-1===targetY){ idx=targetX; }
16 | 
17 |     var objKey = this.props.GridStore.keyList[idx];
18 |     if(!this.props.GridStore.colDefListByKey[objKey]){return null;}
19 |     var helpComp = this.props.GridStore.colDefListByKey[objKey].altText
20 | 
21 |     var offsetY = this.props.uiMath.colHeaderHigh + ( (this.props.uiMath.borderWide+this.props.uiMath.rowHighWithPad) * (targetY+1) )+2 ;
22 |     var offsetX = this.props.uiMath.pivotRowHeaderWide || this.props.uiMath.autoColWide;
23 | 
24 |     return (
25 |       <div style={{position:'absolute',top:offsetY+'px',left:+offsetX+'px',
26 |                    backgroundColor:'black',color:'white',zIndex:'20',padding:'5px',zIndex:'50',
27 |                    border:'1px solid black',
28 |                    borderTopRightRadius:10,borderBottomRightRadius:10,borderBottomLeftRadius:10
29 |                    }}>
30 |         {helpComp}
31 |       </div>
32 |      );
33 |   }
34 | 
35 | }
36 | 
37 | 
38 | export default AltTextOverlay;

--------------------------------------------------------------------------------
/src/easyTools/DatePickerOverlay.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import autoBind from 'react-autobind';
 3 | 
 4 | import moment from 'moment';
 5 | import DatePicker from 'react-datepicker';
 6 | import 'react-datepicker/dist/react-datepicker.css';
 7 | 
 8 | class DatePickerOverlay extends React.Component {
 9 |   constructor(props) { super(props); autoBind(this); }
10 | 
11 |   blackHole(evt){}
12 | 
13 |   endEdit()
14 |   {  
15 |     this.props.GridStore.cursor.editX = -1;
16 |     this.props.GridStore.cursor.editY = -1;
17 |     this.props.GridStore.showDatePicker = false;
18 |     this.props.GridStore.showDateTimePicker = false;
19 |   }
20 | 
21 |   updateValue(evt){
22 |     if(this.props.GridStore.showDateTimePicker){
23 |       this.props.GridStore.curEditingValue = evt.format(this.props.uiMath.formatDate+' '+this.props.uiMath.formatTime);    
24 |     }
25 |     else{
26 |       this.props.GridStore.curEditingValue = evt.format(this.props.uiMath.formatDate);    
27 |     }
28 |     this.props.GridStore.onChangePivotWrapper(this.props.GridStore.cursor.editX, this.props.GridStore.cursor.editY, this.props.GridStore.cursor.editObjKey, this.props.GridStore.curEditingValue);    
29 |     this.endEdit();
30 |   }
31 | 
32 |   render() {
33 |     var editVal = this.props.GridStore.curEditingValue||'';
34 |     if(''===editVal || 'Invalid date'===editVal || !moment(editVal).isValid() ){editVal=moment();}
35 | 
36 |     var timeFormat=null;
37 |     if(this.props.GridStore.showDateTimePicker){
38 |       timeFormat=this.props.uiMath.formatTime;
39 |     }
40 | 
41 |     return (
42 |       <div>
43 |         <div style={{position:'absolute',top:'0px',bottom:'0px',left:'0px',width:this.props.uiMath.rowWide+'px',backgroundColor:'grey',zIndex:'20',opacity:'0.7'}} onClick={this.endEdit} />
44 |         <div style={{position:'absolute',top:'15px',left:'15px',backgroundColor:'white',zIndex:'30'}}>
45 |             <DatePicker
46 |               id='react-datepicker-manual'
47 |               inline
48 |               showMonthDropdown
49 |               showYearDropdown
50 |               dropdownMode="select"
51 |               isClearable
52 |               selected={moment(editVal)}
53 |               onChange={this.updateValue}
54 |               todayButton={"Today"}
55 |               showTimeSelect={this.props.GridStore.showDateTimePicker}
56 |             />      
57 |           </div>
58 |       </div>
59 |      );}
60 | }
61 | 
62 | 
63 | export default DatePickerOverlay;

--------------------------------------------------------------------------------
/src/easyTools/EasyBool.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import autoBind from 'react-autobind';
 3 | import PropTypes from 'prop-types';
 4 | 
 5 | import CheckEmpty from 'mdi-react/CheckboxBlankOutlineIcon';
 6 | import CheckFull from 'mdi-react/CheckboxMarkedOutlineIcon';
 7 | 
 8 | 
 9 | class EasyBool extends React.Component {
10 |   constructor(props) { super(props); autoBind(this); }
11 | 
12 |   makeBoolVal(val) {
13 |     if (val) {
14 |       if ('false' === val || 'FALSE' === val) { return false; } // javascript sucks.  So much good stuff wrapped in layers on layers of #FACEPALM
15 |       return true;
16 |     }
17 |     return false;
18 |   }
19 | 
20 | 
21 |   toggle(){
22 |     if(!this.props.disabled){
23 |       if (this.makeBoolVal(this.props.cellData)){
24 |         this.props.onChange( this.props.x, this.props.y, this.props.objKey, false);
25 |       }
26 |       else{
27 |         this.props.onChange(this.props.x, this.props.y, this.props.objKey, true);
28 |       }
29 |     }
30 |   }
31 | 
32 |   render() {
33 |     if(this.props.trueText){
34 | 
35 |       var rtext = this.props.cellData?(this.props.trueText||'true'):(this.props.falseText||'false');
36 | 
37 |       return( <div  onClick={this.toggle} 
38 |                     id={this.props.id} 
39 |                     style={{...this.props.style}}
40 |                     >{rtext}</div>);
41 |     }
42 |     else{
43 |       var rval = 'scale(0.8) rotate(90deg) ';
44 |       if(this.props.cellData || this.props.trueText || this.props.falseText ){rval='scale(0.8) rotate(00deg)';} // don't rotate selected, or when text is set.
45 | 
46 |       return (
47 |         <div style={{marginTop:'-3px'}}>
48 |         <div  onClick={this.toggle} id={this.props.id} style={{...this.props.style,width:'24px',height:'24px',transform: rval,transition: '0.2s'}}>
49 |           {this.makeBoolVal(this.props.cellData)?
50 |               (this.props.trueText ||<CheckFull  size={24}/>):
51 |               (this.props.falseText ||<CheckEmpty  size={24}/>) }</div>      
52 |         </div>
53 |       );
54 |     }
55 |   }
56 | }
57 | 
58 | // Proptypes
59 | EasyBool.propTypes = {
60 |   trueText: PropTypes.string,
61 |   falseText: PropTypes.string,
62 |   x: PropTypes.number.isRequired,
63 |   y: PropTypes.number.isRequired,
64 |   objKey: PropTypes.string.isRequired,
65 |   cellData: PropTypes.any.isRequired,
66 |   id: PropTypes.string,
67 |   onChange: PropTypes.func.isRequired
68 | };
69 | 
70 | export default EasyBool;

--------------------------------------------------------------------------------
/src/easyTools/MenuPickerOverlay.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import autoBind from 'react-autobind';
 3 | 
 4 | import moment from 'moment';
 5 | import DatePicker from 'react-datepicker';
 6 | import 'react-datepicker/dist/react-datepicker.css';
 7 | 
 8 | import { observable, action } from 'mobx';
 9 | import { observer } from 'mobx-react';
10 | 
11 | import FilterIcon from 'mdi-react/FilterVariantIcon';
12 | 
13 | 
14 | 
15 | @observer class MenuPickerOverlay extends React.Component {
16 |   constructor(props) { 
17 |     super(props); 
18 |     // this prevents problems with bad key values.  When switching frmo one grid to another in a tab frame, while the overlay is open the overlay div could stay in place, which is wrong.
19 |     this.semiUniqueKey = Math.random();
20 |     autoBind(this); 
21 |   }
22 | 
23 |   blackHole(evt){}
24 | 
25 |   @observable filterText = '';
26 |   @action changeFilter(evt){ this.filterText = evt.target.value; }
27 | 
28 |   endEdit()
29 |   {  
30 |     this.props.GridStore.cursor.editX = -1;
31 |     this.props.GridStore.cursor.editY = -1;
32 |     this.props.GridStore.showMenuPicker = false;
33 |   }
34 | 
35 |   updateValue(evt,val){
36 |     this.props.GridStore.curEditingValue = val;
37 |     this.props.GridStore.onChangePivotWrapper(this.props.GridStore.cursor.editX, this.props.GridStore.cursor.editY, this.props.GridStore.cursor.editObjKey, this.props.GridStore.curEditingValue);    
38 |     this.endEdit();
39 |   }
40 | 
41 | 
42 |   render() {
43 |     var editVal = this.props.GridStore.curEditingValue||'';
44 |     var saneThis=this;
45 | 
46 |     var itemList=[];
47 |     var listTarget = this.props.GridStore.colDefListByKey[this.props.GridStore.cursor.editObjKey].easyMenu;
48 |     if (listTarget && listTarget.length){  // it's an array
49 |       // JJH Needs a storybook test
50 |       itemList = listTarget.map((item,index) => { 
51 |         if(''===this.filterText.trim() || (''+item).indexOf(this.filterText)!==-1){
52 |           return (
53 |             <div key={'gridMenu'+index} id={'gridMenu'+index} style={{ padding: '2px',borderBottom:'1px solid lightgrey',paddingLeft:'15px' }} 
54 |              onClick={(e)=>saneThis.updateValue(e,item)}>{item}</div>
55 |           );
56 |         }
57 |         else{
58 |           return null;
59 |         }
60 |       });
61 |     }
62 |     else{  // or it's a pipe delimited string
63 |       listTarget = ''+listTarget;
64 |       itemList = listTarget.split('|').map((item,index) => { 
65 |         if(''===this.filterText.trim() || (''+item).indexOf(this.filterText)!==-1){        
66 |           return (
67 |             <div key={'gridMenu'+index} id={'gridMenu'+index} style={{ padding: '2px',borderBottom:'1px solid lightgrey',paddingLeft:'15px' }} 
68 |                onClick={(e)=>saneThis.updateValue(e,item)}>{item}</div>);
69 |         } 
70 |         else{
71 |           return null;
72 |         }
73 |       });
74 |     }
75 | 
76 |     return (
77 |       <div key={this.semiUniqueKey}>
78 |         <div style={{position:'absolute',top:'0px',bottom:'0px',left:'0px',width:(this.props.uiMath.rowWide+2)+'px',backgroundColor:'grey',zIndex:'20',opacity:'0.7'}} onClick={this.endEdit} />
79 |         <div style={{position: 'absolute', top: '15px', left: '15px', width: (this.props.uiMath.rowWide - 50) + 'px', height: (this.props.uiMath.gridHigh-30),zIndex:'30'}}>
80 |           <span style={{float:'right',marginRight:'15px'}}><input type='text' onChange={this.changeFilter} value={this.filterText} style={{backgroundColor:'white'}}/></span>
81 |         </div>
82 |         <div style={{position: 'absolute', top: '15px', left:(this.props.uiMath.rowWide-70)+'px',zIndex:'35'}}><FilterIcon  width={18} height={18}/></div>
83 |         
84 |         <div style={{position: 'absolute', top: '35px', left: '15px', 
85 |                      width: (this.props.uiMath.rowWide - 50) + 'px', height: (this.props.uiMath.gridHigh-70),
86 |                      border:'1px solid grey',borderRadius:'5px',overflow:'hidden',
87 |                      backgroundColor:'white',zIndex:'30'}}>{/* scroll bar to not mess up rounded edge */}
88 |           <div style={{position: 'absolute', top: '0px', left: '0px', right:'0px',bottom:'0px',
89 |                      backgroundColor:'white',zIndex:'30',overflow:'auto'}}>
90 |           {itemList}
91 |           </div>
92 |           </div>
93 |       </div>
94 |      );}
95 | }
96 | 
97 | 
98 | export default MenuPickerOverlay;

--------------------------------------------------------------------------------
/src/rrj-compile/index.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * The MIT License (MIT)
 3 |  *
 4 |  * Copyright (c) 2018 TwelveTone LLC
 5 |  *
 6 |  * Permission is hereby granted, free of charge, to any person obtaining a copy
 7 |  * of this software and associated documentation files (the "Software"), to deal
 8 |  * in the Software without restriction, including without limitation the rights
 9 |  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 |  * copies of the Software, and to permit persons to whom the Software is
11 |  * furnished to do so, subject to the following conditions:
12 |  *
13 |  * The above copyright notice and this permission notice shall be included in all
14 |  * copies or substantial portions of the Software.
15 |  *
16 |  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 |  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 |  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 |  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 |  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 |  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22 |  * SOFTWARE.
23 |  */
24 | let theModule = require('./output-min');
25 | 
26 | module.exports = {
27 |     createParser: () => theModule.tv.twelvetone.rjson.RJsonParserFactory.Companion.getDefault().createParser(),
28 |     createParserFactory: () => theModule.tv.twelvetone.rjson.RJsonParserFactory.Companion.getDefault(),
29 |     PrettyPrinter: theModule.tv.twelvetone.rjson.PrettyPrinter,
30 |     convert: function (rjsonString) {
31 |         const parser = theModule.tv.twelvetone.rjson.RJsonParserFactory.Companion.getDefault().createParser();
32 |         return parser.stringToJson(rjsonString);
33 |     }
34 | };

--------------------------------------------------------------------------------
/src/test/EasyBool.test.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | // include the thing to test
 4 | import Toggle from '../docTool/Toggle';
 5 | // include the children to be looking for
 6 | import CheckboxBlankOutlineIcon from 'mdi-react/CheckboxBlankOutlineIcon';
 7 | import CheckboxMarkedOutlineIcon from 'mdi-react/CheckboxMarkedOutlineIcon';
 8 | 
 9 | 
10 | import Enzyme from 'enzyme';
11 | import Adapter from 'enzyme-adapter-react-16';
12 | import { shallow } from 'enzyme';
13 | 
14 | Enzyme.configure({ adapter: new Adapter() });
15 | 
16 | it('shows the correct icon when true', () => {
17 |   const wrapper = shallow(<Toggle toggleValue={true}/>);
18 |   expect(wrapper.find(CheckboxMarkedOutlineIcon)).toHaveLength(1);
19 |   expect(wrapper.find(CheckboxBlankOutlineIcon)).toHaveLength(0);
20 | });
21 | 
22 | it('shows the correct icon when false', () => {
23 |   const wrapper = shallow(<Toggle toggleValue={false}/>);
24 |   expect(wrapper.find(CheckboxMarkedOutlineIcon)).toHaveLength(0);
25 |   expect(wrapper.find(CheckboxBlankOutlineIcon)).toHaveLength(1);
26 | });
27 |

--------------------------------------------------------------------------------
/src/test/GridMath.test.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import GridMath from '../GridMath';
 4 | 
 5 | var gm = new GridMath();
 6 | 
 7 | it('fails gracefully without any props', () => {
 8 |   var res = gm.calcGridBody(null,null);
 9 |   expect(res).toBeDefined();   // check that I got a resul
10 | });
11 | 
12 | it('fails gracefully without scroll size', () => {
13 |   var res = gm.calcGridBody({},null);
14 |   expect(res).toBeDefined();   // check that I got a resul
15 | });
16 | 
17 | it('fails gracefully without useful props', () => {
18 |   var res = gm.calcGridBody({},20);
19 |   expect(res).toBeDefined();   // check that I got a resul
20 | });
21 | 
22 | it('calculates auto column width correction', () => {
23 |   var res = gm.calcGridBody({
24 |     data:[{a:1,b:5,c:10},{a:1,b:5,c:10}] ,
25 |     width:300,
26 |     borderWide:1,
27 |     padWide:1,
28 |     rowCount:30,
29 |     rowHight:18,
30 |     colHeaderHigh:18,
31 | 
32 |   },20);
33 |   expect(res.autoColWide).toEqual(90);
34 | });
35 | 
36 | 
37 | 
38 |

--------------------------------------------------------------------------------
/src/util/isEmpty.jsx:
--------------------------------------------------------------------------------
1 | // using the naive implementation for performance.
2 | // it is not expected that complex, extended objects will be used for this
3 | export default function isEmpty(val) {
4 |   if(!val) return true; // falsey stuff is empty
5 |   for (var key in val) return false; return true; // objects without members are empty
6 | }

--------------------------------------------------------------------------------
/static/TestCSS.css:
--------------------------------------------------------------------------------
 1 | 
 2 | @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 3 | 
 4 | .GreenRotate{
 5 |   background-color: lightgreen !important; 
 6 |   transform: rotate(45deg);
 7 |   text-align: center;
 8 |  }
 9 | 
10 |  .PinkRotate{
11 |   background-color: pink;
12 |   transform: rotate(-20deg);
13 |   text-align: center;
14 |  }
15 | 
16 |  .RedRotate{
17 |   background-color: red;
18 |   transform: rotate(20deg);
19 |   text-align: center;
20 |  }
21 |  .BasicBeige{
22 |   background-color: beige;
23 |   font-weight: bold;
24 |  }
25 |  
26 |  .BackgroundBlue{
27 |   background-color: lightblue;
28 |  }
29 |  .BackgroundYellow{
30 |   background-color: yellow;
31 |  }
32 | 
33 |  .Gradient1{
34 |   background: linear-gradient(to bottom, #ebf1f6 0%,#abd3ee 36%,#89c3eb 75%,#d5ebfb 100%); 
35 |  }
36 | 
37 |  .Gradient2{
38 |   background: linear-gradient(to bottom, #f0b7a1 0%,#752201 62%,#752201 62%,#8c3310 65%,#8c3310 65%,#bf6e4e 100%); 
39 |  }
40 | 
41 |  body{
42 |   font-family: 'Open Sans', sans-serif;
43 |   font-size: 12px;
44 |  }
45 | 
46 |  .testHeaderCell{background-color:pink;}
47 |  .testCell{background-color:lightblue;}
48 |  .testCellOddRow{background-color:linen;}
49 |  .testRowHeaderCell{background-color:yellow;}
50 | 
51 |  .testHeaderData{background-color:cornsilk;transform: rotate(-20deg);text-align:center;}
52 |  .testData{background-color:lightgreen;transform: rotate(20deg);text-align:center;}              
53 |  .testDataOddRow{background-color:slateblue;}
54 |  .testRowHeaderData{background-color:plum;}
55 | 
56 |  .testInput{background-color:aqua;}
57 |  .testSelected{background-color:silver;}
58 |

--------------------------------------------------------------------------------
/stories/WrapperEasyBool.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { toJS,observable,action,computed } from 'mobx';
 3 | import { observer } from 'mobx-react';
 4 | import autoBind from 'react-autobind';
 5 | 
 6 | import EasyBool from '../src/easyTools/EasyBool';
 7 | 
 8 | 
 9 | @observer class WrapperEasyBool extends React.Component {
10 |   constructor(props) { 
11 |     super(props); autoBind(this); 
12 |   }
13 | 
14 |   @observable showOutline = false;
15 |   @action toggleOutline() { this.showOutline = !this.showOutline; }
16 | 
17 |   render(){
18 |     return( <div><EasyBool onChange={this.toggleOutline} cellData={this.showOutline} {...this.props}/></div> );
19 |   }
20 | 
21 | }  
22 | 
23 | export default WrapperEasyBool;

--------------------------------------------------------------------------------
/stories/dataNoiseGiant.js:
--------------------------------------------------------------------------------
1 | 
2 | // need to generate gian data at run time
3 | const data = [
4 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
5 |  ];
6 | 
7 | export default data;
8 |

--------------------------------------------------------------------------------
/stories/dataNoiseMedium.js:
--------------------------------------------------------------------------------
 1 | const data = [
 2 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
 3 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
 4 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
 5 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
 6 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
 7 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
 8 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
 9 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
10 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
11 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
12 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
13 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
14 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
15 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
16 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
17 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
18 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
19 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
20 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
21 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
22 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
23 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
24 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
25 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
26 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
27 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
28 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
29 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
30 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
31 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
32 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
33 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
34 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
35 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
36 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
37 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
38 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
39 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
40 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
41 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
42 |     { a: 1, b: 2, c: 3, d: 4 }, { a: 51, b: 62, c: 73, d: 84 }, { a: 91, b: 102, c: 23, d: 34 }, { a: 41, b: 52, c: 63, d: 74 }, { a: 1, b: 2, c: 3, d: 4 },
43 |   ];
44 | 
45 | export default data;
46 |

--------------------------------------------------------------------------------
/stories/dataNoiseSmall.js:
--------------------------------------------------------------------------------
 1 | const data = `[
 2 |   { "a": 1,  "b": 20, "c": 3, "d": 4.5 }, 
 3 |   { "a": 21, "b": 30, "c": 33, "d": "asdf" }, 
 4 |   { "a": 31, "b": 40, "c": 333, "d": "zing" }, 
 5 |   { "a": 41, "b": 30, "c": 33, "d": "asdf" }, 
 6 |   { "a": 51, "b": 40, "c": 333, "d": "zing" }, 
 7 |   { "a": 61, "b": 30, "c": 33, "d": "asdf" }, 
 8 |   { "a": 71, "b": 40, "c": 333, "d": "zing" }, 
 9 |   { "a": 81, "b": 30, "c": 33, "d": "asdf" }, 
10 |   { "a": 91, "b": 40, "c": 333, "d": "zing" }, 
11 |   { "a": 101, "b": 30, "c": 33, "d": "asdf" }, 
12 |   { "a": 111, "b": 40, "c": 333, "d": "zing" }, 
13 |   { "a": 121, "b": 30, "c": 33, "d": "asdf" }, 
14 |   { "a": 131, "b": 40, "c": 333, "d": "zing" }, 
15 |   { "a": 131, "b": 30, "c": 33, "d": "asdf" }, 
16 |   { "a": 141, "b": 40, "c": 333, "d": "zing" }, 
17 |   { "a": 151, "b": 30, "c": 33, "d": "asdf" }, 
18 |   { "a": 161, "b": 40, "c": 333, "d": "zing" }, 
19 |   { "a": 171, "b": 30, "c": 33, "d": "asdf" }, 
20 |   { "a": 181, "b": 40, "c": 333, "d": "zing" }, 
21 |   { "a": 191, "b": 50, "c": 3333, "d": "zong" } 
22 | ]
23 | `;
24 | 
25 | export default data;
26 |

--------------------------------------------------------------------------------
/stories/easyTools.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { storiesOf } from '@storybook/react';
 3 | import { action } from '@storybook/addon-actions';
 4 | import EasyBool from '../src/easyTools/EasyBool';
 5 | 
 6 | storiesOf('Easy Tools', module)
 7 | .add('EasyBool true', () => (
 8 |   <div style={{ border: '1px dashed green', width: '50%' }}>
 9 |     <EasyBool 
10 |       x={5} y={6} objKey='keyName' cellData={true} trueText='yep' falseText='nope' id='myId' 
11 |       onChange={(x, y, objKey, val) => { window.alert(x, y, objKey, val);}}
12 |     />
13 |   </div>
14 | )
15 | .add('EasyBool false', () => (
16 |     <div style={{ border: '1px dashed green', width: '50%' }}>
17 |       <EasyBool
18 |         x={5} y={6} objKey='keyName' cellData={false} trueText='yep' falseText='nope' id='myId'
19 |         onChange={(x, y, objKey, val) => { window.alert(x, y, objKey, val); }}
20 |       />
21 |     </div>
22 | )
23 | 
24 | 
25 | 
26 | ))
27 | ;

--------------------------------------------------------------------------------
/stories/testParameters.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | 
  3 | // independent variable list: each variable may be is multipled by another variable to create a new test
  4 | // all test object names must end in the suffix 'Test'
  5 | // name your variables clearly, the variable name is used to describe the test being run.
  6 | 
  7 | const testData=
  8 | {
  9 |   testATest:{
 10 |     a0Test: { a: 0 },
 11 |     a1Test: { a: 1 },
 12 |     a2Test: { a: 2 },
 13 |   },
 14 |   testBTest:{
 15 |     b0Test: { b: 0 },
 16 |     b1Test: { b: 1 },
 17 |     b2Test: { b: 2 },
 18 |   },
 19 |   testCTest: {
 20 |     c0Test: { c: 0 },
 21 |     c1Test: { c: 1 },
 22 |     c2Test: { c: 2 },
 23 |   },
 24 |   // all supported input data types including bad and problematic data
 25 |   dataTypesTest:{
 26 |     //-- bad inputs
 27 |     badDataTest:{
 28 |       dataUndefinedTest: { data: undefined },
 29 |       dataNullTest: { data: null },
 30 |       dataTrueTest: { data: true },
 31 |       dataFalseTest: { data: false },
 32 |       dataNumberTest: { data: 42 },
 33 |       dataStringTest: { data: 'too much gin' },
 34 |       dataArrayEmptyTest: { data: [] },
 35 |       dataArrayNullsTest: { data: [null, null] },
 36 |       dataArraySymbolsTest: { data: [Symbol('a'), Symbol('b')] },
 37 |       dataArrayRegexTest: { data: [new RegExp(), new RegExp()] },
 38 |       dataArrayFuncsTest: { data: [() => { console.log('fail') }, () => { console.log('fail') }] },
 39 |     },
 40 |     
 41 |     //-- object array
 42 |     objArrayTest:{
 43 |       objListNumericTest : { data: [{ r: 5, a: 0, b: 6, c: 7, d: 8 }, 
 44 |                                     { r: 4, a: 1, b: 7, c: 8, d: 9 }, 
 45 |                                     { r: 3, a: 0, b: 8, c: 9, d: 10 }, 
 46 |                                     { r: 2, a: 1, b: 9.50, c: 10.50, d: 11.50 }, 
 47 |                                     { r: 1, a: 0, b: 10.75, c: 11.75, d: 12.75 }] },
 48 |       objListStringTest : { data: [{ r: 'asdf', a: 5, b: 6, c: 8, d: 90 }, { r: 4, a: 'qwer', b: 6, c: 8, d: 90 }, { r: 3, a: 5, b: 6, c: 'zxcv', d: 90 }, { r: 2, a: 5, b: 6, c: 8, d: 90 }, { r: 1, a: 5, b: 6, c: 8, d: 'zaq' }] },
 49 |       objListEmptyStringsTest:{ data: [{ r: 'asdf', a: '', b: 0, c: 8, d: 90 }, 
 50 |                                        { r: 4, a: 'qwer', b: 6, c: 8, d: 90 }, 
 51 |                                        { r: 3, a: '', b: 0, c: 'zxcv', d: 90 }, 
 52 |                                        { r: 2, a: 5, b: 6, c: 8, d: 90 }, 
 53 |                                        { r: 1, a: 5, b: 6, c: 8, d: 'zaq' }] },
 54 |       objListBoolsTest:{ data: [{ r: 5, a: true, b: 6, c: 8, d: 90 }, { r: 4, a: false, b: 6, c: 8, d: 90 }, { r: 3, a: true, b: 6, c: 8, d: 90 }, { r: 2, a: false, b: 6, c: 8, d: 90 }, { r: 1, a: true, b: 6, c: 8, d: 90 }] },
 55 |       objListNullsTest:{ data: [{ r: null, a: true,  b: 6, c: null, d: 90 }, 
 56 |                                 { r: 4,    a: false, b: null, c: 8, d: null }, 
 57 |                                 { r: 3,    a: true,  b: 6, c: null, d: 90 }, 
 58 |                                 { r: 2,    a: false, b: null, c: 8, d: null }, 
 59 |                                 { r: 1,    a: true,  b: 6, c: 8, d: 90 }] },
 60 |     },
 61 |     //-- array array
 62 |     arrArrayTest: {
 63 |       arrayListNumericTest:{ data: [[0, 5, 6, 8, 90], [4, 0, 6, 8, 90], [3, 5, 0, 8, 90], [2, 5, 6, 8, 90], [1, 5, 6, 8, 90]] },
 64 |       arrayListWithStringsTest:{ data: [['asdf', 5, 6, 8, 90], [4, 'qwer', 6, 8, 90], [3, 5, 6, 'zxcv', 90], [2, 5, 6, 8, 90], [1, 5, 6, 8, 'zaq']] },
 65 |       arrayListWithEmptiesTest:{ data: [['asdf', '', 0, 8, 90], [4, 'qwer', 6, 8, 90], [3, '', 0, 'zxcv', 90], [2, 5, 6, 8, 90], [1, 5, 6, 8, 'zaq']] },
 66 |       arrayListWithBoolsTest:{ data: [[5, true, 6, 8, 90], [4, false, 6, 8, 90], [3, true, 6, 8, 90], [2, false, 6, 8, 90], [1, true, 6, 8, 90]] },
 67 |       arrayListWithNullsTest:{ data: [[null, true, 6, null, 90], [4, false, 6, 8, 90], [3, true, 6, null, 90], [2, false, 6, 8, 90], [1, true, 6, 8, 90]] },
 68 |       arrayListForPivotTest:{ data: [['a0', 'a1', 'a2', 'a3', 'a4'], ['b0', 'b1', 'b2', 'b3', 'b4'], ['c0', 'c1', 'c2', 'c3', 'c4'], ['d0', 'd1', 'd2', 'd3', 'd4'], ['e0', 'e1', 'e2', 'e3', 'e4'], ['f0', 'f1', 'f2', 'f3', 'f4']] },
 69 |     },
 70 |     //-- largish data - will need a generator
 71 |     //-- primitives
 72 |     primsTest:{
 73 |       primsListNumericTest:{ data: [0, 5, 6, 8, 90, 1, 5, 6, 8, 90] },
 74 |       primsListStringsTest:{ data: ['a0', 'a1', 'a2', 'a3', 'a4', 'a0', 'a1', 'a2', 'a3', 'a4',] },
 75 |       primsListMixedTest:{ data: ['a0', null, undefined, 0, 1, 2, true, false, 'last item'] },
 76 |     },
 77 |     //-- CSV/PSV/KVP
 78 |     /*
 79 |     text:{
 80 |       csvLightWithTitle:{ data: "col A, col B, col C\na1,b1,c1\na2,b2,c3\na3,b3,c3\na4,b4,c4\n" },
 81 |       csvLightNoTitle:{ data: "a1,b1,c1\na2,b2,c3\na3,b3,c3\na4,b4,c4\n" },
 82 |       csvHeavyWithTitle:{ data: 'col A, col B, col C\n"a1,a1","b1,b1","c1,c1"\na`2,b\'2,"c\"3"\na3,b3,c3\na4,b4,c4\n' },
 83 |       psvWithTitle:{ data: "col A|col B|col C\na1|b1|c1\na2|b2|c3\na3|b3|c3\na4|b4|c4\n" },
 84 |       psvNoTitle:{ data: "a1|b1|c1\na2|b2|c3\na3|b3|c3\na4|b4|c4\n" },
 85 |       kvpNoTitle:{ data: "a:1\nb:2\nc:3\nd:4\ne:5\n" },
 86 |     }
 87 |     */
 88 |   },
 89 |   //-- test the ways the data can be pivoted
 90 |   pivotsTest:  {
 91 |     pivotOnNameTest:{
 92 |       pivotOnColRTest: { pivotOn: 'r' },
 93 |       pivotOnColBTest:{ pivotOn: 'b' },
 94 |     },
 95 |     pivotOnIndexTest: {
 96 |       pivotOnColZeroTest:{ pivotOn: 0 },
 97 |       pivotOnColOneTest:{ pivotOn: 1 },
 98 |       pivotOnColErrNeg5Test: { pivotOn: -5 }, // invalid pivot
 99 |     },
100 |     pivotOnPrimTest: {
101 |       pivotOnTrueTest: { pivotOn: true },
102 |     },
103 |     //-- these are less thorough tests for convenience
104 |     pivotToggleNamedColumnsTest:{
105 |       pivotOffTest:{ none:'' },
106 |       pivotOnColBTest:{ pivotOn: 'b' },
107 |     },
108 |     pivotToggleIndexColumnsTest:{
109 |       pivotOffTest:{ none:'' },
110 |       pivotOnColZeroTest: { pivotOn: 0 },
111 |       pivotOnColOneTest: { pivotOn: 1 },
112 |     },
113 |     pivotToggleBoolColumnsTest:{
114 |       pivotOffTest:{ none:'' },
115 |       pivotOnColPrimTest:{ pivotOn: 'data' },
116 |     }
117 |   },
118 |   //-- test the pivot row header sizing
119 |   pivotsHeaderTest : {
120 |     pivotWithNormalHeaderTest: { none: '' },
121 |     pivotWithWideHeaderTest: { pivotRowHeaderWide: 250 },
122 |   },
123 |   //--- test padding and borders
124 |   padPlayTest:{
125 |     border0Test:  { borderWide: 0 },
126 |     pad0Test:     { padWide: 0 },
127 |     border1Test:  { borderWide: 1 },
128 |     pad1Test:     { padWide: 1 },
129 |     border15Test: { borderWide: 15},
130 |     pad15Test:    { padWide: 15},
131 |     borderAndPad0Test:  { borderWide: 0, padWide: 0 },
132 |     borderAndPad1Test:  { borderWide: 1, padWide: 1 },
133 |     borderAndPad15Test: { borderWide: 15, padWide: 15},
134 |     hideHeaderTest:{ hideHeader: true },
135 |     gridCollapseOnTest: { gridCollapse: true, gridHigh:500 },
136 |     gridCollapseOffTest: { gridCollapse: true, gridHigh: 500 },
137 |   },
138 |   //--- test various selection/input states
139 |   inputSelectionStatesTest:{
140 |     singleSelectionRootTest:{testCursor:{x:0,y:0}},
141 |     singleSelection1x1Test:{testCursor:{x:1,y:1}},
142 |     singleSelection2x2Test:{testCursor:{x:2,y:2}},
143 |     singleSelectionRootTo2x2Test:{testCursor:{x:0,y:0,selectToX:2,selectToY:2,shiftSelInProgress:true}},
144 |     singleSelection1x1to1x3Test:{testCursor:{x:1,y:1,selectToX:1,selectToY:3,shiftSelInProgress:true}},
145 |     singleSelection1x1to3x1Test:{testCursor:{x:1,y:1,selectToX:3,selectToY:1,shiftSelInProgress:true}},
146 |     singleSelection2x2to4x4Test:{testCursor:{x:2,y:2,selectToX:4,selectToY:4,shiftSelInProgress:true}},
147 |     singleInput0x0Test:{testCursor:{x:0,y:0,editX:0,editY:0}},
148 |     singleInput1x1SingleCellSelectionTest:{testCursor:{x:1,y:1,editX:1,editY:1}},
149 |     singleInput1x1LargeSelectionTest:{testCursor:{x:2,y:2,selectToX:4,selectToY:4,editX:3,editY:3,shiftSelInProgress:true}},
150 |   },
151 |     //--- test grid-wide style settings
152 |   styleGridTest:{
153 |     styleAllTest:{
154 |       styleHeaderCell:{backgroundColor:'pink'},
155 |       styleCell:{backgroundColor:'lightblue'},
156 |       styleCellOddRow:{backgroundColor:'linen'},
157 |       styleRowHeaderCell:{backgroundColor:'yellow'},
158 | 
159 |       styleHeaderData:{backgroundColor:'cornsilk',transform: 'rotate(-20deg)',textAlign:'center'},
160 |       styleData:{backgroundColor:'lightgreen',transform: 'rotate(20deg)',textAlign:'center'},                  
161 |       styleDataOddRow:{backgroundColor:'slateblue'},
162 |       styleRowHeaderData:{backgroundColor:'plum'},
163 | 
164 |       styleInput:{backgroundColor:'aqua'},
165 |       styleSelected:{backgroundColor:'silver'},
166 |     },
167 |     styleNoOddRowsTest:{
168 |       styleHeaderCell:{backgroundColor:'pink'},
169 |       styleCell:{backgroundColor:'lightblue'},
170 |       styleRowHeaderCell:{backgroundColor:'yellow'},
171 | 
172 |       styleHeaderData:{backgroundColor:'cornsilk',transform: 'rotate(-20deg)',textAlign:'center'},
173 |       styleData:{backgroundColor:'lightgreen',transform: 'rotate(20deg)',textAlign:'center'},                  
174 |       styleRowHeaderData:{backgroundColor:'plum'},
175 | 
176 |       styleInput:{backgroundColor:'aqua'},
177 |       styleSelected:{backgroundColor:'silver'},
178 |     }
179 |   },
180 |   classGridTest: {
181 |     classAllTest: {
182 |       classHeaderCell: 'testHeaderCell',
183 |       classCell: 'testCell',
184 |       classCellOddRow: 'testCellOddRow',
185 |       classRowHeaderCell: 'testRowHeaderCell',
186 | 
187 |       classHeaderData: 'testHeaderData',
188 |       classData: 'testData',
189 |       classDataOddRow: 'testDataOddRow',
190 |       classRowHeaderData: 'testRowHeaderData',
191 | 
192 |       classInput: 'testInput',
193 |       classSelected: 'testSelected',
194 |     },
195 |     classNoOddRowsTest: {
196 |       classHeaderCell: 'testHeaderCell',
197 |       classCell: 'testCell',
198 |       classRowHeaderCell: 'testRowHeaderCell',
199 | 
200 |       classHeaderData: 'testHeaderData',
201 |       classData: 'testData',
202 |       classRowHeaderData: 'testRowHeaderData',
203 | 
204 |       classInput: 'testInput',
205 |       classSelected: 'testSelected',
206 |     }
207 |   },
208 |   toolsEnabledTest:{
209 |     toolsAllTest:{
210 |       showToolsAddCut:true,
211 |       showToolsPage: true,
212 |       showToolsImpExp: true,
213 |       showToolsCustom: true,
214 |       pageCount:5,
215 |     },
216 |     toolsSomeTest:{
217 |       showToolsAddCut: true,
218 |       showToolsPage: false,
219 |       showToolsImpExp: true,
220 |       showToolsCustom: false,
221 |       pageCount: 5,
222 |     },
223 |     editAsTextTest:{
224 |       editAsText:true
225 |     },
226 |     editDisabledTest: {
227 |       editDisabled: true
228 |     }
229 |   },
230 |   columnsTest:{
231 |     titleAndEditableColsByInvalidNameTest: {
232 |       columnList: [
233 |         { key: 'OMG this is wrong!', altText: 'col me RRR', editDisabled: true },
234 |         { key: 'Nobody uses this as key!', altText: 'col me AAA', title: 'AA Col', },
235 |         { key: 'Show me an error please!', altText: 'col me CCC', title: 'CC Col', }]
236 |     },
237 |     titleAndEditableColsByNameTest: {
238 |       // key, title, editable, altText.  Columns deliberately out of order, with not all values specified
239 |       columnList:[
240 |         { key: 'r', altText: 'col me RRR', editDisabled:true}, 
241 |         { key: 'a', altText: 'col me AAA', title: 'AA Col', },
242 |         { key: 'c', altText: 'col me CCC', title: 'CC Col', },
243 |         { key: 'b', altText: 'col me BBB', title: 'BB Col', editDisabled: true },
244 |         { key: 'd', altText: 'col me DDD', title: 'DD Col', editDisabled: true}]
245 |     },
246 |     titleAndEditableColsByIndexTest: {
247 |       // key, title, editable, altText.  Columns deliberately out of order, with not all values specified
248 |       columnList: [
249 |         { key: 0, altText: 'col me 000', editDisabled: true },
250 |         { key: 1, altText: 'col me 111', title: 'AA1 Col', },
251 |         { key: 2, altText: 'col me 222', title: 'CC2 Col', },
252 |         { key: 3, altText: 'col me 333', title: 'BB3 Col', editDisabled: true },
253 |         { key: 4, altText: 'col me 444', title: 'DD4 Col', editDisabled: true }]
254 |     },
255 |     primColTest: {
256 |       primColBadTest: {
257 |         // columns are specified, but not with the correct key.  (For primitive lists it is always 'data')
258 |         columnList: [
259 |           { key: 'r', altText: 'col me RRR', editDisabled: true },
260 |           { key: 'a', altText: 'col me AAA', title: 'AA Col', },
261 |           { key: 'c', altText: 'col me CCC', title: 'CC Col', },
262 |           { key: 'b', altText: 'col me BBB', title: 'BB Col', editDisabled: true },
263 |           { key: 'd', altText: 'col me DDD', title: 'DD Col', editDisabled: true }]
264 |       },
265 |       primColGoodTest: {
266 |         // key, title, editable, altText.  Columns deliberately out of order, with not all values specified
267 |         columnList: [
268 |           { key: 'data', altText: 'Prim Data Alt', title:'Prim Data Title' },
269 |         ]
270 |       },
271 |     },
272 |     columnSizeTest: {
273 |       oneLargeColTest: {
274 |             columnList:[{ key: 'r', widePct: '15'},
275 |                         { key: 'a', widePct: '15' },
276 |                         { key: 'c', widePct: '15' },
277 |                         { key: 'b', widePct: '15' },
278 |                         { key: 'd', widePct: '40' }]},
279 |       mostlyPxColTest: {
280 |             columnList:[{ key: 'r', widePx:  '15' },
281 |                         { key: 'a', widePx:  '15' },
282 |                         { key: 'c', widePx:  '15' },
283 |                         { key: 'b', widePx:  '15' },
284 |                         { key: 'd', widePct: '100' }]},
285 |       decreaseColTest: {
286 |             columnList:[{ key: 'r', widePct: '50' },
287 |                         { key: 'a', widePct: '25' },
288 |                         { key: 'c', widePct: '13' },
289 |                         { key: 'b', widePct: '7'  },
290 |                         { key: 'd', widePct: '5'  }]},
291 |     },
292 |     columnEasyTypesTest:{
293 |       simpleFormatsTest:{
294 |             columnList: [ { key: 'r', easyInt: true },
295 |                           { key: 'a', easyFloat: true },
296 |                           { key: 'c', easyDollar: true },
297 |                           { key: 'b', easyEuro: true },
298 |                           { key: 'd', easyPound: true }]},
299 |       interactiveFormatsTest:{
300 |             columnList: [ { key: 'r', easyBool: true },
301 |                           { key: 'a', easyMenu: 'a|b|c|d|e'},
302 |                           { key: 'c', easyDate: true },
303 |                           { key: 'b', easyDateTime: true },
304 |                           { key: 'd', easyPound: true }]},
305 |     },
306 |     columnStyleTest: {
307 |       columnList: [
308 |         { key: 'r', easyBool: true },
309 |         {
310 |           key: 'a', 
311 |           styleHeaderCell: { backgroundColor: 'pink' },
312 |           styleCell: { backgroundColor: 'lightblue' },
313 |           styleHeaderData: { backgroundColor: 'lightbrown', transform: 'rotate(-20deg)', textAlign: 'center' },
314 |           styleData: { backgroundColor: 'lightgreen', transform: 'rotate(20deg)', textAlign: 'center' },              
315 |         },
316 |         { key: 'c', 
317 |           styleHeaderCell: { backgroundColor: 'pink' },
318 |           styleCell: { backgroundColor: 'lightblue' },
319 |           styleHeaderData: { backgroundColor: 'lightbrown', transform: 'rotate(-20deg)', textAlign: 'center' },
320 |           styleData: { backgroundColor: 'lightgreen', transform: 'rotate(20deg)', textAlign: 'center' },              
321 |         },
322 |         { key: 'b', easyDateTime: true },
323 |         { key: 'd', easyPound: true }]
324 |     },
325 |     columnClassTest: {
326 |       columnList: [
327 |         { key: 'r', easyBool: true },
328 |         {
329 |           key: 'a',
330 |           classCell: { backgroundColor: 'lightblue' },
331 |           classData: { backgroundColor: 'lightgreen', transform: 'rotate(20deg)', textAlign: 'center' },
332 |           classHeaderCell: { backgroundColor: 'pink' },
333 |           classHeaderData: { backgroundColor: 'lightbrown', transform: 'rotate(-20deg)', textAlign: 'center' },
334 |         },
335 |         {
336 |           key: 'c',
337 |           classCell: { backgroundColor: 'lightblue' },
338 |           classData: { backgroundColor: 'lightgreen', transform: 'rotate(20deg)', textAlign: 'center' },
339 |           classHeaderCell: { backgroundColor: 'pink' },
340 |           classHeaderData: { backgroundColor: 'lightbrown', transform: 'rotate(-20deg)', textAlign: 'center' },
341 |         },
342 |         { key: 'b', easyDateTime: true },
343 |         { key: 'd', easyPound: true }]
344 |     },
345 |     columnComponentTest: {
346 |       columnList: [
347 |         { key: 'r', easyBool: true },
348 |         {
349 |           key: 'a',
350 |           classCell: <div>My Cell</div>,
351 |           classData: <div>My Data</div>,
352 |           classHeaderCell: <div>Header Cell</div>,
353 |           classHeaderData: <div>Header Data</div>,
354 |         }
355 |       ]
356 |     },
357 |   },
358 |   componentTest:{
359 |     classCell: <div>My Cell</div>,
360 |     classData: <div>My Data</div>,
361 |     classHeaderCell: <div>Header Cell</div>,
362 |     classHeaderData: <div>Header Data</div>,    
363 |   }
364 |   
365 | };
366 | 
367 | export default testData;
368 | 
369 | /****
370 | // all pivot tests, including redundant failure moves, mostly error checking
371 | var allPivotTest = [dataTypes * pivots]; // for some value of *
372 | 
373 | 
374 |   {
375 |   // all data types * [pivotOff,pivotOnColB,pivotOnCol1] *all components
376 |     name: 'components',
377 |     values: {
378 |       compCell: {},
379 |       compInput: { pivot: true },
380 |       compHeader: { pivot: true },
381 |       compRowHeader: { pivot: true },
382 |     }
383 |   },
384 |   
385 |   {
386 |     // all data types * all pivot types * [all class,all style]
387 |     name:'columns',
388 |     values:{
389 |       colWidePx:{},
390 |       colWidePct:{ pivot: true },
391 |       colTitles:{ pivot: true },
392 |       colDataTypes:{ pivot: true },
393 |       colTools:{ pivot: true },
394 |       colStyles:{ pivot: true },
395 |       colClasses:{ pivot: true },
396 |       colComps:{ pivot: true },
397 |     }
398 |   },
399 | 
400 | ];
401 | 
402 | */

--------------------------------------------------------------------------------
/webpack.config.babel.js:
--------------------------------------------------------------------------------
 1 | import { join } from 'path';
 2 | 
 3 | const loaders = [{
 4 |   test: /\.js$/,
 5 |   loader: 'babel-loader',
 6 |   include: join(__dirname, 'src'),
 7 | }, {
 8 |   test: /\.json$/,
 9 |   loader: 'json-loader',
10 | }];
11 | 
12 | export default {
13 |   devtool: 'source-map',
14 |   entry: './src/index',
15 |   output: {
16 |     path: join(__dirname, 'umd'),
17 |     library: 'react-json-grid',
18 |     libraryTarget: 'umd',
19 |   },
20 |   resolve: {
21 |     root: join(__dirname, 'src'),
22 |     modulesDirectories: ['node_modules'],
23 |     extensions: ['', '.js', '.json'],
24 |   },
25 |   externals: {
26 |     mobx: 'mobx',
27 |   },
28 |   module: { loaders },
29 | };
30 |

--------------------------------------------------------------------------------