@stellar-expert/ui-framework 1.9.0

package/controls/dropdown.js

@@ -0,0 +1,281 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {createPortal} from 'react-dom'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import {throttle} from 'throttle-debounce'
+import {useDependantState} from '../state/state-hooks'
+import './dropdown.scss'
+
+export const Dropdown = React.memo(function Dropdown({
+                                                         options,
+                                                         title,
+                                                         value,
+                                                         disabled,
+                                                         className,
+                                                         onChange,
+                                                         hint,
+                                                         showToggle,
+                                                         solo,
+                                                         hideSelected,
+                                                         header,
+                                                         footer,
+                                                         expanded,
+                                                         onScroll,
+                                                         onOpen,
+                                                         onClose,
+                                                         maxHeight
+                                                     }) {
+    const headerRef = useRef()
+    const listRef = useRef()
+    const [listOpen, updateListOpen] = useState(false)
+    const [alignRigth, setAlignRight] = useState(false)
+    //collapse dropdown handler
+    const collapseDropdown = useCallback(function () {
+        updateListOpen(open => {
+            if (!open)
+                return false
+            onClose?.call(this, this)
+            return false
+        })
+    }, [onClose])
+
+    //collapse dropdwon list on click
+    const [selectedValue, updateSelectedValue] = useDependantState(() => {
+        if (listOpen) {
+            setTimeout(() => {
+                document.addEventListener('click', collapseDropdown)
+            }, 200)
+        }
+        return value
+    }, [value, listOpen], () => {
+        document.removeEventListener('click', collapseDropdown)
+    })
+
+    //close/open dropdown on header cick
+    const toggleList = useCallback(function toggleList(e) {
+        e && e.nativeEvent.stopImmediatePropagation()
+        updateListOpen(prevState => {
+            if (disabled)
+                return false;
+            (prevState ? onClose : onOpen)?.call(this, this)
+            return !prevState
+        })
+    }, [disabled, onClose, onOpen])
+
+    //handle item select action
+    const select = useCallback(function (option) {
+        collapseDropdown()
+        if (disabled)
+            return
+        onChange && onChange(option.value || option)
+        updateSelectedValue(option)
+    }, [collapseDropdown, onChange])
+
+    //handle user scroll action for infinit scroll support
+    const scrollList = useMemo(() => throttle(200, e => {
+        if (!onScroll)
+            return
+        const {target} = e
+        const pos = {position: target.scrollTop, rel: 'middle'}
+        if (target.scrollTop === 0)
+            return onScroll({...pos, rel: 'top'})
+        if (Math.ceil(target.scrollHeight - target.scrollTop - 8) < target.clientHeight)
+            return onScroll({...pos, rel: 'bottom'})
+        onScroll(pos)
+    }), [onScroll])
+
+    //locate currently selectd option
+    const {option: selectedItem, isDefault} = getSelectedOption([value, selectedValue], options)
+
+    //check dropdown container alignement
+    if (listOpen) {
+        setTimeout(() => setAlignRight(isAlignedRight(listRef.current)), 200)
+    }
+    //show a dropdown after the initial render
+    useEffect(() => {
+        if (expanded === true) {
+            setTimeout(() => updateListOpen(true), 200)
+        }
+    }, [])
+
+    const ddTitle = title || selectedItem?.title || selectedItem?.value || selectedItem
+
+    return <div className={cn('dd-wrapper', {disabled}, className)} title={hint}>
+        <a href="#" className="dd-header" onClick={toggleList} ref={headerRef}>
+            {ddTitle}{!!showToggle && <span className={cn('dd-toggle', {visible: listOpen})}/>}
+        </a>
+        {!!listOpen && createPortal(<div className={className}>
+            <div className={cn('dd-backdrop', {solo})}/>
+            <div className={cn('dd-list', {solo, visible: listOpen && !disabled, 'align-right': alignRigth})}
+                 style={getListPosition(headerRef.current, solo)} ref={listRef}>
+                {!!header && <>
+                    <div className="dd-list-header" onClick={preventClosing}>{header}</div>
+                    <hr/>
+                </>}
+                <ul onScroll={scrollList} style={{maxHeight: `min(70vh, ${maxHeight})`}}>
+                    {options.filter(opt => !opt.hidden).map((option, i) => {
+                        if (option === '-') return <li className="dd-list-item" key={i + '-'}>
+                            <hr className="flare"/>
+                        </li>
+                        const key = option.value || option.href || option
+                        const isSelected = !isDefault && option === selectedItem
+                        const style = isSelected && hideSelected ? {display: 'none'} : {}
+                        return <DropdownOption {...{key, option, select, isSelected, style}} />
+                    })}
+                </ul>
+                {!!footer && <>
+                    <hr/>
+                    <div className="dd-list-footer" onClick={preventClosing}>{footer}</div>
+                </>}
+            </div>
+        </div>, document.body)}
+    </div>
+})
+
+const DropdownOption = React.memo(function DropdownOption({option, isSelected, select, style}) {
+    let {value, title, href, className} = option
+    if (typeof option === 'string') {
+        value = title = option
+    }
+    if (!title) {
+        title = value
+    }
+
+    const selectOption = useCallback(function (e) {
+        if (option.disabled) {
+            e.stopPropagation()
+            return
+        }
+        if (!option.href) {
+            e.preventDefault()
+        }
+        select(option)
+    }, [select, option])
+
+    return <li className="dd-list-item" key={value || href} onClick={selectOption} style={style}>
+        <a href={href || '#'} className={cn({className, selected: isSelected})}>{title}</a>
+    </li>
+})
+
+function getSelectedOption(values, options) {
+    for (let v of values) {
+        if (v !== null && v !== undefined) {
+            const option = options.find(item => item === v || item.value === v)
+            if (option) return {option, isDefault: false}
+        }
+    }
+    return {option: options.find(opt => typeof opt === 'string' || !opt.disabled), isDefault: true}
+}
+
+function getListPosition(header, solo) {
+    if (solo || !header)
+        return undefined
+    const rect = header.getBoundingClientRect()
+    return {
+        top: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX
+    }
+}
+
+function isAlignedRight(list) {
+    if (!list)
+        return
+    const rect = list.getBoundingClientRect()
+    return window.innerWidth - rect.right < 0 && rect.left - rect.width >= 0
+}
+
+function preventClosing(e) {
+    e.stopPropagation()
+}
+
+Dropdown.defaultProps = {
+    showToggle: true,
+    disabled: false,
+    hideSelected: false,
+    solo: false,
+    maxHeight: '35em'
+}
+
+Dropdown.propTypes = {
+    /**
+     * Available options
+     */
+    options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
+        /**
+         * Internal value used for the item identification
+         */
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        /**
+         * Link href - for dropdown menus
+         */
+        href: PropTypes.string,
+        /**
+         * Optional friendly item title
+         */
+        title: PropTypes.any
+    }), PropTypes.string])).isRequired,
+    /**
+     * Selected value
+     */
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /**
+     * Title to display instead of the selected value if needed
+     */
+    title: PropTypes.any,
+    /**
+     * OnChange handler
+     */
+    onChange: PropTypes.func,
+    /**
+     * Whether the dropdown interaction is disabled or not
+     */
+    disabled: PropTypes.bool,
+    /**
+     * HTML hover title attribute for the control
+     */
+    hint: PropTypes.string,
+    /**
+     * Additional HTML classes
+     */
+    className: PropTypes.string,
+    /**
+     * Whether to show toggle icon
+     */
+    showToggle: PropTypes.bool,
+    /**
+     * Show a dropdown list in centered dialog
+     */
+    solo: PropTypes.bool,
+    /**
+     * Do not show selected item in the dropdown list
+     */
+    hideSelected: PropTypes.bool,
+    /**
+     * Optional dropdown list header
+     */
+    header: PropTypes.any,
+    /**
+     * Optional dropdown list footer
+     */
+    footer: PropTypes.any,
+    /**
+     * Initially collapsed or open
+     */
+    expanded: PropTypes.bool,
+    /**
+     * List scroll handler - fires only if the options list has overflow
+     */
+    onScroll: PropTypes.func,
+    /**
+     * List open handler
+     */
+    onOpen: PropTypes.func,
+    /**
+     * Lsi close handler
+     */
+    onClose: PropTypes.func,
+    /**
+     * Maximum dropdown list height
+     */
+    maxHeight: PropTypes.string
+}

