Merge pull request #1 from AmberEngine/fix-modal

Add FormBox

src/components/FileHandler/FileHandler.scss

@@ -0,0 +1,3 @@
+.fileInput {
+  display: none;
+}

src/components/FileHandler/index.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+
+import stylesheet from './FileHandler.scss';
+
+export const EnhanceWithFileInput = (OriginalComponent) =>
+  class extends Component {
+    static defaultProps = {
+      accept: '.json',
+    }
+
+    onClick = () => {
+      this.fileInput.click();
+    };
+
+    onImportFile = e => {
+      const { onChange, onBlur } = this.props;
+
+      onChange(e.target.files[0]);
+    };
+
+    render() {
+      const { accept, ...restProps } = this.props;
+      return (
+        <span>
+          <OriginalComponent onClick={this.onClick} {...restProps} />
+          <input
+            type="file"
+            className={stylesheet.fileInput}
+            onChange={this.onImportFile}
+            ref={node => { this.fileInput = node; }}
+            accept={accept}
+          />
+        </span>
+      );
+    }
+  };

src/components/FormBox/FormBox.scss

@@ -0,0 +1,63 @@
+@import "../../styles/variables";
+
+.exportContainer {
+  text-align: center;
+}
+
+.buttonContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.box {
+  width: 32%;
+  border: 1px solid $gray;
+  box-sizing: border-box;
+  padding: 2rem;
+  margin-right: 2%;
+  position: relative;
+
+  .mainAction {
+    font-weight: bold;
+  }
+
+  span {
+    color: $tangerine;
+    cursor: pointer;
+  }
+}
+
+.productJSON {
+  margin-right: 0;
+}
+
+.formWrapper {
+  input.isHidden {
+    display: none;
+  }
+}
+
+.filename {
+  cursor: default;
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  background: white;
+  border: 1px solid $blackberry;
+  color: $blackberry;
+  font-size: 0.6rem;
+  padding: 0.1rem 0.8rem 0.1rem 0;
+  border-radius: 0.3rem;
+
+  &:hover, span, span:hover {
+    background: white;
+    color: $blackberry;
+  }
+}
+
+.x {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0.6rem;
+}

src/components/FormBox/FormBoxLabel.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { EnhanceWithFileInput } from '../FileHandler';
+
+import stylesheet from './FormBox.scss';
+
+export default EnhanceWithFileInput(({ label, ...props }) => {
+  return (
+    <span
+      className={stylesheet.mainAction}
+      role="presentation"
+      {...props}
+    >
+      {label}
+    </span>
+  );
+});

src/components/FormBox/index.js

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import omit from 'lodash/omit';
+
+import { enhanceWithFormHandlers } from '../Form/Enhancers';
+
+import RoundRectangle from '../RoundRectangle'
+import FormBoxLabel from './FormBoxLabel';
+
+import stylesheet from './FormBox.scss';
+
+class FormBox extends Component {
+  onClickValue = (e) => {
+    const { template, clearTemplateValue, onChange, onBlur } = this.props;
+    if (template) {
+      clearTemplateValue();
+    } else {
+      // Clear the actual value.
+      onChange(null);
+    }
+  }
+
+  getCurrentFileContent(value, template) {
+    const displayValue = template || (value && value.name);
+    return displayValue && (
+      <RoundRectangle
+        type="filledX"
+        className={stylesheet.filename}
+        onClick={this.onClickValue}
+      >
+        {displayValue}
+        <div className={stylesheet.x}>x</div>
+      </RoundRectangle>
+    );
+  }
+
+  getTemplatePickerContent = (toggleTemplateSelectModal) => {
+    return toggleTemplateSelectModal && (
+      <div>
+        <br />
+        or&nbsp;
+        <span
+          onClick={toggleTemplateSelectModal}
+          role="presentation"
+        >
+          choose an existing file
+        </span>
+      </div>
+    );
+  }
+
+  render() {
+    const {
+      value,
+      template,
+      toggleTemplateSelectModal,
+      clearTemplateValue,
+      ...changeHandlerProps
+    } = this.props;
+
+    return (
+      <div className={stylesheet.box}>
+        {this.getCurrentFileContent(value, template)}
+        <FormBoxLabel
+          value={value}
+          {...changeHandlerProps}
+        />
+        {this.getTemplatePickerContent(toggleTemplateSelectModal)}
+      </div>
+    );
+  }
+}
+
+export const FormBoxField = enhanceWithFormHandlers(FormBox);

src/components/Modal/index.js

@@ -42,9 +42,13 @@ export default function({
       contentLabel={label}
       className={{
         base: stylesheet.modalContainer,
+        afterOpen: stylesheet.modalContainer,
+        beforeClose: stylesheet.modalContainer
       }}
       overlayClassName={{
         base: stylesheet.overlayContainer,
+        afterOpen: stylesheet.overlayContainer,
+        beforeClose: stylesheet.overlayContainer
       }}
     >
       {labelContent}

src/components/index.js

@@ -2,6 +2,7 @@ export * as Accordion from './Accordion';
 export Button from './Button';
 export Dropdown from './Dropdown';
 export * as Form from './Form';
+export * as FormBox from './FormBox';
 export FormFields from './FormFields';
 export Icon from './Icon';
 export IconButton from './IconButton';

stories/components/form-stories.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 
 import { Form, FormGroup, Fields, Submit, Validation } from '../../src/components/Form';
+import { FormBoxField } from '../../src/components/FormBox'
 const { required, equalTo } = Validation;
 
 const onFormSubmit = data => console.log('submitted!', data);
@@ -36,6 +37,21 @@ storiesOf('Form', module)
       </Form>
     );
   })
+  .add('renders formboxfield', () => {
+    return (
+      <Form onSubmit={onFormSubmit}>
+        <FormBoxField
+          name="template"
+          label="label"
+        />
+        <Submit
+          type="submit"
+        >
+          EXPORT
+        </Submit>
+      </Form>
+    );
+  })
   .add('renders dropdown', () => {
     return (
       <Form onSubmit={onFormSubmit}>