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

refactor(nav, menu): swipeEnabled => swipeGesture

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-08-13 18:19:19 +02:00
parent bd5a4a0294
commit 5b6eb2c7eb
11 changed files with 49 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components.d.ts vendored
View File

@ -1316,7 +1316,7 @@ declare global {
/**
* Used to enable or disable the ability to swipe open the menu.
*/
'swipeEnable': (shouldEnable: boolean, menuId?: string | undefined) => HTMLIonMenuElement | null;
'swipeGesture': (shouldEnable: boolean, menuId?: string | undefined) => HTMLIonMenuElement | null;
/**
* Toggle the menu. If it's closed, it will open, and if opened, it will close.
*/
@ -1364,7 +1364,7 @@ declare global {
/**
* If true, swiping the menu is enabled. Default `true`.
*/
'swipeEnabled': boolean;
'swipeGesture': boolean;
'toggle': (animated?: boolean) => Promise<boolean>;
/**
* The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
@ -1543,7 +1543,7 @@ declare global {
/**
* If the nav component should allow for swipe-to-go-back
*/
'swipeBackEnabled': boolean;
'swipeGesture': boolean;
}
interface IonNote {
@ -4839,7 +4839,7 @@ declare global {
/**
* If true, swiping the menu is enabled. Default `true`.
*/
'swipeEnabled'?: boolean;
'swipeGesture'?: boolean;
/**
* The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
*/
@ -4967,7 +4967,7 @@ declare global {
/**
* If the nav component should allow for swipe-to-go-back
*/
'swipeBackEnabled'?: boolean;
'swipeGesture'?: boolean;
}
export interface IonNoteAttributes extends HTMLAttributes {

4
core/src/components/menu-controller/menu-controller.ts
View File

@ -79,10 +79,10 @@ export class MenuController {
* Used to enable or disable the ability to swipe open the menu.
*/
@Method()
swipeEnable(shouldEnable: boolean, menuId?: string): HTMLIonMenuElement | null {
swipeGesture(shouldEnable: boolean, menuId?: string): HTMLIonMenuElement | null {
const menu = this.get(menuId);
if (menu) {
menu.swipeEnabled = shouldEnable;
menu.swipeGesture = shouldEnable;
}
return menu;
}

2
core/src/components/menu-controller/readme.md
View File

@ -25,7 +25,7 @@ The MenuController makes it easy to control a Menu. Its methods can be used to d
| `isOpen` | Returns true if the specified menu is open. If the menu is not specified, it will return true if any menu is currently open. |
| `open` | Open the menu. |
| `registerAnimation` | |
| `swipeEnable` | Used to enable or disable the ability to swipe open the menu. |
| `swipeGesture` | Used to enable or disable the ability to swipe open the menu. |
| `toggle` | Toggle the menu. If it's closed, it will open, and if opened, it will close. |

10
core/src/components/menu/menu.tsx
View File

@ -100,10 +100,10 @@ export class Menu {
/**
* If true, swiping the menu is enabled. Default `true`.
*/
@Prop() swipeEnabled = true;
@Prop() swipeGesture = true;
@Watch('swipeEnabled')
protected swipeEnabledChanged() {
@Watch('swipeGesture')
protected swipeGestureChanged() {
this.updateState();
}
/**
@ -304,7 +304,7 @@ export class Menu {
}
private canSwipe(): boolean {
return this.swipeEnabled && !this.isAnimating && this.isActive();
return this.swipeGesture && !this.isAnimating && this.isActive();
}
private canStart(detail: GestureDetail): boolean {
@ -444,7 +444,7 @@ export class Menu {
private updateState() {
const isActive = this.isActive();
if (this.gesture) {
this.gesture.setDisabled(!isActive || !this.swipeEnabled);
this.gesture.setDisabled(!isActive || !this.swipeGesture);
}
// Close menu inmediately

2
core/src/components/menu/readme.md
View File

@ -20,7 +20,7 @@ These can be controlled from the templates, or programmatically using the MenuCo
| `maxEdgeStart` | `max-edge-start` | The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. | `number` |
| `menuId` | `menu-id` | An id for the menu. | `string` |
| `side` | `side` | Which side of the view the menu should be placed. Default `"start"`. | `Side` |
| `swipeEnabled` | `swipe-enabled` | If true, swiping the menu is enabled. Default `true`. | `boolean` |
| `swipeGesture` | `swipe-gesture` | If true, swiping the menu is enabled. Default `true`. | `boolean` |
| `type` | `type` | The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. | `string` |

2
core/src/components/menu/test/basic/index.html
View File

@ -124,7 +124,7 @@
menu.get('end').type = 'reveal';
}
function setEnabled() {
menu.get('start').swipeEnabled = false;
menu.get('start').swipeGesture = false;
}
</script>
</body>

2
core/src/components/menu/test/preview/index.html
View File

@ -124,7 +124,7 @@
menu.get('end').type = 'reveal';
}
function setEnabled() {
menu.get('start').swipeEnabled = false;
menu.get('start').swipeGesture = false;
}
</script>
</body>

16
core/src/components/nav/nav.tsx
View File

@ -37,11 +37,11 @@ export class Nav implements NavOutlet {
/**
* If the nav component should allow for swipe-to-go-back
*/
@Prop({ mutable: true }) swipeBackEnabled?: boolean;
@Watch('swipeBackEnabled')
swipeBackEnabledChanged() {
@Prop({ mutable: true }) swipeGesture?: boolean;
@Watch('swipeGesture')
swipeGestureChanged() {
if (this.gesture) {
this.gesture.setDisabled(!this.swipeBackEnabled);
this.gesture.setDisabled(!this.swipeGesture);
}
}
@ -95,8 +95,8 @@ export class Nav implements NavOutlet {
!!this.win.document.querySelector('ion-router') &&
!this.el.closest('[no-router]');
if (this.swipeBackEnabled === undefined) {
this.swipeBackEnabled = this.config.getBoolean(
if (this.swipeGesture === undefined) {
this.swipeGesture = this.config.getBoolean(
'swipeBackEnabled',
this.mode === 'ios'
);
@ -121,7 +121,7 @@ export class Nav implements NavOutlet {
onMove: this.swipeBackProgress.bind(this),
onEnd: this.swipeBackEnd.bind(this),
});
this.swipeBackEnabledChanged();
this.swipeGestureChanged();
}
componentDidUnload() {
@ -954,7 +954,7 @@ export class Nav implements NavOutlet {
}
private canSwipeBack(): boolean {
return !!this.swipeBackEnabled && !this.isTransitioning && this.canGoBack();
return !!this.swipeGesture && !this.isTransitioning && this.canGoBack();
}
render() {

14
core/src/components/nav/readme.md
View File

@ -9,13 +9,13 @@ Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we
## Properties
| Property | Attribute | Description | Type |
| ------------------ | -------------------- | ------------------------------------------------------ | ------------------- |
| `animated` | `animated` | If the nav should animate the components or not | `boolean` |
| `delegate` | -- | | `FrameworkDelegate` |
| `rootParams` | -- | Any parameters for the root component | `ComponentProps` |
| `root` | `root` | Root NavComponent to load | `NavComponent` |
| `swipeBackEnabled` | `swipe-back-enabled` | If the nav component should allow for swipe-to-go-back | `boolean` |
| Property | Attribute | Description | Type |
| -------------- | --------------- | ------------------------------------------------------ | ------------------- |
| `animated` | `animated` | If the nav should animate the components or not | `boolean` |
| `delegate` | -- | | `FrameworkDelegate` |
| `rootParams` | -- | Any parameters for the root component | `ComponentProps` |
| `root` | `root` | Root NavComponent to load | `NavComponent` |
| `swipeGesture` | `swipe-gesture` | If the nav component should allow for swipe-to-go-back | `boolean` |
## Events

4
core/src/components/nav/test/nav-controller.spec.ts
View File

@ -838,7 +838,7 @@ describe('NavController', () => {
describe('canSwipeBack', () => {
it('should not swipe back when its not enabled', () => {
nav.swipeBackEnabled = false;
nav.swipeGesture = false;
const view1 = mockView();
const view2 = mockView();
@ -849,7 +849,7 @@ describe('NavController', () => {
});
it('should swipe back when has a view to go back to', () => {
nav.swipeBackEnabled = true;
nav.swipeGesture = true;
const view1 = mockView();
const view2 = mockView();
mockViews(nav, [view1, view2]);

32
core/src/components/tab/readme.md
View File

@ -12,22 +12,22 @@ See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
## Properties
| Property | Attribute | Description | Type |
| -------------------- | ------------------------ | ------------------------------------------------------------------------------------- | ------------------- |
| `active` | `active` | If true, sets the tab as the active tab. | `boolean` |
| `badgeColor` | `badge-color` | The badge color for the tab button. | `Color` |
| `badge` | `badge` | The badge for the tab. | `string` |
| `btnId` | `btn-id` | hidden | `string` |
| `component` | `component` | The component to display inside of the tab. | `ComponentRef` |
| `delegate` | -- | hidden | `FrameworkDelegate` |
| `disabled` | `disabled` | If true, the user cannot interact with the tab. Defaults to `false`. | `boolean` |
| `href` | `href` | The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor. | `string` |
| `icon` | `icon` | The icon for the tab. | `string` |
| `label` | `label` | The label of the tab. | `string` |
| `name` | `name` | The name of the tab. | `string` |
| `selected` | `selected` | If true, the tab will be selected. Defaults to `false`. | `boolean` |
| `show` | `show` | If true, the tab button is visible within the tabbar. Defaults to `true`. | `boolean` |
| `tabsHideOnSubPages` | `tabs-hide-on-sub-pages` | If true, hide the tabs on child pages. | `boolean` |
| Property | Attribute | Description | Type |
| -------------------- | ------------------------ | ------------------------------------------------------------------------- | ------------------- |
| `active` | `active` | If true, sets the tab as the active tab. | `boolean` |
| `badgeColor` | `badge-color` | The badge color for the tab button. | `Color` |
| `badge` | `badge` | The badge for the tab. | `string` |
| `btnId` | `btn-id` | hidden | `string` |
| `component` | `component` | The component to display inside of the tab. | `ComponentRef` |
| `delegate` | -- | hidden | `FrameworkDelegate` |
| `disabled` | `disabled` | If true, the user cannot interact with the tab. Defaults to `false`. | `boolean` |
| `href` | `href` | The URL which will be used as the `href` within this tab's button anchor. | `string` |
| `icon` | `icon` | The icon for the tab. | `string` |
| `label` | `label` | The label of the tab. | `string` |
| `name` | `name` | The name of the tab. | `string` |
| `selected` | `selected` | If true, the tab will be selected. Defaults to `false`. | `boolean` |
| `show` | `show` | If true, the tab button is visible within the tabbar. Defaults to `true`. | `boolean` |
| `tabsHideOnSubPages` | `tabs-hide-on-sub-pages` | If true, hide the tabs on child pages. | `boolean` |
## Events