@oneblink/apps-react 2.9.0-beta.6 → 2.9.0-beta.8
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.d.ts +6 -0
- package/dist/components/renderer/FormElementLabelContainer.js +16 -3
- package/dist/components/renderer/FormElementLabelContainer.js.map +1 -1
- package/dist/form-elements/FormElementSection.js +3 -3
- package/dist/form-elements/FormElementSection.js.map +1 -1
- package/dist/hooks/useHint.d.ts +2 -0
- package/dist/hooks/useHint.js +25 -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 {};
|
|
@@ -8,5 +8,11 @@ declare function FormElementLabelContainer({ className, element, id, required, c
|
|
|
8
8
|
children: React.ReactNode;
|
|
9
9
|
leading?: React.ReactNode;
|
|
10
10
|
}): JSX.Element;
|
|
11
|
+
export declare function HintTooltip({ hint }: {
|
|
12
|
+
hint: string;
|
|
13
|
+
}): JSX.Element;
|
|
14
|
+
export declare function HintBelowLabel({ hint }: {
|
|
15
|
+
hint: string;
|
|
16
|
+
}): JSX.Element;
|
|
11
17
|
declare const _default: React.MemoExoticComponent<typeof FormElementLabelContainer>;
|
|
12
18
|
export default _default;
|
|
@@ -1,6 +1,7 @@
|
|
|
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, }) {
|
|
5
6
|
return (React.createElement("div", { className: clsx('ob-form__element', className) },
|
|
6
7
|
React.createElement("div", { className: "label ob-label__container" },
|
|
@@ -9,11 +10,23 @@ function FormElementLabelContainer({ className, element, id, required, children,
|
|
|
9
10
|
'ob-label__required is-required': required,
|
|
10
11
|
}), htmlFor: id }, element.label),
|
|
11
12
|
element.hint &&
|
|
12
|
-
(element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (React.createElement(
|
|
13
|
-
React.createElement("i", { className: "material-icons has-text-grey-light ob-label__hint" }, "info")))),
|
|
13
|
+
(element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (React.createElement(HintTooltip, { hint: element.hint }))),
|
|
14
14
|
element.hint && element.hintPosition === 'BELOW_LABEL' && (React.createElement("div", { className: "ob-hint-text__container" },
|
|
15
|
-
React.createElement(
|
|
15
|
+
React.createElement(HintBelowLabel, { hint: element.hint }))),
|
|
16
16
|
children));
|
|
17
17
|
}
|
|
18
|
+
export function HintTooltip({ hint }) {
|
|
19
|
+
const html = useHint(hint);
|
|
20
|
+
return (React.createElement(Tooltip, { title: React.createElement("div", { dangerouslySetInnerHTML: {
|
|
21
|
+
__html: html,
|
|
22
|
+
} }), arrow: true, enterTouchDelay: 0, leaveTouchDelay: 10000 },
|
|
23
|
+
React.createElement("i", { className: "material-icons has-text-grey-light ob-label__hint" }, "info")));
|
|
24
|
+
}
|
|
25
|
+
export function HintBelowLabel({ hint }) {
|
|
26
|
+
const html = useHint(hint);
|
|
27
|
+
return (React.createElement("div", { className: "ob-hint-text", dangerouslySetInnerHTML: {
|
|
28
|
+
__html: html,
|
|
29
|
+
} }));
|
|
30
|
+
}
|
|
18
31
|
export default React.memo(FormElementLabelContainer);
|
|
19
32
|
//# sourceMappingURL=FormElementLabelContainer.js.map
|
|
@@ -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,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,OAAO,CAAC,IAAI;gBACX,CAAC,OAAO,CAAC,YAAY,KAAK,SAAS,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAC/D,oBAAC,WAAW,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,GAAI,CACpC,CACC;QACL,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,YAAY,KAAK,aAAa,IAAI,CACzD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,oBAAC,cAAc,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,GAAI,CAClC,CACP;QACA,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,EAAoB;IACpD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAE1B,OAAO,CACL,oBAAC,OAAO,IACN,KAAK,EACH,6BACE,uBAAuB,EAAE;gBACvB,MAAM,EAAE,IAAI;aACb,GACD,EAEJ,KAAK,QACL,eAAe,EAAE,CAAC,EAClB,eAAe,EAAE,KAAK;QAEtB,2BAAG,SAAS,EAAC,mDAAmD,WAAS,CACjE,CACX,CAAA;AACH,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAE,IAAI,EAAoB;IACvD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAE1B,OAAO,CACL,6BACE,SAAS,EAAC,cAAc,EACxB,uBAAuB,EAAE;YACvB,MAAM,EAAE,IAAI;SACb,GACD,CACH,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 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 {element.hint &&\n (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n <HintTooltip hint={element.hint} />\n )}\n </div>\n {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n <div className=\"ob-hint-text__container\">\n <HintBelowLabel hint={element.hint} />\n </div>\n )}\n {children}\n </div>\n )\n}\n\nexport function HintTooltip({ hint }: { hint: string }) {\n const html = useHint(hint)\n\n return (\n <Tooltip\n title={\n <div\n dangerouslySetInnerHTML={{\n __html: html,\n }}\n />\n }\n arrow\n enterTouchDelay={0}\n leaveTouchDelay={10000}\n >\n <i className=\"material-icons has-text-grey-light ob-label__hint\">info</i>\n </Tooltip>\n )\n}\n\nexport function HintBelowLabel({ hint }: { hint: string }) {\n const html = useHint(hint)\n\n return (\n <div\n className=\"ob-hint-text\"\n dangerouslySetInnerHTML={{\n __html: html,\n }}\n />\n )\n}\n\nexport default React.memo(FormElementLabelContainer)\n"]}
|
|
@@ -4,6 +4,7 @@ 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 { HintBelowLabel, HintTooltip, } from '../components/renderer/FormElementLabelContainer';
|
|
7
8
|
function FormElementSection({ element, onLookup, displayValidationMessages, ...props }) {
|
|
8
9
|
const [isCollapsed, , , toggle] = useBooleanState(element.isCollapsed);
|
|
9
10
|
const [isDisplayingError, setIsDisplayingError] = React.useState(isCollapsed);
|
|
@@ -53,8 +54,7 @@ function FormElementSection({ element, onLookup, displayValidationMessages, ...p
|
|
|
53
54
|
React.createElement("h3", { className: "ob-section__header-text title is-3" },
|
|
54
55
|
element.label,
|
|
55
56
|
element.hint &&
|
|
56
|
-
(element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (React.createElement(
|
|
57
|
-
React.createElement("i", { className: "material-icons has-text-grey-light ob-label__hint" }, "info")))),
|
|
57
|
+
(element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (React.createElement(HintTooltip, { hint: element.hint }))),
|
|
58
58
|
React.createElement("div", { className: "ob-section__header-icon-container" },
|
|
59
59
|
isInvalid && (React.createElement(Tooltip, { title: "Section has errors" },
|
|
60
60
|
React.createElement("i", { className: "material-icons has-text-danger cypress-section-invalid-icon section-invalid-icon fade-in" }, "warning"))),
|
|
@@ -62,7 +62,7 @@ function FormElementSection({ element, onLookup, displayValidationMessages, ...p
|
|
|
62
62
|
'is-rotated': !isCollapsed,
|
|
63
63
|
}) }, "expand_more")),
|
|
64
64
|
element.hint && element.hintPosition === 'BELOW_LABEL' && (React.createElement("div", { className: "ob-section__hint-text-container" },
|
|
65
|
-
React.createElement(
|
|
65
|
+
React.createElement(HintBelowLabel, { hint: element.hint })))),
|
|
66
66
|
React.createElement("hr", { className: "ob-section__divider" }),
|
|
67
67
|
React.createElement(Collapse, { in: !isCollapsed, classes: {
|
|
68
68
|
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 {\n HintBelowLabel,\n HintTooltip,\n} from '../components/renderer/FormElementLabelContainer'\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\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 {element.hint &&\n (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (\n <HintTooltip hint={element.hint} />\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 {element.hint && element.hintPosition === 'BELOW_LABEL' && (\n <div className=\"ob-section__hint-text-container\">\n <HintBelowLabel hint={element.hint} />\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,25 @@
|
|
|
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
|
+
let html = elementHint;
|
|
12
|
+
html = html.replace('{INDEX}', (index + 1).toString());
|
|
13
|
+
html = submissionService.replaceElementValues(html, {
|
|
14
|
+
submission: formSubmissionModel,
|
|
15
|
+
formElements: elements,
|
|
16
|
+
formatCurrency: localisationService.formatCurrency,
|
|
17
|
+
formatDate: (v) => localisationService.formatDate(new Date(v)),
|
|
18
|
+
formatNumber: localisationService.formatNumber,
|
|
19
|
+
formatTime: (v) => localisationService.formatTime(new Date(v)),
|
|
20
|
+
});
|
|
21
|
+
return sanitizeHtml(html);
|
|
22
|
+
}, [elementHint, elements, formSubmissionModel, index]);
|
|
23
|
+
};
|
|
24
|
+
export default useHint;
|
|
25
|
+
//# 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,WAAmB,EAAE,EAAE;IACtC,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,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) => {\n const { formSubmissionModel, elements } = useFormSubmissionModel()\n const index = React.useContext(RepeatableSetIndexContext)\n return React.useMemo(() => {\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.8",
|
|
5
5
|
"author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/oneblink/apps-react/issues"
|