feat(webapp): allow to create a new account item in accounts list component.

packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx

@@ -3,8 +3,8 @@ import React, { useMemo } from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import { FMultiSelect } from '../Forms';
 import { accountPredicate } from './_components';
-import { filterAccountsByQuery, nestedArrayToflatten } from '@/utils';
 import { MenuItemNestedText } from '../Menu';
+import { usePreprocessingAccounts } from './_hooks';
 
 /**
  * Default account item renderer of the list.
@@ -45,23 +45,13 @@ export function AccountsMultiSelect({
 
   ...rest
 }) {
-  // Filters accounts based on the given filter props.
-  const filteredAccounts = useMemo(() => {
-    const flattenAccounts = nestedArrayToflatten(items);
-
-    return filterAccountsByQuery(flattenAccounts, {
-      filterByRootTypes,
-      filterByParentTypes,
-      filterByTypes,
-      filterByNormal,
-    });
-  }, [
-    items,
-    filterByRootTypes,
+  // Filters accounts based on filter props.
+  const filteredAccounts = usePreprocessingAccounts(accounts, {
     filterByParentTypes,
     filterByTypes,
     filterByNormal,
-  ]);
+    filterByRootTypes,
+  });
 
   return (
     <FMultiSelect

packages/webapp/src/components/Accounts/AccountsSelect.tsx

@@ -1,16 +1,12 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
 import * as R from 'ramda';
 import intl from 'react-intl-universal';
 import { MenuItem } from '@blueprintjs/core';
-import {
-  MenuItemNestedText,
-  FormattedMessage as T,
-  FSelect,
-} from '@/components';
-import { filterAccountsByQuery, nestedArrayToflatten } from '@/utils';
+import { MenuItemNestedText, FSelect } from '@/components';
 import { accountPredicate } from './_components';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { usePreprocessingAccounts } from './_hooks';
 
 // Create new account renderer.
 const createNewItemRenderer = (query, active, handleClick) => {
@@ -25,11 +21,7 @@ const createNewItemRenderer = (query, active, handleClick) => {
 };
 
 // Create new item from the given query string.
-const createNewItemFromQuery = (name) => {
-  return {
-    name,
-  };
-};
+const createNewItemFromQuery = (name) => ({ name });
 
 /**
  * Default account item renderer.
@@ -61,6 +53,7 @@ function AccountsSelectRoot({
 
   // #ownProps
   items,
+  allowCreate,
 
   filterByParentTypes,
   filterByTypes,
@@ -70,23 +63,17 @@ function AccountsSelectRoot({
   ...restProps
 }) {
   // Filters accounts based on filter props.
-  const filteredAccounts = useMemo(() => {
-    const flattenAccounts = nestedArrayToflatten(items);
-
-    const filteredAccounts = filterAccountsByQuery(flattenAccounts, {
-      filterByRootTypes,
-      filterByParentTypes,
-      filterByTypes,
-      filterByNormal,
-    });
-    return filteredAccounts;
-  }, [
-    items,
-    filterByRootTypes,
+  const filteredAccounts = usePreprocessingAccounts(items, {
     filterByParentTypes,
     filterByTypes,
     filterByNormal,
-  ]);
+    filterByRootTypes,
+  });
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
 
   return (
     <FSelect
@@ -97,6 +84,8 @@ function AccountsSelectRoot({
       popoverProps={{ minimal: true, usePortal: true, inline: false }}
       itemPredicate={accountPredicate}
       itemRenderer={accountRenderer}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
       {...restProps}
     />
   );

packages/webapp/src/components/Accounts/_components.tsx

@@ -1,7 +1,5 @@
+// @ts-nocheck
 import React from 'react';
-import { MenuItem } from '@blueprintjs/core';
-import { MenuItemNestedText } from '../Menu';
-
 
 // Filters accounts items.
 export const accountPredicate = (query, account, _index, exactMatch) => {

packages/webapp/src/components/Accounts/_hooks.ts

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { filterAccountsByQuery, nestedArrayToflatten } from '@/utils';
+
+interface PreprocessingAccountsOptions {
+  filterByRootTypes: string[];
+  filterByParentTypes: string[];
+  filterByTypes: string[];
+  filterByNormal: string[];
+}
+
+export const usePreprocessingAccounts = (
+  items: any,
+  {
+    filterByRootTypes,
+    filterByParentTypes,
+    filterByTypes,
+    filterByNormal,
+  }: PreprocessingAccountsOptions,
+) => {
+  return useMemo(() => {
+    const flattenAccounts = nestedArrayToflatten(items);
+    const filteredAccounts = filterAccountsByQuery(flattenAccounts, {
+      filterByRootTypes,
+      filterByParentTypes,
+      filterByTypes,
+      filterByNormal,
+    });
+    return filteredAccounts;
+  }, [
+    items,
+    filterByRootTypes,
+    filterByParentTypes,
+    filterByTypes,
+    filterByNormal,
+  ]);
+};

packages/webapp/src/components/Forms/Select.tsx

@@ -1,15 +1,16 @@
 // @ts-nocheck
 import React from 'react';
-import styled from 'styled-components';
-import clsx from 'classnames';
 import { Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs-formik/select';
+import styled from 'styled-components';
+import clsx from 'classnames';
 
 export function FSelect({ ...props }) {
   const input = ({ activeItem, text, label, value }) => {
     return (
       <SelectButton
         text={text || props.placeholder || 'Select an item ...'}
+        disabled={props.disabled || false}
         {...props.buttonProps}
         className={clsx({ 'is-selected': !!text }, props.className)}
       />
@@ -45,7 +46,6 @@ const SelectButton = styled(Button)`
     margin-right: 12px;
     border-radius: 1px;
   }
-
   &:not([class*='bp3-intent-']) {
     &,
     &:hover {