Modify the link view to allow all options to be passed via config

discoveryjs · May 22, 2024 · 59f9e8f · 59f9e8f
1 parent 6867e17
commit 59f9e8f
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## next
 
 - Added handling of empty payload on data loading (raise an error "Empty payload")
+- Modified the link view to allow all options to be passed via config, in addition to data
 - Added `onClick` option for `badge` views
 - Fixed resolving a value for main content for `badge` views
 - Removed `hint` option for `badge` views, use `tooltip` option instead

diff --git a/src/views/text/badges.usage.js b/src/views/text/badges.usage.js
@@ -34,6 +34,32 @@ export default (view, group) => ({
                 { view, data: [1, 2, 3] }
             ]
         },
+        {
+            title: 'Using data as source of options',
+            beforeDemo: {
+                view: 'md',
+                source: [
+                    'The following properties are taken from the data when the appropriate options are not specified for a legacy reasons (is subject to remove in the future):',
+                    '- `color`',
+                    '- `textColor`',
+                    '- `darkColor`',
+                    '- `darkTextColor`',
+                    '- `text`',
+                    '- `href`',
+                    '- `external`',
+                    '- `prefix`',
+                    '- `postfix`'
+                ].join('\n')
+            },
+            highlightProps: ['data'],
+            demo: {
+                view,
+                data: {
+                    text: 'demo',
+                    href: '#example'
+                }
+            }
+        },
         {
             title: 'Custom colors',
             beforeDemo: {
@@ -57,6 +83,7 @@ export default (view, group) => ({
         },
         {
             title: 'As a link',
+            highlightProps: ['href', 'external'],
             demo: {
                 view,
                 text: 'Link to something',
@@ -66,6 +93,7 @@ export default (view, group) => ({
         },
         {
             title: 'Using onClick handler',
+            highlightProps: ['onClick'],
             demo: {
                 view,
                 text: 'Show "Hello world"',
@@ -74,6 +102,7 @@ export default (view, group) => ({
         },
         {
             title: 'Prefix and postfix',
+            highlightProps: ['prefix', 'postfix'],
             demo: {
                 view,
                 prefix: 'prefix',
@@ -83,6 +112,7 @@ export default (view, group) => ({
         },
         {
             title: 'Complex content',
+            highlightProps: ['content'],
             demo: {
                 view,
                 content: ['text:"text "', 'link:{ href: "#example" }']

diff --git a/src/views/text/link.js b/src/views/text/link.js
@@ -2,19 +2,30 @@
 import usage from './link.usage.js';
 
 export default function(host) {
-    host.view.define('link', function(el, config, data, context) {
-        const { content, onClick } = config;
-        let { href, text, external } = data || {};
-
-        if (typeof data === 'string') {
-            href = text = data;
-        }
+    const prepareProps = host.queryFn(`is not array? | {
+        text: # has no 'content' ? is string ?: text,
+        content: #.content,
+        href,
+        external,
+        onClick: #.onClick
+    } | entries().({
+        key,
+        value: # has key ? #[key] : value
+    }).fromEntries() | {
+        $text; $href;
+        ...,
+        text: $text | is not undefined or no $href ?: $href,
+        href: $href | is not undefined or no $text ?: $text
+    }`);
 
-        if (text === undefined && href) {
-            text = href;
-        } else if (href === undefined && text) {
-            href = text;
-        }
+    host.view.define('link', function(el, config, data, context) {
+        let {
+            text,
+            content,
+            href,
+            external,
+            onClick
+        } = prepareProps(data, config);
 
         if (href) {
             el.href = href;

diff --git a/src/views/text/link.usage.js b/src/views/text/link.usage.js
@@ -1,22 +1,67 @@
 export default {
     demo: {
         view: 'link',
-        data: {
-            text: 'I am link',
-            href: '#'
-        }
+        text: 'I am link',
+        href: '#example'
     },
     examples: [
         {
             title: 'Link opened in new tab',
+            highlightProps: ['external'],
+            demo: {
+                view: 'link',
+                text: 'Discovery github',
+                href: 'https://github.com/discoveryjs/discovery',
+                external: true
+            }
+        },
+        {
+            title: 'Infering text ⇿ href',
+            highlightProps: ['text', 'href', 'data'],
+            beforeDemo: 'md:"When `text` is omitted but `href` is specified, or vice versa, the opposite component is inferred from the specified one"',
+            demo: [
+                { view: 'link', text: 'http://example1.com' },
+                { view: 'link', href: 'http://example2.com' },
+                { view: 'link', data: '"http://example3.com"' }
+            ]
+        },
+        {
+            title: 'Using onClick handler',
+            highlightProps: ['onClick'],
+            demo: {
+                view: 'link',
+                text: 'Show "Hello world"',
+                onClick: Function('return () => alert("Hello world!")')()
+            }
+        },
+        {
+            title: 'Using data as source of options',
+            beforeDemo: {
+                view: 'md',
+                source: [
+                    'The following properties are taken from the data when the appropriate options are not specified for a legacy reasons (is subject to remove in the future):',
+                    '- `text`',
+                    '- `href`',
+                    '- `external`'
+                ].join('\n')
+            },
+            highlightProps: ['data'],
             demo: {
                 view: 'link',
                 data: {
-                    text: 'Discovery github',
-                    href: 'https://github.com/discoveryjs/discovery',
-                    external: true
+                    text: 'demo',
+                    href: '#example'
                 }
             }
+        },
+        {
+            title: 'Complex content',
+            highlightProps: ['content'],
+            demo: {
+                view: 'link',
+                href: '#example',
+                content: ['text:"text "', 'html:"<b>bold</b>"']
+            }
         }
     ]
 };