Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Implement sort with react-sortable-hoc

pull/3180/head
ebb-tide 2018-04-04 20:45:36 -07:00
parent b127d2d96a
commit fe8787145c
4 changed files with 88 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/package.json
View File

@ -140,6 +140,7 @@
"react-resizable": "^1.7.5",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"react-sortable-hoc": "^0.6.8",
"react-tooltip": "^3.2.1",
"react-virtualized": "^9.18.5",
"redux": "^3.3.1",

2
ui/src/dashboards/components/GraphOptionsCustomizableField.tsx
View File

@ -12,7 +12,7 @@ interface Props {
internalName: string
displayName: string
visible: boolean
onFieldUpdate: (field: Field) => void
onFieldUpdate?: (field: Field) => void
}
class GraphOptionsCustomizableField extends PureComponent<Props, {}> {

86
ui/src/dashboards/components/GraphOptionsCustomizeFields.tsx
View File

@ -1,8 +1,9 @@
import React, {SFC} from 'react'
import React, {PureComponent} from 'react'
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
import GraphOptionsCustomizableField from 'src/dashboards/components/GraphOptionsCustomizableField'
import uuid from 'uuid'
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc'
interface Field {
internalName: string
@ -14,30 +15,77 @@ interface Props {
fields: Field[]
onFieldUpdate: (field: Field) => void
}
interface State {
items: Field[]
}
const GraphOptionsCustomizeFields: SFC<Props> = ({fields, onFieldUpdate}) => {
const SortableItem = SortableElement(({value, onFieldUpdate}) => (
<li>
<GraphOptionsCustomizableField
internalName={value.internalName}
displayName={value.displayName}
visible={value.visible}
onFieldUpdate={onFieldUpdate}
/>
</li>
))
const SortableList = SortableContainer(({items, onFieldUpdate}) => {
return (
<ul>
{items.map((value, index) => (
<SortableItem
key={`item-${index}`}
index={index}
value={value}
onFieldUpdate={onFieldUpdate}
/>
))}
</ul>
)
})
export default class GraphOptionsCustomizeFields extends PureComponent<
Props,
State
> {
constructor(props) {
super(props)
this.state = {
items: this.props.fields,
}
}
onSortEnd = ({oldIndex, newIndex}) => {
this.setState({
items: arrayMove(this.state.items, oldIndex, newIndex),
})
}
componentWillReceiveProps(nextProps) {
if (nextProps.fields == this.props.fields) {
return
}
this.setState({items: nextProps.fields})
}
public render() {
const {items} = this.state
const {onFieldUpdate} = this.props
console.log('items', items)
return (
<div className="graph-options-group">
<label className="form-label">Customize Fields</label>
<FancyScrollbar
className="customize-fields"
maxHeight={225}
autoHeight={true}
>
{fields.map(field => {
return (
<GraphOptionsCustomizableField
key={uuid.v4()}
internalName={field.internalName}
displayName={field.displayName}
visible={field.visible}
<SortableList
items={items}
onSortEnd={this.onSortEnd}
onFieldUpdate={onFieldUpdate}
/>
)
})}
</FancyScrollbar>
</div>
)
}
export default GraphOptionsCustomizeFields
}
// <FancyScrollbar
// className="customize-fields"
// maxHeight={225}
// autoHeight={true}
// >
// </FancyScrollbar>

15
ui/yarn.lock
View File

@ -1160,7 +1160,7 @@ babel-register@6.26.0, babel-register@^6.26.0:
mkdirp "^0.5.1"
source-map-support "^0.4.15"
babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0, babel-runtime@^6.9.2:
babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0, babel-runtime@^6.5.0, babel-runtime@^6.9.2:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
dependencies:
@ -5349,7 +5349,7 @@ lodash@4.17.4:
version "4.17.4"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
lodash@^4.0.0, lodash@^4.1.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@~4.17.4:
lodash@^4.0.0, lodash@^4.1.0, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@~4.17.4:
version "4.17.5"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
@ -6822,7 +6822,7 @@ prop-types@15.5.8:
dependencies:
fbjs "^0.8.9"
prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.6.0, prop-types@^15.6.1:
prop-types@15.x, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.1:
version "15.6.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
dependencies:
@ -7090,6 +7090,15 @@ react-router@^3.0.2:
prop-types "^15.5.6"
warning "^3.0.0"
react-sortable-hoc@^0.6.8:
version "0.6.8"
resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-0.6.8.tgz#b08562f570d7c41f6e393fca52879d2ebb9118e9"
dependencies:
babel-runtime "^6.11.6"
invariant "^2.2.1"
lodash "^4.12.0"
prop-types "^15.5.7"
react-test-renderer@^15.6.1:
version "15.6.2"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.6.2.tgz#d0333434fc2c438092696ca770da5ed48037efa8"