Skip to content

Commit f088d0f

Browse files
James-BaloyiJames-Baloyi
authored
Merge pull request #3585 from teboho/en/entityreference
Refactor EntityReference and QuickView components to use new styling …
2 parents 63c2563 + 09950c8 commit f088d0f

File tree

7 files changed

+209
-73
lines changed

7 files changed

+209
-73
lines changed

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ import { App, Button, Spin } from 'antd';
2424
import moment from 'moment';
2525
import React, { CSSProperties, FC, useEffect, useMemo, useState } from 'react';
2626
import { ShaIconTypes } from '../iconPicker';
27-
import { innerEntityReferenceButtonBoxStyle, innerEntityReferenceSpanBoxStyle } from '../quickView/utils';
2827
import { addPx } from '@/utils/style';
28+
import { useStyles } from './styles/styles';
2929

3030
export type EntityReferenceTypes = 'NavigateLink' | 'Quickview' | 'Dialog';
3131

@@ -103,6 +103,8 @@ export const EntityReference: FC<IEntityReferenceProps> = (props) => {
103103
const entityType = props.entityType ?? props.value?._className;
104104
const formType = props.formType ?? (props.entityReferenceType === 'Quickview' ? 'quickview' : 'details');
105105

106+
const {styles, cx} = useStyles();
107+
106108
useEffect(() => {
107109

108110
const fetchFormId = async () => {
@@ -228,10 +230,10 @@ export const EntityReference: FC<IEntityReferenceProps> = (props) => {
228230
const content = useMemo(() => {
229231
if (!(fetched || props.entityReferenceType === 'Quickview'))
230232
return (
231-
<Button type="link" style={{ ...innerEntityReferenceButtonBoxStyle, ...props.style }}>
232-
<span style={innerEntityReferenceSpanBoxStyle}>
233-
<Spin size="small" style={{ marginRight: 8, display: 'inline-block', verticalAlign: 'middle' }} />
234-
<span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Loading...</span>
233+
<Button type="link" className={cx(styles.innerEntityReferenceButtonBoxStyle)} style={props.style}>
234+
<span className={cx(styles.innerEntityReferenceSpanBoxStyle)}>
235+
<Spin size="small" className={cx(styles.spin)} />
236+
<span className={cx(styles.inlineBlock)}>Loading...</span>
235237
</span>
236238
</Button>
237239
);
@@ -271,23 +273,23 @@ export const EntityReference: FC<IEntityReferenceProps> = (props) => {
271273
);
272274

273275
return (
274-
<Button type="link" onClick={dialogExecute} style={{ ...innerEntityReferenceButtonBoxStyle, ...props.style }}>
275-
<span style={innerEntityReferenceSpanBoxStyle}>{displayTextByType}</span>
276+
<Button type="link" onClick={dialogExecute} className={cx(styles.innerEntityReferenceButtonBoxStyle)} style={props.style}>
277+
<span className={cx(styles.innerEntityReferenceSpanBoxStyle)}>{displayTextByType}</span>
276278
</Button>
277279
);
278280
}, [props.formIdentifier, displayText, entityId, props.disabled, properties.length, displayTextByType, fetched]);
279281

280282
if (props.formSelectionMode === 'name' && !props.formIdentifier)
281283
return (
282-
<Button type="link" disabled style={{ ...innerEntityReferenceButtonBoxStyle, ...props.style }}>
283-
<span style={innerEntityReferenceSpanBoxStyle}>Form identifier is not configured</span>
284+
<Button type="link" disabled className={cx(styles.innerEntityReferenceButtonBoxStyle)} style={props.style}>
285+
<span className={cx(styles.innerEntityReferenceSpanBoxStyle)}>Form identifier is not configured</span>
284286
</Button>
285287
);
286288

287289
if (!props.value)
288290
return (
289-
<Button type="link" disabled style={{ ...innerEntityReferenceButtonBoxStyle, ...props.style }}>
290-
<span style={innerEntityReferenceSpanBoxStyle}>{displayText}</span>
291+
<Button type="link" disabled className={cx(styles.innerEntityReferenceButtonBoxStyle)} style={props.style}>
292+
<span className={cx(styles.innerEntityReferenceSpanBoxStyle)}>{displayText}</span>
291293
</Button>
292294
);
293295

‎shesha-reactjs/src/components/entityReference/styles/styles.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { createStyles } from '@/styles';
2+
3+
export const useStyles = createStyles(({ css, cx }) => {
4+
const innerEntityReferenceSpanBoxStyle = cx('sha-entity-reference-inner-entity-reference-span-box', css`
5+
width: 100%;
6+
margin: 0;
7+
padding: 0;
8+
text-overflow: ellipsis;
9+
overflow: hidden;
10+
white-space: nowrap;
11+
display: inline-block;
12+
`);
13+
14+
15+
const innerEntityReferenceButtonBoxStyle = cx('sha-entity-reference-inner-entity-reference-button-box', css`
16+
background-color: transparent;
17+
white-space: nowrap;
18+
overflow: hidden;
19+
text-overflow: ellipsis;
20+
width: 100%;
21+
height: 100%;
22+
margin: 0;
23+
padding: 0;
24+
display: inline-flex;
25+
align-items: center;
26+
justify-content: flex-start;
27+
`);
28+
29+
const spin = cx('sha-entity-reference-spin', css`
30+
margin-right: 8px;
31+
display: inline-block;
32+
vertical-align: middle;
33+
`);
34+
35+
const inlineBlock = cx('sha-entity-reference-inline-block', css`
36+
display: inline-block;
37+
vertical-align: middle;
38+
`);
39+
40+
return {
41+
innerEntityReferenceSpanBoxStyle,
42+
innerEntityReferenceButtonBoxStyle,
43+
spin,
44+
inlineBlock,
45+
};
46+
});

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

Lines changed: 30 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,11 @@ import { useFormConfiguration } from '@/providers/form/api';
77
import { FormIdentifier } from '@/providers/form/models';
88
import ParentProvider from '@/providers/parentProvider';
99
import { get } from '@/utils/fetchers';
10-
import { App, Button, Popover, PopoverProps, Spin } from 'antd';
10+
import { App, Button, Popover, PopoverProps } from 'antd';
1111
import React, { CSSProperties, FC, PropsWithChildren, useEffect, useMemo, useState } from 'react';
1212
import { ShaIconTypes } from '../iconPicker';
13-
import {
14-
getQuickViewInitialValues,
15-
innerEntityReferenceButtonBoxStyle,
16-
innerEntityReferenceSpanBoxStyle,
17-
} from './utils';
13+
import { formItemLayout, getQuickViewInitialValues, loadingBox } from './utils';
14+
import { useStyles } from './styles/styles';
1815

1916
export interface IQuickViewProps extends PropsWithChildren {
2017
/** The id or guid for the entity */
@@ -48,19 +45,6 @@ export interface IQuickViewProps extends PropsWithChildren {
4845
emptyText?: string;
4946
}
5047

51-
const formItemLayout = {
52-
labelCol: {
53-
xs: { span: 24 },
54-
md: { span: 8 },
55-
sm: { span: 8 },
56-
},
57-
wrapperCol: {
58-
xs: { span: 24 },
59-
md: { span: 16 },
60-
sm: { span: 16 },
61-
},
62-
};
63-
6448
const QuickView: FC<Omit<IQuickViewProps, 'formType'>> = ({
6549
children,
6650
entityId,
@@ -87,6 +71,7 @@ const QuickView: FC<Omit<IQuickViewProps, 'formType'>> = ({
8771
const { backendUrl, httpHeaders } = useSheshaApplication();
8872
const { refetch: fetchForm } = useFormConfiguration({ formId: formIdentifier, lazy: true });
8973
const { notification } = App.useApp();
74+
const {styles, cx} = useStyles();
9075

9176
useEffect(() => {
9277
if (formIdentifier) {
@@ -144,61 +129,61 @@ const QuickView: FC<Omit<IQuickViewProps, 'formType'>> = ({
144129

145130
const render = () => {
146131
if (children) {
147-
return <div style={{ ...innerEntityReferenceButtonBoxStyle, ...style }}>{children}</div>;
132+
return <div className={cx(styles.innerEntityReferenceButtonBoxStyle)}>{children}</div>;
148133
}
149134

150135
if (displayType === 'icon') {
151136
return (
152-
<Button type="link" style={{ ...innerEntityReferenceButtonBoxStyle, ...style }}>
137+
<Button type="link" className={cx(styles.innerEntityReferenceButtonBoxStyle)} style={style}>
153138
<ShaIcon iconName={iconName} />
154139
</Button>
155140
);
156141
}
157142

158143
if (displayType === 'textTitle') {
159144
return (
160-
<Button type="link" style={{ ...innerEntityReferenceButtonBoxStyle, ...style }}>
145+
<Button type="link" className={cx(styles.innerEntityReferenceButtonBoxStyle)} style={style}>
161146
{textTitle ? (
162-
<span style={innerEntityReferenceSpanBoxStyle}>{textTitle}</span>
147+
<span className={cx(styles.innerEntityReferenceSpanBoxStyle)}>{textTitle}</span>
163148
) : (
164149
<>
165-
<Spin size="small" />
166-
<span style={innerEntityReferenceSpanBoxStyle}>Loading...</span>
150+
{loadingBox(cx, styles)}
167151
</>
168152
)}
169153
</Button>
170154
);
171155
}
172156

157+
const ifLoadingStateSuccess = () => loadingState === 'success' ? (
158+
<span className={cx(styles.innerEntityReferenceSpanBoxStyle)}>{formTitle || emptyText}</span>
159+
) : (
160+
<span className={cx(styles.innerEntityReferenceSpanBoxStyle)}>Quickview not configured properly</span>
161+
);
162+
173163
return (
174-
<Button type="link" style={{ ...innerEntityReferenceButtonBoxStyle, ...style }}>
164+
<Button type="link" className={cx(styles.innerEntityReferenceButtonBoxStyle)} style={style}>
175165
{loadingState === 'loading' ? (
176166
<>
177-
<Spin size="small" />
178-
<span style={innerEntityReferenceSpanBoxStyle}>Loading...</span>
167+
{loadingBox(cx, styles)}
179168
</>
180-
) : loadingState === 'success' ? (
181-
<span style={innerEntityReferenceSpanBoxStyle}>{formTitle || emptyText}</span>
182-
) : (
183-
<span style={innerEntityReferenceSpanBoxStyle}>Quickview not configured properly</span>
184-
)}
169+
) : ifLoadingStateSuccess()}
185170
</Button>
186171
);
187172
};
188173

189174
if (disabled)
190175
return (
191-
<Button disabled type="link" style={{ ...innerEntityReferenceButtonBoxStyle, ...style }}>
192-
<span style={innerEntityReferenceSpanBoxStyle}>{formTitle || emptyText}</span>
176+
<Button disabled type="link" className={cx(styles.innerEntityReferenceButtonBoxStyle)} style={style}>
177+
<span className={cx(styles.innerEntityReferenceSpanBoxStyle)}>{formTitle || emptyText}</span>
193178
</Button>
194179
);
195180

196181
const title = loadingState === 'error' ? 'Quickview not configured properly' : formTitle;
197182
return (
198-
<Popover
199-
overlayInnerStyle={{ width, minWidth: width, maxHeight: '80vh', overflowY: 'auto', overflowX: 'auto' }}
200-
content={formContent}
201-
title={<div style={{ width, textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>{title}</div>}
183+
<Popover
184+
overlayInnerStyle={{ width, minWidth: width, maxHeight: '80vh', overflowY: 'auto', overflowX: 'auto' }}
185+
content={formContent}
186+
title={<div style={{ width, textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>{title}</div>}
202187
{...popoverProps}
203188
>
204189
{render()}
@@ -209,6 +194,7 @@ const QuickView: FC<Omit<IQuickViewProps, 'formType'>> = ({
209194
export const GenericQuickView: FC<IQuickViewProps> = (props) => {
210195
const { getEntityFormId } = useConfigurationItemsLoader();
211196
const [formConfig, setFormConfig] = useState<FormIdentifier>(props.formIdentifier ?? undefined);
197+
const {styles, cx} = useStyles();
212198

213199
useEffect(() => {
214200
if (props.className && !formConfig)
@@ -221,17 +207,15 @@ export const GenericQuickView: FC<IQuickViewProps> = (props) => {
221207
});
222208
}, [props.className, props.formType, formConfig]);
223209

224-
return formConfig ? (
225-
<QuickView {...props} formIdentifier={formConfig} />
226-
) : formConfig === undefined ? (
227-
<Button type="link" style={{ ...innerEntityReferenceButtonBoxStyle, ...props.style }}>
228-
<span style={innerEntityReferenceSpanBoxStyle}>
229-
<Spin size="small" /> Loading...
230-
</span>
210+
const buttonOrPopover = formConfig === undefined ? (
211+
<Button type="link" className={cx(styles.innerEntityReferenceButtonBoxStyle)} style={props.style}>
212+
{loadingBox(cx, styles)}
231213
</Button>
232214
) : (
233215
<Popover content={'Quickview not configured properly'} title="Quickview not configured properly"></Popover>
234216
);
217+
218+
return formConfig ? <QuickView {...props} formIdentifier={formConfig} /> : buttonOrPopover;
235219
};
236220

237221
export default QuickView;

‎shesha-reactjs/src/components/quickView/styles/styles.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { createStyles } from '@/styles';
2+
3+
export const useStyles = createStyles(({ css, cx }) => {
4+
const innerEntityReferenceSpanBoxStyle = cx('sha-quick-view-inner-entity-reference-span-box', css`
5+
width: 100%;
6+
margin: 0;
7+
padding: 0;
8+
text-overflow: ellipsis;
9+
overflow: hidden;
10+
white-space: nowrap;
11+
display: inline-block;
12+
`);
13+
14+
15+
const innerEntityReferenceButtonBoxStyle = cx('sha-quick-view-inner-entity-reference-button-box', css`
16+
background-color: transparent;
17+
white-space: nowrap;
18+
overflow: hidden;
19+
text-overflow: ellipsis;
20+
width: 100%;
21+
height: 100%;
22+
margin: 0;
23+
padding: 0;
24+
display: inline-flex;
25+
align-items: center;
26+
justify-content: flex-start;
27+
`);
28+
29+
const spin = cx('sha-quick-view-spin', css`
30+
margin-right: 8px;
31+
display: inline-block;
32+
vertical-align: middle;
33+
`);
34+
35+
const inlineBlock = cx('sha-quick-view-inline-block', css`
36+
display: inline-block;
37+
vertical-align: middle;
38+
`);
39+
40+
return {
41+
innerEntityReferenceSpanBoxStyle,
42+
innerEntityReferenceButtonBoxStyle,
43+
spin,
44+
inlineBlock,
45+
};
46+
});

shesha-reactjs/src/components/quickView/utils.ts renamed to shesha-reactjs/src/components/quickView/utils.tsx

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,30 @@
1+
import React from 'react';
2+
import { Spin } from 'antd';
13
import { getDataProperty, getFormatContent } from '@/utils/metadata';
24

5+
export const formItemLayout = {
6+
labelCol: {
7+
xs: { span: 24 },
8+
md: { span: 8 },
9+
sm: { span: 8 },
10+
},
11+
wrapperCol: {
12+
xs: { span: 24 },
13+
md: { span: 16 },
14+
sm: { span: 16 },
15+
},
16+
};
17+
18+
export const loadingBox = (cx: (className: string) => string, styles: { innerEntityReferenceSpanBoxStyle: string; spin: string; inlineBlock: string }) => (
19+
<span className={cx(styles.innerEntityReferenceSpanBoxStyle)}>
20+
<Spin size="small" className={cx(styles.spin)} />
21+
<span className={cx(styles.inlineBlock)}>Loading...</span>
22+
</span>
23+
);
24+
325
export const innerEntityReferenceButtonBoxStyle = {
426
backgroundColor: 'transparent',
5-
whiteSpace: 'nowrap',
27+
whiteSpace: 'nowrap',
628
overflow: 'hidden',
729
textOverflow: 'ellipsis',
830
width: '100%',
@@ -12,17 +34,7 @@ export const innerEntityReferenceButtonBoxStyle = {
1234
display: 'inline-flex',
1335
alignItems: 'center',
1436
justifyContent: 'flex-start',
15-
};
16-
17-
export const innerEntityReferenceSpanBoxStyle = {
18-
width: '100%',
19-
margin: '0',
20-
padding: '0',
21-
textOverflow: 'ellipsis',
22-
overflow: 'hidden',
23-
whiteSpace: 'nowrap',
24-
display: 'inline-block',
25-
};
37+
};
2638

2739
export const compareValueToProperty = (key: string, value: string, properties: Array<{ [key in string]: any }>) => {
2840
const dataType = getDataProperty(properties, key, 'dataType');

0 commit comments

Comments
 (0)