Skip to content

Commit

Permalink
feat(setters): add ValidatorSetter (#1885)
Browse files Browse the repository at this point in the history
  • Loading branch information
janryWang authored Jul 27, 2021
1 parent a403cd3 commit 4e2203e
Show file tree
Hide file tree
Showing 32 changed files with 471 additions and 115 deletions.
8 changes: 4 additions & 4 deletions designable/antd/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"start": "webpack-dev-server --config playground/webpack.dev.ts"
},
"devDependencies": {
"@designable/react-settings-form": "^0.4.11",
"@designable/react-settings-form": "^0.4.16",
"autoprefixer": "^9.0",
"file-loader": "^5.0.2",
"fs-extra": "^8.1.0",
Expand All @@ -56,9 +56,9 @@
"react-is": ">=16.8.0 || >=17.0.0"
},
"dependencies": {
"@designable/core": "^0.4.11",
"@designable/formily": "^0.4.11",
"@designable/react": "^0.4.11",
"@designable/core": "^0.4.16",
"@designable/formily": "^0.4.16",
"@designable/react": "^0.4.16",
"@formily/antd": "2.0.0-beta.82",
"@formily/core": "2.0.0-beta.82",
"@formily/designable-setters": "2.0.0-beta.82",
Expand Down
6 changes: 3 additions & 3 deletions designable/antd/playground/template.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div id="root">
</div>
<script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/antd/dist/antd-with-locales.min.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/antd/dist/antd-with-locales.js"></script>
</body>
4 changes: 2 additions & 2 deletions designable/antd/playground/widgets/ActionsWidget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ export const ActionsWidget = observer(() => (
value={GlobalRegistry.getDesignerLanguage()}
optionType="button"
options={[
{ label: 'Engligh', value: 'en-US' },
{ label: '简体中文', value: 'zh-CN' },
{ label: 'Engligh', value: 'en-us' },
{ label: '简体中文', value: 'zh-cn' },
]}
onChange={(e) => {
GlobalRegistry.setDesignerLanguage(e.target.value)
Expand Down
10 changes: 7 additions & 3 deletions designable/antd/src/components/DesignableField/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@ import {
Schema,
ISchema,
} from '@formily/react'
import { DataSourceSetter, ReactionsSetter } from '@formily/designable-setters'
import {
DataSourceSetter,
ReactionsSetter,
ValidatorSetter,
} from '@formily/designable-setters'
import { FormTab } from '@formily/antd'
import { clone } from '@formily/shared'
import { FormItemSwitcher } from '../FormItemSwitcher'
Expand Down Expand Up @@ -182,8 +186,8 @@ export const createDesignableField = (options: IDesignableFieldProps) => {
'x-index': 6,
},
'x-validator': {
'x-decorator': 'FormItem',
// 'x-component': 'ValidatorSetter',
type: 'array',
'x-component': ValidatorSetter,
'x-index': 8,
},
required: {
Expand Down
8 changes: 4 additions & 4 deletions designable/setters/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,10 @@
"react-is": ">=16.8.0 || >=17.0.0"
},
"dependencies": {
"@designable/core": "^0.4.11",
"@designable/formily": "^0.4.11",
"@designable/react": "^0.4.11",
"@designable/react-settings-form": "^0.4.11",
"@designable/core": "^0.4.16",
"@designable/formily": "^0.4.16",
"@designable/react": "^0.4.16",
"@designable/react-settings-form": "^0.4.16",
"@formily/antd": "2.0.0-beta.82",
"@formily/core": "2.0.0-beta.82",
"@formily/react": "2.0.0-beta.82",
Expand Down
158 changes: 158 additions & 0 deletions designable/setters/src/components/ValidatorSetter/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
import React from 'react'
import { ArrayField } from '@formily/core'
import {
observer,
useField,
SchemaContext,
Schema,
ISchema,
} from '@formily/react'
import { GlobalRegistry } from '@designable/core'
import { ArrayItems } from '@formily/antd'
import { FoldItem } from '@designable/react-settings-form'
import { Select } from 'antd'

export interface IValidatorSetterProps {
value?: any
onChange?: (value: any) => void
}

const ValidatorSchema: ISchema = {
type: 'array',
items: {
type: 'object',
'x-decorator': 'ArrayItems.Item',
'x-decorator-props': {
style: {
alignItems: 'center',
borderRadius: 3,
paddingTop: 6,
paddingBottom: 6,
},
},
properties: {
sortable: {
type: 'void',
'x-component': 'ArrayItems.SortHandle',
'x-component-props': { style: { marginRight: 10 } },
},
drawer: {
type: 'void',
'x-component': 'DrawerSetter',
properties: {
triggerType: {
type: 'string',
enum: ['onInput', 'onFocus', 'onBlur'],
'x-decorator': 'FormItem',
'x-component': 'Select',
},
validator: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'ValueInput',
'x-component-props': {
include: ['EXPRESSION'],
},
},
message: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input.TextArea',
},
format: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Select',
},
pattern: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {
prefix: '/',
suffix: '/',
},
},
len: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'NumberPicker',
},
max: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'NumberPicker',
},
min: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'NumberPicker',
},
exclusiveMaximum: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'NumberPicker',
},
exclusiveMinimum: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'NumberPicker',
},
whitespace: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Switch',
},
required: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Switch',
},
},
},
remove: {
type: 'void',
'x-component': 'ArrayItems.Remove',
'x-component-props': { style: { marginLeft: 10 } },
},
},
},
properties: {
addValidatorRules: {
type: 'void',
'x-component': 'ArrayItems.Addition',
'x-component-props': {
style: {
marginBottom: 10,
},
},
},
},
}

