Skip to content

Instantly share code, notes, and snippets.

@srmagura
Created January 15, 2022 13:44
Show Gist options
  • Save srmagura/66a2f315f37ddd1af183e5325d23a316 to your computer and use it in GitHub Desktop.
Save srmagura/66a2f315f37ddd1af183e5325d23a316 to your computer and use it in GitHub Desktop.
export function SignaturePadModal({
order,
vendorPackageIds,
closeRef,
onSubmit,
onClose,
}: SignaturePadModalProps): React.ReactElement {
const onError = useOnError()
const dispatch = useDispatch()
const [visible, setVisible] = useState(true)
useEffect(() => {
if (!closeRef) return
closeRef.current = () => setVisible(false)
})
const submittedRef = useRef(false)
const signatureRef = useRef<SignatureViewRef>(null)
function handleOK(signature: string): void {
saveImageAsync(signature)
.then((fileUri) => {
dispatch(
orderActions.signForAsync.request(
{
orderId: order.id,
vendorPackageIds,
fileUri,
needsRotationBy: 180,
resizeWidth: 600,
},
getOrderActionMeta(order)
)
)
submittedRef.current = true
onSubmit()
return undefined
})
.catch(onError)
}
return (
<Modal
isVisible={visible}
onBackdropPress={() => setVisible(false)}
onBackButtonPress={() => setVisible(false)}
onModalHide={() => onClose(submittedRef.current)}
propagateSwipe
style={{
margin: 0,
}}
>
<View
style={[
baseStyles.fullScreenModal,
baseStyles.fullScreenModalContentContainer,
styles.content,
]}
>
<View pointerEvents="box-none" style={styles.overlay}>
<View pointerEvents="box-none" style={styles.overlayCol}>
<Button
small
style={styles.clear}
onPress={() => signatureRef.current?.clearSignature()}
>
<Text>Clear</Text>
</Button>
<Text style={styles.signBelow}>Please sign below</Text>
<Text />
</View>
</View>
<SignatureScreen
ref={signatureRef}
onOK={handleOK}
rotated
descriptionText="Please sign above"
confirmText="Confirm"
clearText="Clear"
webStyle={`
.m-signature-pad--footer {display: none; margin: 0px;}
`}
/>
<View style={styles.buttonRow}>
<Button
dark
bordered
style={styles.button}
onPress={() => setVisible(false)}
>
<Text>Cancel</Text>
</Button>
<Button
primary
style={styles.button}
onPress={() => signatureRef.current?.readSignature()}
>
<Text>Confirm</Text>
</Button>
</View>
</View>
</Modal>
)
}
const styles = StyleSheet.create({
content: {
flex: 1,
},
overlay: {
position: 'absolute',
height: '100%',
width: '100%',
flexDirection: 'row',
justifyContent: 'flex-start',
zIndex: 1000,
},
overlayCol: {
justifyContent: 'space-between',
},
// Rotating an element screws up its placement. Translate it to the position we want
//
// translateX controls the element's HORIZONTAL positioning.
// More negative = farther left
//
// translateY controls the element's VERTICAL positioning.
// More negative = lower
signBelow: {
color: colors.textLight,
transform: [{ rotate: '270deg' }, { translateX: -3 }, { translateY: -50 }],
},
clear: {
backgroundColor: colors.buttonBlue,
transform: [
{ rotate: '270deg' },
{
translateX: -42,
},
{
translateY: Platform.OS === 'ios' ? -14 : -12,
},
],
},
buttonRow: {
flexDirection: 'row',
alignItems: 'center',
paddingTop: 8,
paddingBottom: 4,
},
button: {
flex: 1,
flexBasis: 0,
justifyContent: 'center',
marginHorizontal: 4,
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment