├── .editorconfig
├── .gitignore
├── .husky
    └── pre-commit
├── .prettierignore
├── .yarnrc.yml
├── CHANGES.md
├── CREDITS.md
├── LICENSE
├── README.md
├── demo
    ├── component.tsx
    ├── div.html
    ├── index.tsx
    └── tsconfig.json
├── eslint.config.mjs
├── package.json
├── src
    ├── accessor-base.ts
    ├── accessor.ts
    ├── backend.ts
    ├── changeTracker.ts
    ├── controlled.ts
    ├── converter.ts
    ├── converters.ts
    ├── decimal-type.ts
    ├── decimalParser.ts
    ├── dynamic-converter.ts
    ├── field-accessor.ts
    ├── form-accessor-base.ts
    ├── form.ts
    ├── group-accessor.ts
    ├── index.ts
    ├── interfaces.ts
    ├── references.ts
    ├── repeating-form-accessor.ts
    ├── repeating-form-indexed-accessor.ts
    ├── source.ts
    ├── state.ts
    ├── sub-form-accessor.ts
    ├── utils.ts
    ├── validate-options.ts
    ├── validation-props.ts
    └── validationMessages.ts
├── test
    ├── accessor.test.ts
    ├── backend.test.ts
    ├── changeTracker.test.ts
    ├── changehook.test.ts
    ├── context.test.ts
    ├── controlled.test.ts
    ├── converter.test.ts
    ├── converters.test.ts
    ├── decimal-type.test.ts
    ├── decimalParser.test.ts
    ├── derived.test.ts
    ├── dynamic.test.ts
    ├── fieldref.test.ts
    ├── form.test.ts
    ├── groups.test.ts
    ├── ignore.test.ts
    ├── multiple-conversion-errors.test.ts
    ├── navigate.test.ts
    ├── save.test.ts
    ├── source.test.ts
    ├── subform.test.ts
    ├── utils.ts
    ├── viewhook.test.ts
    └── warning.test.ts
├── tsconfig.json
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 4
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.{js,jsx,ts,tsx}]
12 | indent_size = 2
13 | 
14 | [*.yml]
15 | indent_size = 2
16 | 
17 | [**.min.js]
18 | indent_style = ignore
19 | insert_final_newline = ignore
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | *.log
 3 | lib
 4 | dist
 5 | test-lib/**/*.js
 6 | coverage
 7 | .nyc_output
 8 | .idea
 9 | package-lock.json
10 | .vscode
11 | .DS_STORE
12 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | yarn lint-staged
5 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | package.json
2 | 
3 | 


--------------------------------------------------------------------------------
/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | enableImmutableInstalls: false
2 | nodeLinker: node-modules
3 | 


--------------------------------------------------------------------------------
/CREDITS.md:
--------------------------------------------------------------------------------
 1 | mstform was developed by ISProjects.
 2 | 
 3 | Contributors:
 4 | 
 5 | -   Martijn Faassen
 6 | -   Gerjon Mensinga
 7 | -   Subhi Dweik
 8 | -   Koen de Leijer
 9 | -   Randy Wanga
10 | -   Rick Lucassen
11 | -   Mark den Toom
12 | -   Ruben van de Kerkhof
13 | -   Guus Biemans
14 | -   Robin van Grinsven
15 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 ISProjects
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/demo/component.tsx:
--------------------------------------------------------------------------------
  1 | import React, { Component, ReactNode } from "react";
  2 | import { observer } from "mobx-react";
  3 | import { Instance, types, getSnapshot } from "mobx-state-tree";
  4 | import {
  5 |   Field,
  6 |   Form,
  7 |   converters,
  8 |   FieldAccessor,
  9 |   RepeatingForm,
 10 | } from "../src/index";
 11 | 
 12 | // we have a MST model with a string field foo,
 13 | // and a few number fields
 14 | const N = types
 15 |   .model("N", {
 16 |     foo: types.string,
 17 |     a: types.number,
 18 |     b: types.number,
 19 |     derived: types.number,
 20 |     textarea: types.array(types.string),
 21 |   })
 22 |   .views((self) => ({
 23 |     get calculated() {
 24 |       return self.a + self.b;
 25 |     },
 26 |   }));
 27 | 
 28 | const newN = (count: number) => {
 29 |   return N.create({
 30 |     foo: `Some string ${count}`,
 31 |     a: 1,
 32 |     b: 2,
 33 |     derived: 3,
 34 |     textarea: ["value"],
 35 |   });
 36 | };
 37 | 
 38 | const M = types
 39 |   .model("M", {
 40 |     foo: types.string,
 41 |     a: types.number,
 42 |     b: types.number,
 43 |     derived: types.number,
 44 |     textarea: types.array(types.string),
 45 |     repeated: types.array(N),
 46 |   })
 47 |   .views((self) => ({
 48 |     get calculated() {
 49 |       return self.a + self.b;
 50 |     },
 51 |   }));
 52 | 
 53 | // we create an instance of the model
 54 | const o = M.create({
 55 |   foo: "FOO",
 56 |   a: 1,
 57 |   b: 3,
 58 |   derived: 4,
 59 |   textarea: [],
 60 |   repeated: [newN(1), newN(2), newN(3)],
 61 | });
 62 | 
 63 | // we expose this field in our form
 64 | const form = new Form(M, {
 65 |   foo: new Field(converters.string, {
 66 |     validators: [(value) => (value !== "correct" ? "Wrong" : false)],
 67 |   }),
 68 |   a: new Field(converters.number),
 69 |   b: new Field(converters.number),
 70 |   derived: new Field(converters.number, {
 71 |     derived: (node) => node.calculated,
 72 |   }),
 73 |   textarea: new Field(converters.textStringArray),
 74 |   repeated: new RepeatingForm({
 75 |     foo: new Field(converters.string, {
 76 |       validators: [(value) => (value !== "correct" ? "Wrong" : false)],
 77 |     }),
 78 |     a: new Field(converters.number),
 79 |     b: new Field(converters.number),
 80 |     derived: new Field(converters.number, {
 81 |       derived: (node) => node.calculated,
 82 |     }),
 83 |     textarea: new Field(converters.textStringArray),
 84 |   }),
 85 | });
 86 | 
 87 | const InlineError: React.FunctionComponent<{
 88 |   field?: FieldAccessor<any, any>;
 89 |   children: ReactNode;
 90 | }> = observer((props) => {
 91 |   const { field, children } = props;
 92 |   return (
 93 |     <div>
 94 |       {children}
 95 |       {field && <span>{field.error}</span>}
 96 |     </div>
 97 |   );
 98 | });
 99 | 
100 | const MyInput: React.FunctionComponent<{
101 |   type: string;
102 |   field: FieldAccessor<any, any>;
103 | }> = observer((props) => {
104 |   const { type, field } = props;
105 |   return <input type={type} {...field.inputProps} />;
106 | });
107 | 
108 | const MyTextArea: React.FunctionComponent<{
109 |   field: FieldAccessor<any, any>;
110 | }> = observer((props) => <textarea {...props.field.inputProps} />);
111 | 
112 | type MyFormProps = Record<string, unknown>;
113 | 
114 | @observer
115 | export class MyForm extends Component<MyFormProps> {
116 |   formState: typeof form.FormStateType;
117 | 
118 |   constructor(props: MyFormProps) {
119 |     super(props);
120 |     // we create a form state for this model
121 |     this.formState = form.state(o, {
122 |       backend: {
123 |         save: async (node) => {
124 |           console.log(getSnapshot(node));
125 |           return null;
126 |         },
127 |       },
128 |     });
129 |   }
130 | 
131 |   handleSave = () => {
132 |     this.formState.save().then((r) => {
133 |       console.log("saved success", r);
134 |     });
135 |   };
136 | 
137 |   handleRestore = () => {
138 |     this.formState.restore();
139 |   };
140 | 
141 |   handleAddRow = () => {
142 |     const formState = this.formState;
143 |     const repeated = formState.repeatingForm("repeated");
144 |     repeated.push(newN(o.repeated.length));
145 |   };
146 | 
147 |   handleDeleteRow = (instance: Instance<typeof N>) => {
148 |     const formState = this.formState;
149 |     const repeated = formState.repeatingForm("repeated");
150 |     repeated.remove(instance);
151 |   };
152 | 
153 |   renderRepeating() {
154 |     const formState = this.formState;
155 |     const repeated = formState.repeatingForm("repeated");
156 |     const result: React.ReactElement[] = [];
157 |     repeated.accessors.forEach((accessor, index) => {
158 |       const state = repeated.index(index);
159 |       const foo = state.field("foo");
160 |       const a = state.field("a");
161 |       const b = state.field("b");
162 |       const derived = state.field("derived");
163 |       const textarea = state.field("textarea");
164 | 
165 |       result.push(
166 |         <span key={`repeating-${index}`} style={{ display: "flex" }}>
167 |           <span>Simple text field with validator (set it to "correct")</span>
168 |           <InlineError field={foo}>
169 |             <MyInput type="text" field={foo} />
170 |           </InlineError>
171 |           <span>a input number for derived</span>
172 |           <InlineError field={a}>
173 |             <MyInput type="text" field={a} />
174 |           </InlineError>
175 |           <span>b input number for derived</span>
176 |           <InlineError field={b}>
177 |             <MyInput type="text" field={b} />
178 |           </InlineError>
179 |           <span>derived from a + b with override</span>
180 |           <InlineError field={derived}>
181 |             <MyInput type="text" field={derived} />
182 |           </InlineError>
183 |           <span>textarea field with list of strings</span>
184 |           <InlineError field={textarea}>
185 |             <MyTextArea field={textarea} />
186 |           </InlineError>
187 |           <button onClick={() => this.handleDeleteRow(state.value)}>
188 |             Delete
189 |           </button>
190 |         </span>
191 |       );
192 |     });
193 |     return result;
194 |   }
195 | 
196 |   render() {
197 |     const formState = this.formState;
198 |     const foo = formState.field("foo");
199 |     const a = formState.field("a");
200 |     const b = formState.field("b");
201 |     const derived = formState.field("derived");
202 |     const textarea = formState.field("textarea");
203 | 
204 |     return (
205 |       <div>
206 |         <span>Simple text field with validator (set it to "correct")</span>
207 |         <InlineError field={foo}>
208 |           <MyInput type="text" field={foo} />
209 |         </InlineError>
210 |         <span>a input number for derived</span>
211 |         <InlineError field={a}>
212 |           <MyInput type="text" field={a} />
213 |         </InlineError>
214 |         <span>b input number for derived</span>
215 |         <InlineError field={b}>
216 |           <MyInput type="text" field={b} />
217 |         </InlineError>
218 |         <span>derived from a + b with override</span>
219 |         <InlineError field={derived}>
220 |           <MyInput type="text" field={derived} />
221 |         </InlineError>
222 |         <span>textarea field with list of strings</span>
223 |         <InlineError field={textarea}>
224 |           <MyTextArea field={textarea} />
225 |         </InlineError>
226 |         <br />
227 |         <br />
228 |         <br />
229 |         <span>Repeated</span>
230 |         {this.renderRepeating()}
231 |         <br />
232 |         <button onClick={this.handleAddRow}>Add row</button>
233 |         <br />
234 |         <button onClick={this.handleSave}>Save</button>
235 |         <button onClick={this.handleRestore}>Reset</button>
236 |         <span>Dirty state: {formState.isDirty ? "dirty" : "clean"}</span>
237 |       </div>
238 |     );
239 |   }
240 | }
241 | 


--------------------------------------------------------------------------------
/demo/div.html:
--------------------------------------------------------------------------------
1 | <div id="demo"></div>
2 | 


--------------------------------------------------------------------------------
/demo/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { createRoot } from "react-dom/client";
 3 | import { MyForm } from "./component";
 4 | import { observer } from "mobx-react";
 5 | 
 6 | const ObserverMyForm = observer(() => (<MyForm />) as any);
 7 | 
 8 | const container = document.getElementById("demo");
 9 | const root = createRoot(container!);
10 | root.render(<ObserverMyForm />);
11 | 


--------------------------------------------------------------------------------
/demo/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../tsconfig.json",
3 |   "include": ["./**/*"]
4 | }
5 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import js from "@eslint/js";
 2 | import globals from "globals";
 3 | import tseslint from "typescript-eslint";
 4 | 
 5 | /**
 6 |  * Helper function to trim keys of an object. We unfortunately have dependencies
 7 |  * which rely on an older version of globals which has keys with
 8 |  * leading/trailing spaces, so we need to trim them.
 9 |  * @param {*} globalsObject The global object with leading/trailing spaces in
10 |  * keys.
11 |  * @returns The trimmed globals object.
12 |  */
13 | const trimGlobalsKeys = (globalsObject) => {
14 |   const trimmedGlobals = {};
15 |   for (const key in globalsObject) {
16 |     if (Object.hasOwn(globalsObject, key)) {
17 |       trimmedGlobals[key.trim()] = globalsObject[key];
18 |     }
19 |   }
20 |   return trimmedGlobals;
21 | };
22 | 
23 | export default [
24 |   {
25 |     ignores: ["build/**", "node_modules/**", "public/pdfjs/**"],
26 |   },
27 |   js.configs.recommended,
28 |   ...tseslint.configs.recommended,
29 |   {
30 |     files: ["**/*.{ts,tsx}"],
31 |     languageOptions: {
32 |       globals: {
33 |         ...trimGlobalsKeys(globals.browser),
34 |       },
35 |     },
36 |     plugins: {
37 |       js,
38 |     },
39 |     rules: {
40 |       "@typescript-eslint/no-explicit-any": "off",
41 |       "@typescript-eslint/explicit-module-boundary-types": "off",
42 |       "@typescript-eslint/no-unused-vars": "off",
43 |       "react/react-in-jsx-scope": "off",
44 |       "react/prop-types": "off",
45 |     },
46 |     settings: {
47 |       react: {
48 |         version: "18.3",
49 |       },
50 |       "import/resolver": {
51 |         typescript: {
52 |           alwaysTryTypes: true,
53 |           project: "./tsconfig.json",
54 |         },
55 |         node: {
56 |           extensions: [".js", ".jsx", ".ts", ".tsx"],
57 |         },
58 |       },
59 |     },
60 |   },
61 | ];
62 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "name": "mstform",
  3 |     "version": "1.36.2",
  4 |     "description": "mobx-state-tree powered forms",
  5 |     "main": "dist/mstform.js",
  6 |     "typings": "dist/src/index.d.ts",
  7 |     "sideEffects": false,
  8 |     "files": [
  9 |         "dist"
 10 |     ],
 11 |     "author": "ISProjects",
 12 |     "license": "MIT",
 13 |     "repository": {
 14 |         "type": "git",
 15 |         "url": "git@github.com:isprojects/mstform.git"
 16 |     },
 17 |     "scripts": {
 18 |         "start": "webpack serve --open --config webpack.dev.js",
 19 |         "lint": "eslint 'src/**/*.{ts,tsx}' 'test/**/*.{ts,tsx}'",
 20 |         "build": "webpack --config webpack.prod.js",
 21 |         "prepublishOnly": "yarn run lint && yarn run test && yarn run build",
 22 |         "test": "jest",
 23 |         "precommit": "lint-staged",
 24 |         "prepare": "husky install"
 25 |     },
 26 |     "lint-staged": {
 27 |         "{src,test,demo}/**/*.ts": [
 28 |             "prettier --write"
 29 |         ]
 30 |     },
 31 |     "jest": {
 32 |         "testEnvironment": "node",
 33 |         "transform": {
 34 |             ".(ts|tsx)": "ts-jest"
 35 |         },
 36 |         "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
 37 |         "roots": [
 38 |             "<rootDir>/src/",
 39 |             "<rootDir>/test/"
 40 |         ],
 41 |         "moduleFileExtensions": [
 42 |             "ts",
 43 |             "tsx",
 44 |             "js"
 45 |         ],
 46 |         "coveragePathIgnorePatterns": [
 47 |             "/node_modules/",
 48 |             "/test/"
 49 |         ],
 50 |         "coverageThreshold": {
 51 |             "global": {
 52 |                 "branches": 90,
 53 |                 "functions": 95,
 54 |                 "lines": 95,
 55 |                 "statements": 95
 56 |             }
 57 |         },
 58 |         "collectCoverage": false
 59 |     },
 60 |     "devDependencies": {
 61 |         "@types/jest": "^29.2.0",
 62 |         "@types/lodash.debounce": "^4.0.7",
 63 |         "@types/node": "^20.9.0",
 64 |         "@types/react": "^18.3.1",
 65 |         "@types/react-dom": "^18.3.1",
 66 |         "@typescript-eslint/eslint-plugin": "^8.29.0",
 67 |         "@typescript-eslint/parser": "^8.29.0",
 68 |         "decimal.js-light": "^2.5.1",
 69 |         "eslint": "^9.24.0",
 70 |         "html-webpack-plugin": "^5.5.0",
 71 |         "husky": "^9.1.7",
 72 |         "jest": "^29",
 73 |         "lint-staged": "^15.5.0",
 74 |         "mobx": "^6.6.2",
 75 |         "mobx-react": "^7.5.3",
 76 |         "mobx-state-tree": "5.1.6",
 77 |         "prettier": "^3.5.3",
 78 |         "react": "^18.3.1",
 79 |         "react-dom": "^18.3.1",
 80 |         "terser-webpack-plugin": "^5.3.6",
 81 |         "ts-jest": "^29.0.3",
 82 |         "ts-loader": "^9.4.1",
 83 |         "typescript": "^5",
 84 |         "webpack": "^5.74.0",
 85 |         "webpack-cli": "^6.0.1",
 86 |         "webpack-dev-server": "^5.2.1",
 87 |         "webpack-merge": "^6.0.1"
 88 |     },
 89 |     "peerDependencies": {
 90 |         "decimal.js-light": "^2.5.0",
 91 |         "mobx": "^6.1.0",
 92 |         "mobx-state-tree": "^5"
 93 |     },
 94 |     "keywords": [
 95 |         "mobx",
 96 |         "mobx-state-tree",
 97 |         "form",
 98 |         "field",
 99 |         "repeating",
100 |         "state management"
101 |     ],
102 |     "dependencies": {
103 |         "@eslint/js": "^9.27.0",
104 |         "eslint-plugin-jest": "^28.11.1",
105 |         "globals": "^16.2.0",
106 |         "lodash.debounce": "^4.0.8",
107 |         "typescript-eslint": "^8.33.0"
108 |     },
109 |     "packageManager": "yarn@4.5.2"
110 | }
111 | 


--------------------------------------------------------------------------------
/src/accessor-base.ts:
--------------------------------------------------------------------------------
  1 | import { computed, observable, action, makeObservable } from "mobx";
  2 | 
  3 | import { pathToFieldref } from "./utils";
  4 | import { ExternalMessages } from "./validationMessages";
  5 | import { AnyFormState } from "./state";
  6 | import { ValidateOptions } from "./validate-options";
  7 | import { IAccessor, IParentAccessor } from "./interfaces";
  8 | import { AccessUpdate } from "./backend";
  9 | 
 10 | export abstract class AccessorBase implements IAccessor {
 11 |   @observable
 12 |   protected _error?: string;
 13 | 
 14 |   @observable
 15 |   protected _addMode = false;
 16 | 
 17 |   @observable
 18 |   private _isReadOnly = false;
 19 | 
 20 |   @observable
 21 |   private _isDisabled = false;
 22 | 
 23 |   @observable
 24 |   private _isHidden = false;
 25 | 
 26 |   @observable
 27 |   protected _isRequired = false;
 28 | 
 29 |   @observable
 30 |   private _isEnabled = false;
 31 | 
 32 |   externalErrors = new ExternalMessages();
 33 |   externalWarnings = new ExternalMessages();
 34 | 
 35 |   abstract get state(): AnyFormState;
 36 | 
 37 |   abstract get path(): string;
 38 |   abstract get addMode(): boolean;
 39 |   abstract get value(): any;
 40 |   abstract get isValid(): boolean;
 41 |   abstract get isDirty(): boolean;
 42 |   abstract accessBySteps(steps: string[]): IAccessor | undefined;
 43 |   abstract validate(options?: ValidateOptions): boolean;
 44 |   abstract resetDirtyState(): void;
 45 |   abstract restore(): void;
 46 | 
 47 |   constructor(public parent: IParentAccessor) {
 48 |     makeObservable(this);
 49 |   }
 50 | 
 51 |   @computed
 52 |   get context(): any {
 53 |     return this.state.context;
 54 |   }
 55 | 
 56 |   @computed
 57 |   get fieldref(): string {
 58 |     return pathToFieldref(this.path);
 59 |   }
 60 | 
 61 |   @computed
 62 |   get errorValue(): string | undefined {
 63 |     if (this._error !== undefined) {
 64 |       return this._error;
 65 |     }
 66 |     if (this.externalErrors.message !== undefined) {
 67 |       return this.externalErrors.message;
 68 |     }
 69 |     return this.state.getErrorFunc(this);
 70 |   }
 71 | 
 72 |   @computed
 73 |   get error(): string | undefined {
 74 |     if (this.state.canShowValidationMessages) {
 75 |       return this.errorValue;
 76 |     } else {
 77 |       return undefined;
 78 |     }
 79 |   }
 80 | 
 81 |   @computed
 82 |   get warningValue(): string | undefined {
 83 |     if (this.externalWarnings.message !== undefined) {
 84 |       return this.externalWarnings.message;
 85 |     }
 86 |     return this.state.getWarningFunc(this);
 87 |   }
 88 | 
 89 |   @computed
 90 |   get warning(): string | undefined {
 91 |     if (this.state.canShowValidationMessages) {
 92 |       return this.warningValue;
 93 |     } else {
 94 |       return undefined;
 95 |     }
 96 |   }
 97 | 
 98 |   @computed
 99 |   get isWarningFree(): boolean {
100 |     if (this.warningValue !== undefined) {
101 |       return false;
102 |     }
103 |     return !this.flatAccessors.some((accessor) =>
104 |       accessor ? accessor.warningValue !== undefined : false
105 |     );
106 |   }
107 | 
108 |   @computed
109 |   get readOnly(): boolean {
110 |     return (
111 |       (this.parent != null && this.parent.readOnly) ||
112 |       this._isReadOnly ||
113 |       this.state.isReadOnlyFunc(this)
114 |     );
115 |   }
116 | 
117 |   @computed
118 |   get disabled(): boolean {
119 |     return (
120 |       (this.parent != null && this.parent.disabled) ||
121 |       this._isDisabled ||
122 |       this.state.isDisabledFunc(this)
123 |     );
124 |   }
125 | 
126 |   @computed
127 |   get hidden(): boolean {
128 |     return (
129 |       (this.parent != null && this.parent.hidden) ||
130 |       this._isHidden ||
131 |       this.state.isHiddenFunc(this)
132 |     );
133 |   }
134 | 
135 |   @computed
136 |   get enabled(): boolean {
137 |     return (
138 |       (this.parent != null &&
139 |         !this.readOnly &&
140 |         !this.disabled &&
141 |         !this.hidden) ||
142 |       this._isEnabled ||
143 |       this.state.isEnabledFunc(this)
144 |     );
145 |   }
146 | 
147 |   @computed
148 |   get required(): boolean {
149 |     // field accessor subclass overrides this to handle field-specific
150 |     // required status
151 |     return this._isRequired || this.state.isRequiredFunc(this);
152 |   }
153 | 
154 |   @computed
155 |   get inputAllowed(): boolean {
156 |     return !this.disabled && !this.hidden && !this.readOnly;
157 |   }
158 | 
159 |   get accessors(): IAccessor[] {
160 |     return [];
161 |   }
162 | 
163 |   @computed
164 |   get flatAccessors(): IAccessor[] {
165 |     const result: IAccessor[] = [];
166 |     this.accessors.forEach((accessor) => {
167 |       result.push(...accessor.flatAccessors);
168 |       result.push(accessor);
169 |     });
170 |     return result;
171 |     // TODO NEXTPY-2196: The code below breaks the validation on repeating form, fix that first
172 |     //  before replacing the code above with the code below
173 |     // const result: IAccessor[] = [];
174 |     // const processStack: IAccessor[] = this.accessors;
175 |     // while (processStack.length > 0) {
176 |     //   const accessor: IAccessor = processStack.pop() as IAccessor; // Use pop for O(1) performance
177 |     //   if (accessor !== this) {
178 |     //     result.push(accessor);
179 |     //     processStack.push(...accessor.accessors); // Use push with spread operator for better efficiency
180 |     //   }
181 |     // }
182 |     // return result;
183 |   }
184 | 
185 |   dispose() {
186 |     // no dispose by default
187 |   }
188 | 
189 |   clear() {
190 |     this.dispose();
191 |   }
192 | 
193 |   @action
194 |   setAccess(update: AccessUpdate) {
195 |     if (update.readOnly != null) {
196 |       this._isReadOnly = update.readOnly;
197 |     }
198 |     if (update.enabled != null) {
199 |       this._isEnabled = update.enabled;
200 |     }
201 |     if (update.disabled != null) {
202 |       this._isDisabled = update.disabled;
203 |     }
204 |     if (update.hidden != null) {
205 |       this._isHidden = update.hidden;
206 |     }
207 |     if (update.required != null) {
208 |       this._isRequired = update.required;
209 |     }
210 |   }
211 | 
212 |   @action
213 |   clearError() {
214 |     this._error = undefined;
215 |   }
216 | }
217 | 


--------------------------------------------------------------------------------
/src/accessor.ts:
--------------------------------------------------------------------------------
 1 | import { IAnyModelType, Instance } from "mobx-state-tree";
 2 | 
 3 | import {
 4 |   FormDefinition,
 5 |   RepeatingFormDefinitionType,
 6 |   RepeatingFormGroupDefinitionType,
 7 |   SubFormDefinitionType,
 8 |   SubFormGroupDefinitionType,
 9 |   RawType,
10 |   ValueType,
11 |   ArrayEntryType,
12 | } from "./form";
13 | import { FieldAccessor } from "./field-accessor";
14 | import { GroupAccessor } from "./group-accessor";
15 | import { ISubFormAccessor, IRepeatingFormAccessor } from "./interfaces";
16 | 
17 | export type FieldAccess<
18 |   D extends FormDefinition<any>,
19 |   K extends keyof D
20 | > = FieldAccessor<RawType<D[K]>, ValueType<D[K]>>;
21 | 
22 | export type RepeatingFormAccess<
23 |   D extends FormDefinition<M>,
24 |   K extends keyof D,
25 |   M extends IAnyModelType
26 | > = IRepeatingFormAccessor<
27 |   RepeatingFormDefinitionType<D[K]>,
28 |   RepeatingFormGroupDefinitionType<D[K]>,
29 |   ArrayEntryType<Instance<M>[K]>
30 | >;
31 | 
32 | export type SubFormAccess<
33 |   D extends FormDefinition<M>,
34 |   K extends keyof D,
35 |   M extends IAnyModelType
36 | > = ISubFormAccessor<
37 |   SubFormDefinitionType<D[K]>,
38 |   SubFormGroupDefinitionType<D[K]>,
39 |   Instance<M>[K]
40 | >;
41 | 
42 | export type GroupAccess<D extends FormDefinition<any>> = GroupAccessor<D>;
43 | 


--------------------------------------------------------------------------------
/src/backend.ts:
--------------------------------------------------------------------------------
  1 | import { applyPatch, IAnyModelType, Instance } from "mobx-state-tree";
  2 | 
  3 | import { ChangeTracker, DebounceOptions } from "./changeTracker";
  4 | import { Message } from "./validationMessages";
  5 | import { FormState } from "./state";
  6 | 
  7 | type Update = {
  8 |   path: string;
  9 |   value?: any;
 10 |   inclusion?: any;
 11 |   model_key?: string;
 12 | };
 13 | 
 14 | export type AccessUpdate = {
 15 |   path: string;
 16 |   readOnly?: boolean;
 17 |   disabled?: boolean;
 18 |   hidden?: boolean;
 19 |   required?: boolean;
 20 |   enabled?: boolean;
 21 | };
 22 | 
 23 | type ValidationInfo = {
 24 |   id: string;
 25 |   messages: Message[];
 26 | };
 27 | 
 28 | export type ProcessResult = {
 29 |   updates: Update[];
 30 |   accessUpdates: AccessUpdate[];
 31 |   errorValidations: ValidationInfo[];
 32 |   warningValidations: ValidationInfo[];
 33 | };
 34 | 
 35 | export interface SaveFunc<M> {
 36 |   (node: Instance<M>): Promise<Partial<ProcessResult> | undefined | null>;
 37 | }
 38 | 
 39 | export interface Process<M> {
 40 |   (
 41 |     node: Instance<M>,
 42 |     path: string,
 43 |     liveOnly: boolean,
 44 |     paths?: string[]
 45 |   ): Promise<Partial<ProcessResult>>;
 46 | }
 47 | 
 48 | export interface ProcessAll<M> {
 49 |   (node: Instance<M>, liveOnly: boolean): Promise<Partial<ProcessResult>>;
 50 | }
 51 | 
 52 | export interface ApplyUpdate {
 53 |   (node: Instance<IAnyModelType>, update: any): void;
 54 | }
 55 | 
 56 | function defaultApplyUpdate(node: Instance<IAnyModelType>, update: any): void {
 57 |   applyPatch(node, [{ op: "replace", path: update.path, value: update.value }]);
 58 | }
 59 | 
 60 | export type ProcessorOptions = {
 61 |   applyUpdate?: ApplyUpdate;
 62 |   bulkProcess?: boolean;
 63 | } & Partial<DebounceOptions>;
 64 | 
 65 | export class Backend<M extends IAnyModelType> {
 66 |   changeTracker: ChangeTracker;
 67 |   applyUpdate: ApplyUpdate;
 68 |   bulkProcess: boolean;
 69 | 
 70 |   constructor(
 71 |     public state: FormState<any, any, M>,
 72 |     public node: Instance<M>,
 73 |     public save?: SaveFunc<M>,
 74 |     public process?: Process<M>,
 75 |     public processAll?: ProcessAll<M>,
 76 |     {
 77 |       debounce,
 78 |       delay,
 79 |       applyUpdate = defaultApplyUpdate,
 80 |       bulkProcess = false,
 81 |     }: ProcessorOptions = {}
 82 |   ) {
 83 |     this.changeTracker = new ChangeTracker(
 84 |       (path: string, paths: string[] = []) => this.realProcess(path, paths),
 85 |       { debounce, delay },
 86 |       bulkProcess
 87 |     );
 88 |     this.applyUpdate = applyUpdate;
 89 |     this.bulkProcess = bulkProcess;
 90 |   }
 91 | 
 92 |   run(path: string) {
 93 |     this.changeTracker.change(path);
 94 |   }
 95 | 
 96 |   runProcessResult(processResult: ProcessResult) {
 97 |     const { updates, accessUpdates, errorValidations, warningValidations } =
 98 |       processResult;
 99 |     updates.forEach((update) => {
100 |       // anything that has changed by the user in the mean time shouldn't
101 |       // be updated, as the user input takes precedence
102 |       if (this.changeTracker.hasChanged(update.path)) {
103 |         return;
104 |       }
105 |       this.applyUpdate(this.node, update);
106 |     });
107 |     accessUpdates.forEach((accessUpdate) => {
108 |       this.state.setAccessUpdate(accessUpdate);
109 |     });
110 | 
111 |     this.state.setExternalValidations(errorValidations, "error");
112 |     this.state.setExternalValidations(warningValidations, "warning");
113 |   }
114 | 
115 |   async realSave(): Promise<boolean> {
116 |     if (this.save == null) {
117 |       throw new Error("Cannot save if save function is not configured");
118 |     }
119 |     const processResult = await this.save(this.node);
120 | 
121 |     if (processResult == null) {
122 |       this.clearValidations();
123 |       return true;
124 |     }
125 |     const completeProcessResult: ProcessResult = {
126 |       updates: [],
127 |       accessUpdates: [],
128 |       errorValidations: [],
129 |       warningValidations: [],
130 |       ...processResult,
131 |     };
132 |     this.runProcessResult(completeProcessResult);
133 |     return false;
134 |   }
135 | 
136 |   async realProcessAll(liveOnly?: boolean) {
137 |     if (this.processAll == null) {
138 |       throw new Error(
139 |         "Cannot process all if processAll function is not configured"
140 |       );
141 |     }
142 |     const processResult = await this.processAll(
143 |       this.node,
144 |       liveOnly != null ? liveOnly : this.state.liveOnly
145 |     );
146 |     this.clearValidations();
147 | 
148 |     const completeProcessResult: ProcessResult = {
149 |       updates: [],
150 |       accessUpdates: [],
151 |       errorValidations: [],
152 |       warningValidations: [],
153 |       ...processResult,
154 |     };
155 |     this.runProcessResult(completeProcessResult);
156 |   }
157 | 
158 |   async clearValidations() {
159 |     this.state.clearExternalValidations("error");
160 |     this.state.clearExternalValidations("warning");
161 |   }
162 | 
163 |   async realProcess(path: string, paths: string[]) {
164 |     if (this.process == null) {
165 |       return;
166 |     }
167 |     let processResult;
168 |     try {
169 |       processResult = await this.process(
170 |         this.node,
171 |         path,
172 |         this.state.liveOnly,
173 |         paths
174 |       );
175 |     } catch (e) {
176 |       console.error("Unexpected error during process:", e);
177 |       return;
178 |     }
179 |     const completeProcessResult: ProcessResult = {
180 |       updates: [],
181 |       accessUpdates: [],
182 |       errorValidations: [],
183 |       warningValidations: [],
184 |       ...processResult,
185 |     };
186 |     this.runProcessResult(completeProcessResult);
187 |   }
188 | 
189 |   isFinished() {
190 |     return this.changeTracker.isFinished();
191 |   }
192 | }
193 | 


--------------------------------------------------------------------------------
/src/changeTracker.ts:
--------------------------------------------------------------------------------
  1 | import { debounce as lodashDebounce } from "lodash";
  2 | 
  3 | // the change tracker solves the problem of sending changes to
  4 | // a form to the server in the order in which they were made,
  5 | // one after another, and allowing changes to be queued up.
  6 | // Queued up changes that aren't yet being handled can be
  7 | // accessed -- this is useful if we want new changes to override
  8 | // any changes from the backend in the form processor.
  9 | 
 10 | // the change tracker debounces changes, so that multiple changes
 11 | // to the same field shortly after another are only sent once.
 12 | 
 13 | // the change tracker is used by the form processor.
 14 | 
 15 | interface ProcessChange {
 16 |   (path: string, paths?: string[]): Promise<any>;
 17 | }
 18 | 
 19 | export interface DebounceFunc {
 20 |   (f: any, delay: number): void;
 21 | }
 22 | 
 23 | export type DebounceOptions = {
 24 |   debounce: DebounceFunc;
 25 |   delay: number;
 26 | };
 27 | 
 28 | class DebounceProcess {
 29 |   debounced: Map<string, any> = new Map();
 30 |   debounce: DebounceFunc;
 31 |   delay: number;
 32 | 
 33 |   constructor(
 34 |     public func: (path: string) => void,
 35 |     { debounce = lodashDebounce, delay = 500 }: Partial<DebounceOptions>
 36 |   ) {
 37 |     this.debounce = debounce;
 38 |     this.delay = delay;
 39 |   }
 40 | 
 41 |   run(path: string) {
 42 |     let f = this.debounced.get(path);
 43 |     if (f == null) {
 44 |       f = this.debounce(() => this.func(path), this.delay);
 45 |       this.debounced.set(path, f);
 46 |     }
 47 |     f();
 48 |   }
 49 | }
 50 | 
 51 | export class ChangeTracker {
 52 |   changed: Map<string, void> = new Map();
 53 | 
 54 |   // process requests - field paths in the order of changes, debounced
 55 |   requests: string[] = [];
 56 | 
 57 |   isProcessing = false;
 58 |   processingPromise: Promise<void> = Promise.resolve();
 59 | 
 60 |   debounceProcess: DebounceProcess;
 61 |   bulkProcess: boolean;
 62 | 
 63 |   constructor(
 64 |     public process: ProcessChange,
 65 |     options: Partial<DebounceOptions>,
 66 |     bulkProcess?: boolean
 67 |   ) {
 68 |     this.debounceProcess = new DebounceProcess(
 69 |       (path: string) => this.makeRequest(path),
 70 |       options
 71 |     );
 72 |     this.bulkProcess = bulkProcess ? bulkProcess : false;
 73 |   }
 74 | 
 75 |   // track a field that has changed. debounce requests
 76 |   change(path: string): void {
 77 |     this.startChange(path);
 78 |     this.debounceProcess.run(path);
 79 |   }
 80 | 
 81 |   startChange(path: string) {
 82 |     this.changed.set(path, undefined);
 83 |   }
 84 | 
 85 |   finishChange(path: string) {
 86 |     this.changed.delete(path);
 87 |   }
 88 | 
 89 |   // queue the request
 90 |   makeRequest(path: string): void {
 91 |     this.requests.push(path);
 92 |     this.finishChange(path);
 93 |     this.processingPromise = this.processRequests();
 94 |   }
 95 | 
 96 |   // process all requests, in order
 97 |   // store the fields in requested.
 98 |   async processRequests(): Promise<void> {
 99 |     // if we're already busy, wait for promise we already have
100 |     if (this.isProcessing) {
101 |       return this.processingPromise;
102 |     }
103 |     this.isProcessing = true;
104 | 
105 |     // get the requests, updating the requests to be empty immediately
106 |     // as new ones can come in now
107 |     const requests = this.requests;
108 |     this.requests = [];
109 | 
110 |     if (this.bulkProcess && requests.length > 1) {
111 |       const r = await this.process("", requests);
112 |       this.isProcessing = false;
113 | 
114 |       if (this.requests.length > 0) {
115 |         return this.processRequests();
116 |       }
117 | 
118 |       return r;
119 |     }
120 | 
121 |     // process it all in sequence
122 |     const processingPromise = requests.reduce(async (previousPromise, path) => {
123 |       await previousPromise;
124 |       // as soon as we start processing a path are done with the request
125 |       const r = await this.process(path);
126 |       return r;
127 |     }, Promise.resolve());
128 | 
129 |     // we need to wait until processing is done before we complete
130 |     await processingPromise;
131 |     this.isProcessing = false;
132 | 
133 |     // if there is more to process now, process it too
134 |     if (this.requests.length > 0) {
135 |       return this.processRequests();
136 |     }
137 | 
138 |     return processingPromise;
139 |   }
140 | 
141 |   hasChanged(path: string): boolean {
142 |     if (this.changed.has(path)) {
143 |       return true;
144 |     }
145 |     return this.requests.includes(path);
146 |   }
147 | 
148 |   isFinished(): Promise<void> {
149 |     return this.processingPromise;
150 |   }
151 | }
152 | 


--------------------------------------------------------------------------------
/src/controlled.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   applyPatch,
 3 |   IAnyModelType,
 4 |   IMSTArray,
 5 |   Instance,
 6 |   IReferenceType,
 7 | } from "mobx-state-tree";
 8 | import { FieldAccessor } from "./field-accessor";
 9 | 
10 | export interface Controlled<R, V> {
11 |   (accessor: FieldAccessor<R, V>): {
12 |     [key: string]: any;
13 |     onChange: (value: any) => void;
14 |   };
15 | }
16 | 
17 | const value: Controlled<any, any> = (accessor) => {
18 |   return {
19 |     value: accessor.raw,
20 |     onChange: (ev) => accessor.setRaw(ev.target.value),
21 |   };
22 | };
23 | 
24 | const checked: Controlled<any, any> = (accessor) => {
25 |   return {
26 |     checked: accessor.raw,
27 |     onChange: (ev) => accessor.setRaw(ev.target.checked),
28 |   };
29 | };
30 | 
31 | const object: Controlled<any, any> = (accessor) => {
32 |   return {
33 |     value: accessor.raw,
34 |     onChange: (value) => accessor.setRaw(value),
35 |   };
36 | };
37 | 
38 | const modelReferenceArray: Controlled<any, any> = (
39 |   accessor: FieldAccessor<
40 |     Instance<IAnyModelType>[],
41 |     IMSTArray<IReferenceType<IAnyModelType>>
42 |   >
43 | ) => {
44 |   return {
45 |     value: accessor.raw,
46 |     onChange: (value: Instance<IAnyModelType>[]) => {
47 |       applyPatch(accessor.node, [
48 |         { op: "replace", path: accessor.path, value: value },
49 |       ]);
50 |     },
51 |   };
52 | };
53 | 
54 | export const controlled = {
55 |   value,
56 |   checked,
57 |   object,
58 |   modelReferenceArray,
59 | };
60 | 


--------------------------------------------------------------------------------
/src/converter.ts:
--------------------------------------------------------------------------------
  1 | import { Controlled, controlled } from "./controlled";
  2 | import { FieldAccessor } from "./field-accessor";
  3 | 
  4 | export interface StateConverterOptions {
  5 |   decimalSeparator?: string;
  6 |   thousandSeparator?: string;
  7 |   renderThousands?: boolean;
  8 | }
  9 | 
 10 | export interface StateConverterOptionsWithContext
 11 |   extends StateConverterOptions {
 12 |   context?: any;
 13 |   accessor: FieldAccessor<any, any>;
 14 | }
 15 | 
 16 | export interface ConverterOptions<R, V> {
 17 |   convert(raw: R, options: StateConverterOptionsWithContext): V;
 18 |   render(value: V, options: StateConverterOptionsWithContext): R;
 19 |   emptyRaw: R;
 20 |   emptyValue?:
 21 |     | V
 22 |     | ((options: StateConverterOptionsWithContext) => V | undefined);
 23 |   emptyImpossible?:
 24 |     | boolean
 25 |     | ((options: StateConverterOptionsWithContext) => boolean);
 26 |   defaultControlled?: Controlled<R, V>;
 27 |   neverRequired?: boolean;
 28 |   preprocessRaw?(raw: R, options?: StateConverterOptionsWithContext): R;
 29 |   isEmpty?(raw: R, options?: StateConverterOptionsWithContext): boolean;
 30 |   hasChange(
 31 |     currentValue: V,
 32 |     newValue: V,
 33 |     options: StateConverterOptionsWithContext,
 34 |   ): boolean;
 35 | }
 36 | 
 37 | export interface IConverter<R, V> {
 38 |   emptyRaw: R;
 39 |   emptyValue:
 40 |     | V
 41 |     | ((options: StateConverterOptionsWithContext) => V | undefined);
 42 |   emptyImpossible:
 43 |     | boolean
 44 |     | ((options: StateConverterOptionsWithContext) => boolean);
 45 |   convert(
 46 |     raw: R,
 47 |     options: StateConverterOptionsWithContext,
 48 |   ): ConversionResponse<V>;
 49 |   render(value: V, options: StateConverterOptionsWithContext): R;
 50 |   defaultControlled: Controlled<R, V>;
 51 |   neverRequired: boolean;
 52 |   preprocessRaw(raw: R, options: StateConverterOptionsWithContext): R;
 53 |   isEmpty(raw: R, options: StateConverterOptionsWithContext): boolean;
 54 |   hasChange(
 55 |     currentValue: V,
 56 |     newValue: V,
 57 |     options: StateConverterOptionsWithContext,
 58 |   ): boolean;
 59 | }
 60 | 
 61 | export class ConversionValue<V> {
 62 |   constructor(public value: V) {}
 63 | }
 64 | 
 65 | export class ConversionError {
 66 |   constructor(public type: string = "default") {}
 67 | }
 68 | 
 69 | export type ConversionResponse<V> = ConversionError | ConversionValue<V>;
 70 | 
 71 | export class Converter<R, V> implements IConverter<R, V> {
 72 |   emptyRaw: R;
 73 |   emptyValue:
 74 |     | V
 75 |     | ((options: StateConverterOptionsWithContext) => V | undefined);
 76 |   emptyImpossible:
 77 |     | boolean
 78 |     | ((options: StateConverterOptionsWithContext) => boolean);
 79 |   defaultControlled: Controlled<R, V>;
 80 |   neverRequired = false;
 81 | 
 82 |   constructor(public definition: ConverterOptions<R, V>) {
 83 |     this.emptyRaw = definition.emptyRaw;
 84 | 
 85 |     this.emptyImpossible = definition.emptyImpossible || false;
 86 |     const emptyValue = definition.emptyValue;
 87 |     if (typeof this.emptyImpossible === "boolean" && this.emptyImpossible) {
 88 |       if (emptyValue !== undefined) {
 89 |         throw new Error(
 90 |           "If you set emptyImpossible for a converter, emptyValue cannot be set",
 91 |         );
 92 |       }
 93 |       this.emptyValue = undefined as V;
 94 |     } else {
 95 |       this.emptyValue = emptyValue as V;
 96 |     }
 97 |     this.defaultControlled = definition.defaultControlled
 98 |       ? definition.defaultControlled
 99 |       : controlled.object;
100 |     this.neverRequired = !!definition.neverRequired;
101 |   }
102 | 
103 |   isEmpty(raw: R, options: StateConverterOptionsWithContext) {
104 |     if (this.definition.isEmpty == null) {
105 |       return raw === this.emptyRaw;
106 |     }
107 |     return this.definition.isEmpty(raw, options);
108 |   }
109 | 
110 |   preprocessRaw(raw: R, options?: StateConverterOptionsWithContext): R {
111 |     if (this.definition.preprocessRaw == null) {
112 |       return raw;
113 |     }
114 |     return this.definition.preprocessRaw(raw, options);
115 |   }
116 | 
117 |   convert(
118 |     raw: R,
119 |     options: StateConverterOptionsWithContext,
120 |   ): ConversionResponse<V> {
121 |     try {
122 |       const value = this.definition.convert(raw, options);
123 |       return new ConversionValue<V>(value);
124 |     } catch (e) {
125 |       if (e instanceof ConversionError) {
126 |         return e;
127 |       }
128 |       throw e;
129 |     }
130 |   }
131 | 
132 |   render(value: V, options: StateConverterOptionsWithContext): R {
133 |     return this.definition.render(value, options);
134 |   }
135 | 
136 |   hasChange(
137 |     currentValue: V,
138 |     newValue: V,
139 |     options: StateConverterOptionsWithContext,
140 |   ): boolean {
141 |     return this.definition.hasChange(currentValue, newValue, options);
142 |   }
143 | }
144 | 
145 | export interface PartialConverterFactory<O, R, V> {
146 |   (options?: Partial<O>): IConverter<R, V>;
147 | }
148 | 
149 | export interface ConverterFactory<O, R, V> {
150 |   (options: O): IConverter<R, V>;
151 | }
152 | 
153 | // turn a converter which accepts options into a converter that
154 | // accepts partial options and fill in the rest with defaults
155 | export function withDefaults<O, R, V>(
156 |   converterFactory: ConverterFactory<O, R, V>,
157 |   defaults: O,
158 | ): PartialConverterFactory<O, R, V> {
159 |   return (partialOptions?: Partial<O>) => {
160 |     return converterFactory({ ...defaults, ...partialOptions });
161 |   };
162 | }
163 | 
164 | export type ConverterOrFactory<R, V> =
165 |   | IConverter<R, V>
166 |   | (() => IConverter<R, V>);
167 | 
168 | export function makeConverter<R, V>(
169 |   converter: ConverterOrFactory<R, V>,
170 | ): IConverter<R, V> {
171 |   if (typeof converter === "function") {
172 |     return converter();
173 |   }
174 |   return converter;
175 | }
176 | 
177 | export function converterEmptyImpossible(
178 |   converter: IConverter<any, any>,
179 |   options: StateConverterOptionsWithContext,
180 | ) {
181 |   const emptyImpossible = converter.emptyImpossible;
182 |   if (typeof emptyImpossible === "function") {
183 |     return emptyImpossible(options);
184 |   }
185 |   return emptyImpossible;
186 | }
187 | 
188 | export function converterEmptyValue(
189 |   converter: IConverter<any, any>,
190 |   options: StateConverterOptionsWithContext,
191 | ) {
192 |   const emptyValue = converter.emptyValue;
193 |   if (typeof emptyValue === "function") {
194 |     return emptyValue(options);
195 |   }
196 |   return emptyValue;
197 | }
198 | 


--------------------------------------------------------------------------------
/src/decimal-type.ts:
--------------------------------------------------------------------------------
 1 | import { Decimal } from "decimal.js-light";
 2 | import { types } from "mobx-state-tree";
 3 | 
 4 | export const decimal = types.custom<string, Decimal>({
 5 |   name: "decimal",
 6 |   fromSnapshot(value) {
 7 |     return new Decimal(value);
 8 |   },
 9 |   toSnapshot(value) {
10 |     return value.toString();
11 |   },
12 |   isTargetType(value) {
13 |     return value instanceof Decimal;
14 |   },
15 |   getValidationMessage(snapshot) {
16 |     try {
17 |       new Decimal(snapshot);
18 |     } catch (e) {
19 |       return "Not a valid decimal";
20 |     }
21 |     return "";
22 |   },
23 | });
24 | 


--------------------------------------------------------------------------------
/src/decimalParser.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   StateConverterOptions,
  3 |   StateConverterOptionsWithContext,
  4 | } from "./converter";
  5 | 
  6 | type TOKEN_MINUS = "-";
  7 | type TOKEN_DECIMAL_SEPARATOR = ".";
  8 | type TOKEN_THOUSAND_SEPARATOR = ",";
  9 | type TOKEN_WHITESPACE = " ";
 10 | type TOKEN_DIGIT = "0";
 11 | 
 12 | const TOKEN_MINUS: TOKEN_MINUS = "-";
 13 | const TOKEN_DECIMAL_SEPARATOR: TOKEN_DECIMAL_SEPARATOR = ".";
 14 | const TOKEN_THOUSAND_SEPARATOR: TOKEN_THOUSAND_SEPARATOR = ",";
 15 | const TOKEN_WHITESPACE: TOKEN_WHITESPACE = " ";
 16 | const TOKEN_DIGIT: TOKEN_DIGIT = "0";
 17 | 
 18 | type TokenType =
 19 |   | TOKEN_MINUS
 20 |   | TOKEN_DECIMAL_SEPARATOR
 21 |   | TOKEN_THOUSAND_SEPARATOR
 22 |   | TOKEN_WHITESPACE
 23 |   | TOKEN_DIGIT;
 24 | 
 25 | const DIGIT = new RegExp("\\d");
 26 | const WHITESPACE = new RegExp("\\s");
 27 | 
 28 | function isDigit(c: string): boolean {
 29 |   return DIGIT.test(c);
 30 | }
 31 | 
 32 | function isWhitespace(c: string): boolean {
 33 |   return WHITESPACE.test(c);
 34 | }
 35 | 
 36 | export type DecimalOptions = {
 37 |   maxWholeDigits: number;
 38 |   decimalPlaces: number;
 39 |   addZeroes: boolean;
 40 |   allowNegative: boolean;
 41 |   normalizedDecimalPlaces?: number;
 42 |   maxZeroesPadding?: number;
 43 |   zeroIsEmpty?: boolean;
 44 | };
 45 | 
 46 | type TokenOptions = {
 47 |   decimalSeparator: string;
 48 |   thousandSeparator: string;
 49 |   renderThousands: boolean;
 50 | };
 51 | 
 52 | type Options = DecimalOptions & TokenOptions;
 53 | 
 54 | type Accept = (tokenType: TokenType) => boolean;
 55 | type Expect = (tokenType: TokenType) => boolean;
 56 | type NextToken = () => void;
 57 | 
 58 | class Token {
 59 |   constructor(
 60 |     public type: TokenType,
 61 |     public value: string,
 62 |   ) {}
 63 | }
 64 | 
 65 | function thousands(wholeDigits: string, thousandSeparator: string): string {
 66 |   return wholeDigits.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
 67 | }
 68 | 
 69 | function trimDecimals(decimalDigits: string, decimalPlaces: number): string {
 70 |   // remove all trailing zeroes
 71 |   // reverse loop until there are no trailing zeroes anymore
 72 |   const result = decimalDigits.split("");
 73 |   for (let i = result.length - 1; i >= 0; i--) {
 74 |     if (result[i] === "0") {
 75 |       result[i] = "";
 76 |     } else {
 77 |       break;
 78 |     }
 79 |   }
 80 |   return result.join("").slice(0, decimalPlaces);
 81 | }
 82 | 
 83 | function addZeroes(decimalDigits: string, decimalPlaces: number): string {
 84 |   return decimalDigits + "0".repeat(decimalPlaces - decimalDigits.length);
 85 | }
 86 | 
 87 | export class DecimalParserError {
 88 |   constructor(public type: string) {}
 89 | }
 90 | 
 91 | export function renderDecimal(s: string, options: Options): string {
 92 |   if (s.length === 0) {
 93 |     return s;
 94 |   }
 95 |   const parts = s.split(".");
 96 |   let wholeDigits = parts.length === 2 ? parts[0] : s;
 97 |   let decimalDigits = parts.length === 2 ? parts[1] : "";
 98 |   const hasMinus = wholeDigits[0] === "-";
 99 |   if (hasMinus) {
100 |     wholeDigits = wholeDigits.slice(1);
101 |   }
102 | 
103 |   wholeDigits = options.renderThousands
104 |     ? thousands(wholeDigits, options.thousandSeparator)
105 |     : wholeDigits;
106 | 
107 |   decimalDigits = trimDecimals(decimalDigits, options.decimalPlaces);
108 |   if (options.addZeroes) {
109 |     let decimalPlaces = options.decimalPlaces;
110 |     if (options.maxZeroesPadding != null) {
111 |       decimalPlaces = options.maxZeroesPadding;
112 |     }
113 |     if (decimalPlaces - decimalDigits.length > 0) {
114 |       decimalDigits = addZeroes(decimalDigits, decimalPlaces);
115 |     }
116 |   }
117 | 
118 |   const result =
119 |     decimalDigits.length > 0
120 |       ? wholeDigits + options.decimalSeparator + decimalDigits
121 |       : wholeDigits;
122 | 
123 |   if (hasMinus) {
124 |     return "-" + result;
125 |   }
126 |   return result;
127 | }
128 | 
129 | export function parseDecimal(s: string, options: Options): string {
130 |   const tokens = tokenize(s, options);
131 |   if (tokens == null) {
132 |     throw new DecimalParserError("default");
133 |   }
134 | 
135 |   const parser = new Parser(tokens, options);
136 | 
137 |   parser.parse();
138 | 
139 |   // now that the parser has succeed we can make a simplifying assumption:
140 |   // strings of tokens are now always legitimate.
141 | 
142 |   if (getWholeDigitAmount(tokens) > options.maxWholeDigits) {
143 |     throw new DecimalParserError("tooManyWholeDigits");
144 |   }
145 |   if (getDecimalAmount(tokens) > options.decimalPlaces) {
146 |     throw new DecimalParserError("tooManyDecimalPlaces");
147 |   }
148 | 
149 |   // note that the tokenizer has replaced the decimal separator
150 |   // with the standard "." at this point.
151 |   const converted = tokens
152 |     .filter((token) => token.type !== TOKEN_THOUSAND_SEPARATOR)
153 |     .map((token) => token.value)
154 |     .join("");
155 |   if (options.normalizedDecimalPlaces == null) {
156 |     return converted;
157 |   }
158 |   return normalize(converted, options.normalizedDecimalPlaces);
159 | }
160 | 
161 | function normalize(decimal: string, amount: number): string {
162 |   const parts = decimal.split(".");
163 |   const beforePeriod = parts[0];
164 |   const decimals = parts.length === 2 ? parts[1] : "";
165 |   return beforePeriod + "." + addZeroes(decimals, amount);
166 | }
167 | 
168 | function getWholeDigitAmount(tokens: Token[]): number {
169 |   let result = 0;
170 |   for (const token of tokens) {
171 |     if (token.type === TOKEN_DIGIT) {
172 |       result++;
173 |     } else if (token.type === TOKEN_DECIMAL_SEPARATOR) {
174 |       break;
175 |     }
176 |   }
177 |   return result;
178 | }
179 | 
180 | function getDecimalAmount(tokens: Token[]): number {
181 |   let result = 0;
182 |   let inDecimals = false;
183 |   for (const token of tokens) {
184 |     if (token.type === TOKEN_DECIMAL_SEPARATOR) {
185 |       inDecimals = true;
186 |       continue;
187 |     } else if (inDecimals && token.type === TOKEN_DIGIT) {
188 |       result++;
189 |     }
190 |   }
191 |   return result;
192 | }
193 | 
194 | // This is a recursive descent parser
195 | // https://en.wikipedia.org/wiki/Recursive_descent_parser
196 | // The reason I didn't use PEG.js to generate a parser instead is
197 | // because PEG.js doesn't easily allow parameterized parsers,
198 | // which we need with our thousand and decimal separators.
199 | // We can handle this in our tokenizer.
200 | // (We could however use PEG if we cleverly translated the tokens
201 | // beforehand, but this was about as easy to work out)
202 | class Parser {
203 |   tokenIndex = 0;
204 |   currentToken: Token | null | undefined = undefined;
205 | 
206 |   constructor(
207 |     public tokens: Token[],
208 |     public options: Options,
209 |   ) {}
210 | 
211 |   nextToken: NextToken = () => {
212 |     if (this.tokenIndex >= this.tokens.length) {
213 |       this.currentToken = null;
214 |       return;
215 |     }
216 |     const result = this.tokens[this.tokenIndex];
217 |     this.tokenIndex++;
218 |     this.currentToken = result;
219 |   };
220 | 
221 |   accept: Accept = (tokenType) => {
222 |     if (this.currentToken != null && this.currentToken.type === tokenType) {
223 |       this.nextToken();
224 |       return true;
225 |     }
226 |     return false;
227 |   };
228 | 
229 |   expect: Expect = (tokenType) => {
230 |     if (this.accept(tokenType)) {
231 |       return true;
232 |     }
233 |     throw new DecimalParserError("default");
234 |   };
235 | 
236 |   parse(): void {
237 |     this.nextToken();
238 |     this.decimal();
239 |     if (this.currentToken != null) {
240 |       throw new DecimalParserError("default");
241 |     }
242 |   }
243 | 
244 |   decimal(): void {
245 |     if (this.accept(TOKEN_MINUS)) {
246 |       if (!this.options.allowNegative) {
247 |         throw new DecimalParserError("cannotBeNegative");
248 |       }
249 |     }
250 | 
251 |     this.absoluteDecimal();
252 |   }
253 | 
254 |   absoluteDecimal(): void {
255 |     if (this.accept(TOKEN_DECIMAL_SEPARATOR)) {
256 |       this.expect(TOKEN_DIGIT);
257 |       this.fraction();
258 |     } else {
259 |       this.whole();
260 |       if (this.accept(TOKEN_DECIMAL_SEPARATOR)) {
261 |         this.fraction();
262 |       }
263 |     }
264 |   }
265 | 
266 |   whole(): void {
267 |     this.threeOrLessDigits();
268 |     while (this.accept(TOKEN_THOUSAND_SEPARATOR)) {
269 |       this.threeDigits();
270 |     }
271 |   }
272 | 
273 |   threeOrLessDigits(): void {
274 |     let count = 1;
275 |     this.expect(TOKEN_DIGIT);
276 |     while (this.accept(TOKEN_DIGIT)) {
277 |       count++;
278 |     }
279 |     if (
280 |       this.currentToken != null &&
281 |       this.currentToken.type !== TOKEN_DECIMAL_SEPARATOR &&
282 |       count > 3
283 |     ) {
284 |       throw new DecimalParserError("default");
285 |     }
286 |   }
287 | 
288 |   threeDigits(): void {
289 |     this.expect(TOKEN_DIGIT);
290 |     this.expect(TOKEN_DIGIT);
291 |     this.expect(TOKEN_DIGIT);
292 |   }
293 | 
294 |   fraction(): void {
295 |     while (this.accept(TOKEN_DIGIT)) {
296 |       /* fine */
297 |     }
298 |   }
299 | }
300 | 
301 | function tokenize(s: string, options: TokenOptions): Token[] | undefined {
302 |   const result = [];
303 |   for (const c of s) {
304 |     if (c === "-") {
305 |       result.push(new Token(TOKEN_MINUS, c));
306 |     } else if (c === options.decimalSeparator) {
307 |       result.push(new Token(TOKEN_DECIMAL_SEPARATOR, TOKEN_DECIMAL_SEPARATOR));
308 |     } else if (c === options.thousandSeparator) {
309 |       result.push(
310 |         new Token(TOKEN_THOUSAND_SEPARATOR, TOKEN_THOUSAND_SEPARATOR),
311 |       );
312 |     } else if (isDigit(c)) {
313 |       result.push(new Token(TOKEN_DIGIT, c));
314 |     } else if (isWhitespace(c)) {
315 |       result.push(new Token(TOKEN_WHITESPACE, c));
316 |     } else {
317 |       return undefined;
318 |     }
319 |   }
320 |   return result;
321 | }
322 | 
323 | export function checkConverterOptions(
324 |   converterOptions: StateConverterOptions | StateConverterOptionsWithContext,
325 | ): void {
326 |   if (
327 |     converterOptions.thousandSeparator === "." &&
328 |     converterOptions.decimalSeparator == null
329 |   ) {
330 |     throw new Error(
331 |       "Can't set thousandSeparator to . without setting decimalSeparator.",
332 |     );
333 |   }
334 |   if (
335 |     converterOptions.thousandSeparator === converterOptions.decimalSeparator &&
336 |     converterOptions.thousandSeparator != null
337 |   ) {
338 |     throw new Error(
339 |       "Can't set thousandSeparator and decimalSeparator to the same value.",
340 |     );
341 |   }
342 | }
343 | 


--------------------------------------------------------------------------------
/src/dynamic-converter.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   IConverter,
 3 |   StateConverterOptionsWithContext,
 4 |   PartialConverterFactory,
 5 |   converterEmptyImpossible,
 6 |   converterEmptyValue,
 7 | } from "./converter";
 8 | import { FieldAccessor } from "./field-accessor";
 9 | 
10 | export interface DynamicOptions<O> {
11 |   (context: any, accessor: FieldAccessor<any, any>): Partial<O>;
12 | }
13 | 
14 | export interface GetContextConverter<R, V> {
15 |   (context: any, accessor: FieldAccessor<any, any>): IConverter<R, V>;
16 | }
17 | 
18 | function delegatingConverter<R, V>(
19 |   defaultConverter: IConverter<R, V>,
20 |   getContextConverter: GetContextConverter<R, V>
21 | ): IConverter<R, V> {
22 |   return {
23 |     emptyRaw: defaultConverter.emptyRaw,
24 |     defaultControlled: defaultConverter.defaultControlled,
25 |     neverRequired: defaultConverter.neverRequired,
26 |     convert(raw: R, options: StateConverterOptionsWithContext) {
27 |       return getContextConverter(options.context, options.accessor).convert(
28 |         raw,
29 |         options
30 |       );
31 |     },
32 |     render(value: V, options: StateConverterOptionsWithContext) {
33 |       return getContextConverter(options.context, options.accessor).render(
34 |         value,
35 |         options
36 |       );
37 |     },
38 |     preprocessRaw(raw: R, options: StateConverterOptionsWithContext) {
39 |       return getContextConverter(
40 |         options.context,
41 |         options.accessor
42 |       ).preprocessRaw(raw, options);
43 |     },
44 |     isEmpty(raw: R, options: StateConverterOptionsWithContext) {
45 |       return getContextConverter(options.context, options.accessor).isEmpty(
46 |         raw,
47 |         options
48 |       );
49 |     },
50 |     emptyImpossible(options: StateConverterOptionsWithContext): boolean {
51 |       return converterEmptyImpossible(
52 |         getContextConverter(options.context, options.accessor),
53 |         options
54 |       );
55 |     },
56 |     emptyValue(options: StateConverterOptionsWithContext): V {
57 |       return converterEmptyValue(
58 |         getContextConverter(options.context, options.accessor),
59 |         options
60 |       );
61 |     },
62 |     hasChange(
63 |       currentValue: V,
64 |       newValue: V,
65 |       options: StateConverterOptionsWithContext
66 |     ): boolean {
67 |       return getContextConverter(options.context, options.accessor).hasChange(
68 |         currentValue,
69 |         newValue,
70 |         options
71 |       );
72 |     },
73 |   };
74 | }
75 | 
76 | export function dynamic<O, R, V>(
77 |   converterFactory: PartialConverterFactory<O, R, V>,
78 |   getOptions: DynamicOptions<O>
79 | ): IConverter<R, V> {
80 |   // the default converter is good enough for anything that
81 |   // isn't influenced by parameters anyway
82 |   const defaultConverter = converterFactory();
83 |   return delegatingConverter(
84 |     defaultConverter,
85 |     (context: any, accessor: FieldAccessor<any, any>) =>
86 |       converterFactory(getOptions(context, accessor))
87 |   );
88 | }
89 | 


