fix(list): 修复switch 在禁用状态仍然可以切换 fixed #95

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`] = `"<div class=\\"at-list at-list--no-border\\"><div class=\\"at-list__item at-list__item--no-border\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefinedundefined</div></div><div class=\\"at-list__item at-list__item--no-border\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefinedundefined</div></div></div>"`;
+exports[`List Snap render completed List -- no border 1`] = `"<div class=\\"at-list at-list--no-border\\"><div class=\\"at-list__item at-list__item--no-border\\"><div class=\\"at-list__item-container\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefinedundefined</div></div></div><div class=\\"at-list__item at-list__item--no-border\\"><div class=\\"at-list__item-container\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefinedundefined</div></div></div></div>"`;
 
-exports[`List Snap render completed List 1`] = `"<div class=\\"at-list\\"><div class=\\"at-list__item\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefinedundefined</div></div><div class=\\"at-list__item\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div><div class=\\"at-list__item at-list__item--multiple\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div><div class=\\"item-content__info-note\\">描述信息</div></div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefinedundefined</div></div><div class=\\"at-list__item at-list__item--disabled\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">禁用状态</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\"><div class=\\"item-extra__info\\">详细信息</div>undefinedundefinedundefined</div></div><div class=\\"at-list__item at-list__item--multiple\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div><div class=\\"item-content__info-note\\">描述信息</div></div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div><div class=\\"at-list__item\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\"><div class=\\"item-extra__info\\">详细信息</div>undefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div><div class=\\"at-list__item at-list__item--multiple\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字标题文字标题文字标题文字标题文字</div><div class=\\"item-content__info-note\\">描述信息</div></div></div><div class=\\"at-list__item-extra item-extra\\"><div class=\\"item-extra__info\\">详细信息详细信息详细信息详细信息</div>undefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div><div class=\\"at-list__item at-list__item--thumb at-list__item--multiple\\"><div class=\\"at-list__item-thumb item-thumb\\"><div class=\\"taro-img item-thumb-info\\"><img class=\\"taro-img__mode-scaletofill\\" src=\\"http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png\\"/></div></div><div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div><div class=\\"item-content__info-note\\">描述信息</div></div></div><div class=\\"at-list__item-extra item-extra\\"><div class=\\"item-extra__info\\">详细信息</div>undefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div><div class=\\"at-list__item\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefined<div class=\\"item-extra__switch\\"><input color=\\"#6190E8\\" class=\\"weui-switch\\" type=\\"checkbox\\"/></div>undefined</div></div><div class=\\"at-list__item\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefined<div class=\\"item-extra__switch\\"><input color=\\"#6190E8\\" class=\\"weui-switch\\" checked type=\\"checkbox\\" style=\\"border-color:#6190E8;background-color:#6190E8;\\"/></div>undefined</div></div></div>"`;
+exports[`List Snap render completed List 1`] = `"<div class=\\"at-list\\"><div class=\\"at-list__item\\"><div class=\\"at-list__item-container\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefinedundefined</div></div></div><div class=\\"at-list__item\\"><div class=\\"at-list__item-container\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div></div><div class=\\"at-list__item at-list__item--multiple\\"><div class=\\"at-list__item-container\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div><div class=\\"item-content__info-note\\">描述信息</div></div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefinedundefined</div></div></div><div class=\\"at-list__item at-list__item--disabled\\"><div class=\\"at-list__item-container\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">禁用状态</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\"><div class=\\"item-extra__info\\">详细信息</div>undefinedundefinedundefined</div></div></div><div class=\\"at-list__item at-list__item--multiple\\"><div class=\\"at-list__item-container\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div><div class=\\"item-content__info-note\\">描述信息</div></div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div></div><div class=\\"at-list__item\\"><div class=\\"at-list__item-container\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\"><div class=\\"item-extra__info\\">详细信息</div>undefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div></div><div class=\\"at-list__item at-list__item--multiple\\"><div class=\\"at-list__item-container\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字标题文字标题文字标题文字标题文字</div><div class=\\"item-content__info-note\\">描述信息</div></div></div><div class=\\"at-list__item-extra item-extra\\"><div class=\\"item-extra__info\\">详细信息详细信息详细信息详细信息</div>undefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div></div><div class=\\"at-list__item at-list__item--thumb at-list__item--multiple\\"><div class=\\"at-list__item-container\\"><div class=\\"at-list__item-thumb item-thumb\\"><div class=\\"taro-img item-thumb__info\\"><img class=\\"taro-img__mode-scaletofill\\" src=\\"http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png\\"/></div></div><div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div><div class=\\"item-content__info-note\\">描述信息</div></div></div><div class=\\"at-list__item-extra item-extra\\"><div class=\\"item-extra__info\\">详细信息</div>undefinedundefined<div class=\\"item-extra__icon\\"><span style=\\"font-size:24px;color:#c7c7cc;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div></div></div><div class=\\"at-list__item\\"><div class=\\"at-list__item-container\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefined<div class=\\"item-extra__switch\\"><input color=\\"#6190E8\\" class=\\"weui-switch\\" type=\\"checkbox\\"/></div>undefined</div></div></div><div class=\\"at-list__item at-list__item--disabled\\"><div class=\\"at-list__item-container\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefined<div class=\\"item-extra__switch\\"><input color=\\"#6190E8\\" disabled class=\\"weui-switch\\" type=\\"checkbox\\"/></div>undefined</div></div></div><div class=\\"at-list__item\\"><div class=\\"at-list__item-container\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefined<div class=\\"item-extra__switch\\"><input color=\\"#6190E8\\" class=\\"weui-switch\\" checked type=\\"checkbox\\" style=\\"border-color:#6190E8;background-color:#6190E8;\\"/></div>undefined</div></div></div><div class=\\"at-list__item at-list__item--disabled\\"><div class=\\"at-list__item-container\\">undefined<div class=\\"at-list__item-content item-content\\"><div class=\\"item-content__info\\"><div class=\\"item-content__info-title\\">标题文字</div>undefined</div></div><div class=\\"at-list__item-extra item-extra\\">undefinedundefined<div class=\\"item-extra__switch\\"><input color=\\"#6190E8\\" disabled class=\\"weui-switch\\" checked type=\\"checkbox\\" style=\\"border-color:#6190E8;background-color:#6190E8;\\"/></div>undefined</div></div></div></div>"`;

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'
         />
         <AtListItem title='标题文字' isSwitch />
