Reusing BaseElementField

[dan-leech]

I want to use FileldA of BaseElementField, in FieldB of BaseElementField.

I could access schema with prototype like:

export default class FieldB extends BaseElementField
{
    name = 'FieldB'

    get schema () {
        return {
            fieldB: {
                type: 'object',
                schema: {
                    toggle: {
                        type: 'toggle',
                        label: 'Toggle',
                        floating: false,
                    },
                    fieldAData: {
                        ...FileldA.prototype.schema.form;,
                        conditions: [
                            [`${this.section}.fieldB.toggle`, '==', true],
                        ],
                    },
                }
            }
        }
    }
}

But it seems not a good practice.
Are there any better ways to do this?

[adamberecz]

I would use this approach:

export default class FieldA extends BaseElementField
{
    name = 'FieldA'

    get baseSchema () {
        return {
            fieldA: {
                // ...
            }
        }
    }

    get schema () {
        return this.baseSchema
    }
}

export default class FieldB extends FieldA
{
    name = 'FieldB'

    get schema () {
        const fieldASchema = this.baseSchema

        return {
            fieldB: {
                // ...
            }
        }
    }
}

[dan-leech]

Thanks!
What about multiple nested fields in Field <- FieldA, FieldB, FieldC?

[adamberecz]

I would take a different approach of using named exports for the schema of each field:

// FieldA.js

const schema = function () {
  return {
    fieldA: {
      // ...
    }
  }
}

export default class FieldA extends BaseElementField
{
    name = 'FieldA'

    get schema () {
      return schema.call(this)
    }
}

export {
  schema,
}

// FieldB.js

import { schema as fieldASchema } from './FieldA.js'

const schema = function () {
  const schemaA = fieldASchema.call(this)

  return {
    fieldB: {
      // ...
    }
  }
}

export default class FieldB extends BaseElementField
{
    name = 'FieldB'

    get schema () {
      return schema.call(this)
    }
}

export {
  schema,
}

// FieldC.js

import { schema as fieldASchema } from './FieldA.js'
import { schema as fieldBSchema } from './FieldB.js'

const schema = function () {
  const schemaA = fieldASchema.call(this)
  const schemaB = fieldBSchema.call(this)

  return {
    fieldC: {
      // ...
    }
  }
}

export default class FieldC extends BaseElementField
{
    name = 'FieldC'

    get schema () {
      return schema.call(this)
    }
}

export {
  schema,
}