@imposium-hub/components 1.38.2 → 1.38.4

package/components/list-field/ListField.tsx

@@ -18,6 +18,8 @@ interface IListFieldProps {
     width? : string | number;
     onChange(e) : void;
     onError(e) : void;
+    onFocus? : () => void;
+    onBlur? : () => void;
     info? : string;
     labelPosition? : string;
 }
@@ -61,6 +63,9 @@ class ListField extends React.PureComponent<IListFieldProps, IListFieldState> {
     private inputBlur(e) {
 
         hotkeys.unbind('enter', this.submitHandler);
+        if (this.props.onBlur) {
+            this.props.onBlur();
+        }
     }
 
     private inputChanged(e) {
@@ -72,10 +77,9 @@ class ListField extends React.PureComponent<IListFieldProps, IListFieldState> {
 
     private inputFocus(e) {
 
-        const input = this.inputRef.current;
-
-        if (input) {
-            hotkeys('enter', this.submitHandler);
+        hotkeys('enter', this.submitHandler);
+        if (this.props.onFocus) {
+            this.props.onFocus();
         }
     }
 
@@ -162,7 +166,7 @@ class ListField extends React.PureComponent<IListFieldProps, IListFieldState> {
             style = 'subtle'
             tooltip = {tooltipAdd}
             color = 'primary'
-            onClick = {() => this.submitOption()}>
+            onClick = {this.submitHandler}>
             {ICON_PLUS}
         </Button>);
 

package/components/select-field/SelectField.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
-import { ICON_CARET_DOWN } from '../../constants/icons';
+import {ICON_CARET_DOWN, ICON_CLIPBOARD} from '../../constants/icons';
+import Button from '../button/Button';
 
 interface ISelectOption {
     label : string;
@@ -22,15 +23,33 @@ interface ISelectFieldProps {
     onChange(e) : void;
     info? : string;
     labelPosition? : string;
+    showCopy? : boolean;
+    onNotification?(e) : void;
+    onError?(e) : void;
 }
 
 class SelectField extends React.PureComponent<ISelectFieldProps, {}> {
-
+    private evtHandlers = {
+        copyToClipboard: (e) => this.copyToClipboard(e),
+    };
     constructor(props) {
 
         super(props);
     }
+    private copyToClipboard(e) {
+
+        const {onNotification, onError} = this.props;
+        navigator.clipboard.writeText(this.props.value).then(() => {
 
+            if (onNotification) {
+                onNotification('Copied to clipboard!');
+            }
+        }, () => {
+            if (onError) {
+                onError('Error copying to clipboard.');
+            }
+        });
+    }
     private onChange(e) {
 
         // handle selects converting booleans to strings
@@ -43,7 +62,7 @@ class SelectField extends React.PureComponent<ISelectFieldProps, {}> {
 
     public render() {
 
-        const {label, placeholder, options, value, width, buttons, selectRef, disable, tooltip, info, labelPosition, disableFirst} = this.props;
+        const {label, showCopy,  placeholder, options, value, width, buttons, selectRef, disable, tooltip, info, labelPosition, disableFirst} = this.props;
         let opts = [];
 
         const selectValue = (value === null || value === undefined) ? '' : value;
@@ -59,6 +78,16 @@ class SelectField extends React.PureComponent<ISelectFieldProps, {}> {
         } else {
             btns = [caret];
         }
+        if (showCopy) {
+            btns.push(<Button
+                key = 'btn-copy'
+                style = 'subtle'
+                color = 'primary'
+                tooltip = 'Copy to Clipboard'
+                onClick = {this.evtHandlers.copyToClipboard}>
+                {ICON_CLIPBOARD}
+            </Button>);
+        }
 
         if (options) {
             opts = options.map((option , i) => {