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

fix(reorder): remove the class needed to make reorder visible

Browse Source 
This fixes the requirement of adding `no-hide` to an item so that it is
always visible by only hiding reorder elements inside of item slots.

Renames the `hasContent` state to `custom` and adds a class since this
is basically providing a custom reorder instead of our standard icon.
This commit is contained in:
Brandy Carney
2018-01-30 16:42:34 -05:00
parent aefb058d43
commit 90d77fc2d3
3 changed files with 56 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/core/src/components/reorder/reorder.scss
View File

@ -4,25 +4,11 @@
// --------------------------------------------------
.reorder[slot] {
@include margin(auto, null);
display: none;
line-height: 0;
}
.reorder[slot="start"] {
order: -1;
}
.reorder.no-hide {
display: block;
visibility: normal;
}
.reorder:not(.no-hide) {
display: none;
}
.reorder-enabled .reorder {
display: block;
@ -79,7 +65,7 @@
// --------------------------------------------------
.item .reorder[slot] {
@include margin(0);
@include margin(0, null);
}
.item .reorder-icon {

19
packages/core/src/components/reorder/reorder.tsx
View File

@ -10,18 +10,29 @@ import { Component, Element, State } from '@stencil/core';
})
export class Reorder {
@State() hasContent: boolean = null;
@Element() private el: HTMLElement;
@State() custom: boolean;
componentDidLoad() {
this.hasContent = this.el.childElementCount > 0;
this.custom = this.el.childElementCount > 0;
}
hostData() {
const hostClasses = {
'reorder-custom': this.custom
};
return {
class: hostClasses
};
}
render() {
// TODO: https://github.com/ionic-team/stencil/issues/171
if (this.hasContent === true) {
if (this.custom === true) {
return <slot></slot>;
} else if (this.hasContent === false) {
} else if (this.custom === false) {
return <ion-icon class='reorder-icon' name='reorder'></ion-icon>;
} else {
return undefined;

52
packages/core/src/components/reorder/test/basic/index.html
View File

@ -25,56 +25,82 @@
<ion-reorder-group id="reorder">
<ion-item>
Item 1 (default ion-reorder)
<ion-label>
Item 1 (default ion-reorder)
</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item>
Item 2 (default ion-reorder)
<ion-label>
Item 2 (default ion-reorder)
</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item>
Item 3 (default ion-reorder slot="start")
<ion-label>
Item 3 (default ion-reorder slot="start")
</ion-label>
<ion-reorder slot="start"></ion-reorder>
</ion-item>
<ion-item color="secondary">
Item 4 (default ion-reorder slot="start")
<ion-label>
Item 4 (default ion-reorder slot="start")
</ion-label>
<ion-reorder slot="start"></ion-reorder>
</ion-item>
<ion-item>
Item 5 (custom ion-reorder)
<ion-label>
Item 5 (custom ion-reorder)
</ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
<ion-item>
Item 6 (custom ion-reorder)
<ion-label>
Item 6 (custom ion-reorder)
</ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
<ion-item>
Item 7 (custom ion-reorder slot="start")
<ion-label>
Item 7 (custom ion-reorder slot="start")
</ion-label>
<ion-reorder slot="start">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
<ion-reorder class="no-hide">
<ion-item>Item 8 (the whole item can be dragged)</ion-item>
<ion-reorder>
<ion-item>
<ion-label>
Item 8 (the whole item can be dragged)
</ion-label>
</ion-item>
</ion-reorder>
<ion-reorder class="no-hide">
<ion-item>Item 9 (the whole item can be dragged)</ion-item>
<ion-reorder>
<ion-item>
<ion-label>
Item 9 (the whole item can be dragged)
</ion-label>
</ion-item>
</ion-reorder>
<ion-reorder class="no-hide">
<ion-item>Item 10 (the whole item can be dragged)</ion-item>
<ion-reorder>
<ion-item>
<ion-label>
Item 10 (the whole item can be dragged)
</ion-label>
</ion-item>
</ion-reorder>
</ion-reorder-group>