wrapped up search component

Author: mxdi9i7

src/components/Search/index.scss

@@ -20,7 +20,17 @@ $baseClass: 'vant-search';
 
   &__round {
     .vant-field {
-      border-radius: 2px;
+      border-radius: 999px;
+    }
+  }
+
+  &__showAction {
+    padding-right: 0;
+  }
+
+  &__leftIcon {
+    .vant-field__error {
+      padding-left: 24px;
     }
   }
 
@@ -44,4 +54,27 @@ $baseClass: 'vant-search';
       }
     }
   }
+
+  &__action {
+    padding: 0 $space-md;
+    cursor: pointer;
+
+    button {
+      min-height: 34px;
+    }
+
+    .#{$baseClass}__cancel {
+      @include search-action;
+      cursor: pointer;
+      background-color: $default;
+      border: 0;
+      padding: 0;
+    }
+  }
+
+  &__disabled {
+    input {
+      cursor: not-allowed;
+    }
+  }
 }

src/components/Search/index.stories.tsx

@@ -1,14 +1,105 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Search from '.';
 import '../../styles/stories.scss';
+import Button from '../Button';
 
 export default {
   title: 'Search',
   component: Search
 };
 
 export const BasicUsage = () => (
-  <div className='container grey'>
+  <div className='container column grey'>
     <Search />
+    <Search shape='round' />
+  </div>
+);
+
+export const CustomLabel = () => (
+  <div className='container column grey'>
+    <Search
+      placeholder='Label width of 65px'
+      label='Address'
+      labelWidth='65px'
+    />
+    <Search label='Address' labelAlign='center' />
+    <Search label='Address' labelAlign='right' />
+  </div>
+);
+
+export const BackgroundColor = () => (
+  <div className='container grey'>
+    <Search background='rgb(79, 192, 141)' />
+  </div>
+);
+
+export const MaxLength = () => (
+  <div className='container grey'>
+    <Search maxLength={5} />
+  </div>
+);
+
+export const PlaceholderAutoFocus = () => (
+  <div className='container grey column'>
+    <Search placeholder='This is a placeholder' />
+    <Search placeholder='This is a auto focus' autofocus />
+  </div>
+);
+
+export const SearchActions = () => {
+  const handleClick = (e) => {
+    e.preventDefault();
+    alert('Action clicked');
+  };
+  const [value, setValue] = useState('');
+  const [focus, setFocus] = useState(false);
+  return (
+    <div className='container column grey'>
+      <h1>Value: {value}</h1>
+      <Search cancel={handleClick} showAction />
+      <Search cancel={handleClick} showAction actionText='Clear' />
+      <Search
+        showAction
+        action={
+          <Button
+            click={handleClick}
+            text='Action'
+            type='primary'
+            size='small'
+            block
+          />
+        }
+      />
+      <Search
+        placeholder='Search Action, press Enter to search'
+        search={() => alert('Searched')}
+      />
+
+      <Search
+        rightIcon={focus ? 'success' : 'cross'}
+        clearable={false}
+        placeholder='Focus blur and input actions'
+        input={(e) => setValue(e.target.value)}
+        focus={() => setFocus(true)}
+        blur={() => setFocus(false)}
+      />
+    </div>
+  );
+};
+
+export const DisabledReadonlyError = () => (
+  <div className='container column grey'>
+    <Search disabled />
+    <Search readonly />
+    <Search error errorMessage='Something is up' />
+  </div>
+);
+
+export const AlignmentAndIcon = () => (
+  <div className='container column grey'>
+    <Search inputAlign='center' placeholder='This is a placeholder' />
+    <Search inputAlign='right' placeholder='This is a placeholder' />
+    <Search leftIcon='smile-o' />
+    <Search leftIcon='' rightIcon='search' clearable={false} />
   </div>
 );

src/components/Search/index.tsx

@@ -17,38 +17,108 @@ const Search = ({
   maxLength,
   placeholder,
   clearable = true,
-  autoFocus,
+  autofocus,
   showAction,
   disabled,
   readonly,
   error,
   inputAlign = 'left',
   leftIcon = 'search',
   rightIcon,
-  actionText,
+  actionText = 'Cancel',
   search,
   input,
-  foucs,
+  focus,
   blur,
   clear,
-  cancel
+  cancel,
+  action,
+  errorMessage,
+  labelAlign,
+  labelWidth
 }: IProps) => {
   const [value, setValue] = useState('');
 
+  const handleSearch = (e) => {
+    e.preventDefault();
+    if (search) search(e);
+  };
+  const handleActionClick = (e) => {
+    e.preventDefault();
+    if (cancel) cancel(e);
+  };
+
+  const handleInput = (e) => {
+    if (input) input(e);
+    setValue(e.target.value);
+  };
+
+  const handleFocus = (e) => {
+    if (focus) focus(e);
+  };
+
+  const handleBlur = (e) => {
+    if (focus) blur(e);
+  };
+
+  const handleClear = (e) => {
+    e.preventDefault();
+    if (clear) {
+      clear(e);
+    }
+    setValue('');
+  };
+
   const searchProps = {
-    className: classnames(baseClass, [{ label }, { shape }])
+    className: classnames(baseClass, [
+      { label },
+      { [shape]: shape },
+      { disabled },
+      { showAction },
+      { leftIcon }
+    ]),
+    style: {},
+    onSubmit: handleSearch
   };
-  const ICON_SIZE = '16px';
+
+  if (background)
+    Object.assign(searchProps, { style: { backgroundColor: background } });
+
   return (
     <form {...searchProps}>
-      {/* <Icon name='search' size={ICON_SIZE} /> */}
       <Field
         value={value}
-        input={(e) => setValue(e.target.value)}
+        label={label}
+        labelAlign={labelAlign}
+        labelWidth={labelWidth}
+        input={handleInput}
+        blur={handleBlur}
+        focus={handleFocus}
+        clear={handleClear}
         clearable={clearable}
-        clear={() => setValue('')}
         leftIcon={leftIcon}
+        maxLength={maxLength}
+        placeholder={placeholder}
+        autofocus={autofocus}
+        readonly={readonly}
+        disabled={disabled}
+        error={error}
+        errorMessage={errorMessage}
+        inputAlign={inputAlign}
+        rightIcon={rightIcon}
       />
+      {showAction && (
+        <div className={`${baseClass}__action`}>
+          {action || (
+            <button
+              onClick={handleActionClick}
+              className={`${baseClass}__cancel`}
+            >
+              {actionText}
+            </button>
+          )}
+        </div>
+      )}
     </form>
   );
 };

src/components/Search/types.ts

@@ -1,13 +1,17 @@
+import { ReactElement } from 'react';
 import { TAlignment } from '../Field/types';
 
 export interface IProps {
   label?: string;
+  labelWidth?: string;
+  labelAlign?: TAlignment;
   shape?: 'round' | 'square';
   background?: string;
   maxLength?: number;
   placeholder?: string;
+  errorMessage?: string;
   clearable?: boolean;
-  autoFocus?: boolean;
+  autofocus?: boolean;
   showAction?: boolean;
   disabled?: boolean;
   readonly?: boolean;
@@ -18,8 +22,9 @@ export interface IProps {
   actionText?: string;
   search?: Function;
   input?: Function;
-  foucs?: Function;
+  focus?: Function;
   blur?: Function;
   clear?: Function;
   cancel?: Function;
+  action?: ReactElement;
 }

src/styles/typography.scss

@@ -31,3 +31,9 @@
   color: $dark-text;
   font-weight: 300;
 }
+
+@mixin search-action {
+  font-size: 14px;
+  line-height: 34px;
+  font-weight: 300;
+}