This commit is contained in:
mgabdev
2020-03-25 23:11:32 -04:00
parent 0f01c1bc97
commit 3d0a85cde4
68 changed files with 1206 additions and 1275 deletions

View File

@@ -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 (

View File

@@ -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>
// );
}
}