@dvrd/dvr-controls 0.0.31 → 0.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "description": "Custom web controls",
   "main": "index.ts",
   "scripts": {},

package/src/js/button/dvrdButton.tsx

@@ -67,7 +67,7 @@ export default function DvrdButton(props: DvrdButtonProps) {
         else if (customBaseColor) color = customBaseColor;
         else if (red) {
             if (secondary) color = 'color-red-secondary';
-            else color = 'red';
+            else color = 'rgb(255,0,0)';
         } else if (secondary) color = context.contrastColor;
         else color = context.baseColor;
         color = convertColor(color);

package/src/js/select/dvrdSelect.tsx

@@ -3,7 +3,7 @@
  */
 import './style/dvrdSelect.scss';
 
-import React, {MouseEventHandler, PureComponent} from 'react';
+import React, {CSSProperties, MouseEventHandler, PureComponent} from 'react';
 import classNames from 'classnames';
 import {ChangeFunction, ErrorType, SelectItemShape} from '../util/interfaces';
 import {hasHover, stopPropagation } from '../util/controlUtil';
@@ -27,6 +27,7 @@ interface Props {
     itemsPosition: 'top' | 'bottom';
     selectOnly: boolean;
     searchValue: string;
+    optionsContainerHeight: number | string;
 }
 
 interface State {
@@ -84,6 +85,12 @@ export default class DvrdSelect extends PureComponent<Props, State> {
         return '';
     }
 
+    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;
@@ -118,7 +125,7 @@ export default class DvrdSelect extends PureComponent<Props, State> {
         return (
             <div
                 className={classNames('dvrd-select-items', (open && !disabled) && 'open', itemsPosition,
-                    itemContainerClassName)}>
+                    itemContainerClassName)} style={this.getItemsContainerStyle()}>
                 {items.filter((item) => item.label.toString().length > 0 && item.selectable !== false)
                     .map((item: SelectItemShape, index: number) => (
                         <label key={index} className={classNames('dvrd-select-item', itemClassName)}

package/src/js/select/dvrdSelectController.tsx

@@ -23,6 +23,7 @@ interface Props {
     itemClassName?: string;
     itemsPosition: 'top' | 'bottom';
     selectOnly: boolean;
+    optionsContainerHeight?: number | string;
 }
 
 interface State {
@@ -35,6 +36,7 @@ export default class DvrdSelectController extends PureComponent<Props, State> {
     static defaultProps = {
         itemsPosition: 'bottom',
         selectOnly: true,
+        optionsContainerHeight: '15rem',
     };
 
     state: State = {
@@ -63,7 +65,7 @@ export default class DvrdSelectController extends PureComponent<Props, State> {
     render = () => {
         const {
             arrowClassName, label, error, className, labelClassName, valueClassName, itemContainerClassName,
-            itemClassName, errorClassName, disabled, value, itemsPosition, selectOnly
+            itemClassName, errorClassName, disabled, value, itemsPosition, selectOnly, optionsContainerHeight
         } = this.props, {searchValue} = this.state;
         return (
             <DvrdSelect onChange={this.onChange} value={value} items={this.getItems()} disabled={disabled}
@@ -72,7 +74,8 @@ export default class DvrdSelectController extends PureComponent<Props, State> {
                         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}/>
+            }} searchValue={searchValue} onChangeSearch={this.onChangeSearch} selectOnly={selectOnly}
+                        optionsContainerHeight={optionsContainerHeight}/>
         );
     }
 };

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

@@ -65,6 +65,7 @@
     flex-direction: column;
     min-width: 100%;
     border-radius: .5rem;
+    overflow-y: auto;
 
     .dvrd-select-item {
       padding: .75rem;