Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 27x | import { useCallback } from 'react';
import { useCallout } from '@folio/stripes/core';
import { useKintIntl } from '../../../../hooks';
import { toCamelCase } from '../../../../utils';
// A hook which can take an array of settings objects and return a
const useSettingCallout = ({
labelOverrides = [],
intlKey: passedIntlKey,
intlNS: passedIntlNS,
} = {}) => {
const callout = useCallout();
const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
return useCallback(({
settings,
type
}) => {
callout.sendCallout({
type,
timeout: 10000,
message: (
<ul>
{settings.map(({ setting, error: _error }) => {
// error will obviously be null for successful updates.
// We can choose to surface the errors to the user should we wish
const settingLabel = kintIntl.formatKintMessage({
id: `settings.${setting.section}.${toCamelCase(setting.key)}`, // Camelcasing to keep in line with how we translate the dynamic settings
overrideValue: labelOverrides[setting.key],
fallbackMessage: setting.key
});
const message = kintIntl.formatKintMessage({
id: `settings.update.${type}`,
overrideValue: labelOverrides[type],
fallbackMessage: setting.key
}, { settingLabel, newValue: setting.value });
return (
<li key={setting.id || setting.key}>
{message}
</li>
);
})}
</ul>
)
});
}, [callout, kintIntl, labelOverrides]);
};
export default useSettingCallout;
|