@dvrd/dvr-controls 1.0.46 → 1.0.48

package/package.json

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

package/src/js/button/dvrdButton.tsx

@@ -28,8 +28,8 @@ export default function DvrdButton(props: DvrdButtonProps) {
         {
             className, disabled, label, labelClassName, onClick, ornamentClassName, ornaments, red, secondary,
             customBaseColor, customContrastColor
-        } = props,
-        [hover, setHover] = useState(false);
+        } = props;
+    const [hover, setHover] = useState(false);
 
     function onMouseEnter() {
         setHover(true);
@@ -71,7 +71,7 @@ export default function DvrdButton(props: DvrdButtonProps) {
         } else if (secondary) color = context.contrastColor;
         else color = context.baseColor;
         color = convertColor(color);
-        if (hover) color = editColor(-.2, color);
+        if (hover && !disabled) color = editColor(-.2, color);
         return color;
     }
 

package/src/js/select/dvrdMultiSelect.tsx

@@ -159,7 +159,8 @@ export default function DvrdMultiSelect(props: Props) {
         const label = selectableItemLabel ?? item.label;
         if (['number', 'string'].includes(typeof label)) return (
             <label key={index} className={classNames('dvrd-select-item', isSelected && 'selected', itemClassName)}
-                   onClick={onClickItem(value)}>{label}</label>
+                   onClick={onClickItem(value)}>{selected &&
+                <AwesomeIcon name='check' className='check-icon'/>} {label}</label>
         );
         const labelElement: ReactElement = label as ReactElement;
         const onClick = (evt: React.MouseEvent) => {
@@ -207,183 +208,4 @@ export default function DvrdMultiSelect(props: Props) {
             {renderError()}
         </div>
     )
-}
-
-// class DvrdSelect extends PureComponent<Props, State> {
-//     private container: HTMLDivElement;
-//     state: State = {
-//         open: false,
-//         searchFocused: false,
-//     };
-//
-//     hasError = (): boolean => this.props.error !== undefined && this.props.error !== null;
-//
-//     onClickElement = (evt: React.MouseEvent) => {
-//         evt.stopPropagation();
-//         if (!this.props.disabled)
-//             this.setState({open: !this.state.open});
-//     };
-//
-//     onClickItem = (value: string | number) => (evt: React.MouseEvent) => {
-//         evt.stopPropagation();
-//         this.props.onChange(value)(evt);
-//         this.setState({open: false});
-//     };
-//
-//     onFocusInput = () => {
-//         this.setState({searchFocused: true, open: true});
-//     };
-//
-//     onBlurInput = () => {
-//         window.setTimeout(() => {
-//             this.setState({searchFocused: false});
-//             this.props.onChangeSearch({target: {value: ''}});
-//         }, 200);
-//     };
-//
-//     getLongestValue = (): string => {
-//         const {items} = this.props;
-//         let longest: string = '';
-//         for (const item of items) {
-//             if (item.label.toString().length > longest.length) {
-//                 longest = item.label.toString();
-//             }
-//         }
-//         return longest;
-//     };
-//
-//     getValueLabel = (): string | number => {
-//         const {value, items} = this.props;
-//         for (const item of items) {
-//             if (item.value === value) return this.getItemLabel(item);
-//         }
-//         return '';
-//     }
-//
-//     getItemLabel = (item: SelectItemShape): string | number => {
-//         const {label} = item;
-//         if (['string', 'number'].includes(typeof label)) return label as string | number;
-//         else if (!!item.valueLabel) return item.valueLabel;
-//         return item.value;
-//     }
-//
-//     getItemsContainerStyle = (): CSSProperties => {
-//         let {optionsContainerHeight} = this.props;
-//         if (typeof optionsContainerHeight === 'number') optionsContainerHeight = `${optionsContainerHeight}px`;
-//         return {maxHeight: optionsContainerHeight};
-//     }
-//
-//     renderLabel = () => {
-//         const {labelClassName, label} = this.props;
-//         if (!label) return null;
-//         return <label className={classNames('dvrd-select-label', labelClassName)}
-//                       onClick={this.onClickElement}>{label}</label>
-//     };
-//
-//     renderValue = () => {
-//         const {valueClassName, selectOnly, searchValue, onChangeSearch, disabled} = this.props,
-//             {searchFocused} = this.state, valueLabel = this.getValueLabel();
-//         if (selectOnly)
-//             return (
-//                 <div style={{display: 'flex', flexDirection: 'column'}}>
-//                     <label className={classNames('dvrd-select-value', valueClassName)}
-//                            onClick={this.onClickElement}>{valueLabel}</label>
-//                     <label style={{height: 0, visibility: 'hidden'}}>{this.getLongestValue()}</label>
-//                 </div>
-//             );
-//         const value = searchFocused ? searchValue : valueLabel;
-//         return <input className='dvrd-select-search' value={value} onChange={onChangeSearch} disabled={disabled}
-//                       onFocus={this.onFocusInput} onBlur={this.onBlurInput} onClick={stopPropagation}/>
-//     };
-//
-//     renderArrow = () => {
-//         const {arrowClassName} = this.props, {open} = this.state;
-//         return <AwesomeIcon name='chevron-down' onClick={this.onClickElement}
-//                             className={classNames('dvrd-select-arrow', open && 'open', arrowClassName)}/>;
-//     };
-//
-//     renderItems = () => {
-//         const {disabled, itemContainerClassName, itemsPosition} = this.props, {open} = this.state;
-//         const items = this.props.items.filter((item: SelectItemShape) => {
-//             if (item.selectable === false) return false;
-//             if (typeof item.label === 'string') return item.label.length > 0;
-//             return true;
-//         })
-//         return (
-//             <div
-//                 className={classNames('dvrd-select-items', (open && !disabled) && 'open', itemsPosition,
-//                     itemContainerClassName)} style={this.getItemsContainerStyle()}>
-//                 {items.map(this.renderItem)}
-//             </div>
-//         )
-//     };
-//
-//     renderItem = (item: SelectItemShape, index: number) => {
-//         const {value, selectableItemLabel} = item;
-//         const label = selectableItemLabel ?? item.label;
-//         const {itemClassName} = this.props;
-//         if (['number', 'string'].includes(typeof label)) return (
-//             <label key={index} className={classNames('dvrd-select-item', itemClassName)}
-//                    onClick={this.onClickItem(value)}>{label}</label>
-//         );
-//         const labelElement: ReactElement = label as ReactElement;
-//         const onClick = (evt: React.MouseEvent) => {
-//             this.onClickItem(value)(evt);
-//             labelElement.props.onClick?.(evt);
-//         };
-//         const className = classNames(labelElement.props.className, 'dvrd-select-item', itemClassName);
-//         return React.cloneElement(labelElement, Object.assign({}, labelElement.props, {
-//             onClick,
-//             className,
-//             key: index
-//         }));
-//     }
-//
-//     renderError = () => {
-//         if (!this.hasError()) return null;
-//         const {error, errorClassName} = this.props;
-//         return <label className={classNames('dvrd-select-error', errorClassName)}>{error}</label>
-//     };
-//
-//     addClickListener = () => {
-//         document.addEventListener('click', this.clickListener);
-//     };
-//
-//     removeClickListener = () => {
-//         document.removeEventListener('click', this.clickListener);
-//     }
-//
-//     clickListener = () => {
-//         if (!hasHover(this.container)) this.setState({open: false});
-//     };
-//
-//     componentDidUpdate = (props: Props, prevState: State) => {
-//         const {open} = this.state, prevOpen = prevState.open;
-//         if (open && !prevOpen) this.addClickListener();
-//         else if (!open && prevOpen) this.removeClickListener();
-//     };
-//
-//     componentWillUnmount = () => {
-//         this.removeClickListener();
-//     };
-//
-//     render = () => {
-//         const {className, disabled, selectOnly} = this.props, {open} = this.state;
-//         return (
-//             <div
-//                 className={classNames('dvrd-select-container', disabled && 'disabled', open && 'open',
-//                     this.hasError() && 'error', className)}
-//                 ref={(ref: HTMLDivElement) => {
-//                     this.container = ref
-//                 }} onClick={this.onClickElement}>
-//                 {this.renderLabel()}
-//                 <div className={classNames('content-container', !selectOnly && 'search')}>
-//                     {this.renderValue()}
-//                     {this.renderArrow()}
-//                 </div>
-//                 {this.renderItems()}
-//                 {this.renderError()}
-//             </div>
-//         )
-//     };
-// };
+}

