react-ui-basics 0.0.230 → 0.0.231

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.230",
+  "version": "0.0.231",
   "description": "",
   "module": "index.js",
   "_main": "index.cjs.js",

package/router/NavLink.js

@@ -6,6 +6,9 @@ import { classNames } from '../Tools.js';
 
 const NavLink = (props) => {
     const { href, highlightPath, className, activeClassName } = props;
+    const other = __extends({}, props);
+    delete other.activeClassName;
+    delete other.highlightPath;
     return jsxRuntime_2(Route, { path: highlightPath || href, controller: matches => jsxRuntime_2(Link, __extends({}, props, { [ReactConstants[5]]: classNames(className, matches && activeClassName) })) });
 };
 var NavLink$1 = NavLink;

package/router/NavLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavLink.js","sources":["../src/router/NavLink.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAYA,MAAM,OAAO,GAA2B,CAAC,KAAK,KAAI;IAC9C,MAAM,EAAC,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,eAAe,EAAC,GAAG,KAAK,CAAC;AAChE,IAAA,OAAOA,YAAC,CAAA,KAAK,EACT,EAAA,IAAI,EAAE,aAAa,IAAI,IAAI,EAC3B,UAAU,EAAE,OAAO,IAAIA,YAAA,CAAC,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,OAAO,IAAI,eAAe,CAAC,EAAA,CAAA,CAAG,GACzG,CAAC;AACP,CAAC,CAAC;AAEF,gBAAe,OAAO;;;;"}
+{"version":3,"file":"NavLink.js","sources":["../src/router/NavLink.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAYA,MAAM,OAAO,GAA2B,CAAC,KAAK,KAAI;IAC9C,MAAM,EAAC,IAAI,EAAE,aAAa,EAAE,SAAS,EAAE,eAAe,EAAC,GAAG,KAAK,CAAC;AAChE,IAAA,MAAM,KAAK,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,KAAK,CAAC,CAAA;IACxB,OAAO,KAAK,CAAC,eAAe,CAAA;IAC5B,OAAO,KAAK,CAAC,aAAa,CAAA;AAE1B,IAAA,OAAOA,YAAC,CAAA,KAAK,EACT,EAAA,IAAI,EAAE,aAAa,IAAI,IAAI,EAC3B,UAAU,EAAE,OAAO,IAAIA,YAAA,CAAC,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,KAAK,EAAA,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,OAAO,IAAI,eAAe,CAAC,EAAA,CAAA,CAAG,GACzG,CAAC;AACP,CAAC,CAAC;AAEF,gBAAe,OAAO;;;;"}

package/src/AutocompleteSelect.js

@@ -163,6 +163,7 @@ class AutocompleteSelect extends PureComponent {
         childComponent: DummyChild,
         withArrow: true,
         withFilter: true,
+        selectCustomOnClickOutside: true,
         withReset: false,
         scrollToValue: false,
         mode: MODE_DEFAULT,
@@ -223,7 +224,7 @@ class AutocompleteSelect extends PureComponent {
         const hasSelected = __length(selectedIds) !== 0;
         const setActive = (e) => {
             stopPropagation(e);
-            this.setState({isActive: true}, () => (scrollToValue && __length(selectedIds) > 0) && this.list.scrollTo(selectedIds[0]));
+            this.setState({isActive: true}, () => (scrollToValue && __length(selectedIds) > 0) && this.list.selected(selectedIds[0]));
         };
         const toggle = (e) => {
             if (!__state(this).isActive) {
@@ -236,9 +237,9 @@ class AutocompleteSelect extends PureComponent {
 
         const isInline = mode === MODE_INLINE || mode === MODE_INLINE_MULTIPLE || mode === MODE_MULTIPLE_MINI_INLINE;
         const filterValueTrimmed = filterValue.trim();
-        const dataFiltered = allowCustom ? [filterValueTrimmed, ...data.filter(suggestion => suggestion !== filterValueTrimmed)] : data;
+        const dataFiltered = allowCustom && !scrollToValue ? [filterValueTrimmed, ...data.filter(suggestion => suggestion !== filterValueTrimmed)] : data;
 
-        const filterFunction = this.createFilter(prefilter, filterValue, filterValueTrimmed.toLowerCase(), filter)
+        const filterFunction = !scrollToValue ? this.createFilter(prefilter, filterValue, filterValueTrimmed.toLowerCase(), filter) : UNDEFINED
         let filteredList = <FilteredList className={classNames(isActive && 'visible', listPortal && 'portal')}
                                          style={listStyles}
                                          ref={ref('list', this)}
@@ -371,7 +372,7 @@ class AutocompleteSelect extends PureComponent {
                                                       } else if (keyCode === 27/*esc*/) {
                                                           this.setState({
                                                               isActive: false,
-                                                              filterValue: isMultipleSelect(mode) ? '' : (allowCustom ? filterValue : ''),
+                                                              filterValue: isMultipleSelect(mode) ? '' : Object.values(selected)[0] || '',
                                                           });
                                                           this.input.getInput().blur()
                                                           this.onCancel();
@@ -389,14 +390,15 @@ class AutocompleteSelect extends PureComponent {
     }
 
     onClickOutside = () => {
-        const {allowCustom, required, onFilterInputChange} = __props(this);
-        const {filterValue} = __state(this);
-        if (allowCustom && (!!filterValue || !required)) {
-            this.onSelect()
+        const {allowCustom, required, onFilterInputChange, mode, selectCustomOnClickOutside} = __props(this);
+        let {filterValue, selected} = __state(this);
+        if (allowCustom && selectCustomOnClickOutside && (!!filterValue || !required)) {
+            selected = this.onSelect()
         }
 
-        this.setState({isActive: false, filterValue: ''});
-        onFilterInputChange && onFilterInputChange('');
+        filterValue = (!isMultipleSelect(mode) && Object.values(selected)[0]) || ''
+        this.setState({isActive: false, filterValue});
+        onFilterInputChange && onFilterInputChange(filterValue);
 
         this.onCancel();
     };
@@ -466,6 +468,7 @@ class AutocompleteSelect extends PureComponent {
 
         orNoop(onSelect)(selectedId);
         orNoop(onChange)(Object.values(selected));
+        return selected
     };
 
     clean = (e) => {
@@ -498,6 +501,11 @@ class AutocompleteSelect extends PureComponent {
     onChange = (event) => {
         const value = __target(event).value;
         this.setState({filterValue: value});
+        const data = __state(this).data || __props(this).data || []
+        if (data.indexOf(value) !== -1) {
+            this.list.selected(value)
+        }
+
         __props(this).onFilterInputChange?.(value);
     }
 }

package/src/FilteredList.css

@@ -37,7 +37,6 @@
   padding-right: 15px;
   cursor: pointer;
   overflow: hidden;
-  transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   border-left: 5px solid #4AC263;
   padding-left: 15px;
   margin-left: -5px;

package/src/FilteredList.scss

@@ -44,7 +44,6 @@
     padding-right: 15px;
     cursor: pointer;
     overflow: hidden;
-    transition: 0.2s cubic-bezier(.4, 0, .2, 1);
 
     border-left: 5px solid #4AC263;
     padding-left: 15px;

package/src/FilteredList.tsx

@@ -2,7 +2,7 @@ import React, {CSSProperties, MouseEventHandler} from 'react';
 import ReactCreateElement from './ReactCreateElement';
 import './FilteredList.css'
 import Scrollable from "./Scrollable";
-import {classNames, orNoop, ref, stopPropagation, isFunction, isObject} from "./Tools";
+import {classNames, orNoop, ref, stopPropagation, isFunction, isObject, UNDEFINED} from "./Tools";
 import {PureComponent} from "./ReactConstants";
 
 type Labels<T> = ((item: T) => string) | { [key: string]: string } | { [key: number]: string };
@@ -44,9 +44,9 @@ class FilteredList<T extends string|number> extends PureComponent<FilteredListPr
         filter: () => true,
     };
 
-    hidden:Map<T, boolean> = new Map();
-    elements :Map<T, HTMLDivElement> = new Map();
-    list:T[] = [];
+    hidden: Map<T, boolean> = new Map();
+    elements: Map<T, HTMLDivElement> = new Map();
+    list: T[] = [];
     el: Scrollable
 
     constructor(props) {
@@ -114,7 +114,12 @@ class FilteredList<T extends string|number> extends PureComponent<FilteredListPr
         this.props.onSelect(id);
     };
 
-    selected = (): T => {
+    selected = (id?: T): T => {
+        if (id !== UNDEFINED) {
+            this.setState({selected: id});
+            this.scrollTo(id)
+            return id;
+        }
         const {selected: value} = this.state;
         const {selectSingle} = this.props;
 
@@ -144,7 +149,7 @@ class FilteredList<T extends string|number> extends PureComponent<FilteredListPr
         if (position < list.length) {
             let id = list[position];
             this.setState({selected: id});
-            this.updateScroll(id)
+            this.scrollTo(id)
         }
     };
 
@@ -162,27 +167,7 @@ class FilteredList<T extends string|number> extends PureComponent<FilteredListPr
         if (position >= 0) {
             let id = list[position];
             this.setState({selected: id});
-            this.updateScroll(id)
-        }
-    };
-
-    updateScroll = (id) => {
-        const child = this.elements[id];
-        if (!child)
-            return
-
-        const container = this.el;
-        const scrollTop = container.getScroll();
-        const height = container.getHeight();
-        let isVisible = scrollTop <= child.offsetTop && scrollTop + height >= child.offsetTop + child.clientHeight;
-        if (!isVisible) {
-            let scrollToBottom = child.offsetTop + child.clientHeight - height;
-            let scrollToTop = child.offsetTop;
-            if (Math.abs(scrollTop - scrollToTop) < Math.abs(scrollTop - scrollToBottom)) {
-                container.setScroll(scrollToTop)
-            } else {
-                container.setScroll(scrollToBottom)
-            }
+            this.scrollTo(id)
         }
     };
 
@@ -191,7 +176,10 @@ class FilteredList<T extends string|number> extends PureComponent<FilteredListPr
         this.el.setScroll(0)
     };
 
-    scrollTo = (id) => this.el.setScroll(this.elements[id] && this.elements[id].offsetTop);
+    scrollTo = (id: T) => {
+        const child = this.elements.get(id);
+        child && this.el.setScroll(child.offsetTop - (this.el.getHeight() - child.clientHeight) / 2);
+    };
 }
 
 export default FilteredList;

package/src/router/NavLink.tsx

@@ -12,6 +12,10 @@ export interface NavLinkProps extends LinkProps {
 
 const NavLink: React.FC<NavLinkProps> = (props) => {
     const {href, highlightPath, className, activeClassName} = props;
+    const other = {...props}
+    delete other.activeClassName
+    delete other.highlightPath
+
     return <Route
         path={highlightPath || href}
         controller={matches => <Link {...props} className={classNames(className, matches && activeClassName)}/>}