[DDW-587] Search working

input-output-hk · Jun 8, 2021 · bed5d1f · bed5d1f
1 parent de5df21
commit bed5d1f
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 6 deletions.
diff --git a/source/renderer/app/components/wallet/summary/WalletSummaryAssets.js b/source/renderer/app/components/wallet/summary/WalletSummaryAssets.js
@@ -4,12 +4,17 @@ import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import { Button } from 'react-polymorph/lib/components/Button';
+import { Input } from 'react-polymorph/lib/components/Input';
+import SVGInline from 'react-svg-inline';
 import BorderedBox from '../../widgets/BorderedBox';
 import styles from './WalletSummaryAssets.scss';
 import Wallet from '../../../domains/Wallet';
 import type { AssetToken } from '../../../api/assets/types';
 import LoadingSpinner from '../../widgets/LoadingSpinner';
 import WalletSummaryAsset from './WalletSummaryAsset';
+import { onSearchAssetsDropdown } from '../../widgets/forms/AssetsDropdown';
+import searchIcon from '../../../assets/images/search.inline.svg';
+import crossIcon from '../../../assets/images/close-cross.inline.svg';
 
 const messages = defineMessages({
   tokensTitle: {
@@ -42,6 +47,7 @@ type Props = {
 type State = {
   anyAssetWasHovered: boolean,
   isSearchOpen: boolean,
+  searchValue: string,
 };
 
 @observer
@@ -53,6 +59,7 @@ export default class WalletSummaryAssets extends Component<Props, State> {
   state = {
     anyAssetWasHovered: false,
     isSearchOpen: false,
+    searchValue: '',
   };
 
   handleHoverAsset = () => {
@@ -65,21 +72,35 @@ export default class WalletSummaryAssets extends Component<Props, State> {
     }));
   };
 
+  get filteredAssets() {
+    const { searchValue } = this.state;
+    const { assets } = this.props;
+    return onSearchAssetsDropdown(
+      searchValue,
+      assets.map((asset) => ({ asset }))
+    );
+  }
+
+  setSearchValue = (searchValue: string) => {
+    this.setState({
+      searchValue,
+    });
+  };
+
   render() {
     const {
       wallet,
-      assets,
       onOpenAssetSend,
       onCopyAssetItem,
       onAssetSettings,
       assetSettingsDialogWasOpened,
       isLoadingAssets,
     } = this.props;
-    const { anyAssetWasHovered, isSearchOpen } = this.state;
+    const { anyAssetWasHovered, isSearchOpen, searchValue } = this.state;
     const { intl } = this.context;
-
+    const { filteredAssets } = this;
+    const assets = filteredAssets.map(({ asset }) => asset);
     const searchButtonStyles = classNames([styles.searchButton, 'flat']);
-
     const isRestoreActive = wallet.isRestoring;
     const numberOfAssets = assets && assets.length ? assets.length : 0;
 
@@ -104,7 +125,20 @@ export default class WalletSummaryAssets extends Component<Props, State> {
           />
         </div>
         {isSearchOpen && (
-          <BorderedBox className={styles.search}>SEARCH</BorderedBox>
+          <div className={styles.search}>
+            <SVGInline svg={searchIcon} className={styles.searchIcon} />
+            <Input
+              className={styles.spendingPassword}
+              onChange={this.setSearchValue}
+              value={searchValue}
+            />
+            <button
+              className={classNames([styles.clearButton, 'flat'])}
+              onClick={() => this.setSearchValue('')}
+            >
+              <SVGInline svg={crossIcon} />
+            </button>
+          </div>
         )}
         <BorderedBox>
           <div className={styles.assetsColumns}>

diff --git a/source/renderer/app/components/wallet/summary/WalletSummaryAssets.scss b/source/renderer/app/components/wallet/summary/WalletSummaryAssets.scss
@@ -80,8 +80,42 @@
 }
 
 .search {
-  padding: 10px;
   margin-bottom: 20px;
+  position: relative;
+  .searchIcon {
+    position: absolute;
+    z-index: 1;
+    top: 17px;
+    left: 20px;
+    svg {
+      height: 15px;
+      width: 15px;
+    }
+  }
+  input {
+    border-radius: 4px;
+    padding: 13px 58px 13px 54px;
+  }
+  .clearButton {
+    border-radius: 3px;
+    cursor: pointer;
+    height: 28px;
+    position: absolute;
+    right: 12px;
+    top: 11px;
+    width: 28px;
+    z-index: 1;
+    &:hover {
+      opacity: 0.8;
+    }
+    svg {
+      height: 8px;
+      width: 8px;
+      polygon {
+        fill: var(--theme-bordered-box-text-color);
+      }
+    }
+  }
 }
 
 .assetsColumns {

diff --git a/source/renderer/app/components/widgets/forms/AssetsDropdown.js b/source/renderer/app/components/widgets/forms/AssetsDropdown.js
@@ -25,6 +25,9 @@ export const onSearchAssetsDropdown = (
   options: Array<any>
 ) => {
   return filter(options, ({ asset }) => {
+    if (searchValue.length < 3) {
+      return true;
+    }
     const { policyId, assetName, fingerprint, metadata } = asset;
     const { name, ticker, description } = metadata || {};
     const checkList = [