Merge pull request #24 from jlsnake/tag-feature

feat: Tag supports long press
ant-design · Jun 15, 2018 · e1e8ad4 · e1e8ad4
2 parents 88b3e8f + 35a0744
commit e1e8ad4
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 1 deletion.
diff --git a/components/tag/PropsType.tsx b/components/tag/PropsType.tsx
@@ -6,4 +6,5 @@ export interface TagPropsType {
   onChange?: (selected: boolean) => void;
   onClose?: () => void;
   afterClose?: () => void;
+  onLongPress?: () => void;
 }
diff --git a/components/tag/__tests__/index.test.native.js b/components/tag/__tests__/index.test.native.js
@@ -33,4 +33,11 @@ describe('Tag', () => {
     expect(afterClose).toHaveBeenCalled();
     expect(wrapper.find('TouchableWithoutFeedback')).toHaveLength(0);
   });
+
+  it('onLongPress then callback', () => {
+    const onLongPress = jest.fn();
+    const wrapper = shallow(<Tag onLongPress={onLongPress}>Basic</Tag>);
+    wrapper.find('TouchableWithoutFeedback').at(0).simulate('longPress');
+    expect(onLongPress).toHaveBeenCalledWith();
+  });
 });
diff --git a/components/tag/demo/basic.native.tsx b/components/tag/demo/basic.native.tsx
@@ -33,6 +33,14 @@ export default class BasicTagExample extends React.Component<any, any> {
         </Tag>
         <WhiteSpace />
         <Tag small>Small and Readonly</Tag>
+        <WhiteSpace />
+        <Tag
+          onLongPress={() => {
+            console.log('onLongPress');
+          }}
+        >
+          LongPress
+        </Tag>
       </View>
     );
   }

diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md
@@ -21,3 +21,4 @@ Properties | Descrition | Type | Default
 | onChange   | The callback function that is triggered when the selected state changes. | (selected: bool): void |   -  |
 | onClose   | The callback function that is triggered when the tag is closed. | (): void |   -  |
 | afterClose   | The callback function that is triggered after close. | (): void |   -  |
+| onLongPress   | The callback function that is triggered when the tag is long pressed. | (): void |   -  |
diff --git a/components/tag/index.native.tsx b/components/tag/index.native.tsx
@@ -28,6 +28,7 @@ export default class Tag extends React.Component<TagNativeProps, any> {
     onClose() {},
     afterClose() {},
     onChange() {},
+    onLongPress() {},
     styles: TagStyles,
   };
 
@@ -68,6 +69,16 @@ export default class Tag extends React.Component<TagNativeProps, any> {
     );
   }
 
+  handleLongPress = () => {
+    const { disabled, onLongPress } = this.props;
+    if (disabled) {
+      return;
+    }
+    if (onLongPress) {
+      onLongPress();
+    }
+  }
+
   onTagClose = () => {
     if (this.props.onClose) {
       this.props.onClose();
@@ -158,7 +169,7 @@ export default class Tag extends React.Component<TagNativeProps, any> {
 
     return !this.state.closed ? (
       <View style={[styles.tag, style]}>
-        <TouchableWithoutFeedback onPress={this.onClick}>
+        <TouchableWithoutFeedback onPress={this.onClick} onLongPress={this.handleLongPress}>
           <View style={[styles.wrap, sizeWrapStyle, wrapStyle]}>
             <Text style={[styles.text, sizeTextStyle, textStyle]}>
               {children}{' '}

diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md
@@ -21,3 +21,4 @@ subtitle: 标签
 | onChange   | 切换选中回调函数 | (selected: bool): void |   无  |
 | onClose   | 点关闭时的回调函数 | (): void |   无  |
 | afterClose   | 关闭后的回调 | (): void |   无  |
+| onLongPress   | 长按的回调 | (): void |   无  |