@dvrd/dvr-controls 1.0.72 → 1.0.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.72",
+  "version": "1.0.74",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

package/src/js/select/dvrdMultiSelect.tsx

@@ -11,7 +11,7 @@ import AwesomeIcon from '../icon/awesomeIcon';
 import delay from 'lodash.delay';
 
 interface Props {
-    onChange: (selected: Array<string | number>) => MouseEventHandler;
+    onChange: (selected: Array<string | number>, submit: boolean) => MouseEventHandler;
     onChangeSearch: ChangeFunction;
     selected: Array<string | number>;
     items: SelectItemShape[];
@@ -30,16 +30,28 @@ interface Props {
     searchValue: string;
     optionsContainerHeight: number | string;
     placeholder?: string;
+    submitOnClose?: boolean;
 }
 
 const transitionDuration = 200; // ms
 
+const useIsFirstRender = () => {
+    const isFirstRender = useRef(true);
+
+    useEffect(() => {
+        isFirstRender.current = false;
+    }, []);
+
+    return isFirstRender.current;
+};
+
 export default function DvrdMultiSelect(props: Props) {
     const {
         error, disabled, selected, onChange, onChangeSearch, items, optionsContainerHeight, label, labelClassName,
         selectOnly, valueClassName, searchValue, arrowClassName, itemClassName, itemsPosition, itemContainerClassName,
-        errorClassName, className, placeholder
+        errorClassName, className, placeholder, submitOnClose
     } = props;
+    const isFirstRender = useIsFirstRender();
     const [open, setOpen] = useState(false);
     const [searchFocused, setSearchFocused] = useState(false);
     const container = useRef<HTMLDivElement>(null);
@@ -60,8 +72,8 @@ export default function DvrdMultiSelect(props: Props) {
         return function (evt: React.MouseEvent) {
             stopPropagation(evt);
             if (selected.includes(_value))
-                onChange(selected.filter((value: string | number) => value !== _value))(evt);
-            else onChange(selected.concat(_value))(evt);
+                onChange(selected.filter((value: string | number) => value !== _value), !submitOnClose)(evt);
+            else onChange(selected.concat(_value), !submitOnClose)(evt);
         }
     }
 
@@ -186,7 +198,10 @@ export default function DvrdMultiSelect(props: Props) {
 
     useEffect(() => {
         if (open) addClickListener();
-        else removeClickListener();
+        else {
+            removeClickListener();
+            if (submitOnClose && !isFirstRender) onChange(selected, true);
+        }
         return function () {
             removeClickListener();
         }

package/src/js/select/dvrdSelectController.tsx

@@ -30,17 +30,14 @@ interface Props {
     unControlled?: true;
     multi?: true;
     placeholder?: string;
+    submitOnClose?: boolean;
 }
 
-// interface State {
-//     searchValue: string;
-//     value: string | number | Array<string | number>;
-// }
-
 export default function DvrdSelectController(props: Props) {
     const {
         value, multi, unControlled, onChange, items, error, className, labelClassName, valueClassName,
-        itemContainerClassName, arrowClassName, errorClassName, itemClassName, label, disabled, placeholder
+        itemContainerClassName, arrowClassName, errorClassName, itemClassName, label, disabled, placeholder,
+        submitOnClose
     } = props;
     const [search, setSearch] = useState('');
     const [internalValue, setInternalValue] = useState<ValueType>('');
@@ -48,12 +45,10 @@ export default function DvrdSelectController(props: Props) {
         if (!search) return items;
         return items.filter((item) => stringContains(item.label.toString(), search));
     }, [items, search]);
-    const _value = useMemo(() => unControlled ? internalValue : value,
-        [unControlled, internalValue, value]);
 
-    function _onChange(value: ValueType) {
+    function _onChange(value: ValueType, submit: boolean = true) {
         return function () {
-            onChange(value);
+            if (submit) onChange(value);
             setInternalValue(value);
         }
     }
@@ -65,84 +60,30 @@ export default function DvrdSelectController(props: Props) {
     useEffect(() => {
         if (multi && !Array.isArray(value)) throw new TypeError('Value must be an array in multi mode');
         else if (!multi && Array.isArray(value)) throw new TypeError('Value must be a string or number in single mode');
+    }, [value, multi]);
+
+    useEffect(() => {
         if (!unControlled && value !== internalValue) setInternalValue(value);
-    }, [value, multi, unControlled]);
+    }, [value, unControlled]);
 
     const itemsPosition = props.itemsPosition ?? 'bottom';
     const optionsContainerHeight = props.optionsContainerHeight ?? '15rem';
     const selectOnly = props.selectOnly !== false;
     if (multi) return (
         <DvrdMultiSelect onChange={_onChange} onChangeSearch={onChangeSearch}
-                         selected={_value as Array<string | number>} items={_items} itemsPosition={itemsPosition}
+                         selected={internalValue as Array<string | number>} items={_items} itemsPosition={itemsPosition}
                          selectOnly={selectOnly} searchValue={search} optionsContainerHeight={optionsContainerHeight}
                          className={className} error={error} label={label} arrowClassName={arrowClassName}
-                         errorClassName={errorClassName} itemClassName={itemClassName}
+                         errorClassName={errorClassName} itemClassName={itemClassName} submitOnClose={submitOnClose}
                          itemContainerClassName={itemContainerClassName} valueClassName={valueClassName}
                          labelClassName={labelClassName} disabled={disabled} placeholder={placeholder}/>
     );
     return (
-        <DvrdSelect onChange={_onChange} onChangeSearch={onChangeSearch} value={_value as number | string}
+        <DvrdSelect onChange={_onChange} onChangeSearch={onChangeSearch} value={internalValue as number | string}
                     items={_items} itemsPosition={itemsPosition} selectOnly={selectOnly} searchValue={search}
                     optionsContainerHeight={optionsContainerHeight} className={className} error={error} label={label}
                     arrowClassName={arrowClassName} errorClassName={errorClassName} itemClassName={itemClassName}
                     itemContainerClassName={itemContainerClassName} valueClassName={valueClassName}
                     labelClassName={labelClassName} disabled={disabled}/>
     );
-}
-
-// class _DvrdSelectController extends PureComponent<Props, State> {
-//     private select: DvrdSelect;
-//
-//     static defaultProps = {
-//         itemsPosition: 'bottom',
-//         selectOnly: true,
-//         optionsContainerHeight: '15rem',
-//     };
-//
-//     state: State = {
-//         searchValue: '',
-//         value: this.props.value,
-//     };
-//
-//     onChange = (value: string | number) => () => {
-//         this.props.onChange(value);
-//         this.setState({value});
-//     };
-//
-//     onChangeSearch = (evt: React.ChangeEvent<HTMLInputElement>) => {
-//         const {value} = evt.target;
-//         this.setState({searchValue: value});
-//     };
-//
-//     onOpen = (evt: React.MouseEvent) => {
-//         if (this.select) this.select.onClickElement(evt);
-//     };
-//
-//     getItems = () => {
-//         const items = this.props.items.slice(), {searchValue} = this.state;
-//         if (!searchValue) return items;
-//         return items.filter((item) => stringContains(item.label.toString(), searchValue))
-//     }
-//
-//     render = () => {
-//         const {
-//             arrowClassName, label, error, className, labelClassName, valueClassName, itemContainerClassName,
-//             itemClassName, errorClassName, disabled, itemsPosition, selectOnly, optionsContainerHeight, unControlled,
-//             multi
-//         } = this.props, {searchValue} = this.state;
-//         const value = !!unControlled ? this.state.value : this.props.value;
-//         if (!multi && Array.isArray(value)) throw new TypeError('Value cannot be an array in single mode');
-//         else if (multi && !Array.isArray(value)) throw new TypeError('Value must be an array in multi mode');
-//         return (
-//             <DvrdSelect onChange={this.onChange} value={value as string | number} items={this.getItems()}
-//                         disabled={disabled}
-//                         errorClassName={errorClassName} itemClassName={itemClassName}
-//                         itemContainerClassName={itemContainerClassName} valueClassName={valueClassName}
-//                         labelClassName={labelClassName} className={className} error={error} label={label}
-//                         arrowClassName={arrowClassName} itemsPosition={itemsPosition} ref={(ref: DvrdSelect) => {
-//                 this.select = ref
-//             }} searchValue={searchValue} onChangeSearch={this.onChangeSearch} selectOnly={selectOnly}
-//                         optionsContainerHeight={optionsContainerHeight}/>
-//         );
-//     }
-// };
+}