Serenity
Ultima
Avalon
Sigma this.onTabClick(event, tab, index)}>
-
+
{tab.props.header}
diff --git a/src/components/autocomplete/AutoComplete.js b/src/components/autocomplete/AutoComplete.js
index ddd8e03dc2..e9ff9be4c0 100644
--- a/src/components/autocomplete/AutoComplete.js
+++ b/src/components/autocomplete/AutoComplete.js
@@ -105,7 +105,7 @@ export class AutoComplete extends Component {
this.selectItem = this.selectItem.bind(this);
}
- shouldComponentUpdate() {
+ shouldComponentUpdate(nextProps, nextState) {
if(this.manualModelChange) {
this.manualModelChange = false;
return false;
@@ -114,12 +114,6 @@ export class AutoComplete extends Component {
return true;
}
}
-
- componentWillReceiveProps(nextProps) {
- if(!this.props.multiple) {
- this.updateInputField(nextProps.value);
- }
- }
onInputChange(event) {
//Cancel the search request if user types within the timeout
@@ -216,7 +210,11 @@ export class AutoComplete extends Component {
formatValue(value) {
if(value) {
- if (this.props.field) {
+ if (this.props.selectedItemTemplate) {
+ const resolvedFieldData = this.props.selectedItemTemplate(value);
+ return resolvedFieldData ? resolvedFieldData : value;
+ }
+ else if (this.props.field) {
const resolvedFieldData = ObjectUtils.resolveFieldData(value, this.props.field);
return resolvedFieldData !== null && resolvedFieldData !== undefined ? resolvedFieldData : value;
}
@@ -495,13 +493,10 @@ export class AutoComplete extends Component {
renderChips() {
if(this.props.value && this.props.value.length) {
return this.props.value.map((val, index) => {
- let tokenContent = this.props.selectedItemTemplate ? this.props.selectedItemTemplate(val) :
- ({this.props.field ? ObjectUtils.resolveFieldData(val, this.props.field) : val});
-
return (
-
+
+
);
}
diff --git a/src/components/checkbox/Checkbox.d.ts b/src/components/checkbox/Checkbox.d.ts
index 89660af4de..f053801cb6 100644
--- a/src/components/checkbox/Checkbox.d.ts
+++ b/src/components/checkbox/Checkbox.d.ts
@@ -9,6 +9,7 @@ interface CheckboxProps {
style?: object;
className?: string;
disabled?: boolean;
+ readOnly?: boolean;
onMouseDown?(): void;
onContextMenu?(): void;
onChange(e: { originalEvent: Event, value: any, checked: boolean}): void;
diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js
index fd5bc0e94f..00741eb7da 100644
--- a/src/components/checkbox/Checkbox.js
+++ b/src/components/checkbox/Checkbox.js
@@ -14,6 +14,7 @@ export class Checkbox extends Component {
style: null,
className: null,
disabled: false,
+ readOnly: false,
onChange: null,
onMouseDown: null,
onContextMenu: null
@@ -24,11 +25,12 @@ export class Checkbox extends Component {
inputId: PropTypes.string,
value: PropTypes.any,
name: PropTypes.string,
- checked: PropTypes.bool.isRequired,
+ checked: PropTypes.bool,
style: PropTypes.object,
className: PropTypes.string,
disabled: PropTypes.bool,
- onChange: PropTypes.func.isRequired,
+ readOnly: PropTypes.bool,
+ onChange: PropTypes.func,
onMouseDown: PropTypes.func,
onContextMenu: PropTypes.func
};
@@ -42,15 +44,21 @@ export class Checkbox extends Component {
}
onClick(e) {
- if(!this.props.disabled && this.props.onChange) {
+ if(!this.props.disabled && this.props.onChange && !this.props.readOnly) {
this.props.onChange({
originalEvent: e,
value: this.props.value,
checked: !this.props.checked
});
+
+ this.input.checked = !this.props.checked;
}
}
+ componentDidUpdate(prevProps, prevState, snapshot) {
+ this.input.checked = this.props.checked;
+ }
+
onFocus(e) {
DomHandler.addClass(this.box, 'ui-state-focus');
}
@@ -62,12 +70,12 @@ export class Checkbox extends Component {
render() {
let containerClass = classNames('ui-chkbox ui-widget', this.props.className);
let boxClass = classNames('ui-chkbox-box ui-widget ui-corner-all ui-state-default', {'ui-state-active': this.props.checked, 'ui-state-disabled': this.props.disabled});
- let iconClass = classNames('ui-chkbox-icon ui-c', {'fa fa-check': this.props.checked});
+ let iconClass = classNames('ui-chkbox-icon ui-c', {'pi pi-check': this.props.checked});
return (
-
+ { this.input = el; }} id={this.props.inputId} name={this.props.name} defaultChecked={this.props.checked} onFocus={this.onFocus} onBlur={this.onBlur} disabled={this.props.disabled} readOnly={this.props.readOnly}/>
{ this.box = el; }}>
diff --git a/src/components/chips/Chips.js b/src/components/chips/Chips.js
index ce4a9fb305..89ea04f283 100644
--- a/src/components/chips/Chips.js
+++ b/src/components/chips/Chips.js
@@ -130,7 +130,7 @@ export class Chips extends Component {
var items = this.state.values.map((value , index) => {
var customContent = this.props.itemTemplate ? this.props.itemTemplate(value) : value;
var item = -
- this.removeItem(event, index)}>
+ this.removeItem(event, index)}>
{this.props.field ? ObjectUtils.resolveFieldData(value, this.props.field) : customContent}
;
return item;
@@ -138,7 +138,7 @@ export class Chips extends Component {
}
var inputToken = -
-
this.inputEL = ReactDOM.findDOMNode(el)} type="text" disabled={this.props.disabled||this.maxedOut()}
+ this.inputEL = ReactDOM.findDOMNode(el)} placeholder={this.props.placeholder} type="text" disabled={this.props.disabled||this.maxedOut()}
onKeyDown={(event) => this.onKeydown(event)} onFocus={this.onFocus.bind(this)} onBlur={this.onBlur.bind(this)}/>
;
diff --git a/src/components/colorpicker/ColorPicker.d.ts b/src/components/colorpicker/ColorPicker.d.ts
index 10ed853b4d..7d1cc324d4 100644
--- a/src/components/colorpicker/ColorPicker.d.ts
+++ b/src/components/colorpicker/ColorPicker.d.ts
@@ -8,7 +8,7 @@ interface ColorPickerProps {
defaultColor?: string;
inline?: boolean;
format?: string;
- appendTo?: string;
+ appendTo?: any;
disabled?: boolean;
tabindex?: string;
inputId?: string;
diff --git a/src/components/colorpicker/ColorPicker.js b/src/components/colorpicker/ColorPicker.js
index 2b646cd1f9..14d5a4544e 100644
--- a/src/components/colorpicker/ColorPicker.js
+++ b/src/components/colorpicker/ColorPicker.js
@@ -29,7 +29,7 @@ export class ColorPicker extends Component {
defaultColor: PropTypes.string,
inline: PropTypes.bool,
format: PropTypes.string,
- appendTo: PropTypes.object,
+ appendTo: PropTypes.any,
disabled: PropTypes.bool,
tabIndex: PropTypes.string,
inputId: PropTypes.string,
@@ -162,7 +162,12 @@ export class ColorPicker extends Component {
}
updateColorSelector() {
- this.colorSelector.style.backgroundColor = '#' + this.HSBtoHEX(this.hsbValue);
+ var hsbValue = this.validateHSB({
+ h: this.hsbValue.h,
+ s: 100,
+ b: 100
+ });
+ this.colorSelector.style.backgroundColor = '#' + this.HSBtoHEX(hsbValue);
}
updateColorHandle() {
@@ -422,18 +427,11 @@ export class ColorPicker extends Component {
return this.RGBtoHEX(this.HSBtoRGB(hsb));
}
- componentWillMount() {
- this.updateHSBValue(this.props.value);
- }
-
componentDidMount() {
+ this.updateHSBValue(this.props.value);
this.updateUI();
}
- componentWillReceiveProps(nextProps) {
- this.updateHSBValue(nextProps.value);
- }
-
componentDidUpdate() {
this.updateUI();
}
@@ -445,18 +443,24 @@ export class ColorPicker extends Component {
}
shouldComponentUpdate(nextProps) {
- let newValue = this.toHSB(nextProps.value);
- let oldValue = this.hsbValue;
- let equals = (newValue.h === oldValue.h && newValue.s === oldValue.s && newValue.b === oldValue.b);
-
- return !equals;
+ if(this.colorDragging) {
+ return false;
+ }
+ else {
+ let oldValue = this.hsbValue;
+ this.updateHSBValue(nextProps.value);
+ let newValue = this.toHSB(nextProps.value);
+ let equals = (newValue.h === oldValue.h && newValue.s === oldValue.s && newValue.b === oldValue.b);
+
+ return !equals;
+ }
}
updateUI() {
- this.updateColorHandle();
- this.updateColorSelector();
this.updateHue();
+ this.updateColorHandle();
this.updateInput();
+ this.updateColorSelector();
}
alignPanel() {
diff --git a/src/components/colorpicker/ColorPickerPanel.d.ts b/src/components/colorpicker/ColorPickerPanel.d.ts
new file mode 100644
index 0000000000..e31f87a70b
--- /dev/null
+++ b/src/components/colorpicker/ColorPickerPanel.d.ts
@@ -0,0 +1,10 @@
+import React = require("react");
+
+interface ColorPickerPanelProps {
+ appendTo?: any;
+ inline?: boolean;
+ disabled?: string;
+ onClick?(): void;
+}
+
+export class ColorPicker extends React.Component {}
\ No newline at end of file
diff --git a/src/components/colorpicker/ColorPickerPanel.js b/src/components/colorpicker/ColorPickerPanel.js
index a76b61860f..81d5eb2a8b 100644
--- a/src/components/colorpicker/ColorPickerPanel.js
+++ b/src/components/colorpicker/ColorPickerPanel.js
@@ -13,7 +13,7 @@ export class ColorPickerPanel extends Component {
}
static propsTypes = {
- appendTo: PropTypes.object,
+ appendTo: PropTypes.any,
inline: PropTypes.bool,
disabled: PropTypes.bool,
onClick: PropTypes.func
diff --git a/src/components/column/Column.d.ts b/src/components/column/Column.d.ts
index aad2ba406b..3f62833ee7 100644
--- a/src/components/column/Column.d.ts
+++ b/src/components/column/Column.d.ts
@@ -24,7 +24,7 @@ interface ColumnProps {
colSpan?: number;
rowSpan?: number;
editor?(props: any): void;
- editorValidator?(props: any): booelan;
+ editorValidator?(props: any): boolean;
rowReorder?: boolean;
rowReorderIcon?: string;
}
diff --git a/src/components/column/Column.js b/src/components/column/Column.js
index 6f9dda0f43..dafeaad37c 100644
--- a/src/components/column/Column.js
+++ b/src/components/column/Column.js
@@ -39,7 +39,7 @@ export class Column extends Component {
header: PropTypes.any,
body: PropTypes.any,
footer: PropTypes.any,
- sortable: PropTypes.bool,
+ sortable: PropTypes.any,
sortFunction: PropTypes.func,
filter: PropTypes.bool,
filterMatchMode: PropTypes.string,
diff --git a/src/components/datascroller/DataScroller.d.ts b/src/components/datascroller/DataScroller.d.ts
index 7a8d49f3ff..95ee61a99d 100644
--- a/src/components/datascroller/DataScroller.d.ts
+++ b/src/components/datascroller/DataScroller.d.ts
@@ -10,10 +10,11 @@ interface DataScrollerProps {
buffer?: number;
style?: object;
className?: string;
- onLazyLoad?({first: number, rows: number}): void;
+ onLazyLoad?(p: {first: number, rows: number}): void;
itemTemplate?(): void;
header?: string;
footer?: string;
+ lazy?: boolean;
}
-export class DataScroller extends React.Component {}
\ No newline at end of file
+export class DataScroller extends React.Component {}
diff --git a/src/components/datascroller/DataScroller.js b/src/components/datascroller/DataScroller.js
index 53ef6c48c4..becc3cf698 100644
--- a/src/components/datascroller/DataScroller.js
+++ b/src/components/datascroller/DataScroller.js
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
import classNames from 'classnames';
export class DataScroller extends Component {
+
static defaultProps = {
id: null,
value: null,
@@ -17,7 +18,8 @@ export class DataScroller extends Component {
onLazyLoad: null,
itemTemplate: null,
header:null,
- footer:null
+ footer:null,
+ lazy: null
}
static propsTypes = {
@@ -33,7 +35,8 @@ export class DataScroller extends Component {
onLazyLoad: PropTypes.func,
itemTemplate: PropTypes.func,
header:PropTypes.string,
- footer:PropTypes.string
+ footer:PropTypes.string,
+ lazy:PropTypes.bool
}
constructor(props) {
@@ -161,6 +164,13 @@ export class DataScroller extends Component {
}
componentDidUpdate(prevProps, prevState) {
+ var newValue = this.props.value;
+ if (newValue && this.value !== newValue) {
+ this.value = newValue;
+
+ this.handleDataChange();
+ }
+
if(this.props.loader && !this.isLoaded) {
this.unbindScrollListener();
@@ -173,15 +183,6 @@ export class DataScroller extends Component {
}
}
- componentWillReceiveProps(nextProps) {
- var newValue = nextProps.value;
- if (newValue && this.value !== newValue) {
- this.value = newValue;
-
- this.handleDataChange();
- }
- }
-
componentWillUnmount() {
if (this.scrollFunction) {
this.unbindScrollListener();
@@ -219,4 +220,4 @@ export class DataScroller extends Component {
);
}
-}
\ No newline at end of file
+}
diff --git a/src/components/datatable/BodyCell.js b/src/components/datatable/BodyCell.js
index 54c278322c..936cc96d8d 100644
--- a/src/components/datatable/BodyCell.js
+++ b/src/components/datatable/BodyCell.js
@@ -95,6 +95,7 @@ export class BodyCell extends Component {
if(this.state.editing) {
let focusable = DomHandler.findSingle(this.container, 'input');
if(focusable) {
+ focusable.setAttribute('data-isCellEditing', true);
focusable.focus();
}
@@ -111,14 +112,14 @@ export class BodyCell extends Component {
render() {
let content, header;
- let cellClassName = classNames(this.props.headerClassName||this.props.className, {
+ let cellClassName = classNames(this.props.bodyClassName||this.props.className, {
'ui-selection-column': this.props.selectionMode,
'ui-editable-column': this.props.editor,
'ui-cell-editing': this.state.editing
});
if(this.props.expander) {
- let iconClassName = classNames('ui-row-toggler fa fa-fw ui-clickable', {'fa-chevron-circle-down': this.props.expanded, 'fa-chevron-circle-right': !this.props.expanded});
+ let iconClassName = classNames('ui-row-toggler pi pi-fw ui-clickable', {'pi-chevron-circle-down': this.props.expanded, 'pi-chevron-circle-right': !this.props.expanded});
content =
;
@@ -154,12 +155,16 @@ export class BodyCell extends Component {
if(this.props.responsive) {
header = {this.props.header};
}
+
+ /* eslint-disable */
+ let editorKeyHelper = this.props.editor && {this.keyHelper = el;}} className="ui-cell-editor-key-helper ui-helper-hidden-accessible" onFocus={this.onEditorFocus}>;
+ /* eslint-enable */
return (
{this.container = el;}} className={cellClassName} style={this.props.bodyStyle||this.props.style} onClick={this.onClick} onKeyDown={this.onKeyDown}
rowSpan={this.props.rowSpan}>
{header}
- {this.props.editor && {this.keyHelper = el;}} className="ui-cell-editor-key-helper ui-helper-hidden-accessible" onFocus={this.onEditorFocus}>}
+ {editorKeyHelper}
{content}
);
diff --git a/src/components/datatable/DataTable.css b/src/components/datatable/DataTable.css
index 897a86ab00..672bb18b88 100644
--- a/src/components/datatable/DataTable.css
+++ b/src/components/datatable/DataTable.css
@@ -75,6 +75,10 @@
cursor: pointer;
}
+.ui-datatable-loading-icon {
+ font-size: 2em;
+}
+
/* Scrollable */
.ui-datatable-scrollable-body {
overflow:auto;
diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
index 6eb953f1fc..974aad610f 100644
--- a/src/components/datatable/DataTable.d.ts
+++ b/src/components/datatable/DataTable.d.ts
@@ -64,8 +64,9 @@ interface DataTableProps {
rowGroupMode?: string;
autoLayout?:boolean;
rowClassName?(rowData: any): object;
- rowGroupHeaderTemplate?(): void;
- rowGroupFooterTemplate?(): void;
+ rowGroupHeaderTemplate?(data: any, index: number): void;
+ rowGroupFooterTemplate?(data: any, index: number): void;
+ groupField?: string;
loading?:boolean;
loadingIcon?:string;
onColumnResizeEnd?(e: {element: any, delta: number}): void;
@@ -82,6 +83,7 @@ interface DataTableProps {
onContextMenuSelect?(e: {originalEvent: Event, data: any}): void;
onColReorder?(e: {dragIndex: number, dropIndex: number, columns: any}): void;
onColReorder?(e: {originalEvent: Event, value: any, dragIndex: number, dropIndex: number}): void;
+ onRowReorder?(e: {originalEvent: Event, value: any, dragIndex: number, dropIndex: number}): void;
}
export class DataTable extends React.Component {}
diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js
index 6ccbc11e0a..70f021935c 100644
--- a/src/components/datatable/DataTable.js
+++ b/src/components/datatable/DataTable.js
@@ -71,7 +71,7 @@ export class DataTable extends Component {
rowGroupHeaderTemplate: null,
rowGroupFooterTemplate: null,
loading: false,
- loadingIcon: 'fa-circle-o-notch',
+ loadingIcon: 'pi pi-circle-o-notch',
autoLayout: false,
onColumnResizeEnd: null,
onSort: null,
@@ -188,6 +188,7 @@ export class DataTable extends Component {
this.onColumnDragLeave = this.onColumnDragLeave.bind(this);
this.onColumnDrop = this.onColumnDrop.bind(this);
this.onVirtualScroll = this.onVirtualScroll.bind(this);
+ this.frozenSelectionMode = null;
}
onPageChange(event) {
@@ -221,6 +222,9 @@ export class DataTable extends Component {
let sortOrder = (this.state.sortField === event.sortField) ? this.state.sortOrder * -1 : 1;
let multiSortMeta;
+ this.columnSortable = event.sortable;
+ this.columnSortFunction = event.sortFunction;
+
if(this.props.sortMode === 'multiple') {
let metaKey = event.originalEvent.metaKey||event.originalEvent.ctrlKey;
multiSortMeta = this.state.multiSortMeta;
@@ -275,7 +279,15 @@ export class DataTable extends Component {
sortSingle(data) {
let value = [...data];
- value.sort((data1, data2) => {
+
+ if(this.columnSortable && this.columnSortable === 'custom' && this.columnSortFunction) {
+ value = this.columnSortFunction({
+ field: this.state.sortField,
+ order: this.state.sortOrder
+ });
+ }
+ else {
+ value.sort((data1, data2) => {
let value1 = ObjectUtils.resolveFieldData(data1, this.state.sortField);
let value2 = ObjectUtils.resolveFieldData(data2, this.state.sortField);
let result = null;
@@ -287,12 +299,13 @@ export class DataTable extends Component {
else if (value1 == null && value2 == null)
result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string')
- result = value1.localeCompare(value2);
+ result = value1.localeCompare(value2, undefined, { numeric: true });
else
result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
return (this.state.sortOrder * result);
});
+ }
return value;
}
@@ -313,7 +326,7 @@ export class DataTable extends Component {
if (typeof value1 === 'string' || value1 instanceof String) {
if (value1.localeCompare && (value1 !== value2)) {
- return (this.state.multiSortMeta[index].order * value1.localeCompare(value2));
+ return (this.state.multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true }));
}
}
else {
@@ -386,19 +399,27 @@ export class DataTable extends Component {
filters: this.props.filters
});
}
+
+ this.container.style.width = this.getContainerWidth();
}
- componentWillReceiveProps(nextProps) {
- if(nextProps.first !== null && nextProps.first !== this.props.first) { this.setState({first: nextProps.first}) }
- if(nextProps.rows !== null && nextProps.rows !== this.props.rows) { this.setState({rows: nextProps.rows}) }
- if(nextProps.sortField && nextProps.sortField !== this.props.sortField) { this.setState({sortField: nextProps.sortField}) }
- if(nextProps.sortOrder && nextProps.sortOrder !== this.props.sortOrder) { this.setState({sortOrder: nextProps.sortOrder}) }
- if(nextProps.multiSortMeta && nextProps.multiSortMeta !== this.props.multiSortMeta) { this.setState({multiSortMeta: nextProps.multiSortMeta}) }
- if(nextProps.filters && nextProps.filters !== this.props.filters) { this.setState({filters: nextProps.filters}) }
+ static getDerivedStateProps(nextProps, prevState) {
+ let state = {};
+
+ if(nextProps.first !== null && nextProps.first !== prevState.first) { state = {...state, ...{first: nextProps.first}} }
+ if(nextProps.rows !== null && nextProps.rows !== prevState.rows) { state = {...state, ...{rows: nextProps.rows}} }
+ if(nextProps.sortField && nextProps.sortField !== prevState.sortField) { state = {...state, ...{sortField: nextProps.sortField}} }
+ if(nextProps.sortOrder && nextProps.sortOrder !== prevState.sortOrder) { state = {...state, ...{sortOrder: nextProps.sortOrder}} }
+ if(nextProps.multiSortMeta && nextProps.multiSortMeta !== prevState.multiSortMeta) { state = {...state, ...{multiSortMeta: nextProps.multiSortMeta}} }
+ if(nextProps.filters && nextProps.filters !== prevState.filters) { state = {...state, ...{filters: nextProps.filters}} }
+
+ if(nextProps.globalFilter !== null) { state = {...state, ...{first: 0}} }
+
+ if(Object.keys(state).length > 0)
+ return state;
+
+ return null;
- if(nextProps.globalFilter !== this.props.globalFilter) {
- this.setState({first: 0});
- }
}
hasFooter() {
@@ -619,7 +640,7 @@ export class DataTable extends Component {
this.props.onColReorder({
dragIndex: dragIndex,
dropIndex: dropIndex,
- columns: this.columns
+ columns: columns
});
}
}
@@ -657,7 +678,7 @@ export class DataTable extends Component {
}
exportCSV() {
- let data = this.props.value;
+ let data = this.processData();
let csv = '\ufeff';
let columns = React.Children.toArray(this.props.children);
@@ -691,7 +712,7 @@ export class DataTable extends Component {
});
if(window.navigator.msSaveOrOpenBlob) {
- navigator.msSaveOrOpenBlob(blob, this.exportFilename + '.csv');
+ navigator.msSaveOrOpenBlob(blob, this.props.exportFilename + '.csv');
}
else {
let link = document.createElement("a");
@@ -810,6 +831,20 @@ export class DataTable extends Component {
return frozenColumns;
}
+ getContainerWidth() {
+ if(this.props.scrollable) {
+ if(this.props.scrollWidth) {
+ return this.props.scrollWidth;
+ }
+ else if(this.props.frozenWidth && this.props.unfrozenWidth) {
+ return parseFloat(this.props.frozenWidth) + parseFloat(this.props.unfrozenWidth) + 'px';
+ }
+ }
+ else {
+ return this.props.style ? this.props.style.width : null;
+ }
+ }
+
getScrollableColumns(columns) {
let scrollableColumns = null;
@@ -823,6 +858,17 @@ export class DataTable extends Component {
return scrollableColumns;
}
+ getFrozenSelectionModeInColumn(columns) {
+ if(Array.isArray(columns)) {
+ for(let col of columns) {
+ if(col.props.selectionMode)
+ return col.props.selectionMode;
+ }
+ }
+
+ return null;
+ }
+
createTableHeader(columns, columnGroup) {
return
@@ -919,8 +965,8 @@ export class DataTable extends Component {
let footerFacet = this.props.footer &&
);
}
-}
\ No newline at end of file
+}
diff --git a/src/components/datatable/HeaderCell.js b/src/components/datatable/HeaderCell.js
index a6b9af9b3e..da2efc5f10 100644
--- a/src/components/datatable/HeaderCell.js
+++ b/src/components/datatable/HeaderCell.js
@@ -20,7 +20,9 @@ export class HeaderCell extends Component {
if(DomHandler.hasClass(targetNode, 'ui-sortable-column') ||Â DomHandler.hasClass(targetNode, 'ui-column-title') ||Â DomHandler.hasClass(targetNode, 'ui-sortable-column-icon')) {
this.props.onSort({
originalEvent: e,
- sortField: this.props.field
+ sortField: this.props.field,
+ sortFunction: this.props.sortFunction,
+ sortable: this.props.sortable
});
}
}
@@ -95,8 +97,8 @@ export class HeaderCell extends Component {
'ui-selection-column': this.props.selectionMode}, this.props.headerClassName||this.props.className);
if(this.props.sortable) {
- var sortIcon = sorted ? sortOrder < 0 ? 'fa-sort-desc' : 'fa-sort-asc': 'fa-sort';
- sortIconElement = ;
+ var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-down' : 'pi-sort-up': 'pi-sort';
+ sortIconElement = ;
}
if(this.props.filter) {
diff --git a/src/components/datatable/RowCheckbox.js b/src/components/datatable/RowCheckbox.js
index 19780ebafc..4df10f14ed 100644
--- a/src/components/datatable/RowCheckbox.js
+++ b/src/components/datatable/RowCheckbox.js
@@ -31,7 +31,7 @@ export class RowCheckbox extends Component {
render() {
let className = classNames('ui-chkbox-box ui-widget ui-corner-all ui-state-default', {'ui-state-active': this.props.selected});
- let iconClassName = classNames('ui-chkbox-icon ui-clickable', {'fa fa-check': this.props.selected});
+ let iconClassName = classNames('ui-chkbox-icon ui-clickable', {'pi pi-check': this.props.selected});
return {this.props.footer}
;
let resizeHelper = this.props.resizableColumns && {this.resizerHelper = el;}} className="ui-column-resizer-helper ui-state-highlight" style={{display:'none'}}>
;
let tableContent = null;
- let resizeIndicatorUp = this.props.reorderableColumns && {this.reorderIndicatorUp = el;}} className="fa fa-arrow-down ui-datatable-reorder-indicator-up" style={{position: 'absolute', display: 'none'}} />
- let resizeIndicatorDown = this.props.reorderableColumns && {this.reorderIndicatorDown = el;}} className="fa fa-arrow-up ui-datatable-reorder-indicator-down" style={{position: 'absolute', display: 'none'}} />;
+ let resizeIndicatorUp = this.props.reorderableColumns && {this.reorderIndicatorUp = el;}} className="pi pi-arrow-down ui-datatable-reorder-indicator-up" style={{position: 'absolute', display: 'none'}} />
+ let resizeIndicatorDown = this.props.reorderableColumns && {this.reorderIndicatorDown = el;}} className="pi pi-arrow-up ui-datatable-reorder-indicator-down" style={{position: 'absolute', display: 'none'}} />;
let loader;
if(this.props.loading) {
@@ -928,6 +974,7 @@ export class DataTable extends Component {
}
if(this.props.scrollable) {
+ this.frozenSelectionMode = this.frozenSelectionMode || this.getFrozenSelectionModeInColumn(columns);
let frozenColumns = this.getFrozenColumns(columns);
let scrollableColumns = frozenColumns ? this.getScrollableColumns(columns) : columns;
let frozenView, scrollableView;
@@ -970,4 +1017,4 @@ export class DataTable extends Component {
diff --git a/src/components/datatable/RowRadioButton.js b/src/components/datatable/RowRadioButton.js
index 60ce911351..bb00bb928a 100644
--- a/src/components/datatable/RowRadioButton.js
+++ b/src/components/datatable/RowRadioButton.js
@@ -32,7 +32,7 @@ export class RowRadioButton extends Component {
render() {
let className = classNames('ui-radiobutton-box ui-widget ui-radiobutton-relative ui-state-default', {'ui-state-active': this.props.selected});
- let iconClassName = classNames('ui-radiobutton-icon ui-clickable', {'fa fa-circle': this.props.selected});
+ let iconClassName = classNames('ui-radiobutton-icon ui-clickable', {'pi pi-circle-on': this.props.selected});
return
diff --git a/src/components/datatable/TableBody.js b/src/components/datatable/TableBody.js
index d01d11fb1b..0039d3c813 100644
--- a/src/components/datatable/TableBody.js
+++ b/src/components/datatable/TableBody.js
@@ -266,7 +266,7 @@ export class TableBody extends Component {
}
isSelectionEnabled() {
- if(this.props.selectionMode) {
+ if(this.props.selectionMode || this.props.frozenSelectionMode != null) {
return true;
}
else {
diff --git a/src/components/dataview/DataView.css b/src/components/dataview/DataView.css
index 5c7e01540b..657c7aac68 100644
--- a/src/components/dataview/DataView.css
+++ b/src/components/dataview/DataView.css
@@ -36,3 +36,6 @@
width: 100%;
}
+.ui-dataview-loading-icon {
+ font-size: 2em;
+}
\ No newline at end of file
diff --git a/src/components/dataview/DataView.js b/src/components/dataview/DataView.js
index 1785c9cad3..6b7d358b46 100644
--- a/src/components/dataview/DataView.js
+++ b/src/components/dataview/DataView.js
@@ -125,7 +125,7 @@ export class DataView extends Component {
else if (value1 == null && value2 == null)
result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string')
- result = value1.localeCompare(value2);
+ result = value1.localeCompare(value2, undefined, { numeric: true });
else
result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
return (this.state.sortOrder * result);
@@ -165,17 +165,14 @@ export class DataView extends Component {
}
}
- componentWillUpdate(nextProps){
- if (this.state.sortField!==nextProps.sortField || this.state.sortOrder!==nextProps.sortOrder) {
- this.setState({sortField: nextProps.sortField, sortOrder: nextProps.sortOrder});
- this.sortChange = false;
- }
- }
-
- componentDidUpdate(){
- if(this.state.sortField && !this.sortChange){
- this.sort();
+ static getDerivedStateFromProps(nextProps, prevState) {
+ if (prevState.sortField!==nextProps.sortField || prevState.sortOrder!==nextProps.sortOrder) {
+ return {
+ sortField: nextProps.sortField,
+ sortOrder: nextProps.sortOrder
+ };
}
+ return null;
}
renderTopPaginator(){
@@ -247,6 +244,10 @@ export class DataView extends Component {
}
shouldComponentUpdate(nextProps, nextState) {
+ if (this.state.sortField!==nextProps.sortField || this.state.sortOrder!==nextProps.sortOrder) {
+ this.sortChange = false;
+ }
+
if(this.props.lazy && nextProps.value === this.props.value)
return false;
else
@@ -254,6 +255,9 @@ export class DataView extends Component {
}
render() {
+ if(this.state.sortField && !this.sortChange){
+ this.sort();
+ }
let className = classNames('ui-dataview ui-widget', {'ui-dataview-list': (this.state.layout === 'list'),
'ui-dataview-grid': (this.state.layout === 'grid')}, this.props.className);
@@ -317,10 +321,12 @@ export class DataViewLayoutOptions extends Component {
return (
);
diff --git a/src/components/dialog/Dialog.css b/src/components/dialog/Dialog.css
index 7fb9583695..a4a0016670 100644
--- a/src/components/dialog/Dialog.css
+++ b/src/components/dialog/Dialog.css
@@ -67,7 +67,7 @@
.ui-confirmdialog.ui-dialog .ui-dialog-content {
padding: 1em 2em;
}
-.ui-confirmdialog .ui-dialog-content .fa {
+.ui-confirmdialog .ui-dialog-content .ui-confirmdialog-icon {
font-size: 1.5em;
vertical-align: middle;
margin-right: .5em;
diff --git a/src/components/dialog/Dialog.js b/src/components/dialog/Dialog.js
index e3276d49c0..e571f49a2c 100644
--- a/src/components/dialog/Dialog.js
+++ b/src/components/dialog/Dialog.js
@@ -82,9 +82,7 @@ export class Dialog extends Component {
this.moveOnTop = this.moveOnTop.bind(this);
this.onCloseMouseDown = this.onCloseMouseDown.bind(this);
this.initResize = this.initResize.bind(this);
- }
- componentWillMount() {
this.id = this.props.id || UniqueComponentId();
}
@@ -417,19 +415,6 @@ export class Dialog extends Component {
}
}
- componentWillReceiveProps(nextProps) {
- if(this.state.visible !== nextProps.visible) {
- if (nextProps.visible)
- this.show();
- else {
- if(this.preventVisibleChangePropagation)
- this.preventVisibleChangePropagation = false;
- else
- this.hide();
- }
- }
- }
-
componentDidMount() {
if(this.state.visible) {
this.show();
@@ -437,7 +422,7 @@ export class Dialog extends Component {
}
}
- componentDidUpdate() {
+ getSnapshotBeforeUpdate(prevProps, prevState) {
if(this.props.autoAlign && this.state.visible) {
let height = DomHandler.getOuterHeight(this.container);
if(height !== this.currentHeight) {
@@ -445,6 +430,18 @@ export class Dialog extends Component {
this.positionOverlay();
}
}
+
+ return null;
+ }
+
+ componentDidUpdate(prevProps, prevState, snapshot) {
+ if(prevState.visible !== this.props.visible) {
+ if (this.props.visible)
+ this.show();
+ else {
+ this.hide();
+ }
+ }
}
componentWillUnmount() {
@@ -457,7 +454,7 @@ export class Dialog extends Component {
if(this.props.closable) {
return (
-
+
);
}
diff --git a/src/components/dropdown/Dropdown.css b/src/components/dropdown/Dropdown.css
index 87a9615601..ab4ececb2f 100644
--- a/src/components/dropdown/Dropdown.css
+++ b/src/components/dropdown/Dropdown.css
@@ -28,9 +28,12 @@
padding: 0 .25em;
}
-.ui-dropdown .ui-dropdown-trigger .fa {
- margin-top: .3em;
- margin-left: -.125em;
+.ui-dropdown .ui-dropdown-trigger .ui-dropdown-trigger-icon {
+ top: 50%;
+ left: 50%;
+ margin-top: -.5em;
+ margin-left: -.5em;
+ position: absolute;
}
.ui-dropdown .ui-dropdown-label {
@@ -105,7 +108,7 @@
display: inline-block;
}
-.ui-dropdown-panel .ui-dropdown-filter-container .fa {
+.ui-dropdown-panel .ui-dropdown-filter-container .ui-dropdown-filter-icon {
position: absolute;
top: .8em;
right: 1em;
diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
index 5fa272afde..a8db06b382 100644
--- a/src/components/dropdown/Dropdown.d.ts
+++ b/src/components/dropdown/Dropdown.d.ts
@@ -4,7 +4,8 @@ interface DropdownProps {
id?: string;
value?: any;
options?: Array;
- itemTemplate?(): void;
+ optionLabel?: string;
+ itemTemplate?(option:any): any;
style?: object;
className?: string;
autoWidth?: boolean;
@@ -29,4 +30,4 @@ interface DropdownProps {
onContextMenu?(): void;
}
-export class Dropdown extends React.Component {}
\ No newline at end of file
+export class Dropdown extends React.Component {}
diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
index 52aba792db..70724631fb 100644
--- a/src/components/dropdown/Dropdown.js
+++ b/src/components/dropdown/Dropdown.js
@@ -416,7 +416,7 @@ export class Dropdown extends Component {
renderClearIcon() {
if(this.props.value && this.props.showClear && !this.props.disabled) {
return (
-
+
);
}
else {
@@ -426,7 +426,7 @@ export class Dropdown extends Component {
renderDropdownIcon() {
return
+
{`
+import React, { Component } from 'react';
+import { TreeTable } from '../../components/treetable/TreeTable';
+import { Column } from "../../components/column/Column";
+import { NodeService } from '../service/NodeService';
+import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
+
export class TreeTableDemo extends Component {
constructor(props) {
super(props);
- this.state = { selectedFile: null, selectedFiles1: [], selectedFiles2: [] };
- }
-
- onSelectionChange(e) {
- this.setState({ selectedFile: e.selection });
+ this.state = { data: [] };
}
- onMultiMetaKeySelectionChange(e) {
- this.setState({ selectedFiles1: e.selection });
- }
-
- onCheckboxSelectionChange(e) {
- this.setState({ selectedFiles2: e.selection });
+ componentDidMount() {
+ this.nodeservice.getNodes().then(data => this.setState({data: data}));
}
render() {
- var data = [
- {
- "data": {
- "name": "Documents",
- "size": "75kb",
- "type": "Folder"
- },
- "children": [
- {
- "data": {
- "name": "Work",
- "size": "55kb",
- "type": "Folder"
- },
- "children": [
- {
- "data": {
- "name": "Expenses.doc",
- "size": "30kb",
- "type": "Document"
- }
- },
- {
- "data": {
- "name": "Resume.doc",
- "size": "25kb",
- "type": "Resume"
- }
- }
- ]
- },
- {
- "data": {
- "name": "Home",
- "size": "20kb",
- "type": "Folder"
- },
- "children": [
- {
- "data": {
- "name": "Invoices",
- "size": "20kb",
- "type": "Text"
- }
- }
- ]
- }
- ]
- },
- {
- "data": {
- "name": "Pictures",
- "size": "150kb",
- "type": "Folder"
- },
- "children": [
- {
- "data": {
- "name": "barcelona.jpg",
- "size": "90kb",
- "type": "Picture"
- }
- },
- {
- "data": {
- "name": "primeui.png",
- "size": "30kb",
- "type": "Picture"
- }
- },
- {
- "data": {
- "name": "optimus.jpg",
- "size": "30kb",
- "type": "Picture"
- }
- }
- ]
- }
- ];
-
return (
-
+
;
}
@@ -456,7 +456,7 @@ export class Dropdown extends Component {
return
this.filterInput = el} type="text" autoComplete="off" className="ui-dropdown-filter ui-inputtext ui-widget ui-state-default ui-corner-all" placeholder={this.props.filterPlaceholder}
onKeyDown={this.onFilterInputKeyDown} onChange={this.onFilterInputChange} />
-
+
;
}
else {
@@ -470,9 +470,12 @@ export class Dropdown extends Component {
componentDidMount() {
if(this.props.autoWidth) {
- if(!this.props.style || (!this.props.style['width'] && !this.props.style['min-width'])) {
- this.container.style.width = this.nativeSelect.offsetWidth + 30 + 'px';
- }
+ // Added setTimeout to render it with the correct width value in hidden container components such as TabView and Accordion.
+ setTimeout(() => {
+ if(!this.props.style || (!this.props.style['width'] && !this.props.style['min-width'])) {
+ this.container.style.width = this.nativeSelect.offsetWidth + 30 + 'px';
+ }
+ }, 0);
}
}
@@ -506,6 +509,11 @@ export class Dropdown extends Component {
let items = this.renderItems(selectedOption);
let filterElement = this.renderFilter();
let clearIcon = this.renderClearIcon();
+
+ if(this.props.editable && this.editableInput) {
+ let value = label||this.props.value||'';
+ this.editableInput.value = value;
+ }
return (
this.container = el} className={className} style={this.props.style} onClick={this.onClick}
diff --git a/src/components/dropdown/DropdownItem.d.ts b/src/components/dropdown/DropdownItem.d.ts
index 136fac3193..0f44edfcb2 100644
--- a/src/components/dropdown/DropdownItem.d.ts
+++ b/src/components/dropdown/DropdownItem.d.ts
@@ -2,7 +2,7 @@ import React = require("react");
interface DropdownItemProps {
option?: object;
- template?(): void;
+ template?(option:any): any;
selected?: boolean;
onClick?(e: {originalEvent: Event, option: object}): void;
}
diff --git a/src/components/editor/Editor.js b/src/components/editor/Editor.js
index 1120961a19..80d8f3c657 100644
--- a/src/components/editor/Editor.js
+++ b/src/components/editor/Editor.js
@@ -81,9 +81,9 @@ export class Editor extends Component {
this.quill.on('selection-change', this.handleSelectionChange);
}
- componentWillReceiveProps(nextProps) {
- if(nextProps.value !== this.value) {
- this.value = nextProps.value;
+ componentDidUpdate(prevProps, prevState, snapshot) {
+ if(this.props.value !== this.value) {
+ this.value = this.props.value;
let sel = this.quill.getSelection();
if(sel) {
var length = this.quill.getLength();
diff --git a/src/components/fieldset/Fieldset.js b/src/components/fieldset/Fieldset.js
index 0f52a7d6b5..8e0d3d44ee 100644
--- a/src/components/fieldset/Fieldset.js
+++ b/src/components/fieldset/Fieldset.js
@@ -32,9 +32,7 @@ export class Fieldset extends Component {
super(props);
this.state = {collapsed: this.props.collapsed};
this.toggle = this.toggle.bind(this);
- }
- componentWillMount() {
this.id = this.props.id || UniqueComponentId();
}
@@ -49,12 +47,14 @@ export class Fieldset extends Component {
}
}
- componentWillReceiveProps(nextProps) {
- if(nextProps.collapsed != null && nextProps.collapsed !== this.state.collapsed) {
- this.setState({
+ static getDerivedStateFromProps(nextProps, prevState) {
+ if(nextProps.collapsed != null && nextProps.collapsed !== prevState.collapsed) {
+ return {
collapsed: nextProps.collapsed
- });
+ };
}
+
+ return null;
}
toggle(e) {
@@ -101,7 +101,7 @@ export class Fieldset extends Component {
renderToggleIcon() {
if(this.props.toggleable) {
- let className = classNames('ui-fieldset-toggler fa fa-fw', { 'fa-plus': this.state.collapsed, 'fa-minus': !this.state.collapsed });
+ let className = classNames('ui-fieldset-toggler pi ', { 'pi-plus': this.state.collapsed, 'pi-minus': !this.state.collapsed });
return (
diff --git a/src/components/fileupload/FileUpload.js b/src/components/fileupload/FileUpload.js
index 74e8dfc406..f2aa669fc4 100644
--- a/src/components/fileupload/FileUpload.js
+++ b/src/components/fileupload/FileUpload.js
@@ -119,6 +119,7 @@ export class FileUpload extends Component {
onFileSelect(event) {
this.setState({msgs:[]});
+ this.files = this.state.files || [];
let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
for (let file of files) {
if (!this.isFileSelected(file)) {
@@ -126,16 +127,17 @@ export class FileUpload extends Component {
if (this.isImage(file)) {
file.objectURL = window.URL.createObjectURL(file);
}
-
- this.setState({files: [...this.state.files, file]}, () => {
- if (this.hasFiles() && this.props.auto) {
- this.upload();
- }
- });
+ this.files.push(file);
}
}
}
-
+
+ this.setState({files: this.files}, () => {
+ if (this.hasFiles() && this.props.auto) {
+ this.upload();
+ }
+ });
+
if(this.props.onSelect) {
this.props.onSelect({originalEvent: event, files: files});
}
@@ -290,13 +292,13 @@ export class FileUpload extends Component {
}
renderChooseButton()Â {
- let className = classNames('ui-fileupload-choose ui-button ui-widget ui-state-default ui-corner-all');
+ let className = classNames('ui-button ui-fileupload-choose ui-widget ui-state-default ui-corner-all ui-button-text-icon-left');
return (
-
+
this.fileInput = el} type="file" onChange={this.onFileSelect} onFocus={this.onFocus} onBlur={this.onBlur}
multiple={this.props.multiple} accept={this.props.accept} disabled={this.props.disabled} />
-
+
{this.props.chooseLabel}
);
@@ -310,7 +312,7 @@ export class FileUpload extends Component {
let preview = this.isImage(file) ? 
: null;
let fileName = ,
+ optionLabel?: string,
itemTemplate?(): void,
style?: object,
listStyle?: object,
@@ -15,4 +16,4 @@ interface ListBoxProps {
onChange?(e: {originalEvent: Event, value: any}): void;
}
-export class ListBox extends React.Component {}
\ No newline at end of file
+export class ListBox extends React.Component {}
diff --git a/src/components/listbox/ListBoxHeader.js b/src/components/listbox/ListBoxHeader.js
index 6d27b6e16f..f0426bbcc0 100644
--- a/src/components/listbox/ListBoxHeader.js
+++ b/src/components/listbox/ListBoxHeader.js
@@ -35,7 +35,7 @@ export class ListBoxHeader extends Component {
- this.onItemMouseEnter(event,category)} onMouseLeave={event=>this.onItemMouseLeave(event,category)}
diff --git a/src/components/menu/MenuItem.js b/src/components/menu/MenuItem.js
index c1017b342e..98ba4afa2b 100644
--- a/src/components/menu/MenuItem.js
+++ b/src/components/menu/MenuItem.js
@@ -28,12 +28,12 @@ export class MenuItem extends Component{
render() {
var className=classNames('ui-menuitem-link ui-corner-all',{'ui-state-disabled':this.item.disabled},
{'ui-menuitem-link-parent':this.item.items && this.props.parentMenu==='SlideMenu'});
- var iconClass=classNames('ui-menuitem-icon fa fa-fw',this.item.icon?this.item.icon:null);
- var rootClass=classNames('ui-submenu-icon fa fa-fw',{' fa-caret-down':this.props.root},{' fa-caret-right':!this.props.root})
+ var iconClass=classNames('ui-menuitem-icon',this.item.icon?this.item.icon:null);
+ var rootClass=classNames('ui-submenu-icon pi pi-fw',{' pi-caret-down':this.props.root},{'pi-caret-right':!this.props.root})
if(this.item.url){
return (
- {this.item.items && (this.props.parentMenu==='TieredMenu' || this.props.parentMenu==='ContextMenu') && }
+ {this.item.items && (this.props.parentMenu==='TieredMenu' || this.props.parentMenu==='ContextMenu') && }
{this.item.icon && }
{this.item.label}
{this.item.items && this.props.parentMenu==='Menubar' && }
@@ -43,7 +43,7 @@ export class MenuItem extends Component{
else{
return (
- {this.item.items && (this.props.parentMenu==='TieredMenu' || this.props.parentMenu==='ContextMenu') && }
+ {this.item.items && (this.props.parentMenu==='TieredMenu' || this.props.parentMenu==='ContextMenu') && }
{this.item.icon && }
{this.item.label}
{this.item.items && this.props.parentMenu==='Menubar' && }
diff --git a/src/components/message/Message.js b/src/components/message/Message.js
index 6ee0f76c09..d05cf174e1 100644
--- a/src/components/message/Message.js
+++ b/src/components/message/Message.js
@@ -29,11 +29,11 @@ export class Message extends Component {
'ui-message-icon-only': !this.props.text
});
- let icon = classNames('ui-message-icon fa fa-fw', {
- 'fa-info-circle': this.props.severity === 'info',
- 'fa-warning': this.props.severity === 'warn',
- 'fa-close': this.props.severity === 'error',
- 'fa-check': this.props.severity === 'success',
+ let icon = classNames('ui-message-icon pi pi-fw', {
+ 'pi-info-circle': this.props.severity === 'info',
+ 'pi-exclamation-triangle': this.props.severity === 'warn',
+ 'pi-times': this.props.severity === 'error',
+ 'pi-check': this.props.severity === 'success',
});
return
-{`
+
+ {`
import {Column} from 'primereact/components/column/Column';
`}
-
+
-
-{`
+
+ {`
+
Callback to invoke when a node is selected.
TreeTable requires selectionChange callback (for selectable TreeTable)
+
+ onSort
+ event.field: Field name of the sorted column
+ event.order: Sort order as 1 or -1
+ event.multisortmeta: Sort metadata in multi sort mode. See multiple sorting section for the structure of this object.
+ Callback to invoke when a column gets sorted.
+
@@ -593,112 +515,31 @@ import {Column} from 'primereact/components/column/Column';
View on GitHub
-{file.name}
;
let size = {this.formatSize(file.size)}
;
- let removeButton =
+ let removeButton =
return
{preview}
@@ -330,8 +332,8 @@ export class FileUpload extends Component {
let chooseButton = this.renderChooseButton();
if (!this.props.auto) {
- uploadButton = ;
- cancelButton = ;
+ uploadButton = ;
+ cancelButton = ;
}
if (this.hasFiles()) {
@@ -358,7 +360,7 @@ export class FileUpload extends Component {
renderBasic() {
let buttonClassName = classNames('ui-button ui-fileupload-choose ui-widget ui-state-default ui-corner-all ui-button-text-icon-left', {'ui-fileupload-choose-selected': this.hasFiles()});
- let iconClassName = classNames('ui-button-icon-left fa', {'fa-plus': !this.hasFiles() || this.props.auto, 'fa-upload': this.hasFiles() && !this.props.auto});
+ let iconClassName = classNames('ui-button-icon-left pi', {'pi-plus': !this.hasFiles() || this.props.auto, 'pi-upload': this.hasFiles() && !this.props.auto});
return (
@@ -370,7 +372,7 @@ export class FileUpload extends Component {
);
}
- render() {
+ render() {
if (this.props.mode === 'advanced')
return this.renderAdvanced();
else if (this.props.mode === 'basic')
diff --git a/src/components/gmap/GMap.js b/src/components/gmap/GMap.js
index a8992836ef..1ad0d91836 100644
--- a/src/components/gmap/GMap.js
+++ b/src/components/gmap/GMap.js
@@ -33,11 +33,6 @@ export class GMap extends Component {
onOverlayDragEnd: PropTypes.func,
onOverlayClick: PropTypes.func
};
-
- constructor(props)Â {
- super(props);
- this.state = {};
- }
initMap() {
this.map = new google.maps.Map(this.container, this.props.options);
@@ -110,15 +105,16 @@ export class GMap extends Component {
return this.map;
}
- componentWillReceiveProps(nextProps, nextState) {
- if(this.props.overlays !== nextProps.overlays) {
- if(this.props.overlays) {
- for(let overlay of this.props.overlays) {
+ componentDidUpdate(prevProps, prevState, snapshot) {
+ if(prevProps.overlays !== this.props.overlays) {
+ if(prevProps.overlays) {
+ for(let overlay of prevProps.overlays) {
+ google.maps.event.clearInstanceListeners(overlay);
overlay.setMap(null);
}
}
- this.initOverlays(nextProps.overlays);
+ this.initOverlays(this.props.overlays);
}
}
diff --git a/src/components/growl/Growl.css b/src/components/growl/Growl.css
index 6a1283ee72..4702c4f90c 100644
--- a/src/components/growl/Growl.css
+++ b/src/components/growl/Growl.css
@@ -60,6 +60,7 @@
left: .5em;
top: .25em;
padding: 0;
+ font-size: 2em;
}
.ui-growl-message {
diff --git a/src/components/growl/Growl.d.ts b/src/components/growl/Growl.d.ts
index a690c9fa74..20c50679b5 100644
--- a/src/components/growl/Growl.d.ts
+++ b/src/components/growl/Growl.d.ts
@@ -2,8 +2,8 @@ import React = require("react");
export interface GrowlMessage {
severity: 'success' | 'info' | 'warn' | 'error',
- summary: React.ReactElement | string;
- detail: React.ReactElement | string;
+ summary: Element | string;
+ detail: Element | string;
closable: boolean;
sticky: boolean;
life: number;
diff --git a/src/components/growl/GrowlMessage.js b/src/components/growl/GrowlMessage.js
index 5ade8acd7c..6f49b21e3a 100644
--- a/src/components/growl/GrowlMessage.js
+++ b/src/components/growl/GrowlMessage.js
@@ -60,7 +60,7 @@ export class GrowlMessage extends Component {
renderCloseIcon() {
if(this.props.message.closable !== false) {
return (
-
+
);
}
else {
@@ -76,11 +76,11 @@ export class GrowlMessage extends Component {
'ui-growl-message-success': this.props.message.severity === 'success'
});
- let iconClassName = classNames('ui-growl-image fa fa-2x', {
- 'fa-info-circle': this.props.message.severity === 'info',
- 'fa-warning': this.props.message.severity === 'warn',
- 'fa-close': this.props.message.severity === 'error',
- 'fa-check': this.props.message.severity === 'success'
+ let iconClassName = classNames('ui-growl-image pi', {
+ 'pi-info-circle': this.props.message.severity === 'info',
+ 'pi-exclamation-triangle': this.props.message.severity === 'warn',
+ 'pi-times': this.props.message.severity === 'error',
+ 'pi-check': this.props.message.severity === 'success'
});
let closeIcon = this.renderCloseIcon();
diff --git a/src/components/inputmask/InputMask.js b/src/components/inputmask/InputMask.js
index e2641f9278..15e0fc4452 100644
--- a/src/components/inputmask/InputMask.js
+++ b/src/components/inputmask/InputMask.js
@@ -50,6 +50,17 @@ export class InputMask extends Component {
onChange: PropTypes.func
}
+ constructor(props) {
+ super(props);
+
+ this.onFocus = this.onFocus.bind(this);
+ this.onBlur = this.onBlur.bind(this);
+ this.onKeyDown = this.onKeyDown.bind(this);
+ this.onKeyPress = this.onKeyPress.bind(this);
+ this.onInput = this.onInput.bind(this);
+ this.handleInputChange = this.handleInputChange.bind(this);
+ }
+
caret(first, last) {
let range, begin, end;
@@ -305,6 +316,7 @@ export class InputMask extends Component {
}
checkVal(allow) {
+ this.isValueChecked = true;
//try to place characters where they belong
let test = this.input.value,
lastMatch = -1,
@@ -434,7 +446,32 @@ export class InputMask extends Component {
this.filled = this.input && this.input.value !== '';
}
- componentWillMount() {
+ updateValue() {
+ this.value = this.props.value;
+
+ if (this.input) {
+ if (this.value === undefined || this.value === null) {
+ this.input.value = '';
+ }
+ else {
+ this.input.value = this.value;
+ this.checkVal();
+ }
+
+ setTimeout(() => {
+ if(this.input) {
+ this.writeBuffer();
+ this.checkVal();
+ }
+ }, 10);
+
+ this.focusText = this.input.value;
+ }
+
+ this.updateFilledState();
+ }
+
+ init() {
this.tests = [];
this.partialPosition = this.props.mask.length;
this.len = this.props.mask.length;
@@ -483,35 +520,27 @@ export class InputMask extends Component {
}
componentDidMount() {
- var _this = this;
- this.value = this.props.value;
-
- if (this.input) {
- if (this.value === undefined || this.value === null) {
- this.input.value = '';
- }
- else {
- this.input.value = this.value;
- this.checkVal();
- }
-
- setTimeout(() => {
- _this.writeBuffer();
- _this.checkVal();
- }, 10);
+ this.init();
+ this.updateValue();
+ }
- this.focusText = this.input.value;
+ shouldComponentUpdate(nextProps, nextState) {
+ if(nextProps.value === this.props.value) {
+ return false;
}
-
- this.updateFilledState();
+ return true;
}
render() {
+ if(this.input && this.input.value !== this.props.value) {
+ this.updateValue();
+ }
+
return (
this.input = ReactDOM.findDOMNode(el)} type={this.props.type} name={this.props.name} style={this.props.style} className={this.props.className} placeholder={this.props.placeholder}
size={this.props.size} maxLength={this.props.maxlength} tabIndex={this.props.tabindex} disabled={this.props.disabled} readOnly={this.props.readonly}
- onFocus={this.onFocus.bind(this)} onBlur={this.onBlur.bind(this)} onKeyDown={this.onKeyDown.bind(this)} onKeyPress={this.onKeyPress.bind(this)}
- onInput={this.onInput.bind(this)} onPaste={this.handleInputChange.bind(this)} required={this.props.required}/>
+ onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown} onKeyPress={this.onKeyPress}
+ onInput={this.onInput} onPaste={this.handleInputChange} required={this.props.required}/>
);
}
diff --git a/src/components/inputtext/InputText.js b/src/components/inputtext/InputText.js
index c0a728c2b9..e9eb7e258e 100644
--- a/src/components/inputtext/InputText.js
+++ b/src/components/inputtext/InputText.js
@@ -8,13 +8,15 @@ export class InputText extends Component {
static defaultProps = {
onInput: null,
onKeyPress: null,
- keyfilter: null
+ keyfilter: null,
+ validateOnly: false,
};
static propTypes = {
onInput: PropTypes.func,
onKeyPress: PropTypes.func,
- keyfilter: PropTypes.any
+ keyfilter: PropTypes.any,
+ validateOnly: PropTypes.bool
};
constructor(props) {
@@ -29,13 +31,18 @@ export class InputText extends Component {
}
if (this.props.keyfilter) {
- KeyFilter.onKeyPress(event, this.props.keyfilter)
+ KeyFilter.onKeyPress(event, this.props.keyfilter, this.props.validateOnly)
}
}
onInput(e) {
+ let validatePattern = true;
+ if (this.props.keyfilter && this.props.validateOnly) {
+ validatePattern = KeyFilter.validate(e, this.props.keyfilter);
+ }
+
if(this.props.onInput) {
- this.props.onInput(e);
+ this.props.onInput(e, validatePattern);
}
this.updateFilledState(e.target.value);
@@ -54,9 +61,9 @@ export class InputText extends Component {
this.updateFilledState(_value);
}
- componentWillUpdate(nextProps){
- if (nextProps.value !== this.props.value) {
- this.updateFilledState(nextProps.value);
+ componentDidUpdate(prevProps, prevState, snapshot){
+ if (prevProps.value !== this.props.value) {
+ this.updateFilledState(this.props.value);
}
}
@@ -69,6 +76,7 @@ export class InputText extends Component {
delete inputProps.onInput;
delete inputProps.onKeyPress;
delete inputProps.keyfilter;
+ delete inputProps.validateOnly;
return this.inputEl = el} {...inputProps} className={className} onInput={this.onInput} onKeyPress={this.onKeyPress}/>;
}
diff --git a/src/components/inputtextarea/InputTextarea.js b/src/components/inputtextarea/InputTextarea.js
index 2d36a05623..71b718b6fd 100644
--- a/src/components/inputtextarea/InputTextarea.js
+++ b/src/components/inputtextarea/InputTextarea.js
@@ -6,12 +6,16 @@ export class InputTextarea extends Component {
static defaultProps = {
autoResize: false,
- onInput: null
+ onInput: null,
+ cols: 20,
+ rows: 2
};
static propTypes = {
autoResize: PropTypes.bool,
- onInput: PropTypes.func
+ onInput: PropTypes.func,
+ cols: PropTypes.number,
+ rows: PropTypes.number
};
constructor(props) {
@@ -83,8 +87,6 @@ export class InputTextarea extends Component {
this.textareaElement.rows = (linesCount >= parseInt(this.props.rows, 10)) ? (linesCount + 1) : parseInt(this.props.rows, 10);
}
-
-
updateFilledState(e) {
let _filled = (e.target.value && e.target.value.length) ? true : false;
this.setState({filled: _filled});
@@ -95,15 +97,13 @@ export class InputTextarea extends Component {
_filled = (_value && _value.length) ? true : false;
this.setState({filled: _filled});
- }
+ }
- componentWillReceiveProps(nextProps) {
- if(nextProps.hasOwnProperty('value')) {
- this.textareaProps.value = nextProps.value;
+ render() {
+ if(this.props.hasOwnProperty('value')) {
+ this.textareaProps.value = this.props.value;
}
- }
- render() {
var className = classNames('ui-inputtext ui-inputtextarea ui-corner-all ui-state-default ui-widget', this.props.className, {
'ui-state-disabled': this.props.disabled,
'ui-state-filled': this.state.filled,
diff --git a/src/components/keyfilter/KeyFilter.js b/src/components/keyfilter/KeyFilter.js
index c51ae19d56..5a6b1a653f 100644
--- a/src/components/keyfilter/KeyFilter.js
+++ b/src/components/keyfilter/KeyFilter.js
@@ -59,7 +59,11 @@ export default class KeyFilter {
return e.charCode || e.keyCode || e.which;
}
- static onKeyPress(e,keyfilter) {
+ static onKeyPress(e,keyfilter, validateOnly) {
+ if(validateOnly) {
+ return;
+ }
+
this.regex = KeyFilter.DEFAULT_MASKS[keyfilter]? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
let browser = DomHandler.getBrowser();
@@ -86,4 +90,15 @@ export default class KeyFilter {
e.preventDefault();
}
}
+
+ static validate(e, keyfilter) {
+ let value = e.target.value,
+ validatePattern = true;
+
+ if (value && !keyfilter.test(value)) {
+ validatePattern = false;
+ }
+
+ return validatePattern;
+ }
}
\ No newline at end of file
diff --git a/src/components/lightbox/Lightbox.js b/src/components/lightbox/Lightbox.js
index b57aaf946c..3e6c23c97f 100644
--- a/src/components/lightbox/Lightbox.js
+++ b/src/components/lightbox/Lightbox.js
@@ -188,7 +188,7 @@ export class Lightbox extends Component {
zIndex:this.zindex }} ref={el=>this.panel=el } onClick={()=>this.preventDocumentClickListener = true}>
diff --git a/src/components/listbox/ListBox.css b/src/components/listbox/ListBox.css
index c5d73bb250..0fce4faab8 100644
--- a/src/components/listbox/ListBox.css
+++ b/src/components/listbox/ListBox.css
@@ -56,7 +56,7 @@
width: calc(100% - 2em);
}
-.ui-listbox-header .ui-listbox-filter-container .fa {
+.ui-listbox-header .ui-listbox-filter-container .ui-listbox-filter-icon {
position: absolute;
top: .25em;
left: .25em;
diff --git a/src/components/listbox/ListBox.d.ts b/src/components/listbox/ListBox.d.ts
index 46e18e9c86..5208f8c8ed 100644
--- a/src/components/listbox/ListBox.d.ts
+++ b/src/components/listbox/ListBox.d.ts
@@ -4,6 +4,7 @@ interface ListBoxProps {
id?: string,
value?: any,
options?: Array
diff --git a/src/components/messages/Messages.css b/src/components/messages/Messages.css
index f6cd1fa1b3..b1d6c646a2 100644
--- a/src/components/messages/Messages.css
+++ b/src/components/messages/Messages.css
@@ -11,6 +11,7 @@
display:inline-block;
padding: 0;
vertical-align: middle;
+ font-size: 2em;
}
.ui-messages-summary {
@@ -65,6 +66,15 @@
top: 5px;
right: 5px;
}
+/*Message*/
+.ui-message .ui-message-icon {
+ font-size: 1.5em;
+ vertical-align: middle;
+}
+
+.ui-message .ui-message-text {
+ vertical-align: middle;
+}
/* Animations */
.ui-messages-enter {
diff --git a/src/components/messages/Messages.d.ts b/src/components/messages/Messages.d.ts
index d7a758104e..66394f0f6e 100644
--- a/src/components/messages/Messages.d.ts
+++ b/src/components/messages/Messages.d.ts
@@ -2,9 +2,10 @@ import React = require("react");
interface MessagesProps {
id?: string;
- closable?: boolean,
className?: string;
style?: object;
+ onRemove?(message:any): void;
+ onClick?(message:any): void;
}
export class Messages extends React.Component {}
\ No newline at end of file
diff --git a/src/components/messages/Messages.js b/src/components/messages/Messages.js
index 7d18c3c521..dccba7cd1d 100644
--- a/src/components/messages/Messages.js
+++ b/src/components/messages/Messages.js
@@ -10,13 +10,17 @@ export class Messages extends Component {
static defaultProps = {
id: null,
className: null,
- style: null
+ style: null,
+ onRemove: null,
+ onClick: null
}
static propTypes = {
id: PropTypes.string,
className: PropTypes.string,
- style: PropTypes.object
+ style: PropTypes.object,
+ onRemove: PropTypes.func,
+ onClick: PropTypes.func
};
constructor(props) {
diff --git a/src/components/messages/UIMessage.js b/src/components/messages/UIMessage.js
index c6483503db..c866b15248 100644
--- a/src/components/messages/UIMessage.js
+++ b/src/components/messages/UIMessage.js
@@ -42,6 +42,7 @@ export class UIMessage extends Component {
if (event) {
event.preventDefault();
+ event.stopPropagation();
}
}
@@ -55,7 +56,7 @@ export class UIMessage extends Component {
if (this.props.message.closable !== false) {
return (
-
+
);
}
@@ -82,17 +83,17 @@ export class UIMessage extends Component {
render() {
let className = 'ui-messages ui-widget ui-corner-all ui-messages-' + this.props.message.severity;
- let icon = classNames('ui-messages-icon fa fa-fw fa-2x', {
- 'fa-info-circle': this.props.message.severity === 'info',
- 'fa-warning': this.props.message.severity === 'warn',
- 'fa-close': this.props.message.severity === 'error',
- 'fa-check': this.props.message.severity === 'success',
+ let icon = classNames('ui-messages-icon pi ', {
+ 'pi-info-circle': this.props.message.severity === 'info',
+ 'pi-exclamation-triangle': this.props.message.severity === 'warn',
+ 'pi-times': this.props.message.severity === 'error',
+ 'pi-check': this.props.message.severity === 'success',
});
let closeIcon = this.renderCloseIcon();
let messages = this.renderMessages();
return (
- )}
-
- {this.props.parentMenu==='Menubar' && -
- {this.props.children}
-
}
)
}
diff --git a/src/components/orderlist/OrderList.css b/src/components/orderlist/OrderList.css
index b1c37ae847..0c542c9a8b 100644
--- a/src/components/orderlist/OrderList.css
+++ b/src/components/orderlist/OrderList.css
@@ -54,7 +54,7 @@
width: 100%;
}
-.ui-orderlist .ui-orderlist-filter-container .fa {
+.ui-orderlist .ui-orderlist-filter-container .ui-orderlist-filter-icon {
position: absolute;
top: 50%;
left: 1em;
@@ -107,9 +107,9 @@
}
.ui-orderlist.ui-orderlist-responsive .ui-orderlist-controls .ui-button {
- display: inline;
- width: 20%;
display: inline-block;
+ width: 20%;
+ margin-right: .25em;
}
.ui-orderlist.ui-orderlist-responsive .ui-orderlist-list-container {
diff --git a/src/components/orderlist/OrderListControls.js b/src/components/orderlist/OrderListControls.js
index 11cfb437bc..7728766d7f 100644
--- a/src/components/orderlist/OrderListControls.js
+++ b/src/components/orderlist/OrderListControls.js
@@ -140,10 +140,10 @@ export class OrderListControls extends Component {
render() {
return (
-
+
+ value
+ number
+ 0
+ Value of the component.
+
+
animate
boolean
false
diff --git a/src/showcase/splitbutton/SplitButtonDemo.js b/src/showcase/splitbutton/SplitButtonDemo.js
index 286cafe38a..9f9960b06e 100644
--- a/src/showcase/splitbutton/SplitButtonDemo.js
+++ b/src/showcase/splitbutton/SplitButtonDemo.js
@@ -12,14 +12,14 @@ export class SplitButtonDemo extends Component {
this.save = this.save.bind(this);
this.items = [
- {label: 'Update', icon: 'fa-refresh', command: (e) => {
+ {label: 'Update', icon: 'fa fa-refresh', command: (e) => {
this.growl.show({severity:'success', summary:'Updated', detail:'Data Updated'});
}},
- {label: 'Delete', icon: 'fa-close', command: (e) => {
+ {label: 'Delete', icon: 'fa fa-close', command: (e) => {
this.growl.show({ severity: 'success', summary: 'Delete', detail: 'Data Deleted' });
}},
- {label: 'React Website', icon: 'fa-link', url: 'https://facebook.github.io/react/'},
- {label: 'Upload', icon: 'fa-paint-brush', command:(e) => {
+ {label: 'React Website', icon: 'fa fa-link', url: 'https://facebook.github.io/react/'},
+ {label: 'Upload', icon: 'fa fa-paint-brush', command:(e) => {
window.location.hash="/fileupload"
}}
];
@@ -43,14 +43,14 @@ export class SplitButtonDemo extends Component {
{ this.growl = el; }}>
{`
-
@@ -262,14 +262,14 @@ export class SplitButtonDemo extends Component {
this.save = this.save.bind(this);
this.items = [
- {label: 'Update', icon: 'fa-refresh', command: (e) => {
+ {label: 'Update', icon: 'fa fa-refresh', command: (e) => {
this.growl.show({severity:'success', summary:'Updated', detail:'Data Updated'});
}},
- {label: 'Delete', icon: 'fa-close', command: (e) => {
+ {label: 'Delete', icon: 'fa fa-close', command: (e) => {
this.growl.show({ severity: 'success', summary: 'Delete', detail: 'Data Deleted' });
}},
- {label: 'React Website', icon: 'fa-link', url: 'https://facebook.github.io/react/'},
- {label: 'Upload', icon: 'fa-paint-brush', command:(e) => {
+ {label: 'React Website', icon: 'fa fa-link', url: 'https://facebook.github.io/react/'},
+ {label: 'Upload', icon: 'fa fa-paint-brush', command:(e) => {
window.location.hash="/fileupload"
}}
];
@@ -293,14 +293,14 @@ export class SplitButtonDemo extends Component {
{ this.growl = el; }}>
+
+ sortable
+ any
+ false
+ Defines if a column is sortable.
+
+
+ sortFunction
+ function
+ null
+ Sort function for custom sorting.
+
- { this.container = el; }} className={className}>
+
);
diff --git a/src/components/multiselect/MultiSelectItem.js b/src/components/multiselect/MultiSelectItem.js
index 5e779e5ed5..b188bec211 100644
--- a/src/components/multiselect/MultiSelectItem.js
+++ b/src/components/multiselect/MultiSelectItem.js
@@ -39,7 +39,7 @@ export class MultiSelectItem extends Component {
render() {
let className = classNames('ui-multiselect-item ui-corner-all', {'ui-state-highlight': this.props.selected});
let checkboxClassName = classNames('ui-chkbox-box ui-widget ui-corner-all ui-state-default', {'ui-state-active': this.props.selected});
- let checkboxIcon = classNames('ui-chkbox-icon ui-c', {'fa fa-check': this.props.selected});
+ let checkboxIcon = classNames('ui-chkbox-icon ui-c', {'pi pi-check': this.props.selected});
let content = this.props.template ? this.props.template(this.props.option) : this.props.label;
return (
diff --git a/src/components/nestedmenu/NestedMenu.js b/src/components/nestedmenu/NestedMenu.js
index c634bbd9cc..1a611cafd2 100644
--- a/src/components/nestedmenu/NestedMenu.js
+++ b/src/components/nestedmenu/NestedMenu.js
@@ -31,10 +31,6 @@ export class NestedMenu extends Component{
{this.props.items && this.props.items.map((item,index)=>
{ this.container = el; }} className={className} onClick={this.onClick}>
this.panel = el} header={header} appendTo={this.props.appendTo} onClick={this.onPanelClick}
scrollHeight={this.props.scrollHeight}>
diff --git a/src/components/multiselect/MultiSelectHeader.js b/src/components/multiselect/MultiSelectHeader.js
index 63b7419d72..bc5220d887 100644
--- a/src/components/multiselect/MultiSelectHeader.js
+++ b/src/components/multiselect/MultiSelectHeader.js
@@ -50,13 +50,13 @@ export class MultiSelectHeader extends Component {
render() {
let filterElement;
let checkboxClassName = classNames('ui-chkbox-box ui-widget ui-corner-all ui-state-default', {'ui-state-active': this.props.allChecked});
- let checkboxIcon = classNames('ui-chkbox-icon ui-clickable', {'fa fa-check': this.props.allChecked});
+ let checkboxIcon = classNames('ui-chkbox-icon ui-clickable', {'pi pi-check': this.props.allChecked});
if(this.props.filter) {
filterElement =
{filterElement}
-
+
{closeIcon}
diff --git a/src/components/multiselect/MultiSelect.css b/src/components/multiselect/MultiSelect.css
index 692d354ed0..a0f6b43ac1 100644
--- a/src/components/multiselect/MultiSelect.css
+++ b/src/components/multiselect/MultiSelect.css
@@ -19,9 +19,12 @@
padding: 0 .25em;
}
-.ui-multiselect .ui-multiselect-trigger .fa {
- margin-top: .4em;
- margin-left: -.125em;
+.ui-multiselect .ui-multiselect-trigger .ui-multiselect-trigger-icon {
+ top: 50%;
+ left: 50%;
+ margin-top: -.5em;
+ margin-left: -.5em;
+ position: absolute;
}
.ui-multiselect .ui-multiselect-label-container {
@@ -105,7 +108,7 @@
width: 65%;
}
-.ui-multiselect-header .ui-multiselect-filter-container .fa {
+.ui-multiselect-header .ui-multiselect-filter-container .ui-multiselect-filter-icon {
position: absolute;
top: .25em;
left: .125em;
diff --git a/src/components/multiselect/MultiSelect.js b/src/components/multiselect/MultiSelect.js
index 8ea30f6ea6..b1b40467cf 100644
--- a/src/components/multiselect/MultiSelect.js
+++ b/src/components/multiselect/MultiSelect.js
@@ -323,7 +323,7 @@ export class MultiSelect extends Component {
-
+
-
-
-
-
+
+
+
+
);
}
diff --git a/src/components/organizationchart/OrganizationChart.js b/src/components/organizationchart/OrganizationChart.js
index 32824c507e..a78f2f70a6 100644
--- a/src/components/organizationchart/OrganizationChart.js
+++ b/src/components/organizationchart/OrganizationChart.js
@@ -55,13 +55,15 @@ export class OrganizationChartNode extends Component {
}
render() {
+ this.node = this.props.node;
+
var colspan = this.getColspan();
let nodeStyleClass = classNames('ui-organizationchart-node-content ui-widget-content ui-corner-all', this.node.className, {
'ui-organizationchart-selectable-node': this.props.selectionMode && this.node.selectable !== false,
'ui-state-highlight': this.isSelected()
}),
nodeLabel = (this.props.nodeTemplate && this.props.nodeTemplate(this.node)) ? {this.props.nodeTemplate(this.node)}
: {this.node.label}
,
- toggleIcon = classNames('fa ui-node-toggler-icon', {'fa-chevron-down': this.state.expanded, 'fa-chevron-up': !this.state.expanded}),
+ toggleIcon = classNames('ui-node-toggler-icon', {'pi pi-chevron-down': this.state.expanded, 'pi pi-chevron-up': !this.state.expanded}),
nodeContent = ( this.onNodeClick(e,this.node)}>
@@ -227,6 +229,8 @@ export class OrganizationChart extends Component {
}
render() {
+ this.root = this.props.value && this.props.value.length ? this.props.value[0] : null;
+
var className = classNames('ui-organizationchart ui-widget', this.props.className);
return (
diff --git a/src/components/overlaypanel/OverlayPanel.js b/src/components/overlaypanel/OverlayPanel.js
index 5671f05e2c..94011ad92f 100644
--- a/src/components/overlaypanel/OverlayPanel.js
+++ b/src/components/overlaypanel/OverlayPanel.js
@@ -118,7 +118,7 @@ export class OverlayPanel extends Component {
if(this.props.showCloseIcon) {
return (
-
+
);
}
diff --git a/src/components/paginator/FirstPageLink.js b/src/components/paginator/FirstPageLink.js
index 0d1624a613..efbb9e857e 100644
--- a/src/components/paginator/FirstPageLink.js
+++ b/src/components/paginator/FirstPageLink.js
@@ -19,7 +19,7 @@ export class FirstPageLink extends Component {
return (
-
+
);
}
diff --git a/src/components/paginator/LastPageLink.js b/src/components/paginator/LastPageLink.js
index aa3790d75a..8d43da87db 100644
--- a/src/components/paginator/LastPageLink.js
+++ b/src/components/paginator/LastPageLink.js
@@ -19,7 +19,7 @@ export class LastPageLink extends Component {
return (
-
+
);
}
diff --git a/src/components/paginator/NextPageLink.js b/src/components/paginator/NextPageLink.js
index 05eca485a4..cbaa993e3c 100644
--- a/src/components/paginator/NextPageLink.js
+++ b/src/components/paginator/NextPageLink.js
@@ -19,7 +19,7 @@ export class NextPageLink extends Component {
return (
-
+
);
}
diff --git a/src/components/paginator/Paginator.css b/src/components/paginator/Paginator.css
index 0e5c566d10..77e117e4c6 100644
--- a/src/components/paginator/Paginator.css
+++ b/src/components/paginator/Paginator.css
@@ -27,13 +27,33 @@
.ui-paginator .ui-paginator-first,
.ui-paginator .ui-paginator-prev,
.ui-paginator .ui-paginator-current {
- display: inline-block;
- padding: .125em .375em;
+ display: inline-block;
+ width: 1.5em;
+ height: 1.5em;
+ line-height: 1.5em;
zoom: 1;
margin-left: .063em;
margin-right: .063em;
text-decoration: none;
vertical-align: middle;
+ text-align: center;
+ position: relative;
+}
+
+.ui-paginator .ui-paginator-pages {
+ width: auto;
+ line-height: 1;
+}
+
+.ui-paginator .ui-paginator-icon {
+ display: block;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ width: 1em;
+ height: 1em;
+ margin-top: -.5em;
+ margin-left: -.5em;
}
.ui-paginator .ui-paginator-page,
@@ -67,4 +87,9 @@
.ui-paginator .ui-dropdown {
min-width: 4em;
margin-left: .375em;
+}
+
+.ui-paginator .ui-paginator-current {
+ width: auto;
+ height: auto;
}
\ No newline at end of file
diff --git a/src/components/paginator/PrevPageLink.js b/src/components/paginator/PrevPageLink.js
index 24801dd66a..c712c27495 100644
--- a/src/components/paginator/PrevPageLink.js
+++ b/src/components/paginator/PrevPageLink.js
@@ -19,7 +19,7 @@ export class PrevPageLink extends Component {
return (
-
+
);
}
diff --git a/src/components/panel/Panel.js b/src/components/panel/Panel.js
index 90beb53874..ef001ddadc 100644
--- a/src/components/panel/Panel.js
+++ b/src/components/panel/Panel.js
@@ -1,7 +1,7 @@
-import React, {Component} from 'react';
+import classNames from 'classnames';
import PropTypes from 'prop-types';
+import React, { Component } from 'react';
import DomHandler from '../utils/DomHandler';
-import classNames from 'classnames';
import UniqueComponentId from '../utils/UniqueComponentId';
export class Panel extends Component {
@@ -34,9 +34,7 @@ export class Panel extends Component {
collapsed: this.props.collapsed
};
this.toggle = this.toggle.bind(this);
- }
- componentWillMount() {
this.id = this.props.id || UniqueComponentId();
}
@@ -50,13 +48,15 @@ export class Panel extends Component {
}, 500);
}
}
-
- componentWillReceiveProps(nextProps) {
- if(nextProps.collapsed != null && nextProps.collapsed !== this.state.collapsed) {
- this.setState({
+
+ static getDerivedStateFromProps(nextProps, prevState) {
+ if(nextProps.collapsed != null && nextProps.collapsed !== prevState.collapsed) {
+ return {
collapsed: nextProps.collapsed
- });
+ };
}
+
+ return null;
}
toggle(e) {
@@ -93,7 +93,7 @@ export class Panel extends Component {
return (
-
+
);
}
diff --git a/src/components/panelmenu/PanelMenu.js b/src/components/panelmenu/PanelMenu.js
index f7a4e5b30f..dcf501c645 100644
--- a/src/components/panelmenu/PanelMenu.js
+++ b/src/components/panelmenu/PanelMenu.js
@@ -87,11 +87,11 @@ export class PanelMenuItem extends Component {
'ui-menuitem-link-hasicon': this.child.icon&&this.child.items,
'ui-state-disabled': this.child.disabled
}),
- panelMenuIconClass = classNames('ui-panelmenu-icon fa fa-fw', {
- 'fa-caret-right': !this.state.expanded,
- 'fa-caret-down': this.state.expanded
+ panelMenuIconClass = classNames('ui-panelmenu-icon pi pi-fw', {
+ 'pi-caret-right': !this.state.expanded,
+ 'pi-caret-down': this.state.expanded
}),
- menuitemIconClass = classNames('ui-menuitem-icon fa fa-fw', this.child.icon);
+ menuitemIconClass = classNames('ui-menuitem-icon ', this.child.icon);
let panelMenuIcon = this.child.items && (),
menuitemIcon = this.child.icon && (),
@@ -159,11 +159,11 @@ export class PanelMenuHeaderItems extends Component {
'ui-state-disabled': this.item.disabled
}),
headerLinkClass = classNames({'ui-panelmenu-headerlink-hasicon': this.item.icon}),
- panelMenuIconClass = classNames('ui-panelmenu-icon fa', {
- 'fa-caret-right': !this.state.expanded,
- 'fa-caret-down': this.state.expanded
+ panelMenuIconClass = classNames('ui-panelmenu-icon pi', {
+ 'pi-caret-right': !this.state.expanded,
+ 'pi-caret-down': this.state.expanded
}),
- menuitemIconClass = classNames('ui-menuitem-icon fa', this.item.icon);
+ menuitemIconClass = classNames('ui-menuitem-icon ', this.item.icon);
let panelMenuIcon = this.item.items && ,
menuitemIcon = this.item.icon && ,
diff --git a/src/components/picklist/PickList.css b/src/components/picklist/PickList.css
index 87a99845fe..ccc5d38826 100644
--- a/src/components/picklist/PickList.css
+++ b/src/components/picklist/PickList.css
@@ -59,7 +59,7 @@
width: 100%;
}
-.ui-picklist .ui-picklist-filter-container .fa {
+.ui-picklist .ui-picklist-filter-container .ui-picklist-filter-icon {
position: absolute;
top: 50%;
left: 1em;
@@ -171,9 +171,10 @@
}
.ui-picklist.ui-picklist-responsive .ui-picklist-buttons button {
- display: inline;
+ display: inline-block;
width: 20%;
margin-bottom: 0;
+ margin-right: .25em;
}
.ui-picklist.ui-picklist-responsive .ui-picklist-source-controls.ui-picklist-buttons {
@@ -183,20 +184,4 @@
.ui-picklist.ui-picklist-responsive .ui-picklist-target-controls.ui-picklist-buttons {
padding-top: .4em;
}
-
- .ui-picklist.ui-picklist-responsive .ui-picklist-buttons .fa-angle-right:before {
- content: "\f107";
- }
-
- .ui-picklist.ui-picklist-responsive .ui-picklist-buttons .fa-angle-double-right:before {
- content: "\f103";
- }
-
- .ui-picklist.ui-picklist-responsive .ui-picklist-buttons .fa-angle-left:before {
- content: "\f106";
- }
-
- .ui-picklist.ui-picklist-responsive .ui-picklist-buttons .fa-angle-double-left:before {
- content: "\f102";
- }
}
diff --git a/src/components/picklist/PickList.d.ts b/src/components/picklist/PickList.d.ts
index 9724538d22..6a15384af0 100644
--- a/src/components/picklist/PickList.d.ts
+++ b/src/components/picklist/PickList.d.ts
@@ -13,6 +13,7 @@ interface PickListProps {
responsive?: boolean;
showSourceControls?: boolean;
showTargetControls?: boolean;
+ metaKeySelection?: boolean;
itemTemplate?(item: any): void;
onChange?(e: {event: Event, source: any, target: any}): void;
onMoveToSource?(e: {originalEvent: Event, value: any}): void;
diff --git a/src/components/picklist/PickList.js b/src/components/picklist/PickList.js
index 328f22e03f..f3cfeca837 100644
--- a/src/components/picklist/PickList.js
+++ b/src/components/picklist/PickList.js
@@ -22,6 +22,7 @@ export class PickList extends Component {
responsive: false,
showSourceControls: true,
showTargetControls: true,
+ metaKeySelection: true,
itemTemplate: null,
onChange: null,
onMoveToSource: null,
@@ -43,6 +44,7 @@ export class PickList extends Component {
responsive: PropTypes.bool,
showSourceControls: PropTypes.bool,
showTargetControls: PropTypes.bool,
+ metaKeySelection: PropTypes.bool,
itemTemplate: PropTypes.func,
onChange: PropTypes.func,
onMoveToSource: PropTypes.func,
@@ -189,13 +191,13 @@ export class PickList extends Component {
onReorder={this.onSourceReorder} className="ui-picklist-source-controls" />}
this.sourceListElement = ReactDOM.findDOMNode(el)} list={this.props.source} selection={this.state.selectedItemsSource} onSelectionChange={(e) => this.setState({selectedItemsSource: e.value})} itemTemplate={this.props.itemTemplate}
- header={this.props.sourceHeader} style={this.props.sourceStyle} className="ui-picklist-source-wrapper" listClassName="ui-picklist-source" />
+ header={this.props.sourceHeader} style={this.props.sourceStyle} className="ui-picklist-source-wrapper" listClassName="ui-picklist-source" metaKeySelection={this.props.metaKeySelection} />
this.targetListElement = ReactDOM.findDOMNode(el)} list={this.props.target} selection={this.state.selectedItemsTarget} onSelectionChange={(e) => this.setState({selectedItemsTarget: e.value})} itemTemplate={this.props.itemTemplate}
- header={this.props.targetHeader} style={this.props.targetStyle} className="ui-picklist-target-wrapper" listClassName="ui-picklist-targe"/>
+ header={this.props.targetHeader} style={this.props.targetStyle} className="ui-picklist-target-wrapper" listClassName="ui-picklist-targe" metaKeySelection={this.props.metaKeySelection}/>
{this.props.showTargetControls &&
diff --git a/src/components/slider/Slider.d.ts b/src/components/slider/Slider.d.ts
index 3f96338a32..7d80e6b41c 100644
--- a/src/components/slider/Slider.d.ts
+++ b/src/components/slider/Slider.d.ts
@@ -2,6 +2,7 @@ import React = require("react");
interface SliderProps {
id?: string;
+ value?: number;
animate?: boolean;
min?: number;
max?: number;
diff --git a/src/components/slider/Slider.js b/src/components/slider/Slider.js
index 73c4de7951..74237e538d 100644
--- a/src/components/slider/Slider.js
+++ b/src/components/slider/Slider.js
@@ -7,6 +7,7 @@ export class Slider extends Component {
static defaultProps = {
id: null,
+ value: null,
animate: false,
min: 0,
max: 100,
@@ -19,6 +20,7 @@ export class Slider extends Component {
static propsTypes = {
id: PropTypes.string,
+ value: PropTypes.number,
animate: PropTypes.bool,
min: PropTypes.number,
max: PropTypes.number,
@@ -31,13 +33,24 @@ export class Slider extends Component {
constructor(props) {
super(props);
- this.state = {};
this.onMouseDown = this.onMouseDown.bind(this);
this.onBarClick = this.onBarClick.bind(this);
this.endDrag = this.endDrag.bind(this);
this.onTouchStart = this.onTouchStart.bind(this);
this.onTouchMove = this.onTouchMove.bind(this);
this.handleValues = [];
+ this.isFloatValue = this.isFloat(this.props.value) || this.isFloat(this.props.step);
+
+ if (this.props.range)
+ this.values = this.props.value || [0, 0];
+ else
+ this.value = this.props.value || 0;
+
+ this.updateHandleValue();
+ }
+
+ isFloat(val) {
+ return val != null && Number(val) === val && val % 1 !== 0;
}
onMouseDown(event, index) {
@@ -75,7 +88,7 @@ export class Slider extends Component {
if (this.props.range) {
if (this.props.step) {
- this.handleStepChange(newValue, this.values[this.handleIndex]);
+ this.handleStepChange(newValue, this.values[this.handleIndex], event);
}
else {
this.handleValues[this.handleIndex] = handleValue;
@@ -84,7 +97,7 @@ export class Slider extends Component {
}
else {
if (this.props.step) {
- this.handleStepChange(newValue, this.value);
+ this.handleStepChange(newValue, this.value, event);
}
else {
this.handleValue = handleValue;
@@ -93,18 +106,25 @@ export class Slider extends Component {
}
}
- handleStepChange(newValue, oldValue) {
- let diff = (newValue - oldValue);
+ handleStepChange(newValue, oldValue, event) {
+ let diff = (newValue - oldValue),
+ originalEvent = event.originalEvent;
if (diff < 0 && (-1 * diff) >= this.props.step / 2) {
newValue = oldValue - this.props.step;
- this.updateValue(newValue);
- this.updateHandleValue();
+ this.updateValue(newValue, event);
+
+ if(originalEvent && !originalEvent.defaultPrevented) {
+ this.updateHandleValue();
+ }
}
else if (diff > 0 && diff >= this.props.step / 2) {
newValue = oldValue + this.props.step;
- this.updateValue(newValue);
- this.updateHandleValue();
+ this.updateValue(newValue, event);
+
+ if(originalEvent && !originalEvent.defaultPrevented) {
+ this.updateHandleValue();
+ }
}
}
@@ -127,7 +147,6 @@ export class Slider extends Component {
if (this.props.range) {
this.handleValues[0] = (this.values[0] < this.props.min ? 0 : this.values[0] - this.props.min) * 100 / (this.props.max - this.props.min);
this.handleValues[1] = (this.values[1] > this.props.max ? 100 : this.values[1] - this.props.min) * 100 / (this.props.max - this.props.min);
- this.setState({ handleValues: this.handleValues });
}
else {
if (this.value < this.props.min)
@@ -136,8 +155,6 @@ export class Slider extends Component {
this.handleValue = 100;
else
this.handleValue = (this.value - this.props.min) * 100 / (this.props.max - this.props.min);
-
- this.setState({ handleValue: this.handleValue });
}
}
@@ -166,7 +183,12 @@ export class Slider extends Component {
}
}
- this.values[this.handleIndex] = Math.floor(value);
+ if(this.isFloatValue) {
+ this.values[this.handleIndex] = value;
+ }
+ else {
+ this.values[this.handleIndex] = Math.floor(value);
+ }
if (this.props.onChange) {
this.props.onChange({
@@ -185,7 +207,12 @@ export class Slider extends Component {
this.handleValue = 100;
}
- this.value = Math.floor(val);
+ if(this.isFloatValue) {
+ this.value = val;
+ }
+ else {
+ this.value = Math.floor(val);
+ }
if (this.props.onChange) {
this.props.onChange({
@@ -249,15 +276,6 @@ export class Slider extends Component {
event.preventDefault();
}
- componentWillMount() {
- if (this.props.range)
- this.values = this.props.value || [0, 0];
- else
- this.value = this.props.value || 0;
-
- this.updateHandleValue();
- }
-
componentDidMount() {
this.documentDragListener = this.onDrag.bind(this);
document.addEventListener('mousemove', this.documentDragListener);
@@ -266,7 +284,7 @@ export class Slider extends Component {
document.addEventListener('mouseup', this.documentEndDragListener);
}
- componentWillReceiveProps(nextProps) {
+ shouldComponentUpdate(nextProps, nextState) {
var newValue = nextProps.value;
if (newValue) {
if (this.props.range) {
@@ -277,6 +295,8 @@ export class Slider extends Component {
}
}
this.updateHandleValue();
+
+ return true;
}
componentWillUnmount() {
@@ -296,7 +316,7 @@ export class Slider extends Component {
'ui-slider-animate': this.props.animate
});
- var verticalRange = this.props.orientation === 'vertical' && ;
+ var verticalRange = this.props.orientation === 'vertical' && ;
if (this.props.range) {
var leftHandleClass = classNames('ui-slider-handle ui-state-default ui-corner-all', {
'ui-slider-handle-active': (this.props.handleIndex === 0)
@@ -305,13 +325,13 @@ export class Slider extends Component {
'ui-slider-handle-active': (this.props.handleIndex === 1)
});
- var middleRange =
- var leftHandle = this.onMouseDown(e, 0)} onTouchStart={(e) => this.onTouchStart(e, 0)} onTouchMove={(e) => this.onTouchMove(e, 0)} className={leftHandleClass} style={{ 'left': this.state.handleValues[0] + '%' }}>
- var rightHandle = this.onMouseDown(e, 1)} onTouchStart={(e) => this.onTouchStart(e, 1)} onTouchMove={(e) => this.onTouchMove(e, 1)} className={rightHandleClass} style={{ 'left': this.state.handleValues[1] + '%' }}>
+ var middleRange =
+ var leftHandle = this.onMouseDown(e, 0)} onTouchStart={(e) => this.onTouchStart(e, 0)} onTouchMove={(e) => this.onTouchMove(e, 0)} className={leftHandleClass} style={{ 'left': this.handleValues[0] + '%' }}>
+ var rightHandle = this.onMouseDown(e, 1)} onTouchStart={(e) => this.onTouchStart(e, 1)} onTouchMove={(e) => this.onTouchMove(e, 1)} className={rightHandleClass} style={{ 'left': this.handleValues[1] + '%' }}>
}
else {
var handle =
+ style={{ 'left': this.props.orientation === 'horizontal' ? this.handleValue + '%' : null, 'bottom': this.props.orientation === 'vertical' ? this.handleValue + '%' : null }}>
}
return (
diff --git a/src/components/spinner/Spinner.css b/src/components/spinner/Spinner.css
index add8a043d7..64405a65b8 100644
--- a/src/components/spinner/Spinner.css
+++ b/src/components/spinner/Spinner.css
@@ -22,7 +22,7 @@
vertical-align: middle;
width: 1.5em;
}
-.ui-spinner .fa {
+.ui-spinner .ui-spinner-button-icon {
position: absolute;
top: 50%;
left: 50%;
@@ -48,6 +48,6 @@
.ui-fluid .ui-spinner .ui-spinner-button {
width: 1.5em;
}
-.ui-fluid .ui-spinner .ui-spinner-button .fa {
+.ui-fluid .ui-spinner .ui-spinner-button .ui-spinner-button-icon {
left: .375em;
}
\ No newline at end of file
diff --git a/src/components/spinner/Spinner.js b/src/components/spinner/Spinner.js
index 0da7b09ced..ccfb0c0169 100644
--- a/src/components/spinner/Spinner.js
+++ b/src/components/spinner/Spinner.js
@@ -45,6 +45,14 @@ export class Spinner extends Component {
this.precision = this.props.step.toString().split(/[,]|[.]/)[1].length;
}
+ let val = this.props.value;
+ if(val !== undefined && val != null) {
+ this.value = this.updateValue(val);
+ }
+
+ this.formatValue();
+ this.updateFilledState();
+
this.onInputKeyUp = this.onInputKeyUp.bind(this);
this.onInputKeyDown = this.onInputKeyDown.bind(this);
this.onInputKeyPress = this.onInputKeyPress.bind(this);
@@ -311,16 +319,6 @@ export class Spinner extends Component {
this.filled = (this.value !== undefined && this.value != null);
}
- componentWillMount() {
- let val = this.props.value;
- if(val !== undefined && val != null) {
- this.value = this.updateValue(val);
- }
-
- this.formatValue();
- this.updateFilledState();
- }
-
componentDidMount() {
this.inputEl.value = this.valueAsString;
}
@@ -342,7 +340,7 @@ export class Spinner extends Component {
return (
);
}
@@ -355,7 +353,7 @@ export class Spinner extends Component {
return (
);
}
diff --git a/src/components/splitbutton/SplitButton.js b/src/components/splitbutton/SplitButton.js
index 354bf6e7b7..834dbf5fbe 100644
--- a/src/components/splitbutton/SplitButton.js
+++ b/src/components/splitbutton/SplitButton.js
@@ -120,7 +120,7 @@ export class SplitButton extends Component {
return (
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
{this.props.value + this.props.unit}
;
+ let labelText = (this.props.value && typeof(this.props.value) === "number") ? this.props.value + this.props.unit : (this.props.value||"");
+ var label = {labelText}
;
}
- return (
-
-
- {label}
-
- );
+ let progressbar = null;
+
+ if(this.props.mode === 'indeterminate') {
+ let container = (
+
+
);
+
+ if(typeof(this.props.value) === "string") {
+ progressbar = (
+ {label}
+ {container}
+
);
+ }
+ else {
+ progressbar = (
+ {label}
+ {container}
+
);
+ }
+ }
+ else {
+ let valueText = ();
+
+ if(typeof(this.props.value) === "string") {
+ progressbar = (
+ {valueText}
+ {label}
+
);
+ }
+ else {
+ progressbar = (
+ {valueText}
+ {label}
+
);
+ }
+ }
+
+
+ return progressbar;
}
}
\ No newline at end of file
diff --git a/src/components/radiobutton/RadioButton.css b/src/components/radiobutton/RadioButton.css
index b7d6168ee1..343cc48f0d 100644
--- a/src/components/radiobutton/RadioButton.css
+++ b/src/components/radiobutton/RadioButton.css
@@ -13,13 +13,18 @@
-webkit-border-radius: 100%;
border-radius: 100%;
text-align: center;
+ position: relative;
}
.ui-radiobutton .ui-radiobutton-icon {
display: block;
- font-size: .5em;
- line-height: inherit;
- margin-top: -1px;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ width: 1em;
+ height: 1em;
+ margin-top: -.5em;
+ margin-left: -.5em;
}
.ui-radiobutton + label {
diff --git a/src/components/radiobutton/RadioButton.js b/src/components/radiobutton/RadioButton.js
index e2c2719f36..5abcfd056e 100644
--- a/src/components/radiobutton/RadioButton.js
+++ b/src/components/radiobutton/RadioButton.js
@@ -21,11 +21,11 @@ export class RadioButton extends Component {
id: PropTypes.string,
inputId: PropTypes.string,
value: PropTypes.any,
- checked: PropTypes.bool.isRequired,
+ checked: PropTypes.bool,
style: PropTypes.object,
className: PropTypes.string,
disabled: PropTypes.bool,
- onChange: PropTypes.func.isRequired
+ onChange: PropTypes.func
};
constructor(props) {
@@ -48,6 +48,8 @@ export class RadioButton extends Component {
value: this.props.value,
checked: !this.props.checked
});
+
+ this.input.checked = !this.props.checked;
}
}
@@ -60,14 +62,18 @@ export class RadioButton extends Component {
}
render() {
+ if(this.input) {
+ this.input.checked = this.props.checked;
+ }
+
let containerClass = classNames('ui-radiobutton ui-widget', this.props.className);
let boxClass = classNames('ui-radiobutton-box ui-widget ui-corner-all ui-state-default', {'ui-state-active': this.props.checked, 'ui-state-disabled': this.props.disabled});
- let iconClass = classNames('ui-radiobutton-icon ui-c', { 'fa fa-circle': this.props.checked });
+ let iconClass = classNames('ui-radiobutton-icon ui-c', { 'pi pi-circle-on': this.props.checked });
return (
- this.input = el} type="radio" name={this.props.name} checked={this.props.checked} onFocus={this.onFocus} onBlur={this.onBlur} disabled={this.props.disabled}/>
+ this.input = el} type="radio" name={this.props.name} defaultChecked={this.props.checked} onFocus={this.onFocus} onBlur={this.onBlur} disabled={this.props.disabled}/>
{ this.box = el; }}>
diff --git a/src/components/rating/Rating.css b/src/components/rating/Rating.css
index c2d6a8bade..ed844d7d2c 100644
--- a/src/components/rating/Rating.css
+++ b/src/components/rating/Rating.css
@@ -1,8 +1,11 @@
.ui-rating a {
- margin-left: .25em;
cursor: pointer;
}
+.ui-rating {
+ font-size: 1.25em;
+}
+
.ui-rating.ui-state-disabled {
cursor: default;
}
\ No newline at end of file
diff --git a/src/components/rating/Rating.js b/src/components/rating/Rating.js
index ec9b1330e4..c63bf27ae6 100644
--- a/src/components/rating/Rating.js
+++ b/src/components/rating/Rating.js
@@ -35,7 +35,7 @@ export class Rating extends Component {
}
rate(event, i) {
- if(!this.props.readonly && !this.props.disabled) {
+ if(!this.props.readonly && !this.props.disabled && this.props.onChange) {
this.props.onChange({
originalEvent: event,
value: i
@@ -46,7 +46,7 @@ export class Rating extends Component {
}
clear(event) {
- if(!this.props.readonly && !this.props.disabled) {
+ if(!this.props.readonly && !this.props.disabled && this.props.onChange) {
this.props.onChange({
originalEvent: event,
value: null
@@ -56,16 +56,17 @@ export class Rating extends Component {
event.preventDefault();
}
- componentWillReceiveProps(nextProps) {
- var newValue = nextProps.value;
-
- if (newValue !== this.state.value) {
- this.setState({value: newValue});
+ static getDerivedStateFromProps(nextProps, prevState) {
+ if (nextProps.value !== prevState.value) {
+ return {
+ value: nextProps.value
+ };
}
+ return null;
}
shouldComponentUpdate(nextProps, nextState) {
- if(nextState.value === this.state.value) {
+ if(nextState.value === this.state.value && nextProps.disabled === this.props.disabled) {
return false;
}
@@ -77,7 +78,7 @@ export class Rating extends Component {
if(this.props.cancel) {
var cancel =
-
+
;
}
@@ -87,9 +88,9 @@ export class Rating extends Component {
}
var stars = starsArray.map((value) => {
- var iconClass = classNames('fa', {
- 'fa-star-o': (!this.props.value || value > this.props.value),
- 'fa-star': (value <= this.props.value)
+ var iconClass = classNames('ui-rating-icon pi', {
+ 'pi-star-o': (!this.state.value || value > this.state.value),
+ 'pi-star': (value <= this.state.value)
});
return this.rate(e, value)} key={value}>
diff --git a/src/components/schedule/Schedule.js b/src/components/schedule/Schedule.js
index 27ba98691b..b310304a83 100644
--- a/src/components/schedule/Schedule.js
+++ b/src/components/schedule/Schedule.js
@@ -326,19 +326,19 @@ export class Schedule extends Component {
shouldComponentUpdate(nextProps, nextState) {
return false;
}
+
+ componentWillUnmount() {
+ jQuery(this.scheduleEl).fullCalendar('destroy');
+ }
- componentWillReceiveProps(nextProps) {
- if(!ObjectUtils.equals(nextProps.events, this.events)) {
- this.events = [...nextProps.events];
+ componentDidUpdate(prevProps, prevState, snaphot) {
+ if(!ObjectUtils.equals(this.props.events, this.events)) {
+ this.events = [...this.props.events];
this.schedule.fullCalendar('removeEventSources');
this.schedule.fullCalendar('addEventSource', this.events);
}
}
- componentWillUnmount() {
- jQuery(this.scheduleEl).fullCalendar('destroy');
- }
-
render() {
return -
this.itemClick(e, child, index)}>
- {child.items && }
+ {child.items && }
{child.icon && }
{child.label}
@@ -236,7 +236,7 @@ export class SlideMenu extends Component {
effectDuration={this.props.effectDuration} easing={this.props.easing} isAnimating={this.isAnimating} setAnimating={this.setAnimating}>
this.scheduleEl = el} style={this.props.style} className={this.props.className}>
;
}
diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js
index acad8645a1..85a808b866 100644
--- a/src/components/sidebar/Sidebar.js
+++ b/src/components/sidebar/Sidebar.js
@@ -44,13 +44,13 @@ export class Sidebar extends Component {
}
componentWillUnmount() {
- this.disableModality();
this.unbindMaskClickListener();
+ this.disableModality();
}
- componentWillReceiveProps(nextProps) {
- if(this.state.visible !== nextProps.visible) {
- if (nextProps.visible)
+ componentDidUpdate(prevProps, prevState, snapshot) {
+ if(prevState.visible !== this.props.visible) {
+ if (this.props.visible)
this.show();
else {
if(this.preventVisibleChangePropagation)
@@ -125,7 +125,7 @@ export class Sidebar extends Component {
return (
this.container=el} id={this.props.id} className={containerClass} style={this.props.style}>
-
+
{this.props.children}
diff --git a/src/components/slidemenu/SlideMenu.js b/src/components/slidemenu/SlideMenu.js
index 6f6634de80..10b43f85aa 100644
--- a/src/components/slidemenu/SlideMenu.js
+++ b/src/components/slidemenu/SlideMenu.js
@@ -96,12 +96,12 @@ export class SlideMenuSub extends Component {
'ui-menuitem-link-parent':child.items,
'ui-state-disabled':child.disabled
}),
- menuiconClass = classNames('ui-menuitem-icon fa fa-fw', child.icon);
+ menuiconClass = classNames('ui-menuitem-icon', child.icon);
return (
this.backward = el} className="ui-slidemenu-backward ui-widget-header ui-corner-all" style={{'display': this.left ? 'block' : 'none'}} onClick={this.goBack}>
- {this.props.backLabel}
+ {this.props.backLabel}
{ this.container = el; }}>
-
+
this.panel = el} appendTo={this.props.appendTo}
menuStyle={this.props.menuStyle} menuClassName={this.props.menuClassName}>
{items}
diff --git a/src/components/splitbutton/SplitButtonItem.js b/src/components/splitbutton/SplitButtonItem.js
index ab5c1f9381..1e9588f50b 100644
--- a/src/components/splitbutton/SplitButtonItem.js
+++ b/src/components/splitbutton/SplitButtonItem.js
@@ -26,7 +26,7 @@ export class SplitButtonItem extends Component {
render() {
var className = classNames('ui-menuitem-link ui-corner-all', { 'ui-state-disabled': this.props.menuitem.disabled });
- var icon = this.props.menuitem.icon ? : null;
+ var icon = this.props.menuitem.icon ? : null;
var label = {this.props.menuitem.label};
return (
diff --git a/src/components/tabview/TabView.js b/src/components/tabview/TabView.js
index e92bd1244e..ec4548a96b 100644
--- a/src/components/tabview/TabView.js
+++ b/src/components/tabview/TabView.js
@@ -50,9 +50,7 @@ export class TabView extends Component {
this.state = {
activeIndex: this.props.activeIndex || 0
};
- }
- componentWillMount() {
this.id = this.props.id || UniqueComponentId();
}
@@ -70,12 +68,14 @@ export class TabView extends Component {
event.preventDefault();
}
- componentWillReceiveProps(nextProps) {
- if(nextProps.activeIndex !== this.props.activeIndex) {
- this.setState({
+ static getDerivedStateFromProps(nextProps, prevState) {
+ if(nextProps.activeIndex !== null && nextProps.activeIndex !== prevState.activeIndex) {
+ return {
activeIndex: nextProps.activeIndex
- });
+ };
}
+
+ return null;
}
renderTabHeader(tab, index) {
@@ -87,9 +87,9 @@ export class TabView extends Component {
return (
-
this.onTabHeaderClick(e, tab, index)} id={id} aria-controls={ariaControls} aria-selected={selected} >
- {tab.props.leftIcon && }
+ {tab.props.leftIcon && }
{tab.props.header}
- {tab.props.rightIcon && }
+ {tab.props.rightIcon && }
);
@@ -116,7 +116,7 @@ export class TabView extends Component {
return (
- {tab.props.children}
+ {selected && tab.props.children}
);
})
diff --git a/src/components/togglebutton/ToggleButton.js b/src/components/togglebutton/ToggleButton.js
index 48255826a5..5832d1bb85 100644
--- a/src/components/togglebutton/ToggleButton.js
+++ b/src/components/togglebutton/ToggleButton.js
@@ -52,7 +52,7 @@ export class ToggleButton extends Component {
iconStyleClass = null;
if(this.props.onIcon || this.props.offIcon) {
- iconStyleClass = classNames('ui-c fa fa-fw' , this.props.checked ? this.props.onIcon : this.props.offIcon , {
+ iconStyleClass = classNames('ui-c' , this.props.checked ? this.props.onIcon : this.props.offIcon , {
'ui-button-icon-only': (this.props.onIcon && this.props.offIcon) && (!this.props.onLabel || !this.props.offLabel),
'ui-button-icon-left': (this.props.onIcon && this.props.offIcon)
});
diff --git a/src/components/tree/Tree.js b/src/components/tree/Tree.js
index a36ebf1b3a..5d67fce12d 100644
--- a/src/components/tree/Tree.js
+++ b/src/components/tree/Tree.js
@@ -48,7 +48,7 @@ export class TreeNode extends Component {
else
icon = this.state.expanded && this.node.children && this.node.children.length ? this.node.expandedIcon : this.node.collapsedIcon;
- return 'ui-treenode-icon fa fa-fw ' + icon;
+ return 'ui-treenode-icon ' + icon;
}
isLeaf(node) {
@@ -76,18 +76,18 @@ export class TreeNode extends Component {
{this.node.label}
);
- var togglerClass = classNames('ui-tree-toggler fa fa-fw', {
- 'fa-caret-right': !this.state.expanded,
- 'fa-caret-down': this.state.expanded
+ var togglerClass = classNames('ui-tree-toggler pi pi-fw', {
+ 'pi-caret-right': !this.state.expanded,
+ 'pi-caret-down': this.state.expanded
});
var hasIcon = (this.node.icon || this.node.expandedIcon || this.node.collapsedIcon),
iconClass = this.getIcon();
if (this.props.selectionMode === 'checkbox') {
- var checkboxIconClass = classNames('ui-chkbox-icon ui-c fa', {
- 'fa-check': this.props.isSelected(this.node),
- 'fa-minus': this.node.partialSelected
+ var checkboxIconClass = classNames('ui-chkbox-icon ui-c pi', {
+ 'pi-check': this.props.isSelected(this.node),
+ 'pi-minus': this.node.partialSelected
}),
checkbox = (
@@ -148,9 +148,9 @@ export class TreeNode extends Component {
{this.node.label}
);
- var togglerClass = classNames('ui-tree-toggler fa fa-fw', {
- 'fa-plus': !this.state.expanded,
- 'fa-minus': this.state.expanded
+ var togglerClass = classNames('ui-tree-toggler pi pi-fw', {
+ 'pi-plus': !this.state.expanded,
+ 'pi-minus': this.state.expanded
});
var hasIcon = (this.node.icon || this.node.expandedIcon || this.node.collapsedIcon),
@@ -197,6 +197,16 @@ export class TreeNode extends Component {
}
}
+ static getDerivedStateFromProps(nextProps, prevState) {
+ let nextNode = nextProps.node;
+ if(nextNode.hasOwnProperty("expanded") && prevState.expanded !== nextNode.expanded) {
+ return {
+ expanded: nextNode.expanded
+ };
+ }
+ return null;
+ }
+
render() {
if (this.props.isHorizontal) {
return this.renderHorizontalTree();
@@ -521,6 +531,10 @@ export class Tree extends Component {
}
render() {
+ if(this.props.selection && this.selection !== this.props.selection) {
+ this.selection = this.props.selection;
+ }
+
var treeClass = classNames('ui-tree ui-widget ui-widget-content ui-corner-all', this.props.className, {
'ui-tree-selectable': this.props.selectionMode,
'ui-tree-horizontal': this.isHorizontal()
diff --git a/src/components/treetable/TreeTable.css b/src/components/treetable/TreeTable.css
index 23b76988bb..75514e5555 100644
--- a/src/components/treetable/TreeTable.css
+++ b/src/components/treetable/TreeTable.css
@@ -77,6 +77,19 @@
float: left;
}
+.ui-treetable .ui-sortable-column {
+ cursor: pointer;
+}
+
+.ui-treetable .ui-sortable-column-icon {
+ display: inline-block;
+ margin-left: .125em;
+}
+
+.ui-treetable tr.ui-state-highlight {
+ cursor: pointer;
+}
+
/* PrimeReact */
.ui-treetable td.ui-treetable-child-table-container {
padding: 0;
diff --git a/src/components/treetable/TreeTable.d.ts b/src/components/treetable/TreeTable.d.ts
index 5861576e64..2ae5e17701 100644
--- a/src/components/treetable/TreeTable.d.ts
+++ b/src/components/treetable/TreeTable.d.ts
@@ -1,16 +1,5 @@
import React = require("react");
-interface UITreeRowProps {
- node?: any;
- level?: any;
- treeTable?: any;
- parentNode?: any;
- labelExpand?: string;
- labelCollapse?: string
-}
-
-export class UITreeRow extends React.Component {}
-
interface TreeTableProps {
id?: string;
value?: any;
@@ -24,10 +13,15 @@ interface TreeTableProps {
metaKeySelection?: boolean;
header?: string;
footer?: string;
+ sortField?: string;
+ sortOrder?: number;
+ multiSortMeta?: string;
+ sortMode?: string;
onNodeSelect?(e: {originalEvent: Event, node: any}): void;
onNodeUnselect?(e: {originalEvent: Event, node: any}): void;
onNodeExpand?(e: {originalEvent: Event, node: any}): void;
onNodeCollapse?(e: {originalEvent: Event, node: any}): void;
+ onSort?(e: {sortField: string, sortOrder: number, multiSortMeta: any}): void;
}
export class TreeTable extends React.Component {}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTable.js b/src/components/treetable/TreeTable.js
index 6d5a3e5fe0..595ca86b1f 100644
--- a/src/components/treetable/TreeTable.js
+++ b/src/components/treetable/TreeTable.js
@@ -1,152 +1,11 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
+import { TreeTableHeader } from './TreeTableHeader';
+import { TreeTableFooter } from './TreeTableFooter';
+import { UITreeRow } from './UITreeRow';
import ObjectUtils from '../utils/ObjectUtils';
-import {Column} from "../column/Column"
-
-export class UITreeRow extends Component {
-
- static defaultProps = {
- node: null,
- level: null,
- treeTable: null,
- parentNode: null,
- labelExpand: "Expand",
- labelCollapse: "Collapse"
- }
-
- static propsTypes = {
- node: PropTypes.any,
- level: PropTypes.any,
- treeTable: PropTypes.any,
- parentNode: PropTypes.any,
- labelExpand: PropTypes.string,
- labelCollapse: PropTypes.string
- }
-
- constructor(props) {
- super(props);
- this.node = this.props.node;
- this.node.parent = this.props.parentNode;
- this.treeTable = this.props.treeTable;
- this.state = { expanded: this.node.expanded };
- }
-
- toggle(event) {
- if (this.state.expanded && this.treeTable.props.onNodeCollapse)
- this.treeTable.props.onNodeCollapse({ originalEvent: event, node: this.node });
- else if (this.treeTable.props.onNodeExpand)
- this.treeTable.props.onNodeExpand({ originalEvent: event, node: this.node });
-
- this.setState({ expanded: !this.state.expanded });
-
- event.preventDefault();
- }
-
- isLeaf() {
- return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
- }
-
- isSelected() {
- return this.treeTable.isSelected(this.node);
- }
-
- onRowClick(event) {
- this.treeTable.onRowClick(event, this.node);
- }
-
- onRowTouchEnd() {
- this.treeTable.onRowTouchEnd();
- }
-
- resolveFieldData(data, field) {
- if (data && field) {
- if (field.indexOf('.') === -1) {
- return data[field];
- }
- else {
- var fields = field.split('.');
- var value = data;
- for (var i = 0, len = fields.length; i < len; ++i) {
- value = value[fields[i]];
- }
- return value;
- }
- }
- else {
- return null;
- }
- }
-
- render() {
- var tableRowClass = classNames('ui-treetable-row', {
- 'ui-state-highlight': this.isSelected(),
- 'ui-treetable-row-selectable': this.treeTable.props.selectionMode && this.node.selectable !== false
- });
-
- var childTbody = this.node.children && this.node.children.map((childNode, index) => {
- return (
- {
- this.treeTable.columns && this.treeTable.columns.map((col, i) => {
- var toggler = null,
- checkbox = null;
-
- if (i === 0) {
- var togglerClass = classNames('ui-treetable-toggler fa fa-fw ui-c', {
- 'fa-caret-down': this.state.expanded,
- 'fa-caret-right': !this.state.expanded
- }),
- togglerStyle = { 'marginLeft': this.props.level * 16 + 'px', 'visibility': this.isLeaf() ? 'hidden' : 'visible' };
-
- toggler = ();
-
- if (this.treeTable.props.selectionMode === 'checkbox') {
- var checkboxIconClass = classNames('ui-chkbox-icon ui-c fa', {
- 'fa-check': this.isSelected(),
- 'fa-minus': this.node.partialSelected
- });
-
- checkbox = (
-
- {toggler}
- {checkbox}
- {rowData}
-
- );
-
- })
- }
-
- {
- this.node.children && this.state.expanded && (
-
-
- {childTbody}
-
-
- )
- }
-
- );
- }
-}
+import { Column } from "../column/Column"
export class TreeTable extends Component {
static defaultProps = {
@@ -162,6 +21,11 @@ export class TreeTable extends Component {
metaKeySelection: true,
header: '',
footer: '',
+ sortField: null,
+ sortOrder: 1,
+ multiSortMeta: null,
+ sortMode: 'single',
+ onSort: null,
onNodeSelect: null,
onNodeUnselect: null,
onNodeExpand: null,
@@ -181,14 +45,154 @@ export class TreeTable extends Component {
metaKeySelection: PropTypes.bool,
header: PropTypes.string,
footer: PropTypes.string,
+ sortField: PropTypes.string,
+ sortOrder: PropTypes.number,
+ multiSortMeta: PropTypes.array,
+ sortMode: PropTypes.string,
+ onSort: PropTypes.func,
onNodeSelect: PropTypes.func,
onNodeUnselect: PropTypes.func,
onNodeExpand: PropTypes.func,
onNodeCollapse: PropTypes.func
}
+ constructor(props) {
+ super(props);
+ this.value = [...this.props.value];
+
+ this.state = {
+ sortField: props.sortField,
+ sortOrder: props.sortOrder,
+ multiSortMeta: props.multiSortMeta
+ };
+
+ this.onSort = this.onSort.bind(this);
+ }
+
+ onSort(event) {
+ let sortField = event.sortField;
+ let sortOrder = (this.state.sortField === event.sortField) ? this.state.sortOrder * -1 : 1;
+ let multiSortMeta;
+
+ this.columnSortable = event.sortable;
+ this.columnSortFunction = event.sortFunction;
+
+ if (this.props.sortMode === 'multiple') {
+ let metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
+ multiSortMeta = this.state.multiSortMeta;
+ if (!multiSortMeta || !metaKey) {
+ multiSortMeta = [];
+ }
+
+ this.addSortMeta({ field: sortField, order: sortOrder }, multiSortMeta);
+ }
+
+ this.setState({
+ sortField: sortField,
+ sortOrder: sortOrder,
+ multiSortMeta: multiSortMeta
+ });
+
+ if (this.props.onSort) {
+ this.props.onSort({
+ sortField: sortField,
+ sortOrder: sortOrder,
+ multiSortMeta: multiSortMeta
+ });
+ }
+ }
+
+ addSortMeta(meta, multiSortMeta) {
+ let index = -1;
+ for (let i = 0; i < multiSortMeta.length; i++) {
+ if (multiSortMeta[i].field === meta.field) {
+ index = i;
+ break;
+ }
+ }
+
+ if (index >= 0)
+ multiSortMeta[index] = meta;
+ else
+ multiSortMeta.push(meta);
+ }
+
+ sortSingle(value) {
+ if (this.columnSortable && this.columnSortable === 'custom' && this.columnSortFunction) {
+ value = this.columnSortFunction({
+ field: this.state.sortField,
+ order: this.state.sortOrder
+ });
+ }
+ else {
+ value.sort((data1, data2) => {
+ let value1 = ObjectUtils.resolveFieldData(data1.data, this.state.sortField);
+ let value2 = ObjectUtils.resolveFieldData(data2.data, this.state.sortField);
+ let result = null;
+
+ if (value1 == null && value2 != null)
+ result = -1;
+ else if (value1 != null && value2 == null)
+ result = 1;
+ else if (value1 == null && value2 == null)
+ result = 0;
+ else if (typeof value1 === 'string' && typeof value2 === 'string')
+ result = value1.localeCompare(value2, undefined, { numeric: true });
+ else
+ result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
+
+ return (this.state.sortOrder * result);
+ });
+ }
+
+ for(let i = 0; i < value.length; i++) {
+ let child = value[i].children;
+ if(child) {
+ this.sortSingle(child);
+ }
+ }
+
+ return value;
+ }
+
+ sortMultiple(value) {
+ value.sort((data1, data2) => {
+ return this.multisortField(data1, data2, this.state.multiSortMeta, 0);
+ });
+
+ for(let i = 0; i < value.length; i++) {
+ let child = value[i].children;
+ if(child) {
+ this.sortMultiple(child);
+ }
+ }
+
+ return value;
+ }
+
+ multisortField(data1, data2, multiSortMeta, index) {
+ let value1 = ObjectUtils.resolveFieldData(data1.data, this.state.multiSortMeta[index].field);
+ let value2 = ObjectUtils.resolveFieldData(data2.data, this.state.multiSortMeta[index].field);
+ let result = null;
+
+ if (typeof value1 === 'string' || value1 instanceof String) {
+ if (value1.localeCompare && (value1 !== value2)) {
+ return (this.state.multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true }));
+ }
+ }
+ else {
+ result = (value1 < value2) ? -1 : 1;
+ }
+
+ if (value1 === value2) {
+ return (this.state.multiSortMeta.length - 1) > (index) ? (this.multisortField(data1, data2, this.state.multiSortMeta, index + 1)) : 0;
+ }
+
+ return (this.state.multiSortMeta[index].order * result);
+ }
+
onRowClick(event, node) {
- var eventTarget = (event.target);
+ let eventTarget = (event.target);
if (eventTarget.className && eventTarget.className.indexOf('ui-treetable-toggler') === 0) {
return;
}
@@ -197,9 +201,9 @@ export class TreeTable extends Component {
return;
}
- var metaSelection = this.rowTouched ? false : this.props.metaKeySelection;
- var index = this.findIndexInSelection(node);
- var selected = (index >= 0);
+ let metaSelection = this.rowTouched ? false : this.props.metaKeySelection;
+ let index = this.findIndexInSelection(node);
+ let selected = (index >= 0);
if (this.isCheckboxSelectionMode()) {
if (selected) {
@@ -241,7 +245,7 @@ export class TreeTable extends Component {
}
else {
if (metaSelection) {
- var metaKey = (event.metaKey || event.ctrlKey);
+ let metaKey = (event.metaKey || event.ctrlKey);
if (selected && metaKey) {
if (this.isSingleSelectionMode()) {
@@ -349,14 +353,14 @@ export class TreeTable extends Component {
}
findIndexInSelection(node) {
- var index = -1;
+ let index = -1;
if (this.props.selectionMode && this.selection) {
if (this.isSingleSelectionMode()) {
index = (ObjectUtils.equals(this.selection, node)) ? 0 : - 1;
}
else {
- for (var i = 0; i < this.selection.length; i++) {
+ for (let i = 0; i < this.selection.length; i++) {
if (ObjectUtils.equals(this.selection[i], node)) {
index = i;
break;
@@ -370,9 +374,9 @@ export class TreeTable extends Component {
propagateSelectionUp(node, select) {
if (node.children && node.children.length) {
- var selectedCount = 0;
- var childPartialSelected = false;
- for (var child of node.children) {
+ let selectedCount = 0;
+ let childPartialSelected = false;
+ for (let child of node.children) {
if (this.isSelected(child)) {
selectedCount++;
}
@@ -387,7 +391,7 @@ export class TreeTable extends Component {
}
else {
if (!select) {
- var index = this.findIndexInSelection(node);
+ let index = this.findIndexInSelection(node);
if (index >= 0) {
this.selection = this.selection.filter((val, i) => i !== index);
}
@@ -400,14 +404,14 @@ export class TreeTable extends Component {
}
}
- var parent = node.parent;
+ let parent = node.parent;
if (parent) {
this.propagateSelectionUp(parent, select);
}
}
propagateSelectionDown(node, select) {
- var index = this.findIndexInSelection(node);
+ let index = this.findIndexInSelection(node);
if (select && index === -1) {
this.selection = [...this.selection || [], node];
@@ -419,7 +423,7 @@ export class TreeTable extends Component {
node.partialSelected = false;
if (node.children && node.children.length) {
- for (var child of node.children) {
+ for (let child of node.children) {
this.propagateSelectionDown(child, select);
}
}
@@ -443,70 +447,79 @@ export class TreeTable extends Component {
hasFooter() {
if (this.columns) {
- var columnsArr = this.columns;
- for (var i = 0; i < columnsArr.length; i++) {
- if (columnsArr[i].footer) {
+ for (let i = 0; i < this.columns.length; i++) {
+ if (this.columns[i].footer) {
return true;
}
}
}
+
return false;
}
+ processData() {
+ let data = this.value;
+ if (data && data.length) {
+ if (this.state.sortField || this.state.multiSortMeta) {
+ if (this.props.sortMode === 'single')
+ data = this.sortSingle(data);
+ else if (this.props.sortMode === 'multiple')
+ data = this.sortMultiple(data);
+ }
+ }
+
+ return data;
+ }
+
+ createTreeTableHeader() {
+ return
- {
- this.columns && this.columns.map((col, i) => {
- var colStyleClass = classNames('ui-state-default ui-unselectable-text', col.props.className);
+ let headerFacet = this.props.header &&
-
- {col.props.header}
- );
- })
- }
-
-
- ),
- tfoot = (
- this.hasFooter() && (
-
- {
- this.columns && this.columns.map((col, i) => {
- var colStyleClass = classNames('ui-state-default', col.props.className);
-
- return (
- {col.props.footer}
- );
- })
- }
-
- )
- ),
- tbody = this.props.value && this.props.value.map((node, index) => {
- return ( {}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableFooter.js b/src/components/treetable/TreeTableFooter.js
new file mode 100644
index 0000000000..e231a1ba3c
--- /dev/null
+++ b/src/components/treetable/TreeTableFooter.js
@@ -0,0 +1,21 @@
+import React, {Component} from 'react';
+import {TreeTableFooterCell} from './TreeTableFooterCell';
+
+export class TreeTableFooter extends Component {
+
+ createFooterCell() {
+ return React.Children.map(this.props.columns, (column, i) => {
+ return {this.createFooterCell(this)} ;
+
+ return (
+
+ {content}
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableFooterCell.d.ts b/src/components/treetable/TreeTableFooterCell.d.ts
new file mode 100644
index 0000000000..85764df687
--- /dev/null
+++ b/src/components/treetable/TreeTableFooterCell.d.ts
@@ -0,0 +1,6 @@
+import React = require("react");
+
+interface TreeTableFooterCellProps {
+}
+
+export class TreeTableFooterCell extends React.Component {}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableFooterCell.js b/src/components/treetable/TreeTableFooterCell.js
new file mode 100644
index 0000000000..c3f6485c10
--- /dev/null
+++ b/src/components/treetable/TreeTableFooterCell.js
@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import classNames from 'classnames';
+
+export class TreeTableFooterCell extends Component {
+
+ render() {
+ var colStyleClass = classNames('ui-state-default', this.props.className);
+
+ return (
+
+ {this.props.footer}
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableHeader.d.ts b/src/components/treetable/TreeTableHeader.d.ts
new file mode 100644
index 0000000000..836f7c6e4e
--- /dev/null
+++ b/src/components/treetable/TreeTableHeader.d.ts
@@ -0,0 +1,6 @@
+import React = require("react");
+
+interface TreeTableHeaderProps {
+}
+
+export class TreeTableHeader extends React.Component {}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableHeader.js b/src/components/treetable/TreeTableHeader.js
new file mode 100644
index 0000000000..b3fe949af9
--- /dev/null
+++ b/src/components/treetable/TreeTableHeader.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { TreeTableHeaderCell } from './TreeTableHeaderCell';
+
+export class TreeTableHeader extends Component {
+
+ createHeaderCell() {
+ return React.Children.map(this.props.columns, (column, i) => {
+ return {this.createHeaderCell(this)} ;
+
+ return (
+
+ {content}
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableHeaderCell.d.ts b/src/components/treetable/TreeTableHeaderCell.d.ts
new file mode 100644
index 0000000000..60bc708d61
--- /dev/null
+++ b/src/components/treetable/TreeTableHeaderCell.d.ts
@@ -0,0 +1,6 @@
+import React = require("react");
+
+interface TreeTableHeaderCellProps {
+}
+
+export class TreeTableHeaderCell extends React.Component {}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableHeaderCell.js b/src/components/treetable/TreeTableHeaderCell.js
new file mode 100644
index 0000000000..79fb875cb0
--- /dev/null
+++ b/src/components/treetable/TreeTableHeaderCell.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import DomHandler from '../utils/DomHandler';
+
+export class TreeTableHeaderCell extends Component {
+
+ constructor(props) {
+ super(props);
+ this.onClick = this.onClick.bind(this);
+ }
+
+ onClick(e) {
+ if(this.props.sortable) {
+ let targetNode = e.target;
+ if(DomHandler.hasClass(targetNode, 'ui-sortable-column') ||Â DomHandler.hasClass(targetNode, 'ui-column-title') ||Â DomHandler.hasClass(targetNode, 'ui-sortable-column-icon')) {
+ this.props.onSort({
+ originalEvent: e,
+ sortField: this.props.field,
+ sortFunction: this.props.sortFunction,
+ sortable: this.props.sortable
+ });
+ }
+ }
+ }
+
+ getMultiSortMetaData() {
+ if(this.props.multiSortMeta) {
+ for(let i = 0; i < this.props.multiSortMeta.length; i++) {
+ if(this.props.multiSortMeta[i].field === this.props.field) {
+ return this.props.multiSortMeta[i];
+ }
+ }
+ }
+
+ return null;
+ }
+
+ render() {
+ let multiSortMetaData = this.getMultiSortMetaData();
+ let singleSorted = (this.props.field === this.props.sortField);
+ let multipleSorted = multiSortMetaData !== null;
+ let sortOrder = 0;
+ let sortIconElement;
+
+ if(singleSorted)
+ sortOrder = this.props.sortOrder;
+ else if(multipleSorted)
+ sortOrder = multiSortMetaData.order;
+
+ let sorted = this.props.sortable && (singleSorted || multipleSorted);
+ let className = classNames('ui-state-default ui-unselectable-text',
+ {'ui-sortable-column': this.props.sortable, 'ui-state-active': sorted},
+ this.props.className);
+
+ if(this.props.sortable) {
+ var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-down' : 'pi-sort-up': 'pi-sort';
+ sortIconElement = ;
+ }
+
+ return (
+
+ {this.props.header}
+ {sortIconElement}
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/components/treetable/UITreeRow.d.ts b/src/components/treetable/UITreeRow.d.ts
new file mode 100644
index 0000000000..dd8132b998
--- /dev/null
+++ b/src/components/treetable/UITreeRow.d.ts
@@ -0,0 +1,12 @@
+import React = require("react");
+
+interface UITreeRowProps {
+ node?: any;
+ level?: any;
+ treeTable?: any;
+ parentNode?: any;
+ labelExpand?: string;
+ labelCollapse?: string
+}
+
+export class UITreeRow extends React.Component {}
\ No newline at end of file
diff --git a/src/components/treetable/UITreeRow.js b/src/components/treetable/UITreeRow.js
new file mode 100644
index 0000000000..16685a1e7b
--- /dev/null
+++ b/src/components/treetable/UITreeRow.js
@@ -0,0 +1,164 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import ObjectUtils from '../utils/ObjectUtils';
+
+export class UITreeRow extends Component {
+
+ static defaultProps = {
+ node: null,
+ level: null,
+ treeTable: null,
+ parentNode: null,
+ labelExpand: "Expand",
+ labelCollapse: "Collapse"
+ }
+
+ static propsTypes = {
+ node: PropTypes.any,
+ level: PropTypes.any,
+ treeTable: PropTypes.any,
+ parentNode: PropTypes.any,
+ labelExpand: PropTypes.string,
+ labelCollapse: PropTypes.string
+ }
+
+ constructor(props) {
+ super(props);
+ this.node = this.props.node;
+ this.node.parent = this.props.parentNode;
+ this.treeTable = this.props.treeTable;
+ this.state = { expanded: this.node.expanded };
+ }
+
+ toggle(event) {
+ if (this.state.expanded && this.treeTable.props.onNodeCollapse)
+ this.treeTable.props.onNodeCollapse({ originalEvent: event, node: this.node });
+ else if (this.treeTable.props.onNodeExpand)
+ this.treeTable.props.onNodeExpand({ originalEvent: event, node: this.node });
+
+ this.node.expanded = !this.state.expanded;
+ this.setState({ expanded: !this.state.expanded });
+
+ event.preventDefault();
+ }
+
+ isLeaf() {
+ return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
+ }
+
+ isSelected() {
+ return this.treeTable.isSelected(this.node);
+ }
+
+ onRowClick(event) {
+ this.treeTable.onRowClick(event, this.node);
+ }
+
+ onRowTouchEnd() {
+ this.treeTable.onRowTouchEnd();
+ }
+
+ resolveFieldData(data, field) {
+ if (data && field) {
+ if (field.indexOf('.') === -1) {
+ return data[field];
+ }
+ else {
+ var fields = field.split('.');
+ var value = data;
+ for (var i = 0, len = fields.length; i < len; ++i) {
+ value = value[fields[i]];
+ }
+ return value;
+ }
+ }
+ else {
+ return null;
+ }
+ }
+
+ static getDerivedStateFromProps(nextProps, prevState) {
+ let expanded = nextProps.node.expanded
+ if(prevState.expanded !== expanded) {
+ return {
+ expanded: expanded
+ };
+ }
+ return null;
+ }
+
+ render() {
+ if(this.node !== this.props.node) {
+ this.node = this.props.node;
+ this.node.parent = this.props.node.parentNode;
+ }
+
+ var tableRowClass = classNames('ui-treetable-row', {
+ 'ui-state-highlight': this.isSelected(),
+ 'ui-treetable-row-selectable': this.treeTable.props.selectionMode && this.node.selectable !== false
+ });
+
+ var childTbody = this.node.children && this.node.children.map((childNode, index) => {
+ return (
+ {
+ this.treeTable.columns && this.treeTable.columns.map((col, i) => {
+ var toggler = null,
+ checkbox = null;
+
+ if (i === 0) {
+ var togglerClass = classNames('ui-treetable-toggler pi pi-fw ui-c', {
+ 'pi-caret-down': this.state.expanded,
+ 'pi-caret-right': !this.state.expanded
+ }),
+ togglerStyle = { 'marginLeft': this.props.level * 16 + 'px', 'visibility': this.isLeaf() ? 'hidden' : 'visible' };
+
+ toggler = ();
+
+ if (this.treeTable.props.selectionMode === 'checkbox') {
+ var checkboxIconClass = classNames('ui-chkbox-icon ui-c pi', {
+ 'pi-check': this.isSelected(),
+ 'pi-minus': this.node.partialSelected
+ });
+
+ checkbox = (
+
+ {toggler}
+ {checkbox}
+ {rowData}
+
+ );
+
+ })
+ }
+
+ {
+ this.node.children && this.state.expanded && (
+
+
+ {childTbody}
+
+
+ )
+ }
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/components/tristatecheckbox/TriStateCheckbox.js b/src/components/tristatecheckbox/TriStateCheckbox.js
index f165e0bb0a..5852eb2699 100644
--- a/src/components/tristatecheckbox/TriStateCheckbox.js
+++ b/src/components/tristatecheckbox/TriStateCheckbox.js
@@ -65,7 +65,7 @@ export class TriStateCheckbox extends Component {
render() {
let containerClass = classNames('ui-chkbox ui-tristatecheckbox ui-widget', this.props.className);
let boxClass = classNames('ui-chkbox-box ui-widget ui-corner-all ui-state-default', {'ui-state-active':(this.props.value || !this.props.value) && this.props.value !== null});
- let iconClass = classNames('ui-chkbox-icon ui-c', {'fa fa-check': this.props.value === true, 'fa fa-close': this.props.value === false});
+ let iconClass = classNames('ui-chkbox-icon ui-c', {'pi pi-check': this.props.value === true, 'pi pi-times': this.props.value === false});
return (
null
Unique identifier of the element.
-
- );
- }
- }
-
- var rowData = ({ObjectUtils.resolveFieldData(this.node.data, col.props.field)});
-
- return (
-
-
-
-
- {this.props.header}
-
,
- footer = this.props.footer &&
- {this.props.footer}
-
;
+ let treeTableClass = classNames('ui-treetable ui-widget', this.props.className);
- var thead = (
-
- {this.props.header}
,
+ footerFacet = this.props.footer && {this.props.footer}
;
- return (
- {header}
+ {headerFacet}
{thead}
@@ -514,7 +527,7 @@ export class TreeTable extends Component {
{tbody}
- {footer}
+ {footerFacet}
);
}
}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableFooter.d.ts b/src/components/treetable/TreeTableFooter.d.ts
new file mode 100644
index 0000000000..ab5ba04ec4
--- /dev/null
+++ b/src/components/treetable/TreeTableFooter.d.ts
@@ -0,0 +1,6 @@
+import React = require("react");
+
+interface TreeTableFooterProps {
+}
+
+export class TreeTableFooter extends React.Component
+
+ );
+ }
+ }
+
+ var rowData = ({ObjectUtils.resolveFieldData(this.node.data, col.props.field)});
+
+ return (
+
+
+
+
diff --git a/src/resources/images/primereact-slider-bg.png b/src/resources/images/primereact-slider-bg.png
index 41655c0aa2..4a14b27e0e 100644
Binary files a/src/resources/images/primereact-slider-bg.png and b/src/resources/images/primereact-slider-bg.png differ
diff --git a/src/sass/App.scss b/src/sass/App.scss
index a004f7142c..f5914d1952 100644
--- a/src/sass/App.scss
+++ b/src/sass/App.scss
@@ -1,25 +1,16 @@
@charset "UTF-8";
+/* roboto-regular */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
- src: url('../resources/fonts/roboto-v15-latin-regular.eot');
- /* IE9 Compat Modes */
-
- src: local('Roboto'), local('Roboto-Regular'), url('../resources/fonts/roboto-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
- /* IE6-IE8 */
-
- url('../resources/fonts/roboto-v15-latin-regular.woff2') format('woff2'),
- /* Super Modern Browsers */
-
- url('../resources/fonts/roboto-v15-latin-regular.woff') format('woff'),
- /* Modern Browsers */
-
- url('../resources/fonts/roboto-v15-latin-regular.ttf') format('truetype'),
- /* Safari, Android, iOS */
-
- url('../resources/fonts/roboto-v15-latin-regular.svg#Roboto') format('svg');
- /* Legacy iOS */
+ src: url('../resources/fonts/roboto-v15-latin-regular.eot'); /* IE9 Compat Modes */
+ src: local('Roboto'), local('Roboto-Regular'),
+ url('../resources/fonts/roboto-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('../resources/fonts/roboto-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+ url('../resources/fonts/roboto-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
+ url('../resources/fonts/roboto-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+ url('../resources/fonts/roboto-v15-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
@mixin background-gradient-left2right($start-color, $end-color) {
@@ -164,6 +155,7 @@ body {
&:hover {
background-color: #eeeeee;
+ cursor: pointer;
}
img {
diff --git a/src/showcase/button/ButtonDemo.js b/src/showcase/button/ButtonDemo.js
index 0d80427d52..be3f156677 100644
--- a/src/showcase/button/ButtonDemo.js
+++ b/src/showcase/button/ButtonDemo.js
@@ -31,9 +31,9 @@ export class ButtonDemo extends Component {
);
@@ -349,7 +349,7 @@ export class DataGridDemo extends Component {
- this.setState({ selectedCar: car, visible: true })} style={{ cursor: 'pointer' }}> + this.setState({ selectedCar: car, visible: true })} style={{ cursor: 'pointer' }}>
);
diff --git a/src/showcase/datascroller/DataScrollerLoaderDemo.js b/src/showcase/datascroller/DataScrollerLoaderDemo.js
index 4fd0ecbf17..0b392d8ba6 100644
--- a/src/showcase/datascroller/DataScrollerLoaderDemo.js
+++ b/src/showcase/datascroller/DataScrollerLoaderDemo.js
@@ -29,7 +29,7 @@ export class DataScrollerLoaderDemo extends Component {
return (
Basic
-
{car.year} - {car.color}
- this.setState({ selectedCar: car, visible: true })} style={{ cursor: 'pointer' }}> + this.setState({ selectedCar: car, visible: true })} style={{ cursor: 'pointer' }}>
-
this.menu = el} model={this.items} popup={true}>
-
+
{`
this.menu = el} model={this.items} popup={true}>
-
+
`}
@@ -393,10 +393,10 @@ export class SlideMenuDemo extends Component {
this.items = [
{
label: 'File',
- icon: 'fa-file-o',
+ icon: 'fa fa-fw fa-file-o',
items: [{
label: 'New',
- icon: 'fa-plus',
+ icon: 'fa fa-fw fa-plus',
items: [
{label: 'Project'},
{label: 'Other'},
@@ -409,22 +409,22 @@ export class SlideMenuDemo extends Component {
},
{
label: 'Edit',
- icon: 'fa-edit',
+ icon: 'fa fa-fw fa-edit',
items: [
- {label: 'Undo', icon: 'fa-mail-forward'},
- {label: 'Redo', icon: 'fa-mail-reply'}
+ {label: 'Undo', icon: 'fa fa-fw fa-mail-forward'},
+ {label: 'Redo', icon: 'fa fa-fw fa-mail-reply'}
]
},
{
label: 'Help',
- icon: 'fa-question',
+ icon: 'fa fa-fw fa-question',
items: [
{
label: 'Contents'
},
{
label: 'Search',
- icon: 'fa-search',
+ icon: 'fa fa-fw fa-search',
items: [
{
label: 'Text',
@@ -442,28 +442,28 @@ export class SlideMenuDemo extends Component {
},
{
label: 'Actions',
- icon: 'fa-gear',
+ icon: 'fa fa-fw fa-gear',
items: [
{
label: 'Edit',
- icon: 'fa-refresh',
+ icon: 'fa fa-fw fa-refresh',
items: [
- {label: 'Save', icon: 'fa-save'},
- {label: 'Update', icon: 'fa-save'},
+ {label: 'Save', icon: 'fa fa-fw fa-save'},
+ {label: 'Update', icon: 'fa fa-fw fa-save'},
]
},
{
label: 'Other',
- icon: 'fa-phone',
+ icon: 'fa fa-fw fa-phone',
items: [
- {label: 'Delete', icon: 'fa-minus'}
+ {label: 'Delete', icon: 'fa fa-fw fa-minus'}
]
}
]
},
{separator: true},
{
- label: 'Quit', icon: 'fa-minus'
+ label: 'Quit', icon: 'fa fa-fw fa-minus'
}
];
@@ -482,7 +482,7 @@ export class SlideMenuDemo extends Component {
this.menu = el} model={this.items} popup={true}>
-
+
)
diff --git a/src/showcase/slider/SliderDemo.js b/src/showcase/slider/SliderDemo.js
index 4eab41a894..50a24299a0 100644
--- a/src/showcase/slider/SliderDemo.js
+++ b/src/showcase/slider/SliderDemo.js
@@ -158,7 +158,13 @@ onChangeSlider1(e) {
this.setState({ selectedCar: car, visible: true })} style={{ cursor: 'pointer', float: 'left', marginTop: '40px' }}>
+ this.setState({ selectedCar: car, visible: true })} style={{ cursor: 'pointer', float: 'left', marginTop: '40px' }}>
@@ -70,7 +70,7 @@ export class DataScrollerLoaderDemo extends Component {
Popup
Popup
Basic
-Severities
-SplitButton has a default command button and a collection of menuitems to be displayed in an overlay.
Basic
-Severities
-
@@ -69,11 +69,11 @@ import {TabMenu} from 'primereact/components/tabmenu/TabMenu';
{`
var items=[
- {label: 'Stats', icon: 'fa-bar-chart'},
- {label: 'Calendar', icon: 'fa-calendar'},
- {label: 'Documentation', icon: 'fa-book'},
- {label: 'Support', icon: 'fa-support'},
- {label: 'Social', icon: 'fa-twitter'}
+ {label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
+ {label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
+ {label: 'Documentation', icon: 'fa fa-fw fa-book'},
+ {label: 'Support', icon: 'fa fa-fw fa-support'},
+ {label: 'Social', icon: 'fa fa-fw fa-twitter'}
];
`}
@@ -191,11 +191,11 @@ export class TabMenuDemo extends Component {
render() {
var items=[
- {label: 'Stats', icon: 'fa-bar-chart'},
- {label: 'Calendar', icon: 'fa-calendar'},
- {label: 'Documentation', icon: 'fa-book'},
- {label: 'Support', icon: 'fa-support'},
- {label: 'Social', icon: 'fa-twitter'}
+ {label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
+ {label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
+ {label: 'Documentation', icon: 'fa fa-fw fa-book'},
+ {label: 'Support', icon: 'fa fa-fw fa-support'},
+ {label: 'Social', icon: 'fa fa-fw fa-twitter'}
];
return (
diff --git a/src/showcase/tabview/TabViewDemo.js b/src/showcase/tabview/TabViewDemo.js
index 8f31a6064c..a6c0c0a706 100644
--- a/src/showcase/tabview/TabViewDemo.js
+++ b/src/showcase/tabview/TabViewDemo.js
@@ -17,21 +17,21 @@ export class TabViewDemo extends Component {
-
+
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughters wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his fathers business.
Through Michaels life the nature of the family business becomes clear. The business of the family is just like the head
of the family, kind and benevolent to those who give respect,
but given to ruthless violence whenever anything stands against the good of the family.
-
+
Francis Ford Coppolas legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young
Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfathers depiction of the dark side of
the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy, killing the local Black Hand
Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows.
-
+
After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this
third and final story of the fictional Corleone crime family. Two decades have passed, and crime kingpin Michael Corleone,
now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate.
@@ -71,21 +71,21 @@ import {TabView,TabPanel} from 'primereact/components/tabview/TabView';
{`
-
+
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughters wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his fathers business.
Through Michaels life the nature of the family business becomes clear. The business of the family is just like the head
of the family, kind and benevolent to those who give respect,
but given to ruthless violence whenever anything stands against the good of the family.
-
+
Francis Ford Coppolas legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young
Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfathers depiction of the dark side of
the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy, killing the local Black Hand
Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows.
-
+
After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this
third and final story of the fictional Corleone crime family. Two decades have passed, and crime kingpin Michael Corleone,
now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate.
@@ -283,21 +283,21 @@ export class TabViewDemo extends Component {
-
+
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughters wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his fathers business.
Through Michaels life the nature of the family business becomes clear. The business of the family is just like the head
of the family, kind and benevolent to those who give respect,
but given to ruthless violence whenever anything stands against the good of the family.
-
+
Francis Ford Coppolas legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young
Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfathers depiction of the dark side of
the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy, killing the local Black Hand
Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows.
-
+
After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this
third and final story of the fictional Corleone crime family. Two decades have passed, and crime kingpin Michael Corleone,
now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate.
diff --git a/src/showcase/tieredmenu/TieredMenuDemo.js b/src/showcase/tieredmenu/TieredMenuDemo.js
index 659eab8f00..dd592b9535 100644
--- a/src/showcase/tieredmenu/TieredMenuDemo.js
+++ b/src/showcase/tieredmenu/TieredMenuDemo.js
@@ -15,10 +15,10 @@ export class TieredMenuDemo extends Component {
render() {
var items=[ {
label: 'File',
- icon: 'fa-file-o',
+ icon: 'fa fa-fw fa-file-o',
items: [{
label: 'New',
- icon: 'fa-plus',
+ icon: 'fa fa-fw fa-plus',
items: [
{label: 'Project'},
{label: 'Other'},
@@ -31,22 +31,22 @@ export class TieredMenuDemo extends Component {
},
{
label: 'Edit',
- icon: 'fa-edit',
+ icon: 'fa fa-fw fa-edit',
items: [
- {label: 'Undo', icon: 'fa-mail-forward'},
- {label: 'Redo', icon: 'fa-mail-reply'}
+ {label: 'Undo', icon: 'fa fa-fw fa-mail-forward'},
+ {label: 'Redo', icon: 'fa fa-fw fa-mail-reply'}
]
},
{
label: 'Help',
- icon: 'fa-question',
+ icon: 'fa fa-fw fa-question',
items: [
{
label: 'Contents'
},
{
label: 'Search',
- icon: 'fa-search',
+ icon: 'fa fa-fw fa-search',
items: [
{
label: 'Text',
@@ -64,28 +64,28 @@ export class TieredMenuDemo extends Component {
},
{
label: 'Actions',
- icon: 'fa-gear',
+ icon: 'fa fa-fw fa-gear',
items: [
{
label: 'Edit',
- icon: 'fa-refresh',
+ icon: 'fa fa-fw fa-refresh',
items: [
- {label: 'Save', icon: 'fa-save'},
- {label: 'Update', icon: 'fa-save'},
+ {label: 'Save', icon: 'fa fa-fw fa-save'},
+ {label: 'Update', icon: 'fa fa-fw fa-save'},
]
},
{
label: 'Other',
- icon: 'fa-phone',
+ icon: 'fa fa-fw fa-phone',
items: [
- {label: 'Delete', icon: 'fa-minus'}
+ {label: 'Delete', icon: 'fa fa-fw fa-minus'}
]
}
]
},
{separator:true},
{
- label: 'Quit', icon: 'fa-minus'
+ label: 'Quit', icon: 'fa fa-fw fa-minus'
}];
return (
@@ -101,7 +101,7 @@ render() {
{`
-
`}
@@ -263,7 +263,7 @@ export class ToggleButtonDemo extends Component {
diff --git a/src/showcase/toolbar/ToolbarDemo.js b/src/showcase/toolbar/ToolbarDemo.js
index 077380d382..7c3e8147c8 100644
--- a/src/showcase/toolbar/ToolbarDemo.js
+++ b/src/showcase/toolbar/ToolbarDemo.js
@@ -24,16 +24,16 @@ export class ToolbarDemo extends Component {
@@ -69,16 +69,16 @@ import {Toolbar} from 'primereact/components/toolbar/Toolbar';
{`
@@ -174,16 +174,16 @@ export class ToolbarDemo extends Component {
diff --git a/src/showcase/tree/TreeDemo.js b/src/showcase/tree/TreeDemo.js
index 974d5975ed..29e8d13cfe 100644
--- a/src/showcase/tree/TreeDemo.js
+++ b/src/showcase/tree/TreeDemo.js
@@ -31,47 +31,47 @@ export class TreeDemo extends Component {
{
"label": "Documents",
"data": "Documents Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
"children": [{
"label": "Work",
"data": "Work Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
- "children": [{ "label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document" }, { "label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document" }]
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
+ "children": [{ "label": "Expenses.doc", "icon": "fa fa-fw fa-file-word-o", "data": "Expenses Document" }, { "label": "Resume.doc", "icon": "fa fa-fw fa-file-word-o", "data": "Resume Document" }]
},
{
"label": "Home",
"data": "Home Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
- "children": [{ "label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month" }]
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
+ "children": [{ "label": "Invoices.txt", "icon": "fa fa-fw fa-file-word-o", "data": "Invoices for this month" }]
}]
},
{
"label": "Pictures",
"data": "Pictures Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
"children": [
- { "label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo" },
- { "label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo" },
- { "label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo" }]
+ { "label": "barcelona.jpg", "icon": "fa fa-fw fa-file-image-o", "data": "Barcelona Photo" },
+ { "label": "logo.jpg", "icon": "fa fa-fw fa-file-image-o", "data": "PrimeFaces Logo" },
+ { "label": "primeui.png", "icon": "fa fa-fw fa-file-image-o", "data": "PrimeUI Logo" }]
},
{
"label": "Movies",
"data": "Movies Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
"children": [{
"label": "Al Pacino",
"data": "Pacino Movies",
- "children": [{ "label": "Scarface", "icon": "fa-file-video-o", "data": "Scarface Movie" }, { "label": "Serpico", "icon": "fa-file-video-o", "data": "Serpico Movie" }]
+ "children": [{ "label": "Scarface", "icon": "fa fa-fw fa-file-video-o", "data": "Scarface Movie" }, { "label": "Serpico", "icon": "fa fa-fw fa-file-video-o", "data": "Serpico Movie" }]
},
{
"label": "Robert De Niro",
"data": "De Niro Movies",
- "children": [{ "label": "Goodfellas", "icon": "fa-file-video-o", "data": "Goodfellas Movie" }, { "label": "Untouchables", "icon": "fa-file-video-o", "data": "Untouchables Movie" }]
+ "children": [{ "label": "Goodfellas", "icon": "fa fa-fw fa-file-video-o", "data": "Goodfellas Movie" }, { "label": "Untouchables", "icon": "fa fa-fw fa-file-video-o", "data": "Untouchables Movie" }]
}]
}
];
@@ -261,47 +261,47 @@ render() {
{
"label": "Documents",
"data": "Documents Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
"children": [{
"label": "Work",
"data": "Work Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
- "children": [{ "label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document" }, { "label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document" }]
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
+ "children": [{ "label": "Expenses.doc", "icon": "fa fa-fw fa-file-word-o", "data": "Expenses Document" }, { "label": "Resume.doc", "icon": "fa fa-fw fa-file-word-o", "data": "Resume Document" }]
},
{
"label": "Home",
"data": "Home Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
- "children": [{ "label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month" }]
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
+ "children": [{ "label": "Invoices.txt", "icon": "fa fa-fw fa-file-word-o", "data": "Invoices for this month" }]
}]
},
{
"label": "Pictures",
"data": "Pictures Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
"children": [
- { "label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo" },
- { "label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo" },
- { "label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo" }]
+ { "label": "barcelona.jpg", "icon": "fa fa-fw fa-file-image-o", "data": "Barcelona Photo" },
+ { "label": "logo.jpg", "icon": "fa fa-fw fa-file-image-o", "data": "PrimeFaces Logo" },
+ { "label": "primeui.png", "icon": "fa fa-fw fa-file-image-o", "data": "PrimeUI Logo" }]
},
{
"label": "Movies",
"data": "Movies Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
"children": [{
"label": "Al Pacino",
"data": "Pacino Movies",
- "children": [{ "label": "Scarface", "icon": "fa-file-video-o", "data": "Scarface Movie" }, { "label": "Serpico", "icon": "fa-file-video-o", "data": "Serpico Movie" }]
+ "children": [{ "label": "Scarface", "icon": "fa fa-fw fa-file-video-o", "data": "Scarface Movie" }, { "label": "Serpico", "icon": "fa fa-fw fa-file-video-o", "data": "Serpico Movie" }]
},
{
"label": "Robert De Niro",
"data": "De Niro Movies",
- "children": [{ "label": "Goodfellas", "icon": "fa-file-video-o", "data": "Goodfellas Movie" }, { "label": "Untouchables", "icon": "fa-file-video-o", "data": "Untouchables Movie" }]
+ "children": [{ "label": "Goodfellas", "icon": "fa fa-fw fa-file-video-o", "data": "Goodfellas Movie" }, { "label": "Untouchables", "icon": "fa fa-fw fa-file-video-o", "data": "Untouchables Movie" }]
}]
}
];
@@ -545,47 +545,47 @@ export class TreeDemo extends Component {
{
"label": "Documents",
"data": "Documents Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
"children": [{
"label": "Work",
"data": "Work Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
- "children": [{ "label": "Expenses.doc", "icon": "fa-file-word-o", "data": "Expenses Document" }, { "label": "Resume.doc", "icon": "fa-file-word-o", "data": "Resume Document" }]
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
+ "children": [{ "label": "Expenses.doc", "icon": "fa fa-fw fa-file-word-o", "data": "Expenses Document" }, { "label": "Resume.doc", "icon": "fa fa-fw fa-file-word-o", "data": "Resume Document" }]
},
{
"label": "Home",
"data": "Home Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
- "children": [{ "label": "Invoices.txt", "icon": "fa-file-word-o", "data": "Invoices for this month" }]
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
+ "children": [{ "label": "Invoices.txt", "icon": "fa fa-fw fa-file-word-o", "data": "Invoices for this month" }]
}]
},
{
"label": "Pictures",
"data": "Pictures Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
"children": [
- { "label": "barcelona.jpg", "icon": "fa-file-image-o", "data": "Barcelona Photo" },
- { "label": "logo.jpg", "icon": "fa-file-image-o", "data": "PrimeFaces Logo" },
- { "label": "primeui.png", "icon": "fa-file-image-o", "data": "PrimeUI Logo" }]
+ { "label": "barcelona.jpg", "icon": "fa fa-fw fa-file-image-o", "data": "Barcelona Photo" },
+ { "label": "logo.jpg", "icon": "fa fa-fw fa-file-image-o", "data": "PrimeFaces Logo" },
+ { "label": "primeui.png", "icon": "fa fa-fw fa-file-image-o", "data": "PrimeUI Logo" }]
},
{
"label": "Movies",
"data": "Movies Folder",
- "expandedIcon": "fa-folder-open",
- "collapsedIcon": "fa-folder",
+ "expandedIcon": "fa fa-fw fa-folder-open",
+ "collapsedIcon": "fa fa-fw fa-folder",
"children": [{
"label": "Al Pacino",
"data": "Pacino Movies",
- "children": [{ "label": "Scarface", "icon": "fa-file-video-o", "data": "Scarface Movie" }, { "label": "Serpico", "icon": "fa-file-video-o", "data": "Serpico Movie" }]
+ "children": [{ "label": "Scarface", "icon": "fa fa-fw fa-file-video-o", "data": "Scarface Movie" }, { "label": "Serpico", "icon": "fa fa-fw fa-file-video-o", "data": "Serpico Movie" }]
},
{
"label": "Robert De Niro",
"data": "De Niro Movies",
- "children": [{ "label": "Goodfellas", "icon": "fa-file-video-o", "data": "Goodfellas Movie" }, { "label": "Untouchables", "icon": "fa-file-video-o", "data": "Untouchables Movie" }]
+ "children": [{ "label": "Goodfellas", "icon": "fa fa-fw fa-file-video-o", "data": "Goodfellas Movie" }, { "label": "Untouchables", "icon": "fa fa-fw fa-file-video-o", "data": "Untouchables Movie" }]
}]
}
];
diff --git a/src/showcase/treetable/TreeTableDemo.js b/src/showcase/treetable/TreeTableDemo.js
index 5ad222411c..0383245452 100644
--- a/src/showcase/treetable/TreeTableDemo.js
+++ b/src/showcase/treetable/TreeTableDemo.js
@@ -1,6 +1,8 @@
import React, { Component } from 'react';
import { TreeTable } from '../../components/treetable/TreeTable';
-import {Column} from "../../components/column/Column";
+import { Column } from "../../components/column/Column";
+import { NodeService } from '../service/NodeService';
+import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
import { TabView, TabPanel } from '../../components/tabview/TabView';
import { CodeHighlight } from '../codehighlight/CodeHighlight';
@@ -8,105 +10,20 @@ export class TreeTableDemo extends Component {
constructor(props) {
super(props);
- this.state = { selectedFile: null, selectedFiles1: [], selectedFiles2: [] };
- }
-
- onSelectionChange(e) {
- this.setState({ selectedFile: e.selection });
- }
+ this.state = { data: [] };
- onMultiMetaKeySelectionChange(e) {
- this.setState({ selectedFiles1: e.selection });
+ this.nodeservice = new NodeService();
}
- onCheckboxSelectionChange(e) {
- this.setState({ selectedFiles2: e.selection });
+ componentDidMount() {
+ this.nodeservice.getNodes().then(data => this.setState({data: data}));
}
render() {
- var data = [
- {
- "data": {
- "name": "Documents",
- "size": "75kb",
- "type": "Folder"
- },
- "children": [
- {
- "data": {
- "name": "Work",
- "size": "55kb",
- "type": "Folder"
- },
- "children": [
- {
- "data": {
- "name": "Expenses.doc",
- "size": "30kb",
- "type": "Document"
- }
- },
- {
- "data": {
- "name": "Resume.doc",
- "size": "25kb",
- "type": "Resume"
- }
- }
- ]
- },
- {
- "data": {
- "name": "Home",
- "size": "20kb",
- "type": "Folder"
- },
- "children": [
- {
- "data": {
- "name": "Invoices",
- "size": "20kb",
- "type": "Text"
- }
- }
- ]
- }
- ]
- },
- {
- "data": {
- "name": "Pictures",
- "size": "150kb",
- "type": "Folder"
- },
- "children": [
- {
- "data": {
- "name": "barcelona.jpg",
- "size": "90kb",
- "type": "Picture"
- }
- },
- {
- "data": {
- "name": "primeui.png",
- "size": "30kb",
- "type": "Picture"
- }
- },
- {
- "data": {
- "name": "optimus.jpg",
- "size": "30kb",
- "type": "Picture"
- }
- }
- ]
- }
- ];
-
return (
@@ -101,7 +101,7 @@ export class TieredMenuDemo extends Component {
this.menu=el}/>
-
Popup
@@ -361,7 +361,7 @@ export class TieredMenuDemo extends Component {
this.menu=el}/>
-
Popup
Selected Value: {this.state.checked1 ? 'true' : 'false'}
Custom
-Selected Value: {this.state.checked2 ? 'true' : 'false'}
Icons and Labels can be customized using onLabel, offLabel, onIcon and OffIcon attributes.
Selected Value: {this.state.checked1 ? 'true' : 'false'}
Custom
-Selected Value: {this.state.checked2 ? 'true' : 'false'}
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-{`
+
+ {`
import {TreeTable} from 'primereact/components/treetable/TreeTable';
`}
-
+
-
-{`
+
+ {`
+
-
-{`
+
+ {`
render() {
var data = [
@@ -360,7 +239,7 @@ render() {
}
`}
-
+
null
Style class of the column.
TreeTable
@@ -116,49 +33,11 @@ export class TreeTableDemo extends Component {Basic
-Single Selection
-Selected Node: {this.state.selectedFile && this.state.selectedFile.data.name}
-
- Multiple Selection with Metakey
-
- Selected Nodes:
- {
- this.state.selectedFiles1.map((obj, i) => {
- return {i !== 0 ? "," : ""} {obj.data.name}
- })
- }
-
-
- Multiple Selection with Checkbox
-
- Selected Nodes:
- {
- this.state.selectedFiles2.map((obj, i) => {
- return {i !== 0 ? "," : ""} {obj.data.name}
- })
- }
-
Import
-Getting Started
TreeTable component requires an array of TreeNode objects as its value. TreeTable requires a value, selectionChange callback(for selectable TreeTable).
@@ -264,15 +143,15 @@ import {TreeTable} from 'primereact/components/treetable/TreeTable';Column Component
TreeTable utilizes the following options defined by a column component.
@@ -406,23 +285,35 @@ render() {Properties
@@ -503,6 +394,30 @@ import {Column} from 'primereact/components/column/Column';
null
Label of footer.
+
+ sortMode
+ string
+ single
+ Defines whether sorting works on single column or on multiple columns.
+
+
+ sortField
+ string
+ null
+ Name of the field to sort data by default.
+
+
+ sortOrder
+ number
+ 1
+ Order to sort when default sorting is enabled.
+
+
+ multiSortMeta
+ array
+ null
+ An array of SortMeta objects to sort the data by default in multiple sort mode.
+
@@ -549,6 +464,13 @@ import {Column} from 'primereact/components/column/Column';
TreeTable requires selectionChange callback (for selectable TreeTable)
+ event.order: Sort order as 1 or -1
+ event.multisortmeta: Sort metadata in multi sort mode. See multiple sorting section for the structure of this object.
-
+
-
-
-
-
-
+
-
-
-
-
TreeTable
TreeTable is used to display hierarchical data in tabular format.
@@ -707,59 +548,22 @@ export class TreeTableDemo extends Component {Basic
-Single Selection
-Selected Node: {this.state.selectedFile && this.state.selectedFile.data.name}
-
- Multiple Selection with Metakey
-
- Selected Nodes:
- {
- this.state.selectedFiles1.map((obj, i) => {
- return {i !== 0 ? "," : ""} {obj.data.name}
- })
- }
-
- Multiple Selection with Checkbox
-
- Selected Nodes:
- {
- this.state.selectedFiles2.map((obj, i) => {
- return {i !== 0 ? "," : ""} {obj.data.name}
- })
- }
-
+
+ )
+ }
+}
+
+export class TreeTableSelectionDoc extends Component {
+
+ shouldComponentUpdate() {
+ return false;
+ }
+
+ render() {
+ return (
+
+
+
+
+
+ TreeTable - Selection
+TreeTable provides single and multiple selection modes on click of a row. + Selected rows are bound to the selection property and onNodeSelect-onNodeUnselect events are provided as optional callbacks. + In addition built-in checkbox based selection is available as alternative.
+
+
+
+
+
+
+
+
+
+
+ Single Selection
+Selected Node: {this.state.selectedFile && this.state.selectedFile.data.name}
+
+ Multiple Selection with Metakey
+
+ Selected Nodes:
+ {
+ this.state.selectedFiles1.map((obj, i) => {
+ return {i !== 0 ? "," : ""} {obj.data.name}
+ })
+ }
+
+
+ Multiple Selection with Checkbox
+
+ Selected Nodes:
+ {
+ this.state.selectedFiles2.map((obj, i) => {
+ return {i !== 0 ? "," : ""} {obj.data.name}
+ })
+ }
+
+
+
+
+
+ {`
+import React, { Component } from 'react';
+import { TreeTable } from '../../components/treetable/TreeTable';
+import { Column } from "../../components/column/Column";
+import { NodeService } from '../service/NodeService';
+import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
+
+export class TreeTableSelectionDemo extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = { data1: [], data2: [], data3: [], selectedFile: null, selectedFiles1: [], selectedFiles2: [] };
+
+ this.nodeservice = new NodeService();
+
+ this.onSelectionChange = this.onSelectionChange.bind(this);
+ this.onMultiMetaKeySelectionChange = this.onMultiMetaKeySelectionChange.bind(this);
+ this.onCheckboxSelectionChange = this.onCheckboxSelectionChange.bind(this);
+ }
+
+ onSelectionChange(e) {
+ this.setState({ selectedFile: e.selection });
+ }
+
+ onMultiMetaKeySelectionChange(e) {
+ this.setState({ selectedFiles1: e.selection });
+ }
+
+ onCheckboxSelectionChange(e) {
+ this.setState({ selectedFiles2: e.selection });
+ }
+
+ componentDidMount() {
+ this.nodeservice.getNodes().then(data => this.setState({data1: data}));
+ this.nodeservice.getNodes().then(data => this.setState({data2: data}));
+ this.nodeservice.getNodes().then(data => this.setState({data3: data}));
+ }
+
+ render() {
+ return (
+
+
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/src/showcase/treetable/TreeTableSortDemo.js b/src/showcase/treetable/TreeTableSortDemo.js
new file mode 100644
index 0000000000..c0fa8bd951
--- /dev/null
+++ b/src/showcase/treetable/TreeTableSortDemo.js
@@ -0,0 +1,187 @@
+import React, { Component } from 'react';
+import { TreeTable } from '../../components/treetable/TreeTable';
+import { Column } from '../../components/column/Column';
+import { NodeService } from '../service/NodeService';
+import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
+import { TabView, TabPanel } from '../../components/tabview/TabView';
+import { CodeHighlight } from '../codehighlight/CodeHighlight';
+
+export class TreeTableSortDemo extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = { data: [], data2: [] };
+
+ this.nodeservice = new NodeService();
+ }
+
+ componentDidMount() {
+ //Single Sort
+ this.nodeservice.getNodes().then(data => this.setState({ data: data }));
+
+ //Multiple Sort
+ this.nodeservice.getNodes().then(data => {
+ let _data = [...data];
+ _data[0].children[0].children.push({
+ "data": {
+ "name": "Expenses.doc",
+ "size": "40kb",
+ "type": "Document - 2"
+ }
+ });
+ _data[0].children[1].children.push({
+ "data": {
+ "name": "Invoices",
+ "size": "2kb",
+ "type": "Text - 2"
+ }
+ });
+ _data[0].children[1].children.push({
+ "data": {
+ "name": "Invoices",
+ "size": "20kb",
+ "type": "Text - 3"
+ }
+ });
+ this.setState({ data2: _data })
+ });
+ }
+
+ render() {
+ return (
+
+
+ )
+ }
+}
+
+`}
+
+
+
+
+
+ TreeTable
+TreeTable is used to display hierarchical data in tabular format.
+
+
+
+
+
+
+
+
+
+
+ Single Selection
+Selected Node: {this.state.selectedFile && this.state.selectedFile.data.name}
+
+ Multiple Selection with Metakey
+
+ Selected Nodes:
+ {
+ this.state.selectedFiles1.map((obj, i) => {
+ return {i !== 0 ? "," : ""} {obj.data.name}
+ })
+ }
+
+
+ Multiple Selection with Checkbox
+
+ Selected Nodes:
+ {
+ this.state.selectedFiles2.map((obj, i) => {
+ return {i !== 0 ? "," : ""} {obj.data.name}
+ })
+ }
+
+
+
+ );
+ }
+}
+
+export class TreeTableSortDemoDoc extends Component {
+
+ shouldComponentUpdate() {
+ return false;
+ }
+
+ render() {
+ return (
+
+
+
+
+
+ TreeTable - Sort
+Enabling sortable property on a column is enough to make a column sortable. Multiple column sorting is enabled using sortMode property and + used with metaKey.
+
+
+
+
+
+
+
+
+ Single Column
+Multiple Columns
+
+
+
+
+ {`
+import React, { Component } from 'react';
+import { TreeTable } from '../../components/treetable/TreeTable';
+import { Column } from '../../components/column/Column';
+import { NodeService } from '../service/NodeService';
+import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
+
+export class TreeTableSortDemo extends Component {
+
+ constructor(props) {
+ super(props);
+ this.state = { data: [], data2: [] };
+
+ this.nodeservice = new NodeService();
+ }
+
+ componentDidMount() {
+ //Single Sort
+ this.nodeservice.getNodes().then(data => this.setState({ data: data }));
+
+ //Multiple Sort
+ this.nodeservice.getNodes().then(data => {
+ let _data = [...data];
+ _data[0].children[0].children.push({
+ "data": {
+ "name": "Expenses.doc",
+ "size": "40kb",
+ "type": "Document - 2"
+ }
+ });
+ _data[0].children[1].children.push({
+ "data": {
+ "name": "Invoices",
+ "size": "2kb",
+ "type": "Text - 2"
+ }
+ });
+ _data[0].children[1].children.push({
+ "data": {
+ "name": "Invoices",
+ "size": "20kb",
+ "type": "Text - 3"
+ }
+ });
+ this.setState({ data2: _data })
+ });
+ }
+
+ render() {
+ return (
+
+
+
+
+ )
+ }
+}
diff --git a/src/showcase/treetable/TreeTableSubmenu.js b/src/showcase/treetable/TreeTableSubmenu.js
new file mode 100644
index 0000000000..09353d43d6
--- /dev/null
+++ b/src/showcase/treetable/TreeTableSubmenu.js
@@ -0,0 +1,17 @@
+import React, {Component} from 'react';
+import {Link} from 'react-router-dom';
+
+export class TreeTableSubmenu extends Component {
+
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+`}
+
+
+
+
+
+ TreeTable - Sort
+Enabling sortable property on a column is enough to make a column sortable. Multiple column sorting is enabled using sortMode property and + used with metaKey.
+
+
+
+
+
+
+
+
+ Single Column
+Multiple Columns
+
+
+ );
+ }
+}
\ No newline at end of file
-
+
- ● Basic +
- ● Selection +
- ● Sort +