Spaces:
Running
Running
File size: 4,858 Bytes
6bcb42f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import bindAll from 'lodash.bindall';
import {FormattedMessage} from 'react-intl';
import styles from './monitor.css';
import {List} from 'react-virtualized';
import DOMElementRenderer from '../../containers/dom-element-renderer.jsx';
class ListMonitorScroller extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'rowRenderer',
'noRowsRenderer',
'handleEventFactory'
]);
}
handleEventFactory (index) {
return () => this.props.onActivate(index);
}
noRowsRenderer () {
return (
<div className={classNames(styles.listRow, styles.listEmpty)}>
<FormattedMessage
defaultMessage="(empty)"
description="Text shown on a list monitor when a list is empty"
id="gui.monitor.listMonitor.empty"
/>
</div>
);
}
rowRenderer ({index, key, style}) {
const item = this.props.values[index];
const renderedValue = item.toListItem
? item.toListItem()
: item.toMonitorContent
? item.toMonitorContent()
: item.toReporterContent
? item.toReporterContent()
: item;
const value = item.isHTML
? (<DOMElementRenderer domElement={renderedValue} />)
: String(item);
return (
<div
className={styles.listRow}
key={key}
style={style}
>
<div className={styles.listIndex}>{index + 1 /* one indexed */}</div>
<div
className={styles.listValue}
dataIndex={index}
style={{background: this.props.categoryColor}}
onClick={this.props.draggable ? this.handleEventFactory(index) : null}
>
{this.props.draggable && this.props.activeIndex === index ? (
<div className={styles.inputWrapper}>
<input
autoFocus
autoComplete={false}
className={classNames(styles.listInput, 'no-drag')}
spellCheck={false}
type="text"
value={this.props.activeValue}
onBlur={this.props.onDeactivate}
onChange={this.props.onInput}
onFocus={this.props.onFocus}
onKeyDown={this.props.onKeyPress} // key down to get ahead of blur
/>
<div
className={styles.removeButton}
onMouseDown={this.props.onRemove} // mousedown to get ahead of blur
>
{'✖︎'}
</div>
</div>
) : (
<div className={styles.valueInner}>{value}</div>
)}
</div>
</div>
);
}
render () {
const {height, values, width, activeIndex, activeValue} = this.props;
// Keep the active index in view if defined, else must be undefined for List component
const scrollToIndex = activeIndex === null ? undefined : activeIndex; /* eslint-disable-line no-undefined */
return (
<List
activeIndex={activeIndex}
activeValue={activeValue}
height={(height) - 42 /* Header/footer size, approx */}
noRowsRenderer={this.noRowsRenderer}
rowCount={values.length}
rowHeight={24 /* Row size is same for all rows */}
rowRenderer={this.rowRenderer}
scrollToIndex={scrollToIndex} /* eslint-disable-line no-undefined */
values={values}
width={width}
/>
);
}
}
ListMonitorScroller.propTypes = {
activeIndex: PropTypes.number,
activeValue: PropTypes.string,
categoryColor: PropTypes.string,
draggable: PropTypes.bool,
height: PropTypes.number,
onActivate: PropTypes.func,
onDeactivate: PropTypes.func,
onFocus: PropTypes.func,
onInput: PropTypes.func,
onKeyPress: PropTypes.func,
onRemove: PropTypes.func,
values: PropTypes.arrayOf(PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
])),
width: PropTypes.number
};
export default ListMonitorScroller;
|