feat: Search Input Component

Chia-Network · Dec 9, 2021 · 7dd7e5a · 7dd7e5a
1 parent cf32de9
commit 7dd7e5a
Show file tree

Hide file tree

Showing 5 changed files with 185 additions and 1 deletion.
diff --git a/src/components/form/SearchInput.js b/src/components/form/SearchInput.js
@@ -0,0 +1,140 @@
+import _ from 'lodash';
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
+import styled, { withTheme } from 'styled-components';
+
+import { MagnifyGlassIcon, MagnifyGlassIconWhite } from '../icons';
+
+const Input = styled('input')`
+  color: ${props => props.theme.colors[props.selectedTheme].onSurface};
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background-color: transparent;
+  display: flex;
+  border: 1px solid #d9d9d9;
+  justify-content: center;
+  border-top-left-radius: 0.1rem;
+  border-bottom-left-radius: 0.1rem;
+  font-size: 1rem;
+  margin: 0;
+  ${props =>
+    (props.size === 'large' && 'width: 31.5625rem;height:2.5rem') ||
+    (props.size === 'default' && 'width: 32.0625rem;height:2rem') ||
+    (props.size === 'small' && 'width: 32.5625rem;height:1.5rem')};
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    font-family: ${props => props.theme.typography.primary.regular};
+    color: ${props =>
+      props.theme.hexToRgba(
+        props.theme.colors[props.selectedTheme].onSurface,
+        0.25,
+      )};
+  }
+`;
+
+const SearchIconContainer = styled('div')`
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top-right-radius: 0.1rem;
+  border-bottom-right-radius: 0.1rem;
+  ${props => props.outline && 'border: 0.0625rem solid #d9d9d9;'};
+  border-left-style: none;
+  ${props =>
+    (props.size === 'large' && 'width: 2.6875rem;height:2.625rem') ||
+    (props.size === 'default' && 'width: 2.1875rem;height:2.125rem') ||
+    (props.size === 'small' && 'width: 1.6875rem;height:1.625rem')};
+
+  ${props =>
+    (typeof props.buttonText === 'string' &&
+      props.size === 'large' &&
+      'width:81px; height:2.75rem;') ||
+    (typeof props.buttonText === 'string' &&
+      props.size === 'default' &&
+      'width:81px; height:2.125rem;') ||
+    (typeof props.buttonText === 'string' &&
+      props.size === 'small' &&
+      'width:81px; height:1.625rem;')};
+
+  ${props =>
+    (props.usePrimaryButton &&
+      props.size === 'large' &&
+      'background-color: #1890FF;height:2.75rem;') ||
+    (props.usePrimaryButton &&
+      props.size === 'default' &&
+      'background-color: #1890FF;height:2.25rem;') ||
+    (props.usePrimaryButton &&
+      props.size === 'small' &&
+      'background-color: #1890FF;height:1.75rem;')};
+`;
+
+const SearchContainer = withTheme(styled('div')`
+  font-family: ${props => props.theme.typography.primary.regular};
+  margin-top: 0.625rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`);
+
+const ButtonSearchText = withTheme(styled('p')`
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+  height: 2.5rem;
+  width: 3.125rem;
+  color: ${props => (props.usePrimaryButton ? '#ffffff' : '#000000')};
+`);
+
+const SearchInput = withTheme(
+  ({
+    usePrimaryButton = false,
+    buttonText = null,
+    onChange,
+    size = 'default',
+    outline = false,
+    onSearch = _.noop,
+  }) => {
+    const intl = useIntl();
+    const appStore = useSelector(state => state.app);
+
+    return (
+      <SearchContainer usePrimaryButton={usePrimaryButton} size={size}>
+        <Input
+          type="text"
+          selectedTheme={appStore.theme}
+          placeholder={intl.formatMessage({ id: 'search' })}
+          onChange={onChange}
+          size={size}
+          outline={outline}
+        />
+        <SearchIconContainer
+          outline={outline}
+          onClick={onSearch}
+          size={size}
+          selectedTheme={appStore.theme}
+          usePrimaryButton={usePrimaryButton}
+          buttonText={buttonText}>
+          {(buttonText && (
+            <ButtonSearchText usePrimaryButton={usePrimaryButton}>
+              {buttonText}
+            </ButtonSearchText>
+          )) ||
+            (!buttonText && usePrimaryButton ? (
+              <MagnifyGlassIconWhite width={'13.75'} height={'13.75'} />
+            ) : (
+              <MagnifyGlassIcon width={'13.75'} height={'13.75'} />
+            ))}
+        </SearchIconContainer>
+      </SearchContainer>
+    );
+  },
+);
+
+export { SearchInput };
diff --git a/src/components/form/index.js b/src/components/form/index.js
@@ -1,3 +1,4 @@
 export * from './SearchInputField';
 export * from './PrimaryButton';
