diff --git a/package.json b/package.json index e7865ec9b..87fadf99a 100644 --- a/package.json +++ b/package.json @@ -138,7 +138,8 @@ "rollup-plugin-styles": "^3.14.1", "run-s": "^0.0.0", "stylelint": "^13.13.1", - "typescript": "^4.3.5" + "typescript": "^4.3.5", + "use-deep-compare-effect": "^1.8.1" }, "devDependencies": { "@antmjs/warning": "^1.17.7" diff --git a/packages/vantui/src/button/index.tsx b/packages/vantui/src/button/index.tsx index fbadabbfc..f21bf2e2e 100644 --- a/packages/vantui/src/button/index.tsx +++ b/packages/vantui/src/button/index.tsx @@ -13,11 +13,11 @@ if (process.env.TARO_ENV === 'h5' && !removed) { const _timer = setInterval(() => { time-- if (time > 0) { - const allStyle = document.getElementsByTagName('style') + const allStyle = document.getElementsByTagName('style') || [] for (let i = allStyle.length - 1; i >= 0; i--) { const sty: any = allStyle[i] - const htm = sty.getInnerHTML() - if (/^taro-button-core{/.test(htm)) { + const htm = sty.innerHTML + if (htm && /^taro-button-core{/.test(htm)) { sty.remove() removed = true _timer && clearInterval(_timer) diff --git a/packages/vantui/src/field/index.less b/packages/vantui/src/field/index.less index 2ecf2007a..a99c4c832 100644 --- a/packages/vantui/src/field/index.less +++ b/packages/vantui/src/field/index.less @@ -42,6 +42,12 @@ background-color: transparent; border: 0; resize: none; + font-size: @field-font-size; + + textarea, + input { + font-size: @field-font-size; + } .theme(color, '@field-input-text-color'); .theme(height, '@cell-line-height'); @@ -82,9 +88,11 @@ } } - .autosize { + .autosize-height { height: auto; + } + .autosize { textarea { resize: none; overflow: hidden; diff --git a/packages/vantui/src/field/index.tsx b/packages/vantui/src/field/index.tsx index 5ffaf3ec3..ed290e98f 100644 --- a/packages/vantui/src/field/index.tsx +++ b/packages/vantui/src/field/index.tsx @@ -17,11 +17,12 @@ export function Field(props: FieldProps) { focused: false, }) const [state, setState] = useState({ - innerValue: '', + // innerValue: '', showClear: false, unitag: 'van-field', }) - const { innerValue, showClear } = state + const [innerValue, setInnerValue] = useState('') + const { showClear } = state const { size, leftIcon, @@ -110,9 +111,7 @@ export function Field(props: FieldProps) { Object.defineProperty(event, 'detail', { value: event.detail.value, }) - setState((pre: any) => { - return { ...pre, innerValue: event.detail } - }) + setInnerValue(event.detail) Taro.nextTick(() => { onInput?.(event) onChange?.(event) @@ -149,6 +148,7 @@ export function Field(props: FieldProps) { onFocus?.(event) } const _blur = function (event: any) { + console.info('blur') ref.current.focused = false setShowClear(innerValue) Object.defineProperty(event, 'detail', { @@ -157,9 +157,7 @@ export function Field(props: FieldProps) { onBlur?.(event) } const _clear = function () { - setState((pre: any) => { - return { ...pre, innerValue: '' } - }) + setInnerValue('') setShowClear('') Taro.nextTick(() => { emitChange() @@ -193,9 +191,7 @@ export function Field(props: FieldProps) { useEffect( function () { - setState((pre: any) => { - return { ...pre, innerValue: value } - }) + setInnerValue(value as string) }, [value], ) @@ -258,7 +254,13 @@ export function Field(props: FieldProps) { disabled, error, }, - ]) + ` input-class ${autosize ? 'autosize' : ''} ${state.unitag}` + ]) + + ` input-class ${autosize ? 'autosize' : ''} ${state.unitag}` + + `${ + process.env.TARO_ENV !== 'weapp' && autosize + ? ' autosize-height' + : '' + }` } fixed={fixed} focus={focus} diff --git a/packages/vantui/src/style/var.less b/packages/vantui/src/style/var.less index f8f7b72f9..10f6bcaf6 100644 --- a/packages/vantui/src/style/var.less +++ b/packages/vantui/src/style/var.less @@ -299,6 +299,7 @@ @field-word-num-full-color: @red; @field-disabled-text-color: @gray-5; @field-text-area-min-height: 148px; +@field-font-size: @font-size-md; // GoodsAction @goods-action-background-color: @white; diff --git a/yarn.lock b/yarn.lock index b7d45cdec..d82047706 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1006,6 +1006,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.12.5": + version "7.17.9" + resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72" + integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.15.4": version "7.15.4" resolved "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz#51898d35dcf3faa670c4ee6afcfd517ee139f194" @@ -3983,6 +3990,11 @@ deprecation@^2.0.0, deprecation@^2.3.1: resolved "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919" integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ== +dequal@^2.0.2: + version "2.0.2" + resolved "https://registry.npmmirror.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d" + integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug== + detect-file@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7" @@ -9171,6 +9183,14 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +use-deep-compare-effect@^1.8.1: + version "1.8.1" + resolved "https://registry.npmmirror.com/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz#ef0ce3b3271edb801da1ec23bf0754ef4189d0c6" + integrity sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q== + dependencies: + "@babel/runtime" "^7.12.5" + dequal "^2.0.2" + util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"