@dvrd/dvr-controls 0.0.31 → 0.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "0.0.31",
+  "version": "0.0.36",
   "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/date/style/dvrdDatePicker.scss

@@ -84,6 +84,7 @@
         opacity: 0;
         transition: color .2s ease-in-out, opacity .2s ease-in-out, visibility .2s ease-in-out;
         padding: .25rem;
+        user-select: none;
 
         &:hover {
           color: $color-gray-7;

package/src/js/pdf/text/pdfText.tsx

@@ -34,6 +34,7 @@ interface Props {
 interface State {
     settings: PDFTextParams;
     dragging: boolean;
+    focused: boolean;
 }
 
 export default class PdfText extends PdfElement<Props, State> {
@@ -61,6 +62,7 @@ export default class PdfText extends PdfElement<Props, State> {
                 persistent: PDFElementPersist.NOT_PERSISTENT,
             }, props.defaultSettings),
             dragging: false,
+            focused: false,
         }
         this.currentText = this.state.settings.text;
         this.events = [this.event, {eventName: 'onLinkedElementMoved', handler: this.onLinkedElementMoved}]
@@ -68,14 +70,22 @@ export default class PdfText extends PdfElement<Props, State> {
 
     private onBlur = (evt: React.FocusEvent<HTMLTextAreaElement>) => {
         this.lastKnownCursor = evt.target.selectionEnd || 0;
+        this.setState({focused: false}, this.setWidth);
         if (this.state.settings.text !== this.currentText) this.props.onSaveHistory();
     };
 
     private onFocus = (evt: React.FocusEvent) => {
         evt.stopPropagation();
+        this.setState({focused: true}, this.setWidth);
         this.currentText = this.state.settings.text;
     };
 
+    getTextValue = (): string => {
+        const {settings, focused} = this.state, {values} = this.props;
+        if (focused) return settings.text;
+        return setPdfVariables(settings.text, values);
+    }
+
     public setSetting = (key: string, value: any, callback?: VoidFunction, save: boolean = true) => {
         this.setState({settings: Object.assign({}, this.state.settings, {[key]: value})}, () => {
             this.setWidth();
@@ -215,7 +225,6 @@ export default class PdfText extends PdfElement<Props, State> {
     render = () => {
         const {settings, dragging} = this.state, {
             draggable,
-            values,
             defaultPosition,
             onSaveHistory,
             persistent
@@ -234,7 +243,7 @@ export default class PdfText extends PdfElement<Props, State> {
                     <div className='pdf-text-container'>
                     <textarea className='pdf-text-input' style={this.getTextStyle()}
                               readOnly={settings.disabled === true}
-                              value={sanitizeHtml(setPdfVariables(settings.text, values))} onChange={this.onChange}
+                              value={sanitizeHtml(this.getTextValue())} onChange={this.onChange}
                               rows={this.getRows()} onFocus={this.onFocus} onBlur={this.onBlur} onClick={this.onClick}
                               ref={(ref: HTMLTextAreaElement) => {
                                   this.field = ref

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;

package/src/js/textField/dvrdNumberInput.tsx

@@ -33,6 +33,7 @@ interface Props {
     asCurrency: boolean;
     autoSelect?: boolean;
 }
+// TODO Add option to disable symbols (+,-)
 
 export default class DvrdNumberInput extends PureComponent<Props> {
     static defaultProps = {