-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: new button system with onclick and typology (#48)
feat: add some props to button and refactor code Co-authored-by: Puria Nafisi Azizi <[email protected]>
- Loading branch information
1 parent
cbbfd17
commit 31b094a
Showing
5 changed files
with
245 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,94 @@ | ||
| import { Component, Host, Prop, h } from '@stencil/core'; | ||
| import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core'; | ||
| import { Color } from '../types'; | ||
| import type { EventEmitter, ComponentInterface } from '@stencil/core'; | ||
|
|
||
| const hasShadowDom = (el: HTMLElement) => { | ||
| return !!el.shadowRoot && !!(el as any).attachShadow; | ||
| }; | ||
|
|
||
| @Component({ | ||
| tag: 'd-button', | ||
| styleUrl: 'd-button.scss', | ||
| shadow: true, | ||
| }) | ||
| export class DButton { | ||
| @Prop() color?: Color = 'primary'; | ||
| // @Prop() outline?: boolean = false; | ||
| @Prop({ reflect: true }) href?: string; | ||
| @Prop({ reflect: true }) disabled?: boolean = false; | ||
| export class DButton implements ComponentInterface { | ||
| private formButtonEl: HTMLButtonElement | null = null; | ||
| private formEl: HTMLFormElement | null = null; | ||
|
|
||
| @Element() el!: HTMLElement; | ||
| @Prop({ reflect: true }) color?: Color = 'primary'; | ||
| @Prop({ mutable: true }) buttonType = 'button'; | ||
| @Prop({ reflect: true }) disabled = false; | ||
| @Watch('disabled') | ||
| disabledChanged() { | ||
| const { disabled } = this; | ||
| if (this.formButtonEl) { | ||
| this.formButtonEl.disabled = disabled; | ||
| } | ||
| } | ||
| @Prop({ reflect: true }) expand?: boolean; | ||
| @Prop() href: string | undefined; | ||
| @Prop({ reflect: true }) size?: 'small' | 'default' | 'large'; | ||
| @Prop() type: 'submit' | 'reset' | 'button' = 'button'; | ||
| @Prop() form?: string | HTMLFormElement; | ||
| @Event() dFocus!: EventEmitter<void>; | ||
| @Event() dBlur!: EventEmitter<void>; | ||
|
|
||
|
|
||
| private get hasIconOnly() { | ||
| return !!this.el.querySelector('[slot="icon-only"]'); | ||
| } | ||
|
|
||
| private submitForm(ev: Event) { | ||
| if (this.formEl && this.formButtonEl) { | ||
| ev.preventDefault(); | ||
| this.formButtonEl.click(); | ||
| } | ||
| } | ||
|
|
||
| private handleClick = (ev: Event) => { | ||
| const { el } = this; | ||
| if (hasShadowDom(el)) { | ||
| this.submitForm(ev); | ||
| } | ||
| }; | ||
|
|
||
| private onFocus = () => { | ||
| this.dFocus.emit(); | ||
| }; | ||
|
|
||
| private onBlur = () => { | ||
| this.dBlur.emit(); | ||
| }; | ||
|
|
||
| render() { | ||
| if (this.href) { | ||
| return ( | ||
| <Host> | ||
| <a class={this.color} href={this.href}> | ||
| <slot></slot> | ||
| </a> | ||
| </Host> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <Host> | ||
| <button class={this.color} disabled={this.disabled} aria-disabled={this.disabled}> | ||
| const { buttonType, type, disabled, size, href, color, expand, hasIconOnly } = this; | ||
| const finalSize = size === undefined ? 'small' : size; | ||
| const TagType = href === undefined ? 'button' : ('a' as any); | ||
| const attrs = TagType === 'button' ? { type } : { href }; | ||
|
|
||
| return ( | ||
| <Host | ||
| onClick={this.handleClick} | ||
| aria-disabled={disabled ? 'true' : null} | ||
| class={{ | ||
| [color]: true, | ||
| [buttonType]: true, | ||
| ['button-block']: expand, | ||
| [`${buttonType}-${finalSize}`]: finalSize !== undefined, | ||
| 'button-has-icon-only': hasIconOnly, | ||
| 'button-disabled': disabled, | ||
| }} | ||
| > | ||
| <TagType {...attrs} class={`button-native ${color}`} part="native" disabled={disabled} onFocus={this.onFocus} onBlur={this.onBlur}> | ||
| <span class="button-inner"> | ||
| <slot name="icon-only"></slot> | ||
| <slot name="start"></slot> | ||
| <slot></slot> | ||
| </button> | ||
| </Host> | ||
| ); | ||
| } | ||
| <slot name="end"></slot> | ||
| </span> | ||
| </TagType> | ||
| </Host> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters