@imposium-hub/components 1.45.4 → 1.46.0

package/src/components/text-area-field/TextAreaField.tsx

@@ -2,40 +2,38 @@ import * as React from 'react';
 import Button from '../button/Button';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
-import {ICON_CLIPBOARD, ICON_EDIT, ICON_CHECK} from '../../constants/icons';
+import { ICON_CLIPBOARD, ICON_EDIT, ICON_CHECK } from '../../constants/icons';
 
 interface ITextAreaFieldProps {
-    buttons? : any;
-    controlled? : boolean;
-    disabled? : boolean;
-    label? : string;
-    placeholder? : string;
-    readOnly? : boolean;
-    value : string;
-    showCopy? : boolean;
-    width? : string | number;
-    tooltip? : IToolTipConfig | string;
-    onBlur?(e) : void;
-    onChange?(e) : void;
-    onFocus?(e) : void;
-    onNotification?(n, t?) : void;
-    onError?(e) : void;
-    onSubmit?(e) : void;
-    info? : string;
-    labelPosition? : string;
+    buttons?: any;
+    controlled?: boolean;
+    disabled?: boolean;
+    label?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    value: string;
+    showCopy?: boolean;
+    width?: string | number;
+    tooltip?: IToolTipConfig | string;
+    onBlur?(e): void;
+    onChange?(e): void;
+    onFocus?(e): void;
+    onNotification?(n, t?): void;
+    onError?(e): void;
+    onSubmit?(e): void;
+    info?: string;
+    labelPosition?: string;
 }
 
 interface ITextAreaFieldState {
-    editing : boolean;
-    internalValue : string;
+    editing: boolean;
+    internalValue: string;
 }
 
 class TextAreaField extends React.PureComponent<ITextAreaFieldProps, ITextAreaFieldState> {
-
-    private evtHandlers : any;
+    private evtHandlers: any;
 
     constructor(props) {
-
         super(props);
 
         this.state = {
@@ -46,47 +44,44 @@ class TextAreaField extends React.PureComponent<ITextAreaFieldProps, ITextAreaFi
         this.evtHandlers = {
             toggleEditing: (e) => this.toggleEditing(e),
             copyToClipboard: (e) => this.copyToClipboard(e)
-
         };
 
         this.inputRef = React.createRef();
     }
 
-    private inputRef : any;
+    private inputRef: any;
 
     private blur(e) {
-
         if (this.props.onBlur) {
             this.props.onBlur(e);
         }
     }
 
     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.');
+        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 focus(e) {
-
         if (this.props.onFocus) {
             this.props.onFocus(e);
         }
     }
 
     private getValue() {
-
-        const {controlled, value} = this.props;
-        const {internalValue} = this.state;
+        const { controlled, value } = this.props;
+        const { internalValue } = this.state;
         if (controlled) {
             return internalValue;
         } else {
@@ -95,7 +90,6 @@ class TextAreaField extends React.PureComponent<ITextAreaFieldProps, ITextAreaFi
     }
 
     private onChange(e) {
-
         if (!this.props.controlled) {
             this.props.onChange(e.target.value);
         } else {
@@ -106,67 +100,72 @@ class TextAreaField extends React.PureComponent<ITextAreaFieldProps, ITextAreaFi
     }
 
     private renderButtons() {
-
-        const {controlled, readOnly, buttons, showCopy} = this.props;
-        const {editing} = this.state;
-        const buttonArray = (buttons) ? [...buttons] : [];
+        const { controlled, buttons, showCopy } = this.props;
+        const { editing } = this.state;
+        const buttonArray = buttons ? [...buttons] : [];
 
         if (controlled) {
-            const icon = (editing) ? ICON_CHECK : ICON_EDIT;
-            buttonArray.push(<Button
-                key = 'btn-edit'
-                style = 'subtle'
-                color = 'secondary'
-                onClick = {this.evtHandlers.toggleEditing}>
-                {icon}
-            </Button>);
+            const icon = editing ? ICON_CHECK : ICON_EDIT;
+            buttonArray.push(
+                <Button
+                    key='btn-edit'
+                    style='subtle'
+                    color='secondary'
+                    onClick={this.evtHandlers.toggleEditing}>
+                    {icon}
+                </Button>
+            );
         }
 
         if (showCopy) {
-            buttonArray.push(<Button
-                key = 'btn-copy'
-                style = 'subtle'
-                tooltip = 'Copy to Clipboard'
-                color = 'primary'
-                onClick = {this.evtHandlers.copyToClipboard}>
-                {ICON_CLIPBOARD}
-            </Button>);
+            buttonArray.push(
+                <Button
+                    key='btn-copy'
+                    style='subtle'
+                    tooltip='Copy to Clipboard'
+                    color='primary'
+                    onClick={this.evtHandlers.copyToClipboard}>
+                    {ICON_CLIPBOARD}
+                </Button>
+            );
         }
 
         return buttonArray;
     }
 
     private toggleEditing(e) {
-
-        const {editing, internalValue} = this.state;
-        const {value} = this.props;
+        const { editing, internalValue } = this.state;
+        const { value } = this.props;
 
         if (editing) {
-            this.setState({
-                editing: false
-            }, () => {
-
-                // only fire onSubmit if the value changed
-                if (internalValue !== value) {
-                    this.props.onSubmit(this.state.internalValue);
+            this.setState(
+                {
+                    editing: false
+                },
+                () => {
+                    // only fire onSubmit if the value changed
+                    if (internalValue !== value) {
+                        this.props.onSubmit(this.state.internalValue);
+                    }
                 }
-            });
+            );
         } else {
-            this.setState({
-                editing: true
-            }, () => {
-                const input = this.inputRef.current;
-                if (input) {
-                    input.focus();
+            this.setState(
+                {
+                    editing: true
+                },
+                () => {
+                    const input = this.inputRef.current;
+                    if (input) {
+                        input.focus();
+                    }
                 }
-            });
+            );
         }
     }
 
     public componentDidUpdate(prevProps) {
-
         if (this.props.controlled) {
-
             if (prevProps.value !== this.props.value) {
                 this.setState({
                     internalValue: this.props.value
@@ -176,29 +175,41 @@ class TextAreaField extends React.PureComponent<ITextAreaFieldProps, ITextAreaFi
     }
 
     public render() {
-
-        const {label, placeholder, controlled, disabled, readOnly, width, tooltip, info, labelPosition} = this.props;
-        const {editing} = this.state;
-        const disable = (controlled && !editing || disabled);
-
-        return <FieldWrapper
-                    customClass = 'text-area-field'
-                    label = {label}
-                    tooltip = {tooltip}
-                    buttons = { this.renderButtons() }
-                    info = {info}
-                    labelPosition = {labelPosition}
-                    width = {width}>
-            <textarea
-                placeholder = {placeholder}
-                value = {this.getValue()}
-                disabled = {disable}
-                readOnly = {readOnly}
-                ref = {this.inputRef}
-                onChange = {(e) => this.onChange(e)}
-                onFocus = {(e) => this.focus(e)}
-                onBlur = {(e) => this.blur(e)} />
-        </FieldWrapper>;
+        const {
+            label,
+            placeholder,
+            controlled,
+            disabled,
+            readOnly,
+            width,
+            tooltip,
+            info,
+            labelPosition
+        } = this.props;
+        const { editing } = this.state;
+        const disable = (controlled && !editing) || disabled;
+
+        return (
+            <FieldWrapper
+                customClass='text-area-field'
+                label={label}
+                tooltip={tooltip}
+                buttons={this.renderButtons()}
+                info={info}
+                labelPosition={labelPosition}
+                width={width}>
+                <textarea
+                    placeholder={placeholder}
+                    value={this.getValue()}
+                    disabled={disable}
+                    readOnly={readOnly}
+                    ref={this.inputRef}
+                    onChange={(e) => this.onChange(e)}
+                    onFocus={(e) => this.focus(e)}
+                    onBlur={(e) => this.blur(e)}
+                />
+            </FieldWrapper>
+        );
     }
 }
 

package/src/components/text-field/TextField.stories.tsx

@@ -1,52 +1,12 @@
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
 import TextField from './TextField';
-import { IToolTipConfig } from '../Tooltip';
 
 export default {
     title: 'TextField',
     components: TextField
 };
 
-interface ITextFieldProps {
-    buttons? : any;
-    controlled? : boolean;
-    loading? : boolean;
-    disabled? : boolean;
-    submittable? : boolean;
-    focusOnMount ? : boolean;
-    label? : string;
-    placeholder? : string;
-    readOnly? : boolean;
-    value? : string;
-    tooltip ? : IToolTipConfig | string;
-    showCopy? : boolean;
-    width? : string | number;
-    submittableType? : 'search' | 'add';
-    suggestions? : string[];
-    hideButtons? : boolean;
-    onBlur?(e) : void;
-    onChange?(e) : void;
-    onFocus?(e) : void;
-    onNotification?(e) : void;
-    onError?(e) : void;
-    onSubmit?(e) : void;
-    doSubmit? : (v : string) => any;
-    pattern? : RegExp;
-    info? : string;
-    labelPosition? : string;
-}
-
-interface ITextFieldState {
-    editing : boolean;
-    suggestions : string[];
-    internalValue : string;
-}
-
 export const defaultTextField = () => (
-    <TextField
-        label = {'Label'}
-        tooltip = {'TOOLTIP'}
-        value = {''}
-        onChange = {(v) => action(v)}/>
+    <TextField label={'Label'} tooltip={'TOOLTIP'} value={''} onChange={(v) => action(v)} />
 );