\r\n {items.map(x => (\r\n \r\n ))}\r\n \r\n );\r\n }\r\n\r\n render() {\r\n const numValsAllowed =\r\n this.props.aggregators[this.props.aggregatorName]([])().numInputs || 0;\r\n\r\n const aggregatorCellOutlet = this.props.aggregators[\r\n this.props.aggregatorName\r\n ]([])().outlet;\r\n\r\n const rendererName =\r\n this.props.rendererName in this.props.renderers\r\n ? this.props.rendererName\r\n : Object.keys(this.props.renderers)[0];\r\n\r\n const rendererCell = (\r\n | \r\n \r\n this.setState({\r\n openDropdown: this.isOpen('renderer') ? false : 'renderer',\r\n })\r\n }\r\n setValue={this.propUpdater('rendererName')}\r\n />\r\n | \r\n );\r\n\r\n const sortIcons = {\r\n key_a_to_z: {\r\n rowSymbol: '↕',\r\n colSymbol: '↔',\r\n next: 'value_a_to_z',\r\n },\r\n value_a_to_z: {\r\n rowSymbol: '↓',\r\n colSymbol: '→',\r\n next: 'value_z_to_a',\r\n },\r\n value_z_to_a: {rowSymbol: '↑', colSymbol: '←', next: 'key_a_to_z'},\r\n };\r\n\r\n const aggregatorCell = (\r\n \r\n \r\n this.setState({\r\n openDropdown: this.isOpen('aggregators') ? false : 'aggregators',\r\n })\r\n }\r\n setValue={this.propUpdater('aggregatorName')}\r\n />\r\n \r\n this.propUpdater('rowOrder')(sortIcons[this.props.rowOrder].next)\r\n }\r\n >\r\n {sortIcons[this.props.rowOrder].rowSymbol}\r\n \r\n \r\n this.propUpdater('colOrder')(sortIcons[this.props.colOrder].next)\r\n }\r\n >\r\n {sortIcons[this.props.colOrder].colSymbol}\r\n \r\n {numValsAllowed > 0 &&
}\r\n {new Array(numValsAllowed).fill().map((n, i) => [\r\n \r\n !this.props.hiddenAttributes.includes(e) &&\r\n !this.props.hiddenFromAggregators.includes(e)\r\n )}\r\n open={this.isOpen(`val${i}`)}\r\n zIndex={this.isOpen(`val${i}`) ? this.state.maxZIndex + 1 : 1}\r\n toggle={() =>\r\n this.setState({\r\n openDropdown: this.isOpen(`val${i}`) ? false : `val${i}`,\r\n })\r\n }\r\n setValue={value =>\r\n this.sendPropUpdate({\r\n vals: {$splice: [[i, 1, value]]},\r\n })\r\n }\r\n />,\r\n i + 1 !== numValsAllowed ?
: null,\r\n ])}\r\n {aggregatorCellOutlet && aggregatorCellOutlet(this.props.data)}\r\n | \r\n );\r\n\r\n const unusedAttrs = Object.keys(this.state.attrValues)\r\n .filter(\r\n e =>\r\n !this.props.rows.includes(e) &&\r\n !this.props.cols.includes(e) &&\r\n !this.props.hiddenAttributes.includes(e) &&\r\n !this.props.hiddenFromDragDrop.includes(e)\r\n )\r\n .sort(sortAs(this.state.unusedOrder));\r\n\r\n const unusedLength = unusedAttrs.reduce((r, e) => r + e.length, 0);\r\n const horizUnused = unusedLength < this.props.unusedOrientationCutoff;\r\n\r\n const unusedAttrsCell = this.makeDnDCell(\r\n unusedAttrs,\r\n order => this.setState({unusedOrder: order}),\r\n `pvtAxisContainer pvtUnused ${\r\n horizUnused ? 'pvtHorizList' : 'pvtVertList'\r\n }`\r\n );\r\n\r\n const colAttrs = this.props.cols.filter(\r\n e =>\r\n !this.props.hiddenAttributes.includes(e) &&\r\n !this.props.hiddenFromDragDrop.includes(e)\r\n );\r\n\r\n const colAttrsCell = this.makeDnDCell(\r\n colAttrs,\r\n this.propUpdater('cols'),\r\n 'pvtAxisContainer pvtHorizList pvtCols'\r\n );\r\n\r\n const rowAttrs = this.props.rows.filter(\r\n e =>\r\n !this.props.hiddenAttributes.includes(e) &&\r\n !this.props.hiddenFromDragDrop.includes(e)\r\n );\r\n const rowAttrsCell = this.makeDnDCell(\r\n rowAttrs,\r\n this.propUpdater('rows'),\r\n 'pvtAxisContainer pvtVertList pvtRows'\r\n );\r\n const outputCell = (\r\n \r\n \r\n | \r\n );\r\n\r\n if (this.props.hideConfiguration) {\r\n return (\r\n \r\n this.setState({openDropdown: false})}>\r\n \r\n {outputCell}\r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n if (horizUnused) {\r\n return (\r\n \r\n { this.props.hideConfiguration &&\r\n this.setState({openDropdown: false})}>\r\n \r\n {outputCell}\r\n
\r\n \r\n }\r\n { !this.props.hideConfiguration &&\r\n this.setState({openDropdown: false})}>\r\n \r\n {rendererCell}\r\n {unusedAttrsCell}\r\n
\r\n \r\n {aggregatorCell}\r\n {colAttrsCell}\r\n
\r\n \r\n {rowAttrsCell}\r\n {outputCell}\r\n
\r\n \r\n }\r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n { this.props.hideConfiguration &&\r\n this.setState({openDropdown: false})}>\r\n \r\n {outputCell}\r\n
\r\n \r\n }\r\n { !this.props.hideConfiguration &&\r\n this.setState({openDropdown: false})}>\r\n \r\n {rendererCell}\r\n {aggregatorCell}\r\n {colAttrsCell}\r\n
\r\n \r\n {unusedAttrsCell}\r\n {rowAttrsCell}\r\n {outputCell}\r\n
\r\n \r\n }\r\n
\r\n );\r\n }\r\n}\r\n\r\nPivotTableUI.propTypes = Object.assign({}, PivotTable.propTypes, {\r\n onChange: PropTypes.func.isRequired,\r\n hiddenAttributes: PropTypes.arrayOf(PropTypes.string),\r\n hiddenFromAggregators: PropTypes.arrayOf(PropTypes.string),\r\n hiddenFromDragDrop: PropTypes.arrayOf(PropTypes.string),\r\n unusedOrientationCutoff: PropTypes.number,\r\n menuLimit: PropTypes.number,\r\n hideConfiguration: PropTypes.bool,\r\n headerClass: PropTypes.string,\r\n stylesHeaders: PropTypes.object\r\n});\r\n\r\nPivotTableUI.defaultProps = Object.assign({}, PivotTable.defaultProps, {\r\n hiddenAttributes: [],\r\n hiddenFromAggregators: [],\r\n hiddenFromDragDrop: [],\r\n unusedOrientationCutoff: 85,\r\n menuLimit: 500,\r\n hideConfiguration: true\r\n});\r\n\r\nexport default PivotTableUI;\r\n"]}