Skip to content

feat: Add customItemValueDelimiter #670

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: dev-5.x
Choose a base branch
from
Open

feat: Add customItemValueDelimiter #670

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6e8635d
[feat] add customItemValueDelimiter
JHeigle May 15, 2023
7370be7
[feat] add customItemValueDelimiter
JHeigle May 15, 2023
0060cea
[fix] add missing comma
JHeigle Oct 4, 2024
2a75a41
Merge branch 'dev-5.x' of https://github.com/hossein-zare/react-nativ…
JHeigle Oct 4, 2024
43cc9d9
[chore] add customItemValueDelimiter property type
JHeigle Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 18 additions & 17 deletions src/components/Picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ function Picker({
closeOnBackPressed = false,
extendableBadgeContainer = false,
onSelectItem = (item) => {}
customItemValueDelimiter = '-',
}) {
const [necessaryItems, setNecessaryItems] = useState([]);
const [searchText, setSearchText] = useState('');
Expand Down Expand Up @@ -233,11 +234,11 @@ function Picker({
setNecessaryItems(state => {
return [...state].map(item => {
const _item = items.find(x => x[_schema.value] === item[_schema.value]);

if (_item) {
return {...item, ..._item};
}

return item;
});
});
Expand All @@ -251,15 +252,15 @@ function Picker({
setNecessaryItems(state => {
if (value === null || (Array.isArray(value) && value.length === 0))
return [];

let _state = [...state].filter(item => value.includes(item[_schema.value]));

const newItems = value.reduce((accumulator, currentValue) => {
const index = _state.findIndex(item => item[_schema.value] === currentValue);

if (index === -1) {
const item = items.find(item => item[_schema.value] === currentValue);

if (item) {
return [...accumulator, item];
}
Expand All @@ -282,7 +283,7 @@ function Picker({
state.push(item);
}
}

setNecessaryItems(state);
}

Expand Down Expand Up @@ -405,7 +406,7 @@ function Picker({
});
} else {
const index = sortedItems.findIndex(item => item[_schema["value"]] === value);

if (index > -1)
flatListRef.current?.scrollToIndex?.({
index,
Expand Down Expand Up @@ -454,7 +455,7 @@ function Picker({
} else {
if (disableLocalSearch)
return sortedItems;

const values = [];
const normalizeText = (text) => text.normalize("NFD").replace(/[\u0300-\u036f]/g, "");

Expand Down Expand Up @@ -485,7 +486,7 @@ function Picker({
if ((results.length === 0 || results.findIndex(item => String(item[_schema.label]).toLowerCase() === searchText.toLowerCase()) === -1) && addCustomItem) {
results.push({
[_schema.label]: searchText,
[_schema.value]: searchText.replace(' ', '-'),
[_schema.value]: customItemValueDelimiter ? searchText.replaceAll(' ', customItemValueDelimiter) : searchText,
custom: true
});
}
Expand Down Expand Up @@ -583,7 +584,7 @@ function Picker({

if (isNull)
return null;

try {
return necessaryItems.find(item => item[_schema.value] === _value);
} catch (e) {
Expand All @@ -602,11 +603,11 @@ function Picker({
if (multiple)
if (item.length > 0) {
let mtext = _multipleText;

if (typeof mtext !== 'string') {
mtext = mtext[item.length] ?? mtext.n;
}

return mtext.replace('{count}', item.length);
} else
return fallback;
Expand Down Expand Up @@ -1022,7 +1023,7 @@ function Picker({
const _itemKey = useMemo(() => {
if (itemKey === null)
return _schema.value;

return itemKey;
}, [itemKey, _schema]);

Expand Down Expand Up @@ -1115,7 +1116,7 @@ function Picker({
</View>
);
}

return <BadgeListEmptyComponent />;
}, [__renderBadge, extendableBadgeContainerStyle, extendableBadgeItemContainerStyle]);

Expand All @@ -1124,10 +1125,10 @@ function Picker({
* @returns {JSX.Element}
*/
const BadgeBodyComponent = useMemo(() => {
if (extendableBadgeContainer) {
if (extendableBadgeContainer) {
return <ExtendableBadgeContainer selectedItems={selectedItems} />
}

return (
<FlatList
ref={setBadgeFlatListRef}
Expand Down Expand Up @@ -1702,7 +1703,7 @@ function Picker({
const onRequestCloseModal = useCallback(() => {
setOpen(false);
}, []);

/**
* The dropdown flatlist component.
* @returns {JSX.Element}
Expand Down Expand Up @@ -1740,7 +1741,7 @@ function Picker({
const DropDownScrollViewComponent = useMemo(() => {
return (
<ScrollView ref={scrollViewRef} nestedScrollEnabled={true} stickyHeaderIndices={stickyHeaderIndices} {...scrollViewProps}>
{_items.map((item, index) => {
{_items.map((item, index) => {
return (
<Fragment key={item[_itemKey]}>
{index > 0 && ItemSeparatorComponent()}
Expand Down