Skip to content

Commit 78d5730

Browse files
James-BaloyiJames-Baloyi
authored
Merge pull request #3395 from czwe-01/thulasizwe/en/dropdown-tag
Thulasizwe/en/dropdown tag
2 parents 249af24 + f0fd227 commit 78d5730

File tree

13 files changed

+183
-128
lines changed

13 files changed

+183
-128
lines changed

‎shesha-reactjs/src/components/dropdown/dropdown.tsx‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { IncomeValueFunc, ISelectOption, OutcomeValueFunc } from '@/components/r
88
import { ReferenceListItemDto } from '@/apis/referenceList';
99
import { useStyles } from './style';
1010
import { getTagStyle } from '@/utils/style';
11+
import ReflistTag from '../refListDropDown/reflistTag';
1112

1213

1314
export const Dropdown: FC<IDropdownProps> = ({
@@ -37,7 +38,7 @@ export const Dropdown: FC<IDropdownProps> = ({
3738
tagStyle
3839
}) => {
3940

40-
const { styles } = useStyles({ style, tagStyle });
41+
const { styles } = useStyles({ style });
4142

4243
const selectedMode = mode === 'multiple' || mode === 'tags' ? mode : undefined;
4344

@@ -79,6 +80,7 @@ export const Dropdown: FC<IDropdownProps> = ({
7980
color: item?.color,
8081
icon: item?.icon,
8182
data: item?.data,
83+
description: item?.description,
8284
};
8385
}, [incomeValueFunc]);
8486

@@ -104,6 +106,7 @@ export const Dropdown: FC<IDropdownProps> = ({
104106
data: outcomeValueFunc(fetchedItem, args),
105107
color: fetchedItem?.color,
106108
icon: fetchedItem?.icon,
109+
description: fetchedItem?.description,
107110
};
108111
}, [labelCustomJs, outcomeValueFunc, incomeValueFunc]);
109112

@@ -176,23 +179,29 @@ export const Dropdown: FC<IDropdownProps> = ({
176179
if (displayStyle === 'tags' && mode !== 'multiple') {
177180
return <Select
178181
{...commonSelectProps}
182+
className={styles.dropdown}
183+
showSearch
184+
style={{ ...style, width: 'max-content' }}
179185
popupMatchSelectWidth={false}
180-
style={{ width: 'max-content' }}
181186
placeholder={<Tag
182187
style={{ ...getTagStyle(tagStyle, true), background: '#d9d9d9' }}
183188
>
184189
{placeholder ?? <span style={{ whiteSpace: 'pre' }}>{' '}</span>}
185190
</Tag>}
186191
labelRender={(props) => {
187192
const option = options.find((o) => o.value === props.value);
188-
return <Tag
189-
key={props.value}
193+
return <ReflistTag
194+
key={option?.value}
190195
color={option?.color}
191196
icon={((option?.icon && showIcon)) && <Icon type={option?.icon} />}
192-
style={getTagStyle(tagStyle, !!option?.color && solidColor)}
193-
>
194-
{showItemName && option?.label}
195-
</Tag>;
197+
tagStyle={tagStyle}
198+
showIcon={showIcon}
199+
solidColor={solidColor}
200+
showItemName={showItemName}
201+
label={option?.label}
202+
value={option?.value}
203+
tooltip={option?.description}
204+
/>;
196205
}}
197206
>
198207
{
@@ -214,12 +223,18 @@ export const Dropdown: FC<IDropdownProps> = ({
214223
{...(displayStyle === 'tags' ? {
215224
labelRender: (props) => {
216225
const option = options.find((o) => o.value === props.value);
217-
return <Tag
218-
key={props.value}
226+
return <ReflistTag
227+
showIcon={showIcon}
228+
showItemName={showItemName}
229+
tagStyle={tagStyle}
230+
solidColor={solidColor}
231+
label={option?.label}
232+
value={option.value}
233+
key={option.value}
234+
tooltip={option?.description}
219235
color={option?.color}
220236
icon={option?.icon && showIcon && <Icon type={option?.icon} />}
221-
style={getTagStyle(tagStyle, !!option?.color && solidColor)}
222-
>{showItemName && option?.label}</Tag>;
237+
></ReflistTag>;
223238
}
224239
} : {})}
225240
>

‎shesha-reactjs/src/components/dropdown/model.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export interface ILabelValue<TValue = any> {
1111
value: TValue;
1212
color?: string;
1313
icon?: string;
14+
description?: string;
1415
}
1516

1617
export interface IDropdownProps {

‎shesha-reactjs/src/components/dropdown/style.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { createStyles } from '@/styles';
22
import { CSSProperties } from 'react';
33

4-
export const useStyles = createStyles(({ css, cx, token }, { style, tagStyle }: { style: CSSProperties; tagStyle: CSSProperties }) => {
4+
export const useStyles = createStyles(({ css, cx, token }, { style }: { style: CSSProperties }) => {
55

66
const dropdown = cx("sha-dropdown", css`
77
--ant-color-text: ${style.color} !important;
88
--ant-font-size: ${style.fontSize} !important;
99
--ant-font-weight-strong: ${style.fontWeight} !important;
1010
--ant-select-multiple-item-bg: transparent !important;
11-
--ant-select-multiple-item-height: ${tagStyle.height} !important;
1211
1312
.ant-select-selector{
1413
overflow: auto;
@@ -31,16 +30,14 @@ export const useStyles = createStyles(({ css, cx, token }, { style, tagStyle }:
3130
3231
:hover {
3332
border: none !important;
34-
.ant-tag {
33+
.ant-tag {
3534
align-content: center;
3635
cursor: default !important;
3736
pointer-events: none !important;
3837
}
3938
}
4039
}
4140
42-
43-
4441
&.ant-select-open, &:hover {
4542
border-color: ${token.colorPrimary} !important;
4643
}

‎shesha-reactjs/src/components/readOnlyDisplayFormItem/index.tsx‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Space, Switch, Tag } from 'antd';
1+
import { Space, Switch } from 'antd';
22
import Checkbox from 'antd/lib/checkbox/Checkbox';
33
import { ValueRenderer } from '@/components/valueRenderer/index';
44
import React, { FC, useMemo } from 'react';
@@ -7,7 +7,7 @@ import { ISelectOption } from '@/components/autocomplete';
77
import QuickView, { GenericQuickView } from '@/components/quickView';
88
import { IReadOnlyDisplayFormItemProps } from './models';
99
import { useStyles } from './styles/styles';
10-
import { getTagStyle } from '@/utils/style';
10+
import ReflistTag from '../refListDropDown/reflistTag';
1111

1212
type AutocompleteType = ISelectOption;
1313

@@ -78,13 +78,18 @@ export const ReadOnlyDisplayFormItem: FC<IReadOnlyDisplayFormItemProps> = (props
7878
/>
7979
);
8080
} else {
81-
return dropdownDisplayMode === 'tags' ? <Tag
82-
color={value?.color}
83-
icon={((value?.icon && showIcon)) && <Icon type={value?.icon} />}
84-
style={getTagStyle(style, !!value?.color && solidColor)}
85-
>
86-
{showItemName && displayName}
87-
</Tag> : displayName || value;
81+
return dropdownDisplayMode === 'tags' ?
82+
<ReflistTag
83+
value={value}
84+
color={value?.color}
85+
icon={value?.icon}
86+
showIcon={showIcon}
87+
tagStyle={style}
88+
tooltip={value?.description}
89+
solidColor={solidColor}
90+
showItemName={showItemName}
91+
label={displayName}
92+
/> : displayName ?? value;
8893
}
8994
}
9095

@@ -97,16 +102,19 @@ export const ReadOnlyDisplayFormItem: FC<IReadOnlyDisplayFormItemProps> = (props
97102
return dropdownDisplayMode === 'raw'
98103
? values?.join(', ')
99104
: <Space size={8}>
100-
{value?.map(({ label, color, icon, value }) => {
101-
102-
return <Tag
105+
{value?.map(({ label, color, icon, value, description }) => {
106+
return <ReflistTag
103107
key={value}
108+
value={value}
104109
color={color}
105-
icon={((icon && showIcon)) && <Icon type={icon} />}
106-
style={getTagStyle(style, !!color && solidColor)}
107-
>
108-
{showItemName && label}
109-
</Tag>;
110+
icon={icon}
111+
tooltip={description}
112+
showIcon={showIcon}
113+
tagStyle={style}
114+
solidColor={solidColor}
115+
showItemName={showItemName}
116+
label={label}
117+
/>;
110118
})}
111119
</Space>;
112120
}

‎shesha-reactjs/src/components/refListDropDown/genericRefListDropDown.tsx‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { Empty, Select, Spin, Tag } from 'antd';
1+
import { Empty, Select, Spin } from 'antd';
22
import { ValidationErrors } from '@/components';
33
import { useReferenceList } from '@/providers/referenceListDispatcher';
44
import React, { useMemo } from 'react';
55
import { ReferenceListItemDto } from '@/apis/referenceList';
6-
import ReadOnlyDisplayFormItem, { Icon } from '@/components/readOnlyDisplayFormItem';
6+
import ReadOnlyDisplayFormItem from '@/components/readOnlyDisplayFormItem';
77
import { CustomLabeledValue, IGenericRefListDropDownProps, ISelectOption } from './models';
8-
import { getTagStyle } from '@/utils/style';
8+
import ReflistTag from './reflistTag';
99

1010
// tslint:disable-next-line:whitespace
1111
export const GenericRefListDropDown = <TValue,>(props: IGenericRefListDropDownProps<TValue>) => {
@@ -35,6 +35,7 @@ export const GenericRefListDropDown = <TValue,>(props: IGenericRefListDropDownPr
3535
...rest
3636
} = props;
3737
const { data: refList, loading: refListLoading, error: refListError } = useReferenceList(referenceListId);
38+
3839
const filter = ({ itemValue }: ReferenceListItemDto) => {
3940
if (!filters?.length) {
4041
return true;
@@ -122,6 +123,7 @@ export const GenericRefListDropDown = <TValue,>(props: IGenericRefListDropDownPr
122123
value={wrapValue(value, options)}
123124
disabled={disabled}
124125
showIcon={showIcon}
126+
showItemName={showItemName}
125127
solidColor={solidColor}
126128
style={displayStyle === 'tags' ? tagStyle : style}
127129
dropdownDisplayMode={displayStyle === 'tags' ? 'tags' : 'raw'}
@@ -164,12 +166,18 @@ export const GenericRefListDropDown = <TValue,>(props: IGenericRefListDropDownPr
164166
style={{ width: 'max-content' }}
165167
labelRender={(props) => {
166168
const option = options.find((o) => o.value === props.value);
167-
return <Tag
168-
key={props.value}
169+
return <ReflistTag
170+
key={option?.value}
171+
value={option?.value}
172+
tooltip={option?.description}
169173
color={option?.color}
170-
icon={option?.icon && showIcon && <Icon type={option?.icon} />}
171-
style={getTagStyle(tagStyle, !!option?.color && solidColor)}
172-
>{showItemName && option?.label}</Tag>;
174+
icon={option?.icon}
175+
showIcon={showIcon}
176+
tagStyle={tagStyle}
177+
solidColor={solidColor}
178+
showItemName={showItemName}
179+
label={option?.label}
180+
/>;
173181
}}
174182
>
175183
{options?.map(({ value: localValue, label, data, disabled }) => (
@@ -189,12 +197,17 @@ export const GenericRefListDropDown = <TValue,>(props: IGenericRefListDropDownPr
189197
{...(displayStyle === 'tags' ? {
190198
labelRender: (props) => {
191199
const option = options.find((o) => o.value === props.value);
192-
return <Tag
193-
key={props.value}
200+
return <ReflistTag
201+
value={option?.value}
202+
tooltip={value}
194203
color={option?.color}
195-
icon={(option?.icon && showIcon) && <Icon type={option?.icon} />}
196-
style={getTagStyle(tagStyle, !!option?.color && solidColor)}
197-
>{showItemName && option?.label}</Tag>;
204+
icon={option?.icon}
205+
showIcon={showIcon}
206+
tagStyle={tagStyle}
207+
solidColor={solidColor}
208+
showItemName={showItemName}
209+
label={option?.label}
210+
/>;
198211
}
199212
} : {})}
200213
>

‎shesha-reactjs/src/components/refListDropDown/models.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export interface ISelectOption<TValue = any> {
6363
disabled?: boolean;
6464
color?: string;
6565
icon?: string;
66+
description?: string;
6667
}
6768

6869
export type CustomLabeledValue<TValue = any> = LabeledValue & { data: TValue };

‎shesha-reactjs/src/components/refListDropDown/reflistTag.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { getTagStyle } from '@/utils/style';
2+
import convertCssColorNameToHex from 'convert-css-color-name-to-hex';
3+
import { Tag, Tooltip, TooltipProps } from 'antd';
4+
import React from 'react';
5+
import { Icon } from '../readOnlyDisplayFormItem';
6+
function ReflistTag({ value, tooltip, color, icon, showIcon, tagStyle, solidColor, showItemName, label, placement = 'right' }) {
7+
8+
const memoizedColor = solidColor
9+
? convertCssColorNameToHex(color ?? '')
10+
: color?.toLowerCase();
11+
12+
return (
13+
<Tooltip title={tooltip} placement={placement as TooltipProps['placement']} style={{ cursor: 'pointer' }}>
14+
<Tag
15+
key={value}
16+
color={memoizedColor}
17+
icon={(icon && showIcon) && <Icon type={icon} />}
18+
style={getTagStyle(tagStyle, !!color)}
19+
>{showItemName && label.toUpperCase()}</Tag>
20+
</Tooltip>
21+
);
22+
};
23+
24+
export default ReflistTag;

0 commit comments

Comments
 (0)