mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 05:47:31 +08:00
98201ecc24
This PR is the first step towards replacing our `{{user-selector}}` and eventually deprecating and removing it from our codebase. Some of `{{user-selector}}` problems are:
1. It's called `{{user-selector}}`, but in reality in can also select groups and emails.
2. It's an Ember component, yet it doesn't have a handlebars template and uses jQuery to render itself and modify the DOM. An example of this problem is when you want to clear the selected users programmatically, see [this](6c155dba77/app/assets/javascripts/discourse/app/components/user-selector.js (L179-L185)).
3. We now have select kit which does very similar things but a lot better.
This PR introduces `{{email-group-user-chooser}}` which is meant to replace `{{user-selector}}`. It extends select kit and has the same features that `{{user-selector}}` has. `{{user-selector}}` is still used in a few places in core, but they'll all be replaced with the new component in a separate commit.
Once `{{user-selector}}` is not used anywhere in core, it'll be deprecated and then removed after the 2.7 release.
77 lines
2.5 KiB
JavaScript
77 lines
2.5 KiB
JavaScript
import MultiSelectHeaderComponent from "select-kit/components/multi-select/multi-select-header";
|
|
import { computed } from "@ember/object";
|
|
import { gt } from "@ember/object/computed";
|
|
import { isTesting } from "discourse-common/config/environment";
|
|
import layout from "select-kit/templates/components/email-group-user-chooser-header";
|
|
|
|
export default MultiSelectHeaderComponent.extend({
|
|
layout,
|
|
classNames: ["email-group-user-chooser-header"],
|
|
hasHiddenItems: gt("hiddenItemsCount", 0),
|
|
|
|
shownItems: computed("hiddenItemsCount", function () {
|
|
if (
|
|
this.selectKit.noneItem === this.selectedContent ||
|
|
this.hiddenItemsCount === 0
|
|
) {
|
|
return this.selectedContent;
|
|
}
|
|
return this.selectedContent.slice(
|
|
0,
|
|
this.selectedContent.length - this.hiddenItemsCount
|
|
);
|
|
}),
|
|
|
|
hiddenItemsCount: computed(
|
|
"selectedContent.[]",
|
|
"selectKit.options.autoWrap",
|
|
"selectKit.isExpanded",
|
|
function () {
|
|
if (
|
|
!this.selectKit.options.autoWrap ||
|
|
this.selectKit.isExpanded ||
|
|
this.selectedContent === this.selectKit.noneItem ||
|
|
this.selectedContent.length <= 1 ||
|
|
isTesting()
|
|
) {
|
|
return 0;
|
|
} else {
|
|
const selectKitHeaderWidth = this.element.offsetWidth;
|
|
const choices = this.element.querySelectorAll(".selected-name.choice");
|
|
const input = this.element.querySelector(".filter-input");
|
|
const alreadyHidden = this.element.querySelector(".x-more-item");
|
|
if (alreadyHidden) {
|
|
const hiddenCount = parseInt(
|
|
alreadyHidden.getAttribute("data-hidden-count"),
|
|
10
|
|
);
|
|
return (
|
|
hiddenCount +
|
|
(this.selectedContent.length - (choices.length + hiddenCount))
|
|
);
|
|
}
|
|
if (choices.length === 0 && this.selectedContent.length > 0) {
|
|
return 0;
|
|
}
|
|
let total = choices[0].offsetWidth + input.offsetWidth;
|
|
let shownItemsCount = 1;
|
|
let shouldHide = false;
|
|
for (let i = 1; i < choices.length - 1; i++) {
|
|
const currentWidth = choices[i].offsetWidth;
|
|
const nextWidth = choices[i + 1].offsetWidth;
|
|
const ratio =
|
|
(total + currentWidth + nextWidth) / selectKitHeaderWidth;
|
|
if (ratio >= 0.95) {
|
|
shouldHide = true;
|
|
break;
|
|
} else {
|
|
shownItemsCount++;
|
|
total += currentWidth;
|
|
}
|
|
}
|
|
return shouldHide ? choices.length - shownItemsCount : 0;
|
|
}
|
|
}
|
|
),
|
|
});
|