@stellar-expert/ui-framework 1.19.0 → 1.19.2

package/README.md

@@ -1048,9 +1048,9 @@ import {FilterView, parseFiltersFromQuery} from '@stellar-expert/ui-framework'
     onChange={filters => setActiveFilters(filters)}/>
 ```
 
-#### `parseFiltersFromQuery()`
+#### `parseFiltersFromQuery(fields)`
 
-Parses and validates filter parameters from the current URL query string against registered field definitions. Returns an object with matched filter key-value pairs.
+Parses and validates filter parameters from the current URL query string against passed field definitions. Returns an object with matched filter key-value pairs.
 
 ---
 

package/filter/filter-view.js

@@ -1,5 +1,5 @@
 import React, {useCallback, useEffect, useState} from 'react'
-import {parseQuery} from '@stellar-expert/navigation'
+import {navigation, parseQuery} from '@stellar-expert/navigation'
 import deepmerge from 'deepmerge'
 import {Dropdown} from '../controls/dropdown'
 import {resolveFilterEditor} from './filter-editors'
@@ -10,10 +10,16 @@ let fieldDescriptionMapping = {}
 function FilterCondition({field, value, setValue, removeFilter, edit}) {
     const updateValue = useCallback(function (value) {
         setValue(field, value)
+        //reset cursor when apply filter
+        navigation.updateQuery({cursor: undefined})
     }, [field, setValue])
 
     const removeValue = useCallback(function () {
         removeFilter(field, value)
+        //reset cursor when remove applied filter
+        if (!!value) {
+            navigation.updateQuery({cursor: undefined})
+        }
     }, [field, value, removeFilter])
 
     const childProps = {value, edit}
@@ -27,19 +33,22 @@ function FilterCondition({field, value, setValue, removeFilter, edit}) {
     return <span className="filter-condition condensed" title={edit ? '' : filter.description}>
         <span className={'icon-' + filter.icon}/>
         {title} {React.createElement(editor, childProps)}
-        {removeFilter ? <a href="#" className="icon-delete-circle" onClick={removeValue} title="Remove filter"/> : <>&emsp;</>}
+        {removeFilter ?
+            <a href="#" className="icon-delete-circle" onClick={removeValue} title="Remove filter"/> :
+            !!setValue ? <>&emsp;&nbsp;&nbsp;</> : <>&emsp;</>}
     </span>
 }
 /**
  * Parses and validates filter parameters from the current URL query string
+ * @param {object} [fields] - Custom filter field definitions
  * @return {object}
  */
-export function parseFiltersFromQuery() {
+export function parseFiltersFromQuery(fields = fieldDescriptionMapping) {
     const params = parseQuery()
     const filters = {}
     let isEmpty = true
     for (const [key, value] of Object.entries(params)) {
-        const filterDescriptor = fieldDescriptionMapping[key]
+        const filterDescriptor = fields[key]
         if (!filterDescriptor)
             continue //skip unrelated query parameters
         filters[key] = value
@@ -124,10 +133,10 @@ export function FilterView({presetFilter, fields = {}, onChange}) {
     }, [onChange])
 
     useEffect(() => {
-        const queryParams = parseFiltersFromQuery()
+        const queryParams = parseFiltersFromQuery(fields)
         setFilters(queryParams)
         updateExternalFilters(queryParams)
-    }, [])
+    }, [fields])
 
 
     const replaceFilter = useCallback((field, value) => setTimeout(() => setFilters(prev => {
@@ -202,7 +211,7 @@ export function FilterView({presetFilter, fields = {}, onChange}) {
         <div className="mobile-only micro-space"/>
         <span className="icon-filter"/>&nbsp;Filters&emsp;
         <FiltersGroup filters={presetFilter}/>
-        <FiltersGroup filters={readyFilters} replaceFilter={replaceFilter} removeFilter={removeFilter}/>
+        <FiltersGroup filters={readyFilters} replaceFilter={replaceFilter} removeFilter={!editorMode ? removeFilter : null}/>
         {!editorMode ?
             <Dropdown title={title} options={availableFields} onChange={addFilter}/> :
             <div className="micro-space">

package/index.d.ts

@@ -1207,7 +1207,7 @@ export interface FilterViewProps {
 export function FilterView(props: FilterViewProps): React.ReactElement;
 
 /** Parse and validate filter parameters from the current URL query string */
-export function parseFiltersFromQuery(): Record<string, any>;
+export function parseFiltersFromQuery(fields: FilterFieldDescriptor): Record<string, any>;
 
 // ============================================================================
 // Stellar Utilities

package/interaction/dialog.js

@@ -1,28 +1,34 @@
 import React from 'react'
+import {createPortal} from 'react-dom'
 import PropTypes from 'prop-types'
+import cn from 'classnames'
 import './dialog.scss'
 
 /**
  * Modal dialog
  * @param {boolean} dialogOpen - Whether a dialog is shown
+ * @param {boolean} [big] - Increases dialog max-width to 42em
+ * @param {string} [className] - Extra CSS classes for the dialog container
  * @param {*} children - Dialog content
  * @return {JSX.Element|null}
  * @constructor
  */
-export const Dialog = React.memo(function Dialog({dialogOpen, children}) {
+export const Dialog = React.memo(function Dialog({dialogOpen, big, className, children}) {
     if (!dialogOpen)
         return null
-    return <div className="dialog">
+    return createPortal(<div className="dialog">
         <div className="dialog-backdrop"/>
         <div className="dialog-content container">
-            <div className="container">
+            <div className={cn('container', {big}, className)}>
                 {children}
             </div>
         </div>
-    </div>
+    </div>, document.body)
 })
 
 Dialog.propTypes = {
     dialogOpen: PropTypes.bool,
+    big: PropTypes.bool,
+    className: PropTypes.string,
     children: PropTypes.any
 }

package/interaction/dialog.scss

@@ -20,16 +20,28 @@
   > .dialog-content {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    align-items: center;
+    overflow-y: auto;
     height: 100%;
 
+    &::before,
+    &::after {
+      content: '';
+      flex: 1 0 0;
+    }
+
     > .container {
+      margin: $space-standard 0;
       background: var(--color-bg);
       border: 1px solid var(--color-contrast-border);
       border-radius: $border-radius-input;
       box-shadow: 0 2px 4px 0 var(--color-modal-bg);
       padding: $space-micro $space-standard $space-standard;
       max-width: 32em;
+
+      &.big {
+        max-width: 42em;
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.19.0",
+  "version": "1.19.2",
   "description": "StellarExpert shared UI components library",
   "main": "index.js",
   "module": "./index.js",