re-structure to monorepo.

packages/webapp/src/containers/Projects/components/ProjectMultiSelect.tsx

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem } from '@blueprintjs/core';
+import { FMultiSelect } from '@/components';
+
+/**
+ *
+ * @param query
+ * @param project
+ * @param _index
+ * @param exactMatch
+ */
+const projectItemPredicate = (query, project, _index, exactMatch) => {
+  const normalizedTitle = project.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${project.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param project
+ * @param param1
+ * @param param2
+ * @returns
+ */
+const projectItemRenderer = (
+  project,
+  { handleClick, modifiers, query },
+  { isSelected },
+) => {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      icon={isSelected ? 'tick' : 'blank'}
+      key={project.id}
+      text={project.name}
+      onClick={handleClick}
+    />
+  );
+};
+
+const projectSelectProps = {
+  itemPredicate: projectItemPredicate,
+  itemRenderer: projectItemRenderer,
+  valueAccessor: (item) => item.id,
+  labelAccessor: (item) => item.name,
+  tagRenderer: (item) => item.name,
+};
+
+/**
+ * projects mulit select.
+ * @param param0
+ * @returns {JSX.Element}
+ */
+export function ProjectMultiSelect({
+  projects,
+
+  ...rest
+}) {
+  return (
+    <FMultiSelect
+      items={projects}
+      placeholder={intl.get('projects_multi_select.placeholder')}
+      popoverProps={{ minimal: true }}
+      {...projectSelectProps}
+      {...rest}
+    />
+  );
+}