Skip to content

Commit

Permalink
Merge pull request #555 from deh-code/select-options-by-id
Browse files Browse the repository at this point in the history 
Select options by id
  • Loading branch information
@brianvoe
brianvoe authored Aug 2, 2024
2 parents bb81819 + 163ad4b commit ddb43c9
Show file tree
Hide file tree
Showing 22 changed files with 443 additions and 425 deletions.
2 changes: 1 addition & 1 deletion dist/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default class SlimSelect {
getData(): DataArray;
setData(data: DataArrayPartial): void;
getSelected(): string[];
setSelected(value: string | string[], runAfterChange?: boolean): void;
setSelected(values: string | string[], runAfterChange?: boolean): void;
addOption(option: OptionOptional): void;
open(): void;
close(eventType?: string | null): void;
Expand Down
5 changes: 3 additions & 2 deletions dist/select.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { DataArray, DataArrayPartial, Optgroup, OptgroupOptional, Option } from './store';
export default class Select {
select: HTMLSelectElement;
onValueChange?: (value: string[]) => void;
onValueChange?: (value: Option[]) => void;
onClassChange?: (classes: string[]) => void;
onDisabledChange?: (disabled: boolean) => void;
onOptionsChange?: (data: DataArrayPartial) => void;
Expand All @@ -18,8 +18,9 @@ export default class Select {
getData(): DataArrayPartial;
getDataFromOptgroup(optgroup: HTMLOptGroupElement): OptgroupOptional;
getDataFromOption(option: HTMLOptionElement): Option;
getSelectedOptions(): Option[];
getSelectedValues(): string[];
setSelected(value: string[]): void;
setSelected(ids: string[]): void;
updateSelect(id?: string, style?: string, classes?: string[]): void;
updateOptions(data: DataArray): void;
createOptgroup(optgroup: Optgroup): HTMLOptGroupElement;
Expand Down
90 changes: 46 additions & 44 deletions dist/slimselect.cjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ class Store {
setData(data) {
this.data = this.partialToFullData(data);
if (this.selectType === 'single') {
this.setSelectedBy('value', this.getSelected());
this.setSelectedBy('id', this.getSelected());
}
}
getData() {
Expand Down Expand Up @@ -185,26 +185,13 @@ class Store {
}
}
getSelected() {
let selectedOptions = this.getSelectedOptions();
let selectedValues = [];
selectedOptions.forEach((option) => {
selectedValues.push(option.value);
});
return selectedValues;
return this.getSelectedOptions().map((option) => option.id);
}
getSelectedOptions() {
return this.filter((opt) => {
return opt.selected;
}, false);
}
getSelectedIDs() {
let selectedOptions = this.getSelectedOptions();
let selectedIDs = [];
selectedOptions.forEach((op) => {
selectedIDs.push(op.id);
});
return selectedIDs;
}
getOptgroupByID(id) {
for (let dataObj of this.data) {
if (dataObj instanceof Optgroup && dataObj.id === id) {
Expand Down Expand Up @@ -456,8 +443,8 @@ class Render {
}
else {
const firstOption = this.store.getFirstOption();
const value = firstOption ? firstOption.value : '';
this.callbacks.setSelected(value, false);
const id = firstOption ? firstOption.id : '';
this.callbacks.setSelected(id, false);
}
if (this.settings.closeOnSelect) {
this.callbacks.close();
Expand Down Expand Up @@ -657,18 +644,18 @@ class Render {
shouldDelete = this.callbacks.beforeChange(after, before) === true;
}
if (shouldDelete) {
let selectedValues = [];
let selectedIds = [];
for (const o of after) {
if (o instanceof Optgroup) {
for (const c of o.options) {
selectedValues.push(c.value);
selectedIds.push(c.id);
}
}
if (o instanceof Option) {
selectedValues.push(o.value);
selectedIds.push(o.id);
}
}
this.callbacks.setSelected(selectedValues, false);
this.callbacks.setSelected(selectedIds, false);
if (this.settings.closeOnSelect) {
this.callbacks.close();
}
Expand Down Expand Up @@ -797,12 +784,12 @@ class Render {
let newOption = new Option(oo);
this.callbacks.addOption(newOption);
if (this.settings.isMultiple) {
let values = this.store.getSelected();
values.push(newOption.value);
this.callbacks.setSelected(values, true);
let ids = this.store.getSelected();
ids.push(newOption.id);
this.callbacks.setSelected(ids, true);
}
else {
this.callbacks.setSelected([newOption.value], true);
this.callbacks.setSelected([newOption.id], true);
}
this.callbacks.search('');
if (this.settings.closeOnSelect) {
Expand Down Expand Up @@ -990,7 +977,7 @@ class Render {
if (allSelected) {
const newSelected = currentSelected.filter((s) => {
for (const o of d.options) {
if (s === o.value) {
if (s === o.id) {
return false;
}
}
Expand All @@ -1000,7 +987,7 @@ class Render {
return;
}
else {
const newSelected = currentSelected.concat(d.options.map((o) => o.value));
const newSelected = currentSelected.concat(d.options.map((o) => o.id));
for (const o of d.options) {
if (!this.store.getOptionByID(o.id)) {
this.callbacks.addOption(o);
Expand Down Expand Up @@ -1157,7 +1144,7 @@ class Render {
if (!this.store.getOptionByID(elementID)) {
this.callbacks.addOption(option);
}
this.callbacks.setSelected(after.map((o) => o.value), false);
this.callbacks.setSelected(after.map((o) => o.id), false);
if (this.settings.closeOnSelect) {
this.callbacks.close();
}
Expand Down Expand Up @@ -1303,7 +1290,7 @@ class Select {
}
valueChange(ev) {
if (this.listen && this.onValueChange) {
this.onValueChange(this.getSelectedValues());
this.onValueChange(this.getSelectedOptions());
}
return true;
}
Expand Down Expand Up @@ -1387,31 +1374,34 @@ class Select {
data: option.dataset,
};
}
getSelectedValues() {
let values = [];
const options = this.select.childNodes;
for (const o of options) {
getSelectedOptions() {
let options = [];
const opts = this.select.childNodes;
for (const o of opts) {
if (o.nodeName === 'OPTGROUP') {
const optgroupOptions = o.childNodes;
for (const oo of optgroupOptions) {
if (oo.nodeName === 'OPTION') {
const option = oo;
if (option.selected) {
values.push(option.value);
options.push(this.getDataFromOption(option));
}
}
}
}
if (o.nodeName === 'OPTION') {
const option = o;
if (option.selected) {
values.push(option.value);
options.push(this.getDataFromOption(option));
}
}
}
return values;
return options;
}
getSelectedValues() {
return this.getSelectedOptions().map((option) => option.value);
}
setSelected(value) {
setSelected(ids) {
this.changeListen(false);
const options = this.select.childNodes;
for (const o of options) {
Expand All @@ -1421,13 +1411,13 @@ class Select {
for (const oo of optgroupOptions) {
if (oo.nodeName === 'OPTION') {
const option = oo;
option.selected = value.includes(option.value);
option.selected = ids.includes(option.id);
}
}
}
if (o.nodeName === 'OPTION') {
const option = o;
option.selected = value.includes(option.value);
option.selected = ids.includes(option.id);
}
}
this.changeListen(true);
Expand Down Expand Up @@ -1645,8 +1635,8 @@ class SlimSelect {
this.select = new Select(this.selectEl);
this.select.updateSelect(this.settings.id, this.settings.style, this.settings.class);
this.select.hideUI();
this.select.onValueChange = (values) => {
this.setSelected(values);
this.select.onValueChange = (options) => {
this.setSelected(options.map((option) => option.id));
};
this.select.onClassChange = (classes) => {
this.settings.class = classes;
Expand Down Expand Up @@ -1736,11 +1726,23 @@ class SlimSelect {
}
}
getSelected() {
return this.store.getSelected();
return this.store.getSelectedOptions().map((option) => option.value);
}
setSelected(value, runAfterChange = true) {
setSelected(values, runAfterChange = true) {
const selected = this.store.getSelected();
this.store.setSelectedBy('value', Array.isArray(value) ? value : [value]);
const options = this.store.getDataOptions();
values = Array.isArray(values) ? values : [values];
const ids = [];
for (const value of values) {
if (options.find((option) => option.id == value)) {
ids.push(value);
continue;
}
for (const option of options.filter((option) => option.value == value)) {
ids.push(option.id);
}
}
this.store.setSelectedBy('id', ids);
const data = this.store.getData();
this.select.updateOptions(data);
this.render.renderValues();
Expand Down
Loading

0 comments on commit ddb43c9

Please sign in to comment.