@ionic/core
Version:
Base components for Ionic
547 lines (546 loc) • 22 kB
JavaScript
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/
import { Host, h } from "@stencil/core";
import { inheritAriaAttributes, hasShadowDom } from "../../utils/helpers";
import { printIonWarning } from "../../utils/logging/index";
import { createColorClasses, hostContext, openURL } from "../../utils/theme";
import { close } from "ionicons/icons";
import { getIonMode } from "../../global/ionic-global";
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*
* @part native - The native HTML button or anchor element that wraps all child elements.
* @part close-icon - The close icon that is displayed when a fab list opens (uses ion-icon).
*/
export class FabButton {
constructor() {
this.fab = null;
this.formButtonEl = null;
this.formEl = null;
this.inheritedAttributes = {};
/**
* If `true`, the fab button will be show a close icon.
*/
this.activated = false;
/**
* If `true`, the user cannot interact with the fab button.
*/
this.disabled = false;
/**
* When using a router, it specifies the transition direction when navigating to
* another page using `href`.
*/
this.routerDirection = 'forward';
/**
* If `true`, the fab button will show when in a fab-list.
*/
this.show = false;
/**
* If `true`, the fab button will be translucent.
* Only applies when the mode is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/
this.translucent = false;
/**
* The type of the button.
*/
this.type = 'button';
/**
* The icon name to use for the close icon. This will appear when the fab button
* is pressed. Only applies if it is the main button inside of a fab containing a
* fab list.
*/
this.closeIcon = close;
this.onFocus = () => {
this.ionFocus.emit();
};
this.onBlur = () => {
this.ionBlur.emit();
};
this.onClick = (ev) => {
const { el, fab } = this;
if (this.type !== 'button' && hasShadowDom(el)) {
this.submitForm(ev);
}
if (fab) {
fab.toggle();
}
};
}
disabledChanged() {
const { disabled } = this;
if (this.formButtonEl) {
this.formButtonEl.disabled = disabled;
}
}
connectedCallback() {
this.fab = this.el.closest('ion-fab');
}
/**
* The native button rendered inside `ion-fab-button` is in the Shadow DOM and
* does not participate in form submission, so a hidden native button is added
* to the associated form and clicked instead.
*/
renderHiddenButton() {
const formEl = (this.formEl = this.findForm());
if (formEl) {
const { formButtonEl } = this;
// Reuse the existing hidden button, syncing values that changed since it was created.
if (formButtonEl !== null && formEl.contains(formButtonEl)) {
formButtonEl.disabled = this.disabled;
formButtonEl.type = this.type;
return;
}
const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
newFormButtonEl.type = this.type;
newFormButtonEl.style.display = 'none';
newFormButtonEl.disabled = this.disabled;
formEl.appendChild(newFormButtonEl);
}
}
// TODO(FW-7663): share the hidden button and form lookup with ion-button
findForm() {
const { form } = this;
if (form instanceof HTMLFormElement) {
return form;
}
if (typeof form === 'string') {
const el = document.getElementById(form);
if (el) {
if (el instanceof HTMLFormElement) {
return el;
}
else {
printIonWarning(`[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`, this.el);
return null;
}
}
else {
printIonWarning(`[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`, this.el);
return null;
}
}
if (form !== undefined) {
printIonWarning(`[ion-fab-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`, this.el);
return null;
}
return this.el.closest('form');
}
submitForm(ev) {
if (this.formEl && this.formButtonEl) {
ev.preventDefault();
this.formButtonEl.click();
}
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
render() {
const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes, type } = this;
const inList = hostContext('ion-fab-list', el);
const mode = getIonMode(this);
const TagType = href === undefined ? 'button' : 'a';
const attrs = TagType === 'button'
? { type }
: {
download: this.download,
href,
rel: this.rel,
target: this.target,
};
/**
* The hidden button is created during render so that setting `type` or
* `form` after the component loads still adds it to the form.
*/
if (type !== 'button') {
this.renderHiddenButton();
}
return (h(Host, { key: '89e8f2564f12f8c1cd8509a40359202347948846', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
[mode]: true,
'fab-button-in-list': inList,
'fab-button-translucent-in-list': inList && translucent,
'fab-button-close-active': activated,
'fab-button-show': show,
'fab-button-disabled': disabled,
'fab-button-translucent': translucent,
'ion-activatable': true,
'ion-focusable': true,
[`fab-button-${size}`]: size !== undefined,
}) }, h(TagType, { key: '9e2fd462316e1aec50f53fa1b7ad7f02fd399592', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation), ...inheritedAttributes }, h("ion-icon", { key: 'c3bdb8614eb249297afc963810066658dc85efd6', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: 'a6a505b24d21cc716d2e3351ad4c380b95c768d7', class: "button-inner" }, h("slot", { key: 'f44fc1e95533438ee3adc8cc5bdd9e1e85849fd6' })), mode === 'md' && h("ion-ripple-effect", { key: 'b7c7dc7fceb0bb5613239608225f040010b7b2bd' }))));
}
static get is() { return "ion-fab-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"ios": ["fab-button.ios.scss"],
"md": ["fab-button.md.scss"]
};
}
static get styleUrls() {
return {
"ios": ["fab-button.ios.css"],
"md": ["fab-button.md.css"]
};
}
static get properties() {
return {
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Color",
"resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
"references": {
"Color": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::Color",
"referenceLocation": "Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "color"
},
"activated": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the fab button will be show a close icon."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "activated",
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the user cannot interact with the fab button."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"download": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "download"
},
"href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "href"
},
"rel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "rel"
},
"routerDirection": {
"type": "string",
"mutable": false,
"complexType": {
"original": "RouterDirection",
"resolved": "\"back\" | \"forward\" | \"root\"",
"references": {
"RouterDirection": {
"location": "import",
"path": "../router/utils/interface",
"id": "src/components/router/utils/interface.ts::RouterDirection",
"referenceLocation": "RouterDirection"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "router-direction",
"defaultValue": "'forward'"
},
"routerAnimation": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "AnimationBuilder | undefined",
"resolved": "((baseEl: any, opts?: any) => Animation) | undefined",
"references": {
"AnimationBuilder": {
"location": "import",
"path": "../../interface",
"id": "src/interface.d.ts::AnimationBuilder",
"referenceLocation": "AnimationBuilder"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`."
},
"getter": false,
"setter": false
},
"target": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | undefined",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "target"
},
"show": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the fab button will show when in a fab-list."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "show",
"defaultValue": "false"
},
"translucent": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the fab button will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "translucent",
"defaultValue": "false"
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'submit' | 'reset' | 'button'",
"resolved": "\"button\" | \"reset\" | \"submit\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The type of the button."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "type",
"defaultValue": "'button'"
},
"form": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | HTMLFormElement",
"resolved": "HTMLFormElement | string | undefined",
"references": {
"HTMLFormElement": {
"location": "global",
"id": "global::HTMLFormElement"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "form"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'small'",
"resolved": "\"small\" | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The size of the button. Set this to `small` in order to have a mini fab button."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "size"
},
"closeIcon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The icon name to use for the close icon. This will appear when the fab button\nis pressed. Only applies if it is the main button inside of a fab containing a\nfab list."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "close-icon",
"defaultValue": "close"
}
};
}
static get events() {
return [{
"method": "ionFocus",
"name": "ionFocus",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the button has focus."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "ionBlur",
"name": "ionBlur",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the button loses focus."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "disabled",
"methodName": "disabledChanged"
}];
}
}