Skip to content

Commit

Permalink
Merge pull request #956 from takenet/bugfix/select-chips
Browse files Browse the repository at this point in the history 
Bugfix/select chips
  • Loading branch information
@lucasMurtaVI
lucasMurtaVI authored Dec 4, 2024
2 parents 3b260ca + ce59d4c commit 9eabf9b
Show file tree
Hide file tree
Showing 10 changed files with 133 additions and 50 deletions.
32 changes: 32 additions & 0 deletions src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1298,6 +1298,10 @@ export namespace Components {
* Return the chips
*/
"get": () => Promise<string[]>;
/**
* Prop for set the height of the component.
*/
"height"?: string;
/**
* Indicated to pass a help the user in complex filling.
*/
Expand All @@ -1322,6 +1326,10 @@ export namespace Components {
* Set maximum length value for chips
*/
"maxChipsLength"?: number;
/**
* Prop for set the max height of the component.
*/
"maxHeight"?: string;
/**
* Set maximum length value for the chip content
*/
Expand Down Expand Up @@ -2153,6 +2161,10 @@ export namespace Components {
* Return the chips
*/
"getChips": () => Promise<string[]>;
/**
* Prop for set the height of the component.
*/
"height"?: string;
/**
* Indicated to pass a help the user in complex filling.
*/
Expand All @@ -2173,6 +2185,10 @@ export namespace Components {
* label in input, with he the input size increases.
*/
"label"?: string;
/**
* Prop for set the max height of the component.
*/
"maxHeight"?: string;
/**
* Set maximum length value for the chip content
*/
Expand Down Expand Up @@ -4985,6 +5001,10 @@ declare namespace LocalJSX {
* Indicated to pass an feedback to user.
*/
"errorMessage"?: string;
/**
* Prop for set the height of the component.
*/
"height"?: string;
/**
* Indicated to pass a help the user in complex filling.
*/
Expand All @@ -5005,6 +5025,10 @@ declare namespace LocalJSX {
* Set maximum length value for chips
*/
"maxChipsLength"?: number;
/**
* Prop for set the max height of the component.
*/
"maxHeight"?: string;
/**
* Set maximum length value for the chip content
*/
Expand Down Expand Up @@ -5983,6 +6007,10 @@ declare namespace LocalJSX {
* Indicated to pass an feedback to user.
*/
"errorMessage"?: string;
/**
* Prop for set the height of the component.
*/
"height"?: string;
/**
* Indicated to pass a help the user in complex filling.
*/
Expand All @@ -5999,6 +6027,10 @@ declare namespace LocalJSX {
* label in input, with he the input size increases.
*/
"label"?: string;
/**
* Prop for set the max height of the component.
*/
"maxHeight"?: string;
/**
* Set maximum length value for the chip content
*/
Expand Down
13 changes: 5 additions & 8 deletions src/components/autocomplete/autocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,16 +379,13 @@ export class BdsAutocomplete {
};

private getTextFromOption = (opt: HTMLBdsSelectOptionElement): string => {
if (opt?.status || opt?.bulkOption) {
if (this.internalOptions) {
const internalOption = this.internalOptions.find((option) => option.value == opt.value);
if (internalOption) {
return internalOption.label;
}
if (this.internalOptions) {
const internalOption = this.internalOptions.find((option) => option.value == opt?.value);
if (internalOption) {
return internalOption.label;
}
return opt.querySelector(`#bds-typo-label-${this.value}`).textContent;
}
return opt?.titleText ? opt.titleText : opt?.textContent?.trim() ?? '';
return opt?.titleText ? opt.titleText : (opt?.textContent?.trim() ?? '');
};

private getText = (): string => {
Expand Down
2 changes: 2 additions & 0 deletions src/components/input-chips/input-chips.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -344,6 +344,8 @@ $input_fixed: 140px;
gap: 8px;
flex-wrap: wrap;
margin-right: 8px;
overflow-y: auto;
@include custom-scroll;
}
.input-chips__chip {
margin: 2px 4px 2px 0px;
Expand Down
28 changes: 22 additions & 6 deletions src/components/input-chips/input-chips.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,14 @@ export class InputChips {
* pass another maxlength property.
*/
@Prop() counterLength? = false;
/**
* Prop for set the height of the component.
*/
@Prop() height?: string;
/**
* Prop for set the max height of the component.
*/
@Prop() maxHeight?: string;
/**
* Data test is the prop to specifically test the component action object.
*/
Expand Down Expand Up @@ -196,8 +204,6 @@ export class InputChips {
@Watch('internalChips')
protected internalValueChanged(): void {
this.minMaxValidation();
this.bdsChange.emit({ data: this.internalChips, value: this.getLastChip() });
this.bdsChangeChips.emit({ data: this.internalChips, value: this.getLastChip() });
}

/**
Expand Down Expand Up @@ -316,12 +322,14 @@ export class InputChips {
this.handleDelimiters();
this.setChip(this.value);
this.value = '';
this.bdsChange.emit({ data: this.internalChips, value: this.getLastChip() });
this.bdsChangeChips.emit({ data: this.internalChips, value: this.getLastChip() });
break;
case 'Backspace' || 'Delete':
if ((this.value === null || this.value.length <= 0) && this.internalChips.length) {
this.removeLastChip();
this.bdsChange.emit({ data: this.internalChips });
this.bdsChangeChips.emit({ data: this.internalChips });
this.bdsChange.emit({ data: this.internalChips, value: this.getLastChip() });
this.bdsChangeChips.emit({ data: this.internalChips, value: this.getLastChip() });
}
break;
}
Expand Down Expand Up @@ -386,10 +394,12 @@ export class InputChips {

const words = newValue.split(this.delimiters);
words.forEach((word) => {
this.setChip(word);
this.setChip(word.trimStart());
});

this.clearInputValues();
this.bdsChange.emit({ data: this.internalChips, value: this.getLastChip() });
this.bdsChangeChips.emit({ data: this.internalChips, value: this.getLastChip() });
}

private clearInputValues(value = '') {
Expand Down Expand Up @@ -428,6 +438,8 @@ export class InputChips {
} = event;

this.internalChips = this.internalChips.filter((_chip, index) => index.toString() !== id);
this.bdsChange.emit({ data: this.internalChips, value: this.getLastChip() });
this.bdsChangeChips.emit({ data: this.internalChips, value: this.getLastChip() });
}

private renderChips() {
Expand Down Expand Up @@ -553,7 +565,11 @@ export class InputChips {
<div class="input__container">
{this.renderLabel()}
<div class={{ input__container__wrapper: true }}>
{this.internalChips.length > 0 && <span class="inside-input-left">{this.renderChips()}</span>}
{this.internalChips.length > 0 && (
<span style={{ height: this.height, maxHeight: this.maxHeight }} class="inside-input-left">
{this.renderChips()}
</span>
)}
{this.inputAvalible && (
<input
ref={(input) => (this.nativeInput = input)}
Expand Down
2 changes: 2 additions & 0 deletions src/components/input-chips/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,13 @@
| `dtButtonClose` | `dt-button-close` | Data test is the prop to specifically test the component action object. dtButtonClose is the data-test to button close. | `string` | `null` |
| `duplicated` | `duplicated` | Do not accept duplicate chip elements. | `boolean` | `false` |
| `errorMessage` | `error-message` | Indicated to pass an feedback to user. | `string` | `''` |
| `height` | `height` | Prop for set the height of the component. | `string` | `undefined` |
| `helperMessage` | `helper-message` | Indicated to pass a help the user in complex filling. | `string` | `''` |
| `icon` | `icon` | used for add icon in input left. Uses the bds-icon component. | `string` | `''` |
| `inputName` | `input-name` | Prop to insert the name of the input | `string` | `''` |
| `label` | `label` | label in input, with he the input size increases. | `string` | `''` |
| `maxChipsLength` | `max-chips-length` | Set maximum length value for chips | `number` | `undefined` |
| `maxHeight` | `max-height` | Prop for set the max height of the component. | `string` | `undefined` |
| `maxlength` | `maxlength` | Set maximum length value for the chip content | `number` | `undefined` |
| `placeholder` | `placeholder` | A tip for the user who can enter no controls. | `string` | `''` |
| `success` | `success` | Add state success on input, use for use feedback. | `boolean` | `false` |
Expand Down
2 changes: 2 additions & 0 deletions src/components/selects/select-chips/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@
| `disabled` | `disabled` | Disabled input. | `boolean` | `false` |
| `duplicated` | `duplicated` | Do not accept duplicate chip elements. | `boolean` | `false` |
| `errorMessage` | `error-message` | Indicated to pass an feedback to user. | `string` | `''` |
| `height` | `height` | Prop for set the height of the component. | `string` | `undefined` |
| `helperMessage` | `helper-message` | Indicated to pass a help the user in complex filling. | `string` | `''` |
| `icon` | `icon` | used for add icon in input left. Uses the bds-icon component. | `string` | `''` |
| `inputName` | `input-name` | Prop to insert the name of the input | `string` | `''` |
| `label` | `label` | label in input, with he the input size increases. | `string` | `''` |
| `maxHeight` | `max-height` | Prop for set the max height of the component. | `string` | `undefined` |
| `maxlength` | `maxlength` | Set maximum length value for the chip content | `number` | `undefined` |
| `newPrefix` | `new-prefix` | Used for add prefix on new option select. | `string` | `''` |
| `notFoundMessage` | `not-found-message` | Specify if is possible to create a new tag that is not on the options. | `string` | `'No results found'` |
Expand Down
71 changes: 52 additions & 19 deletions src/components/selects/select-chips/select-chips.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,14 @@ export class SelectChips {
* Set the placement of the options menu. Can be 'bottom' or 'top'.
*/
@Prop({ mutable: true, reflect: true }) optionsPosition?: SelectOptionsPositionType = 'auto';
/**
* Prop for set the height of the component.
*/
@Prop() height?: string;
/**
* Prop for set the max height of the component.
*/
@Prop() maxHeight?: string;
/**
* Data test is the prop to specifically test the component action object.
*/
Expand Down Expand Up @@ -215,6 +223,17 @@ export class SelectChips {
}
}

@Watch('options')
protected optionsChanged(): void {
if (typeof this.options === 'string') {
try {
this.internalOptions = JSON.parse(this.options);
} catch (e) {}
} else {
this.internalOptions = this.options;
}
}

/**
* Call change event before alter chips values.
*/
Expand All @@ -238,14 +257,22 @@ export class SelectChips {
@Watch('internalChips')
protected internalValueChanged(): void {
this.handleChangeChipsValue();
this.bdsChangeChips.emit({ data: this.internalChips, value: this.selectedOption });

if (this.internalChips.length > 0) {
const latestOption = { label: this.getLastChip(), value: this.selectedOption };
this.selectedOptions = [...this.selectedOptions, latestOption];
this.bdsChange.emit({ data: this.selectedOptions });
this.selectedOptions = this.internalChips.map((item) => {
return {
label: item,
value: `${this.validValueChip(item, this.childOptions)}`,
};
});
}
}

private validValueChip(value, internalOptions: HTMLBdsSelectOptionElement[]): string {
const selectOption = internalOptions?.find((option) => option.textContent == value);
return `${selectOption ? selectOption.value : value}`;
}

/**
* Return the validity of the input chips.
*/
Expand Down Expand Up @@ -294,6 +321,7 @@ export class SelectChips {

componentWillLoad() {
this.valueChanged();
this.optionsChanged();
this.intoView = getScrollParent(this.el);
}

Expand Down Expand Up @@ -416,6 +444,9 @@ export class SelectChips {
this.selectedOption = value;
const text = this.getText(value);
await this.addChip(text);

this.bdsChangeChips.emit({ data: this.internalChips, value: this.selectedOption });
this.bdsChange.emit({ data: this.selectedOptions });
this.toggle();
};

Expand All @@ -439,16 +470,13 @@ export class SelectChips {
};

private getTextFromOption = (opt: HTMLBdsSelectOptionElement): string => {
if (opt?.status || opt?.bulkOption) {
if (this.internalOptions) {
const internalOption = this.internalOptions.find((option) => option.value == opt.value);
if (internalOption) {
return internalOption.label;
}
if (this.internalOptions) {
const internalOption = this.internalOptions.find((option) => option.value == opt?.value);
if (internalOption) {
return internalOption.label;
}
return opt.querySelector(`#bds-typo-label-${opt.value}`).textContent;
}
return opt?.titleText ? opt.titleText : opt?.textContent?.trim() ?? '';
return opt?.titleText ? opt.titleText : (opt?.textContent?.trim() ?? '');
};

private setFocusWrapper = (): void => {
Expand Down Expand Up @@ -495,17 +523,15 @@ export class SelectChips {
this.changedInputValue();
};

private getLastChip(): string {
return this.internalChips[this.internalChips.length - 1];
}

private keyPressWrapper = (event: KeyboardEvent): void => {
switch (event.key) {
case 'Enter':
if (this.canAddNew !== false) {
this.handleDelimiters();
this.setChip(this.value);
this.value = '';
this.bdsChangeChips.emit({ data: this.internalChips, value: this.selectedOption });
this.bdsChange.emit({ data: this.selectedOptions });
}
if (!this.disabled) {
this.isOpen = true;
Expand All @@ -525,7 +551,8 @@ export class SelectChips {
if ((this.value === null || this.value.length <= 0) && this.internalChips.length) {
this.removeLastChip();
this.handleChangeChipsValue;
this.bdsChangeChips.emit({ data: this.internalChips });
this.bdsChangeChips.emit({ data: this.internalChips, value: this.selectedOption });
this.bdsChange.emit({ data: this.selectedOptions });
}
break;
}
Expand Down Expand Up @@ -562,7 +589,7 @@ export class SelectChips {

const words = newValue.split(this.delimiters);
words.forEach((word) => {
this.setChip(word);
this.setChip(word.trimStart());
});

this.clearInputValues();
Expand Down Expand Up @@ -645,6 +672,8 @@ export class SelectChips {
} = event;

this.internalChips = this.internalChips.filter((_chip, index) => index.toString() !== id);
this.bdsChangeChips.emit({ data: this.internalChips, value: this.selectedOption });
this.bdsChange.emit({ data: this.selectedOptions });
}

private renderChips() {
Expand Down Expand Up @@ -783,7 +812,11 @@ export class SelectChips {
<div class="input__container">
{this.renderLabel()}
<div class={{ input__container__wrapper: true }}>
{this.internalChips.length > 0 && <span class="inside-input-left">{this.renderChips()}</span>}
{this.internalChips.length > 0 && (
<span style={{ height: this.height, maxHeight: this.maxHeight }} class="inside-input-left">
{this.renderChips()}
</span>
)}
<input
ref={(input) => (this.nativeInput = input)}
class={{ input__container__text: true }}
Expand Down
4 changes: 3 additions & 1 deletion src/components/selects/select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,9 @@ $select-options-max-height: 200px;
display: inline-flex;
gap: 8px;
flex-wrap: wrap;
margin-right: 8px;
max-height: 200px;
overflow-y: auto;
@include custom-scroll;
}
.input-chips__chip {
margin: 2px 4px 2px 0px;
Expand Down
Loading

0 comments on commit 9eabf9b

Please sign in to comment.