Use custom events for inputs (#42)

* In-progress: use custom events for inputs * Pass events to parent component * Add unit test for plan-details * Add E2E test * Replace Listener with callback * Make E2E props more readable * PR feedback
manifoldco · Mar 21, 2019 · 402520b · 402520b
1 parent 1833266
commit 402520b
Show file tree

Hide file tree

Showing 15 changed files with 501 additions and 177 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -19,23 +19,11 @@ import {
 } from './types/Input';
 import {
   Option,
-  Value,
 } from 'types/Select';
 
 
 export namespace Components {
 
-  interface CustomPlanFeature {
-    'feature': Catalog.ExpandedFeature;
-    'planLabel': string;
-    'selectedValue': string;
-  }
-  interface CustomPlanFeatureAttributes extends StencilHTMLAttributes {
-    'feature'?: Catalog.ExpandedFeature;
-    'planLabel'?: string;
-    'selectedValue'?: string;
-  }
-
   interface FeaturedService {
     'logo': string;
     'name': string;
@@ -193,61 +181,62 @@ export namespace Components {
   }
 
   interface MfSelect {
+    'defaultValue'?: string;
     'name': string;
-    'onChange': (e: UIEvent) => void;
     'options': Option[];
     'required'?: boolean;
-    'selectedValue'?: Value;
   }
   interface MfSelectAttributes extends StencilHTMLAttributes {
+    'defaultValue'?: string;
     'name'?: string;
-    'onChange'?: (e: UIEvent) => void;
+    'onUpdateValue'?: (event: CustomEvent) => void;
     'options'?: Option[];
     'required'?: boolean;
-    'selectedValue'?: Value;
   }
 
   interface MfSlider {
+    'defaultValue'?: number;
     'error'?: string;
     'increment': number;
     'max': number;
     'min': number;
     'name': string;
-    'onChange': (e: Event) => void;
-    'selectedValue': number;
     'suffix': string;
   }
   interface MfSliderAttributes extends StencilHTMLAttributes {
+    'defaultValue'?: number;
     'error'?: string;
     'increment'?: number;
     'max'?: number;
     'min'?: number;
     'name'?: string;
-    'onChange'?: (e: Event) => void;
-    'selectedValue'?: number;
+    'onUpdateValue'?: (event: CustomEvent) => void;
     'suffix'?: string;
   }
 
   interface MfToggle {
     'ariaLabelledby'?: string;
+    'defaultValue'?: boolean;
     'disabled'?: boolean;
     'label'?: string;
     'name': string;
   }
   interface MfToggleAttributes extends StencilHTMLAttributes {
     'ariaLabelledby'?: string;
+    'defaultValue'?: boolean;
     'disabled'?: boolean;
     'label'?: string;
     'name'?: string;
+    'onUpdateValue'?: (event: CustomEvent) => void;
   }
 
   interface PlanDetails {
     'plan': Catalog.ExpandedPlan;
-    'product': Catalog.ExpandedProduct;
+    'product': Catalog.Product;
   }
   interface PlanDetailsAttributes extends StencilHTMLAttributes {
     'plan'?: Catalog.ExpandedPlan;
-    'product'?: Catalog.ExpandedProduct;
+    'product'?: Catalog.Product;
   }
 
   interface PlanMenu {
@@ -332,7 +321,6 @@ export namespace Components {
 
 declare global {
   interface StencilElementInterfaces {
-    'CustomPlanFeature': Components.CustomPlanFeature;
     'FeaturedService': Components.FeaturedService;
     'ImageGallery': Components.ImageGallery;
     'LinkButton': Components.LinkButton;
@@ -360,7 +348,6 @@ declare global {
   }
 
   interface StencilIntrinsicElements {
-    'custom-plan-feature': Components.CustomPlanFeatureAttributes;
     'featured-service': Components.FeaturedServiceAttributes;
     'image-gallery': Components.ImageGalleryAttributes;
     'link-button': Components.LinkButtonAttributes;
@@ -388,12 +375,6 @@ declare global {
   }
 
 
-  interface HTMLCustomPlanFeatureElement extends Components.CustomPlanFeature, HTMLStencilElement {}
-  var HTMLCustomPlanFeatureElement: {
-    prototype: HTMLCustomPlanFeatureElement;
-    new (): HTMLCustomPlanFeatureElement;
-  };
-
   interface HTMLFeaturedServiceElement extends Components.FeaturedService, HTMLStencilElement {}
   var HTMLFeaturedServiceElement: {
     prototype: HTMLFeaturedServiceElement;
@@ -539,7 +520,6 @@ declare global {
   };
 
   interface HTMLElementTagNameMap {
-    'custom-plan-feature': HTMLCustomPlanFeatureElement
     'featured-service': HTMLFeaturedServiceElement
     'image-gallery': HTMLImageGalleryElement
     'link-button': HTMLLinkButtonElement
@@ -567,7 +547,6 @@ declare global {
   }
 
   interface ElementTagNameMap {
-    'custom-plan-feature': HTMLCustomPlanFeatureElement;
     'featured-service': HTMLFeaturedServiceElement;
     'image-gallery': HTMLImageGalleryElement;
     'link-button': HTMLLinkButtonElement;

diff --git a/src/components/custom-plan-feature/custom-plan-feature.tsx b/src/components/custom-plan-feature/custom-plan-feature.tsx
diff --git a/src/components/custom-plan-feature/readme.md b/src/components/custom-plan-feature/readme.md
diff --git a/src/components/mf-select/mf-select.tsx b/src/components/mf-select/mf-select.tsx
@@ -1,23 +1,32 @@
-import { Component, Prop } from '@stencil/core';
-import { Option, Value } from 'types/Select';
+import { Component, Prop, Event, EventEmitter, Watch } from '@stencil/core';
+import { Option } from 'types/Select';
 
 @Component({
   tag: 'mf-select',
   styleUrl: 'mf-select.css',
   scoped: true,
 })
 export class MfSelect {
-  @Prop() options: Option[] = [];
-  @Prop() selectedValue?: Value;
+  @Prop() defaultValue?: string;
   @Prop() name: string;
+  @Prop() options: Option[] = [];
   @Prop() required?: boolean;
-  @Prop() onChange: (e: UIEvent) => void;
+  @Event() updateValue: EventEmitter;
+  @Watch('defaultValue') watchHandler(newVal: string) {
+    this.updateValue.emit({ name: this.name, value: newVal });
+  }
+
+  onChangeHandler = (e: Event) => {
+    if (!e.target) return;
+    const { value } = e.target as HTMLSelectElement;
+    this.updateValue.emit({ name: this.name, value });
+  };
 
   render() {
     return (
-      <select name={this.name} required={this.required} onChange={this.onChange}>
+      <select name={this.name} required={this.required} onChange={this.onChangeHandler}>
         {this.options.map(({ label, value }) => (
-          <option value={value} selected={this.selectedValue === value}>
+          <option value={value} selected={value === this.defaultValue}>
             {label}
           </option>
         ))}

diff --git a/src/components/mf-select/readme.md b/src/components/mf-select/readme.md
@@ -7,13 +7,19 @@
 
 ## Properties
 
-| Property        | Attribute        | Description | Type                            | Default     |
-| --------------- | ---------------- | ----------- | ------------------------------- | ----------- |
-| `name`          | `name`           |             | `string`                        | `undefined` |
-| `onChange`      | --               |             | `(e: UIEvent) => void`          | `undefined` |
-| `options`       | --               |             | `Option[]`                      | `[]`        |
-| `required`      | `required`       |             | `boolean \| undefined`          | `undefined` |
-| `selectedValue` | `selected-value` |             | `number \| string \| undefined` | `undefined` |
+| Property       | Attribute       | Description | Type                   | Default     |
+| -------------- | --------------- | ----------- | ---------------------- | ----------- |
+| `defaultValue` | `default-value` |             | `string \| undefined`  | `undefined` |
+| `name`         | `name`          |             | `string`               | `undefined` |
+| `options`      | --              |             | `Option[]`             | `[]`        |
+| `required`     | `required`      |             | `boolean \| undefined` | `undefined` |
+
+
+## Events
+
+| Event         | Description | Type                |
+| ------------- | ----------- | ------------------- |
+| `updateValue` |             | `CustomEvent<void>` |
 
 
 ----------------------------------------------

diff --git a/src/components/mf-slider/mf-slider.tsx b/src/components/mf-slider/mf-slider.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, Prop, Event, EventEmitter, Watch } from '@stencil/core';
 import { FieldType } from '../../types/Input';
 
 @Component({
@@ -7,21 +7,33 @@ import { FieldType } from '../../types/Input';
   scoped: true,
 })
 export class MfSlider {
-  @Prop() min: number = 0;
-  @Prop() max: number;
+  @Prop() defaultValue?: number;
+  @Prop() error?: string;
   @Prop() increment: number = 1;
+  @Prop() max: number;
+  @Prop() min: number = 0;
   @Prop() name: string = '';
-  @Prop() selectedValue: number;
   @Prop() suffix: string = '';
-  @Prop() onChange: (e: Event) => void;
-  @Prop() error?: string;
+  @Event() updateValue: EventEmitter;
+  @Watch('defaultValue') watchHandler(newVal: number) {
+    this.updateValue.emit({ name: this.name, value: newVal });
+  }
+
+  onChangeHandler = (e: Event) => {
+    if (!e.target) return;
+    const { value } = e.target as HTMLInputElement;
+    this.updateValue.emit({
+      name: this.name,
+      value: parseInt(value, 10),
+    });
+  };
 
   get positionCount() {
     return (this.max - this.min) / this.increment;
   }
 
   render() {
-    const value = this.selectedValue || this.min;
+    const value = this.defaultValue || this.min;
     return (
       <div class="container">
         {this.positionCount < 500 ? (
@@ -32,8 +44,6 @@ export class MfSlider {
               min={this.min}
               step={this.increment}
               value={value}
-              onInput={e => this.onChange(e)}
-              onChange={e => this.onChange(e)}
               style={{
                 '--slider-position': `${value / (this.max - this.min)}%`,
               }}
@@ -53,10 +63,10 @@ export class MfSlider {
             type={FieldType.Number}
             max={this.max}
             min={this.min}
-            value={value}
-            onChange={e => this.onChange(e)}
+            onChange={this.onChangeHandler}
             required
             step={this.increment}
+            value={value}
           />
           <div class="display-units">{this.suffix}</div>
         </div>