tyler.durden/opensupports
1
0
Fork 0
mirror of https://github.com/opensupports/opensupports.git synced 2025-07-30 09:15:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added itemsSelectedList default

Browse Source
This commit is contained in:
LautaroCesso 2020-01-08 12:27:11 -03:00
parent 5705115f73
commit 6ff46163b3
5 changed files with 74 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/app/demo/components-demo-page.js
View File

@ -6,23 +6,30 @@ const _ = require('lodash');
class DemoPage extends React.Component { class DemoPage extends React.Component {
state = { state = {
selectedList: [] selectedList: [
{id: 47, name: 'asdasdasd', content: 'asdasdasd.', color: 'red'},
{id: 48, name: '123123123', content: '123123123.', color: 'blue'},
{id: 49, name: 'hola', content: 'hola', color: 'green'},
]
} }
render() { render() {
let itemsList = [ let itemsList = [
{id: 45, name: 'Lautaro', content: 'Lautaro.', color: 'red'}, {id: 45, name: 'Lautaro', content: 'Lautaro.', color: 'gray'},
{id: 46, name: 'dsafa', content: 'dsafa', color: 'red'}, {id: 46, name: 'dsafa', content: 'dsafa', color: 'black'},
{id: 47, name: 'asdasdasd', content: 'asdasdasd.', color: 'red'}, {id: 47, name: 'asdasdasd', content: 'asdasdasd.', color: 'red'},
{id: 48, name: '123123123', content: '123123123.', color: 'blue'}, {id: 48, name: '123123123', content: '123123123.', color: 'blue'},
{id: 49, name: 'hola', content: 'hola', color: 'green'}, {id: 49, name: 'hola', content: 'hola', color: 'green'},
]; ];
return ( return (
<AutocompleteDropDown <div>
<AutocompleteDropDown
items={itemsList} items={itemsList}
value={this.state.selectedList} value={this.state.selectedList}
onChange={selectedList => this.setState({selectedList})}/> onChange={selectedList => this.setState({selectedList: selectedList})}/>
<button onClick={() => this.setState({selectedList: []})}>clear</button>
</div>
); );
} }
} }

35
client/src/core-components/autocomplete-dropdown.js
View File

@ -10,6 +10,9 @@ class AutocompleteDropDown extends React.Component {
static propTypes = { static propTypes = {
items: Menu.propTypes.items, items: Menu.propTypes.items,
onChange: React.PropTypes.func,
value: React.PropTypes.arrayOf(React.PropTypes.shape({
}))
}; };
state = { state = {
@ -59,7 +62,7 @@ class AutocompleteDropDown extends React.Component {
} }
renderSelectedItems() { renderSelectedItems() {
return this.state.itemsSelected.map(item => this.renderSelectedItem(item)); return this.getValue().map(item => this.renderSelectedItem(item));
} }
renderSelectedItem(item) { renderSelectedItem(item) {
@ -67,8 +70,8 @@ class AutocompleteDropDown extends React.Component {
} }
getDropdownList() { getDropdownList() {
const {items} = this.props; const { items, } = this.props;
const list = this.getUnselectedList(items, this.state.itemsSelected); const list = this.getUnselectedList(items, this.getValue());
return list.filter(s => _.includes(s.name, this.state.inputValue)); return list.filter(s => _.includes(s.name, this.state.inputValue));
} }
@ -78,23 +81,34 @@ class AutocompleteDropDown extends React.Component {
} }
onRemoveClick(itemId, event) { onRemoveClick(itemId, event) {
const { onChange, } = this.props;
event.preventDefault(); event.preventDefault();
this.setState({ this.setState({
itemsSelected: this.state.itemsSelected.filter(item => item.id != itemId), itemsSelected: this.getValue().filter(item => item.id != itemId),
opened: false, opened: false,
highlightedIndex: 0, highlightedIndex: 0,
}); });
onChange && onChange(this.getValue().filter(item => item.id != itemId));
} }
onChangeDropDown(e){ onChangeDropDown(e){
const { onChange, } = this.props;
if (this.getDropdownList().length) { if (this.getDropdownList().length) {
this.setState({ this.setState({
itemsSelected: [...this.state.itemsSelected, this.getDropdownList()[e.index]], itemsSelected: [...this.getValue(), this.getDropdownList()[e.index]],
inputValue: "", inputValue: "",
highlightedIndex: 0, highlightedIndex: 0,
}); });
onChange && onChange([...this.getValue(), this.getDropdownList()[e.index]]);
} }
} }
onChangeInput(str){ onChangeInput(str){
@ -118,17 +132,26 @@ class AutocompleteDropDown extends React.Component {
} }
onKeyDown(event){ onKeyDown(event){
const { onChange, } = this.props;
if (keyCode(event) === "space"){ if (keyCode(event) === "space"){
event.stopPropagation(); event.stopPropagation();
} }
if (keyCode(event) === "backspace" && this.state.inputValue === ""){ if (keyCode(event) === "backspace" && this.state.inputValue === ""){
this.setState({ this.setState({
itemsSelected: this.state.itemsSelected.slice(0,this.state.itemsSelected.length-1), itemsSelected: this.getValue().slice(0,this.getValue().length-1),
highlightedIndex: 0,
}); });
onChange && onChange(this.getValue().slice(0,this.getValue().length-1));
} }
} }
getValue() {
return (this.props.value !== undefined) ? this.props.value : this.state.itemsSelected;
}
} }
export default AutocompleteDropDown; export default AutocompleteDropDown;

3
client/src/core-components/autocomplete-dropdown.scss
View File

@ -7,7 +7,8 @@
background: transparent; background: transparent;
outline: none; outline: none;
padding-left: 5px; padding-left: 5px;
width: auto; // width: auto;
width: 20px;
max-width: 100%; max-width: 100%;
min-width: 20px; min-width: 20px;
} }