-export * from './StandardInput';
+export * from './StandardInput';
+export * from './SearchInput';
diff --git a/src/components/icons/MagnifyGlassIconWhite.js b/src/components/icons/MagnifyGlassIconWhite.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { withTheme } from 'styled-components';
+
+const MagnifyGlassIconWhite = withTheme(
+  ({ style, width = 24, height = 24,  cursor = 'unset' }) => {
+
+    return (
+      <div style={{ cursor, width, height, ...style }}>
+        <svg
+          width={`${width}px`}
+          height={`${height}px`}
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M13.2125 12.3516L9.15469 8.29375C9.78438 7.47969 10.125 6.48438 10.125 5.4375C10.125 4.18438 9.63594 3.00937 8.75156 2.12344C7.86719 1.2375 6.68906 0.75 5.4375 0.75C4.18594 0.75 3.00781 1.23906 2.12344 2.12344C1.2375 3.00781 0.75 4.18438 0.75 5.4375C0.75 6.68906 1.23906 7.86719 2.12344 8.75156C3.00781 9.6375 4.18438 10.125 5.4375 10.125C6.48438 10.125 7.47813 9.78438 8.29219 9.15625L12.35 13.2125C12.3619 13.2244 12.376 13.2338 12.3916 13.2403C12.4071 13.2467 12.4238 13.2501 12.4406 13.2501C12.4575 13.2501 12.4741 13.2467 12.4897 13.2403C12.5052 13.2338 12.5194 13.2244 12.5312 13.2125L13.2125 12.5328C13.2244 12.5209 13.2338 12.5068 13.2403 12.4912C13.2467 12.4757 13.2501 12.459 13.2501 12.4422C13.2501 12.4254 13.2467 12.4087 13.2403 12.3931C13.2338 12.3776 13.2244 12.3635 13.2125 12.3516V12.3516ZM7.9125 7.9125C7.25 8.57344 6.37187 8.9375 5.4375 8.9375C4.50313 8.9375 3.625 8.57344 2.9625 7.9125C2.30156 7.25 1.9375 6.37187 1.9375 5.4375C1.9375 4.50313 2.30156 3.62344 2.9625 2.9625C3.625 2.30156 4.50313 1.9375 5.4375 1.9375C6.37187 1.9375 7.25156 2.3 7.9125 2.9625C8.57344 3.625 8.9375 4.50313 8.9375 5.4375C8.9375 6.37187 8.57344 7.25156 7.9125 7.9125Z"
+            fill="white"
+          />
+        </svg>
+      </div>
+    );
+  },
+);
+
+export { MagnifyGlassIconWhite };
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
@@ -14,3 +14,4 @@ export * from './WarningIconSmall';
 export * from './WarningIcon';
 export * from './ClimateWarehouseLogo';
 export * from './AddIcon';
+export * from './MagnifyGlassIconWhite';
diff --git a/src/pages/demo/StoryBook/index.js b/src/pages/demo/StoryBook/index.js
@@ -24,6 +24,7 @@ import {
   InputSizeEnum,
   InputStateEnum,
   InputVariantEnum,
+  SearchInput,
 } from '../../../components';
 
 const StoryBook = () => {
@@ -518,6 +519,22 @@ const StoryBook = () => {
             closeText="Close Now"
           />
         </div>
+        <div>
+          <SearchInput size="small" />
+          <SearchInput size="small" outline/>
+          <SearchInput size="small" usePrimaryButton />
+          <SearchInput size="small" usePrimaryButton buttonText="Search" />
+          <SearchInput size="small" buttonText="Search" outline />
+          <SearchInput size="default" />
+          <SearchInput size="default" outline />
+          <SearchInput size="default" usePrimaryButton />
+          <SearchInput size="default" usePrimaryButton buttonText="Search" />
+          <SearchInput size="default" buttonText="Search" outline/>
+          <SearchInput size="large" />
+          <SearchInput size="large" outline />
+          <SearchInput size="large" usePrimaryButton />
+          <SearchInput size="large" buttonText="Search" usePrimaryButton  outline/>
+        </div>
 
         <div>
           <Tag addNew />