diff --git a/src/PropertiesPanel.js b/src/PropertiesPanel.js index 9bb6950c..02a7363a 100644 --- a/src/PropertiesPanel.js +++ b/src/PropertiesPanel.js @@ -24,7 +24,8 @@ import { ErrorsContext, EventContext, LayoutContext, - PropertiesPanelContext + PropertiesPanelContext, + TooltipContext } from './context'; import { useEvent } from './hooks'; @@ -33,6 +34,8 @@ const DEFAULT_LAYOUT = {}; const DEFAULT_DESCRIPTION = {}; +const DEFAULT_TOOLTIP = {}; + /** * @typedef { { @@ -73,12 +76,22 @@ const DEFAULT_DESCRIPTION = {}; * [id: String]: GetDescriptionFunction * } } DescriptionConfig * + * @typedef { { + * [id: String]: GetTooltipFunction + * } } TooltipConfig + * * @callback { { * @param {string} id * @param {Object} element * @returns {string} * } } GetDescriptionFunction * + * @callback { { + * @param {string} id + * @param {Object} element + * @returns {string} + * } } GetTooltipFunction + * * @typedef { { * getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition, * getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition @@ -100,6 +113,8 @@ const DEFAULT_DESCRIPTION = {}; * @param {Function} [props.layoutChanged] * @param {DescriptionConfig} [props.descriptionConfig] * @param {Function} [props.descriptionLoaded] + * @param {TooltipConfig} [props.tooltipConfig] + * @param {Function} [props.tooltipLoaded] * @param {Object} [props.eventBus] */ export default function PropertiesPanel(props) { @@ -112,6 +127,8 @@ export default function PropertiesPanel(props) { layoutChanged, descriptionConfig, descriptionLoaded, + tooltipConfig, + tooltipLoaded, eventBus } = props; @@ -167,6 +184,24 @@ export default function PropertiesPanel(props) { getDescriptionForId }; + // set-up tooltip context + const tooltip = useMemo(() => createTooltipContext(tooltipConfig), [ tooltipConfig ]); + + useEffect(() => { + if (typeof tooltipLoaded === 'function') { + tooltipLoaded(tooltip); + } + }, [ tooltip, tooltipLoaded ]); + + const getTooltipForId = (id, element) => { + return tooltip[id] && tooltip[id](element); + }; + + const tooltipContext = { + tooltip, + getTooltipForId + }; + const [ errors, setErrors ] = useState({}); const onSetErrors = ({ errors }) => setErrors(errors); @@ -199,32 +234,34 @@ export default function PropertiesPanel(props) { - - -
-
-
- { - groups.map(group => { - const { - component: Component = Group, - id - } = group; - - return ( - - ); - }) - } + + + +
+
+
+ { + groups.map(group => { + const { + component: Component = Group, + id + } = group; + + return ( + + ); + }) + } +
-
- - + + + @@ -248,6 +285,13 @@ function createDescriptionContext(overrides = {}) { }; } +function createTooltipContext(overrides = {}) { + return { + ...DEFAULT_TOOLTIP, + ...overrides + }; +} + // hooks ////////////////// /** diff --git a/src/components/entries/Checkbox.js b/src/components/entries/Checkbox.js index 9a50d2ab..a30ce614 100644 --- a/src/components/entries/Checkbox.js +++ b/src/components/entries/Checkbox.js @@ -58,7 +58,7 @@ function Checkbox(props) { checked={ localValue } disabled={ disabled } /> @@ -109,7 +109,8 @@ export default function CheckboxEntry(props) { onFocus={ onFocus } onBlur={ onBlur } value={ value } - tooltip={ tooltip } /> + tooltip={ tooltip } + element={ element } /> { error &&
{ error }
}
diff --git a/src/components/entries/FEEL/Feel.js b/src/components/entries/FEEL/Feel.js index 9ce9c2b4..aa24af19 100644 --- a/src/components/entries/FEEL/Feel.js +++ b/src/components/entries/FEEL/Feel.js @@ -188,7 +188,7 @@ function FeelTextfield(props) { { 'feel-active': feelActive } ) }>