import classNames from 'classnames'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import CheckInput from 'Components/Form/CheckInput'; import TextInput from 'Components/Form/TextInput'; import Icon from 'Components/Icon'; import Label from 'Components/Label'; import IconButton from 'Components/Link/IconButton'; import { icons } from 'Helpers/Props'; import QualityProfileItemDragSource from './QualityProfileItemDragSource'; import styles from './QualityProfileItemGroup.css'; class QualityProfileItemGroup extends Component { // // Listeners onAllowedChange = ({ value }) => { const { groupId, onItemGroupAllowedChange } = this.props; onItemGroupAllowedChange(groupId, value); } onNameChange = ({ value }) => { const { groupId, onItemGroupNameChange } = this.props; onItemGroupNameChange(groupId, value); } onDeleteGroupPress = ({ value }) => { const { groupId, onDeleteGroupPress } = this.props; onDeleteGroupPress(groupId, value); } // // Render render() { const { editGroups, groupId, name, allowed, items, qualityIndex, isDragging, isDraggingUp, isDraggingDown, connectDragSource, onQualityProfileItemAllowedChange, onQualityProfileItemDragMove, onQualityProfileItemDragEnd } = this.props; return (
{ editGroups &&
} { !editGroups && } { connectDragSource(
) }
{ editGroups &&
{ items.map(({ quality }, index) => { return ( ); }).reverse() }
}
); } } QualityProfileItemGroup.propTypes = { editGroups: PropTypes.bool, groupId: PropTypes.number.isRequired, name: PropTypes.string.isRequired, allowed: PropTypes.bool.isRequired, items: PropTypes.arrayOf(PropTypes.object).isRequired, qualityIndex: PropTypes.string.isRequired, isDragging: PropTypes.bool.isRequired, isDraggingUp: PropTypes.bool.isRequired, isDraggingDown: PropTypes.bool.isRequired, connectDragSource: PropTypes.func, onItemGroupAllowedChange: PropTypes.func.isRequired, onQualityProfileItemAllowedChange: PropTypes.func.isRequired, onItemGroupNameChange: PropTypes.func.isRequired, onDeleteGroupPress: PropTypes.func.isRequired, onQualityProfileItemDragMove: PropTypes.func.isRequired, onQualityProfileItemDragEnd: PropTypes.func.isRequired }; QualityProfileItemGroup.defaultProps = { // The drag preview will not connect the drag handle. connectDragSource: (node) => node }; export default QualityProfileItemGroup;