tyler.durden/opensupports
1
0
Fork 0
mirror of https://github.com/opensupports/opensupports.git synced 2025-07-29 16:54:53 +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 {
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() {
let itemsList = [
{id: 45, name: 'Lautaro', content: 'Lautaro.', color: 'red'},
{id: 46, name: 'dsafa', content: 'dsafa', color: 'red'},
{id: 45, name: 'Lautaro', content: 'Lautaro.', color: 'gray'},
{id: 46, name: 'dsafa', content: 'dsafa', color: 'black'},
{id: 47, name: 'asdasdasd', content: 'asdasdasd.', color: 'red'},
{id: 48, name: '123123123', content: '123123123.', color: 'blue'},
{id: 49, name: 'hola', content: 'hola', color: 'green'},
];
return (
<AutocompleteDropDown
<div>
<AutocompleteDropDown
items={itemsList}
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 = {
items: Menu.propTypes.items,
onChange: React.PropTypes.func,
value: React.PropTypes.arrayOf(React.PropTypes.shape({
}))
};
state = {
@ -59,7 +62,7 @@ class AutocompleteDropDown extends React.Component {
}
renderSelectedItems() {
return this.state.itemsSelected.map(item => this.renderSelectedItem(item));
return this.getValue().map(item => this.renderSelectedItem(item));
}
renderSelectedItem(item) {
@ -67,8 +70,8 @@ class AutocompleteDropDown extends React.Component {
}
getDropdownList() {
const {items} = this.props;
const list = this.getUnselectedList(items, this.state.itemsSelected);
const { items, } = this.props;
const list = this.getUnselectedList(items, this.getValue());
return list.filter(s => _.includes(s.name, this.state.inputValue));
}
@ -78,23 +81,34 @@ class AutocompleteDropDown extends React.Component {
}
onRemoveClick(itemId, event) {
const { onChange, } = this.props;
event.preventDefault();
this.setState({
itemsSelected: this.state.itemsSelected.filter(item => item.id != itemId),
itemsSelected: this.getValue().filter(item => item.id != itemId),
opened: false,
highlightedIndex: 0,
});
onChange && onChange(this.getValue().filter(item => item.id != itemId));
}
onChangeDropDown(e){
const { onChange, } = this.props;
if (this.getDropdownList().length) {
this.setState({
itemsSelected: [...this.state.itemsSelected, this.getDropdownList()[e.index]],
itemsSelected: [...this.getValue(), this.getDropdownList()[e.index]],
inputValue: "",
highlightedIndex: 0,
});
onChange && onChange([...this.getValue(), this.getDropdownList()[e.index]]);
}
}
onChangeInput(str){
@ -118,17 +132,26 @@ class AutocompleteDropDown extends React.Component {
}
onKeyDown(event){
const { onChange, } = this.props;
if (keyCode(event) === "space"){
event.stopPropagation();
}
if (keyCode(event) === "backspace" && this.state.inputValue === ""){
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;

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

@ -7,7 +7,8 @@
background: transparent;
outline: none;
padding-left: 5px;
width: auto;
// width: auto;
width: 20px;
max-width: 100%;
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}) {
let style = { opacity: opacity, transform: `translateY(${translateY}px)`};
let style = {
opacity: opacity,
transform: `translateY(${translateY}px)`
};
return (
<div className="drop-down__list-container" style={style}>
@ -164,9 +167,8 @@ class DropDown extends React.Component {
highlightedIndex: this.modulo(highlightedIndex - 1, itemsQuantity)
});
if (onHighlightedIndexChange){
onHighlightedIndexChange(this.modulo(highlightedIndex - 1, itemsQuantity));
}
onHighlightedIndexChange && onHighlightedIndexChange(this.modulo(highlightedIndex - 1, itemsQuantity));
}
},
'down': () => {
@ -177,9 +179,8 @@ class DropDown extends React.Component {
highlightedIndex: this.modulo(highlightedIndex + 1, itemsQuantity)
});
if (onHighlightedIndexChange){
onHighlightedIndexChange(this.modulo(highlightedIndex + 1, itemsQuantity));
}
onHighlightedIndexChange && onHighlightedIndexChange(this.modulo(highlightedIndex + 1, itemsQuantity));
}
},
'enter': () => {
@ -190,9 +191,8 @@ class DropDown extends React.Component {
opened: true
});
if (onMenuToggle) {
onMenuToggle(true);
}
onMenuToggle && onMenuToggle(true);
}
},
'space': () => {
@ -202,53 +202,48 @@ class DropDown extends React.Component {
opened: true
});
if (onMenuToggle) {
onMenuToggle(true);
}
onMenuToggle && onMenuToggle(true);
},
'esc': () => {
this.setState({
opened: false
});
if (onMenuToggle) {
onMenuToggle(false);
}
onMenuToggle && onMenuToggle(false);
},
'tab': () => {
if (this.getOpen()) {
event.preventDefault();
if (onHighlightedIndexChange){
this.onIndexSelected(highlightedIndex)
}
onHighlightedIndexChange && this.onIndexSelected(highlightedIndex);
}
}
};
}
handleBlur() {
const {onMenuToggle} = this.props;
const { onMenuToggle, } = this.props;
this.setState({
opened: false
});
if (onMenuToggle) {
onMenuToggle(false);
}
onMenuToggle && onMenuToggle(false);
}
handleClick() {
const {onMenuToggle} = this.props;
const { onMenuToggle, } = this.props;
this.setState({
opened: !this.getOpen()
});
if (onMenuToggle) {
onMenuToggle(!this.getOpen());
}
onMenuToggle && onMenuToggle(!this.getOpen());
}
handleItemClick(index) {
@ -268,19 +263,12 @@ class DropDown extends React.Component {
highlightedIndex: index
});
if (onHighlightedIndexChange){
onHighlightedIndexChange(index);
}
onHighlightedIndexChange && onHighlightedIndexChange(index);
onMenuToggle && onMenuToggle(false);
if (onMenuToggle) {
onMenuToggle(false);
}
if (onChange) {
onChange({
index
});
}
onChange && onChange({ index });
}
handleListMouseDown(event) {
@ -288,7 +276,7 @@ class DropDown extends React.Component {
}
onAnimationFinished() {
const {onHighlightedIndexChange} = this.props;
const { onHighlightedIndexChange, } = this.props;
if (!this.getOpen() && this.getHighlightedIndex() !== this.getSelectedIndex()) {
@ -296,9 +284,8 @@ class DropDown extends React.Component {
highlightedIndex: this.getSelectedIndex(),
});
if (onHighlightedIndexChange){
onHighlightedIndexChange(this.getSelectedIndex());
}
onHighlightedIndexChange && 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),
onRemoveClick: React.PropTypes.func,
onTagSelected: React.PropTypes.func,
};
render() {