@stellar-expert/ui-framework 1.9.3 → 1.9.5

package/account/identicon.js

@@ -41,7 +41,7 @@ function decodeBase32(input) {
 /**
  * Draw Stellar address identicon on the given canvas
  * @param {String} address - StrKey-encoded account address
- * @param {Number} size? - Identicon size
+ * @param {Number} [size] - Identicon painting area size, in pixels (by default 448)
  * @return {String}
  */
 export function drawIdenticon(address, size = SIZE) {

package/account/signer-key.js

@@ -49,9 +49,9 @@ function decodeSigner(signer) {
 /**
  * Account signer key description
  * @param {Signer} signer - StrKey-encoded Account/MuxedAccount/Sha256Hash/PreAuthTx/SignedPayload
- * @param {String} name? - Explicit account name that overrides the name from Directory; if false, friendly name is ignored
- * @param {String} className? - Optional CSS class attribute
- * @param {Boolean} showWeight? - Whether to display weight attribute
+ * @param {String} [name] - Explicit account name that overrides the name from Directory; if false, friendly name is ignored
+ * @param {String} [className] - Optional CSS class attribute
+ * @param {Boolean} [showWeight] - Whether to display weight attribute
  * @constructor
  */
 export const SignerKey = React.memo(function SignerKey({signer, name, className, showWeight = true}) {

package/asset/amount.js

@@ -7,11 +7,11 @@ import {AssetLink} from './asset-link'
  * Formatted tokens amount
  * @param {String|Number} amount - Amount of tokens
  * @param {String|AssetDescriptor|Asset} asset - Asset name/descriptor
- * @param {String|Number|'auto'} decimals? - Formatted number decimals to show
- * @param {Boolean} adjust? - Denominate raw Int64 stroops to string format
- * @param {Boolean|'floor'} round? - Round or trim the number
- * @param {Boolean} issuer? - Whether to show asset issuer
- * @param {Boolean} icon? - Wheter to show asset icon
+ * @param {String|Number|'auto'} decimals - Number of decimals to show for a formatted numeric value
+ * @param {Boolean} [adjust] - Treat amount value as raw Int64 stroops amount
+ * @param {Boolean|'floor'} [round] - Round the amount
+ * @param {Boolean} [issuer] - Whether to show asset issuer
+ * @param {Boolean} [icon] - Whether to show asset icon
  * @constructor
  */
 export const Amount = React.memo(function Amount({amount, asset, decimals, adjust, round, issuer, icon}) {

package/contract/sc-val.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import cn from 'classnames'
 import {xdr, scValToBigInt} from '@stellar/stellar-base'
 import {xdrParserUtils} from '@stellar-expert/tx-meta-effects-parser'
 import {shortenString} from '@stellar-expert/formatter'
@@ -7,7 +8,7 @@ import './sc-val.scss'
 
 export const ScVal = React.memo(function ScVal({value, nested = false, indent = false}) {
     if (!nested)
-        return <code className="sc-val"><ScVal value={value} indent={indent} nested/></code>
+        return <code className={cn('sc-val', {block: indent})}><ScVal value={value} indent={indent} nested/></code>
     if (!value)
         return 'void'
     if (typeof value === 'string') {

package/controls/tabs.js

@@ -7,12 +7,12 @@ 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
+ * @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}) {
@@ -88,7 +88,7 @@ export function Tabs({tabs, selectedTab, queryParam, className, onChange, right,
 /**
  * @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
+ * @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
  */

package/controls/tooltip.js

@@ -207,8 +207,8 @@ export const Tooltip = React.memo(function Tooltip({trigger, desiredPlace = 'top
  */
 /**
  * @typedef {Object} PositionOffset
- * @property {Number} top? - Top offset
- * @property {Number} bottom? - Bottom offset
- * @property {Number} left? - Left offset
- * @property {Number} right? - Right offset
+ * @property {Number} [top] - Top offset
+ * @property {Number} [bottom] - Bottom offset
+ * @property {Number} [left] - Left offset
+ * @property {Number} [right] - Right offset
  */

package/index.js

@@ -44,6 +44,7 @@ export * from './interaction/autofocus'
 export * from './interaction/block-select'
 export * from './interaction/copy-to-clipboard'
 export * from './interaction/spoiler'
+export * from './interaction/accordion'
 export * from './interaction/theme-selector'
 export * from './interaction/inline-progress'
 export * from './interaction/responsive'

package/interaction/accordion.js

@@ -0,0 +1,29 @@
+import React, {useCallback, useEffect, useState} from 'react'
+import cn from 'classnames'
+import './accordion.scss'
+
+/**
+ * @param {{title, content}[]} options
+ */
+export function Accordion({options}) {
+    const [selectedOption, setSelectedOption] = useState()
+    useEffect(() => {
+        setSelectedOption(options[0].title)
+    }, [options])
+    const changeSelected = useCallback(e => {
+        const {title} = e.currentTarget.dataset
+        setSelectedOption(title)
+    }, [options])
+    return <div className="accordion">
+        {options.map(({title, content}) => <div key={title} className={cn('option', {open: selectedOption === title})}>
+            <div className="accordion-header" data-title={title} onClick={changeSelected}>
+                {title}
+            </div>
+            <div className="accordion-collapse">
+                <div className="accordion-body">
+                    {content}
+                </div>
+            </div>
+        </div>)}
+    </div>
+}

package/interaction/accordion.scss

@@ -0,0 +1,32 @@
+.accordion {
+  .accordion-header {
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+
+    &:before {
+      content: '+';
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: -20px;
+    }
+  }
+
+  .accordion-collapse {
+    height: 0;
+    overflow-y: hidden;
+  }
+
+  .option {
+    &.open {
+      .accordion-header:before {
+        content: '-';
+      }
+
+      .accordion-collapse {
+        height: auto;
+      }
+    }
+  }
+}

package/package.json

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