--------------------------------------------------------------------------------
/src/field-accessor.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   action,
  3 |   observable,
  4 |   computed,
  5 |   isObservable,
  6 |   toJS,
  7 |   reaction,
  8 |   comparer,
  9 |   IReactionDisposer,
 10 |   override,
 11 |   makeObservable,
 12 | } from "mobx";
 13 | 
 14 | import {
 15 |   Field,
 16 |   ProcessValue,
 17 |   ValidationMessage,
 18 |   ProcessOptions,
 19 |   errorMessage,
 20 | } from "./form";
 21 | import { AnyFormState } from "./state";
 22 | import { FormAccessorBase } from "./form-accessor-base";
 23 | import { currentValidationProps } from "./validation-props";
 24 | import { ValidateOptions } from "./validate-options";
 25 | import { References, NoReferences, IReferences } from "./references";
 26 | import { pathToFieldref } from "./utils";
 27 | import { IAccessor, IAnyFormAccessor } from "./interfaces";
 28 | import { AccessorBase } from "./accessor-base";
 29 | import {
 30 |   isModelType,
 31 |   getType,
 32 |   getIdentifier,
 33 |   isStateTreeNode,
 34 |   isReferenceType,
 35 |   getChildType,
 36 | } from "mobx-state-tree";
 37 | import { converterEmptyImpossible, converterEmptyValue } from "./converter";
 38 | 
 39 | export class FieldAccessor<R, V> extends AccessorBase implements IAccessor {
 40 |   @observable
 41 |   _raw: R | undefined;
 42 | 
 43 |   @observable
 44 |   _value: V;
 45 | 
 46 |   @observable
 47 |   _originalValue: any;
 48 | 
 49 |   _disposer: IReactionDisposer | undefined;
 50 | 
 51 |   references: IReferences<any, any, any>;
 52 | 
 53 |   constructor(
 54 |     public state: AnyFormState,
 55 |     public field: Field<R, V>,
 56 |     parent: IAnyFormAccessor,
 57 |     public name: string
 58 |   ) {
 59 |     super(parent);
 60 |     makeObservable(this);
 61 |     this.createDerivedReaction();
 62 |     this._value = state.getValue(this.path);
 63 |     this.setOriginalValue();
 64 |     if (field.options && field.options.references) {
 65 |       const options = field.options.references;
 66 |       const dependentQuery = options.dependentQuery || (() => ({}));
 67 |       this.references = new References(options.source, () =>
 68 |         dependentQuery(this)
 69 |       );
 70 |     } else {
 71 |       this.references = new NoReferences();
 72 |     }
 73 |   }
 74 | 
 75 |   @action
 76 |   setOriginalValue(): void {
 77 |     if (isStateTreeNode(this._value) && isModelType(getType(this._value))) {
 78 |       this._originalValue = getIdentifier(this._value);
 79 |       return;
 80 |     }
 81 |     this._originalValue = toJS(this._value);
 82 |   }
 83 | 
 84 |   @computed
 85 |   get path(): string {
 86 |     return (
 87 |       (this.parent as FormAccessorBase<any, any, any>).path + "/" + this.name
 88 |     );
 89 |   }
 90 | 
 91 |   dispose() {
 92 |     if (this.references.isEnabled()) {
 93 |       this.references.clearAutoLoadReaction();
 94 |     }
 95 |     if (this._disposer == null) {
 96 |       return;
 97 |     }
 98 |     this._disposer();
 99 |   }
100 | 
101 |   clear() {
102 |     this.dispose();
103 |   }
104 | 
105 |   @override
106 |   get fieldref(): string {
107 |     return pathToFieldref(this.path);
108 |   }
109 | 
110 |   @override
111 |   get context(): any {
112 |     return this.state.context;
113 |   }
114 | 
115 |   @computed
116 |   get isEmpty(): boolean {
117 |     const converter = this.field.converter;
118 |     const stateConverterOptions =
119 |       this.state.stateConverterOptionsWithContext(this);
120 |     if (converterEmptyImpossible(converter, stateConverterOptions)) {
121 |       return false;
122 |     }
123 |     return converter.isEmpty(this.raw, stateConverterOptions);
124 |   }
125 | 
126 |   @computed
127 |   get isEmptyAndRequired(): boolean {
128 |     return this.isEmpty && this.required;
129 |   }
130 | 
131 |   createDerivedReaction() {
132 |     const derivedFunc = this.field.derivedFunc;
133 |     if (derivedFunc == null) {
134 |       return;
135 |     }
136 | 
137 |     if (this._disposer != null) {
138 |       return;
139 |     }
140 |     // XXX when we have a node that's undefined, we don't
141 |     // try to do any work. This isn't ideal but can happen
142 |     // if the path a node was pointing to has been removed.
143 |     const disposer = reaction(
144 |       () => {
145 |         return this.node != null ? derivedFunc(this.node) : undefined;
146 |       },
147 |       (derivedValue: any) => {
148 |         if (derivedValue === undefined) {
149 |           return;
150 |         }
151 |         this.setRaw(
152 |           this.field.render(
153 |             derivedValue,
154 |             this.state.stateConverterOptionsWithContext(this)
155 |           )
156 |         );
157 |       }
158 |     );
159 |     this._disposer = disposer;
160 |   }
161 | 
162 |   // XXX I think this should become private (_node), unless I
163 |   // guarantee the type without a lot of complication
164 |   @computed
165 |   get node(): any {
166 |     // XXX it's possible for this to be called for a node that has since
167 |     // been removed. It's not ideal but we return undefined in such a case.
168 |     try {
169 |       return this.state.getValue(
170 |         (this.parent as FormAccessorBase<any, any, any>).path
171 |       );
172 |     } catch {
173 |       return undefined;
174 |     }
175 |   }
176 | 
177 |   @computed
178 |   get addMode(): boolean {
179 |     if (this._raw !== undefined) {
180 |       return false;
181 |     }
182 |     // field accessor overrides this to look at raw value
183 |     return (
184 |       this._addMode || (this.parent as FormAccessorBase<any, any, any>).addMode
185 |     );
186 |   }
187 | 
188 |   @computed
189 |   get raw(): R {
190 |     const result = this._raw;
191 |     if (result !== undefined) {
192 |       // this is an object reference. don't convert to JS
193 |       // or if this is an array of references, don't convert to JS.
194 |       if (
195 |         (isObservable(result) && !(result instanceof Array)) ||
196 |         (isObservable(result) &&
197 |           result instanceof Array &&
198 |           isStateTreeNode(result) &&
199 |           isReferenceType(getChildType(result)))
200 |       ) {
201 |         return result as R;
202 |       }
203 | 
204 |       return toJS(result) as R;
205 |     }
206 |     if (this.addMode) {
207 |       return this.field.converter.emptyRaw;
208 |     }
209 |     return this.field.render(
210 |       this.value,
211 |       this.state.stateConverterOptionsWithContext(this)
212 |     );
213 |   }
214 | 
215 |   @action
216 |   setValue(value: V) {
217 |     // if there are no changes, don't do anything
218 |     if (comparer.structural(this._value, value)) {
219 |       return;
220 |     }
221 |     // if the converter does not see any changes, don't do anything as well
222 |     const stateConverterOptions =
223 |       this.state.stateConverterOptionsWithContext(this);
224 |     if (
225 |       !this.field.converter.hasChange(this._value, value, stateConverterOptions)
226 |     ) {
227 |       return;
228 |     }
229 | 
230 |     this._value = value;
231 | 
232 |     this.state.setValueWithoutRawUpdate(this.path, value);
233 |     // XXX maybe rename this to 'update' as change might imply onChange
234 |     // this is why I named 'updateFunc' on state that way instead of
235 |     // 'changeFunc'
236 |     const changeFunc = this.field.changeFunc;
237 |     if (changeFunc != null) {
238 |       changeFunc(this.node, value);
239 |     }
240 |     const updateFunc = this.state.updateFunc;
241 |     if (updateFunc != null) {
242 |       updateFunc(this);
243 |     }
244 |   }
245 | 
246 |   @action
247 |   setValueAndRawWithoutChangeEvent(value: V) {
248 |     // if there are no changes, don't do anything
249 |     if (comparer.structural(this._value, value)) {
250 |       return;
251 |     }
252 | 
253 |     this._value = value;
254 |     this.state.setValueWithoutRawUpdate(this.path, value);
255 |     this._raw = this.field.render(
256 |       value,
257 |       this.state.stateConverterOptionsWithContext(this)
258 |     );
259 |   }
260 | 
261 |   @computed
262 |   get value(): V {
263 |     if (this.addMode) {
264 |       throw new Error(
265 |         "Cannot access field in add mode until it has been set once"
266 |       );
267 |     }
268 |     return this._value;
269 |   }
270 | 
271 |   @override
272 |   get required(): boolean {
273 |     return (
274 |       !this.field.converter.neverRequired &&
275 |       (this.field.required ||
276 |         this._isRequired ||
277 |         this.state.isRequiredFunc(this))
278 |     );
279 |   }
280 | 
281 |   validate(options?: ValidateOptions): boolean {
282 |     const ignoreRequired = options != null ? options.ignoreRequired : false;
283 |     const ignoreGetError = options != null ? options.ignoreGetError : false;
284 |     this.setValueFromRaw(this.raw, { ignoreRequired });
285 |     if (ignoreGetError) {
286 |       return this.isInternallyValid;
287 |     }
288 |     return this.isValid;
289 |   }
290 | 
291 |   // XXX move into interface
292 |   @computed
293 |   get isInternallyValid(): boolean {
294 |     // is internally valid even if getError gives an error
295 |     return this._error === undefined;
296 |   }
297 | 
298 |   @computed
299 |   get isValid(): boolean {
300 |     return this.errorValue === undefined;
301 |   }
302 | 
303 |   @computed
304 |   get isDirty(): boolean {
305 |     if (this.addMode) {
306 |       return false;
307 |     }
308 |     if (Array.isArray(this.value)) {
309 |       const jsValue = toJS(this.value);
310 |       if (jsValue.length !== this._originalValue.length) {
311 |         return true;
312 |       }
313 |       return JSON.stringify(jsValue) !== JSON.stringify(this._originalValue);
314 |     }
315 | 
316 |     if (isStateTreeNode(this.value) && isModelType(getType(this.value))) {
317 |       return getIdentifier(this.value) !== this._originalValue;
318 |     }
319 | 
320 |     const jsValue = toJS(this.value);
321 | 
322 |     if (jsValue != null && (jsValue as any).constructor == {}.constructor) {
323 |       return JSON.stringify(jsValue) !== JSON.stringify(this._originalValue);
324 |     }
325 |     return jsValue !== this._originalValue;
326 |   }
327 | 
328 |   restore(): void {
329 |     // If this accessor is not dirty, don't bother to restore.
330 |     if (!this.isDirty) {
331 |       return;
332 |     }
333 |     this.setValueAndUpdateRaw(this._originalValue);
334 |     this.resetDirtyState();
335 |   }
336 | 
337 |   resetDirtyState(): void {
338 |     this.setOriginalValue();
339 |   }
340 | 
341 |   @computed
342 |   get requiredError(): string {
343 |     const requiredError = this.field.requiredError || this.state._requiredError;
344 |     return errorMessage(requiredError, this.state.context);
345 |   }
346 | 
347 |   @action
348 |   setValueFromRaw(raw: R, options?: ProcessOptions) {
349 |     const stateConverterOptions =
350 |       this.state.stateConverterOptionsWithContext(this);
351 | 
352 |     raw = this.field.converter.preprocessRaw(raw, stateConverterOptions);
353 | 
354 |     if (
355 |       this.field.isRequired(raw, this.required, options, stateConverterOptions)
356 |     ) {
357 |       if (
358 |         !converterEmptyImpossible(this.field.converter, stateConverterOptions)
359 |       ) {
360 |         this.setValue(
361 |           converterEmptyValue(this.field.converter, stateConverterOptions)
362 |         );
363 |       }
364 |       this.setError(this.requiredError);
365 |       return;
366 |     }
367 | 
368 |     let processResult;
369 |     try {
370 |       processResult = this.field.process(raw, stateConverterOptions);
371 |     } catch (e) {
372 |       this.setError("Something went wrong");
373 |       return;
374 |     }
375 | 
376 |     if (processResult instanceof ValidationMessage) {
377 |       this.setError(processResult.message);
378 |       return;
379 |     } else {
380 |       this.clearError();
381 |     }
382 |     if (!(processResult instanceof ProcessValue)) {
383 |       throw new Error("Unknown process result");
384 |     }
385 |     const extraResult = this.state.extraValidationFunc(
386 |       this,
387 |       processResult.value
388 |     );
389 |     // XXX possible flicker?
390 |     if (typeof extraResult === "string" && extraResult) {
391 |       this.setError(extraResult);
392 |     }
393 | 
394 |     this.setValue(processResult.value);
395 |   }
396 | 
397 |   @action
398 |   setRaw(raw: R, options?: ProcessOptions) {
399 |     if (this.state.saveStatus === "rightAfter") {
400 |       this.state.setSaveStatus("after");
401 |     }
402 | 
403 |     this._raw = raw;
404 | 
405 |     this.setValueFromRaw(raw, options);
406 |   }
407 | 
408 |   @action
409 |   setRawFromValue() {
410 |     // we get the value ignoring add mode
411 |     // this is why we can't use this.value
412 |     const value = this.state.getValue(this.path);
413 |     this._value = value;
414 | 
415 |     // we don't use setRaw on the field as the value is already
416 |     // correct. setting raw causes addMode for the field
417 |     // to be disabled
418 |     this._raw = this.field.render(
419 |       value,
420 |       this.state.stateConverterOptionsWithContext(this)
421 |     );
422 |     // trigger validation
423 |     this.validate();
424 |   }
425 | 
426 |   @action
427 |   setValueAndUpdateRaw(value: V) {
428 |     // We want to update a value through the accessor and also update the raw
429 |     this.setValue(value);
430 |     this.setRawFromValue();
431 |   }
432 | 
433 |   // XXX should these go into interface / base class?
434 |   @action
435 |   setError(error: string) {
436 |     this._error = error;
437 |   }
438 | 
439 |   // backward compatibility -- use setRaw instead
440 |   handleChange = (...args: any[]) => {
441 |     const raw = this.field.getRaw(...args);
442 |     this.setRaw(raw);
443 |   };
444 | 
445 |   handleFocus = (event: any) => {
446 |     if (this.state.focusFunc == null) {
447 |       return;
448 |     }
449 |     this.state.focusFunc(event, this);
450 |   };
451 | 
452 |   handleBlur = (event: any) => {
453 |     if (this.field.postprocess && !this._error) {
454 |       this.setRawFromValue();
455 |     }
456 |     if (this.state.blurFunc != null) {
457 |       this.state.blurFunc(event, this);
458 |     }
459 |   };
460 | 
461 |   @computed
462 |   get inputProps() {
463 |     const result = this.field.controlled(this);
464 |     result.disabled = this.disabled;
465 |     if (this.readOnly) {
466 |       result.readOnly = this.readOnly;
467 |     }
468 |     if (this.state.focusFunc != null) {
469 |       result.onFocus = this.handleFocus;
470 |     }
471 |     if (this.state.blurFunc != null || this.field.postprocess) {
472 |       result.onBlur = this.handleBlur;
473 |     }
474 |     return result;
475 |   }
476 | 
477 |   @computed
478 |   get validationProps(): Record<string, unknown> {
479 |     return currentValidationProps(this);
480 |   }
481 | 
482 |   accessBySteps(_steps: string[]): IAccessor {
483 |     throw new Error("Cannot step through field accessor");
484 |   }
485 | }
486 | 


--------------------------------------------------------------------------------
/src/form-accessor-base.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   observable,
  3 |   computed,
  4 |   action,
  5 |   makeObservable,
  6 |   runInAction,
  7 | } from "mobx";
  8 | import { IAnyModelType, Instance } from "mobx-state-tree";
  9 | 
 10 | import {
 11 |   SubForm,
 12 |   Field,
 13 |   FormDefinition,
 14 |   RepeatingForm,
 15 |   GroupDefinition,
 16 |   Group,
 17 | } from "./form";
 18 | import {
 19 |   FieldAccess,
 20 |   RepeatingFormAccess,
 21 |   SubFormAccess,
 22 |   GroupAccess,
 23 | } from "./accessor";
 24 | import { FieldAccessor } from "./field-accessor";
 25 | import { GroupAccessor } from "./group-accessor";
 26 | import { ValidateOptions } from "./validate-options";
 27 | import {
 28 |   IAccessor,
 29 |   IFormAccessor,
 30 |   ISubFormAccessor,
 31 |   IRepeatingFormAccessor,
 32 |   IParentAccessor,
 33 | } from "./interfaces";
 34 | import { AccessorBase } from "./accessor-base";
 35 | 
 36 | export abstract class FormAccessorBase<
 37 |     D extends FormDefinition<M>,
 38 |     G extends GroupDefinition<D>,
 39 |     M extends IAnyModelType
 40 |   >
 41 |   extends AccessorBase
 42 |   implements IFormAccessor<D, G, M>
 43 | {
 44 |   public keys: (keyof D)[];
 45 |   fieldAccessors: Map<keyof D, FieldAccessor<any, any>> = observable.map();
 46 |   repeatingFormAccessors: Map<keyof D, RepeatingFormAccess<D, keyof D, M>> =
 47 |     observable.map();
 48 |   subFormAccessors: Map<keyof D, ISubFormAccessor<any, any, any>> =
 49 |     observable.map();
 50 |   groupAccessors: Map<keyof G, GroupAccessor<any>> = observable.map();
 51 | 
 52 |   constructor(
 53 |     public definition: any,
 54 |     public groupDefinition: any,
 55 |     parent: IParentAccessor,
 56 |     addMode: boolean
 57 |   ) {
 58 |     super(parent);
 59 |     makeObservable(this);
 60 |     this.keys = Object.keys(this.definition);
 61 |     runInAction(() => {
 62 |       this._addMode = addMode;
 63 |     });
 64 |   }
 65 | 
 66 |   validate(options?: ValidateOptions): boolean {
 67 |     const values = this.accessors.map((accessor) => accessor.validate(options));
 68 |     const ignoreGetError = options != null ? options.ignoreGetError : false;
 69 |     if (!ignoreGetError) {
 70 |       values.push(this.errorValue === undefined); // add possible error of the form itself
 71 |     }
 72 |     return values.every((value) => value);
 73 |   }
 74 | 
 75 |   dispose() {
 76 |     // no op
 77 |   }
 78 | 
 79 |   @computed
 80 |   get value(): Instance<M> {
 81 |     return this.state.getValue(this.path);
 82 |   }
 83 | 
 84 |   @computed
 85 |   get isValid(): boolean {
 86 |     return (
 87 |       this.errorValue == null &&
 88 |       this.accessors.every((accessor) => accessor.isValid)
 89 |     );
 90 |   }
 91 | 
 92 |   @computed
 93 |   get isDirty(): boolean {
 94 |     return this.accessors.some((accessor) => accessor.isDirty);
 95 |   }
 96 | 
 97 |   restore(): void {
 98 |     // If this accessor is not dirty, don't bother to restore.
 99 |     if (!this.isDirty) {
100 |       return;
101 |     }
102 |     this.accessors.forEach((accessor) => accessor.restore());
103 |   }
104 | 
105 |   resetDirtyState(): void {
106 |     this.accessors.forEach((accessor) => accessor.resetDirtyState());
107 |   }
108 | 
109 |   @computed
110 |   get accessors(): IAccessor[] {
111 |     const result: IAccessor[] = [];
112 | 
113 |     this.keys.forEach((key) => {
114 |       const entry = this.definition[key];
115 |       if (entry instanceof Field) {
116 |         result.push(this.field(key as keyof D));
117 |       } else if (entry instanceof RepeatingForm) {
118 |         result.push(this.repeatingForm(key as keyof D));
119 |       } else if (entry instanceof SubForm) {
120 |         result.push(this.subForm(key as keyof D));
121 |       }
122 |     });
123 |     return result;
124 |   }
125 | 
126 |   @action
127 |   setAddModeDefaults(addModeDefaults: string[]) {
128 |     const fieldrefSet = new Set<string>();
129 |     const fieldrefPrefix = this.fieldref !== "" ? this.fieldref + "." : "";
130 | 
131 |     addModeDefaults.forEach((fieldref) => {
132 |       fieldrefSet.add(fieldrefPrefix + fieldref);
133 |     });
134 |     this.accessors.forEach((accessor) => {
135 |       if (accessor instanceof FieldAccessor) {
136 |         if (fieldrefSet.has(accessor.fieldref)) {
137 |           if (accessor.field.derivedFunc == null) {
138 |             accessor.setRawFromValue();
139 |           } else {
140 |             accessor.setValueAndRawWithoutChangeEvent(
141 |               accessor.field.derivedFunc(accessor.node)
142 |             );
143 |           }
144 |         }
145 |       }
146 |     });
147 |   }
148 | 
149 |   @computed
150 |   get addMode(): boolean {
151 |     if (this._addMode) {
152 |       return true;
153 |     }
154 |     if (this.parent == null) {
155 |       return false;
156 |     }
157 |     return this.parent.addMode;
158 |   }
159 | 
160 |   access(name: string): IAccessor | undefined {
161 |     if (!this.keys.includes(name)) {
162 |       return undefined;
163 |     }
164 | 
165 |     // XXX catching errors isn't ideal
166 |     try {
167 |       return this.field(name as keyof D);
168 |     } catch {
169 |       try {
170 |         return this.repeatingForm(name as keyof D);
171 |       } catch {
172 |         try {
173 |           return this.subForm(name as keyof D);
174 |         } catch {
175 |           return undefined;
176 |         }
177 |       }
178 |     }
179 |   }
180 | 
181 |   accessBySteps(steps: string[]): IAccessor | undefined {
182 |     if (steps.length === 0) {
183 |       return this;
184 |     }
185 |     const [first, ...rest] = steps;
186 |     const accessor = this.access(first);
187 |     if (rest.length === 0) {
188 |       return accessor;
189 |     }
190 |     if (accessor === undefined) {
191 |       return accessor;
192 |     }
193 |     return accessor.accessBySteps(rest);
194 |   }
195 | 
196 |   @action
197 |   initialize() {
198 |     this.keys.forEach((key) => {
199 |       const entry = this.definition[key];
200 |       if (entry instanceof Field) {
201 |         this.createField(key as keyof D, entry);
202 |       } else if (entry instanceof RepeatingForm) {
203 |         this.createRepeatingForm(key as keyof D, entry);
204 |       } else if (entry instanceof SubForm) {
205 |         this.createSubForm(key as keyof D, entry);
206 |       }
207 |     });
208 |     if (this.groupDefinition != null) {
209 |       // we don't have access to the group definition here yet
210 |       Object.keys(this.groupDefinition).forEach((key) => {
211 |         const entry = this.groupDefinition[key];
212 |         this.createGroup(key, entry);
213 |       });
214 |     }
215 |   }
216 | 
217 |   createField<K extends keyof D>(name: K, field: Field<any, any>) {
218 |     const result = new FieldAccessor(
219 |       this.state,
220 |       field,
221 |       this as IFormAccessor<D, G, M>,
222 |       name as string
223 |     );
224 |     this.fieldAccessors.set(name, result);
225 |   }
226 | 
227 |   field<K extends keyof D>(name: K): FieldAccess<D, K> {
228 |     const accessor = this.fieldAccessors.get(name);
229 |     if (accessor == null) {
230 |       throw new Error(`${String(name)} is not a Field`);
231 |     }
232 |     return accessor;
233 |   }
234 | 
235 |   createRepeatingForm<K extends keyof D>(
236 |     name: K,
237 |     repeatingForm: RepeatingForm<any, any>
238 |   ) {
239 |     const result = this.state.createRepeatingFormAccessor(
240 |       repeatingForm,
241 |       this as FormAccessorBase<any, any, any>,
242 |       name as string
243 |     );
244 |     this.repeatingFormAccessors.set(name, result);
245 |   }
246 | 
247 |   repeatingForm<K extends keyof D>(name: K): RepeatingFormAccess<D, K, M> {
248 |     const accessor = this.repeatingFormAccessors.get(name);
249 |     if (accessor == null) {
250 |       throw new Error(`${String(name)} is not a RepeatingForm`);
251 |     }
252 |     return accessor;
253 |   }
254 | 
255 |   createSubForm<K extends keyof D>(name: K, subForm: SubForm<any, any>) {
256 |     const result = this.state.createSubFormAccessor(
257 |       subForm.definition,
258 |       subForm.groupDefinition,
259 |       this as FormAccessorBase<any, any, any>,
260 |       name as string
261 |     );
262 |     this.subFormAccessors.set(name, result);
263 |   }
264 | 
265 |   subForm<K extends keyof D>(name: K): SubFormAccess<D, K, M> {
266 |     const accessor = this.subFormAccessors.get(name);
267 |     if (accessor == null) {
268 |       throw new Error(`${String(name)} is not a SubForm`);
269 |     }
270 |     return accessor;
271 |   }
272 | 
273 |   createGroup<K extends keyof G>(name: K, group: Group<any>) {
274 |     const result = new GroupAccessor(this.state, this.definition, this, group);
275 |     this.groupAccessors.set(name, result);
276 |   }
277 | 
278 |   group<K extends keyof G>(name: K): GroupAccess<D> {
279 |     const accessor = this.groupAccessors.get(name);
280 |     if (accessor == null) {
281 |       throw new Error(`${String(name)} is not a Group`);
282 |     }
283 |     return accessor;
284 |   }
285 | 
286 |   repeatingField(_name: string): any {
287 |     // not implemented yet
288 |   }
289 | }
290 | 


--------------------------------------------------------------------------------
/src/form.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   IMSTArray,
  3 |   IAnyModelType,
  4 |   ModelInstanceTypeProps,
  5 |   Instance,
  6 |   getNodeId,
  7 | } from "mobx-state-tree";
  8 | import {
  9 |   ConversionError,
 10 |   ConverterOrFactory,
 11 |   IConverter,
 12 |   StateConverterOptionsWithContext,
 13 |   converterEmptyImpossible,
 14 |   makeConverter,
 15 | } from "./converter";
 16 | import { FormState, FormStateOptions } from "./state";
 17 | import { Controlled } from "./controlled";
 18 | import { identity } from "./utils";
 19 | import { Query, Source } from "./source";
 20 | import { FieldAccessor } from "./field-accessor";
 21 | 
 22 | export type ArrayEntryType<T> = T extends IMSTArray<infer A>
 23 |   ? A extends IAnyModelType
 24 |     ? A
 25 |     : never
 26 |   : never;
 27 | 
 28 | export type RawType<F> = F extends Field<infer R, any> ? R : never;
 29 | 
 30 | export type ValueType<F> = F extends Field<any, infer V> ? V : never;
 31 | 
 32 | export type RepeatingFormDefinitionType<T> = T extends RepeatingForm<
 33 |   infer D,
 34 |   any
 35 | >
 36 |   ? D
 37 |   : never;
 38 | 
 39 | export type RepeatingFormGroupDefinitionType<T> = T extends RepeatingForm<
 40 |   any,
 41 |   infer G
 42 | >
 43 |   ? G
 44 |   : never;
 45 | 
 46 | export type SubFormDefinitionType<T> = T extends SubForm<infer D, any>
 47 |   ? D
 48 |   : never;
 49 | 
 50 | export type SubFormGroupDefinitionType<T> = T extends SubForm<any, infer G>
 51 |   ? G
 52 |   : never;
 53 | 
 54 | export type FormDefinition<M extends IAnyModelType> = InstanceFormDefinition<
 55 |   Instance<M>
 56 | >;
 57 | 
 58 | export type InstanceFormDefinition<M extends ModelInstanceTypeProps<any>> = {
 59 |   [K in keyof M]?:
 60 |     | Field<any, M[K]>
 61 |     | RepeatingForm<FormDefinition<ArrayEntryType<M[K]>>, any>
 62 |     | SubForm<FormDefinition<M[K]>, any>;
 63 | };
 64 | 
 65 | export type ValidationResponse = string | null | undefined | false;
 66 | 
 67 | export interface Validator<V> {
 68 |   (value: V, context?: any): ValidationResponse;
 69 | }
 70 | 
 71 | export interface Derived<V> {
 72 |   (node: any): V;
 73 | }
 74 | 
 75 | export interface Change<V> {
 76 |   (node: any, value: V): void;
 77 | }
 78 | 
 79 | export interface RawGetter<R> {
 80 |   (...args: any[]): R;
 81 | }
 82 | 
 83 | export interface ErrorFunc {
 84 |   (context: any): string;
 85 | }
 86 | 
 87 | export interface AccessorDependentQuery<DQ> {
 88 |   (accessor: FieldAccessor<any, any>): DQ;
 89 | }
 90 | 
 91 | export interface ReferenceOptions<SQ extends Query, DQ extends Query> {
 92 |   source: Source<any, SQ & DQ>;
 93 |   dependentQuery?: AccessorDependentQuery<DQ>;
 94 | }
 95 | 
 96 | export type ConversionErrors = {
 97 |   default: string | ErrorFunc;
 98 |   [key: string]: string | ErrorFunc;
 99 | };
100 | 
101 | export type ConversionErrorType = string | ErrorFunc | ConversionErrors;
102 | 
103 | export interface FieldOptions<R, V, SQ extends Query, DQ extends Query> {
104 |   getRaw?(...args: any[]): R;
105 |   rawValidators?: Validator<R>[];
106 |   validators?: Validator<V>[];
107 |   conversionError?: ConversionErrorType;
108 |   requiredError?: string | ErrorFunc;
109 |   required?: boolean;
110 |   fromEvent?: boolean;
111 |   derived?: Derived<V>;
112 |   change?: Change<V>;
113 |   controlled?: Controlled<R, V>;
114 |   references?: ReferenceOptions<SQ, DQ>;
115 |   postprocess?: boolean;
116 | }
117 | 
118 | export type GroupDefinition<D extends FormDefinition<any>> = {
119 |   [key: string]: Group<D>;
120 | };
121 | 
122 | // IDisposer is not (yet) exported by mobx-state-tree so
123 | // define our own
124 | // https://github.com/mobxjs/mobx-state-tree/issues/1169
125 | export type IDisposer = () => void;
126 | 
127 | const stateDisposers = new Map<number, IDisposer>();
128 | 
129 | export class Form<
130 |   M extends IAnyModelType,
131 |   D extends FormDefinition<M>,
132 |   G extends GroupDefinition<D>
133 | > {
134 |   constructor(
135 |     public model: M,
136 |     public definition: D,
137 |     public groupDefinition?: G
138 |   ) {}
139 | 
140 |   get FormStateType(): FormState<D, G, M> {
141 |     throw new Error("For introspection");
142 |   }
143 | 
144 |   state(node: Instance<M>, options?: FormStateOptions<M>): FormState<D, G, M> {
145 |     const nodeId = getNodeId(node);
146 |     // make sure we dispose of any old FormState before we create
147 |     // a new one.
148 |     const oldDisposer = stateDisposers.get(nodeId);
149 |     if (oldDisposer != null) {
150 |       oldDisposer();
151 |     }
152 |     const result = new FormState<D, G, M>(this, node, options);
153 |     // dispose of any old FormState for this same node
154 |     stateDisposers.set(nodeId, () => result.dispose());
155 |     return result;
156 |   }
157 | }
158 | 
159 | export class SubForm<
160 |   D extends FormDefinition<any>,
161 |   G extends GroupDefinition<D>
162 | > {
163 |   constructor(public definition: D, public groupDefinition?: G) {}
164 | }
165 | 
166 | export class ValidationMessage {
167 |   constructor(public message: string) {}
168 | }
169 | 
170 | export class ProcessValue<V> {
171 |   constructor(public value: V) {}
172 | }
173 | 
174 | export type ProcessResponse<V> = ProcessValue<V> | ValidationMessage;
175 | 
176 | export interface ProcessOptions {
177 |   ignoreRequired?: boolean;
178 | }
179 | 
180 | export class Field<R, V> {
181 |   rawValidators: Validator<R>[];
182 |   validators: Validator<V>[];
183 |   conversionError: ConversionErrorType;
184 |   requiredError?: string | ErrorFunc;
185 |   required: boolean;
186 |   getRaw: RawGetter<R>;
187 |   derivedFunc?: Derived<V>;
188 |   changeFunc?: Change<V>;
189 |   controlled: Controlled<R, V>;
190 |   postprocess: boolean;
191 |   _converter: ConverterOrFactory<R, V>;
192 | 
193 |   constructor(
194 |     converter: ConverterOrFactory<R, V>,
195 |     public options?: FieldOptions<R, V, any, any>
196 |   ) {
197 |     this._converter = converter;
198 |     if (!options) {
199 |       this.rawValidators = [];
200 |       this.validators = [];
201 |       this.conversionError = "Could not convert";
202 |       this.requiredError = undefined;
203 |       this.required = false;
204 |       this.getRaw = identity;
205 |       this.controlled = this.createDefaultControlled();
206 |       this.postprocess = false;
207 |     } else {
208 |       this.rawValidators = options.rawValidators ? options.rawValidators : [];
209 |       this.validators = options.validators ? options.validators : [];
210 |       this.conversionError = options.conversionError || "Could not convert";
211 |       this.requiredError = options.requiredError || undefined;
212 |       this.required = options.required || false;
213 |       if (options.fromEvent) {
214 |         if (options.getRaw) {
215 |           throw new Error(
216 |             "Cannot have fromEvent and getRaw defined at same time"
217 |           );
218 |         }
219 |         this.getRaw = (ev) => ev.target.value;
220 |       } else {
221 |         this.getRaw = options.getRaw || identity;
222 |       }
223 |       this.derivedFunc = options.derived;
224 |       this.changeFunc = options.change;
225 |       this.controlled = options.controlled || this.createDefaultControlled();
226 |       this.postprocess = !!options.postprocess;
227 |     }
228 |   }
229 | 
230 |   get converter(): IConverter<R, V> {
231 |     return makeConverter(this._converter);
232 |   }
233 | 
234 |   createDefaultControlled(): Controlled<R, V> {
235 |     if (this.getRaw !== identity) {
236 |       return (accessor) => {
237 |         return {
238 |           value: accessor.raw,
239 |           onChange: (...args: any[]) => accessor.setRaw(this.getRaw(...args)),
240 |         };
241 |       };
242 |     }
243 |     return this.converter.defaultControlled;
244 |   }
245 | 
246 |   get RawType(): R {
247 |     throw new Error("This is a function to enable type introspection");
248 |   }
249 | 
250 |   get ValueType(): V {
251 |     throw new Error("This is a function to enable type introspection");
252 |   }
253 | 
254 |   getConversionError(conversionError: ConversionError, context: any): string {
255 |     // if we have a simple conversion error defined, we use that
256 |     const resolveConversionError = this.conversionError;
257 |     if (
258 |       typeof resolveConversionError === "string" ||
259 |       typeof resolveConversionError === "function"
260 |     ) {
261 |       return errorMessage(resolveConversionError, context);
262 |     }
263 |     // we have a structure, so look things up
264 |     let resolved = resolveConversionError[conversionError.type];
265 |     if (resolved === undefined) {
266 |       resolved = resolveConversionError.default;
267 |     }
268 |     return errorMessage(resolved, context);
269 |   }
270 | 
271 |   isRequired(
272 |     raw: R,
273 |     required: boolean,
274 |     options: ProcessOptions | undefined,
275 |     stateConverterOptions: StateConverterOptionsWithContext
276 |   ): boolean {
277 |     if (!this.converter.isEmpty(raw, stateConverterOptions)) {
278 |       return false;
279 |     }
280 |     if (
281 |       !this.converter.neverRequired &&
282 |       converterEmptyImpossible(this.converter, stateConverterOptions)
283 |     ) {
284 |       return true;
285 |     }
286 |     const ignoreRequired: boolean =
287 |       options != null ? !!options.ignoreRequired : false;
288 |     if (this.converter.neverRequired || ignoreRequired) {
289 |       return false;
290 |     }
291 |     return required;
292 |   }
293 | 
294 |   process(
295 |     raw: R,
296 |     stateConverterOptions: StateConverterOptionsWithContext
297 |   ): ProcessResponse<V> {
298 |     for (const validator of this.rawValidators) {
299 |       const validationResponse = validator(raw, stateConverterOptions.context);
300 |       if (typeof validationResponse === "string" && validationResponse) {
301 |         return new ValidationMessage(validationResponse);
302 |       }
303 |     }
304 |     const result = this.converter.convert(raw, stateConverterOptions);
305 |     if (result instanceof ConversionError) {
306 |       return new ValidationMessage(
307 |         this.getConversionError(result, stateConverterOptions.context)
308 |       );
309 |     }
310 |     for (const validator of this.validators) {
311 |       const validationResponse = validator(
312 |         result.value,
313 |         stateConverterOptions.context
314 |       );
315 |       if (typeof validationResponse === "string" && validationResponse) {
316 |         return new ValidationMessage(validationResponse);
317 |       }
318 |     }
319 |     return new ProcessValue(result.value);
320 |   }
321 | 
322 |   render(value: V, stateConverterOptions: StateConverterOptionsWithContext): R {
323 |     return this.converter.render(value, stateConverterOptions);
324 |   }
325 | }
326 | 
327 | export class RepeatingForm<
328 |   D extends FormDefinition<any>,
329 |   G extends GroupDefinition<D>
330 | > {
331 |   constructor(public definition: D, public groupDefinition?: G) {}
332 | }
333 | 
334 | export interface GroupOptions<D extends FormDefinition<any>> {
335 |   include?: (keyof D)[];
336 |   exclude?: (keyof D)[];
337 | }
338 | 
339 | export class Group<D extends FormDefinition<any>> {
340 |   constructor(public options: GroupOptions<D>) {}
341 | }
342 | 
343 | export function errorMessage(message: string | ErrorFunc, context: any) {
344 |   if (typeof message === "string") {
345 |     return message;
346 |   }
347 |   return message(context);
348 | }
349 | 


