Create <TextInput> row component

.storybook/config.js

@@ -10,7 +10,7 @@ import propsTableAddon from './propsTable-addon';
 setOptions({
   name: 'iCHEF gypcrete',
   url: 'https://github.com/iCHEF/gypcrete',
-  showDownPanel: false
+  showDownPanel: true,
 });
 
 setDefaults({

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Add `<SwitchIcon>` to be used as a 64x32 icon.
 - Add `<Switch>` row component.
 - Add `<EditableText>` visual element which has an `<input type="text" />` inside.
+- Add `<TextInput>` which contains `<EditableText>` and ignores normal text props like `basic`, `tag` and `aside`.
 
 ### Changed
 - `<IconLayout>` can now be tooltip-free by turning it off.

examples/EditableText/BasicUsage.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { action } from '@kadira/storybook';
 
 import EditableText from 'src/EditableText';
 import DebugBox from '../DebugBox';
@@ -11,11 +12,14 @@ function BasicUsage() {
             </DebugBox>
 
             <DebugBox>
-                <EditableText value="Controlled input" />
+                <EditableText
+                    value="Controlled input"
+                    onChange={action('change')} />
             </DebugBox>
 
             <DebugBox>
-                <EditableText defaultValue="Uncontrolled input" />
+                <EditableText
+                    defaultValue="Uncontrolled input" />
             </DebugBox>
         </div>
     );

examples/TextInput/BasicUsage.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { action } from '@kadira/storybook';
+
+import TextInput from 'src/TextInput';
+import DebugBox from '../DebugBox';
+
+function BasicUsage() {
+    return (
+        <div>
+            <DebugBox>
+                <TextInput />
+            </DebugBox>
+
+            <DebugBox>
+                <TextInput
+                    value="Controlled input"
+                    onChange={action('change')} />
+            </DebugBox>
+
+            <DebugBox>
+                <TextInput defaultValue="Uncontrolled input" />
+            </DebugBox>
+        </div>
+    );
+}
+
+export default BasicUsage;

examples/TextInput/WithStatus.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { action } from '@kadira/storybook';
+
+import TextInput from 'src/TextInput';
+import DebugBox from '../DebugBox';
+
+function WithStatus() {
+    return (
+        <div>
+            <DebugBox>
+                <TextInput status="loading" />
+            </DebugBox>
+
+            <DebugBox>
+                <TextInput
+                    defaultValue="Living room TV"
+                    status="success"
+                    statusOptions={{ autohide: false }} />
+            </DebugBox>
+
+            <DebugBox>
+                <TextInput
+                    value="Kitchen Printer"
+                    status="error"
+                    errorMsg="Network failure"
+                    onChange={action('change')} />
+            </DebugBox>
+        </div>
+    );
+}
+
+export default WithStatus;

examples/TextInput/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+
+// For props table
+import TextInput, { PureTextInput } from 'src/TextInput';
+
+import BasicUsage from './BasicUsage';
+import WithStatus from './WithStatus';
+
+storiesOf('TextInput', module)
+    .addWithInfo('Basic usage', BasicUsage)
+    .addWithInfo('With status', WithStatus)
+    // Props table
+    .addPropsTable(() => <TextInput />, [PureTextInput]);

jsconfig.json

@@ -1,9 +1,12 @@
-{   
+{
     "compilerOptions": {
         "baseUrl": ".",
         "paths": {
             "src": ["src"]
-        }
+        },
+        "lib": [
+            "es2017"
+        ]
     },
     "typeAcquisition": {
         "include": [

src/TextInput.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import prefixClass from './utils/prefixClass';
+import rowComp, { getTextLayoutProps, ROW_COMP_ALIGN } from './mixins/rowComp';
+import './styles/TextLabel.scss';
+
+import EditableText, { PureEditableText } from './EditableText';
+
+export const COMPONENT_NAME = prefixClass('text-input');
+
+const filterOutStatusProps = (props) => {
+    const {
+        statusIcon,
+        errorMsg,
+        ...filteredProps
+    } = props;
+
+    return filteredProps;
+};
+
+function TextInput(props, { align }) {
+    const {
+        // <EditableText> props
+        value,
+        defaultValue,
+        placeholder,
+        disabled,
+        onFocus,
+        onBlur,
+        onChange,
+        input,
+        // React props
+        className,
+        ...otherProps
+    } = props;
+
+    const editableTextProps = {
+        value,
+        defaultValue,
+        placeholder,
+        disabled,
+        onFocus,
+        onBlur,
+        onChange,
+        input,
+    };
+
+    const rootClassName = classNames(className, COMPONENT_NAME);
+    const textLayoutProps = getTextLayoutProps(align, false);
+
+    return (
+        <div className={rootClassName} {...otherProps}>
+            <EditableText
+                {...editableTextProps}
+                {...textLayoutProps} />
+        </div>
+    );
+}
+
+TextInput.propTypes =
+    filterOutStatusProps(PureEditableText.propTypes);
+
+TextInput.defaultProps =
+    filterOutStatusProps(PureEditableText.defaultProps);
+
+TextInput.contextTypes = {
+    align: PropTypes.oneOf(Object.values(ROW_COMP_ALIGN)),
+};
+
+// export for tests
+export { TextInput as PureTextInput };
+
+export default rowComp({ defaultAlign: ROW_COMP_ALIGN.REVERSE })(TextInput);

src/__tests__/TextInput.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
+
+import { getTextLayoutProps, ROW_COMP_ALIGN } from '../mixins/rowComp';
+import EditableText from '../EditableText';
+import TextInput, { PureTextInput } from '../TextInput';
+
+describe('rowComp(TextInput)', () => {
+    it('renders without crashing', () => {
+        const div = document.createElement('div');
+        const element = <TextInput />;
+
+        ReactDOM.render(element, div);
+    });
+
+    it('reverse-aligns by default', () => {
+        const wrapper = shallow(<div><TextInput /></div>);
+
+        expect(wrapper.childAt(0).prop('align')).toBe('reverse');
+    });
+});
+
+describe('pure <TextInput>', () => {
+    it('renders with a proper-named wrapper', () => {
+        const wrapper = shallow(<PureTextInput />);
+
+        expect(wrapper.hasClass('gyp-text-input')).toBeTruthy();
+    });
+
+    it('renders <EditableText> and ignores chidlren from parent mixin', () => {
+        const wrapper = shallow(
+            <PureTextInput>
+                <span data-foo />
+                Bar content
+            </PureTextInput>
+        );
+
+        expect(wrapper.text()).toBe('<withStatus(EditableText) />');
+        expect(wrapper.containsMatchingElement(<span data-foo />)).toBeFalsy();
+    });
+
+    it('renders <EditableText> with layout props the same as rowComp()', () => {
+        const wrapper = shallow(<PureTextInput />, { context: { align: 'left' } });
+
+        Object.values(ROW_COMP_ALIGN).forEach((alignment) => {
+            const layoutProps = getTextLayoutProps(alignment, false);
+            wrapper.setContext({ align: alignment });
+
+            expect(wrapper.find(EditableText).prop('align')).toBe(layoutProps.align);
+            expect(wrapper.find(EditableText).prop('noGrow')).toBe(layoutProps.noGrow);
+        });
+    });
+
+    it('passes only white-listed props to <EditableText>', () => {
+        const handleFocus = jest.fn();
+        const handleBlur = jest.fn();
+        const handleChange = jest.fn();
+
+        const whitelistedProps = {
+            value: 'Foo',
+            defaultValue: 'Bar',
+            placeholder: 'john.appleseed@example.com',
+            disabled: false,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onChange: handleChange,
+        };
+
+        const wrapper = shallow(
+            <PureTextInput
+                {...whitelistedProps}
+                input={{ id: 'foo-dom-id' }}
+                data-unsupported-prop />
+        );
+        const textWrapper = wrapper.childAt(0);
+
+        Object.entries(whitelistedProps).forEach(([key, value]) => {
+            expect(textWrapper.prop(key)).toBe(value);
+        });
+
+        expect(textWrapper.prop('input')).toEqual({ id: 'foo-dom-id' });
+        expect(textWrapper.prop('data-unsupported-prop')).toBeUndefined();
+    });
+});

src/index.js

@@ -23,6 +23,7 @@ import IconButton from './IconButton';
 import Checkbox from './Checkbox';
 import IconCheckbox from './IconCheckbox';
 import Switch from './Switch';
+import TextInput from './TextInput';
 import SearchInput from './SearchInput';
 
 export {
@@ -46,5 +47,6 @@ export {
     Checkbox,
     IconCheckbox,
     Switch,
+    TextInput,
     SearchInput,
 };

src/mixins/rowComp.js

@@ -83,6 +83,21 @@ function determineTextAlign(compAlign, hasIcon) {
     }
 }
 
+/**
+ * Get 'align' and 'noGrow' layout props for <Text>
+ * as it would receive if rendered by rowComp().
+ *
+ * @param  {String} compAlign
+ * @param  {Bool}   hasIcon
+ * @return {Object} layoutProps
+ */
+export function getTextLayoutProps(compAlign, hasIcon) {
+    return {
+        align: determineTextAlign(compAlign, hasIcon),
+        noGrow: compAlign === CENTER,
+    };
+}
+
 const rowComp = ({
     defaultMinified = false,
     defaultAlign = 'left'
@@ -132,16 +147,17 @@ const rowComp = ({
         };
 
         static childContextTypes = {
+            align: RowComp.propTypes.align,
             ...statusPropTypes,
             // status,
             // statusOptions,
             // errorMsg,
         };
 
         getChildContext() {
-            const { status, statusOptions, errorMsg } = this.props;
+            const { align, status, statusOptions, errorMsg } = this.props;
 
-            return { status, statusOptions, errorMsg };
+            return { align, status, statusOptions, errorMsg };
         }
 
         renderContent() {
@@ -154,15 +170,14 @@ const rowComp = ({
             } = this.props;
 
             const textProps = { basic, aside, tag };
-            const textAlign = determineTextAlign(align, !!icon);
+            const textLayoutProps = getTextLayoutProps(align, !!icon);
 
             return [
                 icon && <Icon key="comp-icon" type={icon} />,
                 <Text
                     key="comp-text"
-                    align={textAlign}
-                    noGrow={align === CENTER}
-                    {...textProps} />
+                    {...textProps}
+                    {...textLayoutProps} />
             ];
         }