- {upButton}
- {topButton}
- {downButton}
- {bottomButton}
-
- );
-
- let listLength = this.props.value ? this.props.value.length: null;
- let header = this.props.header &&
- {controls}
- {content}
+
this.element = el} id={this.props.id} className={className} style={this.props.style}>
+
+ this.subList = el} value={this.props.value} selection={this.state.selection} onItemClick={this.onItemClick}
+ itemTemplate={this.props.itemTemplate} header={this.props.header} listStyle={this.props.listStyle}/>
);
}
diff --git a/src/components/orderlist/OrderListControls.js b/src/components/orderlist/OrderListControls.js
new file mode 100644
index 0000000000..11cfb437bc
--- /dev/null
+++ b/src/components/orderlist/OrderListControls.js
@@ -0,0 +1,150 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types';
+import { Button } from '../button/Button';
+import ObjectUtils from '../utils/ObjectUtils';
+
+export class OrderListControls extends Component {
+
+ static defaultProps = {
+ value: null,
+ selection: null,
+ onReorder: null
+ }
+
+ static propsTypes = {
+ value: PropTypes.array,
+ selection: PropTypes.array,
+ onReorder: PropTypes.func
+ }
+
+ constructor() {
+ super();
+ this.moveUp = this.moveUp.bind(this);
+ this.moveTop = this.moveTop.bind(this);
+ this.moveDown = this.moveDown.bind(this);
+ this.moveBottom = this.moveBottom.bind(this);
+ }
+
+ moveUp(event) {
+ if(this.props.selection) {
+ let value = [...this.props.value];
+
+ for (let i = 0; i < this.props.selection.length; i++) {
+ let selectedItem = this.props.selection[i];
+ let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
+
+ if(selectedItemIndex !== 0) {
+ let movedItem = value[selectedItemIndex];
+ let temp = value[selectedItemIndex - 1];
+ value[selectedItemIndex - 1] = movedItem;
+ value[selectedItemIndex] = temp;
+ }
+ else {
+ break;
+ }
+ }
+
+ if(this.props.onReorder) {
+ this.props.onReorder({
+ originalEvent: event,
+ value: value,
+ direction: 'up'
+ })
+ }
+ }
+ }
+
+ moveTop(event) {
+ if(this.props.selection) {
+ let value = [...this.props.value];
+
+ for (let i = 0; i < this.props.selection.length; i++) {
+ let selectedItem = this.props.selection[i];
+ let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
+
+ if (selectedItemIndex !== 0) {
+ let movedItem = value.splice(selectedItemIndex, 1)[0];
+ value.unshift(movedItem);
+ }
+ else {
+ break;
+ }
+ }
+
+ if(this.props.onReorder) {
+ this.props.onReorder({
+ originalEvent: event,
+ value: value,
+ direction: 'top'
+ })
+ }
+ }
+ }
+
+ moveDown(event) {
+ if(this.props.selection) {
+ let value = [...this.props.value];
+
+ for (let i = this.props.selection.length - 1; i >= 0; i--) {
+ let selectedItem = this.props.selection[i];
+ let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
+
+ if (selectedItemIndex !== (value.length - 1)) {
+ let movedItem = value[selectedItemIndex];
+ let temp = value[selectedItemIndex + 1];
+ value[selectedItemIndex + 1] = movedItem;
+ value[selectedItemIndex] = temp;
+ }
+ else {
+ break;
+ }
+ }
+
+ if(this.props.onReorder) {
+ this.props.onReorder({
+ originalEvent: event,
+ value: value,
+ direction: 'down'
+ })
+ }
+ }
+ }
+
+ moveBottom(event) {
+ if(this.props.selection) {
+ let value = [...this.props.value];
+
+ for (let i = this.props.selection.length - 1; i >= 0; i--) {
+ let selectedItem = this.props.selection[i];
+ let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
+
+ if (selectedItemIndex !== (value.length - 1)) {
+ let movedItem = value.splice(selectedItemIndex, 1)[0];
+ value.push(movedItem);
+ }
+ else {
+ break;
+ }
+ }
+
+ if(this.props.onReorder) {
+ this.props.onReorder({
+ originalEvent: event,
+ value: value,
+ direction: 'bottom'
+ })
+ }
+ }
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/components/orderlist/OrderListItem.js b/src/components/orderlist/OrderListItem.js
new file mode 100644
index 0000000000..174f9bef1b
--- /dev/null
+++ b/src/components/orderlist/OrderListItem.js
@@ -0,0 +1,48 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+export class OrderListItem extends Component {
+
+ static defaultProps = {
+ value: null,
+ className: null,
+ template: null,
+ selected: false,
+ index: null,
+ onClick: null
+ }
+
+ static propsTypes = {
+ value: PropTypes.any,
+ className: PropTypes.string,
+ template: PropTypes.func,
+ selected: PropTypes.bool,
+ index: PropTypes.number,
+ onClick: PropTypes.func
+ }
+
+ constructor() {
+ super();
+ this.onClick = this.onClick.bind(this);
+ }
+
+ onClick(event) {
+ if(this.props.onClick) {
+ this.props.onClick({
+ originalEvent: event,
+ value: this.props.value,
+ index: this.props.index
+ })
+ }
+ }
+
+ render() {
+ let content = this.props.template ? this.props.template(this.props.value) : this.props.value;
+ let className = classNames('ui-orderlist-item', this.props.className, {'ui-state-highlight': this.props.selected});
+
+ return
+ {content}
+ ;
+ }
+}
\ No newline at end of file
diff --git a/src/components/orderlist/OrderListSubList.js b/src/components/orderlist/OrderListSubList.js
new file mode 100644
index 0000000000..854f2c8837
--- /dev/null
+++ b/src/components/orderlist/OrderListSubList.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { OrderListItem } from './OrderListItem';
+import ObjectUtils from '../utils/ObjectUtils';
+
+export class OrderListSubList extends Component {
+
+ static defaultProps = {
+ value: null,
+ selection: null,
+ header: null,
+ listStyle: null,
+ itemTemplate: null,
+ onItemClick: null
+ }
+
+ static propsTypes = {
+ value: PropTypes.array,
+ selection: PropTypes.array,
+ header: PropTypes.string,
+ listStyle: PropTypes.object,
+ itemTemplate: PropTypes.func,
+ onItemClick: PropTypes.func
+ }
+
+ isSelected(item) {
+ return ObjectUtils.findIndexInList(item, this.props.selection) !== -1;
+ }
+
+ render() {
+ let header = null;
+ let items = null;
+ let listClassName = classNames('ui-widget-content ui-orderlist-list', {'ui-corner-bottom': this.props.header, 'ui-corner-all': !this.props.header});
+
+ if (this.props.header) {
+ header =
{this.props.header}
+ }
+
+ if (this.props.value) {
+ items = this.props.value.map((item, i) => {
+ return
+ });
+ }
+
+ return (
+
+ {header}
+
this.listElement = el} className={listClassName} style={this.props.listStyle}>
+ {items}
+
+
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/showcase/orderlist/OrderListDemo.js b/src/showcase/orderlist/OrderListDemo.js
index c8be562cd7..91de5bdc17 100644
--- a/src/showcase/orderlist/OrderListDemo.js
+++ b/src/showcase/orderlist/OrderListDemo.js
@@ -12,12 +12,9 @@ export class OrderListDemo extends Component {
this.state = {
cars: null
};
- this.carservice = new CarService();
- this.onCarsChange = this.onCarsChange.bind(this);
- }
- onCarsChange(e) {
- this.setState({cars: e.value});
+ this.carservice = new CarService();
+ this.carTemplate = this.carTemplate.bind(this);
}
componentDidMount() {
@@ -46,8 +43,9 @@ export class OrderListDemo extends Component {