Spaces:
Running
Running
File size: 2,512 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 |
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {FormattedMessage} from 'react-intl';
import styles from './monitor.css';
import ListMonitorScroller from './list-monitor-scroller.jsx';
const ListMonitor = ({draggable, label, width, height, value, onResizeMouseDown, onAdd, ...rowProps}) => (
<div
className={styles.listMonitor}
style={{
width: `${width}px`,
height: `${height}px`
}}
>
<div className={styles.listHeader}>
{label}
</div>
<div className={styles.listBody}>
<ListMonitorScroller
draggable={draggable}
height={height}
values={value}
width={width}
{...rowProps}
/>
</div>
<div className={styles.listFooter}>
<div
className={classNames(draggable ? styles.addButton : null, 'no-drag')}
onClick={draggable ? onAdd : null}
>
{'+' /* TODO waiting on asset */}
</div>
<div className={styles.footerLength}>
<FormattedMessage
defaultMessage="length {length}"
description="Length label on list monitors. DO NOT translate {length} (with brackets)."
id="gui.monitor.listMonitor.listLength"
values={{
length: value.length
}}
/>
</div>
<div
className={classNames(draggable ? styles.resizeHandle : null, 'no-drag')}
onMouseDown={draggable ? onResizeMouseDown : null}
>
{'=' /* TODO waiting on asset */}
</div>
</div>
</div>
);
ListMonitor.propTypes = {
activeIndex: PropTypes.number,
categoryColor: PropTypes.string.isRequired,
draggable: PropTypes.bool.isRequired,
height: PropTypes.number,
label: PropTypes.string.isRequired,
onActivate: PropTypes.func,
onAdd: PropTypes.func,
onResizeMouseDown: PropTypes.func,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.arrayOf(PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]))
]),
width: PropTypes.number
};
ListMonitor.defaultProps = {
width: 110,
height: 200
};
export default ListMonitor;
|