@oneblink/apps-react 2.9.0-beta.6 → 2.9.0-beta.7
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/components/CustomAccordion.d.ts +2 -2
- package/dist/components/Lists.d.ts +1 -1
- package/dist/components/renderer/FormElementLabelContainer.js +5 -4
- package/dist/components/renderer/FormElementLabelContainer.js.map +1 -1
- package/dist/form-elements/FormElementSection.js +6 -4
- package/dist/form-elements/FormElementSection.js.map +1 -1
- package/dist/hooks/useHint.d.ts +2 -0
- package/dist/hooks/useHint.js +27 -0
- package/dist/hooks/useHint.js.map +1 -0
- package/dist/hooks/useIsHovering.d.ts +1 -1
- package/package.json +1 -1
|
@@ -21,7 +21,7 @@ export declare const CustomAccordionSummary: import("@emotion/styled").StyledCom
|
|
|
21
21
|
tabIndex?: number | undefined;
|
|
22
22
|
TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
|
|
23
23
|
touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
|
|
24
|
-
}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement
|
|
24
|
+
}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
25
25
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
26
|
-
}, "children" | "disabled" | "tabIndex" |
|
|
26
|
+
}, "children" | "disabled" | "tabIndex" | keyof import("@mui/material/OverridableComponent").CommonProps | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "expandIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
27
27
|
export declare const CustomAccordionDetails: import("@emotion/styled").StyledComponent<import("@mui/material").AccordionDetailsProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -21,5 +21,5 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<Omit<im
|
|
|
21
21
|
variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
|
|
22
22
|
} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
|
|
23
23
|
ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
|
|
24
|
-
}, "children" |
|
|
24
|
+
}, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "variant" | ("p" | "color" | "top" | "right" | "bottom" | "left" | "height" | "width" | "fontStyle" | "marginBottom" | "position" | "my" | "pl" | "pt" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "marginY" | "pr" | "pb" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping">, "ref"> & import("@mui/system").MUIStyledCommonProps<Theme> & ListProps, {}, {}>;
|
|
25
25
|
export {};
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Tooltip } from '@mui/material';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
+
import useHint from '../../hooks/useHint';
|
|
4
5
|
function FormElementLabelContainer({ className, element, id, required, children, leading, }) {
|
|
6
|
+
const hint = useHint(element.hint);
|
|
5
7
|
return (React.createElement("div", { className: clsx('ob-form__element', className) },
|
|
6
8
|
React.createElement("div", { className: "label ob-label__container" },
|
|
7
9
|
leading,
|
|
8
10
|
React.createElement("label", { className: clsx('ob-label', {
|
|
9
11
|
'ob-label__required is-required': required,
|
|
10
12
|
}), htmlFor: id }, element.label),
|
|
11
|
-
element.hint
|
|
12
|
-
(element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (React.createElement(Tooltip, { title: element.hint, arrow: true, enterTouchDelay: 0, leaveTouchDelay: 10000 },
|
|
13
|
+
hint && (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (React.createElement(Tooltip, { title: hint, arrow: true, enterTouchDelay: 0, leaveTouchDelay: 10000 },
|
|
13
14
|
React.createElement("i", { className: "material-icons has-text-grey-light ob-label__hint" }, "info")))),
|
|
14
|
-
|
|
15
|
-
React.createElement("div", { className: "ob-hint-text" },
|
|
15
|
+
hint && element.hintPosition === 'BELOW_LABEL' && (React.createElement("div", { className: "ob-hint-text__container" },
|
|
16
|
+
React.createElement("div", { className: "ob-hint-text" }, hint))),
|
|
16
17
|
children));
|
|
17
18
|
}
|
|
18
19
|
export default React.memo(FormElementLabelContainer);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementLabelContainer.js","sourceRoot":"","sources":["../../../src/components/renderer/FormElementLabelContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,IAAI,MAAM,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"FormElementLabelContainer.js","sourceRoot":"","sources":["../../../src/components/renderer/FormElementLabelContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,OAAO,MAAM,qBAAqB,CAAA;AAEzC,SAAS,yBAAyB,CAAC,EACjC,SAAS,EACT,OAAO,EACP,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,OAAO,GAQR;IACC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IAElC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC;QACjD,6BAAK,SAAS,EAAC,2BAA2B;YACvC,OAAO;YACR,+BACE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE;oBAC1B,gCAAgC,EAAE,QAAQ;iBAC3C,CAAC,EACF,OAAO,EAAE,EAAE,IAEV,OAAO,CAAC,KAAK,CACR;YACP,IAAI,IAAI,CAAC,OAAO,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CACxE,oBAAC,OAAO,IACN,KAAK,EAAE,IAAI,EACX,KAAK,QACL,eAAe,EAAE,CAAC,EAClB,eAAe,EAAE,KAAK;gBAEtB,2BAAG,SAAS,EAAC,mDAAmD,WAE5D,CACI,CACX,CACG;QACL,IAAI,IAAI,OAAO,CAAC,YAAY,KAAK,aAAa,IAAI,CACjD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,cAAc,IAAE,IAAI,CAAO,CACtC,CACP;QACA,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAED,eAAe,KAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport { Tooltip } from '@mui/material'\nimport clsx from 'clsx'\nimport { FormTypes } from '@oneblink/types'\nimport useHint from '../../hooks/useHint'\n\nfunction FormElementLabelContainer({\n className,\n element,\n id,\n required,\n children,\n leading,\n}: {\n className: string\n element: FormTypes.FormElementBase\n id: string\n required: boolean\n children: React.ReactNode\n leading?: React.ReactNode\n}) {\n const hint = useHint(element.hint)\n\n return (\n <div className={clsx('ob-form__element', className)}>\n <div className=\"label ob-label__container\">\n {leading}\n <label\n className={clsx('ob-label', {\n 'ob-label__required is-required': required,\n })}\n htmlFor={id}\n >\n {element.label}\n </label>\n {hint && (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n <Tooltip\n title={hint}\n arrow\n enterTouchDelay={0}\n leaveTouchDelay={10000}\n >\n <i className=\"material-icons has-text-grey-light ob-label__hint\">\n info\n </i>\n </Tooltip>\n )}\n </div>\n {hint && element.hintPosition === 'BELOW_LABEL' && (\n <div className=\"ob-hint-text__container\">\n <div className=\"ob-hint-text\">{hint}</div>\n </div>\n )}\n {children}\n </div>\n )\n}\n\nexport default React.memo(FormElementLabelContainer)\n"]}
|
|
@@ -4,9 +4,11 @@ import { Collapse, Tooltip } from '@mui/material';
|
|
|
4
4
|
import useBooleanState from '../hooks/useBooleanState';
|
|
5
5
|
import OneBlinkFormElements from '../components/renderer/OneBlinkFormElements';
|
|
6
6
|
import { checkSectionValidity } from '../services/form-validation';
|
|
7
|
+
import useHint from '../hooks/useHint';
|
|
7
8
|
function FormElementSection({ element, onLookup, displayValidationMessages, ...props }) {
|
|
8
9
|
const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed);
|
|
9
10
|
const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed);
|
|
11
|
+
const hint = useHint(element.hint);
|
|
10
12
|
React.useEffect(() => {
|
|
11
13
|
if (isCollapsed && !isDisplayingError) {
|
|
12
14
|
setIsDisplayingError(true);
|
|
@@ -52,8 +54,8 @@ function FormElementSection({ element, onLookup, displayValidationMessages, ...p
|
|
|
52
54
|
React.createElement("div", { className: "ob-section__header cypress-section-header", onClick: toggle },
|
|
53
55
|
React.createElement("h3", { className: "ob-section__header-text title is-3" },
|
|
54
56
|
element.label,
|
|
55
|
-
|
|
56
|
-
(element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (React.createElement(Tooltip, { title:
|
|
57
|
+
hint &&
|
|
58
|
+
(element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (React.createElement(Tooltip, { title: hint, arrow: true, enterTouchDelay: 0, leaveTouchDelay: 10000 },
|
|
57
59
|
React.createElement("i", { className: "material-icons has-text-grey-light ob-label__hint" }, "info")))),
|
|
58
60
|
React.createElement("div", { className: "ob-section__header-icon-container" },
|
|
59
61
|
isInvalid && (React.createElement(Tooltip, { title: "Section has errors" },
|
|
@@ -61,8 +63,8 @@ function FormElementSection({ element, onLookup, displayValidationMessages, ...p
|
|
|
61
63
|
React.createElement("i", { className: clsx('ob-section__header-icon material-icons', {
|
|
62
64
|
'is-rotated': !isCollapsed,
|
|
63
65
|
}) }, "expand_more")),
|
|
64
|
-
|
|
65
|
-
React.createElement("div", { className: "ob-hint-text" },
|
|
66
|
+
hint && element.hintPosition === 'BELOW_LABEL' && (React.createElement("div", { className: "ob-section__hint-text-container" },
|
|
67
|
+
React.createElement("div", { className: "ob-hint-text" }, hint)))),
|
|
66
68
|
React.createElement("hr", { className: "ob-section__divider" }),
|
|
67
69
|
React.createElement(Collapse, { in: !isCollapsed, classes: {
|
|
68
70
|
root: 'ob-section__content',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormElementSection.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,eAAe,MAAM,0BAA0B,CAAA;AACtD,OAAO,oBAEN,MAAM,6CAA6C,CAAA;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;
|
|
1
|
+
{"version":3,"file":"FormElementSection.js","sourceRoot":"","sources":["../../src/form-elements/FormElementSection.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport clsx from 'clsx'\nimport { Collapse, Tooltip } from '@mui/material'\nimport { FormTypes } from '@oneblink/types'\nimport useBooleanState from '../hooks/useBooleanState'\nimport OneBlinkFormElements, {\n Props,\n} from '../components/renderer/OneBlinkFormElements'\nimport { checkSectionValidity } from '../services/form-validation'\nimport { FormElementLookupHandler } from '../types/form'\nimport useHint from '../hooks/useHint'\n\nfunction FormElementSection<T extends FormTypes._NestedElementsElement>({\n element,\n onLookup,\n displayValidationMessages,\n ...props\n}: Omit<Props<T>, 'elements'> & {\n element: FormTypes.SectionElement\n}) {\n const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed)\n const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed)\n const hint = useHint(element.hint)\n\n React.useEffect(() => {\n if (isCollapsed && !isDisplayingError) {\n setIsDisplayingError(true)\n }\n }, [isCollapsed, isDisplayingError])\n\n const displayValidationMessage =\n displayValidationMessages || isDisplayingError\n\n const isInvalid = React.useMemo(() => {\n return (\n displayValidationMessage &&\n checkSectionValidity(element, props.formElementsValidation)\n )\n }, [displayValidationMessage, element, props.formElementsValidation])\n\n const isValid = React.useMemo(() => {\n return !checkSectionValidity(element, props.formElementsValidation)\n }, [element, props.formElementsValidation])\n\n const handleLookup = React.useCallback<FormElementLookupHandler>(\n (mergeLookupResults) => {\n onLookup((currentFormSubmission) => {\n let model = currentFormSubmission.submission\n const elements = currentFormSubmission.elements.map((formElement) => {\n if (formElement.type === 'section' && formElement.id === element.id) {\n const { elements, submission } = mergeLookupResults({\n elements: formElement.elements,\n submission: currentFormSubmission.submission,\n lastElementUpdated: currentFormSubmission.lastElementUpdated,\n })\n model = submission\n return {\n ...formElement,\n elements,\n }\n }\n return formElement\n })\n\n return {\n elements,\n submission: model,\n lastElemenetUpdated: currentFormSubmission.lastElementUpdated,\n }\n })\n },\n [element.id, onLookup],\n )\n\n return (\n <div\n className={clsx('ob-section', {\n 'ob-section__invalid': isInvalid,\n 'ob-section__valid': isValid,\n })}\n >\n <div\n className=\"ob-section__header cypress-section-header\"\n onClick={toggle}\n >\n <h3 className=\"ob-section__header-text title is-3\">\n {element.label}\n {hint &&\n (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n <Tooltip\n title={hint}\n arrow\n enterTouchDelay={0}\n leaveTouchDelay={10000}\n >\n <i className=\"material-icons has-text-grey-light ob-label__hint\">\n info\n </i>\n </Tooltip>\n )}\n </h3>\n <div className=\"ob-section__header-icon-container\">\n {isInvalid && (\n <Tooltip title=\"Section has errors\">\n <i className=\"material-icons has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in\">\n warning\n </i>\n </Tooltip>\n )}\n <i\n className={clsx('ob-section__header-icon material-icons', {\n 'is-rotated': !isCollapsed,\n })}\n >\n expand_more\n </i>\n </div>\n {hint && element.hintPosition === 'BELOW_LABEL' && (\n <div className=\"ob-section__hint-text-container\">\n <div className=\"ob-hint-text\">{hint}</div>\n </div>\n )}\n </div>\n <hr className=\"ob-section__divider\" />\n <Collapse\n in={!isCollapsed}\n classes={{\n root: 'ob-section__content',\n entered: 'ob-section__expanded',\n hidden: 'ob-section__collapsed',\n }}\n >\n <OneBlinkFormElements\n {...props}\n displayValidationMessages={displayValidationMessage}\n onLookup={handleLookup}\n elements={element.elements}\n />\n </Collapse>\n </div>\n )\n}\n\nexport default React.memo(FormElementSection)\n"]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import sanitizeHtml from '../services/sanitize-html';
|
|
3
|
+
import { RepeatableSetIndexContext } from '../form-elements/FormElementRepeatableSet';
|
|
4
|
+
import useFormSubmissionModel from './useFormSubmissionModelContext';
|
|
5
|
+
import { submissionService } from '@oneblink/sdk-core';
|
|
6
|
+
import { localisationService } from '@oneblink/apps';
|
|
7
|
+
const useHint = (elementHint) => {
|
|
8
|
+
const { formSubmissionModel, elements } = useFormSubmissionModel();
|
|
9
|
+
const index = React.useContext(RepeatableSetIndexContext);
|
|
10
|
+
return React.useMemo(() => {
|
|
11
|
+
if (!elementHint)
|
|
12
|
+
return;
|
|
13
|
+
let html = elementHint;
|
|
14
|
+
html = html.replace('{INDEX}', (index + 1).toString());
|
|
15
|
+
html = submissionService.replaceElementValues(html, {
|
|
16
|
+
submission: formSubmissionModel,
|
|
17
|
+
formElements: elements,
|
|
18
|
+
formatCurrency: localisationService.formatCurrency,
|
|
19
|
+
formatDate: (v) => localisationService.formatDate(new Date(v)),
|
|
20
|
+
formatNumber: localisationService.formatNumber,
|
|
21
|
+
formatTime: (v) => localisationService.formatTime(new Date(v)),
|
|
22
|
+
});
|
|
23
|
+
return sanitizeHtml(html);
|
|
24
|
+
}, [elementHint, elements, formSubmissionModel, index]);
|
|
25
|
+
};
|
|
26
|
+
export default useHint;
|
|
27
|
+
//# sourceMappingURL=useHint.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useHint.js","sourceRoot":"","sources":["../../src/hooks/useHint.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,YAAY,MAAM,2BAA2B,CAAA;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAA;AACrF,OAAO,sBAAsB,MAAM,iCAAiC,CAAA;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAEpD,MAAM,OAAO,GAAG,CAAC,WAA+B,EAAE,EAAE;IAClD,MAAM,EAAE,mBAAmB,EAAE,QAAQ,EAAE,GAAG,sBAAsB,EAAE,CAAA;IAClE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAA;IACzD,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,WAAW;YAAE,OAAM;QACxB,IAAI,IAAI,GAAG,WAAW,CAAA;QACtB,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAA;QAEtD,IAAI,GAAG,iBAAiB,CAAC,oBAAoB,CAAC,IAAI,EAAE;YAClD,UAAU,EAAE,mBAAmB;YAC/B,YAAY,EAAE,QAAQ;YACtB,cAAc,EAAE,mBAAmB,CAAC,cAAc;YAClD,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC;YAC9D,YAAY,EAAE,mBAAmB,CAAC,YAAY;YAC9C,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC;SAC/D,CAAC,CAAA;QAEF,OAAO,YAAY,CAAC,IAAI,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAA;AACzD,CAAC,CAAA;AAED,eAAe,OAAO,CAAA","sourcesContent":["import * as React from 'react'\nimport sanitizeHtml from '../services/sanitize-html'\nimport { RepeatableSetIndexContext } from '../form-elements/FormElementRepeatableSet'\nimport useFormSubmissionModel from './useFormSubmissionModelContext'\nimport { submissionService } from '@oneblink/sdk-core'\nimport { localisationService } from '@oneblink/apps'\n\nconst useHint = (elementHint: string | undefined) => {\n const { formSubmissionModel, elements } = useFormSubmissionModel()\n const index = React.useContext(RepeatableSetIndexContext)\n return React.useMemo(() => {\n if (!elementHint) return\n let html = elementHint\n html = html.replace('{INDEX}', (index + 1).toString())\n\n html = submissionService.replaceElementValues(html, {\n submission: formSubmissionModel,\n formElements: elements,\n formatCurrency: localisationService.formatCurrency,\n formatDate: (v) => localisationService.formatDate(new Date(v)),\n formatNumber: localisationService.formatNumber,\n formatTime: (v) => localisationService.formatTime(new Date(v)),\n })\n\n return sanitizeHtml(html)\n }, [elementHint, elements, formSubmissionModel, index])\n}\n\nexport default useHint\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
declare const IsHoveringContext: React.Context<boolean>;
|
|
3
|
-
export declare const IsHoveringProvider: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement
|
|
3
|
+
export declare const IsHoveringProvider: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
|
|
4
4
|
export declare function useIsHovering(): boolean;
|
|
5
5
|
export default IsHoveringContext;
|
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": "2.9.0-beta.
|
|
4
|
+
"version": "2.9.0-beta.7",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|