Skip to content
This repository was archived by the owner on Jun 27, 2023. It is now read-only.

Commit 5643ffd

Browse files
alvarosabualvarosabu
committed
Merge branch 'feature/factory-functions-evan' into feature/factory-functions-for-typed-form-fields-next
2 parents ed2d173 + b357360 commit 5643ffd

File tree

5 files changed

+151
-149
lines changed

5 files changed

+151
-149
lines changed

‎dev/typescript/App.vue‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,19 +49,9 @@
4949
import { mockAsync } from '@/core/utils/helpers';
5050
import { defineComponent, onMounted, reactive, ref } from 'vue';
5151
import {
52-
TextInput,
53-
SelectInput,
54-
EmailInput,
5552
FormValidation,
56-
PasswordInput,
57-
CheckboxInput,
58-
RadioInput,
5953
email,
6054
pattern,
61-
ColorInput,
62-
NumberInput,
63-
CustomInput,
64-
BindingObject,
6555
TextField,
6656
SelectField,
6757
EmailField,

‎src/core/factories.ts‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import {
2+
InputBase,
3+
TextInput,
4+
FieldTypes,
5+
EmailInput,
6+
PasswordInput,
7+
CheckboxInput,
8+
ColorInput,
9+
RadioInput,
10+
NumberInput,
11+
SelectInput,
12+
CustomInput,
13+
} from './models';
14+
15+
export const FieldBase = ({
16+
validations = [],
17+
label = null,
18+
ariaLabel = null,
19+
ariaLabelledBy = null,
20+
customClass = null,
21+
customStyles = null,
22+
disabled = false,
23+
placeholder = null,
24+
required = false,
25+
autocomplete = null,
26+
readonly = false,
27+
}: InputBase): InputBase =>
28+
({
29+
validations,
30+
label,
31+
ariaLabel,
32+
ariaLabelledBy,
33+
customClass,
34+
customStyles,
35+
disabled,
36+
placeholder,
37+
required,
38+
autocomplete,
39+
readonly,
40+
} as InputBase);
41+
42+
export const TextField = ({
43+
value,
44+
...rest
45+
}: Partial<TextInput>): TextInput => ({
46+
...FieldBase(rest),
47+
value,
48+
type: FieldTypes.TEXT,
49+
});
50+
51+
export const EmailField = ({
52+
value,
53+
...rest
54+
}: Partial<EmailInput>): EmailInput => ({
55+
...FieldBase(rest),
56+
value,
57+
type: FieldTypes.EMAIL,
58+
});
59+
60+
export const PasswordField = ({
61+
value,
62+
...rest
63+
}: Partial<PasswordInput>): PasswordInput => ({
64+
...FieldBase(rest),
65+
value,
66+
type: FieldTypes.PASSWORD,
67+
});
68+
69+
export const CheckboxField = ({
70+
value,
71+
...rest
72+
}: Partial<CheckboxInput>): CheckboxInput => ({
73+
...FieldBase(rest),
74+
value,
75+
type: FieldTypes.CHECKBOX,
76+
});
77+
78+
export const ColorField = ({
79+
value,
80+
...rest
81+
}: Partial<ColorInput>): ColorInput => ({
82+
...FieldBase(rest),
83+
value,
84+
type: FieldTypes.COLOR,
85+
});
86+
87+
export const RadioField = ({
88+
options,
89+
value,
90+
...rest
91+
}: Partial<RadioInput>): RadioInput => ({
92+
...FieldBase(rest),
93+
value,
94+
options,
95+
type: FieldTypes.RADIO,
96+
});
97+
98+
export const NumberField = ({
99+
value = null,
100+
min = 0,
101+
max = 100,
102+
step = 1,
103+
...rest
104+
}: Partial<NumberInput>): NumberInput => ({
105+
...FieldBase(rest),
106+
value,
107+
min,
108+
max,
109+
step,
110+
type: FieldTypes.NUMBER,
111+
});
112+
113+
export const SelectField = ({
114+
options = [],
115+
value,
116+
...rest
117+
}: Partial<SelectInput>): SelectInput => ({
118+
...FieldBase(rest),
119+
value,
120+
options,
121+
type: FieldTypes.SELECT,
122+
});
123+
124+
export const CustomField = ({
125+
value,
126+
...rest
127+
}: Partial<CustomInput>): CustomInput => ({
128+
...FieldBase(rest),
129+
value,
130+
type: FieldTypes.CUSTOM,
131+
});

‎src/core/models.ts‎

Lines changed: 0 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -140,123 +140,3 @@ export const enum FieldTypes {
140140
CUSTOM = 'custom-field',
141141
COLOR = 'color',
142142
}
143-
144-
// Factory Functions
145-
146-
export const FieldBase = ({
147-
validations = [],
148-
label = null,
149-
ariaLabel = null,
150-
ariaLabelledBy = null,
151-
customClass = null,
152-
customStyles = null,
153-
disabled = false,
154-
placeholder = null,
155-
required = false,
156-
autocomplete = null,
157-
readonly = false,
158-
}: InputBase): InputBase =>
159-
({
160-
validations,
161-
label,
162-
ariaLabel,
163-
ariaLabelledBy,
164-
customClass,
165-
customStyles,
166-
disabled,
167-
placeholder,
168-
required,
169-
autocomplete,
170-
readonly,
171-
} as InputBase);
172-
173-
export const TextField = ({
174-
value,
175-
...rest
176-
}: Partial<TextInput>): TextInput => ({
177-
...FieldBase(rest),
178-
value,
179-
type: FieldTypes.TEXT,
180-
});
181-
182-
export const EmailField = ({
183-
value,
184-
...rest
185-
}: Partial<EmailInput>): EmailInput => ({
186-
...FieldBase(rest),
187-
value,
188-
type: FieldTypes.EMAIL,
189-
});
190-
191-
export const PasswordField = ({
192-
value,
193-
...rest
194-
}: Partial<PasswordInput>): PasswordInput => ({
195-
...FieldBase(rest),
196-
value,
197-
type: FieldTypes.PASSWORD,
198-
});
199-
200-
export const CheckboxField = ({
201-
value,
202-
...rest
203-
}: Partial<CheckboxInput>): CheckboxInput => ({
204-
...FieldBase(rest),
205-
value,
206-
type: FieldTypes.CHECKBOX,
207-
});
208-
209-
export const ColorField = ({
210-
value,
211-
...rest
212-
}: Partial<ColorInput>): ColorInput => ({
213-
...FieldBase(rest),
214-
value,
215-
type: FieldTypes.COLOR,
216-
});
217-
218-
export const RadioField = ({
219-
options,
220-
value,
221-
...rest
222-
}: Partial<RadioInput>): RadioInput => ({
223-
...FieldBase(rest),
224-
value,
225-
options,
226-
type: FieldTypes.RADIO,
227-
});
228-
229-
export const NumberField = ({
230-
value = null,
231-
min = 0,
232-
max = 100,
233-
step = 1,
234-
...rest
235-
}: Partial<NumberInput>): NumberInput => ({
236-
...FieldBase(rest),
237-
value,
238-
min,
239-
max,
240-
step,
241-
type: FieldTypes.NUMBER,
242-
});
243-
244-
export const SelectField = ({
245-
options = [],
246-
value,
247-
...rest
248-
}: Partial<SelectInput>): SelectInput => ({
249-
...FieldBase(rest),
250-
value,
251-
options,
252-
type: FieldTypes.SELECT,
253-
});
254-
255-
export const CustomField = ({
256-
value,
257-
...rest
258-
}: Partial<CustomInput>): CustomInput => ({
259-
...FieldBase(rest),
260-
value,
261-
type: FieldTypes.CUSTOM,
262-
});

‎src/core/utils/validators.ts‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -71,36 +71,36 @@ export const minLength = (minLength: number) => (
7171
export const maxLength = (maxLength: number) => (
7272
control: FormControl<InputType>,
7373
): ValidationErrors | null => {
74+
if (isEmptyInputValue(control.value)) {
75+
return null; // don't validate empty values to allow optional controls
76+
}
7477
const length = control.value ? `${control.value}`.length : 0;
7578
return length > maxLength
7679
? { maxlength: { requiredLength: maxLength, actualLength: length } }
7780
: null;
7881
};
7982

80-
export const pattern = (pattern: string): ValidationErrors | null => {
81-
if (!pattern) return null;
82-
let regex: RegExp;
83+
export const pattern = (pattern: string) => (
84+
control: FormControl<InputType>,
85+
): ValidationErrors | null => {
86+
if (isEmptyInputValue(control.value)) {
87+
return null; // don't validate empty values to allow optional controls
88+
}
89+
8390
let regexStr: string | RegExp;
84-
if (typeof pattern === 'string') {
85-
regexStr = '';
91+
regexStr = '';
8692

87-
if (pattern.charAt(0) !== '^') regexStr += '^';
93+
if (pattern.charAt(0) !== '^') regexStr += '^';
8894

89-
regexStr += pattern;
95+
regexStr += pattern;
9096

91-
if (pattern.charAt(pattern.length - 1) !== '$') regexStr += '$';
97+
if (pattern.charAt(pattern.length - 1) !== '$') regexStr += '$';
9298

93-
regex = new RegExp(regexStr);
94-
}
95-
return (control: FormControl<InputType>) => {
96-
if (isEmptyInputValue(control.value)) {
97-
return null; // don't validate empty values to allow optional controls
98-
}
99-
const value = `${control.value}`;
100-
return regex.test(value)
101-
? null
102-
: { pattern: { requiredPattern: regexStr, actualValue: value } };
103-
};
99+
const regex = new RegExp(regexStr);
100+
const value = `${control.value}`;
101+
return regex.test(value)
102+
? { pattern: { requiredPattern: regexStr, actualValue: value } }
103+
: null;
104104
};
105105

106106
export default {

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './useApi';
22
export * from './dynamicForms';
33
export * from './core/models';
4+
export * from './core/factories';
45
export * from './core/utils';

0 commit comments

Comments
 (0)