This repository has been archived by the owner on Jan 16, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 11
/
FormWidget.tsx
123 lines (115 loc) · 5.21 KB
/
FormWidget.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import React, { FunctionComponent } from 'react'
import { connect } from 'react-redux'
import { Form, Row, Col } from 'antd'
import { Store } from '../../../interfaces/store'
import { WidgetFormMeta, WidgetFormField } from '../../../interfaces/widget'
import { RowMetaField } from '../../../interfaces/rowMeta'
import { buildBcUrl } from '../../../utils/strings'
import Field from '../../Field/Field'
import { useFlatFormFields } from '../../../hooks/useFlatFormFields'
import styles from './FormWidget.less'
import cn from 'classnames'
import { FieldType, PendingValidationFails, PendingValidationFailsFormat } from '../../../interfaces/view'
import TemplatedTitle from '../../TemplatedTitle/TemplatedTitle'
interface FormWidgetOwnProps {
meta: WidgetFormMeta
}
interface FormWidgetProps extends FormWidgetOwnProps {
cursor: string
fields: RowMetaField[]
metaErrors: Record<string, string>
missingFields: Record<string, string>
}
/**
*
* @param props
* @category Widgets
*/
export const FormWidget: FunctionComponent<FormWidgetProps> = ({ meta, fields, missingFields, metaErrors, cursor }) => {
const hiddenKeys: string[] = []
const flattenWidgetFields = useFlatFormFields<WidgetFormField>(meta.fields).filter(item => {
const isHidden = item.type === FieldType.hidden || item.hidden
if (isHidden) {
hiddenKeys.push(item.key)
}
return !isHidden
})
const { bcName, name } = meta
const memoizedFields = React.useMemo(() => {
return (
<Row gutter={24}>
{meta.options?.layout?.rows.map((row, index) => {
return (
<Row key={index}>
{row.cols
.filter(field => {
const fieldMeta = fields?.find(item => item.key === field.fieldKey)
return fieldMeta ? !fieldMeta.hidden : true
})
.filter(col => !hiddenKeys.includes(col.fieldKey))
.map((col, colIndex) => {
const field = flattenWidgetFields.find(item => item.key === col.fieldKey)
const disabled = fields?.find(item => item.key === field.key && item.disabled)
const error = (!disabled && missingFields?.[field.key]) || metaErrors?.[field.key]
return (
<Col
key={colIndex}
span={col.span}
className={cn({ [styles.colWrapper]: row.cols.length > 1 || col.span !== 24 })}
>
<Form.Item
label={
field.type === 'checkbox' ? null : (
<TemplatedTitle widgetName={meta.name} title={field.label} />
)
}
validateStatus={error ? 'error' : undefined}
help={error}
>
<Field
bcName={bcName}
cursor={cursor}
widgetName={name}
widgetFieldMeta={field}
disableHoverError={meta.options?.disableHoverError}
/>
</Form.Item>
</Col>
)
})}
</Row>
)
})}
</Row>
)
}, [bcName, name, cursor, flattenWidgetFields, missingFields, metaErrors, hiddenKeys, fields, meta])
return (
<Form colon={false} layout="vertical">
{memoizedFields}
</Form>
)
}
function mapStateToProps(store: Store, ownProps: FormWidgetOwnProps) {
const bcName = ownProps.meta.bcName
const bc = store.screen.bo.bc[bcName]
const bcUrl = buildBcUrl(bcName, true)
const rowMeta = bcUrl && store.view.rowMeta[bcName]?.[bcUrl]
const fields = rowMeta?.fields
const metaErrors = rowMeta?.errors
const cursor = bc?.cursor
const missingFields =
store.view.pendingValidationFailsFormat === PendingValidationFailsFormat.target
? (store.view.pendingValidationFails as PendingValidationFails)?.[bcName]?.[cursor]
: store.view.pendingValidationFails
return {
cursor,
fields,
metaErrors,
missingFields
}
}
/**
* @category Widgets
*/
const ConnectedFormWidget = connect(mapStateToProps)(FormWidget)
export default ConnectedFormWidget