@stellar-expert/ui-framework 1.16.8 → 1.19.0

package/filter/filter-view.js

@@ -0,0 +1,218 @@
+import React, {useCallback, useEffect, useState} from 'react'
+import {parseQuery} from '@stellar-expert/navigation'
+import deepmerge from 'deepmerge'
+import {Dropdown} from '../controls/dropdown'
+import {resolveFilterEditor} from './filter-editors'
+import './filter.scss'
+
+let fieldDescriptionMapping = {}
+
+function FilterCondition({field, value, setValue, removeFilter, edit}) {
+    const updateValue = useCallback(function (value) {
+        setValue(field, value)
+    }, [field, setValue])
+
+    const removeValue = useCallback(function () {
+        removeFilter(field, value)
+    }, [field, value, removeFilter])
+
+    const childProps = {value, edit}
+    const filter = fieldDescriptionMapping[field]
+    if (edit || filter.multi === false) {
+        childProps.setValue = updateValue
+    }
+
+    const editor = resolveFilterEditor(field)
+    const title = !edit ? '' : (field === 'type' ? '' : filter.title)
+    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;</>}
+    </span>
+}
+/**
+ * Parses and validates filter parameters from the current URL query string
+ * @return {object}
+ */
+export function parseFiltersFromQuery() {
+    const params = parseQuery()
+    const filters = {}
+    let isEmpty = true
+    for (const [key, value] of Object.entries(params)) {
+        const filterDescriptor = fieldDescriptionMapping[key]
+        if (!filterDescriptor)
+            continue //skip unrelated query parameters
+        filters[key] = value
+        isEmpty = false
+    }
+    return filters
+}
+
+function FiltersGroup({filters, replaceFilter, removeFilter, edit = false}) {
+    if (!filters)
+        return null
+    return <>{Object.entries(filters).map(([field, values]) => {
+        if (!(values instanceof Array)) {
+            return <FilterCondition key={field} field={field} value={values} edit={edit} setValue={replaceFilter}
+                                    removeFilter={removeFilter}/>
+        }
+        if (!values.length)
+            return null
+        return <React.Fragment key={field}>
+            {values.map(value => <FilterCondition key={value} field={field} value={value} edit={edit}
+                                                  setValue={replaceFilter} removeFilter={removeFilter}/>)}
+        </React.Fragment>
+    })}</>
+}
+
+/**
+ * A component for managing search filters
+ * @param {object} [presetFilter] - Initial base filters
+ * @param {object} [fields] - Custom filter field definitions
+ * @param {func} [onChange] - Callback triggered when filters change
+ */
+export function FilterView({presetFilter, fields = {}, onChange}) {
+    fieldDescriptionMapping = fields
+    const [filters, setFilters] = useState(presetFilter || {})
+    const [_, setSerializedFilter] = useState(JSON.stringify(filters))
+
+    const availableFields = []
+    const readyFilters = {}
+    const editFilters = {}
+    let editorMode = false
+    for (const [field, props = {}] of Object.entries(fieldDescriptionMapping)) {
+        const values = filters[field]
+        if (values !== undefined) {
+            if (values instanceof Array) {
+                const newValues = readyFilters[field] = []
+                for (let i = 0; i < values.length; i++) {
+                    const value = values[i]
+                    if (!value) {
+                        editFilters[field] = [value]
+                        editorMode = true
+                    } else if (!presetFilter || !presetFilter[field]?.includes(value)) {
+                        newValues.push(value)
+                    }
+                }
+            } else {
+                if (!values) {
+                    editFilters[field] = values
+                    editorMode = true
+                } else {
+                    readyFilters[field] = values
+                }
+            }
+        }
+        if (props.multi !== false || !values) {
+            availableFields.push({
+                value: field,
+                title: props.description,
+                icon: 'icon-' + props.icon
+            })
+        }
+    }
+
+    const updateExternalFilters = useCallback(function (newFilters) {
+        setSerializedFilter(prev => {
+            const newValue = JSON.stringify(newFilters)
+            if (prev !== newValue) {
+                setTimeout(() => onChange(deepmerge(presetFilter, newFilters)), 100)
+                return newValue
+            }
+            return prev
+        })
+    }, [onChange])
+
+    useEffect(() => {
+        const queryParams = parseFiltersFromQuery()
+        setFilters(queryParams)
+        updateExternalFilters(queryParams)
+    }, [])
+
+
+    const replaceFilter = useCallback((field, value) => setTimeout(() => setFilters(prev => {
+        const newFilters = {...prev}
+        const filter = fieldDescriptionMapping[field] || {}
+        //atomic values
+        if (filter.multi === false) {
+            if (value === null) {
+                delete newFilters[field]
+                updateExternalFilters(newFilters)
+            } else {
+                newFilters[field] = value
+                if (value) {
+                    updateExternalFilters(newFilters)
+                }
+            }
+            return newFilters
+        }
+        //multi-values
+        let values = newFilters[field]
+        if (!values) {
+            values = newFilters[field] = []
+        }
+        if (value !== null) {
+            if (!values.includes(value)) {
+                if (values[values.length - 1] === '') {
+                    values.pop()
+                }
+                values.push(value)
+                if (value) {
+                    updateExternalFilters(newFilters)
+                }
+            }
+        } else {
+            const idx = values.indexOf('')
+            if (idx >= 0) {
+                values.splice(idx, 1)
+                updateExternalFilters(newFilters)
+            }
+        }
+        return newFilters
+    }), 100), [updateExternalFilters])
+
+    const removeFilter = useCallback((field, value) => setFilters(prev => {
+        const newFilters = {...prev}
+        const filter = fieldDescriptionMapping[field] || {}
+        //atomic value
+        if (filter.multi === false) {
+            if (newFilters[field] || newFilters[field] === '') {
+                newFilters[field] = undefined
+                updateExternalFilters(newFilters)
+            }
+            return newFilters
+        }
+        //multi-values
+        const values = newFilters[field]
+        const idx = values.indexOf(value)
+        if (idx >= 0) {
+            values.splice(idx, 1)
+            updateExternalFilters(newFilters)
+        }
+        return newFilters
+    }), [updateExternalFilters])
+
+    const addFilter = useCallback(field => {
+        replaceFilter(field, '')
+    }, [replaceFilter])
+
+    const title = <span className="nowrap"><span className="icon icon-add-circle"/>Add filter</span>
+
+    return <div className="op-filters">
+        <div className="mobile-only micro-space"/>
+        <span className="icon-filter"/>&nbsp;Filters&emsp;
+        <FiltersGroup filters={presetFilter}/>
+        <FiltersGroup filters={readyFilters} replaceFilter={replaceFilter} removeFilter={removeFilter}/>
+        {!editorMode ?
+            <Dropdown title={title} options={availableFields} onChange={addFilter}/> :
+            <div className="micro-space">
+                <FiltersGroup filters={editFilters} replaceFilter={replaceFilter} removeFilter={removeFilter} edit/>
+            </div>}
+        <div className="micro-space"/>
+    </div>
+}
+
+/**
+ * @callback FilterView~OnChange
+ * @param {Object} mergedFilters - The combination of preset filters and newly selected values.
+ */