package/controls/dropdown.scss

@@ -0,0 +1,161 @@
+@use "../basic-styles/variables";
+
+.dd-wrapper {
+  display: inline-block;
+  position: relative;
+  padding-right: 0.3em;
+
+  &.reset {
+    //reset styles
+    font-size: $font-size-base;
+    font-weight: $font-weight-base;
+    line-height: $font-line-height-base;
+  }
+
+  .dd-toggle {
+    $toggle-size: 0.4em;
+    display: inline-block;
+    width: $toggle-size;
+    height: $toggle-size;
+    border: 1px solid currentColor;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+    transform: rotateZ(135deg) translate($toggle-size*0.4, -$toggle-size*0.4);
+    transform-origin: top right;
+    transition: transform 0.2s;
+
+    &.visible {
+      transform: rotateZ(135deg) scale(-1) translate($toggle-size*0.2, -$toggle-size*0.2);
+    }
+  }
+
+  .dd-header {
+    white-space: nowrap;
+    cursor: pointer;
+    display: inline-block;
+
+    &.button {
+      color: var(--color-bg);
+    }
+  }
+
+  .button .dd-toggle {
+    margin-left: 0.2em;
+  }
+
+
+  &:hover {
+    a {
+      color: var(--color-highlight);
+    }
+  }
+
+  &.disabled {
+    .dd-toggle {
+      border-top-color: var(--color-contrast-border);
+      border-right-color: var(--color-contrast-border);
+    }
+  }
+}
+
+.dd-list {
+  font-size: $font-size-base;
+  font-weight: $font-weight-base;
+  line-height: $font-line-height-base;
+  letter-spacing: normal;
+  position: absolute;
+  z-index: 1000;
+  visibility: hidden;
+  text-align: left;
+  top: calc(100% - 0.1em);
+  background: var(--color-bg);
+  border: 1px solid var(--color-contrast-border);
+  border-radius: $border-radius-input;
+  box-shadow: 2px 3px 6px -1px rgba(0, 0, 0, .3);
+  text-transform: none;
+  user-select: none;
+  margin-left: -0.8em;
+
+  &.align-right {
+    right: -0.2em
+  }
+
+  > ul {
+    display: block;
+    overflow-y: auto;
+    color: var(--color-primary);
+    margin: 0;
+    height: 0;
+  }
+
+  .dd-list-header, .dd-list-footer {
+    padding: .7em;
+  }
+
+  .dd-list-header + hr {
+    margin-top: 0;
+  }
+
+  &.visible {
+    visibility: visible;
+
+    > ul {
+      height: auto;
+    }
+  }
+
+  .dd-list-item {
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+
+    > a {
+      padding: .4em .7em;
+      display: block;
+      color: inherit;
+      white-space: nowrap;
+
+      &:hover {
+        background: var(--color-alt-bg)
+      }
+
+      &.selected {
+        cursor: default;
+        color: var(--color-text);
+        background: var(--color-alt-bg);
+      }
+    }
+  }
+
+  hr {
+    margin: 0.5em 0;
+  }
+
+  &.solo {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0;
+    max-height: 90vh !important;
+    max-width: 40rem;
+    z-index: 1002;
+
+    @media (max-width: $responsive-mobile-browser-width) {
+      min-width: 50vw;
+      max-width: 90vw;
+      width: 90vw;
+    }
+  }
+}
+
+.dd-backdrop.solo {
+  background: var(--color-backdrop);
+  display: block;
+  position: fixed;
+  z-index: 1001;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+}

