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 getSelectedIds from 'Utilities/Table/getSelectedIds'; 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 = getSelectedIds(prevState.selectedState, { parseIds: false }).sort(); const newSelected = this.getSelectedIds().sort(); if (!_.isEqual(oldSelected, newSelected)) { onChange({ name, value: newSelected }); } } // // Control getSelectedIds = () => { return getSelectedIds(this.state.selectedState, { parseIds: false }); }; // // 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 (