@stellar-expert/ui-framework 1.16.8 → 1.17.0

package/controls/info-tooltip.js

@@ -1,17 +1,24 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import cn from 'classnames'
-import {Tooltip} from './tooltip'
-import './info-tooltip.scss'
-
-export const InfoTooltip = React.memo(function InfoTooltip({children, link, icon = 'icon-help', ...otherProps}) {
-    return <Tooltip trigger={<i className={cn('trigger icon info-tooltip text-small text-justify', icon)} {...otherProps}/>} maxWidth="30em">
-        {children}
-        {!!link && <a href={link} className="info-tooltip-link" target="_blank">Read more&hellip;</a>}
-    </Tooltip>
-})
-
-InfoTooltip.propTypes = {
-    children: PropTypes.any.isRequired,
-    link: PropTypes.string
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import {Tooltip} from './tooltip'
+import './info-tooltip.scss'
+
+/**
+ * Help icon that shows a tooltip with explanatory text on hover
+ * @param {Object} props
+ * @param {*} props.children - Tooltip content
+ * @param {string} [props.link] - Optional "Read more" URL
+ * @param {string} [props.icon='icon-help'] - Icon CSS class
+ */
+export const InfoTooltip = React.memo(function InfoTooltip({children, link, icon = 'icon-help', ...otherProps}) {
+    return <Tooltip trigger={<i className={cn('trigger icon info-tooltip text-small text-justify', icon)} {...otherProps}/>} maxWidth="30em">
+        {children}
+        {!!link && <a href={link} className="info-tooltip-link" target="_blank">Read more&hellip;</a>}
+    </Tooltip>
+})
+
+InfoTooltip.propTypes = {
+    children: PropTypes.any.isRequired,
+    link: PropTypes.string
 }

package/controls/slider.js

@@ -1,20 +1,30 @@
-import React, {useCallback, useMemo, useState} from 'react'
-import {throttle} from 'throttle-debounce'
-import './slider.scss'
-
-export function Slider({value, categories, onChange, min = 0, max = 100, step = 1, ...otherProps}) {
-    const [inputValue, setInputValue] = useState(value || min)
-    const change = useMemo(() => throttle(300, onChange), [onChange])
-    const onSlide = useCallback(function (e) {
-        const value = parseFloat(e.target.value)
-        setInputValue(value)
-        change(value)
-    }, [change])
-
-    return <div className="slider dimmed text-small" {...otherProps}>
-        {categories && <datalist className="categories dimmed condensed">
-            {categories.map((category, index) => <option key={index + category} value={category} label={category}/>)}
-        </datalist>}
-        <input type="range" min={min} max={max} step={step} value={inputValue} onChange={onSlide}/>
-    </div>
+import React, {useCallback, useMemo, useState} from 'react'
+import {throttle} from 'throttle-debounce'
+import './slider.scss'
+
+/**
+ * Range input slider with optional labeled categories
+ * @param {Object} props
+ * @param {number} [props.value] - Current slider value
+ * @param {string[]} [props.categories] - Category labels displayed as a datalist
+ * @param {function(number): void} [props.onChange] - Callback invoked with the new value (throttled)
+ * @param {number} [props.min=0] - Minimum value
+ * @param {number} [props.max=100] - Maximum value
+ * @param {number} [props.step=1] - Step increment
+ */
+export function Slider({value, categories, onChange, min = 0, max = 100, step = 1, ...otherProps}) {
+    const [inputValue, setInputValue] = useState(value || min)
+    const change = useMemo(() => throttle(300, onChange), [onChange])
+    const onSlide = useCallback(function (e) {
+        const value = parseFloat(e.target.value)
+        setInputValue(value)
+        change(value)
+    }, [change])
+
+    return <div className="slider dimmed text-small" {...otherProps}>
+        {categories && <datalist className="categories dimmed condensed">
+            {categories.map((category, index) => <option key={index + category} value={category} label={category}/>)}
+        </datalist>}
+        <input type="range" min={min} max={max} step={step} value={inputValue} onChange={onSlide}/>
+    </div>
 }

package/controls/tabs.js

@@ -1,94 +1,94 @@
-import React, {useEffect} from 'react'
-import cn from 'classnames'
-import {navigation} from '@stellar-expert/navigation'
-import {useDependantState} from '../state/state-hooks'
-import './tabs.scss'
-
-/**
- * Tabs control
- * @param {TabDescriptor[]} tabs - Tabs list
- * @param {String} [selectedTab] - Currently selected tab
- * @param {Function} [onChange] - Handler for tabChanged event
- * @param {String} [queryParam] - Associated query param name (control will auto-update query string)
- * @param {String} [className] - Optional CSS class name
- * @param {Boolean} [right] - Position tabs to the right within the header
- * @param {*} [children] - Additional content to render in the tabs header
- * @constructor
- */
-export function Tabs({tabs, selectedTab, queryParam, className, onChange, right, children}) {
-    const [internallySelectedTab, setSelectedTab] = useDependantState(() => {
-        //return the props-derived tab name if available
-        if (selectedTab) return selectedTab
-        //try to get from query string
-        if (queryParam) {
-            const tab = navigation.query[queryParam]
-            if (findTabByName(tab)) return tab
-        }
-        //return first tab
-        const firstTab = tabs[0]
-        return firstTab ? firstTab.name : null
-    }, [selectedTab])
-
-    useEffect(() => {
-        if (!queryParam) return
-        const stopListeningQueryChanges = navigation.listen(({query}) => {
-            const tab = query[queryParam] || (tabs.find(t => t.isDefault) || tabs[0])?.name
-            selectTab(tab)
-        })
-        return () => {
-            stopListeningQueryChanges && stopListeningQueryChanges()
-        }
-    }, [tabs, queryParam])
-
-    function findTabByName(tabName) {
-        return tabs.find(t => t.name === tabName)
-    }
-
-    function selectTab(tabName) {
-        const tab = findTabByName(tabName)
-        if (!tab) {
-            if (selectedTab === undefined) {
-                setSelectedTab(null)
-            }
-            return
-        }
-
-        if (internallySelectedTab === tabName || selectedTab === tabName) return
-
-        if (onChange) {
-            onChange(tabName, this)
-        }
-        if (selectedTab === undefined) {
-            setSelectedTab(tabName)
-        }
-        if (queryParam) {
-            navigation.updateQuery({[queryParam]: tab.isDefault ? undefined : tabName})
-        }
-    }
-
-    const s = selectedTab || internallySelectedTab
-    const tabToRender = tabs.find(({name}) => name === s) || tabs[0]
-
-    return <div className={cn('tabs', className, {'inline-right': right})}>
-        <div className="tabs-header">
-            <div>
-                {tabs.map(({name, title}) => <a href="#" key={name} onClick={() => selectTab(name)}
-                                                className={cn('tabs-item', 'condensed', {selected: s === name})}>
-                    <span className="tabs-item-text">{title || name}</span></a>)}
-            </div>
-            {children}
-        </div>
-        <hr className="flare"/>
-        {!!tabToRender.render && <div className="tabs-body">
-            {tabToRender.render()}
-        </div>}
-    </div>
-}
-
-/**
- * @typedef {{}} TabDescriptor
- * @property {String} name - Unique table name
- * @property {String} [title] - Display name (if differs from tab name)
- * @property {Function} [render] - Render callback
- * @property {Boolean} [isDefault] - Whether this tab should be displayed by default
- */
+import React, {useEffect} from 'react'
+import cn from 'classnames'
+import {navigation} from '@stellar-expert/navigation'
+import {useDependantState} from '../state/state-hooks'
+import './tabs.scss'
+
+/**
+ * Tabs control
+ * @param {TabDescriptor[]} tabs - Tabs list
+ * @param {string} [selectedTab] - Currently selected tab
+ * @param {function} [onChange] - Handler for tabChanged event
+ * @param {string} [queryParam] - Associated query param name (control will auto-update query string)
+ * @param {string} [className] - Optional CSS class name
+ * @param {boolean} [right] - Position tabs to the right within the header
+ * @param {*} [children] - Additional content to render in the tabs header
+ * @constructor
+ */
+export function Tabs({tabs, selectedTab, queryParam, className, onChange, right, children}) {
+    const [internallySelectedTab, setSelectedTab] = useDependantState(() => {
+        //return the props-derived tab name if available
+        if (selectedTab) return selectedTab
+        //try to get from query string
+        if (queryParam) {
+            const tab = navigation.query[queryParam]
+            if (findTabByName(tab)) return tab
+        }
+        //return first tab
+        const firstTab = tabs[0]
+        return firstTab ? firstTab.name : null
+    }, [selectedTab])
+
+    useEffect(() => {
+        if (!queryParam) return
+        const stopListeningQueryChanges = navigation.listen(({query}) => {
+            const tab = query[queryParam] || (tabs.find(t => t.isDefault) || tabs[0])?.name
+            selectTab(tab)
+        })
+        return () => {
+            stopListeningQueryChanges && stopListeningQueryChanges()
+        }
+    }, [tabs, queryParam])
+
+    function findTabByName(tabName) {
+        return tabs.find(t => t.name === tabName)
+    }
+
+    function selectTab(tabName) {
+        const tab = findTabByName(tabName)
+        if (!tab) {
+            if (selectedTab === undefined) {
+                setSelectedTab(null)
+            }
+            return
+        }
+
+        if (internallySelectedTab === tabName || selectedTab === tabName) return
+
+        if (onChange) {
+            onChange(tabName, this)
+        }
+        if (selectedTab === undefined) {
+            setSelectedTab(tabName)
+        }
+        if (queryParam) {
+            navigation.updateQuery({[queryParam]: tab.isDefault ? undefined : tabName})
+        }
+    }
+
+    const s = selectedTab || internallySelectedTab
+    const tabToRender = tabs.find(({name}) => name === s) || tabs[0]
+
+    return <div className={cn('tabs', className, {'inline-right': right})}>
+        <div className="tabs-header">
+            <div>
+                {tabs.map(({name, title}) => <a href="#" key={name} onClick={() => selectTab(name)}
+                                                className={cn('tabs-item', 'condensed', {selected: s === name})}>
+                    <span className="tabs-item-text">{title || name}</span></a>)}
+            </div>
+            {children}
+        </div>
+        <hr className="flare"/>
+        {!!tabToRender.render && <div className="tabs-body">
+            {tabToRender.render()}
+        </div>}
+    </div>
+}
+
+/**
+ * @typedef {{}} TabDescriptor
+ * @property {string} name - Unique table name
+ * @property {string} [title] - Display name (if differs from tab name)
+ * @property {function} [render] - Render callback
+ * @property {boolean} [isDefault] - Whether this tab should be displayed by default
+ */