@chayns-components/core/lib/esm/components/signature/Signature.js

A set of beautiful React components for developing your own applications with chayns.

import { createDialog, DialogType } from 'chayns-api';
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
import { deleteUserSignature } from '../../api/signature/delete';
import { getUserSignature } from '../../api/signature/get';
import { putUserSignature } from '../../api/signature/put';
import Button from '../button/Button';
import Icon from '../icon/Icon';
import { StyledSignature, StyledSignatureDeleteIconWrapper, StyledSignatureImage, StyledSignatureImageWrapper } from './Signature.styles';
const Signature = /*#__PURE__*/forwardRef(({
  onEdit,
  onRemove,
  onUnsubscribe,
  onSubscribe,
  buttonText,
  isDisabled,
  shouldEnableKeyboardHighlighting
}, ref) => {
  const [signatureUrl, setSignatureUrl] = useState(undefined);
  const [hasSubscribed, setHasSubscribed] = useState(false);
  useEffect(() => {
    const loadUserSignature = async () => {
      await getUserSignature().then(signature => {
        setSignatureUrl(signature);
      });
    };
    void loadUserSignature();
  }, []);
  const handleCallDialog = useCallback(async shouldSubscribe => {
    const {
      result,
      buttonType
    } = await createDialog({
      type: DialogType.SIGNATURE
    }).open();
    if (buttonType === 1 && result) {
      await putUserSignature(result).then(success => {
        if (success) {
          setSignatureUrl(result);
          if (shouldSubscribe) {
            setHasSubscribed(true);
            if (typeof onSubscribe === 'function') {
              onSubscribe(result);
            }
          } else if (typeof onEdit === 'function') {
            onEdit(result);
          }
        }
      });
    }
  }, [onEdit, onSubscribe]);
  const handleEdit = useCallback(() => {
    void handleCallDialog(false);
  }, [handleCallDialog]);
  const handleDelete = useCallback(async () => {
    await deleteUserSignature().then(success => {
      if (success) {
        setHasSubscribed(false);
        setSignatureUrl(undefined);
        if (typeof onRemove === 'function') {
          onRemove();
        }
      }
    });
  }, [onRemove]);
  const handleClick = useCallback(() => {
    if (signatureUrl) {
      setHasSubscribed(true);
      if (typeof onSubscribe === 'function') {
        onSubscribe(signatureUrl);
      }
    } else {
      void handleCallDialog(true);
    }
  }, [handleCallDialog, onSubscribe, signatureUrl]);
  const handleUnSubscribe = () => {
    setHasSubscribed(false);
    if (typeof onUnsubscribe === 'function') {
      onUnsubscribe();
    }
  };
  useImperativeHandle(ref, () => ({
    edit: handleEdit,
    delete: handleDelete
  }), [handleDelete, handleEdit]);
  return /*#__PURE__*/React.createElement(StyledSignature, null, !hasSubscribed ? /*#__PURE__*/React.createElement(Button, {
    isDisabled: isDisabled,
    onClick: handleClick,
    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
  }, buttonText) : /*#__PURE__*/React.createElement(StyledSignatureImageWrapper, null, /*#__PURE__*/React.createElement(StyledSignatureImage, {
    src: signatureUrl
  }), /*#__PURE__*/React.createElement(StyledSignatureDeleteIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
    icons: ['ts-wrong'],
    size: 20,
    onClick: handleUnSubscribe,
    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
  }))));
});
Signature.displayName = 'Signature';
export default Signature;
//# sourceMappingURL=Signature.js.map