Skip to content

Commit c6d1a66

Browse files
DovydasNavickasDovydasNavickas
committed
FieldTemplate implemented in BaseDomField.
1 parent a1edeef commit c6d1a66

File tree

8 files changed

+140
-58
lines changed

8 files changed

+140
-58
lines changed

‎packages/simplr-forms-dom/package.json

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "simplr-forms-dom",
3-
"version": "4.0.1-alpha",
3+
"version": "4.0.1-alpha.2",
44
"description": "DOM components for simplr-forms.",
55
"repository": "SimplrJS/simplr-forms",
66
"homepage": "https://github.com/SimplrJS/simplr-forms",
@@ -31,39 +31,37 @@
3131
],
3232
"devDependencies": {
3333
"@types/chokidar": "^1.6.0",
34-
"@types/enzyme": "^2.7.7",
35-
"@types/gulp": "^4.0.2",
36-
"@types/jest": "^19.2.2",
37-
"@types/prop-types": "^15.5.1",
38-
"@types/sinon": "^2.1.2",
34+
"@types/enzyme": "^2.8.0",
35+
"@types/gulp": "^4.0.3",
36+
"@types/jest": "^19.2.3",
37+
"@types/sinon": "^2.2.2",
3938
"@types/undertaker": "^0.12.28",
4039
"@types/vinyl-fs": "^2.4.5",
4140
"@types/webpack": "^2.2.15",
42-
"enzyme": "^2.8.0",
41+
"enzyme": "^2.8.2",
4342
"gulp": "github:gulpjs/gulp#4.0",
44-
"jest": "^20.0.1",
45-
"jest-enzyme": "^3.0.0",
43+
"jest": "^20.0.3",
44+
"jest-enzyme": "^3.1.1",
4645
"mkdirp": "^0.5.1",
4746
"mv": "^2.1.1",
4847
"mz": "^2.6.0",
49-
"on-build-webpack": "^0.1.0",
50-
"react-dom": "^15.5.4",
51-
"react-test-renderer": "^15.5.4",
5248
"simplr-mvdir": "0.0.1-beta.7",
53-
"sinon": "^2.1.0",
54-
"ts-jest": "^20.0.3",
55-
"ts-loader": "^2.0.3",
56-
"tslint": "^5.0.0",
49+
"sinon": "^2.2.0",
50+
"ts-jest": "^20.0.4",
51+
"ts-loader": "^2.1.0",
52+
"tslint": "^5.2.0",
5753
"typescript": "2.3.2",
58-
"webpack": "^2.4.1"
54+
"webpack": "^2.5.1"
5955
},
6056
"dependencies": {
61-
"@types/react": "^15.0.21",
57+
"@types/react": "^15.0.24",
58+
"@types/prop-types": "^15.5.1",
6259
"immutable": "^3.8.1",
63-
"prop-types": "^15.5.8",
60+
"simplr-forms": "^4.0.1-alpha.2",
61+
"typed-immutable-record": "0.0.6",
6462
"react": "^15.5.4",
65-
"simplr-forms": "^4.0.1-alpha",
66-
"typed-immutable-record": "0.0.6"
63+
"react-dom": "^15.5.4",
64+
"prop-types": "^15.5.8"
6765
},
6866
"jest": {
6967
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",

‎packages/simplr-forms-dom/src/abstractions/base-dom-field.tsx

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
import { BaseField, BaseFieldState } from "simplr-forms";
22
import { FieldProps } from "simplr-forms/contracts";
3+
import {
4+
DomFieldProps,
5+
DomFieldTemplateCallback,
6+
DomComponentData,
7+
DomFieldDetails
8+
} from "../contracts/field";
9+
import { FormProps } from "../contracts/form";
10+
311

412
export interface BaseDomFieldState extends BaseFieldState {
513

614
}
715

8-
export abstract class BaseDomField<TProps extends FieldProps, TState extends BaseDomFieldState>
16+
export abstract class BaseDomField<TProps extends DomFieldProps, TState extends BaseDomFieldState>
917
extends BaseField<TProps, TState> {
1018
protected OnFocus = (event: React.FocusEvent<HTMLInputElement>): void => {
1119
const props = this.props as FieldProps;
@@ -25,10 +33,34 @@ export abstract class BaseDomField<TProps extends FieldProps, TState extends Bas
2533
this.Blur();
2634
}
2735

36+
protected get FieldTemplate(): DomFieldTemplateCallback | undefined {
37+
const formProps = this.FormStore.GetState().Form.Props as FormProps;
38+
if (formProps.template) {
39+
return formProps.template;
40+
}
41+
42+
if (this.props.template != null) {
43+
return this.props.template;
44+
}
45+
}
46+
2847
public abstract renderField(): JSX.Element | null;
2948

3049
public render(): JSX.Element | null {
31-
// TODO: FieldTemplate
32-
return this.renderField();
50+
if (this.FieldTemplate == null) {
51+
return this.renderField();
52+
}
53+
return this.FieldTemplate(
54+
this.renderField.bind(this),
55+
{
56+
name: this.Name,
57+
fieldGroupId: this.FieldsGroupId,
58+
id: this.FieldId
59+
} as DomFieldDetails,
60+
this.FormStore,
61+
{
62+
props: this.props,
63+
state: this.FieldState
64+
} as DomComponentData);
3365
}
3466
}

‎packages/simplr-forms-dom/src/abstractions/base-form-button.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,14 @@ export abstract class BaseFormButton<TProps extends BaseFormButtonProps, TState
110110
}
111111

