Progress
This commit is contained in:
@@ -6,7 +6,7 @@ import { removeFromListEditor, addToListEditor } from '../../../actions/lists';
|
||||
import { makeGetAccount } from '../../../selectors';
|
||||
import Avatar from '../../../components/avatar';
|
||||
import DisplayName from '../../../components/display_name';
|
||||
import IconButton from '../../../components/icon_button';
|
||||
import Button from '../../../components/button';
|
||||
|
||||
const messages = defineMessages({
|
||||
remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
|
||||
@@ -52,9 +52,9 @@ class Account extends ImmutablePureComponent {
|
||||
let button;
|
||||
|
||||
if (added) {
|
||||
button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
|
||||
button = <Button icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
|
||||
} else {
|
||||
button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
|
||||
button = <Button icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,22 +1,32 @@
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
import { setupListEditor, resetListEditor } from '../../actions/lists';
|
||||
import Account from './components/account';
|
||||
import ListEditorSearch from './components/list_editor_search';
|
||||
import EditListForm from './components/edit_list_form/edit_list_form';
|
||||
import IconButton from '../../components/icon_button';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import isObject from 'lodash.isobject'
|
||||
import { setupListEditor, resetListEditor } from '../../actions/lists'
|
||||
import Account from './components/account'
|
||||
import ListEditorSearch from './components/list_editor_search'
|
||||
import EditListForm from './components/edit_list_form/edit_list_form'
|
||||
import Button from '../../components/button'
|
||||
import Input from '../../components/input'
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
accountIds: state.getIn(['listEditor', 'accounts', 'items']),
|
||||
searchAccountIds: state.getIn(['listEditor', 'suggestions', 'items']),
|
||||
});
|
||||
const mapStateToProps = (state, { params }) => {
|
||||
|
||||
console.log("params:", params)
|
||||
|
||||
const listId = isObject(params) ? params['id'] : null
|
||||
|
||||
return {
|
||||
listId,
|
||||
title: state.getIn(['listEditor', 'title']),
|
||||
accountIds: state.getIn(['listEditor', 'accounts', 'items']),
|
||||
searchAccountIds: state.getIn(['listEditor', 'suggestions', 'items']),
|
||||
}
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
onInitialize: listId => dispatch(setupListEditor(listId)),
|
||||
onReset: () => dispatch(resetListEditor()),
|
||||
});
|
||||
})
|
||||
|
||||
const messages = defineMessages({
|
||||
close: { id: 'lightbox.close', defaultMessage: 'Close' },
|
||||
@@ -24,7 +34,8 @@ const messages = defineMessages({
|
||||
addToList: { id: 'lists.account.add', defaultMessage: 'Add to list' },
|
||||
removeFromList: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
|
||||
editList: { id: 'lists.edit', defaultMessage: 'Edit list' },
|
||||
});
|
||||
editListTitle: { id: 'lists.new.edit_title_placeholder', defaultMessage: 'Edit list title' },
|
||||
})
|
||||
|
||||
export default
|
||||
@connect(mapStateToProps, mapDispatchToProps)
|
||||
@@ -32,6 +43,7 @@ export default
|
||||
class ListEdit extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
title: PropTypes.string,
|
||||
listId: PropTypes.string.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
@@ -39,63 +51,79 @@ class ListEdit extends ImmutablePureComponent {
|
||||
onReset: PropTypes.func.isRequired,
|
||||
accountIds: ImmutablePropTypes.list.isRequired,
|
||||
searchAccountIds: ImmutablePropTypes.list.isRequired,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { onInitialize, listId } = this.props;
|
||||
if (listId) onInitialize(listId);
|
||||
const { onInitialize, listId } = this.props
|
||||
console.log("listId:", listId)
|
||||
if (listId) {
|
||||
onInitialize(listId)
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.props.onReset();
|
||||
this.props.onReset()
|
||||
}
|
||||
|
||||
onClickClose = () => {
|
||||
this.props.onClose('LIST_ADDER');
|
||||
};
|
||||
this.props.onClose('LIST_ADDER')
|
||||
}
|
||||
|
||||
render() {
|
||||
const { accountIds, searchAccountIds, intl } = this.props;
|
||||
const {
|
||||
title,
|
||||
accountIds,
|
||||
searchAccountIds,
|
||||
intl
|
||||
} = this.props
|
||||
|
||||
console.log("title:", title)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Input
|
||||
title={intl.formatMessage(messages.editList)}
|
||||
title={intl.formatMessage(messages.editListTitle)}
|
||||
placeholder='My new list title...'
|
||||
value={title}
|
||||
// onChange={onChange}
|
||||
// onSubmit={onSubmit}
|
||||
// disabled={disabled}
|
||||
/>
|
||||
|
||||
{
|
||||
/*
|
||||
<div className='compose-modal__header'>
|
||||
<h3 className='compose-modal__header__title'>
|
||||
{intl.formatMessage(messages.editList)}
|
||||
</h3>
|
||||
<Button className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
|
||||
</div>
|
||||
<div className='compose-modal__content'>
|
||||
<div className='list-editor'>
|
||||
<EditListForm />
|
||||
<br />
|
||||
|
||||
{
|
||||
accountIds.size > 0 &&
|
||||
<div>
|
||||
<div className='list-editor__accounts'>
|
||||
{accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<br />
|
||||
<ListEditorSearch />
|
||||
<div className='list-editor__accounts'>
|
||||
{searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*/ }
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
// return (
|
||||
// <div className='modal-root__modal compose-modal'>
|
||||
// <div className='compose-modal__header'>
|
||||
// <h3 className='compose-modal__header__title'>
|
||||
// {intl.formatMessage(messages.editList)}
|
||||
// </h3>
|
||||
// <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
|
||||
// </div>
|
||||
// <div className='compose-modal__content'>
|
||||
// <div className='list-editor'>
|
||||
// <EditListForm />
|
||||
// <br />
|
||||
|
||||
// {
|
||||
// accountIds.size > 0 &&
|
||||
// <div>
|
||||
// <div className='list-editor__accounts'>
|
||||
// {accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
|
||||
// </div>
|
||||
// </div>
|
||||
// }
|
||||
|
||||
// <br />
|
||||
// <ListEditorSearch />
|
||||
// <div className='list-editor__accounts'>
|
||||
// {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user