браузер говорит что ошибка в строке "const onAfterChange = useCallback"
const PickersFromMenu = ({ layerName }: { layerName: Layers }) => {
return (
<Dropdown overlay={<ColorPickerContainer layerName={layerName} />} trigger={['click']}>
<Button className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
<SettingOutlined />
Выбор цвета типа дорог
<DownOutlined />
</Button>
</Dropdown>
);
};
const LayerSettingsItemFactory = ({ settingObj, layerName, changeSetting }: LayerSettingsItemFactoryProps) => {
const { type, keyForDeck, currentValue, label } = settingObj;
const onAfterChange = useCallback(
(val) => changeSetting(layerName, keyForDeck, val),
[changeSetting, keyForDeck, layerName]
);
const result = useMemo(() => {
switch (type) {
case Number:
const { minimum, maximum, step } = settingObj;
return (
<SettingsControlsItem key={_.uniqueId()}>
<Slider
key={keyForDeck}
min={minimum}
max={maximum}
step={step}
defaultValue={+currentValue}
onAfterChange={onAfterChange}
width={'100%'}
label={label}
showInfoPanel={true}
/>
</SettingsControlsItem>
);
case Boolean:
return (
<SettingsControlsItem>
<Checkbox
checkboxColor={theme.colors.primary}
fontColor={theme.colors.paragraph}
checked={!!currentValue}
onChange={() => changeSetting(layerName, keyForDeck, !currentValue)}
>
{label}
</Checkbox>
</SettingsControlsItem>
);
case 'color':
return (
<SettingsControlsItem key={_.uniqueId()}>
<PickersFromMenu layerName={layerName} />
</SettingsControlsItem>
);
default:
return null;
}
}, [changeSetting, currentValue, keyForDeck, label, layerName, onAfterChange, settingObj, type]);
return result;
};
const LayerChangeControlsField = ({ selectedLayer, changeLayerSetting }: LayerChangeControlsFieldProps) => {
const settings = selectedLayer?.customSettings.map((settingObj: IsettingObj) =>
LayerSettingsItemFactory({ settingObj, layerName: selectedLayer?.name, changeSetting: changeLayerSetting })
);
return <>{settings}</>;
};