diff --git a/client/src/pages/admin/ValueLists.css b/client/src/pages/admin/ValueLists.css index e69de29..7bd0619 100644 --- a/client/src/pages/admin/ValueLists.css +++ b/client/src/pages/admin/ValueLists.css @@ -0,0 +1,4 @@ +.value-lists > .tab > .ui.menu { + overflow: auto; + padding-bottom: 0.25em; +} \ No newline at end of file diff --git a/client/src/pages/admin/ValueLists.js b/client/src/pages/admin/ValueLists.js index 8362902..39fbddc 100644 --- a/client/src/pages/admin/ValueLists.js +++ b/client/src/pages/admin/ValueLists.js @@ -1,15 +1,13 @@ // @flow import type { EditContainerProps } from '@performant-software/shared-components/types'; -import React, { useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { Container, Header, Tab } from 'semantic-ui-react'; +import _ from 'underscore'; import ValueListsTable from '../../components/ValueListsTable'; import withMenuBar from '../../hooks/MenuBar'; import ValueListsService from '../../services/ValueLists'; -import { - Container, - Header, - Tab -} from 'semantic-ui-react'; +import './ValueLists.css'; import type { ValueList as ValueListType } from '../../types/ValueList'; import type { Translateable } from '../../types/Translateable'; @@ -21,24 +19,49 @@ type Props = EditContainerProps & Translateable & { const ValueLists = (props: Props) => { const [objectsList, setObjectsList] = useState([]); - useEffect(() => { - ValueListsService.getObjectsList() - .then((response) => setObjectsList(response.data.objects)); - }, []); - - const panes = objectsList.map((objectName) => ({ + /** + * Memo-izes the tab panes. + * + * @type {{menuItem: *, render: function(): *}[]} + */ + const panes = useMemo(() => objectsList.map((objectName) => ({ menuItem: objectName, render: () => ( - - + + ) - })); + })), [objectsList]); + + /** + * Sets the tab list on the state. + */ + useEffect(() => { + ValueListsService + .getObjectsList() + .then((response) => setObjectsList(response.data.objects)) + }, []); return ( - -
{props.t('Admin.menu.valueLists')}
- + +
+ { props.t('Admin.menu.valueLists') } +
+
); };