73
client/src/core-components/drop-down.js
View File

@ -69,7 +69,10 @@ class DropDown extends React.Component {
} }
renderList({opacity, translateY}) { renderList({opacity, translateY}) {
let style = { opacity: opacity, transform: `translateY(${translateY}px)`}; let style = {
opacity: opacity,
transform: `translateY(${translateY}px)`
};
return ( return (
<div className="drop-down__list-container" style={style}> <div className="drop-down__list-container" style={style}>
@ -164,9 +167,8 @@ class DropDown extends React.Component {
highlightedIndex: this.modulo(highlightedIndex - 1, itemsQuantity) highlightedIndex: this.modulo(highlightedIndex - 1, itemsQuantity)
}); });
if (onHighlightedIndexChange){ onHighlightedIndexChange && onHighlightedIndexChange(this.modulo(highlightedIndex - 1, itemsQuantity));
onHighlightedIndexChange(this.modulo(highlightedIndex - 1, itemsQuantity));
}
} }
}, },
'down': () => { 'down': () => {
@ -177,9 +179,8 @@ class DropDown extends React.Component {
highlightedIndex: this.modulo(highlightedIndex + 1, itemsQuantity) highlightedIndex: this.modulo(highlightedIndex + 1, itemsQuantity)
}); });
if (onHighlightedIndexChange){ onHighlightedIndexChange && onHighlightedIndexChange(this.modulo(highlightedIndex + 1, itemsQuantity));
onHighlightedIndexChange(this.modulo(highlightedIndex + 1, itemsQuantity));
}
} }
}, },
'enter': () => { 'enter': () => {
@ -190,9 +191,8 @@ class DropDown extends React.Component {
opened: true opened: true
}); });
if (onMenuToggle) { onMenuToggle && onMenuToggle(true);
onMenuToggle(true);
}
} }
}, },
'space': () => { 'space': () => {
@ -202,53 +202,48 @@ class DropDown extends React.Component {
opened: true opened: true
}); });
if (onMenuToggle) { onMenuToggle && onMenuToggle(true);
onMenuToggle(true);
}
}, },
'esc': () => { 'esc': () => {
this.setState({ this.setState({
opened: false opened: false
}); });
if (onMenuToggle) { onMenuToggle && onMenuToggle(false);
onMenuToggle(false);
}
}, },
'tab': () => { 'tab': () => {
if (this.getOpen()) { if (this.getOpen()) {
event.preventDefault(); event.preventDefault();
if (onHighlightedIndexChange){ onHighlightedIndexChange && this.onIndexSelected(highlightedIndex);
this.onIndexSelected(highlightedIndex)
}
} }
} }
}; };
} }
handleBlur() { handleBlur() {
const {onMenuToggle} = this.props; const { onMenuToggle, } = this.props;
this.setState({ this.setState({
opened: false opened: false
}); });
if (onMenuToggle) { onMenuToggle && onMenuToggle(false);
onMenuToggle(false);
}
} }
handleClick() { handleClick() {
const {onMenuToggle} = this.props; const { onMenuToggle, } = this.props;
this.setState({ this.setState({
opened: !this.getOpen() opened: !this.getOpen()
}); });
if (onMenuToggle) { onMenuToggle && onMenuToggle(!this.getOpen());
onMenuToggle(!this.getOpen());
}
} }
handleItemClick(index) { handleItemClick(index) {
@ -268,19 +263,12 @@ class DropDown extends React.Component {
highlightedIndex: index highlightedIndex: index
}); });
if (onHighlightedIndexChange){ onHighlightedIndexChange && onHighlightedIndexChange(index);
onHighlightedIndexChange(index);
} onMenuToggle && onMenuToggle(false);
if (onMenuToggle) { onChange && onChange({ index });
onMenuToggle(false);
}
if (onChange) {
onChange({
index
});
}
} }
handleListMouseDown(event) { handleListMouseDown(event) {
@ -288,7 +276,7 @@ class DropDown extends React.Component {
} }
onAnimationFinished() { onAnimationFinished() {
const {onHighlightedIndexChange} = this.props; const { onHighlightedIndexChange, } = this.props;
if (!this.getOpen() && this.getHighlightedIndex() !== this.getSelectedIndex()) { if (!this.getOpen() && this.getHighlightedIndex() !== this.getSelectedIndex()) {
@ -296,9 +284,8 @@ class DropDown extends React.Component {
highlightedIndex: this.getSelectedIndex(), highlightedIndex: this.getSelectedIndex(),
}); });
if (onHighlightedIndexChange){ onHighlightedIndexChange && onHighlightedIndexChange(this.getSelectedIndex());
onHighlightedIndexChange(this.getSelectedIndex());
}
} }
} }

1
client/src/core-components/tag-selector.js
View File

@ -13,6 +13,7 @@ class TagSelector extends React.Component {
})), })),
values: React.PropTypes.arrayOf(React.PropTypes.string), values: React.PropTypes.arrayOf(React.PropTypes.string),
onRemoveClick: React.PropTypes.func, onRemoveClick: React.PropTypes.func,
onTagSelected: React.PropTypes.func,
}; };
render() { render() {