Move PropertySelect to TS

src/style_manager/model/Property.ts

@@ -85,9 +85,14 @@ type PartialPropertyProps = Partial<PropertyProps>;
  * ```
  *
  */
-export default class Property extends Model<PropertyProps> {
+export default class Property<T extends Record<string, any> = PropertyProps> extends Model<T> {
   em!: EditorModel;
 
+  static getDefaults() {
+    return result(this.prototype, 'defaults');
+  }
+
+  // @ts-ignore
   defaults() {
     return {
       name: '',
@@ -112,11 +117,13 @@ export default class Property extends Model<PropertyProps> {
 
   initialize(props = {}, opts: any = {}) {
     this.em = opts.em;
-    const id = this.get('id') || '';
-    const name = this.get('name') || this.get('label') || '';
+    const id = this.getId() || '';
+    const name: string = this.get('name') || this.get('label') || '';
+    // @ts-ignore
     !this.get('property') && this.set('property', (name || id).replace(/ /g, '-'));
     const prop = this.get('property');
     !this.get('id') && this.set('id', prop);
+    // @ts-ignore
     !name && this.set('name', capitalize(prop).replace(/-/g, ' '));
     this.on('change', this.__upTargets);
     // @ts-ignore
@@ -161,10 +168,12 @@ export default class Property extends Model<PropertyProps> {
     if (opts.noTarget) opts.__up = true;
     const { partial, ...rest } = opts;
     props.__p = !!(rest.avoidStore || partial);
+    // @ts-ignore
     return this.set(props, { ...rest, avoidStore: props.__p });
   }
 
   up(props: PartialPropertyProps, opts = {}) {
+    // @ts-ignore
     this.set(props, { ...opts, __up: true });
   }
 
@@ -174,7 +183,7 @@ export default class Property extends Model<PropertyProps> {
    * Get property id.
    * @returns {String}
    */
-  getId() {
+  getId(): string {
     return this.get('id')!;
   }
 
@@ -184,7 +193,7 @@ export default class Property extends Model<PropertyProps> {
    * The default type is `base`.
    * @returns {String}
    */
-  getType() {
+  getType(): string {
     return this.get('type')!;
   }
 
@@ -192,7 +201,7 @@ export default class Property extends Model<PropertyProps> {
    * Get name (the CSS property name).
    * @returns {String}
    */
-  getName() {
+  getName(): string {
     return this.get('property')!;
   }
 
@@ -342,7 +351,9 @@ export default class Property extends Model<PropertyProps> {
   setValue(value: string, complete = true, opts = {}) {
     const parsed = this.parseValue(value);
     const avoidStore = !complete;
+    // @ts-ignore
     !avoidStore && this.set({ value: undefined }, { avoidStore, silent: true });
+    // @ts-ignore
     this.set(parsed, { avoidStore, ...opts });
   }
 
@@ -469,6 +480,7 @@ export default class Property extends Model<PropertyProps> {
     }
 
     if (fn && hasValue) {
+      // @ts-ignore
       const fnParameter = fn === 'url' ? `'${value.replace(/'|"/g, '')}'` : value;
       value = `${fn}(${fnParameter})`;
     }
@@ -575,6 +587,6 @@ Property.callInit = function (context, props, opts: any = {}) {
 };
 
 // @ts-ignore
-Property.getDefaults = function () {
-  return result(this.prototype, 'defaults');
-};
+// Property.getDefaults = function () {
+//   return result(this.prototype, 'defaults');
+// };

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

@@ -1,6 +1,19 @@
 import { isString } from 'underscore';
 import { isDef } from '../../utils/mixins';
-import Property from './Property';
+import Property, { PropertyProps } from './Property';
+
+type SelectOption = {
+  id: string;
+  value?: string;
+  label?: string;
+  name?: string;
+};
+
+/** @private */
+export interface PropertySelectProps extends PropertyProps {
+  options?: SelectOption[];
+  list?: SelectOption[];
+}
 
 /**
  * @typedef PropertySelect
@@ -13,7 +26,7 @@ import Property from './Property';
  * ]
  * ```
  */
-export default class PropertySelect extends Property {
+export default class PropertySelect extends Property<PropertySelectProps> {
   defaults() {
     return {
       ...Property.getDefaults(),
@@ -37,7 +50,7 @@ export default class PropertySelect extends Property {
    * @param {String} [id] Option id.
    * @returns {Object | null}
    */
-  getOption(id) {
+  getOption(id: string): SelectOption {
     const idSel = isDef(id) ? id : this.getValue();
     return this.getOptions().filter(o => this.getOptionId(o) === idSel)[0] || null;
   }
@@ -46,7 +59,7 @@ export default class PropertySelect extends Property {
    * Update options.
    * @param {Array<Object>} value New array of options, eg. `[{ id: 'val-1', label: 'Value 1' }]`
    */
-  setOptions(value = []) {
+  setOptions(value: SelectOption[] = []) {
     this.set('options', value);
     return this;
   }
@@ -55,7 +68,7 @@ export default class PropertySelect extends Property {
    * Add new option.
    * @param {Object} value Option object, eg. `{ id: 'val-1', label: 'Value 1' }`
    */
-  addOption(value) {
+  addOption(value: SelectOption) {
     if (value) {
       const opts = this.getOptions();
       this.setOptions([...opts, value]);
@@ -68,8 +81,8 @@ export default class PropertySelect extends Property {
    * @param {Object} option Option object
    * @returns {String} Option id
    */
-  getOptionId(option) {
-    return isDef(option.id) ? option.id : option.value;
+  getOptionId(option: SelectOption) {
+    return isDef(option.id) ? option.id : (option.value as string);
   }
 
   /**
@@ -79,7 +92,7 @@ export default class PropertySelect extends Property {
    * @param {Boolean} [opts.locale=true] Use the locale string from i18n module
    * @returns {String} Option label
    */
-  getOptionLabel(id, opts = {}) {
+  getOptionLabel(id: string, opts: { locale?: boolean; property?: string } = {}): string {
     const { locale = true } = opts;
     const option = (isString(id) ? this.getOption(id) : id) || {};
     const optId = this.getOptionId(option);
@@ -88,7 +101,7 @@ export default class PropertySelect extends Property {
     return (locale && this.em?.t(`styleManager.options.${propId}.${optId}`)) || label;
   }
 
-  initialize(...args) {
+  initialize(...args: any) {
     Property.prototype.initialize.apply(this, args);
     this.listenTo(this, 'change:options', this.__onOptionChange);
   }