package/src/js/select/dvrdSelectController.tsx

@@ -12,7 +12,7 @@ type ValueType = string | number | Array<string | number>;
 
 interface Props {
     onChange: ChangeFunction<ValueType>;
-    value: string | number | Array<string | number>;
+    value: ValueType;
     items: SelectItemShape[];
     disabled?: boolean;
     label?: string;

package/src/js/select/style/dvrdSelect.scss

@@ -137,4 +137,22 @@
       opacity: 1;
     }
   }
+
+  &.multi {
+    .dvrd-select-items {
+      .dvrd-select-item {
+        .check-icon {
+          vertical-align: middle;
+        }
+
+        &.selected {
+          background-color: rgba($color-green-whatsapp, .2);
+
+          .check-icon {
+            color: $color-green-whatsapp;
+          }
+        }
+      }
+    }
+  }
 }

package/src/js/util/colorUtil.ts

@@ -124,8 +124,7 @@ export const getRandomColor = (): string => {
     return color;
 };
 
-//@ts-ignore-start
-export const editColor = (p, c0, c1?, l?): string => {
+export const editColor = (p: number, c0: string, c1?: string, l?: any): string => {
     c0 = convertColor(c0);
     let r, g, b, P, f, t, h, i = parseInt, m = Math.round, a = typeof (c1) == "string";
     if (p < -1 || p > 1 || (c0[0] !== 'r' && c0[0] !== '#') || (c1 && !a)) return c0;