From f98aab23f1ee20ff2434e606ca8550dc776d7023 Mon Sep 17 00:00:00 2001 From: Joren Broekema Date: Wed, 20 Jan 2021 12:11:34 +0100 Subject: [PATCH] feat(form-core): make __parentFormGroup and __toggleChecked protected --- .changeset/lazy-chicken-speak.md | 6 ++++++ .changeset/witty-mugs-vanish.md | 6 ++++++ .../src/choice-group/ChoiceGroupMixin.js | 2 +- .../src/choice-group/ChoiceInputMixin.js | 16 +++++++++------- .../form-core/src/form-group/FormGroupMixin.js | 6 +++--- .../src/registration/FormRegisteringMixin.js | 6 +++--- .../src/registration/FormRegistrarMixin.js | 4 ++-- packages/form-core/test/lion-field.test.js | 2 +- .../choice-group/ChoiceInputMixinTypes.d.ts | 2 +- .../registration/FormRegisteringMixinTypes.d.ts | 2 +- .../registration/FormRegistrarMixinTypes.d.ts | 2 +- packages/listbox/src/LionOption.js | 2 +- packages/listbox/types/LionOption.d.ts | 2 +- packages/switch/src/LionSwitch.js | 4 ++-- packages/switch/src/LionSwitchButton.js | 10 +++++----- 15 files changed, 43 insertions(+), 29 deletions(-) create mode 100644 .changeset/lazy-chicken-speak.md create mode 100644 .changeset/witty-mugs-vanish.md diff --git a/.changeset/lazy-chicken-speak.md b/.changeset/lazy-chicken-speak.md new file mode 100644 index 000000000..937297113 --- /dev/null +++ b/.changeset/lazy-chicken-speak.md @@ -0,0 +1,6 @@ +--- +'@lion/form-core': patch +'@lion/listbox': patch +--- + +Make \_\_parentFormGroup --> \_parentFormGroup so it is protected and not private diff --git a/.changeset/witty-mugs-vanish.md b/.changeset/witty-mugs-vanish.md new file mode 100644 index 000000000..3f6cd4aa2 --- /dev/null +++ b/.changeset/witty-mugs-vanish.md @@ -0,0 +1,6 @@ +--- +'@lion/form-core': patch +'@lion/switch': patch +--- + +Make \_\_toggleChecked protected property (\_toggleChecked) diff --git a/packages/form-core/src/choice-group/ChoiceGroupMixin.js b/packages/form-core/src/choice-group/ChoiceGroupMixin.js index b8c02ad02..98a6d1702 100644 --- a/packages/form-core/src/choice-group/ChoiceGroupMixin.js +++ b/packages/form-core/src/choice-group/ChoiceGroupMixin.js @@ -6,7 +6,7 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js'; * @typedef {import('../../types/choice-group/ChoiceGroupMixinTypes').ChoiceGroupMixin} ChoiceGroupMixin * @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost * @typedef {import('../../types/registration/FormRegistrarMixinTypes').ElementWithParentFormGroup} ElementWithParentFormGroup - * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?:HTMLElement, checked?:boolean}} FormControl + * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} ChoiceInputHost */ diff --git a/packages/form-core/src/choice-group/ChoiceInputMixin.js b/packages/form-core/src/choice-group/ChoiceInputMixin.js index e737fcddb..a3709c75e 100644 --- a/packages/form-core/src/choice-group/ChoiceInputMixin.js +++ b/packages/form-core/src/choice-group/ChoiceInputMixin.js @@ -5,7 +5,7 @@ import { FormatMixin } from '../FormatMixin.js'; /** * @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost - * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?:HTMLElement, checked?:boolean}} FormControl + * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputMixin} ChoiceInputMixin * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputModelValue} ChoiceInputModelValue */ @@ -115,9 +115,9 @@ const ChoiceInputMixinImplementation = superclass => if ( changedProperties.has('name') && // @ts-expect-error not all choice inputs have a parent form group, since this mixin does not have a strict contract with the registration system - this.__parentFormGroup && + this._parentFormGroup && // @ts-expect-error - this.__parentFormGroup.name !== this.name + this._parentFormGroup.name !== this.name ) { // @ts-expect-error not all choice inputs have a name prop, because this mixin does not have a strict contract with form control mixin this.name = changedProperties.get('name'); @@ -129,7 +129,7 @@ const ChoiceInputMixinImplementation = superclass => this.modelValue = { value: '', checked: false }; this.disabled = false; this._preventDuplicateLabelClick = this._preventDuplicateLabelClick.bind(this); - this.__toggleChecked = this.__toggleChecked.bind(this); + this._toggleChecked = this._toggleChecked.bind(this); } /** @@ -193,7 +193,7 @@ const ChoiceInputMixinImplementation = superclass => if (this._labelNode) { this._labelNode.addEventListener('click', this._preventDuplicateLabelClick); } - this.addEventListener('user-input-changed', this.__toggleChecked); + this.addEventListener('user-input-changed', this._toggleChecked); } disconnectedCallback() { @@ -201,7 +201,7 @@ const ChoiceInputMixinImplementation = superclass => if (this._labelNode) { this._labelNode.removeEventListener('click', this._preventDuplicateLabelClick); } - this.removeEventListener('user-input-changed', this.__toggleChecked); + this.removeEventListener('user-input-changed', this._toggleChecked); } /** @@ -221,7 +221,9 @@ const ChoiceInputMixinImplementation = superclass => this._inputNode.addEventListener('click', __inputClickHandler); } - __toggleChecked() { + /** @param {Event} ev */ + // eslint-disable-next-line no-unused-vars + _toggleChecked(ev) { if (this.disabled) { return; } diff --git a/packages/form-core/src/form-group/FormGroupMixin.js b/packages/form-core/src/form-group/FormGroupMixin.js index a6005b444..84b62b661 100644 --- a/packages/form-core/src/form-group/FormGroupMixin.js +++ b/packages/form-core/src/form-group/FormGroupMixin.js @@ -12,7 +12,7 @@ import { FormElementsHaveNoError } from './FormElementsHaveNoError.js'; * @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost * @typedef {import('../../types/registration/FormRegisteringMixinTypes').FormRegisteringHost} FormRegisteringHost * @typedef {import('../../types/registration/FormRegistrarMixinTypes').ElementWithParentFormGroup} ElementWithParentFormGroup - * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?: HTMLElement, checked?: boolean, disabled: boolean, hasFeedbackFor: string[], makeRequestToBeDisabled: Function }} FormControl + * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?: HTMLElement, checked?: boolean, disabled: boolean, hasFeedbackFor: string[], makeRequestToBeDisabled: Function }} FormControl */ /** @@ -449,12 +449,12 @@ const FormGroupMixinImplementation = superclass => __linkChildrenMessagesToParent(child) { // aria-describedby of (nested) children const unTypedThis = /** @type {unknown} */ (this); - let parent = /** @type {FormControlHost & { __parentFormGroup:any }} */ (unTypedThis); + let parent = /** @type {FormControlHost & { _parentFormGroup:any }} */ (unTypedThis); const ctor = /** @type {typeof FormGroupMixin} */ (this.constructor); while (parent) { ctor._addDescriptionElementIdsToField(child, parent._getAriaDescriptionElements()); // Also check if the newly added child needs to refer grandparents - parent = parent.__parentFormGroup; + parent = parent._parentFormGroup; } } diff --git a/packages/form-core/src/registration/FormRegisteringMixin.js b/packages/form-core/src/registration/FormRegisteringMixin.js index 6060275b2..61d858034 100644 --- a/packages/form-core/src/registration/FormRegisteringMixin.js +++ b/packages/form-core/src/registration/FormRegisteringMixin.js @@ -19,7 +19,7 @@ const FormRegisteringMixinImplementation = superclass => constructor() { super(); /** @type {FormRegistrarHost | undefined} */ - this.__parentFormGroup = undefined; + this._parentFormGroup = undefined; } connectedCallback() { @@ -42,8 +42,8 @@ const FormRegisteringMixinImplementation = superclass => // @ts-expect-error check it anyway, because could be lit-element extension super.disconnectedCallback(); } - if (this.__parentFormGroup) { - this.__parentFormGroup.removeFormElement(this); + if (this._parentFormGroup) { + this._parentFormGroup.removeFormElement(this); } } }; diff --git a/packages/form-core/src/registration/FormRegistrarMixin.js b/packages/form-core/src/registration/FormRegistrarMixin.js index 5bef28b20..b61cca825 100644 --- a/packages/form-core/src/registration/FormRegistrarMixin.js +++ b/packages/form-core/src/registration/FormRegistrarMixin.js @@ -11,7 +11,7 @@ import { FormRegisteringMixin } from './FormRegisteringMixin.js'; /** * @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost - * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?:HTMLElement, checked?:boolean}} FormControl + * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl */ /** @@ -77,7 +77,7 @@ const FormRegistrarMixinImplementation = superclass => addFormElement(child, indexToInsertAt) { // This is a way to let the child element (a lion-fieldset or lion-field) know, about its parent // eslint-disable-next-line no-param-reassign - child.__parentFormGroup = this; + child._parentFormGroup = this; // 1. Add children as array element if (indexToInsertAt >= 0) { diff --git a/packages/form-core/test/lion-field.test.js b/packages/form-core/test/lion-field.test.js index e7bbc635a..87ec127c6 100644 --- a/packages/form-core/test/lion-field.test.js +++ b/packages/form-core/test/lion-field.test.js @@ -16,7 +16,7 @@ import '../lion-field.js'; /** * @typedef {import('../src/LionField.js').LionField} LionField * @typedef {import('../types/FormControlMixinTypes').FormControlHost} FormControlHost - * @typedef {FormControlHost & HTMLElement & {__parentFormGroup?:HTMLElement, checked?:boolean}} FormControl + * @typedef {FormControlHost & HTMLElement & {_parentFormGroup?:HTMLElement, checked?:boolean}} FormControl */ /** @typedef {HTMLElement & {shadowRoot: HTMLElement, assignedNodes: Function}} ShadowHTMLElement */ diff --git a/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts b/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts index 85f1e3e54..473cfd206 100644 --- a/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts +++ b/packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts @@ -43,7 +43,7 @@ export declare class ChoiceInputHost { _preventDuplicateLabelClick(ev: Event): void; - __toggleChecked(): void; + _toggleChecked(ev: Event): void; __syncModelCheckedToChecked(checked: boolean): void; diff --git a/packages/form-core/types/registration/FormRegisteringMixinTypes.d.ts b/packages/form-core/types/registration/FormRegisteringMixinTypes.d.ts index 3f418755b..8a0804d5e 100644 --- a/packages/form-core/types/registration/FormRegisteringMixinTypes.d.ts +++ b/packages/form-core/types/registration/FormRegisteringMixinTypes.d.ts @@ -6,7 +6,7 @@ export declare class FormRegisteringHost { constructor(...args: any[]); connectedCallback(): void; disconnectedCallback(): void; - __parentFormGroup?: FormRegistrarHost; + _parentFormGroup?: FormRegistrarHost; } export declare function FormRegisteringImplementation>( diff --git a/packages/form-core/types/registration/FormRegistrarMixinTypes.d.ts b/packages/form-core/types/registration/FormRegistrarMixinTypes.d.ts index f6a8a230d..823d17c4e 100644 --- a/packages/form-core/types/registration/FormRegistrarMixinTypes.d.ts +++ b/packages/form-core/types/registration/FormRegistrarMixinTypes.d.ts @@ -5,7 +5,7 @@ import { FormControlHost } from '../../types/FormControlMixinTypes'; import { LitElement } from '@lion/core'; export declare class ElementWithParentFormGroup { - __parentFormGroup: FormRegistrarHost; + _parentFormGroup: FormRegistrarHost; } export declare class FormRegistrarHost { diff --git a/packages/listbox/src/LionOption.js b/packages/listbox/src/LionOption.js index 4ee22ffdb..873db1415 100644 --- a/packages/listbox/src/LionOption.js +++ b/packages/listbox/src/LionOption.js @@ -121,7 +121,7 @@ export class LionOption extends DisabledMixin(ChoiceInputMixin(FormRegisteringMi if (this.disabled) { return; } - const parentForm = /** @type {unknown} */ (this.__parentFormGroup); + const parentForm = /** @type {unknown} */ (this._parentFormGroup); this.__isHandlingUserInput = true; if (parentForm && /** @type {ChoiceGroupHost} */ (parentForm).multipleChoice) { this.checked = !this.checked; diff --git a/packages/listbox/types/LionOption.d.ts b/packages/listbox/types/LionOption.d.ts index b36816f2e..22c454d67 100644 --- a/packages/listbox/types/LionOption.d.ts +++ b/packages/listbox/types/LionOption.d.ts @@ -2,5 +2,5 @@ import { ChoiceGroupHost } from '@lion/form-core/types/choice-group/ChoiceGroupM export declare class LionOptionHost { constructor(...args: any[]); - private __parentFormGroup: ChoiceGroupHost; + protected _parentFormGroup: ChoiceGroupHost; } diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js index ce44ce644..89bcddfdf 100644 --- a/packages/switch/src/LionSwitch.js +++ b/packages/switch/src/LionSwitch.js @@ -80,7 +80,7 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) this._inputNode.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged); } if (this._labelNode) { - this._labelNode.addEventListener('click', this.__toggleChecked); + this._labelNode.addEventListener('click', this._toggleChecked); } this._syncButtonSwitch(); this.submitted = true; @@ -94,7 +94,7 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) ); } if (this._labelNode) { - this._labelNode.removeEventListener('click', this.__toggleChecked); + this._labelNode.removeEventListener('click', this._toggleChecked); } } diff --git a/packages/switch/src/LionSwitchButton.js b/packages/switch/src/LionSwitchButton.js index ab74c1d65..d6ddacd1d 100644 --- a/packages/switch/src/LionSwitchButton.js +++ b/packages/switch/src/LionSwitchButton.js @@ -77,7 +77,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) { this.role = 'switch'; this.checked = false; - this.__toggleChecked = this.__toggleChecked.bind(this); + this._toggleChecked = this._toggleChecked.bind(this); this.__handleKeydown = this.__handleKeydown.bind(this); this.__handleKeyup = this.__handleKeyup.bind(this); } @@ -85,19 +85,19 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) { connectedCallback() { super.connectedCallback(); this.setAttribute('aria-checked', `${this.checked}`); - this.addEventListener('click', this.__toggleChecked); + this.addEventListener('click', this._toggleChecked); this.addEventListener('keydown', this.__handleKeydown); this.addEventListener('keyup', this.__handleKeyup); } disconnectedCallback() { super.disconnectedCallback(); - this.removeEventListener('click', this.__toggleChecked); + this.removeEventListener('click', this._toggleChecked); this.removeEventListener('keydown', this.__handleKeydown); this.removeEventListener('keyup', this.__handleKeyup); } - __toggleChecked() { + _toggleChecked() { if (this.disabled) { return; } @@ -132,7 +132,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) { */ __handleKeyup(e) { if ([32 /* space */, 13 /* enter */].indexOf(e.keyCode) !== -1) { - this.__toggleChecked(); + this._toggleChecked(); } }