Search component

src/components/Field/index.scss

@@ -74,6 +74,7 @@ $baseClass: 'vant-field';
     line-height: inherit;
     border: 0;
     resize: none;
+    padding: 0;
 
     &::placeholder {
       color: $placeholder;

src/components/Field/index.tsx

@@ -181,6 +181,7 @@ const Field = ({
         <div className={`${baseClass}__field`}>
           {leftIcon && (
             <Icon
+              color='#323233'
               click={handleClickLeftIcon}
               name={leftIcon}
               size={ICON_SIZE}

src/components/Icons/index.stories.js

@@ -41,7 +41,7 @@ export const AllIcons = () => (
 );
 
 export const IconColor = () => (
-  <div className='container'>
+  <div className='icons container'>
     <Icon name='chat-o' color='#1976D2' />
     <Icon name='add' color='#BBDEFB' />
     <Icon name='add-square' color='#4CAF50' />
@@ -50,7 +50,7 @@ export const IconColor = () => (
 );
 
 export const IconSize = () => (
-  <div className='container' size='18px'>
+  <div className='container icons' size='18px'>
     <Icon name='chat-o' size='28px' />
     <Icon name='add' size='38px' />
     <Icon name='add-square' size='48px' />
@@ -59,22 +59,22 @@ export const IconSize = () => (
 );
 
 export const IconDotsAndBadges = () => (
-  <div className='container'>
+  <div className='container icons'>
     <Icon name='chat-o' dot />
     <Icon name='add' badge='1' />
     <Icon name='add-square' badge='12' />
     <Icon name='after-sale' badge='99+' />
   </div>
 );
 export const IconTags = () => (
-  <div className='container'>
+  <div className='container icons'>
     <Icon name='chat-o' tag='i' />
     <Icon name='add' tag='span' />
   </div>
 );
 
 export const IconAction = () => (
-  <div className='container'>
+  <div className='container icons'>
     <Icon name='chat-o' click={(e) => window.alert(e.target)} />
   </div>
 );

src/components/Search/index.scss

@@ -0,0 +1,80 @@
+@import '../../styles/colors.scss';
+@import '../../styles/spacing.scss';
+@import '../../styles/variables.scss';
+@import '../../styles/typography.scss';
+
+$baseClass: 'vant-search';
+
+.#{$baseClass} {
+  background-color: $default;
+  width: 100%;
+  display: flex;
+  padding: 10px 12px;
+  position: relative;
+  align-items: center;
+
+  &:first-of-type(i) {
+    position: absolute;
+    left: 8px;
+  }
+
+  &__round {
+    .vant-field {
+      border-radius: 999px;
+    }
+  }
+
+  &__showAction {
+    padding-right: 0;
+  }
+
+  &__leftIcon {
+    .vant-field__error {
+      padding-left: 24px;
+    }
+  }
+
+  .vant-field {
+    background-color: $grey-background;
+    padding: 0 0 0 8px;
+
+    .vant-field__input {
+      padding: 5px 8px 5px 0;
+
+      .vant-icon__container {
+        padding: 0;
+      }
+
+      input {
+        width: 100%;
+        background-color: $grey-background;
+        border: none;
+        border-radius: 2px;
+        padding-left: $space-md;
+      }
+    }
+  }
+
+  &__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

@@ -0,0 +1,105 @@
+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 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

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+
+import classnames from '../../utils/classNames';
+
+import './index.scss';
+import { IProps } from './types';
+import Field from '../Field';
+
+const baseClass = 'vant-search';
+
+const Search = ({
+  label,
+  shape = 'square',
+  background,
+  maxLength,
+  placeholder,
+  clearable = true,
+  autofocus,
+  showAction,
+  disabled,
+  readonly,
+  error,
+  inputAlign = 'left',
+  leftIcon = 'search',
+  rightIcon,
+  actionText = 'Cancel',
+  search,
+  input,
+  focus,
+  blur,
+  clear,
+  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 (blur) blur(e);
+  };
+
+  const handleClear = (e) => {
+    e.preventDefault();
+    if (clear) {
+      clear(e);
+    }
+    setValue('');
+  };
+
+  const searchProps = {
+    className: classnames(baseClass, [
+      { label },
+      { [shape]: shape },
+      { disabled },
+      { showAction },
+      { leftIcon }
+    ]),
+    style: {},
+    onSubmit: handleSearch
+  };
+
+  if (background)
+    Object.assign(searchProps, { style: { backgroundColor: background } });
+
+  return (
+    <form {...searchProps}>
+      <Field
+        value={value}
+        label={label}
+        labelAlign={labelAlign}
+        labelWidth={labelWidth}
+        input={handleInput}
+        blur={handleBlur}
+        focus={handleFocus}
+        clear={handleClear}
+        clearable={clearable}
+        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>
+  );
+};
+
+export default Search;