diff --git a/src/components/list/__snapshots__/index.test.js.snap b/src/components/list/__snapshots__/index.test.js.snap
index f89f0158e..9787f5f9a 100644
--- a/src/components/list/__snapshots__/index.test.js.snap
+++ b/src/components/list/__snapshots__/index.test.js.snap
@@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`List Snap render completed List -- no border 1`] = `"
"`;
+exports[`List Snap render completed List -- no border 1`] = `""`;
-exports[`List Snap render completed List 1`] = `""`;
+exports[`List Snap render completed List 1`] = `""`;
diff --git a/src/components/list/index.test.js b/src/components/list/index.test.js
index 88c0a4090..99ecb669f 100644
--- a/src/components/list/index.test.js
+++ b/src/components/list/index.test.js
@@ -29,7 +29,9 @@ describe('List Snap', () => {
thumb='http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png'
/>
+
+
)
expect(component).toMatchSnapshot()
diff --git a/src/components/list/item/index.js b/src/components/list/item/index.js
index c76676eb2..62c4ca05d 100644
--- a/src/components/list/item/index.js
+++ b/src/components/list/item/index.js
@@ -38,7 +38,7 @@ export default class AtListItem extends AtComponent {
extraText,
hasBorder,
extraThumb,
- switchIsCheck,
+ switchIsCheck
} = this.props
const rootClass = classNames(
@@ -54,51 +54,58 @@ export default class AtListItem extends AtComponent {
return (
- {thumb && (
-
-
-
- )}
-
-
- {title}
- {note && {note}}
-
-
-
- {extraText && {extraText}}
-
- {extraThumb &&
- !extraText && (
-
+
+ {thumb && (
+
)}
-
- {isSwitch &&
- !extraThumb &&
- !extraText && (
-
-
+
+
+ {title}
+ {note && {note}}
- )}
+
+
+ {extraText && {extraText}}
- {arrow && (
-
-
-
- )}
+ {extraThumb &&
+ !extraText && (
+
+
+
+ )}
+
+ {isSwitch &&
+ !extraThumb &&
+ !extraText && (
+
+
+
+ )}
+
+ {arrow && (
+
+
+
+ )}
+
)
@@ -108,7 +115,7 @@ export default class AtListItem extends AtComponent {
AtListItem.defaultProps = {
hasBorder: true,
isSwitch: false,
- disabled: false,
+ disabled: false
}
AtListItem.propTypes = {
diff --git a/src/components/list/item/index.scss b/src/components/list/item/index.scss
index a4ac601e5..e9901277e 100644
--- a/src/components/list/item/index.scss
+++ b/src/components/list/item/index.scss
@@ -8,15 +8,13 @@ $item-horizontal-padding: 24px;
width: $size;
height: $size;
- &-info {
+ &__info {
width: 100%;
height: 100%;
}
}
.at-list__item {
- @include display-flex;
- @include align-items(center);
@include active;
padding: $spacing-v-lg $spacing-h-lg;
@@ -38,6 +36,11 @@ $item-horizontal-padding: 24px;
left: $spacing-h-lg;
}
+ &-container {
+ @include display-flex;
+ @include align-items(center);
+ }
+
&--thumb {
.item-thumb {
margin-right: $item-horizontal-padding;
@@ -46,7 +49,9 @@ $item-horizontal-padding: 24px;
}
&--disabled {
- opacity: $opacity-disabled;
+ .at-list__item-container {
+ opacity: $opacity-disabled;
+ }
&:active {
background-color: transparent !important;
diff --git a/src/pages/layout/list/index.js b/src/pages/layout/list/index.js
index 50f90cf26..bd45dbaf1 100644
--- a/src/pages/layout/list/index.js
+++ b/src/pages/layout/list/index.js
@@ -123,6 +123,13 @@ export default class ListPage extends Component {
onClick={this.handleClick}
onSwitchChange={this.handleChange}
/>
+