--------------------------------------------------------------------------------
/src/group-accessor.ts:
--------------------------------------------------------------------------------
  1 | import { computed, makeObservable } from "mobx";
  2 | import { FormDefinition, Group } from "./form";
  3 | import { AnyFormState } from "./state";
  4 | import { FormAccessorBase } from "./form-accessor-base";
  5 | 
  6 | export class GroupAccessor<D extends FormDefinition<any>> {
  7 |   constructor(
  8 |     public state: AnyFormState,
  9 |     public definition: D,
 10 |     public parent: FormAccessorBase<any, any, any>,
 11 |     public group: Group<D>
 12 |   ) {
 13 |     makeObservable(this);
 14 |   }
 15 | 
 16 |   @computed
 17 |   get isValid(): boolean {
 18 |     return this.handleNames(this.isValidForNames.bind(this));
 19 |   }
 20 | 
 21 |   @computed
 22 |   get isWarningFree(): boolean {
 23 |     return this.handleNames(this.isWarningFreeForNames.bind(this));
 24 |   }
 25 | 
 26 |   @computed
 27 |   get isDirty(): boolean {
 28 |     return this.handleNames(this.isDirtyForNames.bind(this));
 29 |   }
 30 | 
 31 |   restore(): void {
 32 |     this.handleNames(this.handleRestore.bind(this));
 33 |   }
 34 | 
 35 |   resetDirtyState(): void {
 36 |     this.handleNames(this.handleResetDirtyState.bind(this));
 37 |   }
 38 | 
 39 |   handleRestore(names: (keyof D)[]): boolean {
 40 |     names.forEach((key) => {
 41 |       const accessor = this.parent.access(key as string);
 42 |       if (accessor == null) {
 43 |         return true;
 44 |       }
 45 |       return accessor.restore();
 46 |     });
 47 |     return true;
 48 |   }
 49 | 
 50 |   handleResetDirtyState(names: (keyof D)[]): boolean {
 51 |     names.forEach((key) => {
 52 |       const accessor = this.parent.access(key as string);
 53 |       if (accessor == null) {
 54 |         return true;
 55 |       }
 56 |       return accessor.resetDirtyState();
 57 |     });
 58 |     return true;
 59 |   }
 60 | 
 61 |   handleNames(feedbackFunc: (names: (keyof D)[]) => boolean): boolean {
 62 |     const include = this.group.options.include;
 63 |     const exclude = this.group.options.exclude;
 64 |     if (include != null && exclude != null) {
 65 |       throw new Error("Cannot include and exclude fields at the same time.");
 66 |     }
 67 |     if (include != null) {
 68 |       return feedbackFunc(include);
 69 |     }
 70 |     if (exclude != null) {
 71 |       return feedbackFunc(this.notExcluded(exclude));
 72 |     }
 73 |     throw new Error("Must include or exclude some fields");
 74 |   }
 75 | 
 76 |   notExcluded(names: (keyof D)[]): (keyof D)[] {
 77 |     const keys = this.parent.keys as (keyof D)[];
 78 |     return keys.filter((name) => !names.includes(name));
 79 |   }
 80 | 
 81 |   isValidForNames(names: (keyof D)[]): boolean {
 82 |     return names.every((key) => {
 83 |       const accessor = this.parent.access(key as string);
 84 |       if (accessor == null) {
 85 |         return true;
 86 |       }
 87 |       return accessor.isValid;
 88 |     });
 89 |   }
 90 | 
 91 |   isWarningFreeForNames(names: (keyof D)[]): boolean {
 92 |     return names.every((key) => {
 93 |       const accessor = this.parent.access(key as string);
 94 |       if (accessor == null) {
 95 |         return true;
 96 |       }
 97 |       return accessor.isWarningFree;
 98 |     });
 99 |   }
100 | 
101 |   isDirtyForNames(names: (keyof D)[]): boolean {
102 |     return names.some((key) => {
103 |       const accessor = this.parent.access(key as string);
104 |       if (accessor == null) {
105 |         return false;
106 |       }
107 |       return accessor.isDirty;
108 |     });
109 |   }
110 | }
111 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | export * from "./form";
 2 | export * from "./converter";
 3 | export * from "./converters";
 4 | export * from "./interfaces";
 5 | export * from "./field-accessor";
 6 | export * from "./repeating-form-accessor";
 7 | export * from "./repeating-form-indexed-accessor";
 8 | export * from "./sub-form-accessor";
 9 | export * from "./validation-props";
10 | export * from "./controlled";
11 | export * from "./state";
12 | export * from "./source";
13 | export * from "./backend";
14 | export * from "./decimal-type";
15 | export { IReferences, References, NoReferences } from "./references";
16 | 


--------------------------------------------------------------------------------
/src/interfaces.ts:
--------------------------------------------------------------------------------
  1 | import { Instance, IAnyModelType } from "mobx-state-tree";
  2 | 
  3 | import { ValidateOptions } from "./validate-options";
  4 | import { ExternalMessages } from "./validationMessages";
  5 | import {
  6 |   FieldAccess,
  7 |   RepeatingFormAccess,
  8 |   SubFormAccess,
  9 |   GroupAccess,
 10 | } from "./accessor";
 11 | import { FormDefinition, GroupDefinition } from "./form";
 12 | import { AccessUpdate } from "./backend";
 13 | import { AnyFormState } from "./state";
 14 | 
 15 | export interface IAccessor {
 16 |   path: string;
 17 |   fieldref: string;
 18 |   error: string | undefined;
 19 |   warning: string | undefined;
 20 |   warningValue: string | undefined;
 21 |   isWarningFree: boolean;
 22 |   disabled: boolean;
 23 |   hidden: boolean;
 24 |   readOnly: boolean;
 25 |   inputAllowed: boolean;
 26 |   externalErrors: ExternalMessages;
 27 |   externalWarnings: ExternalMessages;
 28 |   value: any;
 29 |   addMode: boolean;
 30 |   context: any;
 31 |   parent: IParentAccessor;
 32 |   state: AnyFormState;
 33 | 
 34 |   validate(options?: ValidateOptions): boolean;
 35 | 
 36 |   isValid: boolean;
 37 |   isDirty: boolean;
 38 | 
 39 |   accessors: IAccessor[];
 40 |   flatAccessors: IAccessor[];
 41 |   accessBySteps(steps: string[]): IAccessor | undefined;
 42 |   resetDirtyState(): void;
 43 |   restore(): void;
 44 | 
 45 |   dispose(): void;
 46 |   clear(): void;
 47 | 
 48 |   setAccess(update: AccessUpdate): void;
 49 |   clearError(): void;
 50 | }
 51 | 
 52 | export interface IFormAccessor<
 53 |   D extends FormDefinition<M>,
 54 |   G extends GroupDefinition<D>,
 55 |   M extends IAnyModelType
 56 | > extends IAccessor {
 57 |   access(name: string): IAccessor | undefined;
 58 | 
 59 |   field<K extends keyof D>(name: K): FieldAccess<D, K>;
 60 |   repeatingForm<K extends keyof D>(name: K): RepeatingFormAccess<D, K, M>;
 61 |   subForm<K extends keyof D>(name: K): SubFormAccess<D, K, M>;
 62 |   group<K extends keyof G>(name: K): GroupAccess<D>;
 63 | }
 64 | 
 65 | export interface ISubFormAccessor<
 66 |   D extends FormDefinition<M>,
 67 |   G extends GroupDefinition<D>,
 68 |   M extends IAnyModelType
 69 | > extends IFormAccessor<D, G, M> {
 70 |   name: string;
 71 | }
 72 | 
 73 | export interface IRepeatingFormAccessor<
 74 |   D extends FormDefinition<M>,
 75 |   G extends GroupDefinition<D>,
 76 |   M extends IAnyModelType
 77 | > extends IAccessor {
 78 |   length: number;
 79 | 
 80 |   index(index: number): IRepeatingFormIndexedAccessor<D, G, M>;
 81 |   insert(index: number, node: Instance<M>, addModeDefaults?: string[]): void;
 82 |   push(node: Instance<M>, addModeDefaults?: string[]): void;
 83 |   remove(node: Instance<M>): void;
 84 | 
 85 |   removeIndex(index: number): void;
 86 | }
 87 | 
 88 | export interface IRepeatingFormIndexedAccessor<
 89 |   D extends FormDefinition<M>,
 90 |   G extends GroupDefinition<D>,
 91 |   M extends IAnyModelType
 92 | > extends IFormAccessor<D, G, M> {
 93 |   index: number;
 94 |   _hash: string;
 95 | 
 96 |   setIndex(index: number): void;
 97 |   setAddMode(addModeDefaults: string[]): void;
 98 | }
 99 | 
100 | export type IParentAccessor =
101 |   | IFormAccessor<any, any, any>
102 |   | IRepeatingFormAccessor<any, any, any>
103 |   | undefined;
104 | 
105 | export type IAnyRepeatingFormIndexedAccessor = IRepeatingFormIndexedAccessor<
106 |   any,
107 |   any,
108 |   any
109 | >;
110 | 
111 | export type IAnyRepeatingFormAccessor = IRepeatingFormAccessor<any, any, any>;
112 | 
113 | export type IAnySubFormAccessor = ISubFormAccessor<any, any, any>;
114 | 
115 | export type IAnyFormAccessor = IFormAccessor<any, any, any>;
116 | 


--------------------------------------------------------------------------------
/src/references.ts:
--------------------------------------------------------------------------------
  1 | import { reaction, IReactionDisposer } from "mobx";
  2 | import { Instance, IAnyModelType } from "mobx-state-tree";
  3 | import { ISource, Query } from "./source";
  4 | 
  5 | export interface IReferences<
  6 |   T extends IAnyModelType,
  7 |   SQ extends Query,
  8 |   _DQ extends Query
  9 | > {
 10 |   autoLoadReaction(): IReactionDisposer;
 11 |   clearAutoLoadReaction(): void;
 12 |   load(searchQuery?: SQ): Promise<Instance<T>[]>;
 13 |   loadWithTimestamp(
 14 |     timestamp: number,
 15 |     searchQuery?: SQ
 16 |   ): Promise<Instance<T>[]>;
 17 |   values(searchQuery?: SQ): Instance<T>[] | undefined;
 18 |   getById(id: any): Instance<T> | undefined;
 19 |   isEnabled(): boolean;
 20 | }
 21 | 
 22 | export interface DependentQuery<DQ> {
 23 |   (): DQ;
 24 | }
 25 | 
 26 | export class References<
 27 |   T extends IAnyModelType,
 28 |   SQ extends Query,
 29 |   DQ extends Query
 30 | > implements IReferences<T, SQ, DQ>
 31 | {
 32 |   constructor(
 33 |     public source: ISource<T, SQ & DQ>,
 34 |     public dependentQuery: DependentQuery<DQ> = () => ({} as DQ)
 35 |   ) {}
 36 | 
 37 |   _autoLoadDisposer: IReactionDisposer | undefined;
 38 | 
 39 |   autoLoadReaction(): IReactionDisposer {
 40 |     this._autoLoadDisposer = reaction(
 41 |       () => {
 42 |         return this.dependentQuery();
 43 |       },
 44 |       () => {
 45 |         this.load();
 46 |       }
 47 |     );
 48 |     return this._autoLoadDisposer;
 49 |   }
 50 | 
 51 |   clearAutoLoadReaction(): void {
 52 |     if (this._autoLoadDisposer === undefined) {
 53 |       return;
 54 |     }
 55 |     this._autoLoadDisposer();
 56 |   }
 57 | 
 58 |   getFullQuery(searchQuery?: SQ): SQ & DQ {
 59 |     if (searchQuery == null) {
 60 |       searchQuery = {} as SQ;
 61 |     }
 62 |     return {
 63 |       ...searchQuery,
 64 |       ...this.dependentQuery(),
 65 |     };
 66 |   }
 67 | 
 68 |   async loadWithTimestamp(
 69 |     timestamp: number,
 70 |     searchQuery?: SQ
 71 |   ): Promise<Instance<T>[]> {
 72 |     return this.source.load(this.getFullQuery(searchQuery), timestamp);
 73 |   }
 74 | 
 75 |   async load(searchQuery?: SQ): Promise<Instance<T>[]> {
 76 |     return this.loadWithTimestamp(new Date().getTime(), searchQuery);
 77 |   }
 78 | 
 79 |   values(searchQuery?: SQ): Instance<T>[] | undefined {
 80 |     return this.source.values(this.getFullQuery(searchQuery));
 81 |   }
 82 | 
 83 |   getById(id: any): Instance<T> | undefined {
 84 |     return this.source.getById(id);
 85 |   }
 86 | 
 87 |   isEnabled(): boolean {
 88 |     return true;
 89 |   }
 90 | }
 91 | 
 92 | export class NoReferences<SQ extends Query, DQ extends Query>
 93 |   implements IReferences<any, SQ, DQ>
 94 | {
 95 |   autoLoadReaction(): IReactionDisposer {
 96 |     throw new Error(`No references defined`);
 97 |   }
 98 | 
 99 |   clearAutoLoadReaction(): void {
100 |     throw new Error(`No references defined`);
101 |   }
102 | 
103 |   async loadWithTimestamp(
104 |     timestamp: number,
105 |     searchQuery?: SQ
106 |   ): Promise<Instance<IAnyModelType>[]> {
107 |     throw new Error(`No references defined`);
108 |   }
109 | 
110 |   async load(searchQuery?: SQ): Promise<Instance<IAnyModelType>[]> {
111 |     throw new Error(`No references defined`);
112 |   }
113 | 
114 |   values(searchQuery?: SQ): Instance<IAnyModelType>[] | undefined {
115 |     throw new Error(`No references defined`);
116 |   }
117 | 
118 |   getById(id: any): Instance<IAnyModelType> {
119 |     throw new Error(`No references defined`);
120 |   }
121 | 
122 |   isEnabled(): boolean {
123 |     return false;
124 |   }
125 | }
126 | 


--------------------------------------------------------------------------------
/src/repeating-form-accessor.ts:
--------------------------------------------------------------------------------
  1 | import { observable, computed, makeObservable, action, toJS } from "mobx";
  2 | import {
  3 |   IAnyModelType,
  4 |   applyPatch,
  5 |   Instance,
  6 |   getSnapshot,
  7 |   cast,
  8 | } from "mobx-state-tree";
  9 | 
 10 | import { FormDefinition, RepeatingForm, GroupDefinition } from "./form";
 11 | import { AnyFormState } from "./state";
 12 | import { RepeatingFormIndexedAccessor } from "./repeating-form-indexed-accessor";
 13 | import { AccessorBase } from "./accessor-base";
 14 | import { ValidateOptions } from "./validate-options";
 15 | import { ExternalMessages } from "./validationMessages";
 16 | import {
 17 |   IAccessor,
 18 |   IRepeatingFormIndexedAccessor,
 19 |   IRepeatingFormAccessor,
 20 |   IAnyFormAccessor,
 21 | } from "./interfaces";
 22 | 
 23 | export class RepeatingFormAccessor<
 24 |     D extends FormDefinition<M>,
 25 |     G extends GroupDefinition<D>,
 26 |     M extends IAnyModelType
 27 |   >
 28 |   extends AccessorBase
 29 |   implements IRepeatingFormAccessor<D, G, M>
 30 | {
 31 |   name: string;
 32 | 
 33 |   @observable
 34 |   repeatingFormIndexedAccessors: Map<
 35 |     number,
 36 |     IRepeatingFormIndexedAccessor<D, G, M>
 37 |   > = observable.map();
 38 | 
 39 |   externalErrors = new ExternalMessages();
 40 |   externalWarnings = new ExternalMessages();
 41 |   @observable _originalValue: any[] = [];
 42 |   @observable _originalHashes: string[] = [];
 43 | 
 44 |   constructor(
 45 |     public state: AnyFormState,
 46 |     public repeatingForm: RepeatingForm<D, G>,
 47 |     public parent: IAnyFormAccessor,
 48 |     name: string
 49 |   ) {
 50 |     super(parent);
 51 |     makeObservable(this);
 52 |     this.name = name;
 53 |     this.initialize();
 54 |     this.setOriginalValue();
 55 |   }
 56 | 
 57 |   @computed
 58 |   get path(): string {
 59 |     return this.parent.path + "/" + this.name;
 60 |   }
 61 | 
 62 |   @computed
 63 |   get value(): Instance<M>[] {
 64 |     return this.state.getValue(this.path);
 65 |   }
 66 | 
 67 |   // XXX validate and isValid should be implemented on accessor?
 68 |   validate(options?: ValidateOptions): boolean {
 69 |     const values = this.accessors.map((accessor) => accessor.validate(options));
 70 |     // appending possible error on the repeatingform itself
 71 |     const ignoreGetError = options != null ? options.ignoreGetError : false;
 72 |     if (!ignoreGetError) {
 73 |       values.push(this.errorValue === undefined);
 74 |     }
 75 |     return values.every((value) => value);
 76 |   }
 77 | 
 78 |   @computed
 79 |   get isValid(): boolean {
 80 |     return (
 81 |       this.errorValue == null &&
 82 |       this.accessors.every((accessor) => accessor.isValid)
 83 |     );
 84 |   }
 85 | 
 86 |   @computed
 87 |   get addMode(): boolean {
 88 |     return this.parent.addMode;
 89 |   }
 90 | 
 91 |   @computed
 92 |   get isDirty(): boolean {
 93 |     // If length doesn't match we return true without checking further accessors
 94 |     if (this.length != this._originalHashes.length) {
 95 |       return true;
 96 |     }
 97 | 
 98 |     // If the hashes of our accessor don't match we know something has changed.
 99 |     if (!this.hashesMatch) {
100 |       return true;
101 |     }
102 | 
103 |     // If hashes do match, check if a nested accessor is dirty.
104 |     return this.accessors.some((accessor) => accessor.isDirty);
105 |   }
106 | 
107 |   @computed
108 |   get hashesMatch() {
109 |     const currentHashes = this.accessors
110 |       .map((accessor) => accessor._hash)
111 |       .sort()
112 |       .join(",");
113 |     const existingHashes = this._originalHashes.slice().sort().join(",");
114 |     return currentHashes == existingHashes;
115 |   }
116 | 
117 |   restore(): void {
118 |     // If this accessor isn't dirty, don't bother to restore.
119 |     if (!this.isDirty) {
120 |       return;
121 |     }
122 | 
123 |     // If hashes do match we don't need to restore any removed lines or remove
124 |     // newly added ones.
125 |     if (this.hashesMatch) {
126 |       this.accessors.forEach((accessor) => accessor.restore());
127 |       return;
128 |     }
129 | 
130 |     // If hashes do not match we need to restore from the original snapshot.
131 |     applyPatch(this.state.node, {
132 |       op: "replace",
133 |       path: this.path,
134 |       value: toJS(this._originalValue),
135 |     });
136 |     this.resetDirtyState();
137 |   }
138 | 
139 |   resetDirtyState(): void {
140 |     this.setOriginalValue();
141 |   }
142 | 
143 |   @action
144 |   setOriginalValue(): void {
145 |     this._originalValue = getSnapshot(cast(this.value));
146 |     this._originalHashes = this.accessors.map((accessor) => accessor._hash);
147 |   }
148 | 
149 |   initialize() {
150 |     const entries = this.state.getValue(this.path);
151 |     let i = 0;
152 |     entries.forEach(() => {
153 |       this.createFormIndexedAccessor(i);
154 |       i++;
155 |     });
156 |   }
157 | 
158 |   createFormIndexedAccessor(index: number) {
159 |     const result = new RepeatingFormIndexedAccessor(
160 |       this.state,
161 |       this.repeatingForm.definition,
162 |       this.repeatingForm.groupDefinition,
163 |       this,
164 |       index
165 |     );
166 |     this.repeatingFormIndexedAccessors.set(index, result);
167 |   }
168 | 
169 |   index(index: number): IRepeatingFormIndexedAccessor<D, G, M> {
170 |     const accessor = this.repeatingFormIndexedAccessors.get(index);
171 |     if (accessor == null) {
172 |       throw new Error(`${index} is not a RepeatingFormIndexedAccessor`);
173 |     }
174 |     return accessor;
175 |   }
176 | 
177 |   @computed
178 |   get accessors(): IRepeatingFormIndexedAccessor<D, G, M>[] {
179 |     const result = Array.from(this.repeatingFormIndexedAccessors.values());
180 |     result.sort((first, second) => first.index - second.index);
181 |     return result;
182 |   }
183 | 
184 |   accessBySteps(steps: string[]): IAccessor | undefined {
185 |     const [first, ...rest] = steps;
186 |     const nr = parseInt(first, 10);
187 |     if (isNaN(nr)) {
188 |       throw new Error("Expected index of repeating form");
189 |     }
190 |     const accessor = this.index(nr);
191 |     return accessor.accessBySteps(rest);
192 |   }
193 | 
194 |   insert(index: number, node: Instance<M>, addModeDefaults: string[] = []) {
195 |     const path = this.path + "/" + index;
196 |     applyPatch(this.state.node, [{ op: "add", path, value: node }]);
197 |     this.index(index).setAddMode(addModeDefaults);
198 |   }
199 | 
200 |   push(node: Instance<M>, addModeDefaults: string[] = []) {
201 |     const a = this.value;
202 |     const index = a.length;
203 |     const path = this.path + "/" + index;
204 |     applyPatch(this.state.node, [{ op: "add", path, value: node }]);
205 |     const indexedAccessor = this.index(index);
206 |     indexedAccessor.setAddMode(addModeDefaults);
207 |   }
208 | 
209 |   remove(node: Instance<M>) {
210 |     const a = this.value;
211 |     const index = a.indexOf(node);
212 |     if (index === -1) {
213 |       throw new Error("Cannot find node to remove.");
214 |     }
215 |     applyPatch(this.state.node, [
216 |       { op: "remove", path: this.path + "/" + index },
217 |     ]);
218 |   }
219 | 
220 |   removeIndex(index: number) {
221 |     const accessors = this.repeatingFormIndexedAccessors;
222 |     const isRemoved = accessors.delete(index);
223 |     if (!isRemoved) {
224 |       return;
225 |     }
226 |     const toDelete: number[] = [];
227 |     const toInsert: IRepeatingFormIndexedAccessor<any, any, any>[] = [];
228 | 
229 |     accessors.forEach((accessor, i) => {
230 |       if (i <= index) {
231 |         return;
232 |       }
233 |       accessor.setIndex(i - 1);
234 |       toDelete.push(i);
235 |       toInsert.push(accessor);
236 |     });
237 |     this.executeRenumber(toDelete, toInsert);
238 |   }
239 | 
240 |   addIndex(index: number) {
241 |     const accessors = this.repeatingFormIndexedAccessors;
242 | 
243 |     const toDelete: number[] = [];
244 |     const toInsert: IRepeatingFormIndexedAccessor<any, any, any>[] = [];
245 |     accessors.forEach((accessor, i) => {
246 |       if (i < index) {
247 |         return;
248 |       }
249 |       accessor.setIndex(i + 1);
250 |       toDelete.push(i);
251 |       toInsert.push(accessor);
252 |     });
253 |     this.executeRenumber(toDelete, toInsert);
254 |     this.createFormIndexedAccessor(index);
255 |   }
256 | 
257 |   private executeRenumber(
258 |     toDelete: number[],
259 |     toInsert: IRepeatingFormIndexedAccessor<any, any, any>[]
260 |   ) {
261 |     const accessors = this.repeatingFormIndexedAccessors;
262 | 
263 |     // first remove all accessors that are renumbered
264 |     toDelete.forEach((index) => {
265 |       accessors.delete(index);
266 |     });
267 |     // insert renumbered accessors all at once afterwards
268 |     toInsert.forEach((accessor) => {
269 |       accessors.set(accessor.index, accessor);
270 |     });
271 |   }
272 | 
273 |   @computed
274 |   get length(): number {
275 |     return this.value.length;
276 |   }
277 | }
278 | 