export const ValidatorSetter: React.FC<IValidatorSetterProps> = observer(
(props) => {
const field = useField<ArrayField>()
return (
<FoldItem label={field.title}>
<FoldItem.Base>
<Select
value={Array.isArray(props.value) ? undefined : props.value}
onChange={props.onChange}
placeholder={GlobalRegistry.getDesignerMessage(
'SettingComponents.ValidatorSetter.pleaseSelect'
)}
options={GlobalRegistry.getDesignerMessage(
'SettingComponents.ValidatorSetter.formats'
)}
/>
</FoldItem.Base>
<FoldItem.Extra>
<SchemaContext.Provider value={new Schema(ValidatorSchema)}>
<ArrayItems />
</SchemaContext.Provider>
</FoldItem.Extra>
</FoldItem>
)
}
)
1 change: 1 addition & 0 deletions designable/setters/src/components/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export * from './DataSourceSetter'
export * from './ReactionsSetter'
export * from './ValidatorSetter'
54 changes: 54 additions & 0 deletions designable/setters/src/locales/en-US.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,55 @@
const ValidatorFormats = [
{ label: 'URL', value: 'url' },
{ label: 'Email', value: 'email' },
{ label: 'IPV6', value: 'ipv6' },
{ label: 'IPV4', value: 'ipv4' },
{ label: 'Number', value: 'number' },
{ label: 'Integer', value: 'integer' },
{ label: 'ID', value: 'idcard' },
{ label: 'QQ', value: 'qq' },
{ label: 'Phone Number', value: 'phone' },
{ label: 'Currency', value: 'money' },
{ label: 'Chinese', value: 'zh' },
{ label: 'Date', value: 'date' },
{ label: 'Zip', value: 'zip' },
]

