✨ feat(颜色取样): 新增颜色取样模块

2022-10-31 19:06:14 +08:00
parent e0de46c469
commit 2811f7eb60
15 changed files with 438 additions and 249 deletions
@@ -1,52 +1,56 @@
-import { Input, View } from "@tarojs/components";
-import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from "react";
-import styles from  './index.module.scss';
+import { Input, View } from '@tarojs/components'
+import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from 'react'
+import IconFont from '../iconfont/iconfont'
+import styles from './index.module.scss'

 type Params = {
-    showIcon?: false|true,
-    disabled?: false|true,
-    placeholder?: string,
-    title?: string,
-    showTitle?: false|true,
-    showBorder?: false|true,
-    changeOnInput?: (string) => void,
-    clickOnInput?: () => void,
-    children?: ReactNode
-    height?: string,
-    titleStyle?: Object,
-    styleObj?: Object
-
+  showIcon?: boolean
+  disabled?: boolean
+  placeholder?: string
+  title?: string
+  showTitle?: boolean
+  showBorder?: boolean
+  changeOnInput?: (string) => void
+  clickOnInput?: () => void
+  children?: ReactNode
+  height?: string
+  titleStyle?: Object
+  styleObj?: Object
 }

 export default memo((props: Params) => {
-    let {
-        showTitle = true,
-        title = '标题', 
-        showIcon = false, 
-        disabled = false, 
-        placeholder = '请输入',
-        showBorder = true,
-        changeOnInput,
-        clickOnInput,
-        height = '80rpx',
-        titleStyle = {}
-    } = props
+  let {
+    showTitle = true,
+    title = '标题',
+    showIcon = false,
+    disabled = false,
+    placeholder = '请输入',
+    showBorder = true,
+    changeOnInput,
+    clickOnInput,
+    height = '80rpx',
+    titleStyle = {},
+  } = props

-    let stylen = useMemo(() => {
-        if(!showBorder) {
-            return { borderBottom: 0 }
-        }
-        return {}
-    }, [showBorder])
-    return (
-        <View className={styles.searchInput_main} style={{height: height, ...stylen}}>
-            {showTitle&&<View className={styles.searchInput_title} style={titleStyle}>{title}</View>}
-            <View className={styles.searchInput_con}>
-                {!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
-                    ||<>{props.children}</>
-                }
-            </View>
-            {showIcon&&<View className={`iconfont icon-jiantou ${styles.icon_more_self}`}></View>}
+  let stylen = useMemo(() => {
+    if (!showBorder) {
+      return { borderBottom: 0 }
+    }
+    return {}
+  }, [showBorder])
+  return (
+    <View className={styles.searchInput_main} style={{ height: height, ...stylen }}>
+      {showTitle && (
+        <View className={styles.searchInput_title} style={titleStyle}>
+          {title}
        </View>
-    )
-})
+      )}
+      <View className={styles.searchInput_con}>
+        {(!props.children && (
+          <Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={e => changeOnInput?.(e.detail.value)} />
+        )) || <>{props.children}</>}
+      </View>
+      {showIcon && <IconFont customClassName={styles.icon_more_self} name='icon-chakanquanbukehu' size={36} color='#333'></IconFont>}
+    </View>
+  )
+})