package/filter/filter.scss

@@ -0,0 +1,57 @@
+.op-filters {
+  .icon-delete-circle {
+    margin-left: 0.1em;
+  }
+}
+
+.op-filter-container {
+  display: flex;
+  justify-content: flex-start;
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-contrast-border);
+  border-radius: $border-radius-input;
+  color: var(--color-text);
+  height: 4rem;
+  padding: 0.2rem 1rem;
+  width: 100%;
+
+  &:focus {
+    border-color: var(--color-highlight);
+  }
+}
+
+.filter-condition {
+  display: inline-block;
+  margin-right: 0.4em;
+  cursor: pointer;
+
+  &:before {
+    content: '/';
+    color: var(--color-highlight);
+  }
+
+  .icon-delete-circle {
+    opacity: 0;
+  }
+
+  &:hover .icon-delete-circle {
+    opacity: 1;
+  }
+
+  > input {
+    margin-bottom: 0;
+    height: 3rem;
+    padding: 0 0.4rem;
+
+    + .icon-ok {
+      display: inline-block;
+      visibility: hidden;
+      transition: visibility 0.3s;
+    }
+
+    &:focus + .icon-ok {
+      visibility: visible;
+      margin-left: 0.2em;
+    }
+  }
+}

package/horizon/horizon-account-helpers.js

