yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-28 23:57:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change input search user behaviour

Browse Source
This commit is contained in:
cyril lopez 2017-11-29 12:36:35 +01:00
parent f6d243a4df
commit 0af0b27456
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/index.js
View File

@ -6,7 +6,7 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { includes, isEmpty, map, toLower } from 'lodash';
import { findIndex, has, includes, isEmpty, map, toLower } from 'lodash';
import cn from 'classnames';
import PropTypes from 'prop-types';
@ -21,6 +21,7 @@ class InputSearch extends React.Component { // eslint-disable-line react/prefer-
isAdding: false,
users: this.props.values,
value: '',
autoFocus: false,
};
componentWillReceiveProps(nextProps) {
@ -59,7 +60,18 @@ class InputSearch extends React.Component { // eslint-disable-line react/prefer-
handleClick = (item) => {
if (this.state.isAdding) {
this.props.onClickAdd(item);
const id = has(item, '_id') ? '_id' : 'id';
const users = this.props.values;
// Check if user is already associated with this role
if (findIndex(this.props.values, [id, item[id]]) === -1) {
this.props.onClickAdd(item);
users.push(item);
}
// Reset the input focus
this.searchInput.focus();
// Empty the input and display users
this.setState({ value: '', isAdding: false, users, filteredUsers: users });
} else {
this.props.onClickDelete(item);
}
@ -83,6 +95,7 @@ class InputSearch extends React.Component { // eslint-disable-line react/prefer-
value={this.state.value}
placeholder={message}
type="text"
ref={(input) => { this.searchInput = input; }}
/>
)}
</FormattedMessage>

12
packages/strapi-plugin-users-permissions/admin/src/components/InputSearchLi/index.js
View File

@ -10,14 +10,22 @@ import styles from './styles.scss';
function InputSearchLi({ onClick, isAdding, item }) {
const icon = isAdding ? 'fa-plus' : 'fa-minus-circle';
const liStyle = isAdding ? { cursor: 'pointer' } : {};
const handleClick = isAdding ? () => onClick(item) : () => {};
return (
<li className={styles.li}>
<li className={styles.li} style={liStyle} onClick={handleClick}>
<div>
<div>
{item.username}
</div>
<div onClick={() => onClick(item)}>
<div
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
onClick(item);
}}
>
<i className={`fa ${icon}`} />
</div>
</div>