feat: add SearchBar

global.d.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as CSS from 'csstype'
 
 declare module "*.png";
 declare module "*.gif";
@@ -13,8 +13,8 @@ declare module "*.styl";
 
 declare namespace JSX {
     interface IntrinsicElements {
-      'import': React.DetailedHTMLProps<React.EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>;
       [elem: string]: any;
+      'import': React.DetailedHTMLProps<React.EmbedHTMLAttributes<HTMLEmbedElement>, HTMLEmbedElement>;
     }
 }
 
@@ -25,3 +25,4 @@ declare const process: {
     [key: string]: any;
   }
 }
+export type CSSProperties = CSS.Properties<string | number>

package.json

@@ -54,6 +54,7 @@
     "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
     "@vue/babel-preset-jsx": "^1.1.2",
     "babel-preset-taro": "3.0.0-beta.6",
+    "csstype": "^2.6.10",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-taro": "3.0.0-beta.6",

src/components/index.ts

@@ -20,6 +20,7 @@ import AtRadio from './radio/index'
 import AtCheckbox from './checkbox/index'
 import AtRate from './rate/index'
 import AtTextarea from './textarea/index'
+import AtSearchBar from './search-bar/index'
 
 export {
   Grid,
@@ -44,4 +45,5 @@ export {
   AtCheckbox,
   AtRate,
   AtTextarea,
+  AtSearchBar,
 }

src/components/search-bar/index.tsx

@@ -0,0 +1,198 @@
+import Vue, { VNode } from 'vue'
+import { CommonEvent } from '@tarojs/components/types/common'
+import classNames from 'classnames'
+import { CSSProperties } from '../../../global'
+import mixins from '../mixins'
+
+type ExtendEvent = {
+  target: {
+    value: string,
+  },
+}
+
+const AtSearchBar = Vue.extend({
+  name: 'AtSearchBar',
+  mixins: [mixins],
+  props: {
+    customStyle: {
+      type: [Object, String],
+      default: () => {},
+    },
+    className: {
+      type: [Object, String],
+      default: () => {},
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '搜索',
+    },
+    actionName: {
+      type: String,
+      default: '搜索',
+    },
+    maxLength: {
+      type: Number,
+      default: 140,
+    },
+    fixed: {
+      type: Boolean,
+      default: false,
+    },
+    focus: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    showActionButton: {
+      type: Boolean,
+      default: false,
+    },
+    inputType: {
+      type: String,
+      default: 'text',
+    },
+    onChange: {
+      type: Function,
+      default: () => () => {},
+    },
+    onFocus: {
+      type: Function,
+      default: () => () => {},
+    },
+    onBlur: {
+      type: Function,
+      default: () => () => {},
+    },
+    onConfirm: {
+      type: Function,
+      default: () => () => {},
+    },
+    onActionClick: {
+      type: Function,
+      default: () => () => {},
+    },
+  },
+  data() {
+    return {
+      state: {
+        isFocus: !!this.focus,
+      },
+    }
+  },
+  methods: {
+    handleFocus(event: CommonEvent): void {
+      this.setState({
+        isFocus: true,
+      })
+      this.onFocus && this.onFocus(event)
+    },
+    handleBlur(event: CommonEvent): void {
+      this.setState({
+        isFocus: false,
+      })
+      this.onBlur && this.onBlur(event)
+    },
+    handleChange(e: CommonEvent & ExtendEvent): void {
+      this.onChange(e.target.value, e)
+    },
+    handleClear(event: CommonEvent): void {
+      if (this.onClear) {
+        this.onClear(event)
+      } else {
+        this.onChange('', event)
+      }
+    },
+    handleConfirm(event: CommonEvent): void {
+      this.onConfirm && this.onConfirm(event)
+    },
+    handleActionClick(event: CommonEvent): void {
+      this.onActionClick && this.onActionClick(event)
+    },
+  },
+  render(): VNode {
+    const {
+      value,
+      placeholder,
+      maxLength,
+      fixed,
+      disabled,
+      showActionButton,
+      actionName,
+      inputType,
+      className,
+      customStyle,
+    } = this
+    const { isFocus } = this.state
+    const fontSize = 14
+    const rootCls = classNames(
+      'at-search-bar',
+      {
+        'at-search-bar--fixed': fixed,
+      },
+      className
+    )
+    const placeholderWrapStyle: CSSProperties = {}
+    const actionStyle: CSSProperties = {}
+    if (isFocus || (!isFocus && value)) {
+      actionStyle.opacity = 1
+      actionStyle.marginRight = `0`
+      placeholderWrapStyle.flexGrow = 0
+    } else if (!isFocus && !value) {
+      placeholderWrapStyle.flexGrow = 1
+      actionStyle.opacity = 0
+      actionStyle.marginRight = `-${(actionName.length + 1) * fontSize + fontSize / 2 + 10}px`
+    }
+    if (showActionButton) {
+      actionStyle.opacity = 1
+      actionStyle.marginRight = `0`
+    }
+
+    const clearIconStyle: CSSProperties = { display: 'flex' }
+    const placeholderStyle: CSSProperties = { visibility: 'hidden' }
+    if (!value.length) {
+      clearIconStyle.display = 'none'
+      placeholderStyle.visibility = 'visible'
+    }
+
+    return (
+      <view class={rootCls} style={customStyle}>
+        <view class="at-search-bar__input-cnt">
+          <view class="at-search-bar__placeholder-wrap" style={placeholderWrapStyle}>
+            <view class="at-icon at-icon-search"></view>
+            <view class="at-search-bar__placeholder" style={placeholderStyle}>
+              {isFocus ? '' : placeholder}
+            </view>
+          </view>
+          <input
+            class="at-search-bar__input"
+            type={inputType}
+            confirmType="search"
+            value={value}
+            focus={isFocus}
+            disabled={disabled}
+            maxLength={maxLength}
+            onInput={this.handleChange}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+            onConfirm={this.handleConfirm}
+          />
+          <view class="at-search-bar__clear" style={clearIconStyle} onTouchStart={this.handleClear}>
+            <view class="at-icon at-icon-close-circle"></view>
+          </view>
+        </view>
+        <view class="at-search-bar__action" style={actionStyle} onTap={this.handleActionClick}>
+          {actionName}
+        </view>
+      </view>
+    )
+  },
+})
+
+export default AtSearchBar

src/pages/index/index.vue

@@ -2,6 +2,10 @@
   <view 
     class="index"
   >
+    <AtSearchBar
+      :value="searchVal"
+      :on-change="searchValChange"
+    />
     <AtTextarea
       :value="textareaVal"
       :on-change="textareaChange"

src/pages/index/indexMixins.ts

@@ -45,6 +45,7 @@ import {
   AtCheckbox,
   AtRate,
   AtTextarea,
+  AtSearchBar,
 } from '../../components/index'
 
 export default {
@@ -95,6 +96,7 @@ export default {
     AtCheckbox,
     AtRate,
     AtTextarea,
+    AtSearchBar,
   },
   data() {
     return {
@@ -221,6 +223,7 @@ export default {
       ],
       rateVal: 2,
       textareaVal: '',
+      searchVal: '',
     }
   },
   methods: {
@@ -269,5 +272,8 @@ export default {
     textareaChange(val) {
       this.textareaVal = val
     },
+    searchValChange(val) {
+      this.searchVal = val
+    },
   },
 }