javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(menu-toggle): change menu-button to be a generic menu-toggle instead

Browse Source
This commit is contained in:
Dan Bucholtz
2018-02-01 11:17:59 -06:00
parent bd5a292b0c
commit 62f60516ec
9 changed files with 354 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
packages/core/src/components.d.ts vendored
View File

@ -1539,37 +1539,6 @@ declare global {
}
import {
MenuButton as IonMenuButton
} from './components/menu-button/menu-button';
declare global {
interface HTMLIonMenuButtonElement extends IonMenuButton, HTMLElement {
}
var HTMLIonMenuButtonElement: {
prototype: HTMLIonMenuButtonElement;
new (): HTMLIonMenuButtonElement;
};
interface HTMLElementTagNameMap {
"ion-menu-button": HTMLIonMenuButtonElement;
}
interface ElementTagNameMap {
"ion-menu-button": HTMLIonMenuButtonElement;
}
namespace JSX {
interface IntrinsicElements {
"ion-menu-button": JSXElements.IonMenuButtonAttributes;
}
}
namespace JSXElements {
export interface IonMenuButtonAttributes extends HTMLAttributes {
iconName?: string;
menu?: string;
}
}
}
import {
MenuController as IonMenuController
} from './components/menu-controller/menu-controller';
@ -1600,6 +1569,36 @@ declare global {
}
import {
MenuToggle as IonMenuToggle
} from './components/menu-toggle/menu-toggle';
declare global {
interface HTMLIonMenuToggleElement extends IonMenuToggle, HTMLElement {
}
var HTMLIonMenuToggleElement: {
prototype: HTMLIonMenuToggleElement;
new (): HTMLIonMenuToggleElement;
};
interface HTMLElementTagNameMap {
"ion-menu-toggle": HTMLIonMenuToggleElement;
}
interface ElementTagNameMap {
"ion-menu-toggle": HTMLIonMenuToggleElement;
}
namespace JSX {
interface IntrinsicElements {
"ion-menu-toggle": JSXElements.IonMenuToggleAttributes;
}
}
namespace JSXElements {
export interface IonMenuToggleAttributes extends HTMLAttributes {
menu?: string;
}
}
}
import {
Menu as IonMenu
} from './components/menu/menu';

31
packages/core/src/components/menu-button/test/basic/e2e.js
View File

@ -1,31 +0,0 @@
'use strict';
const { By, until } = require('selenium-webdriver');
const { register, Page, platforms } = require('../../../../../scripts/e2e');
class E2ETestPage extends Page {
constructor(driver, platform) {
super(driver, `http://localhost:3333/src/components/menu/test/basic?ionicplatform=${platform}`);
}
present(buttonId) {
this.navigate();
this.driver.findElement(By.id(buttonId)).click();
this.driver.wait(until.elementLocated(By.css('.menu-inner')));
return this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.menu-inner'))));
}
}
platforms.forEach(platform => {
describe('menu/basic', () => {
register('should init', driver => {
const page = new E2ETestPage(driver, platform);
return page.navigate();
});
register('should open left menu', driver => {
const page = new E2ETestPage(driver, platform);
return page.present('left');
});
});
});

0
packages/core/src/components/menu-button/menu-button.ios.scss → packages/core/src/components/menu-toggle/menu-toggle.ios.scss
View File

0
packages/core/src/components/menu-button/menu-button.md.scss → packages/core/src/components/menu-toggle/menu-toggle.md.scss
View File

28
packages/core/src/components/menu-button/menu-button.tsx → packages/core/src/components/menu-toggle/menu-toggle.tsx
View File

