Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat(select): Added ability to clear select#412

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
avaneev95 wants to merge2 commits intoedcarroll:master
base:master
Choose a base branch
Loading
fromavaneev95:feat(select)/clearable
Open
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletiondemo/src/app/app.component.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { Component, HostBinding } from "@angular/core";
import { SuiPopupConfig } from "ng2-semantic-ui";
import { SuiPopupConfig } from "../../../src";

@Component({
selector: "demo-root",
Expand Down
2 changes: 1 addition & 1 deletiondemo/src/app/app.module.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { SuiSidebarModule, SuiPopupModule } from "ng2-semantic-ui";
import { SuiSidebarModule, SuiPopupModule } from "../../../src";

import { DemoRoutingModule } from "./app.routing";
import { DemoComponentsModule } from "./components/demo-components.module";
Expand Down
2 changes: 1 addition & 1 deletiondemo/src/app/components/demo-components.module.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule } from "@angular/router";
import { SuiCollapseModule, SuiPopupModule } from "ng2-semantic-ui";
import { SuiCollapseModule, SuiPopupModule } from "../../../../src";

import { ApiComponent } from "./api/api.component";
import { CodeblockComponent } from "./codeblock/codeblock.component";
Expand Down
4 changes: 2 additions & 2 deletionsdemo/src/app/modals/alert.modal.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { Component } from "@angular/core";
import {SuiModal, ComponentModalConfig, ModalSize } from "ng2-semantic-ui";
import {Modal, ComponentModalConfig, ModalSize } from "../../../../src";

interface IAlertModalContext {
message:string;
Expand All@@ -19,7 +19,7 @@ interface IAlertModalContext {
`
})
export class AlertModalComponent {
constructor(public modal:SuiModal<IAlertModalContext, void, void>) {}
constructor(public modal:Modal<IAlertModalContext, void, void>) {}
}

export class AlertModal extends ComponentModalConfig<IAlertModalContext, void, void> {
Expand Down
4 changes: 2 additions & 2 deletionsdemo/src/app/modals/confirm.modal.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { Component } from "@angular/core";
import {SuiModal,ComponentModalConfig, ModalSize} from "ng2-semantic-ui";
import { ComponentModalConfig, ModalSize, Modal} from "../../../../src";

interface IConfirmModalContext {
question:string;
Expand All@@ -20,7 +20,7 @@ interface IConfirmModalContext {
`
})
export class ConfirmModalComponent {
constructor(public modal:SuiModal<IConfirmModalContext, void, void>) {}
constructor(public modal:Modal<IConfirmModalContext, void, void>) {}
}

export class ConfirmModal extends ComponentModalConfig<IConfirmModalContext, void, void> {
Expand Down
2 changes: 1 addition & 1 deletiondemo/src/app/modals/demo-modals.module.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { SuiModalModule } from "ng2-semantic-ui";
import { SuiModalModule } from "../../../../src";
import { AlertModalComponent } from "./alert.modal";
import { ConfirmModalComponent } from "./confirm.modal";

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import { Component, OnDestroy } from "@angular/core";
import { SuiLocalizationService } from "ng2-semantic-ui";
import locales from "ng2-semantic-ui/locales";
import { SuiLocalizationService } from "../../../../../../src";
import locales from "../../../../../../src/behaviors/localization/locales";

const exampleTemplate = `
<div class="ui segments">
Expand Down
2 changes: 1 addition & 1 deletiondemo/src/app/pages/demo-pages.module.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,7 +2,7 @@ import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { RouterModule } from "@angular/router";
import { SuiModule } from "ng2-semantic-ui";
import { SuiModule } from "../../../../src";
import { DemoComponentsModule } from "../components/demo-components.module";

import { GettingStartedPage } from "./getting-started/getting-started.page";
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import { Component } from "@angular/core";
import { ApiDefinition } from "../../../components/api/api.component";
import { DatepickerMode } from "ng2-semantic-ui";
import { DatepickerMode } from "../../../../../../src";

const exampleStandardTemplate = `
<div class="ui form">
Expand Down
6 changes: 3 additions & 3 deletionsdemo/src/app/pages/modules/modal/modal.page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,8 +2,8 @@ import { Component, ViewChild } from "@angular/core";
import { ApiDefinition } from "../../../components/api/api.component";
import {
SuiModalService, ModalTemplate, TemplateModalConfig, ComponentModalConfig,
ModalSize,SuiModal
} from "ng2-semantic-ui";
ModalSize,Modal
} from "../../../../../../src";
import { AlertModal } from "../../../modals/alert.modal";

const exampleTemplateModalTemplate = `
Expand DownExpand Up@@ -266,7 +266,7 @@ interface IConfirmModalContext {
template: exampleComponentModalTemplate
})
export class ConfirmModalComponent {
constructor(public modal:SuiModal<IConfirmModalContext, void, void>) {}
constructor(public modal:Modal<IConfirmModalContext, void, void>) {}
}

export class ConfirmModal extends ComponentModalConfig<IConfirmModalContext, void, void> {
Expand Down
2 changes: 1 addition & 1 deletiondemo/src/app/pages/modules/popup/popup.page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import { Component, Input } from "@angular/core";
import { ApiDefinition } from "../../../components/api/api.component";
import { SuiPopupConfig } from "ng2-semantic-ui";
import { SuiPopupConfig } from "../../../../../../src";

const exampleStandardTemplate = `
<button class="ui green icon button" suiPopup popupHeader="Example" popupText="This is an example popup">
Expand Down
2 changes: 1 addition & 1 deletiondemo/src/app/pages/modules/search/search.page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import { Component } from "@angular/core";
import { ApiDefinition } from "../../../components/api/api.component";
import { SuiModalService } from "ng2-semantic-ui";
import { SuiModalService } from "../../../../../../src";
import { AlertModal } from "../../../modals/alert.modal";

const exampleStandardTemplate = `
Expand Down
8 changes: 8 additions & 0 deletionsdemo/src/app/pages/modules/select/select.page.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,6 +39,14 @@ <h4 class="ui header">Variations</h4>
<example-select-variations result></example-select-variations>
</demo-example>

<demo-example [code]="exampleClearableTemplate">
<div info>
<h4 class="ui header">Clearable select</h4>
<p>A select can have a "clear" icon to reset the selected value. It's useful if you want to use a <code>SuiSelect</code> as filter</p>
</div>
<example-clearable-select result></example-clearable-select>
</demo-example>

<demo-example [code]="exampleInMenuSearchTemplate">
<div info>
<h4 class="ui header">Search In-Menu</h4>
Expand Down
29 changes: 29 additions & 0 deletionsdemo/src/app/pages/modules/select/select.page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -91,6 +91,18 @@ const exampleVariationsTemplate = `
</div>
`;

const exampleClearableTemplate = `
<sui-select class="selection"
[(ngModel)]="selectedOption"
[options]="filters"
[isClearable]="true"

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

is this fix in old version ???

#select>
<sui-select-option *ngFor="let option of select.filteredOptions"
[value]="option">
</sui-select-option>
</sui-select>
`;

const exampleInMenuSearchTemplate = `
<sui-multi-select [(ngModel)]="selected"
[options]="options"
Expand DownExpand Up@@ -221,6 +233,12 @@ export class SelectPage {
description: "Sets whether the multi select is searchable.",
defaultValue: "false"
},
{
name: "isСlearable",
type: "boolean",
description: "Sets whether the select is clearable.",
defaultValue: "false"
},
{
name: "optionFormatter",
type: "(result:T, query?:string) => string",
Expand DownExpand Up@@ -408,6 +426,7 @@ export class SelectPage {
];
public exampleStandardTemplate:string = exampleStandardTemplate;
public exampleVariationsTemplate:string = exampleVariationsTemplate;
public exampleClearableTemplate:string = exampleClearableTemplate;
public exampleInMenuSearchTemplate:string = exampleInMenuSearchTemplate;
public exampleTemplateTemplate:string = exampleTemplateTemplate;
public formatterCode:string = `
Expand DownExpand Up@@ -468,6 +487,15 @@ export class SelectExampleVariations {
public filters:string[] = ["Important", "Announcement", "Discussion"];
}

@Component({
selector: "example-clearable-select",
template: exampleClearableTemplate
})
export class SelectClearableExample {
public selectedOption:string;
public filters:string[] = ["Important", "Announcement", "Discussion"];
}

@Component({
selector: "example-select-in-menu-search",
template: exampleInMenuSearchTemplate
Expand DownExpand Up@@ -520,6 +548,7 @@ export const SelectPageComponents = [

SelectExampleStandard,
SelectExampleVariations,
SelectClearableExample,
SelectExampleInMenuSearch,
SelectExampleTemplate,
SelectExampleLookupSearch
Expand Down
2 changes: 1 addition & 1 deletiondemo/src/app/pages/modules/tabs/tabs.page.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
import { Component } from "@angular/core";
import { ApiDefinition } from "../../../components/api/api.component";
import { SuiModalService } from "ng2-semantic-ui";
import { SuiModalService } from "../../../../../../src";
import { AlertModal } from "../../../modals/alert.modal";

const exampleStandardTemplate = `
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { Component } from "@angular/core";
import { SuiTransition, Transition, TransitionDirection, TransitionController } from "ng2-semantic-ui";
import { SuiTransition, Transition, TransitionDirection, TransitionController } from "../../../../../../src";
import { ApiDefinition } from "../../../components/api/api.component";

const exampleStandardTemplate = `
Expand Down
44 changes: 41 additions & 3 deletionssrc/modules/select/components/select.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import { Component, ViewContainerRef, ViewChild, Output, EventEmitter, ElementRef, Directive, Input } from "@angular/core";
import { ICustomValueAccessorHost, customValueAccessorFactory, CustomValueAccessor } from "../../../misc/util/internal";
import { ICustomValueAccessorHost, customValueAccessorFactory, CustomValueAccessor, HandledEvent } from "../../../misc/util/internal";
import { SuiLocalizationService } from "../../../behaviors/localization/internal";
import { SuiSelectBase } from "../classes/select-base";
import { SuiSelectOption } from "./select-option";
Expand All@@ -20,7 +20,8 @@ import { SuiSelectOption } from "./select-option";
<span *ngIf="!optionTemplate && selectedOption != undefined" [innerHTML]="configuredFormatter(selectedOption)"></span>
</div>
<!-- Dropdown icon -->
<i class="{{ icon }} icon" (click)="onCaretClick($event)"></i>
<i *ngIf="selectedOption && !isSearching && isClearable" class="remove icon deselect" (click)="onRemoveClick($event)"></i>
<i *ngIf="!selectedOption || !isClearable" class="{{ icon }} icon" (click)="onCaretClick($event)"></i>
<!-- Select dropdown menu -->
<div class="menu"
suiDropdownMenu
Expand All@@ -33,7 +34,31 @@ import { SuiSelectOption } from "./select-option";
{{ localeValues.noResultsMessage }}
</div>
</div>
`
`,
styles: [`
:host .remove.icon.deselect {
position: absolute;
width: auto;
height: auto;
line-height: 1.21428571em;
top: .78571429em;
right: 1em;
margin: -.78571429em;
opacity: .6;
font-size: 1.07142857em;
padding: .6em;
-webkit-transition: opacity .1s ease;
transition: opacity .1s ease;
z-index: 3;
}
:host .remove.icon.deselect.larger {
padding: .91666667em;
font-size: .85714286em;
}
:host .remove.icon.deselect:hover {
opacity: 1;
}
`]
})
export class SuiSelect<T, U> extends SuiSelectBase<T, U> implements ICustomValueAccessorHost<U> {
public selectedOption?:T;
Expand All@@ -57,12 +82,25 @@ export class SuiSelect<T, U> extends SuiSelectBase<T, U> implements ICustomValue
this._placeholder = placeholder;
}

@Input()
public isClearable:boolean;

constructor(element:ElementRef, localizationService:SuiLocalizationService) {
super(element, localizationService);

this.isClearable = false;
this.selectedOptionChange = new EventEmitter<U>();
}

public onRemoveClick(e:HandledEvent):void {
if (!e.eventHandled) {
e.eventHandled = true;
this.selectedOption = undefined;
this.selectedOptionChange.emit(undefined);
this._renderedOptions.forEach(o => o.isActive = false);
}
}

protected optionsUpdateHook():void {
if (!this._writtenOption && this.selectedOption) {
// We need to check the option still exists.
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp