feat(ListItem): add onLongPress api.

ref ant-design#1533
lixiaoyang1992 · Apr 26, 2018 · f8d68b6 · f8d68b6
1 parent 49a8d0e
commit f8d68b6
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 4 deletions.
diff --git a/components/list/ListItem.web.tsx b/components/list/ListItem.web.tsx
@@ -82,7 +82,7 @@ class ListItem extends React.Component<ListItemProps, any> {
 
     const {
       prefixCls, className, activeStyle, error, align, wrap, disabled,
-      children, multipleLine, thumb, extra, arrow, onClick, ...restProps} = this.props;
+      children, multipleLine, thumb, extra, arrow, onClick, onLongPress, ...restProps} = this.props;
 
     const { coverRippleStyle, RippleClicked } = this.state;
     const wrapCls = {
@@ -132,9 +132,10 @@ class ListItem extends React.Component<ListItemProps, any> {
 
     return (
       <Touchable
-        disabled={disabled || !onClick}
+        disabled={disabled || (!onClick && !onLongPress)}
         activeStyle={activeStyle}
         activeClassName={`${prefixCls}-item-active`}
+        onLongPress={onLongPress}
       >
         {content}
       </Touchable>

diff --git a/components/list/PropsType.tsx b/components/list/PropsType.tsx
@@ -29,6 +29,7 @@ export interface ListItemProps {
   wrap?: boolean;
   onClick?: (e?: any) => void;
   style?: React.CSSProperties | {} | Array<{}>;
+  onLongPress?: () => void;
   /* for web */
   prefixCls?: string;
   className?: string;
@@ -54,7 +55,6 @@ export interface ListItemProps {
   };
   onPressIn?: () => void;
   onPressOut?: () => void;
-  onLongPress?: () => void;
 }
 
 export interface BriefProps {

diff --git a/components/list/demo/basic.md b/components/list/demo/basic.md
@@ -16,10 +16,13 @@ class ListExample extends React.Component {
   state = {
     disabled: false,
   }
+  handleLongPress = (e) => {
+    console.log('longpress toggled', e);
+  }
   render() {
     return (<div>
       <List renderHeader={() => '基本样式'} className="my-list">
-        <Item extra={'内容内容'}>标题文字</Item>
+        <Item extra={'内容内容'} onLongPress={this.handleLongPress}>标题文字</Item>
       </List>
       <List renderHeader={() => '带副标题'} className="my-list">
         <Item arrow="horizontal" multipleLine>

diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md
@@ -32,6 +32,7 @@ Properties | Descrition | Type | Default
 | arrow      | 箭头方向(右,上,下), 可选`horizontal`,`up`,`down`,`empty`，如果是`empty`则存在对应的dom,但是不显示   | String |   无  |
 | align    |    Flex 子元素垂直对齐，可选`top`,`middle`,`bottom`  | String   | `middle` |
 | onClick    | 点击事件的回调函数 | (): void |  无  |
+| onLongPress  | 长按事件的回调函数 | (): void |  无  |
 | error(`web only`)    | 报错样式,右侧文字颜色变成橙色 | Boolean  | `false`  |
 | multipleLine    | 多行 | Boolean  | `false`  |
 | wrap    | 是否换行，默认情况下，文字超长会被隐藏， | Boolean  | `false`  |

diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md
@@ -33,6 +33,7 @@ subtitle: 列表
 | arrow      | 箭头方向(右,上,下), 可选`horizontal`,`up`,`down`,`empty`，如果是`empty`则存在对应的dom,但是不显示   | String |   无  |
 | align    |    Flex 子元素垂直对齐，可选`top`,`middle`,`bottom`  | String   | `middle` |
 | onClick    | 点击事件的回调函数 | (): void |  无  |
+| onLongPress  | 长按事件的回调函数 | (): void |  无  |
 | error(`web only`)    | 报错样式,右侧文字颜色变成橙色 | Boolean  | `false`  |
 | multipleLine    | 多行 | Boolean  | `false`  |
 | wrap    | 是否换行，默认情况下，文字超长会被隐藏， | Boolean  | `false`  |