@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
57 lines • 3.55 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Checkbox, debounce, Tooltip } from '@mui/material';
import { memo, useCallback, useMemo, useState, } from 'react';
import { useTranslation } from 'react-i18next';
import { FullPageContainer } from '../components/FullPageContainer.js';
import { StickySearchInput } from '../components/Search/SearchInput.js';
import { Tools } from '../components/Tools/Tools.js';
import { useDefaultElementId } from '../hooks/useDefaultElementId.js';
import { useHeader } from '../hooks/useHeader.js';
import { useScrollableContainer } from '../hooks/useScrollableContainer.js';
import { useTools } from '../hooks/useTools.js';
import { useSettingsStore } from '../stores/settings/SettingsStore.js';
import { useSettingsActions } from '../stores/settings/useSettingsActions.js';
const SelectAllCheckbox = memo(({ allCheckboxesSelected, anyCheckboxesSelected, noCheckboxesAvailable, onClick, }) => {
const { t } = useTranslation();
const tooltipTitle = noCheckboxesAvailable
? undefined
: allCheckboxesSelected
? t('tooltip.deselectAll')
: t('tooltip.selectAll');
return (_jsx(Tooltip, { title: tooltipTitle, children: _jsx(Checkbox, { id: "select-all", checked: allCheckboxesSelected, indeterminate: anyCheckboxesSelected && !allCheckboxesSelected, onChange: onClick, disabled: noCheckboxesAvailable, sx: { mr: -1.5 } }) }));
});
export const SelectEnabledToolsPage = ({ type }) => {
const typeKey = type.toLowerCase();
const { tools } = useTools();
const { toggleToolKeys } = useSettingsActions();
const disabledTools = useSettingsStore((state) => state[`disabled${type}`]);
const { t } = useTranslation();
const elementId = useDefaultElementId();
const scrollableContainer = useScrollableContainer(elementId);
const [searchValue, setSearchValue] = useState('');
const filteredTools = useMemo(() => {
const toolsList = tools?.[typeKey] ?? [];
if (!searchValue) {
return toolsList;
}
const lowerSearchValue = searchValue.toLowerCase();
return toolsList.filter((tool) => tool.name.toLowerCase().includes(lowerSearchValue));
}, [tools, typeKey, searchValue]);
const handleSelectAll = useCallback(() => {
toggleToolKeys(type, filteredTools.map((tool) => tool.key));
}, [toggleToolKeys, type, filteredTools]);
const headerAction = useMemo(() => (_jsx(SelectAllCheckbox, { allCheckboxesSelected: !!filteredTools.length &&
filteredTools.every((tool) => !disabledTools.includes(tool.key)), anyCheckboxesSelected: !!filteredTools.length &&
filteredTools.some((tool) => disabledTools.includes(tool.key)), noCheckboxesAvailable: !filteredTools.length, onClick: handleSelectAll })), [disabledTools, handleSelectAll, filteredTools]);
useHeader(t(`settings.enabled${type}`), headerAction);
const handleSearchInputChange = useCallback((e) => {
const value = e.target.value;
setSearchValue(value);
if (scrollableContainer) {
scrollableContainer.scrollTop = 0;
}
}, [scrollableContainer]);
const debouncedSearchInputChange = debounce(handleSearchInputChange, 250);
return (_jsxs(FullPageContainer, { disableGutters: true, children: [_jsx(StickySearchInput, { onChange: debouncedSearchInputChange, placeholder: t(`main.search${type}`) }), _jsx(Tools, { filteredTools: filteredTools, type: type })] }));
};
//# sourceMappingURL=SelectEnabledToolsPage.js.map