@ -1,30 +1,26 @@
import { Component, Prop } from '@stencil/core';
import { Component, Listen, Prop } from '@stencil/core';
import { getOrAppendElement } from '../../utils/helpers';
import { StencilElement } from '../..';
@Component({
tag: 'ion-menu-button',
tag: 'ion-menu-toggle',
styleUrls: {
ios: 'menu-button.ios.scss',
md: 'menu-button.md.scss'
ios: 'menu-toggle.ios.scss',
md: 'menu-toggle.md.scss'
},
host: {
theme: 'back-button'
theme: 'menu-toggle'
}
})
export class MenuButton {
/**
* The name of the icon to use for the button. It defaults to menu.
*/
@Prop() iconName = 'menu';
export class MenuToggle {
/**
* Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
*/
@Prop() menu: string = null;
toggleMenu() {
@Listen('child:click')
toggle() {
const menuControllerElement = getOrAppendElement('ion-menu-controller') as HTMLIonMenuControllerElement;
return (menuControllerElement as any as StencilElement).componentOnReady().then(() => {
const menu = menuControllerElement.get(this.menu);
@ -35,13 +31,7 @@ export class MenuButton {
}
render() {
return [
<ion-button onClick={() => {
this.toggleMenu();
}}>
<ion-icon slot='icon-only' name={this.iconName}></ion-icon>
</ion-button>
];
return <slot></slot>;
}
}

14
packages/core/src/components/menu-button/readme.md → packages/core/src/components/menu-toggle/readme.md
View File

@ -7,13 +7,6 @@
## Properties
#### iconName
string
The name of the icon to use for the button. It defaults to menu.
#### menu
string
@ -23,13 +16,6 @@ Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `ri
## Attributes
#### iconName
string
The name of the icon to use for the button. It defaults to menu.
#### menu
string

23
packages/core/src/components/menu-button/test/basic/index.html → packages/core/src/components/menu-toggle/test/basic/index.html
View File

@ -59,11 +59,15 @@
<ion-header>
<ion-toolbar>
<ion-title>Menu Button - Basic</ion-title>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title>Menu Toggle - Basic</ion-title>
</ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
</ion-header>
<ion-content padding>
@ -85,29 +89,24 @@
<script>
async function openDefault() {
const menuButton = document.querySelector('ion-menu-button');
const menuButton = document.querySelector('ion-menu-toggle');
await menuButton.componentOnReady();
menuButton.menu = null;
}
async function openLeft() {
const menuButton = document.querySelector('ion-menu-button');
const menuButton = document.querySelector('ion-menu-toggle');
await menuButton.componentOnReady();
menuButton.menu = 'left';
}
async function openRight() {
const menuButton = document.querySelector('ion-menu-button');
const menuButton = document.querySelector('ion-menu-toggle');
await menuButton.componentOnReady();
menuButton.menu = 'right';
}
</script>
<style>
ion-menu-button {
height: 44px;
background-color: blue;
display: block !important;
}
</style>
</body>
</html>

64
packages/core/src/components/menu-toggle/test/button/index.html Normal file
View File

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Menu - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-menu side="left" class="e2eLeftMenu">
<ion-header>
<ion-toolbar color="secondary">
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Open Right Menu</ion-item>
<ion-item detail-none>Close Menu</ion-item>
<ion-item detail-none>Close Menu</ion-item>
<ion-item detail-none>Close Menu</ion-item>
<ion-item detail-none>Close Menu</ion-item>
<ion-item detail-none>Close Menu</ion-item>
<ion-item detail-none>Close Menu</ion-item>
<ion-item detail-none>Close Menu</ion-item>
<ion-item detail-none>Close Menu</ion-item>
<ion-item detail-none>Close Menu</ion-item>
<ion-item detail-none>Close Menu</ion-item>
<ion-item detail-none>Close Menu</ion-item>
</ion-list>
</ion-content>
<ion-footer>
<ion-toolbar color="secondary">
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-menu>
<ion-page main>
<ion-header>
<ion-toolbar>
<ion-title>Menu Toggle - Button</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-menu-toggle>
<ion-button>Toggle Menu</ion-button>
</ion-menu-toggle>
</ion-content>
</ion-page>
</ion-app>
<ion-menu-controller></ion-menu-controller>
</body>
</html>

240
packages/core/src/components/menu-toggle/test/list/index.html Normal file
View File

@ -0,0 +1,240 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Menu - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<script src="/dist/ionic.js"></script>
</head>
<body>
<ion-app>
<ion-menu side="left" class="e2eLeftMenu">
<ion-header>
<ion-toolbar color="secondary">
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
Menu Content
</ion-content>
<ion-footer>
<ion-toolbar color="secondary">
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-menu>
<ion-page main>
<ion-header>
<ion-toolbar>
<ion-title>Menu Toggle - List</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
<ion-item>
<ion-label>
List Item
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-content>
</ion-page>
</ion-app>
<ion-menu-controller></ion-menu-controller>
</body>
</html>