feat: reimplemented initial/default isDirty/isPristine

package.json

@@ -66,7 +66,7 @@
     }
   },
   "dependencies": {
-    "lodash": "^4.16.2"
+    "lodash": "^4.17.11"
   },
   "peerDependencies": {
     "mobx": "^2.5.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"

src/Field.js

@@ -14,7 +14,6 @@ import {
 
 const setupFieldProps = (instance, props, data) =>
   Object.assign(instance, {
-    $value: instance.$initial,
     $label: props.$label || data.label || '',
     $placeholder: props.$placeholder || data.placeholder || '',
     $disabled: props.$disabled || data.disabled || false,
@@ -32,13 +31,14 @@ const setupFieldProps = (instance, props, data) =>
   });
 
 const setupDefaultProp = (instance, data, props, update, {
-  isEmptyArray, checkArray,
+  isEmptyArray,
 }) => parseInput(instance.$input, {
+  nullable: true,
   isEmptyArray,
   type: instance.type,
-  unified: update ? '' : checkArray(data.default),
-  separated: checkArray(props.$default),
-  initial: checkArray(instance.$initial),
+  unified: update ? '' : data.default,
+  separated: props.$default,
+  fallback: instance.$initial,
 });
 
 export default class Field extends Base {
@@ -162,15 +162,19 @@ export default class Field extends Base {
   }
 
   @computed get initial() {
-    return this.getComputedProp('initial');
+    return this.$initial
+      ? toJS(this.$initial)
+      : this.getComputedProp('initial');
   }
 
-  set initial(val) {
-    this.$initial = parseInput(this.$input, { separated: val });
+  @computed get default() {
+    return this.$default
+      ? toJS(this.$default)
+      : this.getComputedProp('default');
   }
 
-  @computed get default() {
-    return this.getComputedProp('default');
+  set initial(val) {
+    this.$initial = parseInput(this.$input, { separated: val });
   }
 
   set default(val) {
@@ -240,22 +244,27 @@ export default class Field extends Base {
       && this.check('isValid', true);
   }
 
+  @computed get isDefault() {
+    return !_.isNil(this.default) &&
+      _.isEqual(this.default, this.value);
+  }
+
   @computed get isDirty() {
-    return this.hasNestedFields
-      ? this.check('isDirty', true)
-      : !_.isEqual(this.$default, this.value);
+    return !_.isNil(this.initial) &&
+      !_.isEqual(this.initial, this.value);
   }
 
   @computed get isPristine() {
-    return this.hasNestedFields
-      ? this.check('isPristine', true)
-      : _.isEqual(this.$default, this.value);
+    return !_.isNil(this.initial) &&
+      _.isEqual(this.initial, this.value) ;
   }
 
-  @computed get isDefault() {
-    return this.hasNestedFields
-      ? this.check('isDefault', true)
-      : _.isEqual(this.$default, this.value);
+  @computed get isEmpty() {
+    if (this.hasNestedFields) return this.check('isEmpty', true);
+    if (_.isBoolean(this.value)) return !!this.$value;
+    if (_.isNumber(this.value)) return false;
+    if (_.isDate(this.value)) return false;
+    return _.isEmpty(this.value);
   }
 
   @computed get resetting() {
@@ -270,14 +279,6 @@ export default class Field extends Base {
       : this.$clearing;
   }
 
-  @computed get isEmpty() {
-    if (this.hasNestedFields) return this.check('isEmpty', true);
-    if (_.isBoolean(this.value)) return !!this.$value;
-    if (_.isNumber(this.value)) return false;
-    if (_.isDate(this.value)) return false;
-    return _.isEmpty(this.value);
-  }
-
   @computed get focused() {
     return this.hasNestedFields
       ? this.check('focused', true)
@@ -385,41 +386,38 @@ export const prototypes = {
     this.path = $path;
     this.id = this.state.options.get('uniqueId').apply(this, [this]);
     const isEmptyArray = (_.has($data, 'fields') && _.isArray($data.fields));
-    const checkArray = val => isEmptyArray ? [] : val;
-
-    const {
-      $value,
-      $type,
-      $input,
-      $output,
-    } = $props;
+    const { $type, $input, $output } = $props;
 
     // eslint-disable-next-line
     if (_.isNil($data)) $data = '';
 
     if (_.isPlainObject($data)) {
-      const {
-        value,
-        type,
-        input,
-        output,
-      } = $data;
+      const { type, input, output } = $data;
 
       this.name = _.toString($data.name || $key);
       this.$type = $type || type || 'text';
       this.$input = $try($input, input, this.$input);
       this.$output = $try($output, output, this.$output);
 
+      this.$value = parseInput(this.$input, {
+        isEmptyArray,
+        type: this.type,
+        unified: $data.value,
+        separated: $props.$value,
+        fallback: $props.$initial,
+      });
+
       this.$initial = parseInput(this.$input, {
+        nullable: true,
         isEmptyArray,
         type: this.type,
-        unified: checkArray(value),
-        separated: checkArray($props.$initial),
-        initial: checkArray($data.initial),
+        unified: $data.initial,
+        separated: $props.$initial,
+        fallback: this.$value,
       });
 
       this.$default = setupDefaultProp(this, $data, $props, update, {
-        isEmptyArray, checkArray,
+        isEmptyArray,
       });
 
       setupFieldProps(this, $props, $data);
@@ -432,15 +430,24 @@ export const prototypes = {
     this.$input = $try($input, this.$input);
     this.$output = $try($output, this.$output);
 
+    this.$value = parseInput(this.$input, {
+      isEmptyArray,
+      type: this.type,
+      unified: $data,
+      separated: $props.$value,
+    });
+
     this.$initial = parseInput(this.$input, {
+      nullable: true,
       isEmptyArray,
       type: this.type,
-      unified: checkArray($data),
-      separated: checkArray($value),
+      unified: $data,
+      separated: $props.$initial,
+      fallback: this.$value,
     });
 
     this.$default = setupDefaultProp(this, $data, $props, update, {
-      isEmptyArray, checkArray,
+      isEmptyArray,
     });
 
     setupFieldProps(this, $props, $data);
@@ -531,7 +538,7 @@ export const prototypes = {
     this.$value = defaultClearValue({ value: this.$value });
     this.files = undefined;
 
-    if (deep) this.each(field => field.clear(true, false));
+    if (deep) this.each(field => field.clear(true));
 
     this.validate({
       showErrors: this.state.options.get('showErrorsOnClear', this),
@@ -550,7 +557,7 @@ export const prototypes = {
     if (!useDefaultValue) this.value = this.$initial;
     this.files = undefined;
 
-    if (deep) this.each(field => field.reset(true, false));
+    if (deep) this.each(field => field.reset(true));
 
     this.validate({
       showErrors: this.state.options.get('showErrorsOnReset', this),

src/Form.js

@@ -107,14 +107,14 @@ export default class Form extends Base {
       && this.check('isValid', true);
   }
 
-  @computed get isDirty() {
-    return this.check('isDirty', true);
-  }
-
   @computed get isPristine() {
     return this.check('isPristine', true);
   }
 
+  @computed get isDirty() {
+    return this.check('isDirty', true);
+  }
+
   @computed get isDefault() {
     return this.check('isDefault', true);
   }

src/parser.js

@@ -10,11 +10,17 @@ const defaultClearValue = ({ value }) => {
   return undefined;
 };
 
-const defaultValue = ({ type, isEmptyArray = false }) => {
+const defaultValue = ({
+  type,
+  nullable = false,
+  isEmptyArray = false
+}) => {
   if (type === 'date') return null;
   if (type === 'checkbox') return false;
   if (type === 'number') return 0;
-  return isEmptyArray ? [] : '';
+  if (nullable) return null;
+  if (isEmptyArray) return [];
+  return '';
 };
 
 const parsePath = (path) => {
@@ -25,9 +31,11 @@ const parsePath = (path) => {
 };
 
 const parseInput = (input, {
-  type, isEmptyArray, separated, unified, initial,
+  type, isEmptyArray, nullable, separated, unified, fallback,
 }) =>
-  input(utils.$try(separated, unified, initial, defaultValue({ type, isEmptyArray })));
+  input(utils.$try(separated, unified, fallback, defaultValue({
+    type, isEmptyArray, nullable
+  })));
 
 const parseArrayProp = ($val, $prop) => {
   const $values = _.values($val);

src/props.js

@@ -0,0 +1,25 @@
+export default {
+  booleans: ['hasError', 'isValid', 'isDirty', 'isPristine', 'isDefault', 'isEmpty', 'focused', 'touched', 'changed', 'disabled', 'resetting', 'clearing', 'blurred', 'deleted'],
+  field: ['value', 'initial', 'default', 'label', 'placeholder', 'disabled', 'related', 'options', 'extra', 'bindings', 'type', 'hooks', 'handlers', 'deleted', 'error'],
+  separated: ['values', 'initials', 'defaults', 'labels', 'placeholders', 'disabled', 'related', 'options', 'extra', 'bindings', 'types', 'hooks', 'handlers', 'deleted', 'error'],
+  handlers: ['onChange', 'onToggle', 'onFocus', 'onBlur', 'onDrop', 'onSubmit', 'onReset', 'onClear', 'onAdd', 'onDel'],
+  function: ['observers', 'interceptors', 'input', 'output'],
+  validation: ['rules', 'validators', 'validateWith'],
+  exceptions: ['isDirty', 'isPristine'],
+  types: {
+    isDirty: 'some',
+    isPristine: 'every',
+    isDefault: 'every',
+    isValid: 'every',
+    isEmpty: 'every',
+    hasError: 'some',
+    focused: 'some',
+    blurred: 'some',
+    touched: 'some',
+    changed: 'some',
+    deleted: 'every',
+    disabled: 'every',
+    clearing: 'every',
+    resetting: 'every',
+  },
+};

src/shared/Actions.js

@@ -66,11 +66,12 @@ export default {
   },
 
   deepCheck(type, prop, fields) {
-    return _.transform(utils.getObservableMapValues(fields), (check, field) => {
-      if (field.fields.size === 0) {
+    const $fields = utils.getObservableMapValues(fields);
+    return _.transform($fields, (check, field) => {
+      if (!field.fields.size || utils.props.exceptions.includes(prop)) {
         check.push(field[prop]);
-        return check;
       }
+
       const $deep = this.deepCheck(type, prop, field.fields);
       check.push(utils.checkPropType({ type, data: $deep }));
       return check;
@@ -171,9 +172,9 @@ export default {
 
       if (_.isString(prop)) {
         const removeValue = (prop === 'value') &&
-          ((this.state.options.get('softDelete', this) && field.deleted) ||
-          (this.state.options.get('retrieveOnlyDirtyValues', this) && field.isPristine) ||
-          (this.state.options.get('retrieveOnlyEnabledFields', this) && field.disabled));
+         ((this.state.options.get('retrieveOnlyDirtyValues', this) && field.isPristine) ||
+          (this.state.options.get('retrieveOnlyEnabledFields', this) && field.disabled) ||
+          (this.state.options.get('softDelete', this) && field.deleted));
 
         if (field.fields.size === 0) {
           delete obj[field.key]; // eslint-disable-line

src/utils.js

@@ -1,30 +1,7 @@
 import _ from 'lodash';
 import { values as mobxValues, keys as mobxKeys } from 'mobx';
 
-const props = {
-  booleans: ['hasError', 'isValid', 'isDirty', 'isPristine', 'isDefault', 'isEmpty', 'focused', 'touched', 'changed', 'disabled', 'resetting', 'clearing', 'blurred', 'deleted'],
-  field: ['value', 'initial', 'default', 'label', 'placeholder', 'disabled', 'related', 'options', 'extra', 'bindings', 'type', 'hooks', 'handlers', 'error', 'deleted'],
-  separated: ['values', 'initials', 'defaults', 'labels', 'placeholders', 'disabled', 'related', 'options', 'extra', 'bindings', 'types', 'hooks', 'handlers'],
-  handlers: ['onChange', 'onToggle', 'onFocus', 'onBlur', 'onDrop', 'onSubmit', 'onReset', 'onClear', 'onAdd', 'onDel'],
-  function: ['observers', 'interceptors', 'input', 'output'],
-  validation: ['rules', 'validators', 'validateWith'],
-  types: {
-    isDirty: 'some',
-    isValid: 'every',
-    isPristine: 'every',
-    isDefault: 'every',
-    isEmpty: 'every',
-    hasError: 'some',
-    focused: 'some',
-    blurred: 'some',
-    touched: 'some',
-    changed: 'some',
-    deleted: 'every',
-    disabled: 'every',
-    clearing: 'every',
-    resetting: 'every',
-  },
-};
+import props from './props';
 
 const getObservableMapValues = observableMap =>
   mobxValues

tests/computed/flat.isDirty.js

@@ -12,7 +12,7 @@ export default ($) => {
     it('$H isDirty should be false', () => expect($.$H.isDirty).to.be.false);
     it('$I isDirty should be false', () => expect($.$I.isDirty).to.be.false);
     it('$L isDirty should be true', () => expect($.$L.isDirty).to.be.true);
-    it('$M isDirty should be false', () => expect($.$M.isDirty).to.be.false);
+    it('$M isDirty should be true', () => expect($.$M.isDirty).to.be.true);
     it('$N isDirty should be false', () => expect($.$N.isDirty).to.be.false);
   });
 };

tests/computed/flat.isPristine.js

@@ -12,7 +12,7 @@ export default ($) => {
     it('$H isPristine should be true', () => expect($.$H.isPristine).to.be.true);
     it('$I isPristine should be true', () => expect($.$I.isPristine).to.be.true);
     it('$L isPristine should be false', () => expect($.$L.isPristine).to.be.false);
-    it('$M isPristine should be true', () => expect($.$M.isPristine).to.be.true);
+    it('$M isPristine should be false', () => expect($.$M.isPristine).to.be.false);
     it('$N isPristine should be true', () => expect($.$N.isPristine).to.be.true);
   });
 };

tests/data/_.fixes.js

@@ -20,14 +20,15 @@ import $Q1 from './forms/fixes/form.q1';
 import $Q2 from './forms/fixes/form.q2';
 import $R from './forms/fixes/form.r';
 import $S from './forms/fixes/form.s';
+import $T from './forms/fixes/form.t';
 
 import $425 from './forms/fixes/form.425';
 import $472 from './forms/fixes/form.472';
 import $481 from './forms/fixes/form.481';
 
 export default {
 
-  $A, $B, $C, $D, $E, $F, $G, $H, $I, $L, $M, $N, $O, $P, $Q, $Q1, $Q2, $R, $S, $425, $472, $481,
+  $A, $B, $C, $D, $E, $F, $G, $H, $I, $L, $M, $N, $O, $P, $Q, $Q1, $Q2, $R, $S, $T, $425, $472, $481,
 
 };