ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(form-core): make __parentFormGroup and __toggleChecked protected

Browse source
This commit is contained in:
Joren Broekema 2021-01-20 12:11:34 +01:00
parent 49e7ae34f0
commit f98aab23f1
15 changed files with 43 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/lazy-chicken-speak.md Normal file
View file

@ -0,0 +1,6 @@
---
'@lion/form-core': patch
'@lion/listbox': patch
---
Make \_\_parentFormGroup --> \_parentFormGroup so it is protected and not private

6
.changeset/witty-mugs-vanish.md Normal file
View file

@ -0,0 +1,6 @@
---
'@lion/form-core': patch
'@lion/switch': patch
---
Make \_\_toggleChecked protected property (\_toggleChecked)

2
packages/form-core/src/choice-group/ChoiceGroupMixin.js
View file

@ -6,7 +6,7 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js';
* @typedef {import('../../types/choice-group/ChoiceGroupMixinTypes').ChoiceGroupMixin} ChoiceGroupMixin * @typedef {import('../../types/choice-group/ChoiceGroupMixinTypes').ChoiceGroupMixin} ChoiceGroupMixin
* @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost * @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost
* @typedef {import('../../types/registration/FormRegistrarMixinTypes').ElementWithParentFormGroup} ElementWithParentFormGroup * @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 * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputHost} ChoiceInputHost
*/ */

16
packages/form-core/src/choice-group/ChoiceInputMixin.js
View file

@ -5,7 +5,7 @@ import { FormatMixin } from '../FormatMixin.js';
/** /**
* @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost * @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').ChoiceInputMixin} ChoiceInputMixin
* @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputModelValue} ChoiceInputModelValue * @typedef {import('../../types/choice-group/ChoiceInputMixinTypes').ChoiceInputModelValue} ChoiceInputModelValue
*/ */
@ -115,9 +115,9 @@ const ChoiceInputMixinImplementation = superclass =>
if ( if (
changedProperties.has('name') && 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 // @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 // @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 // @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'); this.name = changedProperties.get('name');
@ -129,7 +129,7 @@ const ChoiceInputMixinImplementation = superclass =>
this.modelValue = { value: '', checked: false }; this.modelValue = { value: '', checked: false };
this.disabled = false; this.disabled = false;
this._preventDuplicateLabelClick = this._preventDuplicateLabelClick.bind(this); 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) { if (this._labelNode) {
this._labelNode.addEventListener('click', this._preventDuplicateLabelClick); this._labelNode.addEventListener('click', this._preventDuplicateLabelClick);
} }
this.addEventListener('user-input-changed', this.__toggleChecked); this.addEventListener('user-input-changed', this._toggleChecked);
} }
disconnectedCallback() { disconnectedCallback() {
@ -201,7 +201,7 @@ const ChoiceInputMixinImplementation = superclass =>
if (this._labelNode) { if (this._labelNode) {
this._labelNode.removeEventListener('click', this._preventDuplicateLabelClick); 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); this._inputNode.addEventListener('click', __inputClickHandler);
} }
__toggleChecked() { /** @param {Event} ev */
// eslint-disable-next-line no-unused-vars
_toggleChecked(ev) {
if (this.disabled) { if (this.disabled) {
return; return;
} }

6
packages/form-core/src/form-group/FormGroupMixin.js
View file

@ -12,7 +12,7 @@ import { FormElementsHaveNoError } from './FormElementsHaveNoError.js';
* @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost * @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost
* @typedef {import('../../types/registration/FormRegisteringMixinTypes').FormRegisteringHost} FormRegisteringHost * @typedef {import('../../types/registration/FormRegisteringMixinTypes').FormRegisteringHost} FormRegisteringHost
* @typedef {import('../../types/registration/FormRegistrarMixinTypes').ElementWithParentFormGroup} ElementWithParentFormGroup * @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) { __linkChildrenMessagesToParent(child) {
// aria-describedby of (nested) children // aria-describedby of (nested) children
const unTypedThis = /** @type {unknown} */ (this); 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); const ctor = /** @type {typeof FormGroupMixin} */ (this.constructor);
while (parent) { while (parent) {
ctor._addDescriptionElementIdsToField(child, parent._getAriaDescriptionElements()); ctor._addDescriptionElementIdsToField(child, parent._getAriaDescriptionElements());
// Also check if the newly added child needs to refer grandparents // Also check if the newly added child needs to refer grandparents
parent = parent.__parentFormGroup; parent = parent._parentFormGroup;
} }
} }

6
packages/form-core/src/registration/FormRegisteringMixin.js
View file

@ -19,7 +19,7 @@ const FormRegisteringMixinImplementation = superclass =>
constructor() { constructor() {
super(); super();
/** @type {FormRegistrarHost | undefined} */ /** @type {FormRegistrarHost | undefined} */
this.__parentFormGroup = undefined; this._parentFormGroup = undefined;
} }
connectedCallback() { connectedCallback() {
@ -42,8 +42,8 @@ const FormRegisteringMixinImplementation = superclass =>
// @ts-expect-error check it anyway, because could be lit-element extension // @ts-expect-error check it anyway, because could be lit-element extension
super.disconnectedCallback(); super.disconnectedCallback();
} }
if (this.__parentFormGroup) { if (this._parentFormGroup) {
this.__parentFormGroup.removeFormElement(this); this._parentFormGroup.removeFormElement(this);
} }
} }
}; };

