Skip to content

Commit

Permalink
feat(fw-select): added support for integer dataype for value (#384)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kishore-kumar-E3682
kishore-kumar-E3682 authored Jan 24, 2022
1 parent 03b0d64 commit ca1a4a0
Show file tree
Hide file tree
Showing 7 changed files with 50 additions and 44 deletions.
10 changes: 5 additions & 5 deletions packages/crayons-core/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -649,11 +649,11 @@ export namespace Components {
/**
* Pass an array of string in case of multi-select or string for single-select.
*/
"setSelectedValues": (values: string | string[]) => Promise<any>;
"setSelectedValues": (values: any) => Promise<any>;
/**
* Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select.
*/
"value": string | string[];
"value": any;
/**
* Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps.
*/
Expand Down Expand Up @@ -1158,7 +1158,7 @@ export namespace Components {
/**
* Value corresponding to the option, that is saved when the form data is saved.
*/
"value": string;
"value": string | number;
/**
* Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps.
*/
Expand Down Expand Up @@ -2638,7 +2638,7 @@ declare namespace LocalJSX {
/**
* Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select.
*/
"value"?: string | string[];
"value"?: any;
/**
* Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps.
*/
Expand Down Expand Up @@ -3170,7 +3170,7 @@ declare namespace LocalJSX {
/**
* Value corresponding to the option, that is saved when the form data is saved.
*/
"value"?: string;
"value"?: string | number;
/**
* Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps.
*/
Expand Down
55 changes: 27 additions & 28 deletions packages/crayons-core/src/components/options-list/list-options.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export class ListOptions {
/**
* Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select.
*/
@Prop({ reflect: true, mutable: true }) value: string | string[] = '';
@Prop({ mutable: true }) value: any = '';
/**
* Works with `multiple` enabled. Configures the maximum number of options that can be selected with a multi-select component.
*/
Expand Down Expand Up @@ -195,13 +195,11 @@ export class ListOptions {
* Pass an array of string in case of multi-select or string for single-select.
*/
@Method()
async setSelectedValues(values: string | string[]): Promise<any> {
async setSelectedValues(values: any): Promise<any> {
if (this.options) {
this.selectedOptionsState = this.options.filter((option) => {
return this.multiple
? values.includes(option.value)
: values === option.value;
});
this.selectedOptionsState = this.options.filter((option) =>
this.isValueEqual(values, option)
);
this.isInternalValueChange = true;
this.setValue(this.selectedOptionsState);
}
Expand Down Expand Up @@ -243,22 +241,18 @@ export class ListOptions {
newValue = this.multiple ? [] : '';
}
this.selectOptions = this.selectOptions.map((option) => {
option.selected = newValue.includes(option.value);
option.selected = this.isValueEqual(newValue, option);
return option;
});
// Warning: Before mutating this.value inside this file set the isInternalValueChange to true.
// This is to prevent triggering the below code which is executed whenever there is a change in the prop this.value
if (!this.isInternalValueChange) {
if (this.options.length > 0) {
this.selectedOptionsState = this.options.filter((option) =>
newValue.includes(option.value)
);
} else {
// This usually occurs during dynamic select
this.selectedOptionsState = this.selectedOptionsState.filter(
(option) => newValue.includes(option.value)
);
}
// source might change during dynamic select
const source =
this.options.length > 0 ? this.options : this.selectedOptionsState;
this.selectedOptionsState = source.filter((option) =>
this.isValueEqual(newValue, option)
);
}
this.fwChange.emit({
value: newValue,
Expand All @@ -281,7 +275,11 @@ export class ListOptions {
if (this.multiple && !Array.isArray(value)) {
throw new Error('Value must be a array for multi-select');
}
if (!this.multiple && typeof value !== 'string') {
if (
!this.multiple &&
typeof value !== 'string' &&
typeof value !== 'number'
) {
throw new Error('Value must be a string for single-select');
}
}
Expand Down Expand Up @@ -312,11 +310,9 @@ export class ListOptions {

setSelectedOptionsByValue(values) {
if (this.options) {
this.selectedOptionsState = this.options.filter((option) => {
return this.multiple
? values.includes(option.value)
: values === option.value;
});
this.selectedOptionsState = this.options.filter((option) =>
this.isValueEqual(values, option)
);
} else {
throw new Error('Options must be passed if value is set');
}
Expand All @@ -329,10 +325,7 @@ export class ListOptions {
...{
checkbox: option.checkbox || this.checkbox,
variant: option.variant || this.variant,
selected:
(this.multiple
? this.value.includes(option.value)
: this.value === option.value) || option.selected,
selected: this.isValueEqual(this.value, option) || option.selected,
disabled:
option.disabled ||
(this.multiple && this.value?.length >= this.max),
Expand All @@ -342,6 +335,12 @@ export class ListOptions {
});
}

isValueEqual(value, option) {
return this.multiple
? value.includes(option.value)
: value === option.value;
}

setValue(options) {
if (options?.length > 0) {
this.value = this.multiple
Expand Down
4 changes: 2 additions & 2 deletions packages/crayons-core/src/components/options-list/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ The data-source and the visual variant for the list options can be altered via t
| `searchText` | `search-text` | Placeholder to placed on the search text box. | `string` | `'Search...'` |
| `searchable` | `searchable` | Enables the input with in the popup for filtering the options. | `boolean` | `false` |
| `selectedOptions` | -- | The option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select. | `any[]` | `[]` |
| `value` | `value` | Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select. | `string \| string[]` | `''` |
| `value` | `value` | Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select. | `any` | `''` |
| `variant` | `variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "icon" \| "standard"` | `'standard'` |


Expand Down Expand Up @@ -146,7 +146,7 @@ Type: `Promise<any>`



### `setSelectedValues(values: string | string[]) => Promise<any>`
### `setSelectedValues(values: any) => Promise<any>`

Pass an array of string in case of multi-select or string for single-select.

Expand Down
2 changes: 1 addition & 1 deletion packages/crayons-core/src/components/select-option/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ function App() {
| `selected` | `selected` | Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` |
| `subText` | `sub-text` | Second line text can be description etc. | `string` | `undefined` |
| `text` | `text` | The text to be displayed in the option. | `string` | `undefined` |
| `value` | `value` | Value corresponding to the option, that is saved when the form data is saved. | `string` | `undefined` |
| `value` | `value` | Value corresponding to the option, that is saved when the form data is saved. | `number \| string` | `undefined` |
| `variant` | `variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "icon" \| "standard"` | `'standard'` |


Expand Down
2 changes: 1 addition & 1 deletion packages/crayons-core/src/components/select-option/select-option.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export class SelectOption {
/**
* Value corresponding to the option, that is saved when the form data is saved.
*/
@Prop({ reflect: true }) value: string;
@Prop() value: string | number;
/**
* Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false.
*/
Expand Down
4 changes: 4 additions & 0 deletions packages/crayons-core/src/components/select/select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@ label {
flex-grow: 1;
flex-wrap: wrap;

fw-tag {
margin-right: 4px;
}

input {
flex-grow: 1;
border: none;
Expand Down
17 changes: 10 additions & 7 deletions packages/crayons-core/src/components/select/select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export class Select {
/**
* Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select.
*/
@Prop({ reflect: true, mutable: true }) value: any;
@Prop({ mutable: true }) value: any;
/**
* Name of the component, saved as part of form data.
*/
Expand Down Expand Up @@ -389,6 +389,12 @@ export class Select {
this.selectInput.value = '';
}

isValueEqual(value, option) {
return this.multiple
? value.includes(option.value)
: value === option.value;
}

valueExists() {
return this.value && (this.multiple ? this.value.length > 0 : !!this.value);
}
Expand All @@ -405,7 +411,7 @@ export class Select {
renderTags() {
if (this.multiple && Array.isArray(this.value)) {
return this.selectedOptionsState.map((option) => {
if (this.value.includes(option.value)) {
if (this.isValueEqual(this.value, option)) {
return (
<fw-tag
variant={this.tagVariant}
Expand Down Expand Up @@ -469,10 +475,7 @@ export class Select {
html: option.html,
text: option.html ? option.optionText : option.textContent,
value: option.value,
selected:
(this.multiple
? this.value.includes(option.value)
: this.value === option.value) || option.selected,
selected: this.isValueEqual(this.value, option) || option.selected,
disabled: option.disabled || this.disabled, // Check if option is disabled or select is disabled
htmlContent: option.html ? option.innerHTML : '',
};
Expand All @@ -488,7 +491,7 @@ export class Select {
this.value.length !== this.selectedOptions.length
) {
this.selectedOptionsState = this.dataSource.filter((option) =>
this.value.includes(option.value)
this.isValueEqual(this.value, option)
);
}
if (this.dataSource?.length > 0) {
Expand Down

0 comments on commit ca1a4a0

Please sign in to comment.