@oneblink/apps-react 6.11.0-beta.9 → 6.11.1-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/PaymentReceipt.js +7 -3
- package/dist/PaymentReceipt.js.map +1 -1
- package/dist/form-elements/FormElementCheckBoxes.js +6 -6
- package/dist/form-elements/FormElementCheckBoxes.js.map +1 -1
- package/dist/form-elements/OptionButton.js +2 -2
- package/dist/form-elements/OptionButton.js.map +1 -1
- package/package.json +2 -2
package/dist/PaymentReceipt.js
CHANGED
|
@@ -43,6 +43,7 @@ function PaymentReceipt({ onDone, onCancel, }) {
|
|
|
43
43
|
React.useEffect(() => {
|
|
44
44
|
let ignore = false;
|
|
45
45
|
const getTransaction = async () => {
|
|
46
|
+
var _a;
|
|
46
47
|
let newError = null;
|
|
47
48
|
let newTransaction = null;
|
|
48
49
|
let newSubmissionResult = null;
|
|
@@ -53,7 +54,7 @@ function PaymentReceipt({ onDone, onCancel, }) {
|
|
|
53
54
|
newTransaction = result.transaction;
|
|
54
55
|
newSubmissionResult = result.submissionResult;
|
|
55
56
|
newReceiptItems = result.receiptItems;
|
|
56
|
-
newSchedulingBooking = result.schedulingBooking;
|
|
57
|
+
newSchedulingBooking = (_a = result.schedulingBooking) !== null && _a !== void 0 ? _a : null;
|
|
57
58
|
}
|
|
58
59
|
catch (error) {
|
|
59
60
|
console.warn('Error while attempting to load transaction', error);
|
|
@@ -124,7 +125,10 @@ function PaymentReceipt({ onDone, onCancel, }) {
|
|
|
124
125
|
paymentReceiptUrl: submissionResult.payment.paymentReceiptUrl,
|
|
125
126
|
paymentFormUrl: submissionResult.payment.paymentFormUrl,
|
|
126
127
|
});
|
|
127
|
-
await submissionService.executePostSubmissionAction(submissionResult,
|
|
128
|
+
await submissionService.executePostSubmissionAction(submissionResult, {
|
|
129
|
+
onRedirectToRelativeUrl: (url) => history.push(url),
|
|
130
|
+
onRedirectToAbsoluteUrl: (url) => window.location.assign(url),
|
|
131
|
+
});
|
|
128
132
|
}
|
|
129
133
|
catch (error) {
|
|
130
134
|
console.warn('Error while attempting to retry transaction', error);
|
|
@@ -136,7 +140,7 @@ function PaymentReceipt({ onDone, onCancel, }) {
|
|
|
136
140
|
retryError: newError,
|
|
137
141
|
});
|
|
138
142
|
}
|
|
139
|
-
}, [history
|
|
143
|
+
}, [history, isMounted, submissionResult]);
|
|
140
144
|
return (React.createElement("div", null,
|
|
141
145
|
isLoading && (React.createElement("section", null,
|
|
142
146
|
React.createElement("div", { className: "cypress-loading has-text-centered" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaymentReceipt.js","sourceRoot":"","sources":["../src/PaymentReceipt.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { useHistory } from 'react-router-dom'\nimport {\n paymentService,\n submissionService,\n OneBlinkAppsError,\n schedulingService,\n localisationService,\n} from '@oneblink/apps'\nimport useIsMounted from './hooks/useIsMounted'\n\nimport useQuery from './hooks/useQuery'\nimport Modal from './components/renderer/Modal'\nimport OnLoading from './components/renderer/OnLoading'\nimport {\n Receipt,\n ReceiptList,\n ReceiptListItem,\n ReceiptButton,\n} from './components/receipts'\nimport MaterialIcon from './components/MaterialIcon'\n\nconst { handlePaymentQuerystring, handlePaymentSubmissionEvent } =\n paymentService\n\nfunction PaymentReceipt({\n onDone,\n onCancel,\n}: {\n /**\n * The function to call when the user clicks 'Done'. See\n * [FormSubmissionResult](https://oneblink.github.io/apps/modules/submissionService.html#FormSubmissionResult)\n * for the structure of the argument.\n */\n onDone: (\n submissionResult: submissionService.FormSubmissionResult,\n ) => Promise<void>\n /**\n * The function to call when the user clicks 'Cancel'. See\n * [FormSubmissionResult](https://oneblink.github.io/apps/modules/submissionService.html#FormSubmissionResult)\n * for the structure of the argument.\n */\n onCancel: (\n submissionResult: submissionService.FormSubmissionResult,\n ) => Promise<void>\n}) {\n const isMounted = useIsMounted()\n const query = useQuery()\n const history = useHistory()\n\n const [\n {\n isLoading,\n loadError,\n transaction,\n submissionResult,\n receiptItems,\n schedulingBooking,\n },\n setLoadState,\n ] = React.useState<{\n isLoading: boolean\n loadError: Error | null\n transaction: paymentService.HandlePaymentResult['transaction'] | null\n submissionResult: submissionService.FormSubmissionResult | null\n receiptItems: paymentService.PaymentReceiptItem[] | null\n schedulingBooking: schedulingService.SchedulingBooking | null\n }>({\n isLoading: true,\n loadError: null,\n transaction: null,\n submissionResult: null,\n receiptItems: null,\n schedulingBooking: null,\n })\n const [\n { isRunningPostSubmissionAction, postSubmissionError },\n setPostSubmissionState,\n ] = React.useState<{\n isRunningPostSubmissionAction: boolean\n postSubmissionError: OneBlinkAppsError | null\n }>({\n isRunningPostSubmissionAction: false,\n postSubmissionError: null,\n })\n const clearPostSubmissionError = React.useCallback(() => {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n postSubmissionError: null,\n }))\n }, [])\n const [{ isRetrying, retryError }, setRetryState] = React.useState<{\n isRetrying: boolean\n retryError: OneBlinkAppsError | null\n }>({\n isRetrying: false,\n retryError: null,\n })\n const clearRetryError = React.useCallback(() => {\n setRetryState((currentState) => ({\n ...currentState,\n retryError: null,\n }))\n }, [])\n\n React.useEffect(() => {\n let ignore = false\n\n const getTransaction = async () => {\n let newError = null\n let newTransaction = null\n let newSubmissionResult = null\n let newReceiptItems = null\n let newSchedulingBooking = null\n try {\n const result = await handlePaymentQuerystring(query)\n newTransaction = result.transaction\n newSubmissionResult = result.submissionResult\n newReceiptItems = result.receiptItems\n newSchedulingBooking = result.schedulingBooking\n } catch (error) {\n console.warn('Error while attempting to load transaction', error)\n newError = error as Error\n }\n\n if (!ignore) {\n setLoadState({\n isLoading: false,\n loadError: newError,\n transaction: newTransaction,\n submissionResult: newSubmissionResult,\n receiptItems: newReceiptItems,\n schedulingBooking: newSchedulingBooking,\n })\n }\n }\n getTransaction()\n\n return () => {\n ignore = true\n }\n }, [query])\n\n const executePostSubmissionAction = React.useCallback(\n async (\n action: (\n submissionRresult: submissionService.FormSubmissionResult,\n ) => Promise<void>,\n ) => {\n if (!submissionResult || !isMounted.current) {\n return\n }\n\n setPostSubmissionState({\n isRunningPostSubmissionAction: true,\n postSubmissionError: null,\n })\n\n let newError = null\n try {\n await action({ ...submissionResult, payment: null })\n } catch (error) {\n console.warn('Error while running post submission action', error)\n newError = error as OneBlinkAppsError\n }\n\n if (isMounted.current) {\n setPostSubmissionState({\n isRunningPostSubmissionAction: false,\n postSubmissionError: newError,\n })\n }\n },\n [isMounted, submissionResult],\n )\n\n const handleDone = React.useCallback(async () => {\n executePostSubmissionAction(onDone)\n }, [executePostSubmissionAction, onDone])\n\n const handleCancel = React.useCallback(() => {\n executePostSubmissionAction(onCancel)\n }, [executePostSubmissionAction, onCancel])\n\n const handleTryAgain = React.useCallback(async () => {\n if (!submissionResult || !submissionResult.payment) {\n return\n }\n const paymentSubmissionEvent = submissionResult.payment.submissionEvent\n\n if (isMounted.current) {\n setRetryState({\n isRetrying: true,\n retryError: null,\n })\n }\n\n let newError = null\n try {\n submissionResult.payment = await handlePaymentSubmissionEvent({\n amount: submissionResult.payment.amount,\n formSubmissionResult: submissionResult,\n paymentSubmissionEvent,\n paymentReceiptUrl: submissionResult.payment.paymentReceiptUrl,\n paymentFormUrl: submissionResult.payment.paymentFormUrl,\n })\n await submissionService.executePostSubmissionAction(\n submissionResult,\n history.push,\n )\n } catch (error) {\n console.warn('Error while attempting to retry transaction', error)\n newError = error as OneBlinkAppsError\n }\n\n if (isMounted.current) {\n setRetryState({\n isRetrying: false,\n retryError: newError,\n })\n }\n }, [history.push, isMounted, submissionResult])\n\n return (\n <div>\n {isLoading && (\n <section>\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\"></OnLoading>\n <span>Retrieving transaction details...</span>\n </div>\n </section>\n )}\n\n {transaction && (\n <Receipt\n className=\"ob-payment-receipt\"\n containerClassName=\"ob-payment-receipt__container\"\n >\n <ReceiptList\n successIconClassName=\"ob-payment-receipt__success-icon\"\n warningIconClassName=\"ob-payment-receipt__warning-icon\"\n warningMessageClassName=\"ob-payment-receipt__warning-message cypress-payment-receipt-warning-message\"\n warningMessage={\n transaction.isSuccess\n ? undefined\n : transaction.errorMessage || undefined\n }\n >\n {receiptItems &&\n receiptItems.length &&\n receiptItems.map((receiptItem, i) => {\n return (\n <ReceiptListItem\n key={i}\n className={receiptItem.className ?? ''}\n valueClassName={receiptItem.valueClassName ?? ''}\n icon={receiptItem.icon}\n label={receiptItem.label}\n value={receiptItem.value}\n allowCopyToClipboard={receiptItem.allowCopyToClipboard}\n />\n )\n })}\n {schedulingBooking && transaction.isSuccess && (\n <>\n {schedulingBooking.location && (\n <ReceiptListItem\n className=\"ob-scheduling-receipt__location\"\n valueClassName=\"cypress-scheduling-receipt-location\"\n icon=\"location_on\"\n label=\"Location\"\n value={schedulingBooking.location}\n />\n )}\n\n <ReceiptListItem\n className=\"ob-scheduling-receipt__start-time\"\n valueClassName=\"cypress-scheduling-receipt-start-time\"\n icon=\"schedule\"\n label=\"Start Time\"\n value={localisationService.formatDatetimeLong(\n schedulingBooking.startTime,\n )}\n />\n\n <ReceiptListItem\n className=\"ob-scheduling-receipt__end-time\"\n valueClassName=\"cypress-scheduling-receipt-end-time\"\n icon=\"schedule\"\n label=\"End Time\"\n value={localisationService.formatDatetimeLong(\n schedulingBooking.endTime,\n )}\n />\n </>\n )}\n <ReceiptListItem\n className=\"ob-payment-receipt__warning\"\n valueClassName=\"cypress-payment-receipt-warning\"\n label=\"Warning\"\n value=\"Please do not click back in your browser, doing so will cause issues with your payment.\"\n />\n </ReceiptList>\n\n <div className=\"buttons\">\n {transaction.isSuccess ? (\n <ReceiptButton\n className=\"is-primary ob-payment-receipt__button ob-payment-receipt__okay-button cypress-payment-receipt-okay-button\"\n label=\"Done\"\n isLoading={isRunningPostSubmissionAction}\n onClick={handleDone}\n />\n ) : (\n <>\n <ReceiptButton\n className=\"ob-payment-receipt__button ob-payment-receipt__cancel-button cypress-payment-receipt-cancel-button\"\n label=\"Cancel\"\n isDisabled={isRetrying}\n isLoading={isRunningPostSubmissionAction}\n onClick={handleCancel}\n />\n <ReceiptButton\n className=\"is-primary ob-payment-receipt__button ob-payment-receipt__try-again-button cypress-payment-receipt-try-again-button\"\n label=\"Try Again\"\n isDisabled={isRunningPostSubmissionAction}\n isLoading={isRetrying}\n onClick={handleTryAgain}\n />\n </>\n )}\n </div>\n </Receipt>\n )}\n\n {loadError && (\n <section className=\"cypress-payment-receipt-loading-error-message\">\n <div className=\"ob-payment-receipt__error-icon-container has-text-centered has-margin-bottom-8\">\n <MaterialIcon className=\"ob-payment-receipt__error-icon has-text-danger icon-x-large\">\n error\n </MaterialIcon>\n </div>\n <p className=\"ob-payment-receipt__error-message has-text-centered has-margin-bottom-4\">\n {loadError.message}\n </p>\n </section>\n )}\n\n {retryError && (\n <Modal\n isOpen\n title={retryError.title || 'Whoops...'}\n bodyClassName=\"cypress-payment-receipt-retry-error-message\"\n actions={\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-payment-receipt-retry-error-okay-button\"\n onClick={clearRetryError}\n autoFocus\n >\n Okay\n </button>\n }\n >\n {retryError.message}\n </Modal>\n )}\n\n {postSubmissionError && (\n <Modal\n isOpen\n title={postSubmissionError.title || 'Whoops...'}\n bodyClassName=\"cypress-payment-receipt-retry-error-message\"\n actions={\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-payment-receipt-retry-error-okay-button\"\n onClick={clearPostSubmissionError}\n autoFocus\n >\n Okay\n </button>\n }\n >\n {postSubmissionError.message}\n </Modal>\n )}\n </div>\n )\n}\n\n/**\n * Component for rendering a OneBlink Form Payment Receipt. This component will\n * payment receipt but it is up to the developer to implement what happens when\n * the user clicks 'Done'.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { PaymentReceipt } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { PaymentReceipt } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * function ReceiptContainer() {\n * const handleDone = React.useCallback(async () => {\n * console.log('All done!')\n * }, [])\n * const handleCancel = React.useCallback(async () => {\n * console.log('Cancelled!')\n * }, [])\n *\n * return <PaymentReceipt onDone={handleDone} onCancel={handleCancel} />\n * }\n *\n * function App() {\n * return (\n * <IsOfflineContextProvider>\n * <ReceiptContainer />\n * </IsOfflineContextProvider>\n * )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n * ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(PaymentReceipt)\n"]}
|
|
1
|
+
{"version":3,"file":"PaymentReceipt.js","sourceRoot":"","sources":["../src/PaymentReceipt.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { useHistory } from 'react-router-dom'\nimport {\n paymentService,\n submissionService,\n OneBlinkAppsError,\n schedulingService,\n localisationService,\n} from '@oneblink/apps'\nimport useIsMounted from './hooks/useIsMounted'\n\nimport useQuery from './hooks/useQuery'\nimport Modal from './components/renderer/Modal'\nimport OnLoading from './components/renderer/OnLoading'\nimport {\n Receipt,\n ReceiptList,\n ReceiptListItem,\n ReceiptButton,\n} from './components/receipts'\nimport MaterialIcon from './components/MaterialIcon'\n\nconst { handlePaymentQuerystring, handlePaymentSubmissionEvent } =\n paymentService\n\nfunction PaymentReceipt({\n onDone,\n onCancel,\n}: {\n /**\n * The function to call when the user clicks 'Done'. See\n * [FormSubmissionResult](https://oneblink.github.io/apps/modules/submissionService.html#FormSubmissionResult)\n * for the structure of the argument.\n */\n onDone: (\n submissionResult: submissionService.FormSubmissionResult,\n ) => Promise<void>\n /**\n * The function to call when the user clicks 'Cancel'. See\n * [FormSubmissionResult](https://oneblink.github.io/apps/modules/submissionService.html#FormSubmissionResult)\n * for the structure of the argument.\n */\n onCancel: (\n submissionResult: submissionService.FormSubmissionResult,\n ) => Promise<void>\n}) {\n const isMounted = useIsMounted()\n const query = useQuery()\n const history = useHistory()\n\n const [\n {\n isLoading,\n loadError,\n transaction,\n submissionResult,\n receiptItems,\n schedulingBooking,\n },\n setLoadState,\n ] = React.useState<{\n isLoading: boolean\n loadError: Error | null\n transaction: paymentService.HandlePaymentResult['transaction'] | null\n submissionResult: submissionService.FormSubmissionResult | null\n receiptItems: paymentService.PaymentReceiptItem[] | null\n schedulingBooking: schedulingService.SchedulingBooking | null\n }>({\n isLoading: true,\n loadError: null,\n transaction: null,\n submissionResult: null,\n receiptItems: null,\n schedulingBooking: null,\n })\n const [\n { isRunningPostSubmissionAction, postSubmissionError },\n setPostSubmissionState,\n ] = React.useState<{\n isRunningPostSubmissionAction: boolean\n postSubmissionError: OneBlinkAppsError | null\n }>({\n isRunningPostSubmissionAction: false,\n postSubmissionError: null,\n })\n const clearPostSubmissionError = React.useCallback(() => {\n setPostSubmissionState((currentState) => ({\n ...currentState,\n postSubmissionError: null,\n }))\n }, [])\n const [{ isRetrying, retryError }, setRetryState] = React.useState<{\n isRetrying: boolean\n retryError: OneBlinkAppsError | null\n }>({\n isRetrying: false,\n retryError: null,\n })\n const clearRetryError = React.useCallback(() => {\n setRetryState((currentState) => ({\n ...currentState,\n retryError: null,\n }))\n }, [])\n\n React.useEffect(() => {\n let ignore = false\n\n const getTransaction = async () => {\n let newError = null\n let newTransaction = null\n let newSubmissionResult = null\n let newReceiptItems = null\n let newSchedulingBooking = null\n try {\n const result = await handlePaymentQuerystring(query)\n newTransaction = result.transaction\n newSubmissionResult = result.submissionResult\n newReceiptItems = result.receiptItems\n newSchedulingBooking = result.schedulingBooking ?? null\n } catch (error) {\n console.warn('Error while attempting to load transaction', error)\n newError = error as Error\n }\n\n if (!ignore) {\n setLoadState({\n isLoading: false,\n loadError: newError,\n transaction: newTransaction,\n submissionResult: newSubmissionResult,\n receiptItems: newReceiptItems,\n schedulingBooking: newSchedulingBooking,\n })\n }\n }\n getTransaction()\n\n return () => {\n ignore = true\n }\n }, [query])\n\n const executePostSubmissionAction = React.useCallback(\n async (\n action: (\n submissionRresult: submissionService.FormSubmissionResult,\n ) => Promise<void>,\n ) => {\n if (!submissionResult || !isMounted.current) {\n return\n }\n\n setPostSubmissionState({\n isRunningPostSubmissionAction: true,\n postSubmissionError: null,\n })\n\n let newError = null\n try {\n await action({ ...submissionResult, payment: null })\n } catch (error) {\n console.warn('Error while running post submission action', error)\n newError = error as OneBlinkAppsError\n }\n\n if (isMounted.current) {\n setPostSubmissionState({\n isRunningPostSubmissionAction: false,\n postSubmissionError: newError,\n })\n }\n },\n [isMounted, submissionResult],\n )\n\n const handleDone = React.useCallback(async () => {\n executePostSubmissionAction(onDone)\n }, [executePostSubmissionAction, onDone])\n\n const handleCancel = React.useCallback(() => {\n executePostSubmissionAction(onCancel)\n }, [executePostSubmissionAction, onCancel])\n\n const handleTryAgain = React.useCallback(async () => {\n if (!submissionResult || !submissionResult.payment) {\n return\n }\n const paymentSubmissionEvent = submissionResult.payment.submissionEvent\n\n if (isMounted.current) {\n setRetryState({\n isRetrying: true,\n retryError: null,\n })\n }\n\n let newError = null\n try {\n submissionResult.payment = await handlePaymentSubmissionEvent({\n amount: submissionResult.payment.amount,\n formSubmissionResult: submissionResult,\n paymentSubmissionEvent,\n paymentReceiptUrl: submissionResult.payment.paymentReceiptUrl,\n paymentFormUrl: submissionResult.payment.paymentFormUrl,\n })\n await submissionService.executePostSubmissionAction(submissionResult, {\n onRedirectToRelativeUrl: (url) => history.push(url),\n onRedirectToAbsoluteUrl: (url) => window.location.assign(url),\n })\n } catch (error) {\n console.warn('Error while attempting to retry transaction', error)\n newError = error as OneBlinkAppsError\n }\n\n if (isMounted.current) {\n setRetryState({\n isRetrying: false,\n retryError: newError,\n })\n }\n }, [history, isMounted, submissionResult])\n\n return (\n <div>\n {isLoading && (\n <section>\n <div className=\"cypress-loading has-text-centered\">\n <OnLoading className=\"has-text-centered\"></OnLoading>\n <span>Retrieving transaction details...</span>\n </div>\n </section>\n )}\n\n {transaction && (\n <Receipt\n className=\"ob-payment-receipt\"\n containerClassName=\"ob-payment-receipt__container\"\n >\n <ReceiptList\n successIconClassName=\"ob-payment-receipt__success-icon\"\n warningIconClassName=\"ob-payment-receipt__warning-icon\"\n warningMessageClassName=\"ob-payment-receipt__warning-message cypress-payment-receipt-warning-message\"\n warningMessage={\n transaction.isSuccess\n ? undefined\n : transaction.errorMessage || undefined\n }\n >\n {receiptItems &&\n receiptItems.length &&\n receiptItems.map((receiptItem, i) => {\n return (\n <ReceiptListItem\n key={i}\n className={receiptItem.className ?? ''}\n valueClassName={receiptItem.valueClassName ?? ''}\n icon={receiptItem.icon}\n label={receiptItem.label}\n value={receiptItem.value}\n allowCopyToClipboard={receiptItem.allowCopyToClipboard}\n />\n )\n })}\n {schedulingBooking && transaction.isSuccess && (\n <>\n {schedulingBooking.location && (\n <ReceiptListItem\n className=\"ob-scheduling-receipt__location\"\n valueClassName=\"cypress-scheduling-receipt-location\"\n icon=\"location_on\"\n label=\"Location\"\n value={schedulingBooking.location}\n />\n )}\n\n <ReceiptListItem\n className=\"ob-scheduling-receipt__start-time\"\n valueClassName=\"cypress-scheduling-receipt-start-time\"\n icon=\"schedule\"\n label=\"Start Time\"\n value={localisationService.formatDatetimeLong(\n schedulingBooking.startTime,\n )}\n />\n\n <ReceiptListItem\n className=\"ob-scheduling-receipt__end-time\"\n valueClassName=\"cypress-scheduling-receipt-end-time\"\n icon=\"schedule\"\n label=\"End Time\"\n value={localisationService.formatDatetimeLong(\n schedulingBooking.endTime,\n )}\n />\n </>\n )}\n <ReceiptListItem\n className=\"ob-payment-receipt__warning\"\n valueClassName=\"cypress-payment-receipt-warning\"\n label=\"Warning\"\n value=\"Please do not click back in your browser, doing so will cause issues with your payment.\"\n />\n </ReceiptList>\n\n <div className=\"buttons\">\n {transaction.isSuccess ? (\n <ReceiptButton\n className=\"is-primary ob-payment-receipt__button ob-payment-receipt__okay-button cypress-payment-receipt-okay-button\"\n label=\"Done\"\n isLoading={isRunningPostSubmissionAction}\n onClick={handleDone}\n />\n ) : (\n <>\n <ReceiptButton\n className=\"ob-payment-receipt__button ob-payment-receipt__cancel-button cypress-payment-receipt-cancel-button\"\n label=\"Cancel\"\n isDisabled={isRetrying}\n isLoading={isRunningPostSubmissionAction}\n onClick={handleCancel}\n />\n <ReceiptButton\n className=\"is-primary ob-payment-receipt__button ob-payment-receipt__try-again-button cypress-payment-receipt-try-again-button\"\n label=\"Try Again\"\n isDisabled={isRunningPostSubmissionAction}\n isLoading={isRetrying}\n onClick={handleTryAgain}\n />\n </>\n )}\n </div>\n </Receipt>\n )}\n\n {loadError && (\n <section className=\"cypress-payment-receipt-loading-error-message\">\n <div className=\"ob-payment-receipt__error-icon-container has-text-centered has-margin-bottom-8\">\n <MaterialIcon className=\"ob-payment-receipt__error-icon has-text-danger icon-x-large\">\n error\n </MaterialIcon>\n </div>\n <p className=\"ob-payment-receipt__error-message has-text-centered has-margin-bottom-4\">\n {loadError.message}\n </p>\n </section>\n )}\n\n {retryError && (\n <Modal\n isOpen\n title={retryError.title || 'Whoops...'}\n bodyClassName=\"cypress-payment-receipt-retry-error-message\"\n actions={\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-payment-receipt-retry-error-okay-button\"\n onClick={clearRetryError}\n autoFocus\n >\n Okay\n </button>\n }\n >\n {retryError.message}\n </Modal>\n )}\n\n {postSubmissionError && (\n <Modal\n isOpen\n title={postSubmissionError.title || 'Whoops...'}\n bodyClassName=\"cypress-payment-receipt-retry-error-message\"\n actions={\n <button\n type=\"button\"\n className=\"button ob-button is-primary cypress-payment-receipt-retry-error-okay-button\"\n onClick={clearPostSubmissionError}\n autoFocus\n >\n Okay\n </button>\n }\n >\n {postSubmissionError.message}\n </Modal>\n )}\n </div>\n )\n}\n\n/**\n * Component for rendering a OneBlink Form Payment Receipt. This component will\n * payment receipt but it is up to the developer to implement what happens when\n * the user clicks 'Done'.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { PaymentReceipt } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { PaymentReceipt } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * function ReceiptContainer() {\n * const handleDone = React.useCallback(async () => {\n * console.log('All done!')\n * }, [])\n * const handleCancel = React.useCallback(async () => {\n * console.log('Cancelled!')\n * }, [])\n *\n * return <PaymentReceipt onDone={handleDone} onCancel={handleCancel} />\n * }\n *\n * function App() {\n * return (\n * <IsOfflineContextProvider>\n * <ReceiptContainer />\n * </IsOfflineContextProvider>\n * )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n * ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(PaymentReceipt)\n"]}
|
|
@@ -70,18 +70,18 @@ function FormElementCheckboxes({ id, element, value, onChange, validationMessage
|
|
|
70
70
|
React.createElement(FormElementLabelContainer, { className: "ob-checkbox", id: id, element: element, required: element.required || !!element.requiredAll },
|
|
71
71
|
React.createElement(FormElementOptions, { options: element.options, conditionallyShownOptionsElement: conditionallyShownOptionsElement },
|
|
72
72
|
element.canToggleAll && (React.createElement(ToggleAllCheckbox, { id: id, element: element, options: filteredOptions, selected: selectedValues, disabled: element.readOnly, onChange: onChange })),
|
|
73
|
-
element.buttons ? (React.createElement("div", { className: "ob-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
element.buttons ? (React.createElement("div", { className: "buttons ob-buttons ob-buttons-radio", role: "group", "aria-labelledby": `${id}-label`, "aria-describedby": ariaDescribedby }, filteredOptions.map((option, index) => {
|
|
74
|
+
const isSelected = selectedValues.includes(option.value);
|
|
75
|
+
return (React.createElement("div", { className: "ob-button-radio-container", key: option.value },
|
|
76
|
+
React.createElement(OptionButton, { element: element, option: option, isSelected: isSelected, onClick: () => changeValues(option.value, isSelected), className: clsx('button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control', {
|
|
77
77
|
'is-primary': isSelected,
|
|
78
78
|
'is-light': !isSelected,
|
|
79
79
|
}), "aria-describedby": ariaDescribedby, onBlur: () => {
|
|
80
80
|
if (index === filteredOptions.length - 1) {
|
|
81
81
|
setIsDirty();
|
|
82
82
|
}
|
|
83
|
-
} }));
|
|
84
|
-
|
|
83
|
+
} })));
|
|
84
|
+
}))) : (React.createElement("div", { role: "group", className: "ob-checkbox-container", "aria-labelledby": `${id}-label`, "aria-describedby": ariaDescribedby }, filteredOptions.map((option, index) => {
|
|
85
85
|
const isSelected = selectedValues.includes(option.value);
|
|
86
86
|
return (React.createElement("div", { className: "control", key: index },
|
|
87
87
|
React.createElement("label", { className: "checkbox ob-checkbox__input-label cypress-checkbox-label", htmlFor: `${id}_${option.value}` },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n FormElementValueChangeHandler,\n FormElementConditionallyShownElement,\n IsDirtyProps,\n UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n id: string\n element: FormTypes.CheckboxElement\n value: unknown\n onChange: FormElementValueChangeHandler<string[]>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n conditionallyShownOptionsElement:\n | FormElementConditionallyShownElement\n | undefined\n onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementCheckboxes({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const selectedValues = React.useMemo(() => {\n if (!Array.isArray(value)) return []\n return value\n }, [value])\n\n // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n // inside the below `setState` callback function since it runs from inside another component\n React.useEffect(() => {\n if (isDirty) return\n\n if (\n // If the element requires a single selection and has a value\n (element.required && !!selectedValues.length) ||\n // or all options are selected and requiredAll is true\n (element.requiredAll && selectedValues.length === element.options?.length)\n ) {\n setIsDirty()\n }\n }, [\n element.options?.length,\n element.required,\n element.requiredAll,\n isDirty,\n selectedValues.length,\n setIsDirty,\n ])\n\n const changeValues = React.useCallback(\n (toggledValue: string, hasSelectedValue: boolean) => {\n onChange(element, {\n value: (existingValue) => {\n if (hasSelectedValue) {\n const newValue = (existingValue || []).filter(\n (existingValue) => existingValue !== toggledValue,\n )\n if (newValue.length) {\n return newValue\n }\n } else {\n const newValue = Array.isArray(existingValue)\n ? [...existingValue]\n : []\n newValue.push(toggledValue)\n return newValue\n }\n },\n })\n },\n [element, onChange],\n )\n\n const filteredOptions = useFormElementOptions({\n element,\n value,\n onChange,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n })\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-checkbox-element\">\n <FormElementLabelContainer\n className=\"ob-checkbox\"\n id={id}\n element={element}\n required={element.required || !!element.requiredAll}\n >\n <FormElementOptions\n options={element.options}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n >\n {element.canToggleAll && (\n <ToggleAllCheckbox\n id={id}\n element={element}\n options={filteredOptions}\n selected={selectedValues}\n disabled={element.readOnly}\n onChange={onChange}\n />\n )}\n {element.buttons ? (\n <div className=\"ob-button-radio-container\">\n <div\n className=\"buttons ob-buttons ob-buttons-radio\"\n role=\"group\"\n aria-labelledby={`${id}-label`}\n aria-describedby={ariaDescribedby}\n >\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <OptionButton\n key={index}\n element={element}\n option={option}\n isSelected={isSelected}\n onClick={() => changeValues(option.value, isSelected)}\n className={clsx(\n 'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control',\n {\n 'is-primary': isSelected,\n 'is-light': !isSelected,\n },\n )}\n aria-describedby={ariaDescribedby}\n onBlur={() => {\n if (index === filteredOptions.length - 1) {\n setIsDirty()\n }\n }}\n />\n )\n })}\n </div>\n </div>\n ) : (\n <div\n role=\"group\"\n className=\"ob-checkbox-container\"\n aria-labelledby={`${id}-label`}\n aria-describedby={ariaDescribedby}\n >\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <div className=\"control\" key={index}>\n <label\n className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n htmlFor={`${id}_${option.value}`}\n >\n <Checkbox\n color=\"primary\"\n className=\"ob-checkbox__input cypress-checkbox-control\"\n classes={{\n checked: 'ob-checkbox__input-checked',\n }}\n value={option.value}\n id={`${id}_${option.value}`}\n checked={isSelected}\n onChange={() => changeValues(option.value, isSelected)}\n disabled={element.readOnly}\n edge=\"start\"\n inputProps={{\n 'aria-describedby': ariaDescribedby,\n }}\n onBlur={() => {\n if (index === filteredOptions.length - 1) {\n setIsDirty()\n }\n }}\n />{' '}\n {option.label}\n </label>\n </div>\n )\n })}\n </div>\n )}\n\n <LookupButton\n hasMarginTop\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n />\n </FormElementOptions>\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementCheckboxes)\n"]}
|
|
1
|
+
{"version":3,"file":"FormElementCheckBoxes.js","sourceRoot":"","sources":["../../src/form-elements/FormElementCheckBoxes.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Checkbox } from '@mui/material'\n\nimport FormElementOptions from '../components/renderer/FormElementOptions'\nimport useFormElementOptions from '../hooks/useFormElementOptions'\nimport LookupButton from '../components/renderer/LookupButton'\nimport { FormTypes } from '@oneblink/types'\nimport OptionButton from './OptionButton'\nimport FormElementLabelContainer from '../components/renderer/FormElementLabelContainer'\nimport ToggleAllCheckbox from '../components/renderer/ToggleAllCheckbox'\nimport {\n FormElementValueChangeHandler,\n FormElementConditionallyShownElement,\n IsDirtyProps,\n UpdateFormElementsHandler,\n} from '../types/form'\nimport { LookupNotificationContext } from '../hooks/useLookupNotification'\nimport useElementAriaDescribedby from '../hooks/useElementAriaDescribedby'\n\ntype Props = {\n id: string\n element: FormTypes.CheckboxElement\n value: unknown\n onChange: FormElementValueChangeHandler<string[]>\n displayValidationMessage: boolean\n validationMessage: string | undefined\n conditionallyShownOptionsElement:\n | FormElementConditionallyShownElement\n | undefined\n onUpdateFormElements: UpdateFormElementsHandler\n} & IsDirtyProps\n\nfunction FormElementCheckboxes({\n id,\n element,\n value,\n onChange,\n validationMessage,\n displayValidationMessage,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n isDirty,\n setIsDirty,\n}: Props) {\n const ariaDescribedby = useElementAriaDescribedby(id, element)\n const selectedValues = React.useMemo(() => {\n if (!Array.isArray(value)) return []\n return value\n }, [value])\n\n // Need to use a `useEffect` to update the `isDirty` state, because it cannot be done from\n // inside the below `setState` callback function since it runs from inside another component\n React.useEffect(() => {\n if (isDirty) return\n\n if (\n // If the element requires a single selection and has a value\n (element.required && !!selectedValues.length) ||\n // or all options are selected and requiredAll is true\n (element.requiredAll && selectedValues.length === element.options?.length)\n ) {\n setIsDirty()\n }\n }, [\n element.options?.length,\n element.required,\n element.requiredAll,\n isDirty,\n selectedValues.length,\n setIsDirty,\n ])\n\n const changeValues = React.useCallback(\n (toggledValue: string, hasSelectedValue: boolean) => {\n onChange(element, {\n value: (existingValue) => {\n if (hasSelectedValue) {\n const newValue = (existingValue || []).filter(\n (existingValue) => existingValue !== toggledValue,\n )\n if (newValue.length) {\n return newValue\n }\n } else {\n const newValue = Array.isArray(existingValue)\n ? [...existingValue]\n : []\n newValue.push(toggledValue)\n return newValue\n }\n },\n })\n },\n [element, onChange],\n )\n\n const filteredOptions = useFormElementOptions({\n element,\n value,\n onChange,\n conditionallyShownOptionsElement,\n onUpdateFormElements,\n })\n\n const { isLookingUp } = React.useContext(LookupNotificationContext)\n const isDisplayingValidationMessage =\n (displayValidationMessage || isDirty) && !!validationMessage && !isLookingUp\n\n return (\n <div className=\"cypress-checkbox-element\">\n <FormElementLabelContainer\n className=\"ob-checkbox\"\n id={id}\n element={element}\n required={element.required || !!element.requiredAll}\n >\n <FormElementOptions\n options={element.options}\n conditionallyShownOptionsElement={conditionallyShownOptionsElement}\n >\n {element.canToggleAll && (\n <ToggleAllCheckbox\n id={id}\n element={element}\n options={filteredOptions}\n selected={selectedValues}\n disabled={element.readOnly}\n onChange={onChange}\n />\n )}\n {element.buttons ? (\n <div\n className=\"buttons ob-buttons ob-buttons-radio\"\n role=\"group\"\n aria-labelledby={`${id}-label`}\n aria-describedby={ariaDescribedby}\n >\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <div className=\"ob-button-radio-container\" key={option.value}>\n <OptionButton\n element={element}\n option={option}\n isSelected={isSelected}\n onClick={() => changeValues(option.value, isSelected)}\n className={clsx(\n 'button ob-button ob-button__input ob-checkbox__button cypress-checkbox-button-control',\n {\n 'is-primary': isSelected,\n 'is-light': !isSelected,\n },\n )}\n aria-describedby={ariaDescribedby}\n onBlur={() => {\n if (index === filteredOptions.length - 1) {\n setIsDirty()\n }\n }}\n />\n </div>\n )\n })}\n </div>\n ) : (\n <div\n role=\"group\"\n className=\"ob-checkbox-container\"\n aria-labelledby={`${id}-label`}\n aria-describedby={ariaDescribedby}\n >\n {filteredOptions.map((option, index) => {\n const isSelected = selectedValues.includes(option.value)\n return (\n <div className=\"control\" key={index}>\n <label\n className=\"checkbox ob-checkbox__input-label cypress-checkbox-label\"\n htmlFor={`${id}_${option.value}`}\n >\n <Checkbox\n color=\"primary\"\n className=\"ob-checkbox__input cypress-checkbox-control\"\n classes={{\n checked: 'ob-checkbox__input-checked',\n }}\n value={option.value}\n id={`${id}_${option.value}`}\n checked={isSelected}\n onChange={() => changeValues(option.value, isSelected)}\n disabled={element.readOnly}\n edge=\"start\"\n inputProps={{\n 'aria-describedby': ariaDescribedby,\n }}\n onBlur={() => {\n if (index === filteredOptions.length - 1) {\n setIsDirty()\n }\n }}\n />{' '}\n {option.label}\n </label>\n </div>\n )\n })}\n </div>\n )}\n\n <LookupButton\n hasMarginTop\n value={value}\n validationMessage={validationMessage}\n lookupButtonConfig={element.lookupButton}\n />\n </FormElementOptions>\n\n {isDisplayingValidationMessage && (\n <div role=\"alert\" className=\"has-margin-top-8\">\n <div className=\"has-text-danger ob-error__text cypress-validation-message\">\n {validationMessage}\n </div>\n </div>\n )}\n </FormElementLabelContainer>\n </div>\n )\n}\n\nexport default React.memo(FormElementCheckboxes)\n"]}
|
|
@@ -10,8 +10,8 @@ const OptionButton = ({ element, option, isSelected, onClick, className, onBlur,
|
|
|
10
10
|
height: 'auto',
|
|
11
11
|
}
|
|
12
12
|
: { height: 'auto' }, disabled: element.readOnly, onClick: onClick, "aria-describedby": props['aria-describedby'], onBlur: onBlur },
|
|
13
|
-
React.createElement(Box, { display: "flex", flexDirection: "column", className: "ob-options__box" },
|
|
14
|
-
option.imageUrl && (React.createElement("img", { className: "ob-options__image", src: option.imageUrl, alt: option.label
|
|
13
|
+
React.createElement(Box, { display: "flex", flexDirection: "column", className: "ob-options__box", maxWidth: 256 },
|
|
14
|
+
option.imageUrl && (React.createElement("img", { className: "ob-options__image", src: option.imageUrl, alt: option.label })),
|
|
15
15
|
option.label)));
|
|
16
16
|
};
|
|
17
17
|
export default React.memo(OptionButton);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionButton.js","sourceRoot":"","sources":["../../src/form-elements/OptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AAExD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAcnC,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EACP,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACF,EAAE,EAAE;IACV,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EACH,MAAM,CAAC,MAAM,IAAI,UAAU;YACzB,CAAC,CAAC;gBACE,eAAe,EAAE,MAAM,CAAC,MAAM;gBAC9B,KAAK,EAAE,mBAAmB;gBAC1B,MAAM,EAAE,MAAM;aACf;YACH,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAExB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EAAE,OAAO,sBACE,KAAK,CAAC,kBAAkB,CAAC,EAC3C,MAAM,EAAE,MAAM;QAEd,oBAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"OptionButton.js","sourceRoot":"","sources":["../../src/form-elements/OptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,MAAM,2BAA2B,CAAA;AAExD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAcnC,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EACP,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACF,EAAE,EAAE;IACV,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EACH,MAAM,CAAC,MAAM,IAAI,UAAU;YACzB,CAAC,CAAC;gBACE,eAAe,EAAE,MAAM,CAAC,MAAM;gBAC9B,KAAK,EAAE,mBAAmB;gBAC1B,MAAM,EAAE,MAAM;aACf;YACH,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAExB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,OAAO,EAAE,OAAO,sBACE,KAAK,CAAC,kBAAkB,CAAC,EAC3C,MAAM,EAAE,MAAM;QAEd,oBAAC,GAAG,IACF,OAAO,EAAC,MAAM,EACd,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAC,iBAAiB,EAC3B,QAAQ,EAAE,GAAG;YAEZ,MAAM,CAAC,QAAQ,IAAI,CAClB,6BACE,SAAS,EAAC,mBAAmB,EAC7B,GAAG,EAAE,MAAM,CAAC,QAAQ,EACpB,GAAG,EAAE,MAAM,CAAC,KAAK,GACjB,CACH;YACA,MAAM,CAAC,KAAK,CACT,CACC,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAC,IAAI,CAAQ,YAAY,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport useContrastColor from '../hooks/useContrastColor'\nimport { FormTypes } from '@oneblink/types'\nimport { Box } from '@mui/material'\n\ntype Props = {\n element:\n | FormTypes.RadioButtonElement\n | FormTypes.CheckboxElement\n | FormTypes.ComplianceElement\n option: FormTypes.ChoiceElementOption\n isSelected: boolean\n onClick: () => void\n className: string\n onBlur?: () => void\n 'aria-describedby'?: string\n}\nconst OptionButton = ({\n element,\n option,\n isSelected,\n onClick,\n className,\n onBlur,\n ...props\n}: Props) => {\n const buttonContrastColor = useContrastColor(option.colour)\n\n return (\n <button\n type=\"button\"\n className={className}\n style={\n option.colour && isSelected\n ? {\n backgroundColor: option.colour,\n color: buttonContrastColor,\n height: 'auto',\n }\n : { height: 'auto' }\n }\n disabled={element.readOnly}\n onClick={onClick}\n aria-describedby={props['aria-describedby']}\n onBlur={onBlur}\n >\n <Box\n display=\"flex\"\n flexDirection=\"column\"\n className=\"ob-options__box\"\n maxWidth={256}\n >\n {option.imageUrl && (\n <img\n className=\"ob-options__image\"\n src={option.imageUrl}\n alt={option.label}\n />\n )}\n {option.label}\n </Box>\n </button>\n )\n}\n\nexport default React.memo<Props>(OptionButton)\n"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oneblink/apps-react",
|
|
3
3
|
"description": "Helper functions for OneBlink apps in ReactJS.",
|
|
4
|
-
"version": "6.11.
|
|
4
|
+
"version": "6.11.1-beta.1",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"@mui/lab": "^5.0.0-alpha.152",
|
|
49
49
|
"@mui/material": "^5.15.6",
|
|
50
50
|
"@mui/x-date-pickers": "^6.19.2",
|
|
51
|
-
"@oneblink/apps": "
|
|
51
|
+
"@oneblink/apps": "^18.0.0-beta.1",
|
|
52
52
|
"@oneblink/release-cli": "^3.3.0",
|
|
53
53
|
"@oneblink/types": "github:oneblink/types",
|
|
54
54
|
"@types/blueimp-load-image": "^5.16.6",
|