4
packages/form-core/src/registration/FormRegistrarMixin.js
View file

@ -11,7 +11,7 @@ import { FormRegisteringMixin } from './FormRegisteringMixin.js';
/** /**
* @typedef {import('../../types/FormControlMixinTypes').FormControlHost} FormControlHost * @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) { addFormElement(child, indexToInsertAt) {
// This is a way to let the child element (a lion-fieldset or lion-field) know, about its parent // 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 // eslint-disable-next-line no-param-reassign
child.__parentFormGroup = this; child._parentFormGroup = this;
// 1. Add children as array element // 1. Add children as array element
if (indexToInsertAt >= 0) { if (indexToInsertAt >= 0) {

2
packages/form-core/test/lion-field.test.js
View file

@ -16,7 +16,7 @@ import '../lion-field.js';
/** /**
* @typedef {import('../src/LionField.js').LionField} LionField * @typedef {import('../src/LionField.js').LionField} LionField
* @typedef {import('../types/FormControlMixinTypes').FormControlHost} FormControlHost * @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 */ /** @typedef {HTMLElement & {shadowRoot: HTMLElement, assignedNodes: Function}} ShadowHTMLElement */

2
packages/form-core/types/choice-group/ChoiceInputMixinTypes.d.ts vendored
View file

@ -43,7 +43,7 @@ export declare class ChoiceInputHost {
_preventDuplicateLabelClick(ev: Event): void; _preventDuplicateLabelClick(ev: Event): void;
__toggleChecked(): void; _toggleChecked(ev: Event): void;
__syncModelCheckedToChecked(checked: boolean): void; __syncModelCheckedToChecked(checked: boolean): void;

2
packages/form-core/types/registration/FormRegisteringMixinTypes.d.ts vendored
View file

@ -6,7 +6,7 @@ export declare class FormRegisteringHost {
constructor(...args: any[]); constructor(...args: any[]);
connectedCallback(): void; connectedCallback(): void;
disconnectedCallback(): void; disconnectedCallback(): void;
__parentFormGroup?: FormRegistrarHost; _parentFormGroup?: FormRegistrarHost;
} }
export declare function FormRegisteringImplementation<T extends Constructor<LitElement>>( export declare function FormRegisteringImplementation<T extends Constructor<LitElement>>(

2
packages/form-core/types/registration/FormRegistrarMixinTypes.d.ts vendored
View file

@ -5,7 +5,7 @@ import { FormControlHost } from '../../types/FormControlMixinTypes';
import { LitElement } from '@lion/core'; import { LitElement } from '@lion/core';
export declare class ElementWithParentFormGroup { export declare class ElementWithParentFormGroup {
__parentFormGroup: FormRegistrarHost; _parentFormGroup: FormRegistrarHost;
} }
export declare class FormRegistrarHost { export declare class FormRegistrarHost {

2
packages/listbox/src/LionOption.js
View file

@ -121,7 +121,7 @@ export class LionOption extends DisabledMixin(ChoiceInputMixin(FormRegisteringMi
if (this.disabled) { if (this.disabled) {
return; return;
} }
const parentForm = /** @type {unknown} */ (this.__parentFormGroup); const parentForm = /** @type {unknown} */ (this._parentFormGroup);
this.__isHandlingUserInput = true; this.__isHandlingUserInput = true;
if (parentForm && /** @type {ChoiceGroupHost} */ (parentForm).multipleChoice) { if (parentForm && /** @type {ChoiceGroupHost} */ (parentForm).multipleChoice) {
this.checked = !this.checked; this.checked = !this.checked;

2
packages/listbox/types/LionOption.d.ts vendored
View file

@ -2,5 +2,5 @@ import { ChoiceGroupHost } from '@lion/form-core/types/choice-group/ChoiceGroupM
export declare class LionOptionHost { export declare class LionOptionHost {
constructor(...args: any[]); constructor(...args: any[]);
private __parentFormGroup: ChoiceGroupHost; protected _parentFormGroup: ChoiceGroupHost;
} }

4
packages/switch/src/LionSwitch.js
View file

@ -80,7 +80,7 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
this._inputNode.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged); this._inputNode.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged);
} }
if (this._labelNode) { if (this._labelNode) {
this._labelNode.addEventListener('click', this.__toggleChecked); this._labelNode.addEventListener('click', this._toggleChecked);
} }
this._syncButtonSwitch(); this._syncButtonSwitch();
this.submitted = true; this.submitted = true;
@ -94,7 +94,7 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
); );
} }
if (this._labelNode) { if (this._labelNode) {
this._labelNode.removeEventListener('click', this.__toggleChecked); this._labelNode.removeEventListener('click', this._toggleChecked);
} }
} }

