import _ from 'lodash'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; import LoadingIndicator from 'Components/Loading/LoadingIndicator'; import TableRowCell from 'Components/Table/Cells/TableRowCell'; import TableSelectCell from 'Components/Table/Cells/TableSelectCell'; import Table from 'Components/Table/Table'; import TableBody from 'Components/Table/TableBody'; import TableRow from 'Components/Table/TableRow'; import tagShape from 'Helpers/Props/Shapes/tagShape'; import translate from 'Utilities/String/translate'; import selectAll from 'Utilities/Table/selectAll'; import toggleSelected from 'Utilities/Table/toggleSelected'; import styles from './PlaylistInput.css'; const columns = [ { name: 'name', label: () => translate('Playlist'), isSortable: false, isVisible: true } ]; class PlaylistInput extends Component { // // Lifecycle constructor(props, context) { super(props, context); const initialSelection = _.mapValues(_.keyBy(props.value), () => true); this.state = { allSelected: false, allUnselected: false, selectedState: initialSelection }; } componentDidUpdate(prevProps, prevState) { const { name, onChange } = this.props; const oldSelected = _.reduce( prevState.selectedState, (result, value, id) => { if (value) { result.push(id); } return result; }, [] ).sort(); const newSelected = this.getSelectedIds().sort(); if (!_.isEqual(oldSelected, newSelected)) { onChange({ name, value: newSelected }); } } // // Control getSelectedIds = () => { return _.reduce( this.state.selectedState, (result, value, id) => { if (value) { result.push(id); } return result; }, [] ); }; // // Listeners onSelectAllChange = ({ value }) => { this.setState(selectAll(this.state.selectedState, value)); }; onSelectedChange = ({ id, value, shiftKey = false }) => { this.setState((state, props) => { return toggleSelected(state, props.items, id, value, shiftKey); }); }; // // Render render() { const { className, items, user, isFetching, isPopulated } = this.props; const { allSelected, allUnselected, selectedState } = this.state; return (