chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
182 lines (179 loc) • 7.05 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _signature = require("../api/signature");
var _Button = _interopRequireDefault(require("../../react-chayns-button/component/Button"));
var _Icon = _interopRequireDefault(require("../../react-chayns-icon/component/Icon"));
require("./signature.css");
var _TextString = _interopRequireDefault(require("../../react-chayns-textstring/component/TextString"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* @component
*/
/**
* A component to let the user subscribe
*/
const Signature = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
let {
buttonText,
buttonWrapperClassName,
onSubscribe,
skipLoadAndSave = false,
disabled = false,
onEdit,
forceInitialShow = false,
showDeleteIcon = false
} = _ref;
const [signatureUrl, setSignatureUrl] = (0, _react.useState)(undefined);
const [subscribed, setSubscribed] = (0, _react.useState)(() => forceInitialShow);
const [, setTextStringsLoaded] = (0, _react.useState)(false);
(0, _react.useEffect)(() => {
if (!skipLoadAndSave) (0, _signature.getUserSignature)().then(setSignatureUrl);
_TextString.default.loadLibrary('ChaynsComponents').then(() => {
setTextStringsLoaded(true);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const editSignature = (0, _react.useCallback)(async () => {
const {
buttonType,
value
} = await chayns.dialog.signature({
buttons: [{
text: _TextString.default.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 (0, _signature.putUserSignature)(value) : await (0, _signature.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 = (0, _react.useCallback)(async () => {
await (0, _signature.deleteUserSignature)();
let success = true;
if (!skipLoadAndSave) {
success = await (0, _signature.deleteUserSignature)();
}
if (success) {
setSignatureUrl(null);
onEdit === null || onEdit === void 0 ? void 0 : onEdit(null);
}
}, [skipLoadAndSave, onEdit]);
const onButtonClick = (0, _react.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]);
(0, _react.useImperativeHandle)(ref, () => ({
edit: editSignature,
delete: deleteSignature
}));
if (!chayns.env.user.isAuthenticated) {
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: async () => {
await new Promise(resolve => {
const cb = () => {
resolve();
chayns.removeAccessTokenChangeListener(cb);
};
chayns.addAccessTokenChangeListener(cb);
chayns.login();
});
(0, _signature.getUserSignature)().then(setSignatureUrl);
}
}, "Anmelden"));
}
if (!subscribed || !signatureUrl) {
return /*#__PURE__*/_react.default.createElement("div", {
className: buttonWrapperClassName
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: onButtonClick,
disabled: disabled
}, buttonText || _TextString.default.getTextString('txt_chayns_components_signature_button') || ''));
}
return /*#__PURE__*/_react.default.createElement("div", {
className: "cc__signature"
}, /*#__PURE__*/_react.default.createElement("img", {
src: signatureUrl,
alt: "signature",
style: {
maxHeight: 130,
filter: chayns.env.site.colorMode === 1 ? 'invert(1)' : undefined
},
onClick: editSignature
}), showDeleteIcon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
icon: "ts-wrong",
className: "cc__signature--icon chayns__color--secondaryi",
onClick: deleteSignature
}));
});
Signature.propTypes = {
/**
* The text shown in the button
*/
buttonText: _propTypes.default.string,
/**
* the className to use on the button wrapping div
*/
buttonWrapperClassName: _propTypes.default.string,
/**
* whether the subscribe button is disabled
*/
disabled: _propTypes.default.bool,
/**
* disables loading and saving of the signature
*/
skipLoadAndSave: _propTypes.default.bool,
/**
* callback which is called when the user subscribes
*/
onSubscribe: _propTypes.default.func,
/**
* callback which is called when the user edits his subscription
*/
onEdit: _propTypes.default.func,
/**
* Forces to show signature on initial render
*/
forceInitialShow: _propTypes.default.bool,
/**
* whether the icon to delete the signature should be shown
*/
showDeleteIcon: _propTypes.default.bool
};
Signature.displayName = 'Signature';
var _default = Signature;
exports.default = _default;
//# sourceMappingURL=Signature.js.map