From 4feb38826685ff4e9fad32a7648ce54ab7013d5f Mon Sep 17 00:00:00 2001 From: maxin Date: Thu, 10 Mar 2022 20:06:07 +0800 Subject: [PATCH] fix(filter-picker): when `valueType` was changed initialize state --- src/dropdown/Dropdown.tsx | 2 + src/input/Input.tsx | 2 + src/input/InputButton.tsx | 2 + src/input/InputNumber.tsx | 2 + src/input/Password.tsx | 2 + src/input/TextArea.tsx | 2 + .../FilterCondition/FilterAttrOverlay.tsx | 57 +++++++++---------- src/search-bar/SearchBar.tsx | 2 + src/table/style/index.less | 16 +++--- 9 files changed, 48 insertions(+), 39 deletions(-) diff --git a/src/dropdown/Dropdown.tsx b/src/dropdown/Dropdown.tsx index 3b5ff20402..c616cf3da0 100644 --- a/src/dropdown/Dropdown.tsx +++ b/src/dropdown/Dropdown.tsx @@ -102,4 +102,6 @@ export const Dropdown = forwardRef( } ); +Dropdown.displayName = 'Dropdown'; + export default Dropdown; diff --git a/src/input/Input.tsx b/src/input/Input.tsx index 847e40df41..80922860c0 100644 --- a/src/input/Input.tsx +++ b/src/input/Input.tsx @@ -99,4 +99,6 @@ const Input = React.forwardRef((props, ref) => { ); }); +Input.displayName = 'Input'; + export default Input; diff --git a/src/input/InputButton.tsx b/src/input/InputButton.tsx index 4c6efb6c42..ced487993e 100644 --- a/src/input/InputButton.tsx +++ b/src/input/InputButton.tsx @@ -100,4 +100,6 @@ const InputButton = React.forwardRef((props, ); }); +InputButton.displayName = 'InputButton'; + export default InputButton; diff --git a/src/input/InputNumber.tsx b/src/input/InputNumber.tsx index ab45c80ba5..6af5dbbcdc 100644 --- a/src/input/InputNumber.tsx +++ b/src/input/InputNumber.tsx @@ -6,4 +6,6 @@ const InputNumber = React.forwardRef((props, )); +InputNumber.displayName = 'InputNumber'; + export default InputNumber; diff --git a/src/input/Password.tsx b/src/input/Password.tsx index 9b32148e65..701e245cea 100644 --- a/src/input/Password.tsx +++ b/src/input/Password.tsx @@ -41,4 +41,6 @@ const Password = React.forwardRef((props, ref) ); }); +Password.displayName = 'Password'; + export default Password; diff --git a/src/input/TextArea.tsx b/src/input/TextArea.tsx index a11f42658b..04c286266a 100644 --- a/src/input/TextArea.tsx +++ b/src/input/TextArea.tsx @@ -38,4 +38,6 @@ const TextArea = React.forwardRef((props, re ); }); +TextArea.displayName = 'TextArea'; + export default TextArea; diff --git a/src/legacy/filter-picker/components/FilterList/Expression/FilterCondition/FilterAttrOverlay.tsx b/src/legacy/filter-picker/components/FilterList/Expression/FilterCondition/FilterAttrOverlay.tsx index f730d001f5..f2385951be 100644 --- a/src/legacy/filter-picker/components/FilterList/Expression/FilterCondition/FilterAttrOverlay.tsx +++ b/src/legacy/filter-picker/components/FilterList/Expression/FilterCondition/FilterAttrOverlay.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'; import { isEmpty } from 'lodash'; import NumberAttrSelect from './components/NumberAttrSelect'; import DateAttrSelect from './components/DateAttrSelect'; @@ -33,12 +33,12 @@ interface FilterAttrOverlayProps { numType?: 'positivedecimal' | 'decimal'; } -function usePrevious(value: T): T | undefined { +function usePrevious(value: T): React.MutableRefObject { const ref = useRef(); useEffect(() => { ref.current = value; }, [value]); - return ref.current; + return ref; } function FilterAttrOverlay(props: FilterAttrOverlayProps) { @@ -58,40 +58,35 @@ function FilterAttrOverlay(props: FilterAttrOverlayProps) { list: t.list, }; - useEffect(() => { - if (valueType === 'date') { - // 此处是为了处理，日期类型时，包含当天，选项('>=', '<=')不在 selectOptions 里面 - if (op === '>=') { - setOperationValue('>'); - } else if (op === '<=') { - setOperationValue('<'); - } else if (op === 'relativeTime') { - // 相对现在和相对区间，传的参数都为relativeTime，需要转换成relativeCurrent（相对现在），relativeBetween（相对区间） - const relativeTime = values?.[0].split(':')[1].split(','); - if (relativeTime.length === 1 || relativeTime.includes('0')) { - setOperationValue('relativeCurrent'); - } else { - setOperationValue('relativeBetween'); + const getOperation = useCallback( + (type: attributeValue, operation: typeof operationValue, opValues: string[]): typeof operationValue => { + if (type === 'date') { + if (operation === '>=') return '>'; + if (operation === '<=') return '<'; + if (operation === 'relativeTime') { + // 相对现在和相对区间，传的参数都为relativeTime，需要转换成relativeCurrent（相对现在），relativeBetween（相对区间） + const relativeTime = opValues?.[0].split(':')[1].split(','); + if (relativeTime.length === 1 || relativeTime.includes('0')) { + return 'relativeCurrent'; + } + return 'relativeBetween'; } } - } - if (values?.[0] === ' ' && valueType !== 'list') { - setOperationValue(op === '!=' ? 'hasValue' : 'noValue'); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [op, valueType]); + if (opValues?.[0] === ' ' && type !== 'list') { + return operation === '!=' ? 'hasValue' : 'noValue'; + } + return operation; + }, + [] + ); const previousValueType = usePrevious(valueType); useEffect(() => { - if (valueType !== previousValueType) { - if (isEmpty(values)) { - setAttrValue([]); - } - if (op) { - setOperationValue(op); - } + if (valueType !== previousValueType.current && isEmpty(values)) { + setAttrValue([]); } - }, [previousValueType, valueType, values, op]); + setOperationValue(getOperation(valueType, op, values)); + }, [previousValueType, valueType, values, op, getOperation]); const handleChange = (e: React.ChangeEvent) => { setChecked(e.target.checked); diff --git a/src/search-bar/SearchBar.tsx b/src/search-bar/SearchBar.tsx index bf58b10885..d1f24c49da 100644 --- a/src/search-bar/SearchBar.tsx +++ b/src/search-bar/SearchBar.tsx @@ -91,4 +91,6 @@ const SearchBar = React.forwardRef((props, ref ); }); +SearchBar.displayName = 'SearchBar'; + export default SearchBar; diff --git a/src/table/style/index.less b/src/table/style/index.less index bdc4ad4773..54855f6028 100644 --- a/src/table/style/index.less +++ b/src/table/style/index.less @@ -200,23 +200,23 @@ &-sorter-button { height: 22px; padding: 0 8px; + color: @gray-3; + line-height: 0; border: none; & > [class*='prefix-icon'] { flex-direction: column; } &-up { - color: @gray-3; - line-height: 0; transform: translateY(3px); + &.active { + color: @blue-3; + } } &-down { - color: @gray-3; - line-height: 0; transform: translateY(-3px); - } - &-up.active, - &-down.active { - color: @blue-3; + &.active { + color: @blue-3; + } } }