chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
175 lines (172 loc) • 5.33 kB
JavaScript
/**
* @component
*/
import React, { useEffect, useState, useCallback, forwardRef, useImperativeHandle } from 'react';
import PropTypes from 'prop-types';
import { getUserSignature, putUserSignature, deleteUserSignature } from '../api/signature';
import Button from '../../react-chayns-button/component/Button';
import Icon from '../../react-chayns-icon/component/Icon';
import "./signature.css";
import TextString from '../../react-chayns-textstring/component/TextString';
/**
* A component to let the user subscribe
*/
const Signature = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
buttonText,
buttonWrapperClassName,
onSubscribe,
skipLoadAndSave = false,
disabled = false,
onEdit,
forceInitialShow = false,
showDeleteIcon = false
} = _ref;
const [signatureUrl, setSignatureUrl] = useState(undefined);
const [subscribed, setSubscribed] = useState(() => forceInitialShow);
const [, setTextStringsLoaded] = useState(false);
useEffect(() => {
if (!skipLoadAndSave) getUserSignature().then(setSignatureUrl);
TextString.loadLibrary('ChaynsComponents').then(() => {
setTextStringsLoaded(true);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const editSignature = useCallback(async () => {
const {
buttonType,
value
} = await chayns.dialog.signature({
buttons: [{
text: TextString.getTextString('txt_chayns_components_signature_save'),
buttonType: chayns.dialog.buttonType.POSITIVE
}, {
text: chayns.dialog.buttonText.CANCEL,
buttonType: chayns.dialog.buttonType.NEGATIVE
}]
});
if (buttonType === chayns.dialog.buttonType.POSITIVE) {
let success = true;
if (!skipLoadAndSave) {
success = value ? await putUserSignature(value) : await deleteUserSignature();
}
if (success) {
setSignatureUrl(value);
onEdit === null || onEdit === void 0 ? void 0 : onEdit(value);
}
return {
success,
value: value || null
};
}
return {
success: false,
value: null
};
}, [skipLoadAndSave, onEdit]);
const deleteSignature = useCallback(async () => {
await deleteUserSignature();
let success = true;
if (!skipLoadAndSave) {
success = await deleteUserSignature();
}
if (success) {
setSignatureUrl(null);
onEdit === null || onEdit === void 0 ? void 0 : onEdit(null);
}
}, [skipLoadAndSave, onEdit]);
const onButtonClick = useCallback(async () => {
if (!signatureUrl) {
const {
success,
value
} = await editSignature();
if (success) {
setSubscribed(true);
onSubscribe === null || onSubscribe === void 0 ? void 0 : onSubscribe(value);
}
} else {
setSubscribed(true);
onSubscribe === null || onSubscribe === void 0 ? void 0 : onSubscribe(signatureUrl);
}
}, [signatureUrl, editSignature, onSubscribe]);
useImperativeHandle(ref, () => ({
edit: editSignature,
delete: deleteSignature
}));
if (!chayns.env.user.isAuthenticated) {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
onClick: async () => {
await new Promise(resolve => {
const cb = () => {
resolve();
chayns.removeAccessTokenChangeListener(cb);
};
chayns.addAccessTokenChangeListener(cb);
chayns.login();
});
getUserSignature().then(setSignatureUrl);
}
}, "Anmelden"));
}
if (!subscribed || !signatureUrl) {
return /*#__PURE__*/React.createElement("div", {
className: buttonWrapperClassName
}, /*#__PURE__*/React.createElement(Button, {
onClick: onButtonClick,
disabled: disabled
}, buttonText || TextString.getTextString('txt_chayns_components_signature_button') || ''));
}
return /*#__PURE__*/React.createElement("div", {
className: "cc__signature"
}, /*#__PURE__*/React.createElement("img", {
src: signatureUrl,
alt: "signature",
style: {
maxHeight: 130,
filter: chayns.env.site.colorMode === 1 ? 'invert(1)' : undefined
},
onClick: editSignature
}), showDeleteIcon && /*#__PURE__*/React.createElement(Icon, {
icon: "ts-wrong",
className: "cc__signature--icon chayns__color--secondaryi",
onClick: deleteSignature
}));
});
Signature.propTypes = {
/**
* The text shown in the button
*/
buttonText: PropTypes.string,
/**
* the className to use on the button wrapping div
*/
buttonWrapperClassName: PropTypes.string,
/**
* whether the subscribe button is disabled
*/
disabled: PropTypes.bool,
/**
* disables loading and saving of the signature
*/
skipLoadAndSave: PropTypes.bool,
/**
* callback which is called when the user subscribes
*/
onSubscribe: PropTypes.func,
/**
* callback which is called when the user edits his subscription
*/
onEdit: PropTypes.func,
/**
* Forces to show signature on initial render
*/
forceInitialShow: PropTypes.bool,
/**
* whether the icon to delete the signature should be shown
*/
showDeleteIcon: PropTypes.bool
};
Signature.displayName = 'Signature';
export default Signature;
//# sourceMappingURL=Signature.js.map