Spaces:
Running
Running
File size: 2,342 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 |
import React from 'react';
import classNames from 'classnames';
import Box from '../box/box.jsx';
import Monitor from '../../containers/monitor.jsx';
import PropTypes from 'prop-types';
import {OrderedMap} from 'immutable';
import {stageSizeToTransform} from '../../lib/screen-utils';
import styles from './monitor-list.css';
let different = 0;
const MonitorList = props => (
<Box
// Use static `monitor-overlay` class for bounds of draggables
className={classNames(styles.monitorList, 'monitor-overlay')}
style={{
width: props.stageSize.width,
height: props.stageSize.height
}}
>
<Box
className={styles.monitorListScaler}
style={stageSizeToTransform(props.stageSize)}
>
{(props.monitors.valueSeq().filter(m => m.visible)
.map(monitorData => (
<Monitor
draggable={props.draggable}
height={monitorData.height}
id={monitorData.id}
isDiscrete={monitorData.isDiscrete}
key={monitorData.id}
max={monitorData.sliderMax}
min={monitorData.sliderMin}
mode={monitorData.mode}
opcode={monitorData.opcode}
params={monitorData.params}
spriteName={monitorData.spriteName}
targetId={monitorData.targetId}
value={monitorData.value}
width={monitorData.width}
x={monitorData.x}
y={monitorData.y}
onDragEnd={props.onMonitorChange}
needsUpdate={monitorData.value?._monitorUpToDate ? different : ++different}
/>
)))}
</Box>
</Box>
);
MonitorList.propTypes = {
draggable: PropTypes.bool.isRequired,
monitors: PropTypes.instanceOf(OrderedMap),
onMonitorChange: PropTypes.func.isRequired,
stageSize: PropTypes.shape({
width: PropTypes.number,
height: PropTypes.number,
widthDefault: PropTypes.number,
heightDefault: PropTypes.number
}).isRequired
};
export default MonitorList;
|