112112
protected get ClassName(): string | undefined {
113+
let className = "";
114+
if (this.props.className != null) {
115+
className += `${this.props.className} `;
116+
}
113117
if (this.Busy) {
114-
return `${this.props.busyClassName} ${this.props.className}`;
118+
className += this.props.busyClassName;
115119
}
116-
return this.props.className;
120+
return className.length > 0 ? className : undefined;
117121
}
118122

119123
abstract render(): JSX.Element | null;

‎packages/simplr-forms-dom/src/components/text.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from "react";
2-
import { FieldProps, FieldValue } from "simplr-forms/contracts";
2+
import { FieldValue } from "simplr-forms/contracts";
3+
import { DomFieldProps } from "../contracts/field";
34

45
import { BaseDomField, BaseDomFieldState } from "../abstractions/base-dom-field";
56
import { FieldOnChangeCallback } from "../contracts/field";
@@ -12,7 +13,7 @@ import { FieldOnChangeCallback } from "../contracts/field";
1213
* @extends {CoreContracts.FieldProps}
1314
* @extends {React.HTMLProps<HTMLInputElement>}
1415
*/
15-
export interface TextProps extends FieldProps, React.HTMLProps<HTMLInputElement> {
16+
export interface TextProps extends DomFieldProps, React.HTMLProps<HTMLInputElement> {
1617
name: string;
1718
onFocus?: React.EventHandler<React.FocusEvent<HTMLInputElement>>;
1819
onBlur?: React.EventHandler<React.FocusEvent<HTMLInputElement>>;

‎packages/simplr-forms-dom/src/contracts/field.ts

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,35 @@
11
import * as React from "react";
2-
import { FieldValue } from "simplr-forms/contracts";
2+
import {
3+
FieldValue,
4+
FieldProps,
5+
FieldStoreState
6+
} from "simplr-forms/contracts";
7+
import { FormStore } from "simplr-forms/stores";
38

49
export interface FieldOnChangeCallback<TElement> extends React.EventHandler<React.FormEvent<TElement>> {
510
(event: React.FormEvent<TElement> | undefined, newValue: FieldValue, fieldId: string, formId: string): void;
611
}
12+
13+
export interface DomFieldProps extends FieldProps {
14+
template?: DomFieldTemplateCallback;
15+
}
16+
17+
export interface DomFieldDetails {
18+
id: string;
19+
name: string;
20+
fieldGroupId: string;
21+
}
22+
23+
export interface DomComponentData {
24+
props: FieldProps;
25+
state: FieldStoreState;
26+
}
27+
28+
export interface DomFieldTemplateCallback {
29+
(
30+
renderField: () => JSX.Element | null,
31+
fieldDetails: DomFieldDetails,
32+
store: FormStore,
33+
componentData: DomComponentData
34+
): JSX.Element | null;
35+
}

‎packages/simplr-forms-dom/src/contracts/form.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ import * as React from "react";
22
import { FormError } from "simplr-forms/contracts";
33
import { FormProps as CoreFormProps } from "simplr-forms/contracts";
44
import { FormStore } from "simplr-forms/stores";
5-
import { FieldOnChangeCallback } from "../contracts/field";
5+
import {
6+
FieldOnChangeCallback,
7+
DomFieldTemplateCallback
8+
} from "../contracts/field";
69

710
export interface FormOnSubmitCallback extends React.FormEventHandler<HTMLFormElement> {
811
(event: React.FormEvent<HTMLFormElement>, store: FormStore): void | Promise<never> | FormError | string;
@@ -12,6 +15,7 @@ export interface FormProps extends CoreFormProps, React.HTMLProps<HTMLFormElemen
1215
onSubmit?: FormOnSubmitCallback;
1316
onChange?: FieldOnChangeCallback<any>;
1417
preventSubmitDefaultAndPropagation?: boolean;
18+
template?: DomFieldTemplateCallback;
1519
// tslint:disable-next-line:max-line-length
1620
// More properties at:
1721
// https://quatrodev.visualstudio.com/Simplr%20Frontend/_git/simplr-forms?path=%2Fsrc%2Fcontracts%2Fform-contracts.ts&version=GBdev&_a=contents

‎packages/simplr-forms/package.json

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "simplr-forms",
3-
"version": "4.0.1-alpha",
3+
"version": "4.0.1-alpha.2",
44
"description": "Shared simplr-forms logic.",
55
"repository": "SimplrJS/simplr-forms",
66
"homepage": "https://github.com/SimplrJS/simplr-forms",
@@ -30,42 +30,41 @@
3030
],
3131
"devDependencies": {
3232
"@types/chokidar": "^1.6.0",
33-
"@types/enzyme": "^2.7.9",
34-
"@types/gulp": "^4.0.2",
35-
"@types/jest": "^19.2.2",
36-
"@types/sinon": "^2.1.2",
33+
"@types/enzyme": "^2.8.0",
34+
"@types/gulp": "^4.0.3",
35+
"@types/jest": "^19.2.3",
36+
"@types/sinon": "^2.2.2",
3737
"@types/undertaker": "^0.12.28",
3838
"@types/vinyl-fs": "^2.4.5",
3939
"@types/webpack": "^2.2.15",
4040
"enzyme": "^2.8.2",
4141
"gulp": "github:gulpjs/gulp#4.0",
42-
"jest": "^19.0.2",
43-
"jest-enzyme": "^3.0.1",
42+
"jest": "^20.0.3",
43+
"jest-enzyme": "^3.1.1",
4444
"on-build-webpack": "^0.1.0",
45-
"react-dom": "^15.5.4",
4645
"react-test-renderer": "^15.5.4",
4746
"simplr-mvdir": "0.0.1-beta.7",
48-
"sinon": "^2.1.0",
49-
"ts-jest": "^19.0.10",
50-
"ts-loader": "^2.0.3",
51-
"tslint": "^5.1.0",
52-
"typescript": "2.3.0",
53-
"uglify-js": "^2.8.22",
54-
"webpack": "^2.4.1"
47+
"sinon": "^2.2.0",
48+
"ts-jest": "^20.0.4",
49+
"ts-loader": "^2.1.0",
50+
"tslint": "^5.2.0",
51+
"typescript": "^2.3.2",
52+
"uglify-js": "^3.0.10",
53+
"webpack": "^2.5.1"
5554
},
5655
"dependencies": {
57-
"@types/fbemitter": "^2.0.32",
58-
"@types/flux": "^3.0.1",
59-
"@types/prop-types": "^15.5.1",
60-
"@types/react": "^15.0.22",
61-
"@types/react-dom": "^15.5.0",
6256
"action-emitter": "^0.2.1",
6357
"fbemitter": "^2.1.1",
6458
"immutable": "^3.8.1",
65-
"prop-types": "^15.5.8",
59+
"typed-immutable-record": "^0.0.6",
6660
"react": "15.5.4",
6761
"react-dom": "^15.5.4",
68-
"typed-immutable-record": "^0.0.6"
62+
"prop-types": "^15.5.8",
63+
"@types/fbemitter": "^2.0.32",
64+
"@types/flux": "^3.0.1",
65+
"@types/prop-types": "^15.5.1",
66+
"@types/react": "^15.0.22",
67+
"@types/react-dom": "^15.5.0"
6968
},
7069
"jest": {
7170
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",

‎packages/simplr-forms/src/abstractions/core-field.ts

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from "react";
2-
import * as actionEmitter from "action-emitter";
2+
import * as ActionEmitter from "action-emitter";
33
import * as PropTypes from "prop-types";
44

55
import {
@@ -8,10 +8,14 @@ import {
88
FieldFormatValueCallback,
99
FieldNormalizeValueCallback,
1010
FieldParseValueCallback,
11-
FieldContext
11+
FieldContext,
12+
FieldStoreState
1213
} from "../contracts/field";
1314
import * as ValueHelpers from "../utils/value-helpers";
14-
import { FormContextPropsObject } from "../contracts/form";
15+
import {
16+
FormContextPropsObject,
17+
FormStateProps
18+
} from "../contracts/form";
1519
import { FormStore } from "../stores/form-store";
1620
import * as FormStoreActions from "../actions/form-store";
1721
// import { FieldsGroupContextProps } from "../contracts/fields-group";
@@ -58,7 +62,15 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
5862
return this.context.FieldsGroupId;
5963
}
6064

61-
protected StoreEventSubscription: actionEmitter.EventSubscription;
65+
protected get FieldState(): FieldStoreState {
66+
return this.FormStore.GetState().Fields.get(this.FieldId);
67+
}
68+
69+
protected get Name(): string {
70+
return this.FieldState.Name;
71+
}
72+
73+
protected StoreEventSubscription: ActionEmitter.EventSubscription;
6274

6375
componentWillMount(): void {
6476
// props.name MUST have a proper value
@@ -181,9 +193,12 @@ export abstract class CoreField<TProps extends CoreFieldProps, TState extends Co
181193
if (isStateDifferent) {
182194
this.setState((state: TState) => {
183195
if (state == null) {
184-
state = {} as any;
196+
state = {
197+
FormStoreState: newFormStoreState
198+
} as TState;
199+
} else {
200+
state.FormStoreState = newFormStoreState;
185201
}
186-
state.FormStoreState = newFormStoreState;
187202
const newFieldState = this.FormStore.GetField(this.FieldId);
188203
state.Value = this.ProcessValueFromStore(newFieldState.Value);
189204
return state;

0 commit comments

Comments
 (0)