@@ -1,104 +1,104 @@
-import {applyListQueryParameters, loadAllHorizonRecords, initHorizon} from './horizon-client-helpers'
-
-/**
- * Retrieve account status from Horizon
- * @param {String} accountAddress
- * @returns {Promise<AccountResponse>}
- */
-export function loadAccount(accountAddress) {
-    return initHorizon()
-        .loadAccount(accountAddress)
-}
-
-/**
- * Load assets issued by the account from Horizon
- * @param {String} account - Account address
- * @param {ListQueryParams} [queryParams] - Query parameters (optional)
- * @return {Promise<Array<Object>>}
- */
-export function loadIssuedAssets(account, queryParams = null) {
-    const query = applyListQueryParameters(initHorizon().assets().forIssuer(account).limit(200), queryParams)
-    return query.call()
-        .then(({records}) => {
-            if (records && records.length) {
-                records.sort((a, b) => a.asset_code - b.asset_code)
-            }
-            return records || []
-        })
-}
-
-/**
- * Load offer from Horizon for the particular account
- * @param {String} account - Account address
- * @param {ListQueryParams} [queryParams] - Query parameters (optional)
- * @return {Promise<Array<Object>>}
- */
-export function loadAccountOffers(account, queryParams = null) {
-    const query = applyListQueryParameters(initHorizon().offers().forAccount(account), queryParams)
-    return loadAllHorizonRecords(query)
-        .then(r => r.records)
-}
-
-
-/**
- * Load pending claimable balances for a given account pubkey
- * @param {String} account - Account address
- * @return {Promise<Array<Object>>}
- */
-export function loadAccountClaimableBalances(account) {
-    return initHorizon().claimableBalances()
-        .claimant(account)
-        .limit(100)
-        .call()
-        .then(r => r.records)
-}
-
-/**
- * Detect account lock status based on the signers configuration
- * @param {AccountResponse} account - Account info from Horizon
- * @returns {'unlocked'|'locked'|'partially locked'}
- */
-export function getAccountLockStatus(account) {
-    const {high_threshold, med_threshold, low_threshold} = account.thresholds
-
-    //calculate the sum of all signers weights
-    const totalSignersWeight = account.signers.reduce((res, signer) => res + signer.weight, 0)
-
-    if (totalSignersWeight > 0) {
-        //compare it with med_threshold and high_threshold
-        if (totalSignersWeight >= med_threshold || totalSignersWeight >= high_threshold) {
-            return 'unlocked'
-        } else if (totalSignersWeight >= low_threshold) {
-            return 'partially locked'
-        }
-    }
-    return 'locked'
-}
-
-/**
- * Retrieve balance for a given Horizon account info
- * @param {AccountResponse} account - Account Horizon info
- * @param {{code: String, issuer: String}} asset - Asset or null (for XLM)
- * @returns {{total: Number, available: Number, [asset]: {code: String, issuer: String}}}
- */
-export function getAccountBalance(account, asset = null) {
-    if (!account.balances) return {asset, total: 0, available: 0}
-    const assetBalance = account.balances.find(b => (!asset && b.asset_type === 'native') ||
-            (b.asset_issuer === asset.issuer && b.asset_code === asset.code)),
-        res = {asset, total: 0, available: 0}
-
-    if (assetBalance) {
-        res.total = parseFloat(assetBalance.balance)
-        res.available = res.total - parseFloat(assetBalance.selling_liabilities)
-        if (!asset) { //for XLM we also need to check reserved amount
-            res.available -= (parseInt(account.subentry_count) + 2) * baseReserve
-        }
-    } else if (asset && asset.issuer === account.address) {
-        res.total = res.available = 922337203685
-    }
-
-    return res
-}
-
-
-
+import {applyListQueryParameters, loadAllHorizonRecords, initHorizon} from './horizon-client-helpers'
+
+/**
+ * Retrieve account status from Horizon
+ * @param {string} accountAddress
+ * @returns {Promise<AccountResponse>}
+ */
+export function loadAccount(accountAddress) {
+    return initHorizon()
+        .loadAccount(accountAddress)
+}
+
+/**
+ * Load assets issued by the account from Horizon
+ * @param {string} account - Account address
+ * @param {ListQueryParams} [queryParams] - Query parameters (optional)
+ * @return {Promise<Array<Object>>}
+ */
+export function loadIssuedAssets(account, queryParams = null) {
+    const query = applyListQueryParameters(initHorizon().assets().forIssuer(account).limit(200), queryParams)
+    return query.call()
+        .then(({records}) => {
+            if (records && records.length) {
+                records.sort((a, b) => a.asset_code - b.asset_code)
+            }
+            return records || []
+        })
+}
+
+/**
+ * Load offer from Horizon for the particular account
+ * @param {string} account - Account address
+ * @param {ListQueryParams} [queryParams] - Query parameters (optional)
+ * @return {Promise<Array<Object>>}
+ */
+export function loadAccountOffers(account, queryParams = null) {
+    const query = applyListQueryParameters(initHorizon().offers().forAccount(account), queryParams)
+    return loadAllHorizonRecords(query)
+        .then(r => r.records)
+}
+
+
+/**
+ * Load pending claimable balances for a given account pubkey
+ * @param {string} account - Account address
+ * @return {Promise<Array<Object>>}
+ */
+export function loadAccountClaimableBalances(account) {
+    return initHorizon().claimableBalances()
+        .claimant(account)
+        .limit(100)
+        .call()
+        .then(r => r.records)
+}
+
+/**
+ * Detect account lock status based on the signers configuration
+ * @param {AccountResponse} account - Account info from Horizon
+ * @returns {'unlocked'|'locked'|'partially locked'}
+ */
+export function getAccountLockStatus(account) {
+    const {high_threshold, med_threshold, low_threshold} = account.thresholds
+
+    //calculate the sum of all signers weights
+    const totalSignersWeight = account.signers.reduce((res, signer) => res + signer.weight, 0)
+
+    if (totalSignersWeight > 0) {
+        //compare it with med_threshold and high_threshold
+        if (totalSignersWeight >= med_threshold || totalSignersWeight >= high_threshold) {
+            return 'unlocked'
+        } else if (totalSignersWeight >= low_threshold) {
+            return 'partially locked'
+        }
+    }
+    return 'locked'
+}
+
+/**
+ * Retrieve balance for a given Horizon account info
+ * @param {AccountResponse} account - Account Horizon info
+ * @param {{code: string, issuer: string}} asset - Asset or null (for XLM)
+ * @returns {{total: number, available: number, [asset]: {code: string, issuer: string}}}
+ */
+export function getAccountBalance(account, asset = null) {
+    if (!account.balances) return {asset, total: 0, available: 0}
+    const assetBalance = account.balances.find(b => (!asset && b.asset_type === 'native') ||
+            (b.asset_issuer === asset.issuer && b.asset_code === asset.code)),
+        res = {asset, total: 0, available: 0}
+
+    if (assetBalance) {
+        res.total = parseFloat(assetBalance.balance)
+        res.available = res.total - parseFloat(assetBalance.selling_liabilities)
+        if (!asset) { //for XLM we also need to check reserved amount
+            res.available -= (parseInt(account.subentry_count) + 2) * baseReserve
+        }
+    } else if (asset && asset.issuer === account.address) {
+        res.total = res.available = 922337203685
+    }
+
+    return res
+}
+
+
+

