-
Notifications
You must be signed in to change notification settings - Fork 583
/
pattern.js
77 lines (72 loc) · 3.15 KB
/
pattern.js
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
import React from "react";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Input } from "@webiny/ui/Input";
import { Select } from "@webiny/ui/Select";
import { getPlugins } from "@webiny/plugins";
import { validation } from "@webiny/validation";
export default {
type: "form-editor-field-validator",
name: "form-editor-field-validator-pattern",
validator: {
name: "pattern",
label: "Pattern",
description: "Entered value must match a specific pattern.",
defaultMessage: "Invalid value.",
defaultSettings: {
preset: "custom"
},
renderSettings({ Bind, setValue, setMessage, data }) {
const inputsDisabled = data.settings.preset !== "custom";
const presetPlugins = getPlugins("form-editor-field-validator-pattern");
return (
<Grid>
<Cell span={3}>
<Bind
name={"settings.preset"}
validators={validation.create("required")}
afterChange={value => {
if (value === "custom") {
setMessage("Invalid value.");
return;
}
setValue("settings.regex", null);
setValue("settings.flags", null);
const selectedPatternPlugin = presetPlugins.find(
item => item.pattern.name === value
);
setMessage(selectedPatternPlugin.pattern.message);
}}
>
<Select label={"Preset"}>
<option value={"custom"}>Custom</option>
{presetPlugins.map(item => (
<option key={item.pattern.name} value={item.pattern.name}>
{item.pattern.label}
</option>
))}
</Select>
</Bind>
</Cell>
<Cell span={7}>
<Bind name={"settings.regex"} validators={validation.create("required")}>
<Input
disabled={inputsDisabled}
label={"Regex"}
description={"Regex to test the value"}
/>
</Bind>
</Cell>
<Cell span={2}>
<Bind name={"settings.flags"} validators={validation.create("required")}>
<Input
disabled={inputsDisabled}
label={"Flags"}
description={"Regex flags"}
/>
</Bind>
</Cell>
</Grid>
);
}
}
};