--------------------------------------------------------------------------------
/src/repeating-form-indexed-accessor.ts:
--------------------------------------------------------------------------------
 1 | import { action, observable, computed, makeObservable, override } from "mobx";
 2 | import { IAnyModelType, Instance } from "mobx-state-tree";
 3 | 
 4 | import { FormDefinition, GroupDefinition } from "./form";
 5 | import { AnyFormState } from "./state";
 6 | import { FormAccessorBase } from "./form-accessor-base";
 7 | import {
 8 |   IRepeatingFormIndexedAccessor,
 9 |   IRepeatingFormAccessor,
10 | } from "./interfaces";
11 | 
12 | export class RepeatingFormIndexedAccessor<
13 |     D extends FormDefinition<M>,
14 |     G extends GroupDefinition<D>,
15 |     M extends IAnyModelType
16 |   >
17 |   extends FormAccessorBase<D, G, M>
18 |   implements IRepeatingFormIndexedAccessor<D, G, M>
19 | {
20 |   @observable
21 |   index: number;
22 | 
23 |   // Store hash to easily determine whether we are (still) dealing with the same
24 |   // accessors in the parent.
25 |   _hash: string = (Math.random() + 1).toString(36).substring(4);
26 | 
27 |   constructor(
28 |     public state: AnyFormState,
29 |     definition: D,
30 |     groupDefinition: G | undefined,
31 |     public parent: IRepeatingFormAccessor<D, G, M>,
32 |     index: number
33 |   ) {
34 |     super(definition, groupDefinition, parent, false);
35 |     makeObservable(this);
36 |     this.index = index;
37 |     this.initialize();
38 |   }
39 | 
40 |   clear() {
41 |     this.flatAccessors.forEach((accessor) => {
42 |       accessor.clear();
43 |     });
44 |     this.parent.removeIndex(this.index);
45 |     this.dispose();
46 |   }
47 | 
48 |   @computed
49 |   get path(): string {
50 |     return this.parent.path + "/" + this.index;
51 |   }
52 | 
53 |   @override
54 |   get value(): Instance<M> {
55 |     return this.state.getValue(this.path);
56 |   }
57 | 
58 |   @action
59 |   setIndex(index: number) {
60 |     this.index = index;
61 |   }
62 | 
63 |   @action
64 |   setAddMode(addModeDefaults: string[]) {
65 |     this._addMode = true;
66 |     this.setAddModeDefaults(addModeDefaults);
67 |   }
68 | 
69 |   @override
70 |   get addMode(): boolean {
71 |     return this._addMode || this.parent.addMode;
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/src/source.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   observable,
  3 |   computed,
  4 |   action,
  5 |   runInAction,
  6 |   makeObservable,
  7 | } from "mobx";
  8 | import {
  9 |   applySnapshot,
 10 |   applyPatch,
 11 |   IMSTMap,
 12 |   IAnyModelType,
 13 |   Instance,
 14 |   SnapshotIn,
 15 |   protect,
 16 |   unprotect,
 17 |   getRoot,
 18 | } from "mobx-state-tree";
 19 | 
 20 | export type Query = Record<string, any>;
 21 | 
 22 | export interface ISource<T extends IAnyModelType, Q extends Query> {
 23 |   load(query?: Q, timestamp?: number): Promise<Instance<T>[]>;
 24 |   values(query?: Q): Instance<T>[] | undefined;
 25 |   getById(id: any): Instance<T> | undefined;
 26 | }
 27 | 
 28 | interface GetId<T> {
 29 |   (o: SnapshotIn<T>): string;
 30 | }
 31 | 
 32 | interface Load<T, Q extends Query> {
 33 |   (q: Q): Promise<SnapshotIn<T>[]>;
 34 | }
 35 | 
 36 | interface KeyForQuery<Q extends Query> {
 37 |   (q: Q): string;
 38 | }
 39 | 
 40 | interface CacheEntry<T> {
 41 |   timestamp: number;
 42 |   values: Instance<T>[];
 43 | }
 44 | 
 45 | type EntryMap<T extends IAnyModelType> = IMSTMap<T>;
 46 | 
 47 | interface EntryMapFunc<T extends IAnyModelType> {
 48 |   (): EntryMap<T>;
 49 | }
 50 | 
 51 | type GetEntryMap<T extends IAnyModelType> = EntryMap<T> | EntryMapFunc<T>;
 52 | 
 53 | export class Source<T extends IAnyModelType, Q extends Query>
 54 |   implements ISource<T, Q>
 55 | {
 56 |   _entryMap: GetEntryMap<T>;
 57 |   _load: Load<T, Q>;
 58 |   _getId: GetId<T>;
 59 |   _keyForQuery: KeyForQuery<Q>;
 60 |   _cacheDuration: number;
 61 | 
 62 |   // XXX this grows indefinitely with cached results...
 63 |   @observable
 64 |   _cache = new Map<string, CacheEntry<T>>();
 65 | 
 66 |   _existingLoadPromises = new Map<string, Promise<SnapshotIn<T>[]>>();
 67 | 
 68 |   constructor({
 69 |     entryMap,
 70 |     load,
 71 |     getId,
 72 |     keyForQuery,
 73 |     cacheDuration,
 74 |   }: {
 75 |     entryMap: GetEntryMap<T>;
 76 |     load: Load<T, Q>;
 77 |     getId?: GetId<T>;
 78 |     keyForQuery?: KeyForQuery<Q>;
 79 |     cacheDuration?: number;
 80 |     mapPropertyName?: string;
 81 |     defaultQuery?: () => Q;
 82 |   }) {
 83 |     makeObservable(this);
 84 |     this._entryMap = entryMap;
 85 |     this._load = load;
 86 |     if (getId == null) {
 87 |       getId = (o: any) => o.id;
 88 |     }
 89 |     this._getId = getId;
 90 |     if (keyForQuery === undefined) {
 91 |       keyForQuery = (q: Q) => JSON.stringify(q);
 92 |     }
 93 |     this._keyForQuery = keyForQuery;
 94 |     this._cacheDuration =
 95 |       (cacheDuration != null ? cacheDuration : 5 * 60) * 1000;
 96 |   }
 97 | 
 98 |   @computed
 99 |   get entryMap(): EntryMap<T> {
100 |     return typeof this._entryMap === "function"
101 |       ? this._entryMap()
102 |       : this._entryMap;
103 |   }
104 | 
105 |   getById(id: any): Instance<T> | undefined {
106 |     return this.entryMap.get(id);
107 |   }
108 | 
109 |   addOrUpdate(item: SnapshotIn<T>): Instance<T> {
110 |     const id = this._getId(item);
111 |     const entryMap = this.entryMap;
112 |     const existing = entryMap.get(id);
113 |     if (existing !== undefined) {
114 |       applySnapshot(existing, item);
115 |       return existing;
116 |     } else {
117 |       applyPatch(entryMap, {
118 |         op: "add",
119 |         path: "/" + id.toString(),
120 |         value: item,
121 |       });
122 |       return entryMap.get(id) as Instance<T>;
123 |     }
124 |   }
125 | 
126 |   @action
127 |   setCache(key: string, values: Instance<T>[], timestamp: number) {
128 |     this._cache.set(key, { values: values, timestamp: timestamp });
129 |   }
130 | 
131 |   getFullQuery(q?: Q): Q {
132 |     if (q == null) {
133 |       return {} as Q;
134 |     }
135 |     return q;
136 |   }
137 | 
138 |   async load(
139 |     q?: Q,
140 |     timestamp: number = new Date().getTime()
141 |   ): Promise<Instance<T>[]> {
142 |     q = this.getFullQuery(q);
143 |     const key = this._keyForQuery(q);
144 |     const result = this._cache.get(key);
145 |     if (
146 |       result !== undefined &&
147 |       timestamp < result.timestamp + this._cacheDuration
148 |     ) {
149 |       return result.values;
150 |     }
151 |     const items = await this.loadReusePromise(q);
152 |     const values = items.map((item: any) => this.addOrUpdate(item));
153 |     this.setCache(key, values, timestamp);
154 |     return values;
155 |   }
156 | 
157 |   async loadReusePromise(q: Q): Promise<SnapshotIn<T>[]> {
158 |     const key = this._keyForQuery(q);
159 |     const existingLoadPromise = this._existingLoadPromises.get(key);
160 |     if (existingLoadPromise != null) {
161 |       return existingLoadPromise;
162 |     }
163 |     const promise = this._load(q).finally(() =>
164 |       this._existingLoadPromises.delete(key)
165 |     );
166 |     this._existingLoadPromises.set(key, promise);
167 |     return promise;
168 |   }
169 | 
170 |   values(q?: Q): Instance<T>[] | undefined {
171 |     const result = this._cache.get(this._keyForQuery(this.getFullQuery(q)));
172 |     if (result == null) {
173 |       return undefined;
174 |     }
175 | 
176 |     return result.values;
177 |   }
178 | 
179 |   // calling this only makes sense if you use safeReference
180 |   // to refer to values
181 |   @action
182 |   clear() {
183 |     this._cache.clear();
184 |     this._existingLoadPromises.clear();
185 |     runInAction(() => {
186 |       const root = getRoot(this.entryMap);
187 |       unprotect(root);
188 |       try {
189 |         this.entryMap.clear();
190 |       } catch {
191 |         // make sure we protect in case of errors
192 |         protect(root);
193 |         return;
194 |       }
195 |       protect(root);
196 |     });
197 |   }
198 | }
199 | 


--------------------------------------------------------------------------------
/src/sub-form-accessor.ts:
--------------------------------------------------------------------------------
 1 | import { computed, makeObservable, override } from "mobx";
 2 | import { IAnyModelType, Instance } from "mobx-state-tree";
 3 | 
 4 | import { FormDefinition, GroupDefinition } from "./form";
 5 | import { AnyFormState } from "./state";
 6 | import { FormAccessorBase } from "./form-accessor-base";
 7 | import { ISubFormAccessor, IAnyFormAccessor } from "./interfaces";
 8 | 
 9 | export class SubFormAccessor<
10 |     D extends FormDefinition<M>,
11 |     G extends GroupDefinition<D>,
12 |     M extends IAnyModelType
13 |   >
14 |   extends FormAccessorBase<D, G, M>
15 |   implements ISubFormAccessor<D, G, M>
16 | {
17 |   constructor(
18 |     public state: AnyFormState,
19 |     definition: D,
20 |     groupDefinition: G | undefined,
21 |     public parent: IAnyFormAccessor,
22 |     public name: string
23 |   ) {
24 |     super(definition, groupDefinition, parent, false);
25 |     makeObservable(this);
26 |     this.name = name;
27 |     this.initialize();
28 |   }
29 | 
30 |   @computed
31 |   get path(): string {
32 |     return this.parent.path + "/" + this.name;
33 |   }
34 | 
35 |   @override
36 |   get value(): Instance<M> {
37 |     return this.state.getValue(this.path);
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | export function identity<T>(value: T): T {
 2 |   return value;
 3 | }
 4 | 
 5 | export function pathToSteps(path: string): string[] {
 6 |   if (path.startsWith("/")) {
 7 |     path = path.slice(1);
 8 |   }
 9 |   if (path === "") {
10 |     return [];
11 |   }
12 |   return path.split("/");
13 | }
14 | 
15 | export function stepsToPath(parts: string[]): string {
16 |   const result = parts.join("/");
17 |   if (!result.startsWith("/")) {
18 |     return "/" + result;
19 |   }
20 |   return result;
21 | }
22 | 
23 | export function isInt(s: string): boolean {
24 |   return Number.isInteger(parseInt(s, 10));
25 | }
26 | 
27 | export function getByPath(obj: any, path: string): string | undefined {
28 |   return getBySteps(obj, pathToSteps(path));
29 | }
30 | 
31 | function getBySteps(obj: any, steps: string[]): string | undefined {
32 |   const [first, ...rest] = steps;
33 |   if (rest.length === 0) {
34 |     return obj[first];
35 |   }
36 |   const sub = obj[first];
37 |   if (sub === undefined) {
38 |     return undefined;
39 |   }
40 |   return getBySteps(sub, rest);
41 | }
42 | 
43 | export function deleteByPath(obj: any, path: string) {
44 |   return deleteBySteps(obj, pathToSteps(path));
45 | }
46 | 
47 | function deleteBySteps(obj: any, steps: string[]) {
48 |   const [first, ...rest] = steps;
49 |   if (rest.length === 0) {
50 |     delete obj[first];
51 |   }
52 |   const sub = obj[first];
53 |   if (sub === undefined) {
54 |     return;
55 |   }
56 |   deleteBySteps(sub, rest);
57 | }
58 | 
59 | export function deepCopy(o: any): any {
60 |   // it's a crazy technique but it works for plain JSON, and
61 |   // we use it for errors which is plain JSON
62 |   return JSON.parse(JSON.stringify(o));
63 | }
64 | 
65 | // convert a JSON pointer, AKA a mobx-state-tree node path,
66 | // to a fieldref
67 | export function pathToFieldref(path: string): string {
68 |   if (path[0] === "/") {
69 |     path = path.slice(1);
70 |   }
71 | 
72 |   const steps = path.split("/");
73 |   const result: string[] = [];
74 |   for (const step of steps) {
75 |     if (isInt(step)) {
76 |       const last = result.pop();
77 |       result.push(last + "[]");
78 |     } else {
79 |       result.push(step);
80 |     }
81 |   }
82 |   return result.join(".");
83 | }
84 | 


--------------------------------------------------------------------------------
/src/validate-options.ts:
--------------------------------------------------------------------------------
1 | export interface ValidateOptions {
2 |   ignoreRequired?: boolean;
3 |   ignoreGetError?: boolean;
4 |   ignoreSaveStatus?: boolean;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/validation-props.ts:
--------------------------------------------------------------------------------
 1 | import { FieldAccessor } from "./field-accessor";
 2 | 
 3 | export interface ValidationProps {
 4 |   (accessor: FieldAccessor<any, any>): Record<string, unknown>;
 5 | }
 6 | 
 7 | export let currentValidationProps: ValidationProps = () => {
 8 |   return {};
 9 | };
10 | 
11 | export function setupValidationProps(validationProps: ValidationProps) {
12 |   currentValidationProps = validationProps;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/validationMessages.ts:
--------------------------------------------------------------------------------
 1 | import { observable, action, computed, makeObservable } from "mobx";
 2 | 
 3 | export type Message = {
 4 |   path: string;
 5 |   message: string;
 6 | };
 7 | 
 8 | export class ExternalMessages {
 9 |   messages: Map<string, string> = observable.map();
10 | 
11 |   constructor() {
12 |     makeObservable(this);
13 |   }
14 | 
15 |   @action
16 |   update(
17 |     validationIdToMessage: Map<string, string> | undefined,
18 |     affectedValidationIds: Set<string>
19 |   ) {
20 |     // remove all keys that are in affected validation ids
21 |     affectedValidationIds.forEach((key) => {
22 |       this.messages.delete(key);
23 |     });
24 |     // now add in the new messages if they exist
25 |     if (validationIdToMessage == null) {
26 |       return;
27 |     }
28 |     validationIdToMessage.forEach((value, key) => {
29 |       this.messages.set(key, value);
30 |     });
31 |   }
32 | 
33 |   @action
34 |   clear() {
35 |     this.messages.clear();
36 |   }
37 | 
38 |   @computed
39 |   get message() {
40 |     if (this.messages.size === 0) {
41 |       return undefined;
42 |     }
43 |     return Array.from(this.messages.values())[0];
44 |   }
45 | }
46 | 
47 | export type Validation = {
48 |   id: string;
49 |   messages: Message[];
50 | };
51 | 


--------------------------------------------------------------------------------
/test/accessor.test.ts:
--------------------------------------------------------------------------------
  1 | import { configure } from "mobx";
  2 | import { Instance, types } from "mobx-state-tree";
  3 | import {
  4 |   Field,
  5 |   Form,
  6 |   RepeatingForm,
  7 |   RepeatingFormAccessor,
  8 |   RepeatingFormIndexedAccessor,
  9 |   converters,
 10 |   FieldAccessor,
 11 |   Group,
 12 |   IAccessor,
 13 | } from "../src";
 14 | 
 15 | configure({ enforceActions: "always" });
 16 | 
 17 | test("accessByPath simple field", () => {
 18 |   const M = types.model("M", {
 19 |     foo: types.number,
 20 |   });
 21 |   const form = new Form(M, {
 22 |     foo: new Field(converters.number),
 23 |   });
 24 | 
 25 |   const o = M.create({ foo: 3 });
 26 | 
 27 |   const state = form.state(o);
 28 |   const accessor = state.accessByPath("/foo");
 29 |   expect(accessor).toBeInstanceOf(FieldAccessor);
 30 |   if (!(accessor instanceof FieldAccessor)) {
 31 |     throw new Error("For the typechecker");
 32 |   }
 33 |   expect(accessor.value).toEqual(3);
 34 | });
 35 | 
 36 | test("accessByPath repeating form", () => {
 37 |   const N = types.model("N", {
 38 |     foo: types.number,
 39 |     bar: types.number, // no field
 40 |   });
 41 |   const M = types.model("M", {
 42 |     entries: types.array(N),
 43 |   });
 44 | 
 45 |   const form = new Form(M, {
 46 |     entries: new RepeatingForm({
 47 |       foo: new Field(converters.number),
 48 |     }),
 49 |   });
 50 | 
 51 |   const o = M.create({ entries: [{ foo: 3, bar: 4 }] });
 52 | 
 53 |   const state = form.state(o);
 54 |   const accessor = state.accessByPath("/entries/0/foo");
 55 |   expect(accessor).toBeInstanceOf(FieldAccessor);
 56 |   if (!(accessor instanceof FieldAccessor)) {
 57 |     throw new Error("For the typechecker");
 58 |   }
 59 |   expect(accessor.value).toEqual(3);
 60 | 
 61 |   expect(state.accessByPath("/entries/0/bar")).toBeUndefined();
 62 | });
 63 | 
 64 | test("acccessByPath which has no field", () => {
 65 |   const M = types.model("M", {
 66 |     foo: types.number,
 67 |     bar: types.number,
 68 |   });
 69 |   // bar is not specified as a field
 70 |   const form = new Form(M, {
 71 |     foo: new Field(converters.number),
 72 |   });
 73 | 
 74 |   const o = M.create({ foo: 3, bar: 4 });
 75 | 
 76 |   const state = form.state(o);
 77 |   const accessor = state.accessByPath("/bar");
 78 |   expect(accessor).toBeUndefined();
 79 | });
 80 | 
 81 | test("groups with repeatingform error on top-level", async () => {
 82 |   const N = types.model("N", {
 83 |     bar: types.string,
 84 |   });
 85 |   const M = types.model("M", {
 86 |     foo: types.array(N),
 87 |   });
 88 | 
 89 |   const form = new Form(M, {
 90 |     foo: new RepeatingForm({
 91 |       bar: new Field(converters.string),
 92 |     }),
 93 |   });
 94 | 
 95 |   const o = M.create({ foo: [] });
 96 | 
 97 |   const state = form.state(o, {
 98 |     getError: (accessor: any) =>
 99 |       accessor instanceof RepeatingFormAccessor && accessor.length === 0
100 |         ? "Cannot be empty"
101 |         : undefined,
102 |     getWarning: (accessor: any) =>
103 |       accessor instanceof RepeatingFormAccessor
104 |         ? "Some some reason this is insufficient"
105 |         : undefined,
106 |   });
107 | 
108 |   const repeatingForm = state.repeatingForm("foo");
109 | 
110 |   expect(repeatingForm.isValid).toBeFalsy();
111 |   expect(repeatingForm.isWarningFree).toBeFalsy();
112 | });
113 | 
114 | test("groups with indexed repeatingform error on top-level", async () => {
115 |   const N = types.model("N", {
116 |     bar: types.string,
117 |   });
118 |   const M = types.model("M", {
119 |     foo: types.array(N),
120 |   });
121 | 
122 |   const form = new Form(M, {
123 |     foo: new RepeatingForm({
124 |       bar: new Field(converters.string),
125 |     }),
126 |   });
127 | 
128 |   const o = M.create({ foo: [{ bar: "BAR" }] });
129 | 
130 |   const state = form.state(o, {
131 |     getError: (accessor: any) =>
132 |       accessor instanceof RepeatingFormIndexedAccessor
133 |         ? "For some reason this is wrong"
134 |         : undefined,
135 |     getWarning: (accessor: any) =>
136 |       accessor instanceof RepeatingFormIndexedAccessor
137 |         ? "Some some reason this is insufficient"
138 |         : undefined,
139 |   });
140 | 
141 |   const repeatingForm = state.repeatingForm("foo");
142 |   const indexedRepeatingForm = repeatingForm.index(0);
143 | 
144 |   expect(indexedRepeatingForm.isValid).toBeFalsy();
145 |   expect(indexedRepeatingForm.isWarningFree).toBeFalsy();
146 | });
147 | 
148 | test("flatAccessors should return correct accessors", () => {
149 |   // Define Line3 model (deepest level)
150 |   const Line3 = types.model("Line3", {
151 |     value: types.string, // Line3 value
152 |   });
153 |   // Define Line2 model (middle level, contains Line3)
154 |   const Line2 = types
155 |     .model("Line2", {
156 |       value: types.string, // Line2 value
157 |       lines: types.array(Line3), // Each Line2 contains an array of Line3
158 |     })
159 |     .actions((self) => ({
160 |       addLine(line: Instance<typeof Line3>) {
161 |         self.lines.push(line);
162 |       },
163 |     }));
164 | 
165 |   // Define Line1 model (top level of lines, contains Line2)
166 |   const Line1 = types
167 |     .model("Line1", {
168 |       value: types.string, // Line1 value
169 |       lines: types.array(Line2), // Each Line1 contains an array of Line2
170 |     })
171 |     .actions((self) => ({
172 |       addLine(line: Instance<typeof Line2>) {
173 |         self.lines.push(line);
174 |       },
175 |     }));
176 | 
177 |   // Define the Bar model (contains Line1)
178 |   const Bar = types
179 |     .model("Bar", {
180 |       lines: types.array(Line1), // Each Bar contains an array of Line1
181 |     })
182 |     .actions((self) => ({
183 |       addLines() {
184 |         // Adding 100 Line1 elements, each containing 100 Line2 elements, each containing 10 Line3 elements
185 |         for (let i = 0; i < 100; i++) {
186 |           const line1 = Line1.create({
187 |             value: `Line1 #${i}`,
188 |             lines: [],
189 |           });
190 | 
191 |           for (let j = 0; j < 10; j++) {
192 |             const line2 = Line2.create({
193 |               value: `Line2 #${j}`,
194 |               lines: [],
195 |             });
196 | 
197 |             for (let k = 0; k < 1; k++) {
198 |               const line3 = Line3.create({
199 |                 value: `Line3 #${k}`,
200 |               });
201 |               line2.addLine(line3); // Add 1 Line3 instances to Line2
202 |             }
203 | 
204 |             line1.addLine(line2); // Add 10 Line2 instances to Line1
205 |           }
206 | 
207 |           self.lines.push(line1); // Add 100 Line1 instances to Bar
208 |         }
209 |       },
210 |     }));
211 | 
212 |   const barForm = new Form(Bar, {
213 |     lines: new RepeatingForm({
214 |       value: new Field(converters.string),
215 |       lines: new RepeatingForm({
216 |         value: new Field(converters.string),
217 |         lines: new RepeatingForm({
218 |           value: new Field(converters.string),
219 |         }),
220 |       }),
221 |     }),
222 |   });
223 |   const barObj = Bar.create();
224 |   const state = barForm.state(barObj);
225 |   // we add lines 100 x 10 x 1
226 |   barObj.addLines();
227 | 
228 |   // this was how the old flatAccessor method worked
229 |   const flatAccessorOldFunc = () => {
230 |     const result: IAccessor[] = [];
231 |     state.accessors.forEach((accessor) => {
232 |       result.push(...accessor.flatAccessors);
233 |       result.push(accessor);
234 |     });
235 |     return result;
236 |   };
237 | 
238 |   const accessorsOld = flatAccessorOldFunc();
239 |   const accessorsNew = state.flatAccessors;
240 | 
241 |   // now we make sure that the length is the same and it contains the same values
242 |   expect(accessorsOld.length === accessorsNew.length).toBeTruthy();
243 |   for (const accessorOld of accessorsOld) {
244 |     expect(accessorsNew.includes(accessorOld)).toBeTruthy();
245 |   }
246 | 
247 |   const secondAccessorNew = state.flatAccessors;
248 | 
249 |   expect(accessorsNew).toEqual(secondAccessorNew);
250 | });
251 | 


--------------------------------------------------------------------------------
/test/changeTracker.test.ts:
--------------------------------------------------------------------------------
  1 | import { ChangeTracker } from "../src/changeTracker";
  2 | import { debounce, until } from "./utils";
  3 | 
  4 | jest.useFakeTimers();
  5 | 
  6 | test("simple change tracker", async () => {
  7 |   const processed: string[] = [];
  8 |   const tracker = new ChangeTracker(
  9 |     async (path: string) => {
 10 |       return processed.push(path);
 11 |     },
 12 |     { debounce }
 13 |   );
 14 | 
 15 |   tracker.change("a");
 16 |   tracker.change("a");
 17 | 
 18 |   jest.runAllTimers();
 19 | 
 20 |   await tracker.isFinished();
 21 | 
 22 |   expect(processed).toEqual(["a"]);
 23 | });
 24 | 
 25 | test("multiple paths", async () => {
 26 |   const processed: string[] = [];
 27 |   const tracker = new ChangeTracker(
 28 |     async (path: string) => {
 29 |       return processed.push(path);
 30 |     },
 31 |     { debounce }
 32 |   );
 33 | 
 34 |   // here we just generate a bunch of change events, but these aren't
 35 |   // handled by a single list of requests as nothing is held up
 36 |   tracker.change("a");
 37 |   tracker.change("a");
 38 |   tracker.change("b");
 39 |   jest.runAllTimers();
 40 | 
 41 |   await tracker.isFinished();
 42 | 
 43 |   expect(processed).toEqual(["a", "b"]);
 44 | });
 45 | 
 46 | test("multiple paths with delay", async () => {
 47 |   const processed: string[] = [];
 48 | 
 49 |   const untilA = until();
 50 | 
 51 |   const tracker = new ChangeTracker(
 52 |     async (path: string) => {
 53 |       if (path === "a") {
 54 |         await untilA.finished;
 55 |       }
 56 |       return processed.push(path);
 57 |     },
 58 |     { debounce }
 59 |   );
 60 | 
 61 |   // here we generate an a event
 62 |   tracker.change("a");
 63 |   jest.runAllTimers();
 64 | 
 65 |   // now we generate more events, meanwhile waiting for a to resolve
 66 |   tracker.change("b");
 67 |   tracker.change("c");
 68 |   jest.runAllTimers();
 69 |   // these are saved in the requests
 70 |   expect(tracker.requests).toEqual(["b", "c"]);
 71 | 
 72 |   // we finally resolve processing a
 73 |   // this sould result in b and c being processed afterwards
 74 |   untilA.resolve();
 75 | 
 76 |   await tracker.isFinished();
 77 | 
 78 |   expect(processed).toEqual(["a", "b", "c"]);
 79 | });
 80 | 
 81 | test("same path with delay", async () => {
 82 |   const processed: string[] = [];
 83 |   const untilA = until();
 84 | 
 85 |   const tracker = new ChangeTracker(
 86 |     async (path: string) => {
 87 |       if (path === "a") {
 88 |         await untilA.finished;
 89 |       }
 90 |       return processed.push(path);
 91 |     },
 92 |     { debounce }
 93 |   );
 94 | 
 95 |   tracker.change("a");
 96 |   jest.runAllTimers();
 97 | 
 98 |   tracker.change("a");
 99 |   jest.runAllTimers();
100 |   expect(tracker.requests).toEqual(["a"]);
101 | 
102 |   // now resolve things
103 |   untilA.resolve();
104 | 
105 |   // now we wait until everything is resolved
106 |   await tracker.isFinished();
107 | 
108 |   expect(processed).toEqual(["a", "a"]);
109 | });
110 | 
111 | test("hasChanged", async () => {
112 |   const processed: string[] = [];
113 |   const tracker = new ChangeTracker(
114 |     async (path: string) => {
115 |       return processed.push(path);
116 |     },
117 |     { debounce }
118 |   );
119 | 
120 |   tracker.change("a");
121 |   expect(tracker.hasChanged("a")).toBeTruthy();
122 | 
123 |   jest.runAllTimers();
124 |   expect(tracker.hasChanged("a")).toBeFalsy();
125 | 
126 |   await tracker.isFinished();
127 |   expect(tracker.hasChanged("a")).toBeFalsy();
128 | 
129 |   expect(processed).toEqual(["a"]);
130 | });
131 | 
132 | test("hasChanged with delay in processing", async () => {
133 |   const processed: string[] = [];
134 |   const untilA = until();
135 | 
136 |   const tracker = new ChangeTracker(
137 |     async (path: string) => {
138 |       if (path === "a") {
139 |         await untilA.finished;
140 |       }
141 |       return processed.push(path);
142 |     },
143 |     { debounce }
144 |   );
145 | 
146 |   tracker.change("a");
147 |   // we immediately track the item as modified
148 |   expect(tracker.hasChanged("a")).toBeTruthy();
149 |   jest.runAllTimers();
150 |   // it's already sent to process
151 |   expect(tracker.hasChanged("a")).toBeFalsy();
152 | 
153 |   tracker.change("a");
154 |   // we track the item as modified again
155 |   expect(tracker.hasChanged("a")).toBeTruthy();
156 |   jest.runAllTimers();
157 |   // even after the timers have run, this item hasn't been
158 |   // processed yet
159 |   expect(tracker.requests).toEqual(["a"]);
160 |   expect(tracker.hasChanged("a")).toBeTruthy();
161 | 
162 |   // now resolve things
163 |   untilA.resolve();
164 |   // but a is still changed, as not yet handled itself
165 |   // the second time
166 |   expect(tracker.hasChanged("a")).toBeTruthy();
167 | 
168 |   // now we wait until everything is resolved
169 |   await tracker.isFinished();
170 | 
171 |   // a isn't changed anymore
172 |   expect(tracker.hasChanged("a")).toBeFalsy();
173 | 
174 |   expect(processed).toEqual(["a", "a"]);
175 | });
176 | 


--------------------------------------------------------------------------------
/test/changehook.test.ts:
--------------------------------------------------------------------------------
  1 | import { configure } from "mobx";
  2 | import { types } from "mobx-state-tree";
  3 | import { Field, Form, converters } from "../src";
  4 | 
  5 | configure({ enforceActions: "always" });
  6 | 
  7 | test("changehook", () => {
  8 |   const M = types
  9 |     .model("M", {
 10 |       c: types.number,
 11 |       b: types.number,
 12 |     })
 13 |     .actions((self) => ({
 14 |       setB(value: number) {
 15 |         self.b = value;
 16 |       },
 17 |     }));
 18 | 
 19 |   const touched: boolean[] = [];
 20 | 
 21 |   const form = new Form(M, {
 22 |     c: new Field(converters.number, {
 23 |       change: (node, value) => {
 24 |         touched.push(true);
 25 |         node.setB(value);
 26 |       },
 27 |     }),
 28 |     b: new Field(converters.number),
 29 |   });
 30 | 
 31 |   const o = M.create({ c: 1, b: 2 });
 32 | 
 33 |   const state = form.state(o);
 34 |   const c = state.field("c");
 35 |   const b = state.field("b");
 36 | 
 37 |   // we set it to 4 explicitly
 38 |   c.setRaw("4");
 39 |   expect(b.raw).toEqual("4");
 40 |   // this immediately affects the underlying value
 41 |   expect(b.value).toEqual(4);
 42 | 
 43 |   // when we change it to something invalid, change hook doesn't fire
 44 |   c.setRaw("invalid");
 45 |   expect(b.raw).toEqual("4");
 46 |   expect(b.value).toEqual(4);
 47 | 
 48 |   c.setRaw("17");
 49 |   expect(b.raw).toEqual("17");
 50 |   expect(b.value).toEqual(17);
 51 | 
 52 |   // we change b independently
 53 |   b.setRaw("23");
 54 |   expect(b.raw).toEqual("23");
 55 | 
 56 |   let prevLength = touched.length;
 57 |   // validation shouldn't modify the value (it calls setRaw)
 58 |   state.validate();
 59 |   expect(touched.length).toEqual(prevLength);
 60 |   expect(b.raw).toEqual("23");
 61 |   expect(b.value).toEqual(23);
 62 | 
 63 |   // a modification of `c` to the same value shouldn't modify the value either
 64 |   prevLength = touched.length;
 65 |   c.setRaw("17");
 66 |   expect(touched.length).toEqual(prevLength);
 67 |   expect(b.raw).toEqual("23");
 68 |   expect(b.value).toEqual(23);
 69 | });
 70 | 
 71 | test("change hook with raw value", () => {
 72 |   const M = types
 73 |     .model("M", {
 74 |       c: types.number,
 75 |       b: types.number,
 76 |     })
 77 |     .actions((self) => ({
 78 |       setB(value: number) {
 79 |         self.b = value;
 80 |       },
 81 |     }));
 82 | 
 83 |   const touched: boolean[] = [];
 84 | 
 85 |   const form = new Form(M, {
 86 |     c: new Field(converters.number, {
 87 |       change: (node, value) => {
 88 |         touched.push(true);
 89 |         node.setB(value);
 90 |       },
 91 |     }),
 92 |     b: new Field(converters.number),
 93 |   });
 94 | 
 95 |   const o = M.create({ c: 1, b: 2 });
 96 | 
 97 |   const state = form.state(o);
 98 |   const c = state.field("c");
 99 |   const b = state.field("b");
100 | 
101 |   // first we modify the raw value of b
102 |   b.setRaw("17");
103 | 
104 |   // we set then set c to 4 explicitly
105 |   c.setRaw("4");
106 |   // the raw should also be changed
107 |   expect(b.raw).toEqual("4");
108 |   expect(b.value).toEqual(4);
109 | });
110 | 
111 | test("changehook with null", () => {
112 |   const M = types
113 |     .model("M", {
114 |       c: types.maybeNull(types.number),
115 |       b: types.maybeNull(types.number),
116 |     })
117 |     .actions((self) => ({
118 |       setB(value: number) {
119 |         self.b = value;
120 |       },
121 |     }));
122 | 
123 |   const touched: boolean[] = [];
124 | 
125 |   const form = new Form(M, {
126 |     c: new Field(converters.maybeNull(converters.number), {
127 |       change: (node, value) => {
128 |         touched.push(true);
129 |         node.setB(value);
130 |       },
131 |     }),
132 |     b: new Field(converters.maybeNull(converters.number)),
133 |   });
134 | 
135 |   const o = M.create({ c: 1, b: 2 });
136 | 
137 |   const state = form.state(o);
138 |   const c = state.field("c");
139 |   const b = state.field("b");
140 | 
141 |   // we set it to 4 explicitly
142 |   c.setRaw("4");
143 |   expect(b.raw).toEqual("4");
144 |   // this immediately affects the underlying value
145 |   expect(b.value).toEqual(4);
146 | 
147 |   // when we change it to something invalid, change hook doesn't fire
148 |   c.setRaw("invalid");
149 |   expect(b.raw).toEqual("4");
150 |   expect(b.value).toEqual(4);
151 | 
152 |   // now we set it to null, change hook fires
153 |   c.setRaw("");
154 |   expect(b.raw).toEqual("");
155 |   expect(b.value).toEqual(null);
156 | });
157 | 
158 | test("changehook doesn't fire if nothing changed", () => {
159 |   const M = types
160 |     .model("M", {
161 |       c: types.number,
162 |       b: types.number,
163 |     })
164 |     .actions((self) => ({
165 |       setB(value: number) {
166 |         self.b = value;
167 |       },
168 |     }));
169 | 
170 |   const touched: boolean[] = [];
171 | 
172 |   const form = new Form(M, {
173 |     c: new Field(converters.number, {
174 |       change: (node, value) => {
175 |         touched.push(true);
176 |         node.setB(value);
177 |       },
178 |     }),
179 |     b: new Field(converters.number),
180 |   });
181 | 
182 |   const o = M.create({ c: 1, b: 2 });
183 | 
184 |   const state = form.state(o);
185 |   const c = state.field("c");
186 |   const b = state.field("b");
187 | 
188 |   // we set it to 1 explicitly
189 |   c.setRaw("1");
190 |   expect(b.raw).toEqual("2");
191 |   expect(touched.length).toEqual(0);
192 | });
193 | 
194 | test("changehook doesn't fire if nothing functionally changed", () => {
195 |   const M = types
196 |     .model("M", {
197 |       c: types.string,
198 |       b: types.string,
199 |     })
200 |     .actions((self) => ({
201 |       setB(value: string) {
202 |         self.b = value;
203 |       },
204 |     }));
205 | 
206 |   const touched: boolean[] = [];
207 | 
208 |   const form = new Form(M, {
209 |     c: new Field(converters.stringDecimal, {
210 |       change: (node, value) => {
211 |         touched.push(true);
212 |         node.setB(value);
213 |       },
214 |     }),
215 |     b: new Field(converters.stringDecimal),
216 |   });
217 | 
218 |   const o = M.create({ c: "1.00", b: "2.00" });
219 | 
220 |   const state = form.state(o);
221 |   const c = state.field("c");
222 |   const b = state.field("b");
223 | 
224 |   // we set the raw to 1.000 explicitly, which is a technical change but not a functional change
225 |   // we do not expect "touched" to be triggered
226 |   c.setRaw("1.000");
227 |   expect(c.raw).toEqual("1.000"); // Changed value
228 |   expect(b.raw).toEqual("2.00"); // Not changed
229 |   expect(touched.length).toEqual(0); // Not touched
230 | 
231 |   // we set the value to 1.000 explicitly, which is a technical change but not a functional change
232 |   // we do not expect "touched" to be triggered
233 |   c.setValue("1.000");
234 |   expect(c.raw).toEqual("1.000"); // Did not change value
235 |   expect(b.raw).toEqual("2.00"); // Not changed
236 |   expect(touched.length).toEqual(0); // Not touched
237 | 
238 |   // we set the raw to 2.00 explicitly, which is a change
239 |   // we do expect "touched" to be triggered
240 |   c.setRaw("2.00");
241 |   expect(c.raw).toEqual("2.00"); // Changed value
242 |   expect(b.raw).toEqual("2.00"); // Changed
243 |   expect(touched.length).toEqual(1); // Touched
244 | 
245 |   // we set the raw to 3.00 explicitly, which is a change
246 |   // we do expect "touched" to be triggered
247 |   c.setValue("3.00");
248 |   expect(c.raw).toEqual("2.00"); // We updated the value, but not the raw
249 |   expect(b.raw).toEqual("3.00"); // Changed
250 |   expect(touched.length).toEqual(2); // Touched
251 | });
252 | 
253 | test("changehook doesn't fire if nothing changed with required", () => {
254 |   const M = types
255 |     .model("M", {
256 |       c: types.string,
257 |       b: types.string,
258 |     })
259 |     .actions((self) => ({
260 |       setB(value: string) {
261 |         self.b = value;
262 |       },
263 |     }));
264 | 
265 |   const touched: boolean[] = [];
266 | 
267 |   const form = new Form(M, {
268 |     c: new Field(converters.string, {
269 |       change: (node, value) => {
270 |         touched.push(true);
271 |         node.setB("touched");
272 |       },
273 |       required: true,
274 |     }),
275 |     b: new Field(converters.string),
276 |   });
277 | 
278 |   const o = M.create({ c: "", b: "B" });
279 | 
280 |   const state = form.state(o);
281 |   const c = state.field("c");
282 |   const b = state.field("b");
283 |   // confirm we start with B
284 |   expect(b.raw).toEqual("B");
285 | 
286 |   // we set it to same value explicitly
287 |   c.setRaw("");
288 |   // the value should be untouched
289 |   expect(b.raw).toEqual("B");
290 |   expect(touched.length).toEqual(0);
291 | 
292 |   // When we change the calue to something else
293 |   c.setRaw("X");
294 |   expect(b.raw).toEqual("touched");
295 |   expect(touched.length).toEqual(1); // Touched
296 | });
297 | 


--------------------------------------------------------------------------------
/test/context.test.ts:
--------------------------------------------------------------------------------
  1 | import { configure } from "mobx";
  2 | import { types } from "mobx-state-tree";
  3 | import {
  4 |   Field,
  5 |   Form,
  6 |   SubForm,
  7 |   RepeatingForm,
  8 |   converters,
  9 |   Converter,
 10 |   ConversionError,
 11 | } from "../src";
 12 | 
 13 | configure({ enforceActions: "always" });
 14 | 
 15 | test("context passed to field accessor", () => {
 16 |   const M = types.model("M", {
 17 |     foo: types.string,
 18 |   });
 19 | 
 20 |   const form = new Form(M, {
 21 |     foo: new Field(converters.string),
 22 |   });
 23 | 
 24 |   const o = M.create({ foo: "FOO" });
 25 | 
 26 |   const state = form.state(o, { context: "foo" });
 27 |   const field = state.field("foo");
 28 | 
 29 |   expect(field.context).toEqual("foo");
 30 | });
 31 | 
 32 | test("context passed to sub form accessor", () => {
 33 |   const N = types.model("N", {
 34 |     bar: types.string,
 35 |   });
 36 |   const M = types.model("M", {
 37 |     foo: N,
 38 |   });
 39 | 
 40 |   const form = new Form(M, {
 41 |     foo: new SubForm({ bar: new Field(converters.string) }),
 42 |   });
 43 | 
 44 |   const o = M.create({ foo: { bar: "BAR" } });
 45 | 
 46 |   const state = form.state(o, { context: "foo" });
 47 |   const subForm = state.subForm("foo");
 48 | 
 49 |   expect(subForm.context).toEqual("foo");
 50 | });
 51 | 
 52 | test("context passed to repeating form accessor", () => {
 53 |   const N = types.model("N", {
 54 |     bar: types.string,
 55 |   });
 56 |   const M = types.model("M", {
 57 |     foo: types.array(N),
 58 |   });
 59 | 
 60 |   const form = new Form(M, {
 61 |     foo: new RepeatingForm({ bar: new Field(converters.string) }),
 62 |   });
 63 | 
 64 |   const o = M.create({ foo: [{ bar: "BAR" }] });
 65 | 
 66 |   const state = form.state(o, { context: "foo" });
 67 |   const repeatingForm = state.repeatingForm("foo");
 68 | 
 69 |   expect(repeatingForm.context).toEqual("foo");
 70 | });
 71 | 
 72 | test("context passed to repeating form indexed accessor", () => {
 73 |   const N = types.model("N", {
 74 |     bar: types.string,
 75 |   });
 76 |   const M = types.model("M", {
 77 |     foo: types.array(N),
 78 |   });
 79 | 
 80 |   const form = new Form(M, {
 81 |     foo: new RepeatingForm({ bar: new Field(converters.string) }),
 82 |   });
 83 | 
 84 |   const o = M.create({ foo: [{ bar: "BAR" }] });
 85 | 
 86 |   const state = form.state(o, { context: "foo" });
 87 |   const repeatingForm = state.repeatingForm("foo");
 88 |   const f = repeatingForm.index(0);
 89 | 
 90 |   expect(f.context).toEqual("foo");
 91 | });
 92 | 
 93 | test("context in validate", () => {
 94 |   const M = types.model("M", {
 95 |     foo: types.string,
 96 |   });
 97 | 
 98 |   const form = new Form(M, {
 99 |     foo: new Field(converters.string, {
100 |       validators: [(value, context) => value !== context.theValue && "Wrong"],
101 |     }),
102 |   });
103 | 
104 |   const o = M.create({ foo: "FOO" });
105 | 
106 |   const state = form.state(o, { context: { theValue: "correct" } });
107 |   const field = state.field("foo");
108 | 
109 |   expect(field.raw).toEqual("FOO");
110 |   field.setRaw("BAR");
111 |   expect(field.raw).toEqual("BAR");
112 |   expect(field.error).toEqual("Wrong");
113 |   expect(field.value).toEqual("FOO");
114 |   field.setRaw("correct");
115 |   expect(field.error).toBeUndefined();
116 |   expect(field.value).toEqual("correct");
117 | 
118 |   const o2 = M.create({ foo: "FOO" });
119 |   const state2 = form.state(o, { context: { theValue: "other" } });
120 | 
121 |   const field2 = state2.field("foo");
122 | 
123 |   field2.setRaw("correct");
124 |   expect(field2.error).toEqual("Wrong");
125 | });
126 | 
127 | test("context in converter", () => {
128 |   const M = types.model("M", {
129 |     foo: types.string,
130 |   });
131 | 
132 |   const myConverter = new Converter<string, string>({
133 |     emptyRaw: "",
134 |     convert(raw, options) {
135 |       if (!raw.startsWith(options.context.prefix)) {
136 |         throw new ConversionError();
137 |       }
138 |       return raw;
139 |     },
140 |     render(value) {
141 |       return value;
142 |     },
143 |     hasChange(currentValue: string, newValue: string): boolean {
144 |       return currentValue !== newValue;
145 |     },
146 |   });
147 | 
148 |   const form = new Form(M, {
149 |     foo: new Field(myConverter),
150 |   });
151 | 
152 |   const o = M.create({ foo: "FOO" });
153 | 
154 |   const state = form.state(o, { context: { prefix: "X" } });
155 |   const field = state.field("foo");
156 | 
157 |   field.setRaw("XBAR");
158 |   expect(field.raw).toEqual("XBAR");
159 |   expect(field.error).toBeUndefined();
160 | 
161 |   field.setRaw("YBAR");
162 |   expect(field.value).toEqual("XBAR");
163 |   expect(field.error).toEqual("Could not convert");
164 | });
165 | 
166 | test("context in converter in convert", () => {
167 |   const M = types.model("M", {
168 |     foo: types.string,
169 |   });
170 | 
171 |   const myConverter = new Converter<string, string>({
172 |     emptyRaw: "",
173 |     convert(raw: string, options) {
174 |       return options.context.prefix + raw;
175 |     },
176 |     render(value) {
177 |       return value;
178 |     },
179 |     hasChange(currentValue: string, newValue: string): boolean {
180 |       return currentValue !== newValue;
181 |     },
182 |   });
183 | 
184 |   const form = new Form(M, {
185 |     foo: new Field(myConverter),
186 |   });
187 | 
188 |   const o = M.create({ foo: "FOO" });
189 | 
190 |   const state = form.state(o, { context: { prefix: "X" } });
191 |   const field = state.field("foo");
192 | 
193 |   field.setRaw("BAR");
194 |   expect(field.error).toBeUndefined();
195 |   expect(field.raw).toEqual("BAR");
196 |   expect(field.value).toEqual("XBAR");
197 | });
198 | 
199 | test("context in converter in render", () => {
200 |   const M = types.model("M", {
201 |     foo: types.string,
202 |   });
203 | 
204 |   const myConverter = new Converter<string, string>({
205 |     emptyRaw: "",
206 |     convert(raw: string) {
207 |       return raw;
208 |     },
209 |     render(value, options) {
210 |       return options.context.prefix + value;
211 |     },
212 |     hasChange(currentValue: string, newValue: string): boolean {
213 |       return currentValue !== newValue;
214 |     },
215 |   });
216 | 
217 |   const form = new Form(M, {
218 |     foo: new Field(myConverter),
219 |   });
220 | 
221 |   const o = M.create({ foo: "FOO" });
222 | 
223 |   const state = form.state(o, { context: { prefix: "X" } });
224 |   const field = state.field("foo");
225 | 
226 |   expect(field.raw).toEqual("XFOO");
227 | 
228 |   field.setRaw("BAR");
229 |   expect(field.error).toBeUndefined();
230 |   expect(field.raw).toEqual("BAR");
231 |   expect(field.value).toEqual("BAR");
232 | });
233 | 
234 | test("requiredError", () => {
235 |   const M = types.model("M", {
236 |     foo: types.number,
237 |   });
238 | 
239 |   const form = new Form(M, {
240 |     foo: new Field(converters.number, {
241 |       required: true,
242 |       requiredError: "Required!",
243 |     }),
244 |   });
245 | 
246 |   const o = M.create({ foo: 3 });
247 | 
248 |   const state = form.state(o);
249 | 
250 |   const field = state.field("foo");
251 | 
252 |   expect(field.raw).toEqual("3");
253 |   expect(field.value).toEqual(3);
254 |   field.setRaw("");
255 |   expect(field.error).toEqual("Required!");
256 |   expect(field.value).toEqual(3);
257 | });
258 | 
259 | test("requiredError dynamic with context", () => {
260 |   const M = types.model("M", {
261 |     foo: types.number,
262 |   });
263 | 
264 |   const form = new Form(M, {
265 |     foo: new Field(converters.number, {
266 |       required: true,
267 |       requiredError: (context: any) => "Required" + context,
268 |     }),
269 |   });
270 | 
271 |   const o = M.create({ foo: 3 });
272 | 
273 |   const state = form.state(o, { context: "!!" });
274 | 
275 |   const field = state.field("foo");
276 | 
277 |   expect(field.raw).toEqual("3");
278 |   expect(field.value).toEqual(3);
279 |   field.setRaw("");
280 |   expect(field.error).toEqual("Required!!");
281 |   expect(field.value).toEqual(3);
282 | });
283 | 
284 | test("conversionError dynamic with context", () => {
285 |   const M = types.model("M", {
286 |     foo: types.number,
287 |   });
288 | 
289 |   const form = new Form(M, {
290 |     foo: new Field(converters.number, {
291 |       conversionError: (context: any) => "Not a number" + context,
292 |     }),
293 |   });
294 | 
295 |   const o = M.create({ foo: 3 });
296 | 
297 |   const state = form.state(o, { context: "!!" });
298 | 
299 |   const field = state.field("foo");
300 | 
301 |   expect(field.raw).toEqual("3");
302 |   field.setRaw("4");
303 |   expect(field.raw).toEqual("4");
304 |   expect(field.value).toEqual(4);
305 |   expect(field.error).toBeUndefined();
306 |   field.setRaw("not a number");
307 |   expect(field.value).toEqual(4);
308 |   expect(field.error).toEqual("Not a number!!");
309 | });
310 | 
311 | test("converter options in decimal converter in convert", () => {
312 |   const M = types.model("M", {
313 |     foo: types.string,
314 |   });
315 | 
316 |   const form = new Form(M, {
317 |     foo: new Field(converters.stringDecimal()),
318 |   });
319 | 
320 |   const o = M.create({ foo: "4300.20" });
321 | 
322 |   const state = form.state(o, {
323 |     converterOptions: { decimalSeparator: "," },
324 |   });
325 |   const field = state.field("foo");
326 | 
327 |   field.setRaw("5300,20");
328 |   expect(field.error).toBeUndefined();
329 |   expect(field.raw).toEqual("5300,20");
330 |   expect(field.value).toEqual("5300.20");
331 | });
332 | 
333 | test("converter options in decimal converter in render", () => {
334 |   const M = types.model("M", {
335 |     foo: types.string,
336 |   });
337 | 
338 |   const form = new Form(M, {
339 |     foo: new Field(converters.stringDecimal()),
340 |   });
341 | 
342 |   const o = M.create({ foo: "1234567.89" });
343 | 
344 |   const state = form.state(o, {
345 |     converterOptions: { decimalSeparator: "," },
346 |   });
347 |   const field = state.field("foo");
348 | 
349 |   expect(field.raw).toEqual("1234567,89");
350 | });
351 | 
352 | test("converter options in number converter in convert", () => {
353 |   const M = types.model("M", {
354 |     foo: types.number,
355 |   });
356 | 
357 |   const form = new Form(M, {
358 |     foo: new Field(converters.number),
359 |   });
360 | 
361 |   const o = M.create({ foo: 4300.2 });
362 | 
363 |   const state = form.state(o, {
364 |     converterOptions: { decimalSeparator: "," },
365 |   });
366 |   const field = state.field("foo");
367 | 
368 |   field.setRaw("5300,20");
369 |   expect(field.error).toBeUndefined();
370 |   expect(field.raw).toEqual("5300,20");
371 |   expect(field.value).toEqual(5300.2);
372 | });
373 | 
374 | test("converter options in number converter in render", () => {
375 |   const M = types.model("M", {
376 |     foo: types.number,
377 |   });
378 | 
379 |   const form = new Form(M, {
380 |     foo: new Field(converters.number),
381 |   });
382 | 
383 |   const o = M.create({ foo: 1234567 });
384 | 
385 |   const state = form.state(o, {
386 |     converterOptions: { thousandSeparator: ",", renderThousands: true },
387 |   });
388 |   const field = state.field("foo");
389 | 
390 |   expect(field.raw).toEqual("1,234,567");
391 | });
392 | 


--------------------------------------------------------------------------------
/test/controlled.test.ts:
--------------------------------------------------------------------------------
  1 | import { configure } from "mobx";
  2 | import { castToSnapshot, Instance, types } from "mobx-state-tree";
  3 | import { converters, controlled, Form, Field } from "../src";
  4 | configure({ enforceActions: "always" });
  5 | 
  6 | test("object controlled", () => {
  7 |   const M = types.model("M", {
  8 |     foo: types.string,
  9 |   });
 10 | 
 11 |   const form = new Form(M, {
 12 |     foo: new Field(converters.object, { controlled: controlled.object }),
 13 |   });
 14 | 
 15 |   const o = M.create({ foo: "FOO" });
 16 | 
 17 |   const state = form.state(o);
 18 |   const field = state.field("foo");
 19 | 
 20 |   expect(field.inputProps.value).toEqual("FOO");
 21 |   expect(field.inputProps.checked).toBeUndefined();
 22 |   field.inputProps.onChange("BAR");
 23 |   expect(field.raw).toEqual("BAR");
 24 | });
 25 | 
 26 | test("modelReferenceArray controlled", () => {
 27 |   const Bar = types.model("Bar", {
 28 |     id: types.identifierNumber,
 29 |     name: types.string,
 30 |   });
 31 | 
 32 |   const BarContainer = types
 33 |     .model("BarContainer", {
 34 |       entryMap: types.map(Bar),
 35 |     })
 36 |     .actions((self) => ({
 37 |       addValue(value: Instance<typeof Bar>) {
 38 |         self.entryMap.put(value);
 39 |       },
 40 |     }));
 41 |   const M = types.model("M", {
 42 |     barContainer: BarContainer,
 43 |     foo: types.array(types.reference(Bar)),
 44 |   });
 45 | 
 46 |   const form = new Form(M, {
 47 |     foo: new Field(converters.modelReferenceArray(Bar)),
 48 |   });
 49 | 
 50 |   const container = BarContainer.create({ entryMap: {} });
 51 |   const barValue = Bar.create({ id: 1, name: "Lucky" });
 52 |   container.addValue(barValue);
 53 | 
 54 |   const o = M.create({
 55 |     barContainer: castToSnapshot(container),
 56 |     foo: [],
 57 |   });
 58 | 
 59 |   const state = form.state(o);
 60 |   const field = state.field("foo");
 61 | 
 62 |   expect(field.inputProps.value).toEqual([]);
 63 |   field.inputProps.onChange([barValue]);
 64 |   expect(field.raw).toEqual([
 65 |     {
 66 |       id: 1,
 67 |       name: "Lucky",
 68 |     },
 69 |   ]);
 70 | });
 71 | 
 72 | test("value controlled", () => {
 73 |   const M = types.model("M", {
 74 |     foo: types.string,
 75 |   });
 76 | 
 77 |   const form = new Form(M, {
 78 |     foo: new Field(converters.object, { controlled: controlled.value }),
 79 |   });
 80 | 
 81 |   const o = M.create({ foo: "FOO" });
 82 | 
 83 |   const state = form.state(o);
 84 |   const field = state.field("foo");
 85 | 
 86 |   expect(field.inputProps.value).toEqual("FOO");
 87 |   expect(field.inputProps.checked).toBeUndefined();
 88 |   field.inputProps.onChange({ target: { value: "BAR" } });
 89 |   expect(field.raw).toEqual("BAR");
 90 | });
 91 | 
 92 | test("checked controlled", () => {
 93 |   const M = types.model("M", {
 94 |     foo: types.boolean,
 95 |   });
 96 | 
 97 |   const form = new Form(M, {
 98 |     foo: new Field(converters.object, { controlled: controlled.checked }),
 99 |   });
100 | 
101 |   const o = M.create({ foo: true });
102 | 
103 |   const state = form.state(o);
104 |   const field = state.field("foo");
105 | 
106 |   expect(field.inputProps.checked).toEqual(true);
107 |   expect(field.inputProps.value).toBeUndefined();
108 |   field.inputProps.onChange({ target: { checked: false } });
109 |   expect(field.raw).toEqual(false);
110 | });
111 | 
112 | test("custom controlled", () => {
113 |   const M = types.model("M", {
114 |     foo: types.string,
115 |   });
116 | 
117 |   const form = new Form(M, {
118 |     foo: new Field(converters.object, {
119 |       controlled: (accessor) => {
120 |         return {
121 |           weird: accessor.raw,
122 |           onChange: (raw: any) => accessor.setRaw(raw),
123 |         };
124 |       },
125 |     }),
126 |   });
127 | 
128 |   const o = M.create({ foo: "FOO" });
129 | 
130 |   const state = form.state(o);
131 |   const field = state.field("foo");
132 | 
133 |   expect(field.inputProps.weird).toEqual("FOO");
134 |   field.inputProps.onChange("BAR");
135 |   expect(field.raw).toEqual("BAR");
136 | });
137 | 
138 | test("default value controlled for string converter", () => {
139 |   const M = types.model("M", {
140 |     foo: types.string,
141 |   });
142 | 
143 |   const form = new Form(M, {
144 |     foo: new Field(converters.string),
145 |   });
146 | 
147 |   const o = M.create({ foo: "FOO" });
148 | 
149 |   const state = form.state(o);
150 |   const field = state.field("foo");
151 | 
152 |   expect(field.inputProps.value).toEqual("FOO");
153 |   expect(field.inputProps.checked).toBeUndefined();
154 |   field.inputProps.onChange({ target: { value: "BAR" } });
155 |   expect(field.raw).toEqual("BAR");
156 | });
157 | 
158 | test("default value controlled for maybe string converter", () => {
159 |   const M = types.model("M", {
160 |     foo: types.maybeNull(types.string),
161 |   });
162 | 
163 |   const form = new Form(M, {
164 |     foo: new Field(converters.maybeNull(converters.string)),
165 |   });
166 | 
167 |   const o = M.create({ foo: "FOO" });
168 | 
169 |   const state = form.state(o);
170 |   const field = state.field("foo");
171 | 
172 |   expect(field.inputProps.value).toEqual("FOO");
173 |   expect(field.inputProps.checked).toBeUndefined();
174 |   field.inputProps.onChange({ target: { value: "BAR" } });
175 |   expect(field.raw).toEqual("BAR");
176 | });
177 | 
178 | test("default checked controlled for boolean converter", () => {
179 |   const M = types.model("M", {
180 |     foo: types.boolean,
181 |   });
182 | 
183 |   const form = new Form(M, {
184 |     foo: new Field(converters.boolean),
185 |   });
186 | 
187 |   const o = M.create({ foo: true });
188 | 
189 |   const state = form.state(o);
190 |   const field = state.field("foo");
191 | 
192 |   expect(field.inputProps.checked).toEqual(true);
193 |   expect(field.inputProps.value).toBeUndefined();
194 |   field.inputProps.onChange({ target: { checked: false } });
195 |   expect(field.raw).toEqual(false);
196 | });
197 | 
198 | test("default object controlled", () => {
199 |   const M = types.model("M", {
200 |     foo: types.string,
201 |   });
202 | 
203 |   const form = new Form(M, {
204 |     foo: new Field(converters.object),
205 |   });
206 | 
207 |   const o = M.create({ foo: "FOO" });
208 | 
209 |   const state = form.state(o);
210 |   const field = state.field("foo");
211 | 
212 |   expect(field.inputProps.value).toEqual("FOO");
213 |   expect(field.inputProps.checked).toBeUndefined();
214 |   field.inputProps.onChange("BAR");
215 |   expect(field.raw).toEqual("BAR");
216 | });
217 | 
218 | test("default object controlled for stringArray converter", () => {
219 |   const M = types.model("M", {
220 |     foo: types.array(types.string),
221 |   });
222 | 
223 |   const form = new Form(M, {
224 |     foo: new Field(converters.stringArray),
225 |   });
226 | 
227 |   const o = M.create({ foo: [] });
228 | 
229 |   const state = form.state(o);
230 |   const field = state.field("foo");
231 | 
232 |   expect(field.inputProps.value).toEqual([]);
233 |   field.inputProps.onChange(["a", "b"]);
234 |   expect(field.raw).toEqual(["a", "b"]);
235 | });
236 | 
237 | test("default object controlled for maybe converter", () => {
238 |   const M = types.model("M", {
239 |     foo: types.maybeNull(types.string),
240 |   });
241 | 
242 |   const form = new Form(M, {
243 |     foo: new Field(converters.object),
244 |   });
245 | 
246 |   const o = M.create({ foo: "FOO" });
247 | 
248 |   const state = form.state(o);
249 |   const field = state.field("foo");
250 | 
251 |   expect(field.inputProps.value).toEqual("FOO");
252 |   expect(field.inputProps.checked).toBeUndefined();
253 |   field.inputProps.onChange("BAR");
254 |   expect(field.raw).toEqual("BAR");
255 | });
256 | 
257 | // fromEvent backwards compatibility
258 | test("getRaw fromEvent", () => {
259 |   const M = types.model("M", {
260 |     foo: types.string,
261 |   });
262 | 
263 |   const form = new Form(M, {
264 |     foo: new Field(converters.string, {
265 |       fromEvent: true,
266 |     }),
267 |   });
268 | 
269 |   const o = M.create({ foo: "FOO" });
270 | 
271 |   const state = form.state(o);
272 | 
273 |   const field = state.field("foo");
274 | 
275 |   expect(field.inputProps.value).toEqual("FOO");
276 |   field.inputProps.onChange({ target: { value: "BAR" } });
277 |   expect(field.raw).toEqual("BAR");
278 | });
279 | 
280 | // handleChange backwards compatibility
281 | test("getRaw fromEvent", () => {
282 |   const M = types.model("M", {
283 |     foo: types.string,
284 |   });
285 | 
286 |   const form = new Form(M, {
287 |     foo: new Field(converters.string, {
288 |       fromEvent: true,
289 |     }),
290 |   });
291 | 
292 |   const o = M.create({ foo: "FOO" });
293 | 
294 |   const state = form.state(o);
295 | 
296 |   const field = state.field("foo");
297 | 
298 |   expect(field.inputProps.value).toEqual("FOO");
299 |   field.handleChange({ target: { value: "BAR" } });
300 |   expect(field.raw).toEqual("BAR");
301 | });
302 | 
303 | // getRaw backwards compatibility
304 | test("override getRaw", () => {
305 |   const M = types.model("M", {
306 |     foo: types.string,
307 |   });
308 | 
309 |   const form = new Form(M, {
310 |     foo: new Field(converters.string, {
311 |       getRaw(event) {
312 |         return event.target.weird;
313 |       },
314 |     }),
315 |   });
316 | 
317 |   const o = M.create({ foo: "FOO" });
318 | 
319 |   const state = form.state(o);
320 | 
321 |   const field = state.field("foo");
322 | 
323 |   expect(field.inputProps.value).toEqual("FOO");
324 |   field.inputProps.onChange({ target: { weird: "BAR" } });
325 |   expect(field.raw).toEqual("BAR");
326 | });
327 | 


--------------------------------------------------------------------------------
/test/converter.test.ts:
--------------------------------------------------------------------------------
  1 | import { configure } from "mobx";
  2 | import { types } from "mobx-state-tree";
  3 | import { Field, Form, converters, FieldAccessor } from "../src";
  4 | import { ConversionValue, Converter, ConversionError } from "../src/converter";
  5 | 
  6 | configure({ enforceActions: "always" });
  7 | 
  8 | const options = {
  9 |   // a BIG lie. but we don't really have an accessor in these
 10 |   // tests and it's safe to leave it null, even though in
 11 |   // the integrated code accessor always *does* exist
 12 |   accessor: null as unknown as FieldAccessor<any, any>,
 13 | };
 14 | 
 15 | test("simple converter", () => {
 16 |   const converter = new Converter<string, string>({
 17 |     emptyRaw: "",
 18 |     emptyValue: "",
 19 |     convert: (raw) => raw,
 20 |     render: (value) => value,
 21 |     hasChange(currentValue: string, newValue: string): boolean {
 22 |       return currentValue !== newValue;
 23 |     },
 24 |   });
 25 | 
 26 |   const result = converter.convert("foo", options);
 27 |   expect(result).toBeInstanceOf(ConversionValue);
 28 |   expect((result as ConversionValue<string>).value).toEqual("foo");
 29 | 
 30 |   // the string "ConversionError" is a valid text to convert
 31 |   const result2 = converter.convert("ConversionError", options);
 32 |   expect(result2).toBeInstanceOf(ConversionValue);
 33 |   expect((result2 as ConversionValue<string>).value).toEqual("ConversionError");
 34 | });
 35 | 
 36 | test("converter emptyImpossible and emptyValue", () => {
 37 |   expect(
 38 |     () =>
 39 |       new Converter<string, string>({
 40 |         emptyRaw: "",
 41 |         emptyValue: "",
 42 |         emptyImpossible: true,
 43 |         convert: (raw) => raw,
 44 |         render: (value) => value,
 45 |         hasChange(currentValue: string, newValue: string): boolean {
 46 |           return currentValue !== newValue;
 47 |         },
 48 |       })
 49 |   ).toThrow();
 50 | });
 51 | 
 52 | test("converter to integer", () => {
 53 |   const converter = new Converter<string, number>({
 54 |     emptyRaw: "",
 55 |     emptyImpossible: true,
 56 |     convert: (raw) => {
 57 |       if (!/^\d+$/.test(raw)) {
 58 |         throw new ConversionError();
 59 |       }
 60 |       return parseInt(raw, 10);
 61 |     },
 62 |     render: (value) => value.toString(),
 63 |     hasChange(currentValue: number, newValue: number): boolean {
 64 |       return currentValue !== newValue;
 65 |     },
 66 |   });
 67 | 
 68 |   const result = converter.convert("3", options);
 69 |   expect(result).toBeInstanceOf(ConversionValue);
 70 |   expect((result as ConversionValue<number>).value).toEqual(3);
 71 | 
 72 |   const result2 = converter.convert("not a number", options);
 73 |   expect(result2).toBeInstanceOf(ConversionError);
 74 | });
 75 | 
 76 | test("converter maybeNull with converter options", () => {
 77 |   const M = types.model("M", {
 78 |     foo: types.maybeNull(types.string),
 79 |   });
 80 | 
 81 |   const form = new Form(M, {
 82 |     foo: new Field(converters.maybeNull(converters.stringDecimal())),
 83 |   });
 84 | 
 85 |   const o = M.create({ foo: "36365.21" });
 86 | 
 87 |   const state = form.state(o, {
 88 |     converterOptions: {
 89 |       decimalSeparator: ",",
 90 |       thousandSeparator: ".",
 91 |       renderThousands: true,
 92 |     },
 93 |   });
 94 |   const field = state.field("foo");
 95 |   field.setRaw("36.365,20");
 96 |   expect(field.error).toBeUndefined();
 97 |   expect(field.raw).toEqual("36.365,20");
 98 |   expect(field.value).toEqual("36365.20");
 99 | });
100 | 
101 | test("convert can throw ConversionError", () => {
102 |   const converter = new Converter<string, string>({
103 |     emptyRaw: "",
104 |     emptyValue: "",
105 |     convert: (raw) => {
106 |       throw new ConversionError();
107 |     },
108 |     render: (value) => value,
109 |     hasChange(currentValue: string, newValue: string): boolean {
110 |       return currentValue !== newValue;
111 |     },
112 |   });
113 | 
114 |   const result = converter.convert("foo", options);
115 |   expect(result).toBeInstanceOf(ConversionError);
116 | });
117 | 
118 | test("non-ConversionError bubbles up", () => {
119 |   const converter = new Converter<string, string>({
120 |     emptyRaw: "",
121 |     emptyValue: "",
122 |     convert: (raw) => {
123 |       throw new Error("Unexpected failure");
124 |     },
125 |     render: (value) => value,
126 |     hasChange(currentValue: string, newValue: string): boolean {
127 |       return currentValue !== newValue;
128 |     },
129 |   });
130 | 
131 |   expect(() => converter.convert("foo", options)).toThrow();
132 | });
133 | 


--------------------------------------------------------------------------------
/test/decimal-type.test.ts:
--------------------------------------------------------------------------------
 1 | import { Decimal } from "decimal.js-light";
 2 | import { types, getSnapshot, typecheck } from "mobx-state-tree";
 3 | import { decimal } from "../src/";
 4 | 
 5 | test("decimal reading and writing", () => {
 6 |   const M = types
 7 |     .model({
 8 |       d: decimal,
 9 |     })
10 |     .actions((self) => ({
11 |       setDecimal(d: Decimal) {
12 |         self.d = d;
13 |       },
14 |     }));
15 | 
16 |   const o = M.create({ d: "1.25" });
17 |   // this is a Decimal instance, so we can call a method on it
18 |   expect(o.d.isPositive()).toBeTruthy();
19 |   expect(o.d.equals(new Decimal("1.25"))).toBeTruthy();
20 |   const snapshot = getSnapshot(o);
21 |   expect(snapshot).toEqual({
22 |     d: "1.25",
23 |   });
24 | });
25 | 
26 | test("decimal validation", () => {
27 |   // shouldn't throw
28 |   typecheck(decimal, "1.25");
29 | 
30 |   // should throw
31 |   expect(() => typecheck(decimal, "02-04-2013")).toThrow();
32 |   expect(() => typecheck(decimal, "borked")).toThrow();
33 | });
34 | 


--------------------------------------------------------------------------------
/test/decimalParser.test.ts:
--------------------------------------------------------------------------------
  1 | import { parseDecimal, renderDecimal } from "../src/decimalParser";
  2 | 
  3 | const options = {
  4 |   maxWholeDigits: 20,
  5 |   decimalPlaces: 4,
  6 |   allowNegative: true,
  7 |   decimalSeparator: ".",
  8 |   thousandSeparator: ",",
  9 |   renderThousands: true,
 10 |   addZeroes: true,
 11 | };
 12 | 
 13 | test("basic parse", () => {
 14 |   expect(parseDecimal("100", options)).toEqual("100");
 15 |   expect(parseDecimal("-100", options)).toEqual("-100");
 16 |   expect(parseDecimal("100.47", options)).toEqual("100.47");
 17 |   expect(parseDecimal(".47", options)).toEqual(".47");
 18 |   expect(parseDecimal("1.47", options)).toEqual("1.47");
 19 |   expect(parseDecimal("123.", options)).toEqual("123.");
 20 | });
 21 | 
 22 | test("minus handling", () => {
 23 |   expect(parseDecimal("-1,000", options)).toEqual("-1000");
 24 |   expect(parseDecimal("-.5", options)).toEqual("-.5");
 25 | });
 26 | 
 27 | test("swapped separators", () => {
 28 |   const options = {
 29 |     maxWholeDigits: 50,
 30 |     decimalPlaces: 4,
 31 |     allowNegative: true,
 32 |     decimalSeparator: ",",
 33 |     thousandSeparator: ".",
 34 |     renderThousands: true,
 35 |     addZeroes: true,
 36 |   };
 37 |   expect(parseDecimal("100.000", options)).toEqual("100000");
 38 |   expect(parseDecimal("100,53", options)).toEqual("100.53");
 39 |   expect(parseDecimal("123.456,78", options)).toEqual("123456.78");
 40 |   expect(parseDecimal("4.000.000", options)).toEqual("4000000");
 41 | });
 42 | 
 43 | test("parse thousands", () => {
 44 |   expect(parseDecimal("1,000", options)).toEqual("1000");
 45 |   expect(parseDecimal("12,000", options)).toEqual("12000");
 46 | });
 47 | 
 48 | test("parse thousands multiple 3 digits", () => {
 49 |   expect(parseDecimal("1,123,000", options)).toEqual("1123000");
 50 | });
 51 | 
 52 | test("cannot parse unknown tokens", () => {
 53 |   expect(() => parseDecimal("foo", options)).toThrow();
 54 |   expect(() => parseDecimal("100foo", options)).toThrow();
 55 | });
 56 | 
 57 | test("cannot parse double minus", () => {
 58 |   expect(() => parseDecimal("--1", options)).toThrow();
 59 | });
 60 | 
 61 | test("cannot parse single decimal separator", () => {
 62 |   expect(() => parseDecimal(".", options)).toThrow();
 63 | });
 64 | 
 65 | test("cannot parse single thousand separator", () => {
 66 |   expect(() => parseDecimal(",", options)).toThrow();
 67 | });
 68 | 
 69 | test("cannot parse broken thousands", () => {
 70 |   expect(() => parseDecimal("100,00", options)).toThrow();
 71 |   expect(() => parseDecimal(",000", options)).toThrow();
 72 |   expect(() => parseDecimal("1,000,000,00", options)).toThrow();
 73 | });
 74 | 
 75 | test("do not allowNegative", () => {
 76 |   const options = {
 77 |     maxWholeDigits: 5,
 78 |     decimalPlaces: 4,
 79 |     allowNegative: false,
 80 |     decimalSeparator: ".",
 81 |     thousandSeparator: ",",
 82 |     renderThousands: true,
 83 |     addZeroes: true,
 84 |   };
 85 |   expect(() => parseDecimal("-100", options)).toThrow();
 86 | });
 87 | 
 88 | test("maxWholeDigits", () => {
 89 |   const options = {
 90 |     maxWholeDigits: 5,
 91 |     decimalPlaces: 4,
 92 |     allowNegative: true,
 93 |     decimalSeparator: ".",
 94 |     thousandSeparator: ",",
 95 |     renderThousands: true,
 96 |     addZeroes: true,
 97 |   };
 98 |   expect(parseDecimal("12,345", options)).toEqual("12345");
 99 |   expect(parseDecimal("-12,345", options)).toEqual("-12345");
100 |   expect(parseDecimal("123.5678", options)).toEqual("123.5678");
101 |   expect(() => parseDecimal("123,456", options)).toThrow();
102 |   expect(() => parseDecimal("-123,456", options)).toThrow();
103 | });
104 | 
105 | test("decimalPlaces", () => {
106 |   const options = {
107 |     maxWholeDigits: 50,
108 |     decimalPlaces: 4,
109 |     allowNegative: true,
110 |     decimalSeparator: ".",
111 |     thousandSeparator: ",",
112 |     renderThousands: true,
113 |     addZeroes: true,
114 |   };
115 |   expect(parseDecimal("12,345.45", options)).toEqual("12345.45");
116 |   expect(parseDecimal(".1234", options)).toEqual(".1234");
117 |   expect(() => parseDecimal(".12345", options)).toThrow();
118 |   expect(() => parseDecimal("-123.12345", options)).toThrow();
119 | });
120 | 
121 | test("normalizedDecimalPlaces", () => {
122 |   const options = {
123 |     maxWholeDigits: 50,
124 |     decimalPlaces: 2,
125 |     normalizedDecimalPlaces: 4,
126 |     allowNegative: true,
127 |     decimalSeparator: ".",
128 |     thousandSeparator: ",",
129 |     renderThousands: true,
130 |     addZeroes: true,
131 |   };
132 |   expect(parseDecimal("12,345.45", options)).toEqual("12345.4500");
133 |   expect(parseDecimal(".12", options)).toEqual(".1200");
134 |   expect(parseDecimal("3", options)).toEqual("3.0000");
135 |   expect(parseDecimal("-4", options)).toEqual("-4.0000");
136 | });
137 | 
138 | test("numbers without thousand separators", () => {
139 |   // as a special case we accept numbers without thousand separators too
140 |   expect(parseDecimal("1000", options)).toEqual("1000");
141 |   expect(parseDecimal("12345678", options)).toEqual("12345678");
142 | });
143 | 
144 | test("render", () => {
145 |   expect(renderDecimal("100", options)).toEqual("100.0000");
146 |   expect(renderDecimal("1234", options)).toEqual("1,234.0000");
147 |   expect(renderDecimal("1.12", options)).toEqual("1.1200");
148 |   expect(renderDecimal(".12", options)).toEqual(".1200");
149 |   expect(renderDecimal(".12345", options)).toEqual(".1234");
150 |   expect(renderDecimal("12345678", options)).toEqual("12,345,678.0000");
151 |   expect(renderDecimal("-1.5", options)).toEqual("-1.5000");
152 |   expect(renderDecimal("-100", options)).toEqual("-100.0000");
153 | });
154 | 
155 | test("render no renderThousands", () => {
156 |   const options = {
157 |     maxWholeDigits: 50,
158 |     decimalPlaces: 4,
159 |     allowNegative: true,
160 |     decimalSeparator: ".",
161 |     thousandSeparator: ",",
162 |     renderThousands: false,
163 |     addZeroes: true,
164 |   };
165 |   expect(renderDecimal("100", options)).toEqual("100.0000");
166 |   expect(renderDecimal("1234", options)).toEqual("1234.0000");
167 |   expect(renderDecimal("1.12", options)).toEqual("1.1200");
168 |   expect(renderDecimal(".12", options)).toEqual(".1200");
169 |   expect(renderDecimal(".12345", options)).toEqual(".1234");
170 |   expect(renderDecimal("12345678", options)).toEqual("12345678.0000");
171 |   expect(renderDecimal("-1.5", options)).toEqual("-1.5000");
172 |   expect(renderDecimal("-100", options)).toEqual("-100.0000");
173 | });
174 | 
175 | test("render no addZeroes", () => {
176 |   const options = {
177 |     maxWholeDigits: 50,
178 |     decimalPlaces: 4,
179 |     allowNegative: true,
180 |     decimalSeparator: ".",
181 |     thousandSeparator: ",",
182 |     renderThousands: true,
183 |     addZeroes: false,
184 |   };
185 |   expect(renderDecimal("100", options)).toEqual("100");
186 |   expect(renderDecimal("1234", options)).toEqual("1,234");
187 |   expect(renderDecimal("1.12", options)).toEqual("1.12");
188 |   expect(renderDecimal(".12", options)).toEqual(".12");
189 |   expect(renderDecimal(".12345", options)).toEqual(".1234");
190 |   expect(renderDecimal("12345678", options)).toEqual("12,345,678");
191 |   expect(renderDecimal("-1.5", options)).toEqual("-1.5");
192 |   expect(renderDecimal("-100", options)).toEqual("-100");
193 | });
194 | 
195 | test("empty render", () => {
196 |   expect(renderDecimal("", options)).toEqual("");
197 | });
198 | 
199 | test("empty render no addZeroes", () => {
200 |   const options = {
201 |     maxWholeDigits: 50,
202 |     decimalPlaces: 4,
203 |     allowNegative: true,
204 |     decimalSeparator: ".",
205 |     thousandSeparator: ",",
206 |     renderThousands: true,
207 |     addZeroes: false,
208 |   };
209 |   expect(renderDecimal("", options)).toEqual("");
210 | });
211 | 
212 | test("render addZeroes maxZeroesPadding", () => {
213 |   const options = {
214 |     maxWholeDigits: 50,
215 |     decimalPlaces: 4,
216 |     allowNegative: true,
217 |     decimalSeparator: ".",
218 |     thousandSeparator: ",",
219 |     renderThousands: false,
220 |     addZeroes: true,
221 |     maxZeroesPadding: 2,
222 |   };
223 |   expect(renderDecimal("100", options)).toEqual("100.00");
224 |   expect(renderDecimal("1234", options)).toEqual("1234.00");
225 |   expect(renderDecimal("1.12", options)).toEqual("1.12");
226 |   expect(renderDecimal(".12", options)).toEqual(".12");
227 |   expect(renderDecimal(".12345", options)).toEqual(".1234");
228 |   expect(renderDecimal("12345678", options)).toEqual("12345678.00");
229 |   expect(renderDecimal("-1.5", options)).toEqual("-1.50");
230 |   expect(renderDecimal("-100", options)).toEqual("-100.00");
231 |   expect(renderDecimal("100.0000000000", options)).toEqual("100.00");
232 |   expect(renderDecimal("100.1200000000", options)).toEqual("100.12");
233 |   expect(renderDecimal("100.1234000000", options)).toEqual("100.1234");
234 |   expect(renderDecimal("100.1234500000", options)).toEqual("100.1234");
235 | });
236 | 


--------------------------------------------------------------------------------
/test/dynamic.test.ts:
--------------------------------------------------------------------------------
 1 | import { types } from "mobx-state-tree";
 2 | import { converters, Field, Form, FieldAccessor } from "../src";
 3 | 
 4 | test("dynamic based on accessor", () => {
 5 |   const M = types.model("M", {
 6 |     foo: types.string,
 7 |     bar: types.string,
 8 |   });
 9 | 
10 |   const getOptions = (context: any, accessor: FieldAccessor<any, any>) => {
11 |     if (accessor.fieldref === "foo") {
12 |       return { allowNegative: false };
13 |     } else {
14 |       return { allowNegative: true };
15 |     }
16 |   };
17 | 
18 |   const form = new Form(M, {
19 |     foo: new Field(converters.dynamic(converters.stringDecimal, getOptions)),
20 |     bar: new Field(converters.dynamic(converters.stringDecimal, getOptions)),
21 |   });
22 | 
23 |   const o = M.create({ foo: "1.2", bar: "3.4" });
24 | 
25 |   const state = form.state(o);
26 |   const foo = state.field("foo");
27 |   const bar = state.field("bar");
28 | 
29 |   foo.setRaw("-1.2");
30 |   expect(foo.error).toEqual("Could not convert");
31 | 
32 |   bar.setRaw("-3.4");
33 |   expect(bar.error).toBeUndefined();
34 | });
35 | 
36 | test("dynamic converter with maybe", () => {
37 |   const M = types.model("M", {
38 |     foo: types.maybe(types.string),
39 |   });
40 | 
41 |   const getOptions = (context: any, accessor: FieldAccessor<any, any>) => {
42 |     return { allowNegative: false };
43 |   };
44 | 
45 |   const form = new Form(M, {
46 |     foo: new Field(
47 |       converters.maybe(converters.dynamic(converters.stringDecimal, getOptions))
48 |     ),
49 |   });
50 | 
51 |   const o = M.create({ foo: "1.2" });
52 | 
53 |   const state = form.state(o);
54 |   const foo = state.field("foo");
55 | 
56 |   foo.setRaw("-1.2");
57 |   expect(foo.error).toEqual("Could not convert");
58 | 
59 |   foo.setRaw("");
60 |   expect(foo.error).toBeUndefined();
61 |   expect(foo.value).toBeUndefined();
62 | });
63 | 
64 | test("dynamic converter with maybeNull", () => {
65 |   const M = types.model("M", {
66 |     foo: types.maybeNull(types.string),
67 |   });
68 | 
69 |   const getOptions = (context: any, accessor: FieldAccessor<any, any>) => {
70 |     return { allowNegative: false };
71 |   };
72 | 
73 |   const form = new Form(M, {
74 |     foo: new Field(
75 |       converters.maybeNull(
76 |         converters.dynamic(converters.stringDecimal, getOptions)
77 |       )
78 |     ),
79 |   });
80 | 
81 |   const o = M.create({ foo: "1.2" });
82 | 
83 |   const state = form.state(o);
84 |   const foo = state.field("foo");
85 | 
86 |   foo.setRaw("-1.2");
87 |   expect(foo.error).toEqual("Could not convert");
88 | 
89 |   foo.setRaw("");
90 |   expect(foo.error).toBeUndefined();
91 |   expect(foo.value).toBeNull();
92 | });
93 | 


--------------------------------------------------------------------------------
/test/fieldref.test.ts:
--------------------------------------------------------------------------------
 1 | import { types } from "mobx-state-tree";
 2 | 
 3 | import { Form, Field, RepeatingForm, SubForm, converters } from "../src";
 4 | import { pathToFieldref } from "../src/utils";
 5 | 
 6 | test("path to fieldref", () => {
 7 |   expect(pathToFieldref("foo")).toEqual("foo");
 8 |   expect(pathToFieldref("foo/bar")).toEqual("foo.bar");
 9 |   expect(pathToFieldref("foo/1/bar")).toEqual("foo[].bar");
10 |   expect(pathToFieldref("")).toEqual("");
11 |   expect(pathToFieldref("/foo")).toEqual("foo");
12 | });
13 | 
14 | test("fieldref", () => {
15 |   const N = types.model("N", {
16 |     repeatingField: types.string,
17 |   });
18 |   const Sub = types.model("Sub", {
19 |     subField: types.string,
20 |   });
21 |   const M = types.model("M", {
22 |     field: types.string,
23 |     repeating: types.array(N),
24 |     sub: Sub,
25 |   });
26 | 
27 |   const form = new Form(M, {
28 |     field: new Field(converters.string),
29 |     repeating: new RepeatingForm({
30 |       repeatingField: new Field(converters.string),
31 |     }),
32 |     sub: new SubForm({
33 |       subField: new Field(converters.string),
34 |     }),
35 |   });
36 | 
37 |   const o = M.create({
38 |     field: "FIELD",
39 |     repeating: [{ repeatingField: "REPEATING_FIELD" }],
40 |     sub: { subField: "SUB FIELD" },
41 |   });
42 | 
43 |   const state = form.state(o);
44 | 
45 |   const field = state.field("field");
46 |   const repeating = state.repeatingForm("repeating");
47 |   const repeatingIndex = repeating.index(0);
48 |   const repeatingField = repeatingIndex.field("repeatingField");
49 |   const sub = state.subForm("sub");
50 |   const subField = sub.field("subField");
51 | 
52 |   expect(state.fieldref).toEqual("");
53 |   expect(field.fieldref).toEqual("field");
54 |   expect(repeating.fieldref).toEqual("repeating");
55 |   expect(repeatingIndex.fieldref).toEqual("repeating[]");
56 |   expect(repeatingField.fieldref).toEqual("repeating[].repeatingField");
57 |   expect(sub.fieldref).toEqual("sub");
58 |   expect(subField.fieldref).toEqual("sub.subField");
59 | });
60 | 


--------------------------------------------------------------------------------
/test/ignore.test.ts:
--------------------------------------------------------------------------------
  1 | import { configure } from "mobx";
  2 | import { types, Instance } from "mobx-state-tree";
  3 | import { Field, Form, RepeatingForm, SubForm, converters } from "../src";
  4 | 
  5 | configure({ enforceActions: "always" });
  6 | 
  7 | test("setRaw with required ignore", () => {
  8 |   const M = types.model("M", {
  9 |     foo: types.string,
 10 |   });
 11 | 
 12 |   const form = new Form(M, {
 13 |     foo: new Field(converters.string, {
 14 |       required: true,
 15 |     }),
 16 |   });
 17 | 
 18 |   const o = M.create({ foo: "FOO" });
 19 | 
 20 |   const state = form.state(o);
 21 |   const field = state.field("foo");
 22 | 
 23 |   field.setRaw("");
 24 |   expect(field.error).toEqual("Required");
 25 |   expect(field.value).toEqual("");
 26 | 
 27 |   field.setRaw("", { ignoreRequired: true });
 28 |   expect(field.error).toBeUndefined();
 29 |   expect(field.value).toEqual("");
 30 |   expect(o.foo).toEqual("");
 31 | });
 32 | 
 33 | test("setRaw with required ignore with automatically required", () => {
 34 |   const M = types.model("M", {
 35 |     foo: types.number,
 36 |   });
 37 | 
 38 |   const form = new Form(M, {
 39 |     foo: new Field(converters.number),
 40 |   });
 41 | 
 42 |   const o = M.create({ foo: 1 });
 43 | 
 44 |   const state = form.state(o);
 45 |   const field = state.field("foo");
 46 | 
 47 |   field.setRaw("");
 48 |   expect(field.error).toEqual("Required");
 49 |   expect(field.value).toEqual(1);
 50 | 
 51 |   // we can set ignoreRequired, but it has no impact
 52 |   // if the field *has* to be required by definition
 53 |   field.setRaw("", { ignoreRequired: true });
 54 |   expect(field.error).toEqual("Required");
 55 |   expect(field.value).toEqual(1);
 56 |   expect(o.foo).toEqual(1);
 57 | });
 58 | 
 59 | test("FormState can be saved ignoring required", async () => {
 60 |   const M = types.model("M", {
 61 |     foo: types.string,
 62 |   });
 63 | 
 64 |   const o = M.create({ foo: "FOO" });
 65 | 
 66 |   const form = new Form(M, {
 67 |     foo: new Field(converters.string, { required: true }),
 68 |   });
 69 | 
 70 |   let saved = false;
 71 | 
 72 |   async function save(data: any) {
 73 |     saved = true;
 74 |     return null;
 75 |   }
 76 | 
 77 |   const state = form.state(o, { backend: { save } });
 78 | 
 79 |   const field = state.field("foo");
 80 | 
 81 |   // we set the raw to the empty string even though it's required
 82 |   field.setRaw("");
 83 |   expect(field.error).toEqual("Required");
 84 |   expect(o.foo).toEqual("");
 85 | 
 86 |   // now we save, ignoring required
 87 |   const saveResult = await state.save({ ignoreRequired: true });
 88 |   // we expect the required message to be gone after save with ignoreRequired
 89 |   expect(field.error).toEqual(undefined);
 90 |   // saving actually succeeded
 91 |   expect(o.foo).toEqual("");
 92 |   expect(saveResult).toBeTruthy();
 93 |   expect(saved).toBeTruthy();
 94 | 
 95 |   // saving again without ignoreRequired will be an error
 96 |   const saveResult1 = await state.save();
 97 |   expect(saveResult1).toBeFalsy();
 98 |   expect(field.error).toEqual("Required");
 99 | });
100 | 
101 | test("FormState can be saved ignoring external errors", async () => {
102 |   const M = types.model("M", {
103 |     foo: types.string,
104 |   });
105 | 
106 |   const o = M.create({ foo: "FOO" });
107 | 
108 |   const form = new Form(M, {
109 |     foo: new Field(converters.string),
110 |   });
111 | 
112 |   let saved = false;
113 | 
114 |   async function save(data: any) {
115 |     saved = true;
116 |     return null;
117 |   }
118 | 
119 |   // we need to define a process as ignoreGetError is enabled automatically
120 |   // otherwise
121 |   async function process(node: Instance<typeof M>, path: string) {
122 |     return {
123 |       updates: [],
124 |       accessUpdates: [],
125 |       errorValidations: [],
126 |       warningValidations: [],
127 |     };
128 |   }
129 | 
130 |   const state = form.state(o, {
131 |     backend: { save, process },
132 |     getError: (accessor) => (accessor.path === "/foo" ? "Wrong!" : undefined),
133 |   });
134 | 
135 |   const field = state.field("foo");
136 | 
137 |   // we change a value to trigger the error
138 |   field.setRaw("BAR");
139 |   expect(field.error).toEqual("Wrong!");
140 |   // this is an external error, so change does happen
141 |   expect(o.foo).toEqual("BAR");
142 | 
143 |   expect(field.isInternallyValid).toBeTruthy();
144 |   // we are without internal errors
145 |   expect(state.validate({ ignoreGetError: true })).toBeTruthy();
146 | 
147 |   // now we save, ignoring external error
148 |   const saveResult = await state.save({ ignoreGetError: true });
149 |   expect(field.error).toEqual("Wrong!");
150 |   expect(o.foo).toEqual("BAR");
151 |   expect(saveResult).toBeTruthy();
152 |   expect(saved).toBeTruthy();
153 | 
154 |   // but saving again without ignoreGetError will be an error
155 |   const saveResult1 = await state.save();
156 |   expect(saveResult1).toBeFalsy();
157 |   expect(field.error).toEqual("Wrong!");
158 | });
159 | 
160 | test("FormState can be saved ignoring non-field external errors", async () => {
161 |   const M = types.model("M", {
162 |     foo: types.string,
163 |   });
164 | 
165 |   const o = M.create({ foo: "FOO" });
166 | 
167 |   const form = new Form(M, {
168 |     foo: new Field(converters.string),
169 |   });
170 | 
171 |   let saved = false;
172 | 
173 |   async function save(data: any) {
174 |     saved = true;
175 |     return null;
176 |   }
177 | 
178 |   // we need to define a process as ignoreGetError is enabled automatically
179 |   // otherwise
180 |   async function process(node: Instance<typeof M>, path: string) {
181 |     return {
182 |       updates: [],
183 |       accessUpdates: [],
184 |       errorValidations: [],
185 |       warningValidations: [],
186 |     };
187 |   }
188 | 
189 |   const state = form.state(o, {
190 |     backend: { save, process },
191 |     getError: (accessor) => (accessor.path === "" ? "Wrong!" : undefined),
192 |   });
193 | 
194 |   const field = state.field("foo");
195 | 
196 |   // we have an internal error
197 |   expect(state.validate()).toBeFalsy();
198 |   // we can ignore it
199 |   expect(state.validate({ ignoreGetError: true })).toBeTruthy();
200 | 
201 |   // now we save, ignoring external error
202 |   const saveResult = await state.save({ ignoreGetError: true });
203 |   expect(state.error).toEqual("Wrong!");
204 |   expect(saveResult).toBeTruthy();
205 |   expect(saved).toBeTruthy();
206 | 
207 |   // but saving again without ignoreGetError will be an error
208 |   const saveResult1 = await state.save();
209 |   expect(saveResult1).toBeFalsy();
210 | });
211 | 
212 | test("ignoreGetError repeating indexed accessor non-field external", async () => {
213 |   const N = types.model("N", {
214 |     foo: types.string,
215 |   });
216 |   const M = types.model("M", {
217 |     items: types.array(N),
218 |   });
219 | 
220 |   const o = M.create({ items: [{ foo: "FOO" }] });
221 | 
222 |   const form = new Form(M, {
223 |     items: new RepeatingForm({ foo: new Field(converters.string) }),
224 |   });
225 | 
226 |   let saved = false;
227 | 
228 |   async function save(data: any) {
229 |     saved = true;
230 |     return null;
231 |   }
232 | 
233 |   // we need to define a process as ignoreGetError is enabled automatically
234 |   // otherwise
235 |   async function process(node: Instance<typeof M>, path: string) {
236 |     return {
237 |       updates: [],
238 |       accessUpdates: [],
239 |       errorValidations: [],
240 |       warningValidations: [],
241 |     };
242 |   }
243 | 
244 |   const state = form.state(o, {
245 |     backend: { save, process },
246 |     getError: (accessor) =>
247 |       accessor.path === "/items/0" ? "Wrong!" : undefined,
248 |   });
249 | 
250 |   // we have an internal error
251 |   expect(state.validate()).toBeFalsy();
252 |   // we can ignore it
253 |   expect(state.validate({ ignoreGetError: true })).toBeTruthy();
254 | 
255 |   // now we save, ignoring external error
256 |   const saveResult = await state.save({ ignoreGetError: true });
257 |   expect(saveResult).toBeTruthy();
258 |   expect(saved).toBeTruthy();
259 | 
260 |   // but saving again without ignoreGetError will be an error
261 |   const saveResult1 = await state.save();
262 |   expect(saveResult1).toBeFalsy();
263 | });
264 | 
265 | test("ignoreGetError repeating accessor non-field external", async () => {
266 |   const N = types.model("N", {
267 |     foo: types.string,
268 |   });
269 |   const M = types.model("M", {
270 |     items: types.array(N),
271 |   });
272 | 
273 |   const o = M.create({ items: [{ foo: "FOO" }] });
274 | 
275 |   const form = new Form(M, {
276 |     items: new RepeatingForm({ foo: new Field(converters.string) }),
277 |   });
278 | 
279 |   let saved = false;
280 | 
281 |   async function save(data: any) {
282 |     saved = true;
283 |     return null;
284 |   }
285 |   // we need to define a process as ignoreGetError is enabled automatically
286 |   // otherwise
287 |   async function process(node: Instance<typeof M>, path: string) {
288 |     return {
289 |       updates: [],
290 |       accessUpdates: [],
291 |       errorValidations: [],
292 |       warningValidations: [],
293 |     };
294 |   }
295 | 
296 |   const state = form.state(o, {
297 |     backend: { save, process },
298 |     getError: (accessor) => (accessor.path === "/items" ? "Wrong!" : undefined),
299 |   });
300 | 
301 |   // we have an internal error
302 |   expect(state.validate()).toBeFalsy();
303 |   // we can ignore it
304 |   expect(state.validate({ ignoreGetError: true })).toBeTruthy();
305 | 
306 |   // now we save, ignoring external error
307 |   const saveResult = await state.save({ ignoreGetError: true });
308 |   expect(saveResult).toBeTruthy();
309 |   expect(saved).toBeTruthy();
310 | 
311 |   // but saving again without ignoreGetError will be an error
312 |   const saveResult1 = await state.save();
313 |   expect(saveResult1).toBeFalsy();
314 | });
315 | 
316 | test("ignoreGetError sub form accessor non-field external", async () => {
317 |   const N = types.model("N", {
318 |     foo: types.string,
319 |   });
320 |   const M = types.model("M", {
321 |     item: N,
322 |   });
323 | 
324 |   const o = M.create({ item: { foo: "FOO" } });
325 | 
326 |   const form = new Form(M, {
327 |     item: new SubForm({ foo: new Field(converters.string) }),
328 |   });
329 | 
330 |   let saved = false;
331 | 
332 |   async function save(data: any) {
333 |     saved = true;
334 |     return null;
335 |   }
336 | 
337 |   // we need to define a process as ignoreGetError is enabled automatically
338 |   // otherwise
339 |   async function process(node: Instance<typeof M>, path: string) {
340 |     return {
341 |       updates: [],
342 |       accessUpdates: [],
343 |       errorValidations: [],
344 |       warningValidations: [],
345 |     };
346 |   }
347 | 
348 |   const state = form.state(o, {
349 |     backend: { save, process },
350 |     getError: (accessor) => (accessor.path === "/item" ? "Wrong!" : undefined),
351 |   });
352 | 
353 |   // we have an internal error
354 |   expect(state.validate()).toBeFalsy();
355 |   // we can ignore it
356 |   expect(state.validate({ ignoreGetError: true })).toBeTruthy();
357 | 
358 |   // now we save, ignoring external error
359 |   const saveResult = await state.save({ ignoreGetError: true });
360 |   expect(saveResult).toBeTruthy();
361 |   expect(saved).toBeTruthy();
362 | 
363 |   // but saving again without ignoreGetError will be an error
364 |   const saveResult1 = await state.save();
365 |   expect(saveResult1).toBeFalsy();
366 | });
367 | 
368 | test("FormState can be saved without affecting save status", async () => {
369 |   const M = types.model("M", {
370 |     foo: types.string,
371 |   });
372 | 
373 |   const o = M.create({ foo: "FOO" });
374 | 
375 |   const form = new Form(M, {
376 |     foo: new Field(converters.string),
377 |   });
378 | 
379 |   async function save(data: any) {
380 |     return null;
381 |   }
382 | 
383 |   const state = form.state(o, {
384 |     backend: { save },
385 |     getError: (accessor) => (accessor.path === "/foo" ? "Wrong!" : undefined),
386 |   });
387 | 
388 |   // now we save, ignoring save status
389 |   await state.save({ ignoreSaveStatus: true });
390 |   expect(state.saveStatus).toEqual("before");
391 | });
392 | 


--------------------------------------------------------------------------------
/test/multiple-conversion-errors.test.ts:
--------------------------------------------------------------------------------
  1 | import { configure } from "mobx";
  2 | import { types } from "mobx-state-tree";
  3 | import { Field, Form, converters } from "../src";
  4 | 
  5 | configure({ enforceActions: "always" });
  6 | 
  7 | test("conversion failure with multiple messages", () => {
  8 |   const M = types.model("M", {
  9 |     foo: types.string,
 10 |   });
 11 | 
 12 |   const form = new Form(M, {
 13 |     foo: new Field(
 14 |       converters.stringDecimal({
 15 |         allowNegative: false,
 16 |         decimalPlaces: 4,
 17 |         maxWholeDigits: 4,
 18 |       }),
 19 |       {
 20 |         conversionError: {
 21 |           default: "Not a number",
 22 |           tooManyDecimalPlaces: "Too many decimal places",
 23 |           tooManyWholeDigits: "Too many whole digits",
 24 |           cannotBeNegative: "Cannot be negative",
 25 |         },
 26 |       }
 27 |     ),
 28 |   });
 29 | 
 30 |   const o = M.create({ foo: "3.14" });
 31 | 
 32 |   const state = form.state(o, {
 33 |     converterOptions: {
 34 |       decimalSeparator: ",",
 35 |       thousandSeparator: ".",
 36 |       renderThousands: true,
 37 |     },
 38 |   });
 39 | 
 40 |   const field = state.field("foo");
 41 | 
 42 |   field.setRaw("-44");
 43 |   expect(field.error).toEqual("Cannot be negative");
 44 | 
 45 |   field.setRaw("1,12345");
 46 |   expect(field.error).toEqual("Too many decimal places");
 47 | 
 48 |   field.setRaw("12345,1");
 49 |   expect(field.error).toEqual("Too many whole digits");
 50 | 
 51 |   field.setRaw("34.4567,1");
 52 |   expect(field.error).toEqual("Not a number");
 53 | 
 54 |   field.setRaw("123ab");
 55 |   expect(field.error).toEqual("Not a number");
 56 | });
 57 | 
 58 | test("conversion failure with multiple messages, context", () => {
 59 |   const M = types.model("M", {
 60 |     foo: types.string,
 61 |   });
 62 | 
 63 |   const form = new Form(M, {
 64 |     foo: new Field(
 65 |       converters.stringDecimal({
 66 |         allowNegative: false,
 67 |         decimalPlaces: 4,
 68 |         maxWholeDigits: 4,
 69 |       }),
 70 |       {
 71 |         conversionError: {
 72 |           default: (context) => "Not a number" + context.extra,
 73 |           tooManyDecimalPlaces: (context) =>
 74 |             "Too many decimal places" + context.extra,
 75 |           tooManyWholeDigits: (context) =>
 76 |             "Too many whole digits" + context.extra,
 77 |           cannotBeNegative: (context) => "Cannot be negative" + context.extra,
 78 |         },
 79 |       }
 80 |     ),
 81 |   });
 82 | 
 83 |   const o = M.create({ foo: "3.14" });
 84 | 
 85 |   const state = form.state(o, {
 86 |     converterOptions: {
 87 |       decimalSeparator: ",",
 88 |       thousandSeparator: ".",
 89 |       renderThousands: true,
 90 |     },
 91 |     context: {
 92 |       extra: "!!",
 93 |     },
 94 |   });
 95 | 
 96 |   const field = state.field("foo");
 97 | 
 98 |   field.setRaw("-44");
 99 |   expect(field.error).toEqual("Cannot be negative!!");
100 | 
101 |   field.setRaw("1,12345");
102 |   expect(field.error).toEqual("Too many decimal places!!");
103 | 
104 |   field.setRaw("12345,1");
105 |   expect(field.error).toEqual("Too many whole digits!!");
106 | 
107 |   field.setRaw("123ab");
108 |   expect(field.error).toEqual("Not a number!!");
109 | });
110 | 


--------------------------------------------------------------------------------
/test/navigate.test.ts:
--------------------------------------------------------------------------------
 1 | import { configure } from "mobx";
 2 | import { types, getType } from "mobx-state-tree";
 3 | import {
 4 |   Field,
 5 |   Form,
 6 |   SubForm,
 7 |   RepeatingForm,
 8 |   converters,
 9 |   IAnyFormAccessor,
10 | } from "../src";
11 | 
12 | configure({ enforceActions: "always" });
13 | 
14 | test("value for state", () => {
15 |   const M = types.model("M", {
16 |     foo: types.string,
17 |   });
18 | 
19 |   const form = new Form(M, {
20 |     foo: new Field(converters.string),
21 |   });
22 | 
23 |   const o = M.create({ foo: "FOO" });
24 | 
25 |   const state = form.state(o);
26 |   expect(state.value).toBe(o);
27 | });
28 | 
29 | test("value for sub form", () => {
30 |   const N = types
31 |     .model("N", {
32 |       bar: types.string,
33 |     })
34 |     .views((self) => ({
35 |       something() {
36 |         return self.bar + "X";
37 |       },
38 |     }));
39 | 
40 |   const M = types.model("M", {
41 |     foo: N,
42 |   });
43 | 
44 |   const form = new Form(M, {
45 |     foo: new SubForm({
46 |       bar: new Field(converters.string),
47 |     }),
48 |   });
49 | 
50 |   const o = M.create({ foo: { bar: "BAR" } });
51 | 
52 |   const state = form.state(o);
53 |   const sub = state.subForm("foo");
54 | 
55 |   expect(sub.value).toBe(o.foo);
56 |   expect(getType(sub.value)).toBe(N);
57 |   expect(sub.value.something()).toEqual("BARX");
58 |   expect(getType((sub.parent as IAnyFormAccessor).value)).toBe(M);
59 | });
60 | 
61 | test("value for repeating form", () => {
62 |   const N = types
63 |     .model("N", {
64 |       bar: types.string,
65 |     })
66 |     .views((self) => ({
67 |       something() {
68 |         return self.bar + "X";
69 |       },
70 |     }));
71 | 
72 |   const M = types.model("M", {
73 |     foo: types.array(N),
74 |   });
75 | 
76 |   const form = new Form(M, {
77 |     foo: new RepeatingForm({
78 |       bar: new Field(converters.string),
79 |     }),
80 |   });
81 | 
82 |   const o = M.create({ foo: [{ bar: "BAR" }] });
83 | 
84 |   const state = form.state(o);
85 |   const forms = state.repeatingForm("foo");
86 | 
87 |   expect(forms.value).toEqual(o.foo);
88 | 
89 |   const first = forms.index(0);
90 | 
91 |   expect(first.value).toBe(o.foo[0]);
92 |   expect(getType(first.value)).toBe(N);
93 |   expect(first.value.something()).toEqual("BARX");
94 |   const parent = first.parent as IAnyFormAccessor;
95 |   const parentParent = parent.parent as IAnyFormAccessor;
96 |   expect(getType(parent.value)).toMatchObject(types.array(N));
97 |   expect(getType(parentParent.value)).toBe(M);
98 | });
99 | 


--------------------------------------------------------------------------------
/test/subform.test.ts:
--------------------------------------------------------------------------------
  1 | import { configure } from "mobx";
  2 | import { types } from "mobx-state-tree";
  3 | import { Field, Form, SubForm, SubFormAccessor, converters } from "../src";
  4 | 
  5 | configure({ enforceActions: "always" });
  6 | 
  7 | test("a sub form", () => {
  8 |   const N = types.model("N", {
  9 |     bar: types.string,
 10 |   });
 11 | 
 12 |   const M = types.model("M", {
 13 |     foo: types.string,
 14 |     sub: N,
 15 |   });
 16 | 
 17 |   const form = new Form(M, {
 18 |     foo: new Field(converters.string),
 19 |     sub: new SubForm({
 20 |       bar: new Field(converters.string),
 21 |     }),
 22 |   });
 23 | 
 24 |   const o = M.create({ foo: "FOO", sub: { bar: "BAR" } });
 25 | 
 26 |   const state = form.state(o);
 27 |   const fooField = state.field("foo");
 28 |   const barField = state.subForm("sub").field("bar");
 29 | 
 30 |   expect(fooField.raw).toEqual("FOO");
 31 |   fooField.setRaw("FOO!");
 32 |   expect(fooField.raw).toEqual("FOO!");
 33 |   expect(fooField.value).toEqual("FOO!");
 34 |   expect(o.foo).toEqual("FOO!");
 35 | 
 36 |   expect(barField.raw).toEqual("BAR");
 37 |   barField.setRaw("BAR!");
 38 |   expect(barField.value).toEqual("BAR!");
 39 |   expect(o.sub.bar).toEqual("BAR!");
 40 | });
 41 | 
 42 | test("sub form validation", () => {
 43 |   const N = types.model("N", {
 44 |     bar: types.string,
 45 |   });
 46 | 
 47 |   const M = types.model("M", {
 48 |     foo: types.string,
 49 |     sub: N,
 50 |   });
 51 | 
 52 |   const form = new Form(M, {
 53 |     foo: new Field(converters.string),
 54 |     sub: new SubForm({
 55 |       bar: new Field(converters.string, { required: true }),
 56 |     }),
 57 |   });
 58 | 
 59 |   const o = M.create({ foo: "FOO", sub: { bar: "BAR" } });
 60 | 
 61 |   const state = form.state(o);
 62 |   const fooField = state.field("foo");
 63 |   const barField = state.subForm("sub").field("bar");
 64 | 
 65 |   barField.setRaw("");
 66 | 
 67 |   expect(state.isValid).toBeFalsy();
 68 | 
 69 |   barField.setRaw("BAR!");
 70 | 
 71 |   expect(state.isValid).toBeTruthy();
 72 | });
 73 | 
 74 | test("SubField disabled when SubForm disabled", () => {
 75 |   const N = types.model("N", {
 76 |     subField: types.string,
 77 |   });
 78 | 
 79 |   const M = types.model("M", {
 80 |     subForm: N,
 81 |   });
 82 | 
 83 |   const form = new Form(M, {
 84 |     subForm: new SubForm({
 85 |       subField: new Field(converters.string),
 86 |     }),
 87 |   });
 88 | 
 89 |   const o = M.create({
 90 |     subForm: { subField: "SUB_FIELD" },
 91 |   });
 92 | 
 93 |   const state = form.state(o, {
 94 |     isDisabled: (accessor) => accessor.path === "/subForm",
 95 |   });
 96 | 
 97 |   const subForm = state.subForm("subForm");
 98 |   const subField = state.subForm("subForm").field("subField");
 99 | 
100 |   expect(subForm.disabled).toBeTruthy();
101 |   expect(subField.disabled).toBeTruthy();
102 | });
103 | 
104 | test("SubField disabled when SubForm in a SubForm is disabled", () => {
105 |   const O = types.model("O", {
106 |     subField: types.string,
107 |   });
108 | 
109 |   const N = types.model("N", {
110 |     subForm2: O,
111 |   });
112 | 
113 |   const M = types.model("M", {
114 |     subForm: N,
115 |   });
116 | 
117 |   const form = new Form(M, {
118 |     subForm: new SubForm({
119 |       subForm2: new SubForm({
120 |         subField: new Field(converters.string),
121 |       }),
122 |     }),
123 |   });
124 | 
125 |   const o = M.create({
126 |     subForm: { subForm2: { subField: "SUB_FIELD" } },
127 |   });
128 | 
129 |   const state = form.state(o, {
130 |     isDisabled: (accessor) => accessor.path === "/subForm",
131 |   });
132 | 
133 |   const subForm = state.subForm("subForm");
134 |   const subForm2 = state.subForm("subForm").subForm("subForm2");
135 |   const subField = state
136 |     .subForm("subForm")
137 |     .subForm("subForm2")
138 |     .field("subField");
139 | 
140 |   expect(subForm.disabled).toBeTruthy();
141 |   expect(subForm2.disabled).toBeTruthy();
142 |   expect(subField.disabled).toBeTruthy();
143 | });
144 | 
145 | test("groups with subform error on top-level", async () => {
146 |   const N = types.model("N", {
147 |     bar: types.string,
148 |   });
149 |   const M = types.model("M", {
150 |     sub: N,
151 |   });
152 | 
153 |   const form = new Form(M, {
154 |     sub: new SubForm({
155 |       bar: new Field(converters.string),
156 |     }),
157 |   });
158 | 
159 |   const o = M.create({ sub: { bar: "BAR" } });
160 | 
161 |   const state = form.state(o, {
162 |     getError: (accessor: any) =>
163 |       accessor instanceof SubFormAccessor ? "Somehow this is wrong" : undefined,
164 |     getWarning: (accessor: any) =>
165 |       accessor instanceof SubFormAccessor
166 |         ? "Somehow this is insufficient"
167 |         : undefined,
168 |   });
169 |   const subForm = state.subForm("sub");
170 | 
171 |   expect(subForm.isValid).toBeFalsy();
172 |   expect(subForm.isWarningFree).toBeFalsy();
173 | });
174 | 


--------------------------------------------------------------------------------
/test/utils.ts:
--------------------------------------------------------------------------------
 1 | export function resolveReactions(): Promise<void> {
 2 |   return new Promise((resolve) => {
 3 |     setTimeout(() => {
 4 |       resolve();
 5 |     }, 0);
 6 |   });
 7 | }
 8 | 
 9 | // we have to use a simplistic mock debounce instead of the
10 | // one in lodash, as the lodash one doesn't play well
11 | // with jest's fake timers. we use the lodash one in production
12 | // as it's more robust.
13 | // https://github.com/facebook/jest/issues/3465
14 | export function debounce(f: any, delay: number) {
15 |   let timeout: any = null;
16 |   return () => {
17 |     clearTimeout(timeout);
18 |     timeout = setTimeout(f, delay);
19 |   };
20 | }
21 | 
22 | export function until() {
23 |   let resolveResult: () => void = () => {
24 |     /* nothing */
25 |   };
26 | 
27 |   const finished: Promise<void> = new Promise((resolve) => {
28 |     resolveResult = resolve;
29 |   });
30 | 
31 |   return { resolve: resolveResult, finished };
32 | }
33 | 


--------------------------------------------------------------------------------
/test/viewhook.test.ts:
--------------------------------------------------------------------------------
 1 | import { configure } from "mobx";
 2 | import { types } from "mobx-state-tree";
 3 | import {
 4 |   converters,
 5 |   controlled,
 6 |   Form,
 7 |   Field,
 8 |   setupValidationProps,
 9 |   ValidationProps,
10 | } from "../src";
11 | 
12 | configure({ enforceActions: "always" });
13 | 
14 | test("custom validationProps", () => {
15 |   const M = types.model("M", {
16 |     foo: types.number,
17 |   });
18 | 
19 |   const form = new Form(M, {
20 |     foo: new Field(converters.number, { controlled: controlled.value }),
21 |   });
22 | 
23 |   const o = M.create({ foo: 1 });
24 | 
25 |   const myValidationProps: ValidationProps = (accessor) => {
26 |     return { error: accessor.error };
27 |   };
28 |   setupValidationProps(myValidationProps);
29 | 
30 |   const state = form.state(o);
31 |   const field = state.field("foo");
32 | 
33 |   expect(field.validationProps).toEqual({});
34 |   field.setRaw("wrong");
35 |   expect(field.validationProps).toEqual({
36 |     error: "Could not convert",
37 |   });
38 | });
39 | 


--------------------------------------------------------------------------------
/test/warning.test.ts:
--------------------------------------------------------------------------------
  1 | import { configure } from "mobx";
  2 | import { types, Instance } from "mobx-state-tree";
  3 | import {
  4 |   Field,
  5 |   Form,
  6 |   IAnyFormAccessor,
  7 |   FieldAccessor,
  8 |   RepeatingForm,
  9 |   RepeatingFormAccessor,
 10 |   SubForm,
 11 |   converters,
 12 | } from "../src";
 13 | 
 14 | configure({ enforceActions: "always" });
 15 | 
 16 | test("a simple warning", async () => {
 17 |   const M = types.model("M", {
 18 |     foo: types.string,
 19 |     bar: types.string,
 20 |   });
 21 | 
 22 |   const form = new Form(M, {
 23 |     foo: new Field(converters.string),
 24 |     bar: new Field(converters.string),
 25 |   });
 26 | 
 27 |   const o = M.create({ foo: "FOO", bar: "BAR" });
 28 | 
 29 |   const state = form.state(o, {
 30 |     backend: { save: async () => null },
 31 |     getWarning: (accessor: any) =>
 32 |       accessor.path === "/foo" ? "Please reconsider" : undefined,
 33 |   });
 34 |   const fooField = state.field("foo");
 35 |   const barField = state.field("bar");
 36 | 
 37 |   expect(fooField.raw).toEqual("FOO");
 38 |   expect(fooField.isWarningFree).toBeFalsy();
 39 |   expect(fooField.warning).toEqual("Please reconsider");
 40 |   expect(barField.raw).toEqual("BAR");
 41 |   expect(barField.isWarningFree).toBeTruthy();
 42 |   expect(barField.warning).toBeUndefined();
 43 |   expect(state.isWarningFree).toBeFalsy();
 44 | 
 45 |   // warnings don't make a form invalid
 46 |   const result2 = state.validate();
 47 |   expect(result2).toBeTruthy();
 48 | 
 49 |   const isSaved = await state.save();
 50 |   // warnings are not cleared by a save...
 51 |   expect(fooField.warning).toEqual("Please reconsider");
 52 |   // ...and don't prevent a save
 53 |   expect(isSaved).toBeTruthy();
 54 | });
 55 | 
 56 | test("a simple error", async () => {
 57 |   const M = types.model("M", {
 58 |     foo: types.string,
 59 |   });
 60 | 
 61 |   const form = new Form(M, {
 62 |     foo: new Field(converters.string),
 63 |   });
 64 | 
 65 |   const o = M.create({ foo: "FOO" });
 66 | 
 67 |   // we need to define a process as ignoreGetError is enabled automatically
 68 |   // otherwise
 69 |   async function process(node: Instance<typeof M>, path: string) {
 70 |     return {
 71 |       updates: [],
 72 |       accessUpdates: [],
 73 |       errorValidations: [],
 74 |       warningValidations: [],
 75 |     };
 76 |   }
 77 | 
 78 |   const state = form.state(o, {
 79 |     backend: { save: async () => null, process },
 80 |     getError: (accessor: any) =>
 81 |       accessor.path === "/foo" ? "Wrong" : undefined,
 82 |   });
 83 |   const fooField = state.field("foo");
 84 | 
 85 |   const result2 = state.validate();
 86 |   expect(result2).toBeFalsy();
 87 | 
 88 |   const isSaved = await state.save();
 89 | 
 90 |   expect(fooField.raw).toEqual("FOO");
 91 |   expect(fooField.error).toEqual("Wrong");
 92 |   expect(state.isWarningFree).toBeTruthy();
 93 |   expect(isSaved).toBeFalsy();
 94 | });
 95 | 
 96 | test("client side errors trumps getError", () => {
 97 |   const M = types.model("M", {
 98 |     foo: types.string,
 99 |   });
100 | 
101 |   // The validator expects "correct"
102 |   const form = new Form(M, {
103 |     foo: new Field(converters.string, {
104 |       validators: [(value) => value !== "correct" && "Wrong"],
105 |     }),
106 |   });
107 | 
108 |   const o = M.create({ foo: "not correct" });
109 | 
110 |   // the getErrors expects uppercase
111 |   const state = form.state(o, {
112 |     getError: (accessor: any) =>
113 |       accessor instanceof FieldAccessor &&
114 |       accessor.raw !== accessor.raw.toUpperCase()
115 |         ? "Not uppercase"
116 |         : undefined,
117 |   });
118 |   const field = state.field("foo");
119 |   // The getErrors hook already fills in the error
120 |   expect(field.error).toEqual("Not uppercase");
121 |   // Form validation should trump the old error
122 |   const result1 = state.validate();
123 |   expect(field.error).toEqual("Wrong");
124 |   expect(result1).toBeFalsy();
125 | 
126 |   field.setRaw("correct");
127 |   const result2 = state.validate();
128 |   // We fix one error, the other remains
129 |   expect(field.error).toEqual("Not uppercase");
130 |   expect(result2).toBeFalsy();
131 | });
132 | 
133 | test("both errors and warnings", () => {
134 |   const M = types.model("M", {
135 |     foo: types.string,
136 |   });
137 | 
138 |   const form = new Form(M, {
139 |     foo: new Field(converters.string),
140 |   });
141 | 
142 |   const o = M.create({ foo: "FOO" });
143 | 
144 |   const state = form.state(o, {
145 |     getError: (accessor: any) =>
146 |       accessor.path === "/foo" ? "Wrong" : undefined,
147 |     getWarning: (accessor: any) =>
148 |       accessor.path === "/foo" ? "Please reconsider" : undefined,
149 |   });
150 |   const fooField = state.field("foo");
151 | 
152 |   expect(fooField.raw).toEqual("FOO");
153 |   expect(fooField.error).toEqual("Wrong");
154 |   expect(fooField.warning).toEqual("Please reconsider");
155 |   expect(fooField.isWarningFree).toBeFalsy();
156 |   expect(state.isWarningFree).toBeFalsy();
157 | });
158 | 
159 | test("warning in repeating form", () => {
160 |   const N = types.model("N", {
161 |     bar: types.string,
162 |   });
163 |   const M = types.model("M", {
164 |     foo: types.array(N),
165 |   });
166 | 
167 |   const form = new Form(M, {
168 |     foo: new RepeatingForm({
169 |       bar: new Field(converters.string),
170 |     }),
171 |   });
172 | 
173 |   const o = M.create({ foo: [{ bar: "correct" }, { bar: "incorrect" }] });
174 | 
175 |   const state = form.state(o, {
176 |     getWarning: (accessor: any) =>
177 |       accessor.path === "/foo/1/bar" ? "Please reconsider" : undefined,
178 |   });
179 | 
180 |   const forms = state.repeatingForm("foo");
181 |   const barField1 = forms.index(0).field("bar");
182 |   const barField2 = forms.index(1).field("bar");
183 | 
184 |   expect(barField1.raw).toEqual("correct");
185 |   expect(barField1.isWarningFree).toBeTruthy();
186 |   expect(barField1.warning).toBeUndefined();
187 |   expect(barField2.raw).toEqual("incorrect");
188 |   expect(barField2.isWarningFree).toBeFalsy();
189 |   expect(barField2.warning).toEqual("Please reconsider");
190 |   expect(forms.isWarningFree).toBeFalsy();
191 |   expect(state.isWarningFree).toBeFalsy();
192 | });
193 | 
194 | test("warning in subform field", () => {
195 |   const N = types.model("N", {
196 |     bar: types.string,
197 |   });
198 | 
199 |   const M = types.model("M", {
200 |     foo: types.string,
201 |     sub: N,
202 |   });
203 | 
204 |   const form = new Form(M, {
205 |     foo: new Field(converters.string),
206 |     sub: new SubForm({
207 |       bar: new Field(converters.string),
208 |     }),
209 |   });
210 | 
211 |   const o = M.create({ foo: "FOO", sub: { bar: "BAR" } });
212 | 
213 |   const state = form.state(o, {
214 |     getWarning: (accessor: any) =>
215 |       accessor.path === "/sub/bar" ? "Please reconsider" : undefined,
216 |   });
217 | 
218 |   const fooField = state.field("foo");
219 |   const subForm = state.subForm("sub");
220 |   const barField = state.subForm("sub").field("bar");
221 |   expect(fooField.raw).toEqual("FOO");
222 |   expect(fooField.isWarningFree).toBeTruthy();
223 |   expect(fooField.warning).toBeUndefined();
224 |   expect(barField.raw).toEqual("BAR");
225 |   expect(barField.isWarningFree).toBeFalsy();
226 |   expect(barField.warning).toEqual("Please reconsider");
227 |   expect(subForm.isWarningFree).toBeFalsy();
228 |   expect(state.isWarningFree).toBeFalsy();
229 | });
230 | 
231 | test("error on repeating form", () => {
232 |   const N = types.model("N", {
233 |     bar: types.string,
234 |   });
235 |   const M = types.model("M", {
236 |     foo: types.array(N),
237 |   });
238 | 
239 |   const form = new Form(M, {
240 |     foo: new RepeatingForm({
241 |       bar: new Field(converters.string),
242 |     }),
243 |   });
244 | 
245 |   const o = M.create({ foo: [] });
246 | 
247 |   const state = form.state(o, {
248 |     getError: (accessor: any) =>
249 |       accessor instanceof RepeatingFormAccessor && accessor.length === 0
250 |         ? "Empty"
251 |         : undefined,
252 |   });
253 | 
254 |   const result1 = state.validate();
255 | 
256 |   const repeatingForms = state.repeatingForm("foo");
257 | 
258 |   expect(repeatingForms.error).toEqual("Empty");
259 |   expect(state.isWarningFree).toBeTruthy();
260 |   expect(result1).toBeFalsy();
261 | 
262 |   repeatingForms.push({ bar: "BAR" });
263 |   const result2 = state.validate();
264 | 
265 |   expect(repeatingForms.error).toBeUndefined();
266 |   expect(result2).toBeTruthy();
267 | });
268 | 
269 | test("warning on repeating form", () => {
270 |   const N = types.model("N", {
271 |     bar: types.string,
272 |   });
273 |   const M = types.model("M", {
274 |     foo: types.array(N),
275 |   });
276 | 
277 |   const form = new Form(M, {
278 |     foo: new RepeatingForm({
279 |       bar: new Field(converters.string),
280 |     }),
281 |   });
282 | 
283 |   const o = M.create({ foo: [] });
284 | 
285 |   const state = form.state(o, {
286 |     getWarning: (accessor: any) => {
287 |       if (accessor instanceof RepeatingFormAccessor) {
288 |         expect(accessor.path).toEqual("/foo");
289 |       }
290 |       return accessor instanceof RepeatingFormAccessor && accessor.length === 0
291 |         ? "Empty"
292 |         : undefined;
293 |     },
294 |   });
295 | 
296 |   const repeatingForms = state.repeatingForm("foo");
297 | 
298 |   expect(repeatingForms.isWarningFree).toBeFalsy();
299 |   expect(repeatingForms.warning).toEqual("Empty");
300 |   expect(state.isWarningFree).toBeFalsy();
301 | 
302 |   repeatingForms.push({ bar: "BAR" });
303 |   state.validate();
304 | 
305 |   expect(repeatingForms.isWarningFree).toBeTruthy();
306 |   expect(repeatingForms.warning).toBeUndefined();
307 |   expect(state.isWarningFree).toBeTruthy();
308 | });
309 | 
310 | test("error on indexed repeating form", () => {
311 |   const N = types.model("N", {
312 |     bar: types.string,
313 |   });
314 |   const M = types.model("M", {
315 |     foo: types.array(N),
316 |   });
317 | 
318 |   const form = new Form(M, {
319 |     foo: new RepeatingForm({
320 |       bar: new Field(converters.string),
321 |     }),
322 |   });
323 | 
324 |   const o = M.create({ foo: [{ bar: "correct" }, { bar: "incorrect" }] });
325 | 
326 |   const state = form.state(o, {
327 |     getError: (accessor: any) =>
328 |       accessor.path === "/foo/1" ? "Error" : undefined,
329 |   });
330 | 
331 |   const result = state.validate();
332 | 
333 |   const forms = state.repeatingForm("foo");
334 |   const fooForm1 = forms.index(0);
335 |   const fooForm2 = forms.index(1);
336 | 
337 |   expect(fooForm1.error).toBeUndefined();
338 |   expect(fooForm2.error).toEqual("Error");
339 |   expect(state.isWarningFree).toBeTruthy();
340 |   expect(result).toBeFalsy();
341 | });
342 | 
343 | test("warning on indexed repeating form", () => {
344 |   const N = types.model("N", {
345 |     bar: types.string,
346 |   });
347 |   const M = types.model("M", {
348 |     foo: types.array(N),
349 |   });
350 | 
351 |   const form = new Form(M, {
352 |     foo: new RepeatingForm({
353 |       bar: new Field(converters.string),
354 |     }),
355 |   });
356 | 
357 |   const o = M.create({ foo: [{ bar: "correct" }, { bar: "incorrect" }] });
358 | 
359 |   const state = form.state(o, {
360 |     getWarning: (accessor: any) =>
361 |       accessor.path === "/foo/1" ? "Warning" : undefined,
362 |   });
363 | 
364 |   const forms = state.repeatingForm("foo");
365 |   const fooForm1 = forms.index(0);
366 |   const fooForm2 = forms.index(1);
367 | 
368 |   expect(fooForm1.isWarningFree).toBeTruthy();
369 |   expect(fooForm1.warning).toBeUndefined();
370 |   expect(fooForm2.isWarningFree).toBeFalsy();
371 |   expect(fooForm2.warning).toEqual("Warning");
372 |   expect(forms.isWarningFree).toBeFalsy();
373 |   expect(state.isWarningFree).toBeFalsy();
374 | });
375 | 
376 | test("error on subform", () => {
377 |   const N = types.model("N", {
378 |     bar: types.string,
379 |   });
380 | 
381 |   const M = types.model("M", {
382 |     foo: types.string,
383 |     sub: N,
384 |   });
385 | 
386 |   const form = new Form(M, {
387 |     foo: new Field(converters.string),
388 |     sub: new SubForm({
389 |       bar: new Field(converters.string),
390 |     }),
391 |   });
392 | 
393 |   const o = M.create({ foo: "FOO", sub: { bar: "BAR" } });
394 | 
395 |   const state = form.state(o, {
396 |     getError: (accessor: any) =>
397 |       accessor.path === "/sub" ? "Error" : undefined,
398 |   });
399 | 
400 |   const result = state.validate();
401 | 
402 |   const subForms = state.subForm("sub");
403 | 
404 |   expect(subForms.error).toEqual("Error");
405 |   expect(state.isWarningFree).toBeTruthy();
406 |   expect(result).toBeFalsy();
407 | });
408 | 
409 | test("warning on subform", () => {
410 |   const N = types.model("N", {
411 |     bar: types.string,
412 |   });
413 | 
414 |   const M = types.model("M", {
415 |     foo: types.string,
416 |     sub: N,
417 |   });
418 | 
419 |   const form = new Form(M, {
420 |     foo: new Field(converters.string),
421 |     sub: new SubForm({
422 |       bar: new Field(converters.string),
423 |     }),
424 |   });
425 | 
426 |   const o = M.create({ foo: "FOO", sub: { bar: "BAR" } });
427 | 
428 |   const state = form.state(o, {
429 |     getWarning: (accessor: any) =>
430 |       accessor.path === "/sub" ? "Warning" : undefined,
431 |   });
432 | 
433 |   const subform = state.subForm("sub");
434 | 
435 |   expect(subform.warning).toEqual("Warning");
436 |   expect(subform.isWarningFree).toBeFalsy();
437 |   expect(state.isWarningFree).toBeFalsy();
438 | });
439 | 
440 | test("error on formstate", () => {
441 |   const M = types.model("M", {
442 |     foo: types.string,
443 |   });
444 | 
445 |   const form = new Form(M, {
446 |     foo: new Field(converters.string),
447 |   });
448 | 
449 |   const o = M.create({ foo: "FOO" });
450 | 
451 |   let usedAccessor: IAnyFormAccessor | undefined = undefined;
452 | 
453 |   const state = form.state(o, {
454 |     getError: (accessor: any) => {
455 |       usedAccessor = accessor;
456 |       return "Error";
457 |     },
458 |   });
459 | 
460 |   const result = state.validate();
461 | 
462 |   expect(state.error).toEqual("Error");
463 |   expect(state.isWarningFree).toBeTruthy();
464 |   expect(result).toBeFalsy();
465 |   expect(usedAccessor).toBe(state);
466 | });
467 | 
468 | test("warning on formstate", () => {
469 |   const M = types.model("M", {
470 |     foo: types.string,
471 |   });
472 | 
473 |   const form = new Form(M, {
474 |     foo: new Field(converters.string),
475 |   });
476 | 
477 |   const o = M.create({ foo: "FOO" });
478 | 
479 |   let usedAccessor: IAnyFormAccessor | undefined = undefined;
480 | 
481 |   const state = form.state(o, {
482 |     getWarning: (accessor: any) => {
483 |       usedAccessor = accessor;
484 |       return "Warning";
485 |     },
486 |   });
487 | 
488 |   expect(state.warning).toEqual("Warning");
489 |   expect(state.isWarningFree).toBeFalsy();
490 |   expect(usedAccessor).toBe(state);
491 | });
492 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": "2.0.0",
 3 |     "compilerOptions": {
 4 |         "moduleResolution": "node",
 5 |         "target": "es5",
 6 |         "module": "es2015",
 7 |         "lib": ["es2015", "es2016", "es2017", "es2020", "es2021", "dom"],
 8 |         "sourceMap": true,
 9 |         "strict": true,
10 |         "strictPropertyInitialization": true,
11 |         "strictNullChecks": true,
12 |         "noFallthroughCasesInSwitch": true,
13 |         "noImplicitReturns": true,
14 |         "noImplicitThis": true,
15 |         "noImplicitAny": true,
16 |         "declaration": true,
17 |         "removeComments": false,
18 |         "allowSyntheticDefaultImports": true,
19 |         "experimentalDecorators": true,
20 |         "emitDecoratorMetadata": true,
21 |         "jsx": "react",
22 |         "typeRoots": ["node_modules/@types"],
23 |         "useDefineForClassFields": true,
24 |         "outDir": "dist/src"
25 |     },
26 |     "include": ["src/**/*"]
27 | }
28 | 


--------------------------------------------------------------------------------
/webpack.common.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   module: {
 3 |     rules: [
 4 |       {
 5 |         test: /\.tsx?$/,
 6 |         use: "ts-loader",
 7 |         exclude: /node_modules/,
 8 |       },
 9 |     ],
10 |   },
11 |   resolve: {
12 |     extensions: [".tsx", ".ts", ".js"],
13 |   },
14 |   output: {
15 |     filename: "mstform.js",
16 |     library: {
17 |       name: "mstform",
18 |       type: "umd",
19 |     },
20 |     clean: true,
21 |   },
22 | };
23 | 


--------------------------------------------------------------------------------
/webpack.dev.js:
--------------------------------------------------------------------------------
 1 | const { merge } = require("webpack-merge");
 2 | const common = require("./webpack.common.js");
 3 | const HtmlWebpackPlugin = require("html-webpack-plugin");
 4 | 
 5 | module.exports = merge(common, {
 6 |   entry: "./demo/index.tsx",
 7 |   mode: "development",
 8 |   devServer: {
 9 |     static: "./demo",
10 |   },
11 |   devtool: "inline-source-map",
12 |   plugins: [
13 |     new HtmlWebpackPlugin({
14 |       title: "mstform Demo",
15 |       inject: "body",
16 |       template: "demo/div.html",
17 |     }),
18 |   ],
19 | });
20 | 


--------------------------------------------------------------------------------
/webpack.prod.js:
--------------------------------------------------------------------------------
 1 | const { merge } = require("webpack-merge");
 2 | const common = require("./webpack.common.js");
 3 | const webpack = require("webpack");
 4 | const TerserPlugin = require("terser-webpack-plugin");
 5 | 
 6 | module.exports = merge(common, {
 7 |   mode: "production",
 8 |   devtool: "source-map",
 9 |   optimization: {
10 |     minimize: true,  // Only enable in production environment
11 |     minimizer: [
12 |       new TerserPlugin({
13 |         terserOptions: {
14 |           parse: {
15 |             // We want terser to parse ecma 8 code. However, we don't want it
16 |             // to apply any minification steps that turns valid ecma 5 code
17 |             // into invalid ecma 5 code. This is why the 'compress' and 'output'
18 |             // sections only apply transformations that are ecma 5 safe
19 |             // https://github.com/facebook/create-react-app/pull/4234
20 |             ecma: 8,
21 |           },
22 |           compress: {
23 |             ecma: 5,
24 |             warnings: true,
25 |             comparisons: true,
26 |             inline: 2,
27 |           },
28 |           mangle: {
29 |             safari10: true,
30 |           },
31 |           // Added for profiling in devtools
32 |           keep_classnames: true,  // Only enable in production environment
33 |           keep_fnames: true,  // Only enable in production environment
34 |           output: {
35 |             ecma: 5,
36 |             comments: false,
37 |             // Turned on because emoji and regex is not minified properly using default
38 |             // https://github.com/facebook/create-react-app/issues/2488
39 |             ascii_only: true,
40 |           },
41 |         },
42 |       }),
43 |     ],
44 |   },
45 |   externals: {
46 |     mobx: "mobx",
47 |     "mobx-state-tree": "mobx-state-tree",
48 |   },
49 |   plugins: [
50 |     new webpack.DefinePlugin({
51 |       "process.env.NODE_ENV": JSON.stringify("production"),
52 |     }),
53 |   ],
54 | });
55 | 


--------------------------------------------------------------------------------