10
packages/switch/src/LionSwitchButton.js
View file

@ -77,7 +77,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
this.role = 'switch'; this.role = 'switch';
this.checked = false; this.checked = false;
this.__toggleChecked = this.__toggleChecked.bind(this); this._toggleChecked = this._toggleChecked.bind(this);
this.__handleKeydown = this.__handleKeydown.bind(this); this.__handleKeydown = this.__handleKeydown.bind(this);
this.__handleKeyup = this.__handleKeyup.bind(this); this.__handleKeyup = this.__handleKeyup.bind(this);
} }
@ -85,19 +85,19 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
this.setAttribute('aria-checked', `${this.checked}`); this.setAttribute('aria-checked', `${this.checked}`);
this.addEventListener('click', this.__toggleChecked); this.addEventListener('click', this._toggleChecked);
this.addEventListener('keydown', this.__handleKeydown); this.addEventListener('keydown', this.__handleKeydown);
this.addEventListener('keyup', this.__handleKeyup); this.addEventListener('keyup', this.__handleKeyup);
} }
disconnectedCallback() { disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
this.removeEventListener('click', this.__toggleChecked); this.removeEventListener('click', this._toggleChecked);
this.removeEventListener('keydown', this.__handleKeydown); this.removeEventListener('keydown', this.__handleKeydown);
this.removeEventListener('keyup', this.__handleKeyup); this.removeEventListener('keyup', this.__handleKeyup);
} }
__toggleChecked() { _toggleChecked() {
if (this.disabled) { if (this.disabled) {
return; return;
} }
@ -132,7 +132,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
*/ */
__handleKeyup(e) { __handleKeyup(e) {
if ([32 /* space */, 13 /* enter */].indexOf(e.keyCode) !== -1) { if ([32 /* space */, 13 /* enter */].indexOf(e.keyCode) !== -1) {
this.__toggleChecked(); this._toggleChecked();
} }
} }