+        <AtListItem title='标题文字' isSwitch disabled />
         <AtListItem title='标题文字' switchIsCheck isSwitch />
+        <AtListItem title='标题文字' switchIsCheck isSwitch disabled />
       </AtList>
     )
     expect(component).toMatchSnapshot()

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 (
       <View className={rootClass} onClick={this.handleClick}>
-        {thumb && (
-          <View className='at-list__item-thumb item-thumb'>
-            <Image className='item-thumb-info' mode='scaleToFill' src={thumb} />
-          </View>
-        )}
-        <View className='at-list__item-content item-content'>
-          <View className='item-content__info'>
-            <View className='item-content__info-title'>{title}</View>
-            {note && <View className='item-content__info-note'>{note}</View>}
-          </View>
-        </View>
-        <View className='at-list__item-extra item-extra'>
-          {extraText && <View className='item-extra__info'>{extraText}</View>}
-
-          {extraThumb &&
-            !extraText && (
-            <View className='item-extra__image'>
+        <View className='at-list__item-container'>
+          {thumb && (
+            <View className='at-list__item-thumb item-thumb'>
               <Image
-                className='item-extra__image-info'
-                mode='aspectFit'
-                src={extraThumb}
+                className='item-thumb__info'
+                mode='scaleToFill'
+                src={thumb}
               />
             </View>
           )}
-
-          {isSwitch &&
-            !extraThumb &&
-            !extraText && (
-            <View
-              className='item-extra__switch'
-              onClick={this.handleSwitchClick}
-            >
-              <Switch
-                color='#6190E8'
-                checked={switchIsCheck}
-                onChange={this.handleSwitchChange}
-              />
+          <View className='at-list__item-content item-content'>
+            <View className='item-content__info'>
+              <View className='item-content__info-title'>{title}</View>
+              {note && <View className='item-content__info-note'>{note}</View>}
             </View>
-          )}
+          </View>
+          <View className='at-list__item-extra item-extra'>
+            {extraText && <View className='item-extra__info'>{extraText}</View>}
 
-          {arrow && (
-            <View className='item-extra__icon'>
-              <AtIcon value={`chevron-${arrow}`} color='#c7c7cc' />
-            </View>
-          )}
+            {extraThumb &&
+              !extraText && (
+              <View className='item-extra__image'>
+                <Image
+                  className='item-extra__image-info'
+                  mode='aspectFit'
+                  src={extraThumb}
+                />
+              </View>
+            )}
+
+            {isSwitch &&
+              !extraThumb &&
+              !extraText && (
+              <View
+                className='item-extra__switch'
+                onClick={this.handleSwitchClick}
+              >
+                <Switch
+                  color='#6190E8'
+                  disabled={disabled}
+                  checked={switchIsCheck}
+                  onChange={this.handleSwitchChange}
+                />
+              </View>
+            )}
+
+            {arrow && (
+              <View className='item-extra__icon'>
+                <AtIcon value={`chevron-${arrow}`} color='#c7c7cc' />
+              </View>
+            )}
+          </View>
         </View>
       </View>
     )
@@ -108,7 +115,7 @@ export default class AtListItem extends AtComponent {
 AtListItem.defaultProps = {
   hasBorder: true,
   isSwitch: false,
-  disabled: false,
+  disabled: false
 }
 
 AtListItem.propTypes = {

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;

src/pages/layout/list/index.js

@@ -123,6 +123,13 @@ export default class ListPage extends Component {
                     onClick={this.handleClick}
                     onSwitchChange={this.handleChange}
                   />
+                  <AtListItem
+                    isSwitch
+                    disabled
+                    switchIsCheck
+                    title='禁用状态'
+                    onSwitchChange={this.handleChange}
+                  />
                   <AtListItem
                     isSwitch
                     switchIsCheck