@gm-mobile/c-react 3.12.7-beta.2 → 3.12.7-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gm-mobile/c-react",
-  "version": "3.12.7-beta.2",
+  "version": "3.12.7-beta.3",
   "description": "> TODO: description",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gm-mobile#readme",
@@ -21,9 +21,9 @@
     "url": "https://github.com/gmfe/gm-mobile/issues"
   },
   "dependencies": {
-    "@gm-mobile/c-font": "^3.12.7-beta.2",
-    "@gm-mobile/c-tool": "^3.12.7-beta.2",
-    "@gm-mobile/locales": "^3.12.7-beta.2",
+    "@gm-mobile/c-font": "^3.12.7-beta.3",
+    "@gm-mobile/c-tool": "^3.12.7-beta.3",
+    "@gm-mobile/locales": "^3.12.7-beta.3",
     "dayjs": "^1.11.6"
   },
   "peerDependencies": {
@@ -34,5 +34,5 @@
     "prop-types": "^15.7.2",
     "react": "^16.13.1"
   },
-  "gitHead": "ed1c43a175d8b7af4bc3206ce1944c56b3e48d34"
+  "gitHead": "2febbe7e8c3f9c92143aecca92bea1dd35fab799"
 }

package/src/component/search/search.weapp.tsx

@@ -1,5 +1,5 @@
 import { getLocale } from '@gm-mobile/locales'
-import React, { ChangeEvent, FC, FormEvent, MouseEvent } from 'react'
+import React, { ChangeEvent, FC, FormEvent, MouseEvent, useState } from 'react'
 import classNames from 'classnames'
 import _ from 'lodash'
 import Input from '../input/input'
@@ -12,6 +12,9 @@ const Search: FC<SearchProps> = ({
   value,
   placeholder = getLocale('搜索'),
   searchText,
+  searchType,
+  onSearchType,
+  searchOptions = [],
   type = 'search',
   onCancel = _.noop,
   onSearch = _.noop,
@@ -20,6 +23,11 @@ const Search: FC<SearchProps> = ({
   autoFocus,
   ...rest
 }) => {
+  const [showSelect, setShowSelect] = useState(false)
+  const needSelect = searchOptions?.length > 0
+  const searchTypeText =
+    searchOptions?.find((item) => item.key === searchType)?.name || '请选择'
+
   const handleSearch = (
     e: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement>
   ) => {
@@ -41,13 +49,48 @@ const Search: FC<SearchProps> = ({
     onChange('')
   }
 
+  const handleSelect = (key: string) => {
+    // eslint-disable-next-line no-unused-expressions
+    onSearchType?.(key)
+    setShowSelect(false)
+  }
+
   return (
     <View
       {...rest}
-      className={classNames('m-search m-flex m-flex-align-center', className)}
+      className={classNames('m-search m-flex m-flex-align-center', className, {
+        'm-search-select': needSelect,
+      })}
     >
       <View className='m-search-input m-flex m-flex-flex'>
-        <Text className='m-font m-font-search m-search-icon-search' />
+        {needSelect ? (
+          <View
+            className='m-search-select-text'
+            onClick={() => setShowSelect((prev) => !prev)}
+          >
+            <Text>{searchTypeText}</Text>
+            <Text className='m-font m-font-arrow-triangle' />
+          </View>
+        ) : (
+          <Text className='m-font m-font-search m-search-icon-search' />
+        )}
+        {showSelect && (
+          <View className='m-search-select-content'>
+            {searchOptions.map((option) => {
+              return (
+                <View
+                  key={option.key}
+                  className={classNames('m-search-select-content-item', {
+                    'm-search-select-active': searchType === option.key,
+                  })}
+                  onClick={() => handleSelect(option.key)}
+                >
+                  <Text>{option.name}</Text>
+                </View>
+              )
+            })}
+          </View>
+        )}
         <Input
           type='text'
           confirmType='search'

package/src/component/search/stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Search from './search'
 import SearchPage from './page'
 import FakeSearch from './fake_search'
@@ -40,14 +40,24 @@ export const normal = () => {
 }
 
 export const cancel = () => {
+  const [type, setType] = useState('1')
   return (
     <View>
       <View>带取消按钮（点Header的搜索按钮）</View>
       <View>
         <Search
           type='cancel'
+          searchType={type}
+          onSearchType={setType}
+          searchOptions={[
+            { name: '供应商', key: '1' },
+            { name: '商品', key: '2' },
+          ]}
           placeholder='在站内搜索'
           value={store.value}
+          style={{
+            background: '#fff',
+          }}
           onChange={(value) => store.setValue(value)}
           onCancel={() => console.log('cancel')}
         />

package/src/component/search/style.less

@@ -1,13 +1,14 @@
 .m-search {
   height: var(--m-size-header-height);
   padding: 0 15px;
+  position: relative;
 
   .m-search-input {
     border-radius: var(--m-size-form-height-sm);
-    overflow: hidden;
     position: relative;
 
     .m-input {
+      border-radius: var(--m-size-form-height-sm);
       height: var(--m-size-form-height-sm);
       background: var(--m-color-bg-back);
       padding: 0 25px 0 25px;
@@ -35,6 +36,60 @@
   .m-btn {
     margin-right: -15px;
   }
+
+  &.m-search-select {
+    .m-search-select-text {
+      position: absolute;
+      display: flex;
+      width: 72px;
+      flex: 1;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+
+      .m-font-arrow-triangle {
+        font-size: 6px;
+        transform: scale(0.6);
+        margin-left: 4px;
+      }
+    }
+
+    .m-input {
+      padding-left: 72px;
+    }
+
+    .m-search-select-content {
+      position: absolute;
+      top: 38px;
+      background: #fff;
+      border-radius: 4px;
+      padding: 6px 10px;
+      box-shadow: 0 0 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -8px;
+        left: calc(50% - 4px);
+        border: 4px solid transparent;
+        border-bottom: 4px solid #fff;
+      }
+
+      .m-search-select-content-item {
+        padding: 4px;
+        border-bottom: 1.5px solid #eee;
+        text-align: center;
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
+      .m-search-select-active {
+        color: var(--m-color-accent);
+      }
+    }
+  }
 }
 
 .m-fake-search {

package/src/component/search/type.ts

@@ -10,6 +10,11 @@ interface SearchPageProps extends Omit<PageProps, 'onChange'> {
   onSearch?: () => void
 }
 
+interface SearchOption {
+  name?: string
+  key: string
+}
+
 interface SearchProps {
   value: string
   onChange: (value: string) => void
@@ -24,11 +29,16 @@ interface SearchProps {
   searchText?: string
   className?: string
   style?: CSSProperties
+  /** options */
+  searchType?: string
+  searchOptions?: SearchOption[]
+  onSearchType?: (key: string) => void
 }
+
 interface FakeSearchProps extends HtmlHTMLAttributes<HTMLDivElement> {
   placeholder?: string
   center?: boolean
   light?: boolean
 }
 
-export type { SearchPageProps, SearchProps, FakeSearchProps }
+export type { SearchPageProps, SearchProps, SearchOption, FakeSearchProps }