@leav/ui 1.5.1-5b5551fc → 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,45 +1,28 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
// Copyright LEAV Solutions 2017 until 2023/11/05, Copyright Aristid from 2023/11/06
|
|
3
|
-
// This file is released under LGPL V3
|
|
4
|
-
// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
|
|
5
|
-
import { useEffect, useState } from 'react';
|
|
6
2
|
import styled from 'styled-components';
|
|
7
3
|
import { KitInput, KitSelect } from 'aristid-ds';
|
|
8
4
|
import { AttributeConditionFilter } from '../../../../types';
|
|
9
5
|
import { useSharedTranslation } from '../../../../hooks/useSharedTranslation';
|
|
10
6
|
import { useConditionsOptionsByType } from './useConditionOptionsByType';
|
|
11
|
-
import { useDebouncedValue } from '../../../../hooks/useDebouncedValue';
|
|
12
7
|
const InputStyled = styled(KitInput) `
|
|
13
8
|
width: 100%;
|
|
14
9
|
`;
|
|
15
10
|
export const TextAttributeDropDown = ({ filter, onFilterChange, selectDropDownRef, }) => {
|
|
16
11
|
const { t } = useSharedTranslation();
|
|
17
12
|
const { conditionOptionsByType } = useConditionsOptionsByType(filter);
|
|
18
|
-
const [inputValue, setInputValue] = useState(filter.value || '');
|
|
19
|
-
const debouncedInputValue = useDebouncedValue(inputValue, 300);
|
|
20
|
-
useEffect(() => {
|
|
21
|
-
setInputValue(filter.value || '');
|
|
22
|
-
}, [filter.value]);
|
|
23
|
-
// Only apply onFilterChange when the input is empty or there are more than 2 characters
|
|
24
|
-
useEffect(() => {
|
|
25
|
-
const valueToApply = debouncedInputValue;
|
|
26
|
-
if (valueToApply.length === 0 && filter.value !== null) {
|
|
27
|
-
onFilterChange({ ...filter, value: null });
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
if (valueToApply.length >= 3 && filter.value !== valueToApply) {
|
|
31
|
-
onFilterChange({ ...filter, value: valueToApply });
|
|
32
|
-
}
|
|
33
|
-
}, [debouncedInputValue, onFilterChange, filter]);
|
|
34
13
|
const _onConditionChanged = condition => {
|
|
35
14
|
onFilterChange({ ...filter, condition });
|
|
36
15
|
};
|
|
16
|
+
// TODO debounce ?
|
|
37
17
|
const _onInputChanged = event => {
|
|
38
|
-
const
|
|
39
|
-
|
|
18
|
+
const shouldIgnoreInputChange = event.target.value.length < 3 && (filter.value?.length ?? 0) <= event.target.value.length;
|
|
19
|
+
if (shouldIgnoreInputChange) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
onFilterChange({ ...filter, value: event.target.value.length === 0 ? null : event.target.value });
|
|
40
23
|
};
|
|
41
24
|
const showSearch = filter.condition !== AttributeConditionFilter.IS_EMPTY &&
|
|
42
25
|
filter.condition !== AttributeConditionFilter.IS_NOT_EMPTY;
|
|
43
|
-
return (_jsxs(_Fragment, { children: [_jsx(KitSelect, { options: conditionOptionsByType, onChange: _onConditionChanged, value: filter.condition, getPopupContainer: () => selectDropDownRef?.current ?? document.body, "aria-label": String(t('explorer.filter-condition')) }), showSearch && (_jsx(InputStyled, { placeholder: String(t('explorer.type-a-value')), value:
|
|
26
|
+
return (_jsxs(_Fragment, { children: [_jsx(KitSelect, { options: conditionOptionsByType, onChange: _onConditionChanged, value: filter.condition, getPopupContainer: () => selectDropDownRef?.current ?? document.body, "aria-label": String(t('explorer.filter-condition')) }), showSearch && (_jsx(InputStyled, { placeholder: String(t('explorer.type-a-value')), value: filter.value ?? undefined, onChange: _onInputChanged }))] }));
|
|
44
27
|
};
|
|
45
28
|
//# sourceMappingURL=TextAttributeDropDown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextAttributeDropDown.js","sourceRoot":"","sources":["../../../../../src/components/Filters/filter-items/filter-type/TextAttributeDropDown.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"TextAttributeDropDown.js","sourceRoot":"","sources":["../../../../../src/components/Filters/filter-items/filter-type/TextAttributeDropDown.tsx"],"names":[],"mappings":";AAIA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAC,wBAAwB,EAAC,MAAM,WAAW,CAAC;AACnD,OAAO,EAAC,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAEpE,OAAO,EAAC,0BAA0B,EAAC,MAAM,6BAA6B,CAAC;AAEvE,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;CAEnC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAoD,CAAC,EACnF,MAAM,EACN,cAAc,EACd,iBAAiB,GACpB,EAAE,EAAE;IACD,MAAM,EAAC,CAAC,EAAC,GAAG,oBAAoB,EAAE,CAAC;IAEnC,MAAM,EAAC,sBAAsB,EAAC,GAAG,0BAA0B,CAAC,MAAM,CAAC,CAAC;IAEpE,MAAM,mBAAmB,GAAiD,SAAS,CAAC,EAAE;QAClF,cAAc,CAAC,EAAC,GAAG,MAAM,EAAE,SAAS,EAAC,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,kBAAkB;IAClB,MAAM,eAAe,GAAgD,KAAK,CAAC,EAAE;QACzE,MAAM,uBAAuB,GACzB,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC;QAC9F,IAAI,uBAAuB,EAAE,CAAC;YAC1B,OAAO;QACX,CAAC;QACD,cAAc,CAAC,EAAC,GAAG,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAC,CAAC,CAAC;IACpG,CAAC,CAAC;IAEF,MAAM,UAAU,GACZ,MAAM,CAAC,SAAS,KAAK,wBAAwB,CAAC,QAAQ;QACtD,MAAM,CAAC,SAAS,KAAK,wBAAwB,CAAC,YAAY,CAAC;IAE/D,OAAO,CACH,8BACI,KAAC,SAAS,IACN,OAAO,EAAE,sBAAsB,EAC/B,QAAQ,EAAE,mBAAmB,EAC7B,KAAK,EAAE,MAAM,CAAC,SAAS,EACvB,iBAAiB,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,OAAO,IAAI,QAAQ,CAAC,IAAI,gBACxD,MAAM,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,GACpD,EACD,UAAU,IAAI,CACX,KAAC,WAAW,IACR,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,EAC/C,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,SAAS,EAChC,QAAQ,EAAE,eAAe,GAC3B,CACL,IACF,CACN,CAAC;AACN,CAAC,CAAC","sourcesContent":["// Copyright LEAV Solutions 2017 until 2023/11/05, Copyright Aristid from 2023/11/06\n// This file is released under LGPL V3\n// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt\nimport {type ComponentProps, type FunctionComponent} from 'react';\nimport styled from 'styled-components';\nimport {KitInput, KitSelect} from 'aristid-ds';\nimport {AttributeConditionFilter} from '_ui/types';\nimport {useSharedTranslation} from '_ui/hooks/useSharedTranslation';\nimport {type IFilterChildrenDropDownProps} from './_types';\nimport {useConditionsOptionsByType} from './useConditionOptionsByType';\n\nconst InputStyled = styled(KitInput)`\n width: 100%;\n`;\n\nexport const TextAttributeDropDown: FunctionComponent<IFilterChildrenDropDownProps> = ({\n filter,\n onFilterChange,\n selectDropDownRef,\n}) => {\n const {t} = useSharedTranslation();\n\n const {conditionOptionsByType} = useConditionsOptionsByType(filter);\n\n const _onConditionChanged: ComponentProps<typeof KitSelect>['onChange'] = condition => {\n onFilterChange({...filter, condition});\n };\n\n // TODO debounce ?\n const _onInputChanged: ComponentProps<typeof KitInput>['onChange'] = event => {\n const shouldIgnoreInputChange =\n event.target.value.length < 3 && (filter.value?.length ?? 0) <= event.target.value.length;\n if (shouldIgnoreInputChange) {\n return;\n }\n onFilterChange({...filter, value: event.target.value.length === 0 ? null : event.target.value});\n };\n\n const showSearch =\n filter.condition !== AttributeConditionFilter.IS_EMPTY &&\n filter.condition !== AttributeConditionFilter.IS_NOT_EMPTY;\n\n return (\n <>\n <KitSelect\n options={conditionOptionsByType}\n onChange={_onConditionChanged}\n value={filter.condition}\n getPopupContainer={() => selectDropDownRef?.current ?? document.body}\n aria-label={String(t('explorer.filter-condition'))}\n />\n {showSearch && (\n <InputStyled\n placeholder={String(t('explorer.type-a-value'))}\n value={filter.value ?? undefined}\n onChange={_onInputChanged}\n />\n )}\n </>\n );\n};\n"]}
|