import { convertIconClass, disableMissingIconWarning, enableMissingIconWarning, isExistingIconId, } from "discourse-common/lib/icon-library"; import MultiSelectComponent from "select-kit/components/multi-select"; import { computed } from "@ember/object"; import { isDevelopment } from "discourse-common/config/environment"; import { makeArray } from "discourse-common/lib/helpers"; import { ajax } from "discourse/lib/ajax"; export default MultiSelectComponent.extend({ pluginApiIdentifiers: ["icon-picker"], classNames: ["icon-picker"], init() { this._super(...arguments); this._cachedIconsList = null; if (isDevelopment()) { disableMissingIconWarning(); } }, content: computed("value.[]", function () { return makeArray(this.value).map(this._processIcon); }), search(filter = "") { if ( filter === "" && this._cachedIconsList && this._cachedIconsList.length ) { return this._cachedIconsList; } else { return ajax("/svg-sprite/picker-search", { data: { filter }, }).then((icons) => { icons = icons.map(this._processIcon); if (this.onlyAvailable) { icons = icons.filter(this._iconExists); } if (filter === "") { this._cachedIconsList = icons; } return icons; }); } }, _iconExists(icon) { return isExistingIconId(icon.id); }, _processIcon(icon) { const iconName = typeof icon === "object" ? icon.id : icon, strippedIconName = convertIconClass(iconName); const spriteEl = "#svg-sprites", holder = "ajax-icon-holder"; if (typeof icon === "object") { if ($(`${spriteEl} .${holder}`).length === 0) { $(spriteEl).append( `
` ); } if (!$(`${spriteEl} symbol#${strippedIconName}`).length) { $(`${spriteEl} .${holder}`).append( `` ); } } return { id: iconName, name: iconName, icon: strippedIconName, }; }, willDestroyElement() { $("#svg-sprites .ajax-icon-holder").remove(); this._super(...arguments); this._cachedIconsList = null; if (isDevelopment()) { enableMissingIconWarning(); } }, actions: { onChange(value, item) { if (this.selectKit.options.maximum === 1) { value = value.length ? value[0] : null; item = item.length ? item[0] : null; } this.attrs.onChange && this.attrs.onChange(value, item); }, }, });