export default {
'en-US': {
settings: {
'x-validator': {
title: 'Validator',
addValidatorRules: 'Add Validator Rules',
drawer: 'Edit Rules',
triggerType: {
title: 'Trigger Type',
placeholder: 'Please Select',
dataSource: ['onInput', 'onFocus', 'onBlur'],
},
format: {
title: 'Format',
placeholder: 'Please Select',
dataSource: ValidatorFormats,
},
validator: {
title: 'Custom Validator',
tooltip: 'Format: function (value){ return "Error Message"}',
},
pattern: 'RegExp',
len: 'Length Limit',
max: 'Length/Value Lt',
min: 'Length/Value Gt',
exclusiveMaximum: 'Length/Value Lte',
exclusiveMinimum: 'Length/Value Gte',
whitespace: 'No Whitespace',
required: 'Required',
message: {
title: 'Error Message',
tooltip:
'The error message is only effective for one built-in rule of the current rule set. If you need to customize the error message for different built-in rules, please split into multiple rules',
},
},
},
SettingComponents: {
DataSourceSetter: {
nodeProperty: 'Node Property',
Expand Down Expand Up @@ -46,6 +96,10 @@ export default {
pleaseSelect: 'Please Select',
expressionValueTypeIs: 'Expression value type is',
},
ValidatorSetter: {
pleaseSelect: 'Please Select',
formats: ValidatorFormats,
},
},
},
}
54 changes: 54 additions & 0 deletions designable/setters/src/locales/zh-CN.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,55 @@
const ValidatorFormats = [
{ label: 'URL地址', value: 'url' },
{ label: '邮箱格式', value: 'email' },
{ label: 'IPV6格式', value: 'ipv6' },
{ label: 'IPV4格式', value: 'ipv4' },
{ label: '数字格式', value: 'number' },
{ label: '整数格式', value: 'integer' },
{ label: '身份证格式', value: 'idcard' },
{ label: 'QQ号格式', value: 'qq' },
{ label: '手机号格式', value: 'phone' },
{ label: '货币格式', value: 'money' },
{ label: '中文格式', value: 'zh' },
{ label: '日期格式', value: 'date' },
{ label: '邮编格式', value: 'zip' },
]

export default {
'zh-CN': {
settings: {
'x-validator': {
title: '校验规则',
addValidatorRules: '添加校验规则',
drawer: '配置规则',
triggerType: {
title: '触发类型',
placeholder: '请选择',
dataSource: ['输入时', '聚焦时', '失焦时'],
},
format: {
title: '格式校验',
placeholder: '请选择',
dataSource: ValidatorFormats,
},
validator: {
title: '自定义校验器',
tooltip: '格式: function (value){ return "Error Message"}',
},
pattern: '正则表达式',
len: '长度限制',
max: '长度/数值小于',
min: '长度/数值大于',
exclusiveMaximum: '长度/数值小于等于',
exclusiveMinimum: '长度/数值大于等于',
whitespace: '不允许空白符',
required: '是否必填',
message: {
title: '错误消息',
tooltip:
'错误消息只对当前规则集的一个内置规则生效,如果需要对不同内置规则定制错误消息,请拆分成多条规则',
},
},
},
SettingComponents: {
DataSourceSetter: {
nodeProperty: '节点属性',
Expand Down Expand Up @@ -44,6 +94,10 @@ export default {
pleaseSelect: '请选择',
expressionValueTypeIs: '表达式值类型为',
},
ValidatorSetter: {
pleaseSelect: '请选择',
formats: ValidatorFormats,
},
},
},
}
4 changes: 2 additions & 2 deletions packages/antd/docs/components/FormDialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -309,9 +309,9 @@ interface IFormDialog {

interface FormDialog {
(title: ModalProps, id: string, renderer: FormDialogRenderer): IFormDialog
(title: ModalProps, id: FormDialogRenderer, renderer: unknown): IFormDialog
(title: ModalProps, renderer: FormDialogRenderer): IFormDialog
(title: ModalTitle, id: string, renderer: FormDialogRenderer): IFormDialog
(title: ModalTitle, id: FormDialogRenderer, renderer: unknown): IFormDialog
(title: ModalTitle, renderer: FormDialogRenderer): IFormDialog
}
```

Expand Down
Loading

0 comments on commit 4e2203e

Please sign in to comment.