@fto-consult/expo-ui 2.5.0 → 2.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.5.0",
+  "version": "2.5.2",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

package/src/components/BottomSheet/Menu.js

@@ -8,7 +8,7 @@ import PropTypes from "prop-types";
 import {getContentHeight} from "./utils";
 
 const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
-    let {anchor,screenIndent,height:customHeight,bindResizeEvent,onDismiss,testID,visible:customVisible,controlled,mobile,animateOnClose,renderMenuContent,sheet,children,...rest} = props;
+    let {anchor,anchorProps,screenIndent,height:customHeight,bindResizeEvent,onDismiss,testID,visible:customVisible,controlled,mobile,animateOnClose,renderMenuContent,sheet,children,...rest} = props;
     rest = defaultObj(rest);
     const isControlled = controlled ? true : false;
     const visibleRef = React.useRef(null);
@@ -44,12 +44,13 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
         setState({...state,visible:false})
     }
     const Component = isMob ? BottomSheet : Menu;
+    anchorProps = defaultObj(anchorProps);
     if(isMob){
         if(typeof anchor ==='function'){
             anchor = anchor(!isControlled?{onPress:open}:{});
         }
         if(React.isValidElement(anchor)){
-            anchor = <View testID={testID+"_Anchor"} ref={anchorRef} collapsable={false}>{anchor}</View>
+            anchor = <View testID={testID+"_Anchor"} ref={anchorRef} {...anchorProps} collapsable={false}>{anchor}</View>
         }
         if(renderMenuContent !== false){
             children = renderItems({testID:testID+".Items",...props,closeMenu:close,openMenu:open,isBottomSheetItem:true});
@@ -101,6 +102,7 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
             height = {controlled?customHeight:height}
             ref = {React.useMergeRefs(innerRef,ref)}
             anchor = {anchor}
+            anchorProps = {anchorProps}
             children = {visible && (React.isValidElement(children) || Array.isArray(children))?children:undefined}
         />
     </>

package/src/components/Datagrid/Accordion/index.js

@@ -385,7 +385,7 @@ const DatagridFactory = (Factory)=>{
             if(toggleFilters === false){
                 filters = false;
             }
-            let {showFilters,showFooter} = this.state;
+            let {showFilters,showFooters} = this.state;
             let max = this.getMaxSelectableRows();
             let restItems = [];
             
@@ -499,9 +499,9 @@ const DatagridFactory = (Factory)=>{
                                         closeOnPress : false,
                                     } : null,
                                     hasFooterFields ? {
-                                        onPress :  ()=>{showFooter?this.hideFooter():this.showFooter()}    
-                                        ,icon :  showFooter?'view-column':'view-module'
-                                        ,text : (showFooter?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
+                                        onPress :  ()=>{showFooters?this.hideFooter():this.showFooters()}    
+                                        ,icon :  showFooters?'view-column':'view-module'
+                                        ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
                                     }:null,
                                     ...restItems,
                                     this.canScrollTo() &&  {
@@ -557,7 +557,7 @@ const DatagridFactory = (Factory)=>{
                         />
                         {datagridHeader}
                         {_progressBar}
-                        {showFooter ? (
+                        {showFooters ? (
                             <View  testID={testID+"_FooterContainer"} pointerEvents={pointerEvents} style={[{justifyContent:'center'}]}>
                                 <View  testID={testID+"_FooterContentContainer"} style={[styles.footersContainer]}>
                                     <ScrollView testID={testID+"_FooterScrollView"} horizontal contentContainerStyle={[styles.contentContainerStyle]}>
@@ -567,6 +567,7 @@ const DatagridFactory = (Factory)=>{
                                                     key = {field}
                                                     testID={testID+"_FooterItem_"+field}
                                                     {...footer}
+                                                    anchorProps = {{style:[theme.styles.ph1,theme.styles.mh05]}}
                                                 />
                                             })}
                                         </View>

package/src/components/Datagrid/Common/Common.js

@@ -71,13 +71,13 @@ export default class CommonDatagridComponent extends AppComponent {
         });
         selectedRows = sRows;
         let sData = this.getSessionData()
-        sData.showFooter = defaultVal(sData.showFooter,true);
+        sData.showFooters = defaultVal(sData.showFooters,true);
         sData.fixedTable = defaultBool(sData.fixedTable,false);
         extendObj(this.state, {
             data,
             sort :defaultObj(props.sort),
             showFilters : defaultBool(props.showFilters,(sData.showFilter? true : this.isPivotDatagrid())),
-            showFooter : defaultBool(props.showFooter,(sData.showFooter? true : false)),
+            showFooters : defaultBool(props.showFooters,(sData.showFooters? true : false)),
             fixedTable : sData.fixedTable
         });
         Object.defineProperties(this,{
@@ -784,16 +784,16 @@ export default class CommonDatagridComponent extends AppComponent {
    }
 
 
-    showFooter(){
+    showFooters(){
         if(!this._isMounted()) {
             this.isUpdating = false;
             return;
         }
         if(this.isUpdating) return false;
         this.isUpdating = true;
-        this.setState( {showFooter:true},()=>{
+        this.setState( {showFooters:true},()=>{
             this.isUpdating = false;
-            this.setSessionData({showFooter:true})
+            this.setSessionData({showFooters:true})
         })
     }
     hideFooter (){
@@ -802,9 +802,9 @@ export default class CommonDatagridComponent extends AppComponent {
              return;
         }
         if(this.isUpdating) return false;
-        this.setState({showFooter:false},()=>{
+        this.setState({showFooters:false},()=>{
             this.isUpdating = false;
-            this.setSessionData({showFooter:false});
+            this.setSessionData({showFooters:false});
         })
     }
    
@@ -899,14 +899,18 @@ export default class CommonDatagridComponent extends AppComponent {
             let colFilter = defaultVal(restCol.filter,true);
             field = header.field = defaultStr(header.field,field,headerIndex);
             delete restCol.filter;
+            
+            const type = defaultStr(header.type).toLowerCase();
+            sortType = defaultStr(sortType,type).toLowerCase();
             width = defaultDecimal(width);
             if(width <COLUMN_WIDTH/2){
                 width = COLUMN_WIDTH;
             }
-            const type = defaultStr(header.type).toLowerCase();
-            sortType = defaultStr(sortType,type).toLowerCase();
             if(type.contains("date")|| type.contains("time")){
-                width = Math.max(width,DATE_COLUMN_WIDTH);
+                const mWidth = type.toLowerCase().contains('datetime')? (DATE_COLUMN_WIDTH+30) : DATE_COLUMN_WIDTH;
+                width = Math.max(width,mWidth);
+            } else if((type.contains("number") || type.contains("decimal") && this.props.format)){
+                width = Math.max(width,DATE_COLUMN_WIDTH-30);
             }
             totalWidths +=width;
             widths[header.field] = width;
@@ -953,6 +957,17 @@ export default class CommonDatagridComponent extends AppComponent {
                 delete restCol.sortable;
                 filterProps = {
                     ...restCol,
+                    columnIndex,
+                    visibleColumnIndex,
+                    sortable:isColumnSortable,
+                    sorted:isColumnSorted,
+                    sortedColumn :sortedProps,///les props de la columns triée
+                    sortedProps,
+                    width,
+                    columnField : field,
+                    columnDef : header,
+                    index : headerIndex,
+                    visible,
                     key : header.field,
                     label : defaultStr(header.label,header.text),
                     orOperator : filterOrOperator,
@@ -1710,7 +1725,7 @@ CommonDatagridComponent.propTypes = {
     /*** affiche ou masque les filtres */
     showFilters : PropTypes.bool,
     /*** si le pied de page sera affiché */
-    showFooter : PropTypes.bool,
+    showFooters : PropTypes.bool,
     /*** les donnnées peuvent être soient retournées par une fonction, soit par un tableau soit une promesse */
     data : PropTypes.oneOfType([PropTypes.array, PropTypes.func,PropTypes.object]),//.isRequired,
     columns:PropTypes.oneOfType([PropTypes.array,PropTypes.object]),//.isRequired,

package/src/components/Datagrid/Footer/Footer.js

@@ -3,7 +3,7 @@ import Menu from "$ecomponents/BottomSheet/Menu";
 import View from "$ecomponents/View";
 import {Pressable,StyleSheet} from "react-native";
 import Label from "$ecomponents/Label";
-import {defaultVal} from "$utils";
+import {defaultVal,defaultObj} from "$utils";
 import React from "$react";
 import theme from "$theme"
 
@@ -18,7 +18,9 @@ const formatValue = ({value,format,method})=>{
     return (format === 'money' && method != 'count')? value.formatMoney():value.formatNumber();
 }
 export default function DGGridFooterValue (props){
-    let {label,text,displayLabel,style,format} = props;
+    let {label,text,displayLabel,style,format,testID,anchorProps} = props;
+    anchorProps = defaultObj(anchorProps);
+    testID = defaultStr(testID,"RN_DatagridFooterComponent");
     label = defaultVal(label,text);
     const defLabel = label;
     if(displayLabel !== false){
@@ -50,19 +52,19 @@ export default function DGGridFooterValue (props){
         }
     }
     return  <Menu 
+        testID = {testID+"_Menu"}
         items = {menuItems}
-        style = {{minWidth:220}}
         title = {'Totaux de la colonne '+(defLabel?("[ "+defLabel+"]"):'')}
         animateOnClose
         anchor = {(p)=>{
-            return <Pressable {...p} style={[styles.anchor,style,label?styles.row:null]} title={title}>
+            return <Pressable {...anchorProps} {...p} testID={testID} style={[styles.anchor,anchorProps.style,label?styles.row:null]} title={title}>
                 {label ?
                     <>
-                        <View><Label style={[styles.label]}>{label}</Label></View>
-                        <View><Label style = {styles.label}> : </Label></View>
+                        <View testID={testID+"_Label"}><Label style={[styles.label]}>{label}</Label></View>
+                        <View testID={testID+"_LabelPoint"}><Label style = {styles.label}> : </Label></View>
                     </>
                 : null}
-                <Label primary style={[styles.value]}>
+                <Label testID={testID+"_LabelContent"} primary style={[styles.value]}>
                     {formatValue({value:defaultDecimal(props[active]),method:active,format})}
                 </Label>
             </Pressable>
@@ -75,11 +77,7 @@ const styles = StyleSheet.create({
         flexDirection : 'row',
         alignItems : 'center',
     },
-    anchor : {
-        paddingVertical : 10,
-        marginHorizontal : 10,
-        paddingHorizontal : 5,
-    },
+    anchor : {},
     value : {
         fontWeight : 'bold'
     }

package/src/components/Datagrid/Table/index.js

@@ -13,6 +13,7 @@ import React from "$react";
 import {Menu as BottomSheetMenu} from "$ecomponents/BottomSheet"
 import RenderType from "../RenderType";
 import Footer from "../Footer/Footer";
+import theme from "$theme";
 import Table from "$ecomponents/Table";
 
 
@@ -62,41 +63,23 @@ const DatagridFactory = (Factory)=>{
             }
             return null;
         }
-        renderHeaderCell(props){
-            let ret = super.renderHeaderCell(props);
-            const {columnField,columnDef,style} = props;
-            if(this.state.showFilters){
-                const filterC = this.customFilteredColumns[columnField];
-                if(isObj(filterC)){
-                    return <View testID={"RN_DatagridTableComponent_HeaderField_"+columnField} style={[style,{minHeight:100}]}>
-                        {ret}
-                        <Filter 
-                            {...filterC}
-                            withLabel = {false}
-                            style = {[styles.filter,style]}
-                            anchorProps  ={{size:20}}
-                            inputProps = {{
-                                style : [styles.filter,style]
-                            }}
-                        />
-                    </View>
-                }
-            }
-            return ret;
-        }
-        beforePrepareColumns(){
-            this.customFilteredColumns = {};
-        }
-        prepareColumn({filterProps,columnField,columnDef,key,field,visible,filter},filters){
-            this.customFilteredColumns = defaultObj(this.customFilteredColumns);
-            if(visible){
-                if(filter){
-                    this.customFilteredColumns[columnField] = filterProps;
-                } else {
-                    this.customFilteredColumns[columnField] = null;
-                }
+        renderFilterCell(props){
+            const {columnField,style} = props;
+            const filterC = this.currentFilteringColumns[columnField];
+            if(isObj(filterC)){
+                return <Filter 
+                    {...filterC}
+                    withLabel = {false}
+                    style = {[styles.filter,theme.styles.pv0,theme.styles.mv0]}
+                    anchorProps  ={{size:20}}
+                    mode = "flat"
+                    inputProps = {{
+                        style : [styles.filter],
+                        mode : "flat",
+                    }}
+                />
             }
-            return filters;
+            return null;
         }
         updateLayout(e){
             if(this.state.fixedTable === false) return;
@@ -176,7 +159,7 @@ const DatagridFactory = (Factory)=>{
             })*/
             const {visibleColumns} = this.preparedColumns;
             const hasFooterFields = this.hasFooterFields();
-            const {columnsWidths:widths,showFilters,showFooter} = this.state;
+            const {columnsWidths:widths,showFilters,showFooters} = this.state;
             let isAllRowsSelected = this.isAllRowsSelected();
             const isLoading = this.isLoading();
             let _progressBar = this.getProgressBar();
@@ -227,10 +210,10 @@ const DatagridFactory = (Factory)=>{
                             {hasFooterFields ? <Button
                                 normal
                                 style={styles.paginationItem}
-                                onPress =  {()=>{showFooter?this.hideFooter():this.showFooter()} }   
-                                icon = {showFooter?'view-column':'view-module'}
+                                onPress =  {()=>{showFooters?this.hideFooter():this.showFooters()} }   
+                                icon = {showFooters?'view-column':'view-module'}
                             >   
-                                    {showFooter?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux'}
+                                    {showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux'}
                             </Button>:null}
                             {selectableMultiple && (<>
                                 {restItems.map((item,index)=>{
@@ -287,9 +270,9 @@ const DatagridFactory = (Factory)=>{
                                     ,text : (showFilters?'Masquer/Filtres':'Afficher/Filtres')
                                 } : null,
                                 isMobile && hasFooterFields?{
-                                    onPress :  ()=>{showFooter?this.hideFooter():this.showFooter()}    
-                                    ,icon :  showFooter?'view-column':'view-module'
-                                    ,text : (showFooter?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
+                                    onPress :  ()=>{showFooters?this.hideFooter():this.showFooters()}    
+                                    ,icon :  showFooters?'view-column':'view-module'
+                                    ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
                                 } : null,
                                 ...(selectableMultiple ? restItems : [])
                             ] : visibleColumns}
@@ -340,7 +323,7 @@ const DatagridFactory = (Factory)=>{
                     ref = {this.listRef}
                     hasFooters = {hasFooterFields}
                     showFilters = {showFilters}
-                    showFooters = {showFooter}
+                    showFooters = {showFooters}
                     headerContainerProps = {{}}
                     headerCellContainerProps = {{
                         style : showFilters?{justifyContent:'flex-start'}:null
@@ -358,7 +341,9 @@ const DatagridFactory = (Factory)=>{
                     }}
                     data = {this.state.data}
                     renderHeaderCell={this.renderHeaderCell.bind(this)}
+                    renderFilterCell={this.renderFilterCell.bind(this)}
                     renderFooterCell={this.renderFooterCell.bind(this)}
+                    renderEmpty = {this.renderEmpty.bind(this)}
                 />
             </View>
         }
@@ -440,8 +425,10 @@ const styles = StyleSheet.create({
         maxHeight : 40,
         height : 40,
         width : "100%",
+        alignSelf : 'flex-start',
         flexGrow : 1,
         minHeight : 40,
+        backgroundColor : 'transparent'
     },
     layoutContent : {
         maxWidth : '100%',

package/src/components/Date/DatePickerInput/index.js

@@ -166,7 +166,7 @@ const DatePickerInput = React.forwardRef(({
         onChange({dateObject:state.inputDate,date:state.inputDate,sqlDate:date,value:date})
     }
   },[state])
-  const labelText = render_filter ? label : withLabel!==false ? getLabel({ label, inputFormat:inputFormatLabel, withDateFormatInLabel }):"";
+  const labelText = withLabel === false ? null: (render_filter ? label : getLabel({ label, inputFormat:inputFormatLabel, withDateFormatInLabel }));
   return (
     <>
         <TextField

package/src/components/Date/DateTime.js

@@ -13,7 +13,7 @@ import { toDateObj } from "./utils";
 import TextField from "$components/TextField";
 import PeriodActionComponent from "./PeriodAction";
 
-export default function DateTimePickerComponent({left,isPeriodAction,withSeconds,right,format,dateFormat,timeFormat,defaultValue,onChange,testID,dateProps,disabled,readOnly,timeProps,...rest}){
+export default function DateTimePickerComponent({left,isPeriodAction,contentProps,withSeconds,right,format,dateFormat,timeFormat,defaultValue,onChange,testID,dateProps,disabled,readOnly,timeProps,...rest}){
     if(!isPeriodAction){
         isPeriodAction = isNonNullString(defaultValue) && defaultValue.contains("=>");
     }
@@ -28,6 +28,7 @@ export default function DateTimePickerComponent({left,isPeriodAction,withSeconds
     }
     dateProps = defaultObj(dateProps);
     timeProps = defaultObj(timeProps);
+    contentProps = defaultObj(contentProps);
     testID = defaultStr(testID,"RN_DateTimeComponent")
     const anchorTimeProps = defaultObj(timeProps.anchorProps);
     const timePropsContainerProps = defaultObj(timeProps.containerProps);
@@ -52,8 +53,8 @@ export default function DateTimePickerComponent({left,isPeriodAction,withSeconds
     const timeDefaultValue = getTimeValue(dateObj);
     const changedTimeArgsRef = {current:{...defaultObj(parseTime(timeDefaultValue,withSeconds))}};
     withSeconds = defaultBool(timeProps.withSeconds,withSeconds,true);
-
-    const maxWidth = 120;//withSeconds ? 120 : 120;
+    const cStyle = [theme.styles.noPadding,theme.styles.noMargin];
+    const maxWidth = 110;
     const callOnChange = ()=>{
         if(onChange){
             const dObj = changeDateArgsRef.current;
@@ -71,6 +72,8 @@ export default function DateTimePickerComponent({left,isPeriodAction,withSeconds
             onChange(args);
         }
     }
+    const tInputProps = defaultObj(timeProps.inputProps);
+    const dStyle = flattenStyle([rest.style,dateProps.style]);
     return <DateComponent
         defaultValue = {dateObj}
         disabled = {disabled}
@@ -79,7 +82,7 @@ export default function DateTimePickerComponent({left,isPeriodAction,withSeconds
         {...rest}
         format = {dateFormat}
         {...dateProps}
-        style = {[rest.style,dateProps.style]}
+        style = {dStyle}
         calendarIconBefore = {true}
         onChange = {(args)=>{
             changeDateArgsRef.current = args;
@@ -102,15 +105,17 @@ export default function DateTimePickerComponent({left,isPeriodAction,withSeconds
                     }}
                     withLabel = {false}
                     mode = {"flat"}
-                    containerProps = {{...timePropsContainerProps,style:[{maxWidth},timePropsContainerProps.style]}}
+                    contentProps = {{style:cStyle}}
+                    containerProps = {{...timePropsContainerProps,style:[{maxWidth},theme.styles.noPadding,theme.styles.noMargin,timePropsContainerProps.style]}}
                     divider = {false}
+                    style = {[theme.styles.noPadding,{maxHeight:40},theme.styles.noMargin,timeProps.style,dStyle.backgroundColor && {backgroundColor:dStyle.backgroundColor}]}
                     anchorProps = {{
                         ...anchorTimeProps,
                         testID:testID+"_TimeAnchor",
                         style : [theme.styles.noPadding,{borderRadius:0},theme.styles.noMargin,anchorTimeProps.style]
                     }}
                     inputProps = {{
-                        ...defaultObj(timeProps.inputProps),
+                        ...tInputProps,
                         mode : "flat",
                     }}
                 />

package/src/components/Date/Time.js

@@ -44,8 +44,9 @@ export const timeToString = (value,withSeconds)=>{
      return value.substring(0,5);
   }
 export default function TimePickerComponent (props){
-    let {right:customRight,upper,anchorProps,dialogProps,withLabel,containerProps,mode,onChange,withSeconds,cancelLabel,confirmLabel,label,text,upperCase,defaultValue,disabled,editable,withModal,readOnly,...rest} = props;
+    let {right:customRight,upper,anchorProps,dialogProps,withLabel,inputProps,containerProps,mode,onChange,withSeconds,cancelLabel,confirmLabel,label,text,upperCase,defaultValue,disabled,editable,withModal,readOnly,...rest} = props;
     rest = defaultObj(rest);
+    inputProps = defaultObj(inputProps);
     const isEditable = disabled !== true && readOnly !== true && editable !== false?true : false;
     withModal = defaultBool(withModal,true);
     if(!isEditable){
@@ -110,6 +111,7 @@ export default function TimePickerComponent (props){
     if(!disabled){
       containerProps.style = [containerProps.style,{opacity:1}]
     }
+    const iContainerProps = defaultObj(inputProps.containerProps);
     return <>
       <TouchableRipple {...containerProps} 
         disabled = {!isEditable}
@@ -120,6 +122,8 @@ export default function TimePickerComponent (props){
           <TextField
           mode = {mode||theme.textFieldMode}
           {...rest}
+          {...inputProps}
+          containerProps = {{...iContainerProps,style:[containerProps.style,iContainerProps.style]}}
           label = {label}
           right = {right}
           disabled = {disabled}

package/src/components/DragResize/Connector.js

@@ -0,0 +1,132 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import React, {Component} from 'react';
+import {
+  PanResponder,
+  View,
+} from 'react-native';
+import PropTypes from 'prop-types';
+
+export const CONNECTOR_TOP_LEFT = 'tl';
+export const CONNECTOR_TOP_MIDDLE = 'tm';
+export const CONNECTOR_TOP_RIGHT = 'tr';
+export const CONNECTOR_MIDDLE_RIGHT = 'mr';
+export const CONNECTOR_BOTTOM_RIGHT = 'br';
+export const CONNECTOR_BOTTOM_MIDDLE = 'bm';
+export const CONNECTOR_BOTTOM_LEFT = 'bl';
+export const CONNECTOR_MIDDLE_LEFT = 'ml';
+export const CONNECTOR_CENTER = 'c';
+
+/**
+ * Connector component for handle touch events.
+ */
+export class Connector extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.position = {
+      x: 0,
+      y: 0,
+    };
+
+    this._panResponder = PanResponder.create({
+      // Ask to be the responder:
+      onStartShouldSetPanResponder: (event, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (event, gestureState) => true,
+      onMoveShouldSetPanResponder: (event, gestureState) => true,
+      onMoveShouldSetPanResponderCapture: (event, gestureState) => true,
+
+      onPanResponderGrant: (event, gestureState) => {
+        // The gesture has started. Show visual feedback so the user knows
+        // what is happening!
+        // gestureState.d{x,y} will be set to zero now
+        const {
+          onStart
+        } = this.props;
+
+        this.position = {
+          x: 0,
+          y: 0,
+        };
+
+        onStart([
+          0,
+          0,
+        ]);
+      },
+      onPanResponderMove: (event, gestureState) => {
+        const {
+          onMove
+        } = this.props;
+
+        onMove([
+          gestureState.dx - this.position.x,
+          gestureState.dy - this.position.y,
+        ]);
+
+        this.position = {
+          x: gestureState.dx,
+          y: gestureState.dy,
+        };
+      },
+      onPanResponderTerminationRequest: (event, gestureState) => true,
+      onPanResponderRelease: (event, gestureState) => {
+        // The user has released all touches while this view is the
+        // responder. This typically means a gesture has succeeded
+        const {
+          onEnd
+        } = this.props;
+
+        onEnd([
+          gestureState.moveX,
+          gestureState.moveY,
+        ]);
+      },
+      onPanResponderTerminate: (event, gestureState) => {
+        // Another component has become the responder, so this gesture
+        // should be cancelled
+      },
+      onShouldBlockNativeResponder: (event, gestureState) => {
+        // Returns whether this component should block native components from becoming the JS
+        // responder. Returns true by default. Is currently only supported on android.
+        return true;
+      },
+    });
+  }
+
+  render() {
+    const {
+      x,
+      y,
+      size,
+    } = this.props;
+
+    return (
+      <View
+        style={{
+          position: 'absolute',
+          left: x,
+          top: y,
+          width: size,
+          height: size,
+          borderWidth: 2,
+          borderColor: 'black',
+          backgroundColor: 'white'
+        }}
+        {...this._panResponder.panHandlers}
+      />
+    );
+  }
+}
+
+Connector.propTypes = {
+  x: PropTypes.number,
+  y: PropTypes.number,
+  size: PropTypes.number,
+  onStart: PropTypes.func.isRequired,
+  onMove: PropTypes.func.isRequired,
+  onEnd: PropTypes.func.isRequired,
+};