add material-design for list.item

ant-design · Mar 22, 2017 · d8fd669 · d8fd669
1 parent 1cf0e56
commit d8fd669
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 3 deletions.
diff --git a/components/list/ListItem.web.tsx b/components/list/ListItem.web.tsx
@@ -19,16 +19,70 @@ class ListItem extends React.Component<ListItemProps, any> {
     error: false,
     multipleLine: false,
     wrap: false,
+    material: false,
   };
 
   static Brief = Brief;
+  debounceTimeout: any;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      coverRipleStyle: {},
+      RipleClicked: false,
+    };
+  }
+
+  componentWillUnmount() {
+    if (this.debounceTimeout) {
+      clearTimeout(this.debounceTimeout);
+      this.debounceTimeout = null;
+    }
+  }
+
+  onClick = (ev) => {
+    const { onClick, material } = this.props;
+    if (!!navigator.userAgent.match(/Android/i) && !!onClick && material) {
+      if (this.debounceTimeout) {
+        clearTimeout(this.debounceTimeout);
+        this.debounceTimeout = null;
+      }
+      let Item = ev.currentTarget;
+      let RipleWidth = Math.max(Item.offsetHeight, Item.offsetWidth);
+      const ClientRect = ev.currentTarget.getBoundingClientRect();
+      let pointX = ev.clientX - ClientRect.left - Item.offsetWidth / 2;
+      let pointY = ev.clientY - ClientRect.top - Item.offsetWidth / 2;
+      const coverRipleStyle = {
+        width: `${RipleWidth}px`,
+        height: `${RipleWidth}px`,
+        left: `${pointX}px`,
+        top: `${pointY}px`,
+      };
+      this.setState({
+        coverRipleStyle,
+        RipleClicked: true,
+      }, () => {
+        this.debounceTimeout = setTimeout(() => {
+          this.setState({
+            coverRipleStyle: {},
+            RipleClicked: false,
+          });
+        }, 1000);
+      });
+    }
+
+    if (onClick) {
+      onClick(ev);
+    }
+  }
 
   render() {
 
     const {
       prefixCls, className, activeStyle, error, align, wrap, disabled,
-      children, multipleLine, thumb, extra, arrow, ...restProps} = this.props;
+      children, multipleLine, thumb, extra, arrow, onClick, ...restProps} = this.props;
 
+    const { coverRipleStyle, RipleClicked } = this.state;
     const wrapCls = {
       [className as string]: className,
       [`${prefixCls}-item`]: true,
@@ -39,6 +93,11 @@ class ListItem extends React.Component<ListItemProps, any> {
       [`${prefixCls}-item-bottom`]: align === 'bottom',
     };
 
+    const ripleCls = classNames({
+      [`${prefixCls}-riple`]: true,
+      [`${prefixCls}-riple-animate`]: RipleClicked,
+    });
+
     const lineCls = classNames({
       [`${prefixCls}-line`]: true,
       [`${prefixCls}-line-multiple`]: multipleLine,
@@ -54,6 +113,9 @@ class ListItem extends React.Component<ListItemProps, any> {
 
     const content = <div
       {...restProps}
+      onClick={(ev) => {
+        this.onClick(ev);
+      }}
       className={classNames(wrapCls)}
     >
       {thumb ? <div className={`${prefixCls}-thumb`}>
@@ -64,11 +126,12 @@ class ListItem extends React.Component<ListItemProps, any> {
         {extra !== undefined && <div className={`${prefixCls}-extra`}>{extra}</div>}
         {arrow && <div className={arrowCls} />}
       </div>
+      <div style={coverRipleStyle} className={ripleCls} />
     </div>;
 
     return (
       <Touchable
-        disabled={disabled || !restProps.onClick}
+        disabled={disabled || !onClick}
         activeStyle={activeStyle}
         activeClassName={`${prefixCls}-item-active`}
       >

diff --git a/components/list/PropsType.tsx b/components/list/PropsType.tsx
@@ -36,6 +36,7 @@ export interface ListItemProps {
   styles?: any;
   onPressIn?: (e?: any) => void;
   onPressOut?: (e?: any) => void;
+  material?: boolean;
 }
 
 export interface BriefProps {

diff --git a/components/list/demo/basic.md b/components/list/demo/basic.md
@@ -25,7 +25,20 @@ class ListExample extends React.Component {
         <Item arrow="horizontal" multipleLine>
           标题文字 <Brief>副标题</Brief>
         </Item>
-        <Item arrow="horizontal" thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png" multipleLine>
+        <Item
+          arrow="horizontal"
+          multipleLine
+          onClick={() => {}}
+          material
+        >
+          开启material点击效果<Brief>仅Android有效且设置了Click事件</Brief>
+        </Item>
+        <Item
+          arrow="horizontal"
+          thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
+          multipleLine
+          onClick={() => {}}
+        >
           标题文字 <Brief>副标题</Brief>
         </Item>
       </List>

diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md
@@ -36,6 +36,7 @@ Properties | Descrition | Type | Default
 | multipleLine    | 多行 | Boolean  | `false`  |
 | wrap    | 是否换行，默认情况下，文字超长会被隐藏， | Boolean  | `false`  |
 | activeStyle(`web only`)    | 自定义active的样式 | Object  |   |
+| material(`web only`)    | 开启material design点击效果（水波） | Boolean  | `false` |
 
 ### List.Item.Brief
 

diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md
@@ -37,6 +37,7 @@ subtitle: 列表
 | multipleLine    | 多行 | Boolean  | `false`  |
 | wrap    | 是否换行，默认情况下，文字超长会被隐藏， | Boolean  | `false`  |
 | activeStyle(`web only`)    | 自定义active的样式 | Object  |   |
+| material(`web only`)    | 开启material design点击效果（水波） | Boolean  | false |
 
 ### List.Item.Brief
 

diff --git a/components/list/style/index.less b/components/list/style/index.less
@@ -48,6 +48,22 @@
   overflow: hidden;
   .box-align;
   transition: background-color 200ms;
+  .@{listPrefixCls}-riple {
+    position: absolute;
+    background: transparent;
+    display: inline-block;
+    overflow: hidden;
+    will-change: box-shadow,transform;
+    transition: box-shadow .2s cubic-bezier(.4,0,1,1), background-color .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1);
+    outline: none;
+    cursor: pointer;
+    border-radius: 100%;
+    transform: scale(0);
+    &.@{listPrefixCls}-riple-animate {
+      background-color: hsla(0, 0%, 62%, .2);
+      animation: ripple 1s linear;
+    }
+  }
   &.@{listPrefixCls}-item-top {
     .@{listPrefixCls}-line {
       .box-align(flex-start);
@@ -198,3 +214,7 @@
     background-color: transparent;
   }
 }
+
+@keyframes ripple {
+    100% {opacity: 0; transform: scale(2.5);}
+}