Extract styles

Feature #14229

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/chips-input/chips-input.tsx b/src/components/chips-input/chips-input.tsx
index c35db1b37cd556cf2624c3324c16c6525b182a61..210feae915a8dc4cd25b23cb08ce4d0e713be34a 100644 (file)
--- a/src/components/chips-input/chips-input.tsx
+++ b/src/components/chips-input/chips-input.tsx
@@ -4,7 +4,8 @@
 
 import * as React from 'react';
 import { Chips } from '~/components/chips/chips';
-import { Input } from '@material-ui/core';
+import { Input, withStyles, WithStyles } from '@material-ui/core';
+import { StyleRulesCallback } from '@material-ui/core/styles';
 
 interface ChipsInputProps<Value> {
     values: Value[];
@@ -13,73 +14,93 @@ interface ChipsInputProps<Value> {
     createNewValue: (value: string) => Value;
 }
 
-export class ChipsInput<Value> extends React.Component<ChipsInputProps<Value>> {
+type CssRules = 'chips' | 'input' | 'inputContainer';
 
-    state = {
-        text: '',
-    };
+const styles: StyleRulesCallback = () => ({
+    chips: {
+        minHeight: '40px',
+        zIndex: 1,
+        position: 'relative',
+    },
+    input: {
+        position: 'relative',
+        top: '-5px',
+        zIndex: 1,
+    },
+    inputContainer: {
+        top: '-24px',
+    },
+});
+
+export const ChipsInput = withStyles(styles)(
+    class ChipsInput<Value> extends React.Component<ChipsInputProps<Value> & WithStyles<CssRules>> {
 
-    filler = React.createRef<HTMLDivElement>();
-    timeout = -1;
+        state = {
+            text: '',
+        };
 
-    setText = (event: React.ChangeEvent<HTMLInputElement>) => {
-        this.setState({ text: event.target.value });
-    }
+        filler = React.createRef<HTMLDivElement>();
+        timeout = -1;
 
-    handleKeyPress = ({ key }: React.KeyboardEvent<HTMLInputElement>) => {
-        if (key === 'Enter') {
-            this.createNewValue();
-        } else if (key === 'Backspace') {
-            this.deleteLastValue();
+        setText = (event: React.ChangeEvent<HTMLInputElement>) => {
+            this.setState({ text: event.target.value });
         }
-    }
 
-    createNewValue = () => {
-        if (this.state.text) {
-            const newValue = this.props.createNewValue(this.state.text);
-            this.setState({ text: '' });
-            this.props.onChange([...this.props.values, newValue]);
+        handleKeyPress = ({ key }: React.KeyboardEvent<HTMLInputElement>) => {
+            if (key === 'Enter') {
+                this.createNewValue();
+            } else if (key === 'Backspace') {
+                this.deleteLastValue();
+            }
         }
-    }
 
-    deleteLastValue = () => {
-        if (this.state.text.length === 0 && this.props.values.length > 0) {
-            this.props.onChange(this.props.values.slice(0, -1));
+        createNewValue = () => {
+            if (this.state.text) {
+                const newValue = this.props.createNewValue(this.state.text);
+                this.setState({ text: '' });
+                this.props.onChange([...this.props.values, newValue]);
+            }
         }
-    }
 
-    updateStyles = () => {
-        if(this.timeout){
-            clearTimeout(this.timeout);
+        deleteLastValue = () => {
+            if (this.state.text.length === 0 && this.props.values.length > 0) {
+                this.props.onChange(this.props.values.slice(0, -1));
+            }
         }
-        this.timeout = setTimeout(() => this.forceUpdate());
-    }
 
-    render() {
-        this.updateStyles();
-        return <>
-            <div style={{ minHeight: '40px', zIndex: 1, position: 'relative' }}>
-                <Chips {...this.props} filler={<div ref={this.filler} />} />
-            </div>
-            <Input
-                value={this.state.text}
-                onChange={this.setText}
-                onKeyDown={this.handleKeyPress}
-                style={{ top: '-24px' }}
-                inputProps={{ style: this.getInputStyles(), }}
-                fullWidth />
-        </>;
-    }
+        updateCursorPosition = () => {
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+            }
+            this.timeout = setTimeout(() => this.forceUpdate());
+        }
 
-    getInputStyles = (): React.CSSProperties => ({
-        width: this.filler.current
-            ? this.filler.current.offsetWidth + 8
-            : '100%',
-        position: 'relative',
-        right: this.filler.current
-            ? `calc(${this.filler.current.offsetWidth}px - 100%)`
-            : 0,
-        top: '-5px',
-        zIndex: 1,
-    })
-}
\ No newline at end of file
+        render() {
+            this.updateCursorPosition();
+            return <>
+                <div className={this.props.classes.chips}>
+                    <Chips {...this.props} filler={<div ref={this.filler} />} />
+                </div>
+                <Input
+                    value={this.state.text}
+                    onChange={this.setText}
+                    onKeyDown={this.handleKeyPress}
+                    inputProps={{
+                        className: this.props.classes.input,
+                        style: this.getInputStyles(),
+                    }}
+                    fullWidth
+                    className={this.props.classes.inputContainer} />
+            </>;
+        }
+
+        getInputStyles = (): React.CSSProperties => ({
+            width: this.filler.current
+                ? this.filler.current.offsetWidth + 8
+                : '100%',
+            right: this.filler.current
+                ? `calc(${this.filler.current.offsetWidth}px - 100%)`
+                : 0,
+
+        })
+    });