From 63b5b8be8e0d09459320690db5b3cea23221d31b Mon Sep 17 00:00:00 2001 From: mertsincan Date: Mon, 10 Jul 2023 10:34:48 +0100 Subject: [PATCH] Refactor #4103 - Update lifecycle names in Base* files --- .../lib/basecomponent/BaseComponent.d.ts | 16 ++++----- .../lib/basecomponent/BaseComponent.vue | 26 +++++++------- .../lib/basedirective/BaseDirective.d.ts | 35 +++++++++++++++++-- components/lib/basedirective/BaseDirective.js | 18 +++++----- components/lib/utils/ObjectUtils.js | 6 +++- components/lib/utils/Utils.d.ts | 3 +- 6 files changed, 71 insertions(+), 33 deletions(-) diff --git a/components/lib/basecomponent/BaseComponent.d.ts b/components/lib/basecomponent/BaseComponent.d.ts index 4cb602821..382be7f24 100644 --- a/components/lib/basecomponent/BaseComponent.d.ts +++ b/components/lib/basecomponent/BaseComponent.d.ts @@ -1,12 +1,12 @@ export interface ComponentHooks { - beforeCreate?(): void; - created?(): void; - beforeMount?(): void; - mounted?(): void; - beforeUpdate?(): void; - updated?(): void; - beforeUnmount?(): void; - unmounted?(): void; + onBeforeCreate?(): void; + onCreated?(): void; + onBeforeMount?(): void; + onMounted?(): void; + onBeforeUpdate?(): void; + onUpdated?(): void; + onBeforeUnmount?(): void; + onUnmounted?(): void; } export interface BaseComponentPassThroughOptions { diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue index ec846f437..d8a3b29a1 100644 --- a/components/lib/basecomponent/BaseComponent.vue +++ b/components/lib/basecomponent/BaseComponent.vue @@ -400,30 +400,30 @@ export default { } }, beforeCreate() { - this.pt?.hooks?.['beforeCreate']?.(); - this.$primevue?.config?.pt?.[this.$.type.name]?.hooks?.['beforeCreate']?.(); + this.pt?.hooks?.['onBeforeCreate']?.(); + this.$primevue?.config?.pt?.[this.$.type.name]?.hooks?.['onBeforeCreate']?.(); }, created() { - this._hook('created'); + this._hook('onCreated'); }, beforeMount() { loadBaseStyle(); - this._hook('beforeMount'); + this._hook('onBeforeMount'); }, mounted() { - this._hook('mounted'); + this._hook('onMounted'); }, beforeUpdate() { - this._hook('beforeUpdate'); + this._hook('onBeforeUpdate'); }, updated() { - this._hook('updated'); + this._hook('onUpdated'); }, beforeUnmount() { - this._hook('beforeUnmount'); + this._hook('onBeforeUnmount'); }, unmounted() { - this._hook('unmounted'); + this._hook('onUnmounted'); }, methods: { _hook(hookName) { @@ -437,12 +437,12 @@ export default { return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined; }, _getOptionValue(options, key = '', params = {}) { - const fKeys = ObjectUtils.convertToFlatCase(key).split('.'); + const fKeys = ObjectUtils.toFlatCase(key).split('.'); const fKey = fKeys.shift(); return fKey ? ObjectUtils.isObject(options) - ? this._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params) + ? this._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.toFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params) : undefined : ObjectUtils.getItemValue(options, params); }, @@ -451,8 +451,8 @@ export default { const self = this._getOptionValue(obj, key, params); const globalPT = searchInDefaultPT ? this._getOptionValue(this.defaultPT, key, params) : undefined; const merged = mergeProps(self, globalPT, { - ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.convertToFlatCase(this.$.type.name) }), - [`${datasetPrefix}section`]: ObjectUtils.convertToFlatCase(key) + ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(this.$.type.name) }), + [`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key) }); return merged; diff --git a/components/lib/basedirective/BaseDirective.d.ts b/components/lib/basedirective/BaseDirective.d.ts index ca18d91fa..7748053ce 100644 --- a/components/lib/basedirective/BaseDirective.d.ts +++ b/components/lib/basedirective/BaseDirective.d.ts @@ -1,6 +1,37 @@ -import { ObjectDirective } from 'vue'; +import { DirectiveBinding, VNode } from 'vue'; -export interface DirectiveHooks extends Omit {} +export interface DirectiveInstance { + $name: string | undefined; + $host: T; + $binding: DirectiveBinding; + $el: HTMLElement | undefined; + $css?: { + classes?: undefined; + inlineStyles?: undefined; + loadStyle?: () => void; + }; + defaultPT: any; + isUnstyled: boolean; + [key: string]: any; +} + +/* All parameters passed by the directive of Vue.js */ +export interface DirectiveOptions | null, V = any> { + el: T; + binding: DirectiveBinding; + vnode: VNode; + prevVNode: Prev; +} + +export interface DirectiveHooks { + onCreated?: (instance: DirectiveInstance | undefined, options: DirectiveOptions) => void; + onBeforeMount?: (instance: DirectiveInstance | undefined, options: DirectiveOptions) => void; + onMounted?: (instance: DirectiveInstance | undefined, options: DirectiveOptions) => void; + onBeforeUpdate?: (instance: DirectiveInstance | undefined, options: DirectiveOptions, V>) => void; + onUpdated?: (instance: DirectiveInstance | undefined, options: DirectiveOptions, V>) => void; + onBeforeUnmount?: (instance: DirectiveInstance | undefined, options: DirectiveOptions) => void; + onUnmounted?: (instance: DirectiveInstance | undefined, options: DirectiveOptions) => void; +} export interface BaseDirectivePassThroughOptions { hooks?: DirectiveHooks; diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js index 16bfeb8a8..173766326 100644 --- a/components/lib/basedirective/BaseDirective.js +++ b/components/lib/basedirective/BaseDirective.js @@ -5,12 +5,12 @@ import { mergeProps } from 'vue'; const BaseDirective = { _getMeta: (...args) => [ObjectUtils.isObject(args[0]) ? undefined : args[0], ObjectUtils.getItemValue(ObjectUtils.isObject(args[0]) ? args[0] : args[1])], _getOptionValue: (options, key = '', params = {}) => { - const fKeys = ObjectUtils.convertToFlatCase(key).split('.'); + const fKeys = ObjectUtils.toFlatCase(key).split('.'); const fKey = fKeys.shift(); return fKey ? ObjectUtils.isObject(options) - ? BaseDirective._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params) + ? BaseDirective._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.toFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params) : undefined : ObjectUtils.getItemValue(options, params); }, @@ -19,19 +19,21 @@ const BaseDirective = { const self = BaseDirective._getOptionValue(obj, key, params); const globalPT = searchInDefaultPT ? BaseDirective._getOptionValue(instance.defaultPT, key, params) : undefined; const merged = mergeProps(self, globalPT, { - ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.convertToFlatCase(instance.$name) }), - [`${datasetPrefix}section`]: ObjectUtils.convertToFlatCase(key) + ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }), + [`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key) }); return merged; }, _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => { + const name = `on${ObjectUtils.toCapitalCase(hookName)}`; const config = binding?.instance?.$primevue?.config; - const selfHook = binding?.value?.pt?.hooks?.[hookName]; - const globalHook = config?.pt?.directives?.[directiveName]?.hooks?.[hookName]; + const selfHook = binding?.value?.pt?.hooks?.[name]; + const globalHook = config?.pt?.directives?.[directiveName]?.hooks?.[name]; + const options = { el, binding, vnode, prevVnode }; - selfHook?.(el, binding, vnode, prevVnode); - globalHook?.(el, binding, vnode, prevVnode); + selfHook?.(el?.$instance, options); + globalHook?.(el?.$instance, options); }, _extend: (name, options = {}) => { const handleHook = (hook, el, binding, vnode, prevVnode) => { diff --git a/components/lib/utils/ObjectUtils.js b/components/lib/utils/ObjectUtils.js index afdd015ba..4c602339c 100755 --- a/components/lib/utils/ObjectUtils.js +++ b/components/lib/utils/ObjectUtils.js @@ -201,11 +201,15 @@ export default { return null; }, - convertToFlatCase(str) { + toFlatCase(str) { // convert snake, kebab, camel and pascal cases to flat case return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str; }, + toCapitalCase(str) { + return this.isNotEmpty(str) ? str[0].toUpperCase() + str.slice(1) : str; + }, + isEmpty(value) { return value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0) || (!(value instanceof Date) && typeof value === 'object' && Object.keys(value).length === 0); }, diff --git a/components/lib/utils/Utils.d.ts b/components/lib/utils/Utils.d.ts index 7567f7bb6..c15f0ff4a 100644 --- a/components/lib/utils/Utils.d.ts +++ b/components/lib/utils/Utils.d.ts @@ -74,7 +74,8 @@ export declare class ObjectUtils { static contains(value: any, list: any[]): boolean; static insertIntoOrderedArray(item: any, index: number, arr: any[], sourceArr: any[]): void; static removeAccents(str: any): string; - static convertToFlatCase(str: string): string; + static toFlatCase(str: string): string; + static toCapitalCase(str: string): string; static isEmpty(value: any): boolean; static isNotEmpty(value: any): boolean; static isFunction(value: any): boolean;