122 lines
3.2 KiB
TypeScript
122 lines
3.2 KiB
TypeScript
import _ from 'lodash';
|
|
import React from 'react';
|
|
import AutoCompleteItem from './autocomplete-item';
|
|
import LabelItem from './label-item';
|
|
import Wrapper from './wrapper';
|
|
interface LabelSelectorProps {
|
|
labels: Record<string, any>;
|
|
label?: string;
|
|
btnText?: string;
|
|
isAutoComplete?: boolean;
|
|
labelList: Array<{ key: string; value: string }>;
|
|
onLabelListChange: (list: { key: string; value: string }[]) => void;
|
|
onChange?: (labels: Record<string, any>) => void;
|
|
onPaste?: (e: any, index: number) => void;
|
|
onBlur?: (e: any, type: string, index: number) => void;
|
|
onDelete?: (index: number) => void;
|
|
description?: React.ReactNode;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const Inner: React.FC<LabelSelectorProps> = ({
|
|
labels,
|
|
labelList,
|
|
onChange,
|
|
onLabelListChange,
|
|
onPaste,
|
|
onBlur,
|
|
onDelete,
|
|
disabled,
|
|
label,
|
|
btnText,
|
|
description,
|
|
isAutoComplete
|
|
}) => {
|
|
const updateLabels = (list: { key: string; value: string }[]) => {
|
|
const newLabels = _.reduce(
|
|
list,
|
|
(result: any, item: any) => {
|
|
if (item.key) {
|
|
result[item.key] = item.value;
|
|
}
|
|
return result;
|
|
},
|
|
{}
|
|
);
|
|
onChange?.(newLabels);
|
|
};
|
|
const handleOnChange = (index: number, label: any) => {
|
|
const list = _.cloneDeep(labelList);
|
|
list[index] = label;
|
|
onLabelListChange(list);
|
|
updateLabels(list);
|
|
};
|
|
|
|
const handleAddLabel = () => {
|
|
const newLabelList = [
|
|
...labelList,
|
|
{
|
|
key: '',
|
|
value: ''
|
|
}
|
|
];
|
|
onLabelListChange(newLabelList);
|
|
updateLabels(newLabelList);
|
|
};
|
|
|
|
const handleOnDelete = (index: number) => {
|
|
const list = _.cloneDeep(labelList);
|
|
list.splice(index, 1);
|
|
onLabelListChange(list);
|
|
updateLabels(list);
|
|
onDelete?.(index);
|
|
};
|
|
|
|
return (
|
|
<Wrapper
|
|
label={label}
|
|
description={description}
|
|
onAdd={handleAddLabel}
|
|
disabled={disabled}
|
|
btnText={btnText}
|
|
>
|
|
<>
|
|
{isAutoComplete
|
|
? labelList?.map((item: any, index: number) => {
|
|
return (
|
|
<AutoCompleteItem
|
|
disabled={disabled}
|
|
key={index}
|
|
label={item}
|
|
seperator=":"
|
|
labels={labels}
|
|
labelList={labelList}
|
|
onDelete={() => handleOnDelete(index)}
|
|
onChange={(obj) => handleOnChange(index, obj)}
|
|
onPaste={(e) => onPaste?.(e, index)}
|
|
onBlur={(e: any, type: string) => onBlur?.(e, type, index)}
|
|
/>
|
|
);
|
|
})
|
|
: labelList?.map((item: any, index: number) => {
|
|
return (
|
|
<LabelItem
|
|
disabled={disabled}
|
|
key={index}
|
|
label={item}
|
|
seperator=":"
|
|
labelList={labelList}
|
|
onDelete={() => handleOnDelete(index)}
|
|
onChange={(obj) => handleOnChange(index, obj)}
|
|
onPaste={(e) => onPaste?.(e, index)}
|
|
onBlur={(e: any, type: string) => onBlur?.(e, type, index)}
|
|
/>
|
|
);
|
|
})}
|
|
</>
|
|
</Wrapper>
|
|
);
|
|
};
|
|
|
|
export default Inner;
|