Skip to content

Instantly share code, notes, and snippets.

@nightire

nightire/components.classic-search\.js

Last active May 4, 2020 16:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nightire/771c7170f2a1141dfed1a0bb43ec8be3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nightire/771c7170f2a1141dfed1a0bb43ec8be3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nightire revised this gist May 1, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion controllers.application\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -8,5 +8,5 @@ function generateOptions(amount) {
    export default class ApplicationController extends Controller {
    appName = randomString();

    options = generateOptions(3000);
    options = generateOptions(5000);
    }
  2. nightire created this gist May 1, 2020.
    16 changes: 16 additions & 0 deletions components.classic-search\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    import Component from '@ember/component';
    import { computed } from '@ember/object';

    export default class extends Component {
    query = '';

    @computed('query') get _options() {
    if (this.query) {
    return this.options.filter((option) => {
    return option.value.toLowerCase().lastIndexOf(this.query, 0) === 0;
    });
    } else {
    return this.options;
    }
    }
    }
    16 changes: 16 additions & 0 deletions components.glimmer-search\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    import Component from '@glimmer/component';
    import { tracked } from '@glimmer/tracking';

    export default class extends Component {
    @tracked query = '';

    get options() {
    if (this.query) {
    return this.args.options.filter((option) => {
    return option.value.toLowerCase().lastIndexOf(this.query, 0) === 0;
    });
    } else {
    return this.args.options;
    }
    }
    }
    12 changes: 12 additions & 0 deletions controllers.application\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,12 @@
    import Controller from '@ember/controller';
    import randomString from 'twiddle/utils/random-string';

    function generateOptions(amount) {
    return Array.from(Array(amount)).map(() => ({ value: randomString() }));
    }

    export default class ApplicationController extends Controller {
    appName = randomString();

    options = generateOptions(3000);
    }
    11 changes: 11 additions & 0 deletions templates.application\.hbs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    <h1>Welcome to {{this.appName}}</h1>
    <div style="display: flex">
    <section style="flex-basis: 50%">
    <h2>Filtered in Glimmer Component</h2>
    <GlimmerSearch @options={{this.options}} />
    </section>
    <section style="flex-basis: 50%">
    <h2>Filtered in Classic Component</h2>
    <ClassicSearch @options={{this.options}} />
    </section>
    </div>
    10 changes: 10 additions & 0 deletions templates.components.classic-search\.hbs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <div>
    <Input @value={{this.query}} />
    </div>
    <ul>
    {{#each this._options key="@index" as |option|}}
    <li>
    {{option.value}}
    </li>
    {{/each}}
    </ul>
    10 changes: 10 additions & 0 deletions templates.components.glimmer-search\.hbs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <div>
    <Input @value={{this.query}} />
    </div>
    <ul>
    {{#each this.options key="@index" as |option|}}
    <li>
    {{option.value}}
    </li>
    {{/each}}
    </ul>
    22 changes: 22 additions & 0 deletions twiddle\.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    {
    "version": "0.17.0",
    "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
    },
    "options": {
    "use_pods": false,
    "enable-testing": false
    },
    "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
    },
    "addons": {
    "@glimmer/component": "1.0.0"
    }
    }
    7 changes: 7 additions & 0 deletions utils.random-string\.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    const CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    export default function randomString(amount = 8) {
    return Array.from(Array(amount)).reduce((finale) => {
    return `${finale}${CHARS.charAt(Math.floor(Math.random() * CHARS.length))}`;
    }, '');
    }