package/controls/external-link.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const ExternalLink = React.memo(function ExternalLink({href, children, ...otherProps}) {
+    return <a href={href} target="_blank" rel="noreferrer noopener" {...otherProps}>{children}</a>
+})

package/controls/info-tooltip.js

@@ -0,0 +1,17 @@
+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'}) {
+    return <Tooltip trigger={<i className={cn('trigger icon info-tooltip small', icon)}/>}>
+        {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/info-tooltip.scss

@@ -0,0 +1,4 @@
+.info-tooltip-link {
+  display: block;
+  padding-top: 0.3em;
+}

package/controls/slider.js

@@ -0,0 +1,20 @@
+import React, {useCallback, useMemo, useState} from 'react'
+import {throttle} from 'throttle-debounce'
+import './slider.scss'
+
+export function Slider({value, categroies, 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}>
+        {categroies && <datalist className="categories dimmed condensed">
+            {categroies.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/slider.scss

@@ -0,0 +1,22 @@
+.slider {
+  .categories {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    font-size: 0.85*$font-size-base;
+    line-height: 1;
+
+    option {
+      padding: 0;
+      text-align: center;
+
+      &:first-child {
+        text-align: left;
+      }
+
+      &:last-child {
+        text-align: right;
+      }
+    }
+  }
+}

package/controls/tabs.js

@@ -0,0 +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
+ * @param {String} className? - Optional CSS class name
+ * @param {Boolean} right? - Inline 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? - Optional display name (if differs from tab name)
+ * @property {Function} render? - Render callback
+ * @property {Boolean} isDefault? - Whether this tab should be displayed by default
+ */

package/controls/tabs.scss

@@ -0,0 +1,73 @@
+@use "../basic-styles/variables";
+
+.tabs {
+  .tabs-header {
+    margin-top: 1em;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .tabs-item {
+      color: var(--color-bg);
+      font-family: $font-face-header;
+      font-weight: normal;
+      line-height: 2.6;
+      display: inline-block;
+      font-size: $font-size-base;
+      text-decoration: none;
+      padding: 0 0.8em;
+      position: relative;
+      text-align: center;
+      min-width: 4em;
+      height: 4rem;
+
+      @media (max-width: $responsive-mobile-browser-width) {
+        font-size: 0.9*$font-size-base;
+        min-width: 3.5em;
+      }
+
+      &:before {
+        content: '';
+        display: block;
+        background: var(--color-highlight);
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 100%;
+        transform: skew(-20deg);
+      }
+
+      &:hover:before {
+        background: var(--color-primary);
+      }
+
+      + .tabs-item:before {
+        border-left: 2px solid var(--color-primary);
+        margin-left: -1px;
+      }
+
+      &.selected {
+        color: var(--color-text);
+        cursor: pointer;
+
+        &:before {
+          background: var(--color-primary);
+        }
+      }
+
+      .tabs-item-text {
+        position: relative;
+      }
+    }
+  }
+
+  &.inline-right {
+    .tabs-header {
+      justify-content: right;
+    }
+  }
+
+  > hr.flare {
+    margin-top: 0;
+  }
+}