Move PropertyNumber to TS

src/style_manager/model/Property.ts

@@ -1,4 +1,4 @@
-import { isUndefined, isString, isArray, result, keys, each, includes } from 'underscore';
+import { isUndefined, isString, isArray, result, keys, each, includes, any } from 'underscore';
 import { Model } from '../../common';
 import Component from '../../dom_components/model/Component';
 import EditorModel from '../../editor/model/Editor';
@@ -164,9 +164,10 @@ export default class Property<T extends Record<string, any> = PropertyProps> ext
     sm?.addStyleTargets({ ...style, __p: !!opts.avoidStore }, opts);
   }
 
-  _up(props: PartialPropertyProps, opts: any = {}) {
+  _up(props: Partial<T>, opts: any = {}) {
     if (opts.noTarget) opts.__up = true;
     const { partial, ...rest } = opts;
+    // @ts-ignore
     props.__p = !!(rest.avoidStore || partial);
     // @ts-ignore
     return this.set(props, { ...rest, avoidStore: props.__p });
@@ -286,7 +287,7 @@ export default class Property<T extends Record<string, any> = PropertyProps> ext
    */
   upValue(value: string, opts = {}) {
     const parsed = value === null || value === '' ? this.__getClearProps() : this.__parseValue(value, opts);
-    return this._up(parsed, opts);
+    return this._up(parsed as Partial<T>, opts);
   }
 
   /**
@@ -338,7 +339,7 @@ export default class Property<T extends Record<string, any> = PropertyProps> ext
   }
 
   __getClearProps() {
-    return { value: '' };
+    return { value: '' } as unknown as Partial<T>;
   }
 
   /**
@@ -382,8 +383,8 @@ export default class Property<T extends Record<string, any> = PropertyProps> ext
    * // -> { value: 10, unit: 'deg', functionName: 'translateX' }
    *
    */
-  parseValue(value: string, opts: { complete?: boolean; numeric?: boolean } = {}) {
-    const result: PartialPropertyProps = { value };
+  parseValue(value: string, opts: { complete?: boolean; numeric?: boolean } = {}): Partial<T> {
+    const result = { value } as any;
     const imp = '!important';
 
     if (isString(value) && value.indexOf(imp) !== -1) {

src/style_manager/model/PropertyNumber.js → src/style_manager/model/PropertyNumber.ts

@@ -1,8 +1,33 @@
 import { isUndefined } from 'underscore';
-import Property from './Property';
+import Property, { PropertyProps } from './Property';
 import InputNumber from '../../domain_abstract/ui/InputNumber';
 import { hasWin } from '../../utils/mixins';
 
+/** @private */
+export interface PropertyNumberProps extends PropertyProps {
+  /**
+   * Array of units, eg. `['px', '%']`
+   */
+  units?: string[];
+  /**
+   * Unit defualt value.
+   */
+  unit?: string;
+  /**
+   * Minimum value.
+   */
+  min?: number;
+  /**
+   * Maximum value.
+   */
+  max?: number;
+  /**
+   * Step value.
+   * @default 1
+   */
+  step?: number;
+}
+
 /**
  * @typedef PropertyNumber
  * @property {Array<String>} units Array of units, eg. `['px', '%']`
@@ -11,7 +36,9 @@ import { hasWin } from '../../utils/mixins';
  * @property {Number} step Step value.
  *
  */
-export default class PropertyNumber extends Property {
+export default class PropertyNumber extends Property<PropertyNumberProps> {
+  input?: InputNumber;
+
   defaults() {
     return {
       ...Property.getDefaults(),
@@ -36,7 +63,7 @@ export default class PropertyNumber extends Property {
    * @returns {String}
    */
   getUnit() {
-    return this.get('unit');
+    return this.get('unit')!;
   }
 
   /**
@@ -44,7 +71,7 @@ export default class PropertyNumber extends Property {
    * @returns {Number}
    */
   getMin() {
-    return this.get('min');
+    return this.get('min')!;
   }
 
   /**
@@ -52,7 +79,7 @@ export default class PropertyNumber extends Property {
    * @returns {Number}
    */
   getMax() {
-    return this.get('max');
+    return this.get('max')!;
   }
 
   /**
@@ -60,7 +87,7 @@ export default class PropertyNumber extends Property {
    * @returns {Number}
    */
   getStep() {
-    return this.get('step');
+    return this.get('step')!;
   }
 
   /**
@@ -71,19 +98,21 @@ export default class PropertyNumber extends Property {
    * @param {Boolean} [opts.noTarget=false] If `true` the change won't be propagated to selected targets.
    * @returns {String}
    */
-  upUnit(unit, opts) {
+  upUnit(unit: string, opts: { noTarget?: boolean } = {}) {
     return this._up({ unit }, opts);
   }
 
   initialize(props = {}, opts = {}) {
+    // @ts-ignore
     Property.callParentInit(Property, this, props, opts);
     const unit = this.get('unit');
-    const units = this.get('units');
-    this.input = hasWin() && new InputNumber({ model: this });
+    const units = this.getUnits();
+    this.input = hasWin() ? new InputNumber({ model: this }) : undefined;
 
     if (units.length && !unit) {
-      this.set('unit', units[0], { silent: 1 });
+      this.set('unit', units[0], { silent: true });
     }
+    // @ts-ignore
     Property.callInit(this, props, opts);
   }
 
@@ -94,12 +123,12 @@ export default class PropertyNumber extends Property {
     };
   }
 
-  parseValue(val, opts = {}) {
-    const parsed = Property.prototype.parseValue.apply(this, arguments);
-    const { value, unit } = this.input.validateInputValue(parsed.value, {
+  parseValue(val: any, opts = {}) {
+    const parsed = Property.prototype.parseValue.apply(this, arguments as any);
+    const { value, unit } = this.input!.validateInputValue(parsed.value, {
       deepCheck: 1,
       ...opts,
-    });
+    }) as any;
     parsed.value = value;
     parsed.unit = unit;
     return parsed;