Merge pull request #2329 from exadel-inc/tech/port-share

[maintain] Porting `esl-share` changes for `4.16.0`

src/modules/esl-share/README.md

@@ -176,7 +176,7 @@ or for example the configuration of the copy button
     "name": "copy",
     "title": "Copy",
     "additional": {
-        "alertText": "Copied to clipboard"
+        "copyAlertMsg": "Copied to clipboard"
     }
 }
 ```
@@ -221,7 +221,7 @@ The group may include another group. So this configuration describing nested gro
 ### Share actions available for use
 
 ESLShare provides several actions available for you to use:
- - `copy` - action for copying to the clipboard. It can use additional params `alertText` (with message text) to show an alert to indicate a successful operation
+ - `copy` - action for copying to the clipboard. It can use additional params `copyAlertMsg` (with message text) to show an alert to indicate a successful operation
  - `external` - action for sharing via an external application. It is used to produce actions via external applications linked via schema in URL (for example mailto:, news: or tel: )
  - `media` - action for sharing via a link to share on a social media
  - `native` - action for sharing that invokes the native sharing mechanism of Web Share API

src/modules/esl-share/actions/copy-action.ts

@@ -20,15 +20,15 @@ export class ESLShareCopyAction extends ESLShareBaseAction {
     if (!this.isAvailable || !url) return;
 
     await navigator.clipboard.writeText(url);
-    this.showCopyAlert($button.shareAdditional?.alertText);
+    this.showCopyAlert($button.shareAdditional?.copyAlertMsg);
   }
 
   /** Shows alert about the successful action completion */
-  protected showCopyAlert(alertText: string): void {
-    if (!alertText) return;
+  protected showCopyAlert(msg: string): void {
+    if (!msg) return;
     const detail = {
       cls: 'esl-share-alert',
-      html: `<span>${alertText}</span>`
+      html: `<span>${msg}</span>`
     };
     ESLEventUtils.dispatch(document.body, 'esl:alert:show', {detail});
   }

src/modules/esl-share/buttons/copy.ts

@@ -11,7 +11,7 @@ export const copy: ESLShareButtonConfig = {
   name: 'copy',
   title: 'Copy',
   additional: {
-    alertText: 'Copied to clipboard'
+    copyAlertMsg: 'Copied to clipboard'
   }
 };
 ESLShareConfig.append(copy);

src/modules/esl-share/core/esl-share-config.ts

@@ -1,6 +1,6 @@
 import {decorate, memoize} from '../../esl-utils/decorators';
 import {microtask} from '../../esl-utils/async/microtask';
-import {isObject} from '../../esl-utils/misc/object/types';
+import {isObject, deepMerge} from '../../esl-utils/misc/object';
 import {uniq} from '../../esl-utils/misc/array';
 import {SyntheticEventTarget} from '../../esl-utils/dom/events/target';
 
@@ -77,9 +77,9 @@ export class ESLShareConfig extends SyntheticEventTarget {
     return ESLShareConfig.instance;
   }
 
-  /** Updates items by the name and passed changes */
-  public static update(name: string, changes: Partial<ESLShareButtonConfig>): ESLShareConfig {
-    return ESLShareConfig.instance.update(name, changes);
+  /** Updates items configuration from the list with the specified partial config */
+  public static update(query: string, changes: Partial<ESLShareButtonConfig>): ESLShareConfig {
+    return ESLShareConfig.instance.update(query, changes);
   }
 
   /** Appends single button or group to current configuration */
@@ -173,10 +173,10 @@ export class ESLShareConfig extends SyntheticEventTarget {
     return this;
   }
 
-  /** Updates items by the name and passed changes */
-  public update(name: string, changes: Partial<ESLShareButtonConfig>): ESLShareConfig {
-    for (const btn of this.get(name)) {
-      this.append(Object.assign({}, btn, changes));
+  /** Updates items configuration from the list with the specified partial config */
+  public update(query: string, changes: Partial<ESLShareButtonConfig>): ESLShareConfig {
+    for (const btn of this.get(query)) {
+      this.append(deepMerge({}, btn, changes));
     }
     return this;
   }

src/modules/esl-share/test/actions/copy-action.test.ts

@@ -23,7 +23,7 @@ describe('ESLShare: "copy" action public API', () => {
     document.body.appendChild($button);
     $button.setAttribute('share-title', 'Test button title');
     $button.setAttribute('share-url', '/test/button/url');
-    $button.setAttribute('additional', '{"alertText": "Copied to clipboard"}');
+    $button.setAttribute('additional', '{"copyAlertMsg": "Copied to clipboard"}');
   });
 
   afterEach(() => {
@@ -44,7 +44,7 @@ describe('ESLShare: "copy" action public API', () => {
     expect(mockClipboard.writeText).toBeCalledWith('http://localhost/test/button/url');
   });
 
-  test('should dispatch esl:alert:show with shareAdditional.alertText when share() calls', (done) => {
+  test('should dispatch esl:alert:show with shareAdditional.copyAlertMsg when share() calls', (done) => {
     document.body.addEventListener('esl:alert:show', (e) => {
       expect((e as CustomEvent).detail).toEqual({
         cls: 'esl-share-alert',

src/modules/esl-share/test/esl-share-button.test.ts

@@ -47,7 +47,7 @@ describe('ESLShareButton tests', () => {
     });
 
     test('shareAdditional getter available', () => {
-      expect($copyButton.shareAdditional).toEqual({alertText: 'Copied to clipboard'});
+      expect($copyButton.shareAdditional).toEqual({copyAlertMsg: 'Copied to clipboard'});
     });
     test('shareLink getter available', () => {
       expect($facebookButton.shareLink).toBe('//www.facebook.com/sharer.php?u={u}');

src/modules/esl-share/test/esl-share-config.test.ts

@@ -11,6 +11,7 @@ describe('ESLShareConfig tests', () => {
   const SAMPLE_BUTTON_3: ESLShareButtonConfig = {name: 'sn3', title: 'SN3', action: 'media', link: 'https://sn3.com'};
   const SAMPLE_BUTTON_4: ESLShareButtonConfig = {name: 'sn4', title: 'SN4', action: 'media', link: 'https://sn4.com', icon: '<svg id="svg-4"></svg>'};
   const SAMPLE_BUTTON_5: ESLShareButtonConfig = {name: 'sn-5', title: 'SN5', action: 'media', link: 'https://sn5.com'};
+  const SAMPLE_BUTTON_6: ESLShareButtonConfig = {name: 'sn6', title: 'SN6', action: 'media', link: 'https://sn5.com', additional: {a: 1, b: 'test'}};
 
   describe('Getting ESLShareConfig state', () => {
     const instance: ESLShareConfig = new (ESLShareConfig as any)();
@@ -295,6 +296,12 @@ describe('ESLShareConfig tests', () => {
       }
     });
 
+    test('ESLShareConfig.update merge additional properties', () => {
+      instance.append(SAMPLE_BUTTON_6);
+      instance.update('sn6', {additional: {a: 2, c: 'test'}});
+      expect(instance.get('sn6')).toEqual([expect.objectContaining({...SAMPLE_BUTTON_6, additional: {a: 2, b: 'test', c: 'test'}})]);
+    });
+
     test('ESLShareConfig.update does not introduce new items', () => {
       instance.append([SAMPLE_BUTTON_1, SAMPLE_BUTTON_2]);
       instance.update('sn1', {title: 'SN3'});