8000 feat(mention): add mention first (#481) · atinc/ngx-tethys@534c05c · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 534c05c

Browse files
why520crazywhy520crazy
authored
feat(mention): add mention first (#481)
* feat(mention): add mention first * chore: remove unused files * test: remove dom-inputevent for test * refactor(mention): extract textarea logic to adapter
1 parent f49c16b commit 534c05c

File tree

35 files changed

+1517
-62
lines changed
  • mention-section.component.html
  • mention-section.component.ts
  • module.ts
  • styles.scss
  • index.ts
  • styles.scss
  • core
  • src

    • 35 files changed

    +1517
    -62
    lines changed

    ‎.vscode/settings.json

    Lines changed: 1 addition & 1 deletion
    Original file line numberDiff line numberDiff line change
    @@ -21,5 +21,5 @@
    2121
    "uploaders",
    2222
    "deletable"
    2323
    ],
    24-
    "cSpell.words": ["Newable", "Positioner", "draggables"]
    24+
    "cSpell.words": ["Newable", "Positioner", "draggables", "inputor"]
    2525
    }

    ‎demo/src/app/app.routes.ts

    Lines changed: 5 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -61,6 +61,7 @@ import { DemoTypographyComponent } from './components/+typography/typography.com
    6161
    import { DemoSkeletonSectionComponent } from './components/+skeleton';
    6262
    import { DemoVoteComponent } from './components/+vote/vote.component';
    6363
    import { DemoResultSectionComponent } from './components/+result/result-section.component';
    64+
    import { DemoMentionSectionComponent } from './components/+mention';
    6465

    6566
    const appRoutes = [
    6667
    {
    @@ -315,6 +316,10 @@ const appRoutes = [
    315316
    {
    316317
    path: 'components/result',
    317318
    component: DemoResultSectionComponent
    319+
    },
    320+
    {
    321+
    path: 'components/mention',
    322+
    component: DemoMentionSectionComponent
    318323
    }
    319324
    ];
    320325

    ‎demo/src/app/components/+mention/api-parameters.ts

    Lines changed: 35 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,35 @@
    1+
    export const apiMentionParameters = [
    2+
    {
    3+
    property: 'thyMention',
    4+
    description: 'Mention config',
    5+
    type: 'Mention[]',
    6+
    default: '[]'
    7+
    }
    8+
    ];
    9+
    10+
    export const apiMentionItemParameters = [
    11+
    {
    12+
    property: 'trigger',
    13+
    description: 'Mention 触发字符，比如 @ #',
    14+
    type: 'string',
    15+
    default: ''
    16+
    },
    17+
    {
    18+
    property: 'data',
    19+
    description: 'Mention 选择数据源',
    20+
    type: 'Array<Item>',
    21+
    default: ''
    22+
    },
    23+
    {
    24+
    property: 'displayTemplateRef',
    25+
    description: '显示选择项的模板，默认只显示 name',
    26+
    type: 'TemplateRef<Item>',
    27+
    default: ''
    28+
    },
    29+
    {
    30+
    property: 'insertTransform',
    31+
    description: '插入字符转换器，默认插入 ${trigger}${name}',
    32+
    type: '(item: Item) => string',
    33+
    default: ''
    34+
    }
    35+
    ];

    ‎demo/src/app/components/+mention/basic/basic.component.html

    Lines changed: 14 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,14 @@
    1+
    <div class="demo-card">
    2+
    <textarea
    3+
    placeholder="Mention people using @, using # to relate task, quick reply using /"
    4+
    thyInput
    5+
    [thyMention]="mentions"
    6+
    [(ngModel)]="value"
    7+
    ></textarea>
    8+
    </div>
    9+
    10+
    <ng-template #member let-member>
    11+
    <thy-avatar thySize="sm" [thyName]="member.display_name" [thyShowName]="true"></thy-avatar>
    12+
    <span class="text-desc ml-2">({{ member.name }})</span>
    13+
    <!-- {{member.display_name}} - {{member.name}} -->
    14+
    </ng-template>

    ‎demo/src/app/components/+mention/basic/basic.component.ts

    Lines changed: 106 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,106 @@
    1+
    import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
    2+
    import { Mention } from 'ngx-tethys/mention/interfaces';
    3+
    4+
    const PEOPLE_NAMES = [
    5+
    'Jacob',
    6+
    'Isabella',
    7+
    'Ethan',
    8+
    'Emma',
    9+
    'Michael',
    10+
    'Olivia',
    11+
    'Alexander',
    12+
    'Sophia',
    13+
    'William',
    14+
    'Ava',
    15+
    'Joshua',
    16+
    'Emily',
    17+
    'Daniel',
    18+
    'Madison'
    19+
    ];
    20+
    @Component({
    21+
    selector: 'app-demo-mention-basic',
    22+
    templateUrl: './basic.component.html'
    23+
    })
    24+
    export class DemoMentionBasicComponent implements OnInit {
    25+
    value = `This is text!`;
    26+
    @ViewChild('member') memberDisplayTemplateRef: TemplateRef<any>;
    27+
    28+
    mentions: Mention<any>[];
    29+
    30+
    constructor() {}
    31+
    32+
    ngOnInit(): void {
    33+
    this.mentions = [
    34+
    {
    35+
    trigger: '@',
    36+
    data: [
    37+
    {
    38+
    name: 'peter',
    39+
    display_name: 'Peter Xu'
    40+
    },
    41+
    {
    42+
    name: 'lily',
    43+
    display_name: 'Lily Li'
    44+
    }
    45+
    ].concat(
    46+
    PEOPLE_NAMES.map(name => {
    47+
    return {
    48+
    name: name,
    49+
    display_name: name
    50+
    };
    51+
    })
    52+
    ),
    53+
    displayTemplateRef: this.memberDisplayTemplateRef
    54+
    },
    55+
    {
    56+
    trigger: '#',
    57+
    data: [
    58+
    {
    59+
    name: 'Task 1',
    60+
    identifier: 'AGL-1'
    61+
    },
    62+
    {
    63+
    name: 'Task 2',
    64+
    identifier: 'AGL-2'
    65+
    },
    66+
    {
    67+
    name: 'Task 3',
    68+
    identifier: 'AGL-3'
    69+
    }
    70+
    ],
    71+
    insertTransform: (item: { name: string; identifier: string }) => {
    72+
    return `#${item.identifier}`;
    73+
    },
    74+
    search: (term, items) => {
    75+
    if (term) {
    76+
    return items.filter(item => {
    77+
    return (
    78+
    item.identifier.toLowerCase().includes(term.toLowerCase()) ||
    79+
    item.name.toLowerCase().includes(term.toLowerCase())
    80+
    );
    81+
    });
    82+
    } else {
    83+
    return items;
    84+
    }
    85+
    }
    86+
    },
    87+
    {
    88+
    trigger: '/',
    89+
    data: [
    90+
    {
    91+
    name: `I'm busy. I'll get back to you later'`
    92+
    },
    93+
    {
    94+
    name: `This story is in planing`
    95+
    },
    96+
    {
    97+
    name: `This story is in developing`
    98+
    }
    99+
    ],
    100+
    insertTransform: (item: { name: string }) => {
    101+
    return item.name;
    102+
    }
    103+
    }
    104+
    ];
    105+
    }
    106+
    }

    ‎demo/src/app/components/+mention/content-editable/content-editable.component.html

    Lines changed: 14 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,14 @@
    1+
    <div class="demo-card">
    2+
    <div
    3+
    class="editable"
    4+
    contenteditable="true"
    5+
    placeholder="Mention people using @, using # to relate task, quick reply using /"
    6+
    [thyMention]="mentions"
    7+
    ></div>
    8+
    </div>
    9+
    10+
    <ng-template #member let-member>
    11+
    <thy-avatar thySize="sm" [thyName]="member.display_name" [thyShowName]="true"></thy-avatar>
    12+
    <span class="text-desc ml-2">({{ member.name }})</span>
    13+
    <!-- {{member.display_name}} - {{member.name}} -->
    14+
    </ng-template>

    ‎demo/src/app/components/+mention/content-editable/content-editable.component.scss

    Lines changed: 4 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,4 @@
    1+
    .editable {
    2+
    border: 1px solid $gray-300;
    3+
    height: 100px;
    4+
    }

    ‎demo/src/app/components/+mention/content-editable/content-editable.component.ts

    Lines changed: 72 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,72 @@
    1+
    import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
    2+
    import { Mention } from 'ngx-tethys/mention/interfaces';
    3+
    4+
    @Component({
    5+
    selector: 'app-demo-mention-content-editable',
    6+
    templateUrl: './content-editable.component.html'
    7+
    })
    8+
    export class DemoMentionContentEditableComponent implements OnInit {
    9+
    value = `This is text!`;
    10+
    11+
    @ViewChild('member') memberDisplayTemplateRef: TemplateRef<any>;
    12+
    13+
    mentions: Mention[];
    14+
    15+
    constructor() {}
    16+
    17+
    ngOnInit(): void {
    18+
    this.mentions = [
    19+
    {
    20+
    trigger: '@',
    21+
    data: [
    22+
    {
    23+
    name: 'peter',
    24+
    display_name: 'Peter Xu'
    25+
    },
    26+
    {
    27+
    name: 'lily',
    28+
    display_name: 'Lily Li'
    29+
    }
    30+
    ],
    31+
    displayTemplateRef: this.memberDisplayTemplateRef
    32+
    },
    33+
    {
    34+
    trigger: '#',
    35+
    data: [
    36+
    {
    37+
    name: 'Task 1',
    38+
    identifier: 'AGL-1'
    39+
    },
    40+
    {
    41+
    name: 'Task 2',
    42+
    identifier: 'AGL-2'
    43+
    },
    44+
    {
    45+
    name: 'Task 3',
    46+
    identifier: 'AGL-3'
    47+
    }
    48+
    ],
    49+
    insertTransform: (item: { name: string; identifier: string }) => {
    50+
    return `#${item.identifier}`;
    51+
    }
    52+
    },
    53+
    {
    54+
    trigger: '/',
    55+
    data: [
    56+
    {
    57+
    name: `I'm busy. I'll get back to you later'`
    58+
    },
    59+
    {
    60+
    name: `This story is in planing`
    61+
    },
    62+
    {
    63+
    name: `This story is in developing`
    64+
    }
    65+
    ],
    66+
    insertTransform: (item: { name: string }) => {
    67+
    return item.name;
    68+
    }
    69+
    }
    70+
    ];
    71+
    }
    72+
    }

    ‎demo/src/app/components/+mention/index.ts

    Lines changed: 2 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,2 @@
    1+
    export * from './module';
    2+
    export * from './mention-section.component';

    ‎demo/src/app/components/+mention/mention-section.component.html

    Lines changed: 5 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,5 @@
    1+
    <app-live-demos [data]="liveDemos"></app-live-demos>
    2+
    3+
    <api-parameters title="thy-mention 参数列表" [parameters]="apiMentionParameters"></api-parameters>
    4+
    5+
    <api-parameters title="Mention 参数列表" [parameters]="apiMentionItemParameters"></api-parameters>

    ‎demo/src/app/components/+mention/mention-section.component.ts

    Lines changed: 54 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,54 @@
    1+
    import { Component } from '@angular/core';
    2+
    import { LiveDemoCodeExample } from '../../core/live-demo/live-demo.component';
    3+
    4+
    import { apiMentionParameters, apiMentionItemParameters } from './api-parameters';
    5+
    import { DemoMentionBasicComponent } from './basic/basic.component';
    6+
    import { DemoMentionContentEditableComponent } from './content-editable/content-editable.component';
    7+
    @Component({
    8+
    selector: 'demo-mention-section',
    9+
    templateUrl: './mention-section.component.html'
    10+
    })
    11+
    export class DemoMentionSectionComponent {
    12+
    apiMentionParameters = apiMentionParameters;
    13+
    14+
    apiMentionItemParameters = apiMentionItemParameters;
    15+
    16+
    liveDemos: LiveDemoCodeExample[] = [
    17+
    {
    18+
    title: '提及',
    19+
    component: DemoMentionBasicComponent,
    20+
    description: ``,
    21+
    codeExamples: [
    22+
    {
    23+
    type: 'html',
    24+
    name: 'basic.component.html',
    25+
    content: require('!!raw-loader!./basic/basic.component.html')
    26+
    },
    27+
    {
    28+
    type: 'ts',
    29+
    name: 'basic.component.ts',
    30+
    content: require('!!raw-loader!./basic/basic.component.ts')
    31+
    }
    32+
    ]
    33+
    },
    34+
    {
    35+
    title: '提及 Content Editable',
    36+
    component: DemoMentionContentEditableComponent,
    37+
    description: ``,
    38+
    codeExamples: [
    39+
    {
    40+
    type: 'html',
    41+
    name: 'content-editable.component.html',
    42+
    content: require('!!raw-loader!./content-editable/content-editable.component.html')
    43+
    },
    44+
    {
    45+
    type: 'ts',
    46+
    name: 'content-editable.component.ts',
    47+
    content: require('!!raw-loader!./content-editable/content-editable.component.ts')
    48+
    }
    49+
    ]
    50+
    }
    51+
    ];
    52+
    53+
    constructor() {}
    54+
    }

    ‎demo/src/app/components/+mention/module.ts

    Lines changed: 15 additions & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1,15 @@
    1+
    import { NgModule } from '@angular/core';
    2+
    import { CommonModule } from '@angular/common';
    3+
    import { SharedModule } from 'app/shared.module';
    4+
    import { DemoMentionSectionComponent } from './mention-section.component';
    5+
    import { DemoMentionBasicComponent } from './basic/basic.component';
    6+
    import { DemoMentionContentEditableComponent } from './content-editable/content-editable.component';
    7+
    8+
    @NgModule({
    9+
    declarations: [DemoMentionSectionComponent, DemoMentionBasicComponent, DemoMentionContentEditableComponent],
    10+
    imports: [CommonModule, SharedModule],
    11+
    exports: [],
    12+
    providers: [],
    13+
    entryComponents: [DemoMentionBasicComponent, DemoMentionContentEditableComponent]
    14+
    })
    15+
    export class DemoMentionModule {}

    ‎demo/src/app/components/+mention/styles.scss

    Lines changed: 1 addition & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -0,0 +1 @@
    1+
    @import './content-editable/content-editable.component.scss';

    ‎demo/src/app/components/index.ts

    Lines changed: 3 additions & 1 deletion
    Original file line numberDiff line numberDiff line change
    @@ -89,6 +89,7 @@ import { DemoCopySectionComponent } from './+copy/copy-section.component';
    8989
    import { DemoCheckboxModule } from './+form-checkbox';
    9090
    import { DemoVoteWeakComponent } from './+vote/weak/vote-weak.component';
    9191
    import { DemoVoteBasicComponent } from './+vote/basic/vote-basic.component';
    92+
    import { DemoMentionModule } from './+mention';
    9293

    9394
    export const COMPONENTS = [
    9495
    DemoCopySectionComponent,
    @@ -241,5 +242,6 @@ export const DEMO_MODULES = [
    241242
    DemoCardModule,
    242243
    DemoSkeletonModule,
    243244
    DemoAlertModule,
    244-
    DemoCheckboxModule
    245+
    DemoCheckboxModule,
    246+
    DemoMentionModule
    245247
    ];

    ‎demo/src/app/components/styles.scss

    Lines changed: 1 addition & 0 deletions
    Original file line numberDiff line numberDiff line change
    @@ -1,2 +1,3 @@
    11
    @import './+button/button-section.scss';
    22
    @import './+skeleton/skeleton-section.scss';
    3+
    @import './+mention/styles.scss';

    ‎demo/src/app/core/menu.ts

    Lines changed: 2 additions & 1 deletion
    Original file line numberDiff line numberDiff line change
    @@ -100,7 +100,8 @@ export const allMenus = [
    100100
    { name: 'Tree Select', zhName: '树选择', routePath: 'tree-select' },
    101101
    { name: 'Strength', zhName: '强度', routePath: 'strength' },
    102102
    { name: 'Uploader', zhName: '上传', routePath: 'uploader' },
    103-
    { name: 'Editor', zhName: '编辑器', routePath: 'editor' }
    103+
    { name: 'Editor', zhName: '编辑器', routePath: 'editor' },
    104+
    { name: 'Mention', zhName: '提及', routePath: 'mention' }
    104105
    ]
    105106
    },
    106107
    {

    0 commit comments

    Comments
     (0)
    0