Merge pull request #239 from dabapps/input-with-prefix-suffix

Input with prefix suffix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.9.11",
+  "version": "0.9.12",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

src/ts/components/precomposed/input-with-prefix-suffix.examples.md

@@ -0,0 +1,25 @@
+#### Examples
+
+Example with class names
+
+```js
+<InputWithPrefixSuffix
+  prefix="£"
+  suffix="%"
+  value="Example"
+  className="applied-to-input-group"
+  inputClassName="applied-to-input"
+  prefixClassName="primary"
+  suffixClassName="error"
+/>
+```
+
+Display block with React element prefix
+
+```js
+<InputWithPrefixSuffix
+  block
+  prefix={<strong>Strong</strong>}
+  value="Example"
+/>
+```

src/ts/components/precomposed/input-with-prefix-suffix.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { PureComponent } from 'react';
+import { ComponentProps } from '../../types';
+import InputGroup from '../forms/input-group';
+import InputGroupAddon from '../forms/input-group-addon';
+
+export interface PrefixSuffixProps extends ComponentProps {
+  /**
+   * Content to display to the left of the input.
+   */
+  prefix?: React.ReactChild;
+  /**
+   * Content to display to the right of the input.
+   */
+  suffix?: React.ReactChild;
+  /**
+   * Set the style `display: block;` so the input group fills its parent.
+   */
+  block?: boolean;
+  /**
+   * Class name to apply to the input.
+   */
+  inputClassName?: string;
+  /**
+   * Class name to apply to the prefix.
+   */
+  prefixClassName?: string;
+  /**
+   * Class name to apply to the suffix.
+   */
+  suffixClassName?: string;
+}
+
+export type InputWithPrefixSuffixProps = React.HTMLAttributes<
+  HTMLInputElement
+> &
+  PrefixSuffixProps;
+
+/**
+ * A precomposed Input containing an optional prefix (InputGroupAddon), an input,
+ * and an optional suffix (InputGroupAddon).
+ */
+export class InputWithPrefixSuffix extends PureComponent<
+  InputWithPrefixSuffixProps,
+  {}
+> {
+  public render() {
+    const {
+      prefix,
+      suffix,
+      block,
+      className,
+      inputClassName,
+      prefixClassName,
+      suffixClassName,
+      component,
+      ...remainingProps
+    } = this.props;
+
+    return (
+      <InputGroup component={component} block={block} className={className}>
+        {typeof prefix !== 'undefined' && (
+          <InputGroupAddon className={prefixClassName}>
+            {prefix}
+          </InputGroupAddon>
+        )}
+        <input className={inputClassName} {...remainingProps} />
+        {typeof suffix !== 'undefined' && (
+          <InputGroupAddon className={suffixClassName}>
+            {suffix}
+          </InputGroupAddon>
+        )}
+      </InputGroup>
+    );
+  }
+}
+
+export default InputWithPrefixSuffix;

src/ts/index.ts

@@ -24,6 +24,9 @@ export { default as InputGroup } from './components/forms/input-group';
 export {
   default as InputGroupAddon,
 } from './components/forms/input-group-addon';
+export {
+  default as InputWithPrefixSuffix,
+} from './components/precomposed/input-with-prefix-suffix';
 export { default as Modal } from './components/modals/modal';
 export { default as ModalBody } from './components/modals/modal-body';
 export {

styleguide.config.js

@@ -48,7 +48,11 @@ var components = [
   {
     name: 'Misc',
     components: 'src/ts/components/*.tsx'
-  }
+  },
+  {
+    name: 'Precomposed',
+    components: 'src/ts/components/precomposed/*.tsx'
+  },
 ];
 
 var less = [

tests/__snapshots__/input-with-prefix-suffix.tsx.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputWithPrefixSuffix should add the "block" class name if this prop is true 1`] = `
+<div
+  className="input-group block"
+>
+  <div
+    className="input-group-addon"
+    style={
+      Object {
+        "width": undefined,
+      }
+    }
+  >
+    £
+  </div>
+  <input
+    className={undefined}
+  />
+  <div
+    className="input-group-addon"
+    style={
+      Object {
+        "width": undefined,
+      }
+    }
+  >
+    %
+  </div>
+</div>
+`;
+
+exports[`InputWithPrefixSuffix should apply class names to appropriate elements 1`] = `
+<div
+  className="input-group group"
+>
+  <div
+    className="input-group-addon prefix"
+    style={
+      Object {
+        "width": undefined,
+      }
+    }
+  >
+    £
+  </div>
+  <input
+    className="input"
+  />
+  <div
+    className="input-group-addon suffix"
+    style={
+      Object {
+        "width": undefined,
+      }
+    }
+  >
+    %
+  </div>
+</div>
+`;
+
+exports[`InputWithPrefixSuffix should match snapshot 1`] = `
+<div
+  className="input-group"
+>
+  <input
+    className={undefined}
+  />
+</div>
+`;
+
+exports[`InputWithPrefixSuffix should pass props to the input 1`] = `
+<div
+  className="input-group"
+>
+  <div
+    className="input-group-addon"
+    style={
+      Object {
+        "width": undefined,
+      }
+    }
+  >
+    £
+  </div>
+  <input
+    className={undefined}
+    value="Value"
+  />
+  <div
+    className="input-group-addon"
+    style={
+      Object {
+        "width": undefined,
+      }
+    }
+  >
+    %
+  </div>
+</div>
+`;

tests/input-with-prefix-suffix.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { InputWithPrefixSuffix } from '../src/ts/components/precomposed/input-with-prefix-suffix';
+
+describe('InputWithPrefixSuffix', () => {
+  it('should match snapshot', () => {
+    const tree = renderer.create(<InputWithPrefixSuffix />);
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should apply class names to appropriate elements', () => {
+    const tree = renderer.create(
+      <InputWithPrefixSuffix
+        prefix="£"
+        suffix="%"
+        className="group"
+        inputClassName="input"
+        prefixClassName="prefix"
+        suffixClassName="suffix"
+      />
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should add the "block" class name if this prop is true', () => {
+    const tree = renderer.create(
+      <InputWithPrefixSuffix prefix="£" suffix="%" block />
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should pass props to the input', () => {
+    const tree = renderer.create(
+      <InputWithPrefixSuffix prefix="£" suffix="%" value="Value" />
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+});