Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
J
jinfa-platform
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
linweijiong
jinfa-platform
Commits
8a3968e1
Commit
8a3968e1
authored
Dec 10, 2020
by
前端-许佳敏
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
style: code
parent
f475db10
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
141 additions
and
141 deletions
+141
-141
index.tsx
src/components/NiceForm/index.tsx
+141
-141
No files found.
src/components/NiceForm/index.tsx
View file @
8a3968e1
import
React
from
'react'
;
import
SchemaForm
,
{
IAntdSchemaFormProps
,
createVirtualBox
,
registerVirtualBox
,
Schema
,
SchemaField
,
FormButtonGroup
,
Reset
,
createControllerBox
,
registerValidationRules
,
}
from
'@formily/antd'
;
import
{
Button
,
Space
,
Row
,
Col
,
DatePicker
}
from
'antd'
;
import
CustomUpload
from
'./components/CustomUpload'
;
import
CustomStatus
from
'./components/CustomStatus'
;
import
CustomAddArray
from
'./components/CustomAddArray'
;
import
CustomSlider
from
'./components/CustomSlider'
;
import
Search
from
'./components/Search'
;
import
CustomInputSearch
from
'./components/CustomInputSearch'
import
Submit
from
'./components/Submit'
;
import
Text
from
'./components/Text'
;
import
CardCheckBox
from
'./components/CardCheckBox'
;
import
MultTable
from
'./components/MultTable'
;
import
CustomRegistryPhone
from
'./components/CustomRegistryPhone'
;
import
CustomRelevance
from
'./components/CustomRelevance'
;
import
Children
from
'./components/Children'
;
import
CircleBox
from
'./components/CircleBox'
;
import
Phone
from
'./components/Phone'
;
import
CustomRadio
from
'./components/CustomRadio'
;
import
Select
from
'./components/Select'
;
import
SearchSelect
from
'./components/SearchSelect'
;
import
TableTagList
from
'./components/TableTagList'
;
import
'./index.less'
import
{
Checkbox
,
Radio
}
from
'@formily/antd-components'
;
import
DateSelect
from
'./components/DateSelect'
;
import
DateRangePickerUnix
from
'./components/DateRangePickerUnix'
;
import
NumberRange
from
'./components/NumberRange'
;
import
VirtualChildren
from
'./components/VirtualChildren'
;
import
SmilingFace
from
'./components/SmilingFace'
;
import
SliderValidate
from
'./components/SliderValidate'
;
import
{
useLinkComponentProps
}
from
'./linkages/linkComponentProps'
;
import
Loading
from
'../Loading'
;
export
interface
NiceFormProps
extends
IAntdSchemaFormProps
{
loading
?:
boolean
}
const
SchemaFormButtonGroup
=
createVirtualBox
(
'schemaButtonGroup'
,
FormButtonGroup
)
const
SchemaButton
=
createVirtualBox
(
'schemaButton'
,
Button
)
const
SchemaSubmit
=
createVirtualBox
(
'schemaSubmit'
,
Submit
)
const
SchemaReset
=
createVirtualBox
(
'schemaReset'
,
Reset
)
export
const
FlexBox
=
createVirtualBox
(
'flexBox'
,
props
=>
<
Row
{
...
props
}
/>)
// 自定义校验规则
registerValidationRules
({
limitByte
:
(
value
,
desc
,
rules
)
=>
{
const
{
allowChineseTransform
=
true
,
maxByte
}
=
desc
;
let
str
=
value
;
let
message
=
`不能超过
${
maxByte
}
个字符`
if
(
allowChineseTransform
)
{
str
=
str
.
replace
(
/
[\u
4E00-
\u
9FA5
]
/g
,
"AA"
);
message
+=
`,或者
${
maxByte
/
2
}
个汉字`
}
return
str
.
length
>
maxByte
?
message
:
""
;
}
});
// 该组件用于schema中嵌套表单, 不过控制台会出现警告
const
schemaLayout
=
createControllerBox
(
"schemaLayout"
,
(
_props
)
=>
{
const
{
schema
}
=
_props
;
const
componentProps
=
schema
.
getExtendsComponentProps
();
const
{
properties
}
=
schema
.
toJSON
();
const
nestedSchema
=
new
Schema
({
type
:
"object"
,
properties
});
// const { visible, title, onCancel, footer, ...others } = componentProps;
return
(
<
NiceForm
>
<
SchemaField
schema=
{
nestedSchema
}
></
SchemaField
>
</
NiceForm
>
);
});
export
const
componentExport
=
{
CheckboxSingle
:
Checkbox
,
CustomUpload
,
CustomStatus
,
CustomAddArray
,
CustomSlider
,
CustomRadio
,
Search
,
CustomInputSearch
,
Submit
,
Text
,
CardCheckBox
,
MultTable
,
CustomRegistryPhone
,
CustomRelevance
,
Children
,
CircleBox
,
SchemaFormButtonGroup
,
FlexBox
,
Phone
,
Select
,
SearchSelect
,
DateRangePicker
:
DatePicker
.
RangePicker
,
TableTagList
,
DateSelect
,
DateRangePickerUnix
,
NumberRange
,
VirtualChildren
,
SmilingFace
,
SliderValidate
,
RadioGroup
:
Radio
.
Group
}
const
NiceForm
:
React
.
FC
<
NiceFormProps
>
=
props
=>
{
const
{
children
,
components
,
effects
,
expressionScope
,
loading
=
false
,
...
reset
}
=
props
;
const
defineComponents
=
Object
.
assign
(
componentExport
,
components
);
return
(
<
div
style=
{
{
width
:
'100%'
,
position
:
'relative'
}
}
>
<
SchemaForm
colon=
{
false
}
components=
{
defineComponents
}
style=
{
{
opacity
:
loading
?
0
:
1
,
position
:
loading
?
'absolute'
:
'initial'
}
}
effects=
{
(
$
,
ctx
)
=>
{
// 自定义联动scope收集器
useLinkComponentProps
(
expressionScope
)
// 组件联动
effects
&&
effects
(
$
,
ctx
)
}
}
expressionScope=
{
expressionScope
}
{
...
reset
}
>
{
children
}
</
SchemaForm
>
{
loading
&&
<
Loading
/>
}
</
div
>
);
};
NiceForm
.
defaultProps
=
{};
export
default
NiceForm
;
import
React
from
'react'
;
import
SchemaForm
,
{
IAntdSchemaFormProps
,
createVirtualBox
,
registerVirtualBox
,
Schema
,
SchemaField
,
FormButtonGroup
,
Reset
,
createControllerBox
,
registerValidationRules
,
}
from
'@formily/antd'
;
import
{
Button
,
Space
,
Row
,
Col
,
DatePicker
}
from
'antd'
;
import
CustomUpload
from
'./components/CustomUpload'
;
import
CustomStatus
from
'./components/CustomStatus'
;
import
CustomAddArray
from
'./components/CustomAddArray'
;
import
CustomSlider
from
'./components/CustomSlider'
;
import
Search
from
'./components/Search'
;
import
CustomInputSearch
from
'./components/CustomInputSearch'
import
Submit
from
'./components/Submit'
;
import
Text
from
'./components/Text'
;
import
CardCheckBox
from
'./components/CardCheckBox'
;
import
MultTable
from
'./components/MultTable'
;
import
CustomRegistryPhone
from
'./components/CustomRegistryPhone'
;
import
CustomRelevance
from
'./components/CustomRelevance'
;
import
Children
from
'./components/Children'
;
import
CircleBox
from
'./components/CircleBox'
;
import
Phone
from
'./components/Phone'
;
import
CustomRadio
from
'./components/CustomRadio'
;
import
Select
from
'./components/Select'
;
import
SearchSelect
from
'./components/SearchSelect'
;
import
TableTagList
from
'./components/TableTagList'
;
import
'./index.less'
import
{
Checkbox
,
Radio
}
from
'@formily/antd-components'
;
import
DateSelect
from
'./components/DateSelect'
;
import
DateRangePickerUnix
from
'./components/DateRangePickerUnix'
;
import
NumberRange
from
'./components/NumberRange'
;
import
VirtualChildren
from
'./components/VirtualChildren'
;
import
SmilingFace
from
'./components/SmilingFace'
;
import
SliderValidate
from
'./components/SliderValidate'
;
import
{
useLinkComponentProps
}
from
'./linkages/linkComponentProps'
;
import
Loading
from
'../Loading'
;
export
interface
NiceFormProps
extends
IAntdSchemaFormProps
{
loading
?:
boolean
}
const
SchemaFormButtonGroup
=
createVirtualBox
(
'schemaButtonGroup'
,
FormButtonGroup
)
const
SchemaButton
=
createVirtualBox
(
'schemaButton'
,
Button
)
const
SchemaSubmit
=
createVirtualBox
(
'schemaSubmit'
,
Submit
)
const
SchemaReset
=
createVirtualBox
(
'schemaReset'
,
Reset
)
export
const
FlexBox
=
createVirtualBox
(
'flexBox'
,
props
=>
<
Row
{
...
props
}
/>)
// 自定义校验规则
registerValidationRules
({
limitByte
:
(
value
,
desc
,
rules
)
=>
{
const
{
allowChineseTransform
=
true
,
maxByte
}
=
desc
;
let
str
=
value
;
let
message
=
`不能超过
${
maxByte
}
个字符`
if
(
allowChineseTransform
)
{
str
=
str
.
replace
(
/
[\u
4E00-
\u
9FA5
]
/g
,
"AA"
);
message
+=
`,或者
${
maxByte
/
2
}
个汉字`
}
return
str
.
length
>
maxByte
?
message
:
""
;
}
});
// 该组件用于schema中嵌套表单, 不过控制台会出现警告
const
schemaLayout
=
createControllerBox
(
"schemaLayout"
,
(
_props
)
=>
{
const
{
schema
}
=
_props
;
const
componentProps
=
schema
.
getExtendsComponentProps
();
const
{
properties
}
=
schema
.
toJSON
();
const
nestedSchema
=
new
Schema
({
type
:
"object"
,
properties
});
// const { visible, title, onCancel, footer, ...others } = componentProps;
return
(
<
NiceForm
>
<
SchemaField
schema=
{
nestedSchema
}
></
SchemaField
>
</
NiceForm
>
);
});
export
const
componentExport
=
{
CheckboxSingle
:
Checkbox
,
CustomUpload
,
CustomStatus
,
CustomAddArray
,
CustomSlider
,
CustomRadio
,
Search
,
CustomInputSearch
,
Submit
,
Text
,
CardCheckBox
,
MultTable
,
CustomRegistryPhone
,
CustomRelevance
,
Children
,
CircleBox
,
SchemaFormButtonGroup
,
FlexBox
,
Phone
,
Select
,
SearchSelect
,
DateRangePicker
:
DatePicker
.
RangePicker
,
TableTagList
,
DateSelect
,
DateRangePickerUnix
,
NumberRange
,
VirtualChildren
,
SmilingFace
,
SliderValidate
,
RadioGroup
:
Radio
.
Group
}
const
NiceForm
:
React
.
FC
<
NiceFormProps
>
=
props
=>
{
const
{
children
,
components
,
effects
,
expressionScope
,
loading
=
false
,
...
reset
}
=
props
;
const
defineComponents
=
Object
.
assign
(
componentExport
,
components
);
return
(
<
div
style=
{
{
width
:
'100%'
,
position
:
'relative'
}
}
>
<
SchemaForm
colon=
{
false
}
components=
{
defineComponents
}
style=
{
{
opacity
:
loading
?
0
:
1
,
position
:
loading
?
'absolute'
:
'initial'
}
}
effects=
{
(
$
,
ctx
)
=>
{
// 自定义联动scope收集器
useLinkComponentProps
(
expressionScope
)
// 组件联动
effects
&&
effects
(
$
,
ctx
)
}
}
expressionScope=
{
expressionScope
}
{
...
reset
}
>
{
children
}
</
SchemaForm
>
{
loading
&&
<
Loading
/>
}
</
div
>
);
};
NiceForm
.
defaultProps
=
{};
export
default
NiceForm
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment