Skip to content

Commit 352f07c

Browse files
DovydasNavickasDovydasNavickas
committed
Initial base-dom-field and text component.
1 parent 4f1a7b4 commit 352f07c

File tree

12 files changed

+249
-39
lines changed

12 files changed

+249
-39
lines changed

‎packages/simplr-forms-dom/README.md

Whitespace-only changes.

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

Lines changed: 49 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,50 @@
1-
{
2-
"name": "simplr-validation",
3-
"version": "4.0.0-alpha",
4-
"description": "DOM components for simplr-forms.",
5-
"main": "index.js",
6-
"scripts": {
7-
"test": "echo \"Error: no test specified\" && exit 1"
8-
},
9-
"author": "simplrjs <[email protected]> (https://github.com/simplrjs)",
10-
"license": "AGPL-3.0",
11-
"devDependencies": {
12-
"@types/enzyme": "^2.7.7",
13-
"@types/jest": "^19.2.2",
14-
"@types/sinon": "^2.1.2",
15-
"enzyme": "^2.8.0",
16-
"jest": "^19.0.2",
17-
"jest-enzyme": "^3.0.0",
18-
"sinon": "^2.1.0",
19-
"ts-jest": "^19.0.8",
20-
"tslint": "^5.0.0",
21-
"typescript": "2.3.0"
22-
},
23-
"dependencies": {
24-
"@types/react": "^15.0.21",
25-
"react": "^15.5.4",
26-
"simplr-forms-core": "4.0.0-alpha"
27-
},
28-
"jest": {
29-
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
30-
"transform": {
31-
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
32-
},
33-
"testRegex": "/__tests__/.*\\.(test|spec).(ts|tsx|js)$",
34-
"moduleFileExtensions": [
35-
"ts",
36-
"tsx",
37-
"js"
38-
]
39-
}
1+
{
2+
"name": "simplr-validation",
3+
"version": "4.0.0-alpha",
4+
"description": "DOM components for simplr-forms.",
5+
"main": "dist/simplr-forms-dom.js",
6+
"types": "@types/index.d.ts",
7+
"scripts": {
8+
"build": "webpack && npm run tslint",
9+
"watch": "webpack -w",
10+
"tslint": "tslint --config ./tslint.json --project . --exclude __tests__/**/* && echo TsLint test successfully passed.",
11+
"uglifyjs": "uglifyjs ./dist/simplr-forms-core.js -o ./dist/simplr-forms-core.min.js --compress --mangle",
12+
"release": "npm run build && npm run uglifyjs",
13+
"test": "jest",
14+
"test-watch": "jest --watchAll",
15+
"test-coverage": "npm test -- --coverage"
16+
},
17+
"author": "simplrjs <[email protected]> (https://github.com/simplrjs)",
18+
"license": "AGPL-3.0",
19+
"devDependencies": {
20+
"@types/enzyme": "^2.7.7",
21+
"@types/jest": "^19.2.2",
22+
"@types/sinon": "^2.1.2",
23+
"enzyme": "^2.8.0",
24+
"jest": "^19.0.2",
25+
"jest-enzyme": "^3.0.0",
26+
"sinon": "^2.1.0",
27+
"ts-jest": "^19.0.8",
28+
"ts-loader": "^2.0.3",
29+
"tslint": "^5.0.0",
30+
"typescript": "2.3.0",
31+
"webpack": "^2.4.1"
32+
},
33+
"dependencies": {
34+
"@types/react": "^15.0.21",
35+
"react": "^15.5.4",
36+
"simplr-forms-core": "4.0.0-alpha"
37+
},
38+
"jest": {
39+
"setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
40+
"transform": {
41+
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
42+
},
43+
"testRegex": "/__tests__/.*\\.(test|spec).(ts|tsx|js)$",
44+
"moduleFileExtensions": [
45+
"ts",
46+
"tsx",
47+
"js"
48+
]
49+
}
4050
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import * as React from "react";
2+
import { Abstractions as CoreAbstractions, Contracts as CoreContracts } from "simplr-forms-core";
3+
4+
export interface BaseDomFieldState extends CoreAbstractions.BaseFieldState {
5+
6+
}
7+
8+
export abstract class BaseDomField<TProps extends CoreContracts.FieldProps, TState extends BaseDomFieldState>
9+
extends CoreAbstractions.BaseField<TProps, TState> {
10+
protected RawInitialValue: any;
11+
protected DefaultValue: any;
12+
13+
public abstract renderField(): JSX.Element | null;
14+
15+
public render() {
16+
return this.renderField();
17+
}
18+
}

‎packages/simplr-forms-dom/src/abstractions/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./base-dom-field";

‎packages/simplr-forms-dom/src/components/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./text";

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import * as React from "react";
2+
import { Contracts as CoreContracts } from "simplr-forms-core";
3+
4+
import { BaseDomField, BaseDomFieldState } from "../abstractions/base-dom-field";
5+
import { OnChangeCallback } from "../contracts/field";
6+
7+
/**
8+
* Override the differences between extended interfaces.
9+
*
10+
* @export
11+
* @interface Props
12+
* @extends {CoreContracts.FieldProps}
13+
* @extends {React.HTMLProps<HTMLInputElement>}
14+
*/
15+
export interface Props extends CoreContracts.FieldProps, React.HTMLProps<HTMLInputElement> {
16+
name: string;
17+
onFocus?: React.EventHandler<React.FocusEvent<HTMLInputElement>>;
18+
onBlur?: React.EventHandler<React.FocusEvent<HTMLInputElement>>;
19+
ref?: any;
20+
}
21+
22+
export interface TextProps extends Props {
23+
onChange?: OnChangeCallback<HTMLInputElement>;
24+
}
25+
26+
export class Text extends BaseDomField<TextProps, BaseDomFieldState> {
27+
protected GetValueFromEvent(event: React.FormEvent<HTMLInputElement>): CoreContracts.FieldValue {
28+
return event.currentTarget.value;
29+
}
30+
31+
protected OnChangeHandler: React.FormEventHandler<HTMLInputElement> = (event) => {
32+
this.OnValueChange(this.GetValueFromEvent(event));
33+
34+
const newValue = this.FormStore.GetField(this.FieldId).Value;
35+
36+
if (this.props.onChange != null) {
37+
this.props.onChange(event, newValue, this.FieldId, this.FormId);
38+
}
39+
40+
// TODO: FormProps.OnFieldChange
41+
}
42+
43+
protected get IsDisabled() {
44+
let disabled: boolean | undefined;
45+
46+
// TODO: FormProps.Disabled and FieldsGroupProps.Disabled
47+
48+
if (this.props.disabled != null) {
49+
disabled = this.props.disabled;
50+
}
51+
52+
return disabled;
53+
}
54+
55+
renderField(): JSX.Element | null {
56+
return <input
57+
type="text"
58+
name={this.FieldId}
59+
value={this.Value}
60+
onChange={this.OnChangeHandler}
61+
disabled={this.IsDisabled}
62+
/>;
63+
}
64+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Contracts as CoreContracts } from "simplr-forms-core";
2+
3+
export interface OnChangeCallback<TElement> extends React.EventHandler<React.FormEvent<TElement>> {
4+
(event: React.FormEvent<TElement> | undefined, newValue: CoreContracts.FieldValue, fieldId: string, formId: string): void;
5+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./field";

‎packages/simplr-forms-dom/src/index.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as Abstractions from "./abstractions/index";
2+
import * as Components from "./components/index";
3+
import * as Contracts from "./contracts/index";
4+
5+
export {
6+
Abstractions,
7+
Components,
8+
Contracts
9+
};

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"compilerOptions": {
3+
"module": "commonjs",
4+
"target": "es5",
5+
"removeComments": false,
6+
"outDir": "dist",
7+
"rootDir": "src",
8+
"jsx": "react",
9+
"sourceMap": false,
10+
"skipDefaultLibCheck": true,
11+
"declaration": true,
12+
"declarationDir": "@types",
13+
"pretty": true,
14+
"strict": true,
15+
"lib": [
16+
"dom",
17+
"dom.iterable",
18+
"es6"
19+
]
20+
},
21+
"exclude": [
22+
"node_modules",
23+
"dist",
24+
"@types",
25+
"__tests__"
26+
]
27+
}

0 commit comments

Comments
 (0)