package/horizon/horizon-ledger-helpers.js

@@ -1,36 +1,36 @@
-import {initHorizon, applyListQueryParameters} from './horizon-client-helpers'
-
-/**
- * Load ledgers from Horizon
- * @param {ListQueryParams} [queryParams] - Query parameters (optional)
- * @return {Promise<Array<Object>>}
- */
-export function loadLedgers(queryParams = null) {
-    const query = applyListQueryParameters(initHorizon().ledgers(), queryParams)
-    return query.call()
-        .then(r => r.records)
-}
-
-/**
- * Load ledger by its sequence
- * @param {Number} sequence - Sequence of the ledger to fetch
- * @return {Object}
- */
-export function loadLedger(sequence) {
-    return initHorizon().ledgers()
-        .ledger(sequence)
-        .call()
-}
-
-/**
- * Stream ledgers from Horizon
- * @param {String} cursor - Cursor to start from
- * @param {Function} onNewLedger - Callback to invoke when new ledger arrives
- * @return {Function}
- */
-export function streamLedgers(cursor, onNewLedger) {
-    return initHorizon().ledgers()
-        .order('asc')
-        .cursor(cursor || 'now')
-        .stream({onmessage: ledger => onNewLedger(ledger)})
+import {initHorizon, applyListQueryParameters} from './horizon-client-helpers'
+
+/**
+ * Load ledgers from Horizon
+ * @param {ListQueryParams} [queryParams] - Query parameters (optional)
+ * @return {Promise<Array<Object>>}
+ */
+export function loadLedgers(queryParams = null) {
+    const query = applyListQueryParameters(initHorizon().ledgers(), queryParams)
+    return query.call()
+        .then(r => r.records)
+}
+
+/**
+ * Load ledger by its sequence
+ * @param {number} sequence - Sequence of the ledger to fetch
+ * @return {Object}
+ */
+export function loadLedger(sequence) {
+    return initHorizon().ledgers()
+        .ledger(sequence)
+        .call()
+}
+
+/**
+ * Stream ledgers from Horizon
+ * @param {string} cursor - Cursor to start from
+ * @param {function} onNewLedger - Callback to invoke when new ledger arrives
+ * @return {function}
+ */
+export function streamLedgers(cursor, onNewLedger) {
+    return initHorizon().ledgers()
+        .order('asc')
+        .cursor(cursor || 'now')
+        .stream({onmessage: ledger => onNewLedger(ledger)})
 }