ReactPortal for input inside a Modal, Can add custom input field as c…

…hildren

lib/components/NumPad.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import { injectGlobal, ThemeProvider } from 'styled-components'
 import { InputField, Wrapper, KeyPad } from '../elements'
+import { Portal } from 'react-portal'
 import globalCSS from '../styles/global-css'
 import styles from '../styles'
 
@@ -35,29 +36,45 @@ export default ({validation, displayRule, inputButtonContent, keyValid}) => (
 
             return <div className={this.props.className}>
                 <ThemeProvider key='input-field' theme={styles(theme)}>
-                    <InputField  
-                        placeholder={placeholder}
-                        showKeyPad={this.toggleKeyPad}
-                        value={value}
-                        dateFormat={dateFormat}
-                        displayRule={displayRule}
-                        label={label}
-                        disabled={this.state.show}
-                        buttonContent={inputButtonContent} />
+                    <div>
+                    {
+                        this.props.children ? 
+                            React.Children.map( 
+                                this.props.children, (child) => 
+                                    React.cloneElement(child, { 
+                                        onClick: this.toggleKeyPad, 
+                                        value: value, 
+                                        dateFormat: dateFormat, 
+                                        displayRule: displayRule, 
+                                        disabled: this.state.show 
+                                    })) :
+                            <InputField  
+                                placeholder={placeholder}
+                                showKeyPad={this.toggleKeyPad}
+                                value={value}
+                                dateFormat={dateFormat}
+                                displayRule={displayRule}
+                                label={label}
+                                disabled={this.state.show}
+                                buttonContent={inputButtonContent} />
+                    }
+                    </div>
                 </ThemeProvider>
                 {show &&
-                    <ThemeProvider key='key-pad' theme={styles(theme)}>
-                        <Wrapper>
-                            <KeyPad                                
-                                cancel={this.toggleKeyPad}
-                                confirm={this.confirm} 
-                                displayRule={displayRule} 
-                                validation={validation}
-                                keyValid={keyValid}
-                                label={label}
-                                {...this.props} />
-                        </Wrapper>
-                    </ThemeProvider>}
+                    <Portal>
+                        <ThemeProvider key='key-pad' theme={styles(theme)}>
+                            <Wrapper>
+                                <KeyPad                                
+                                    cancel={this.toggleKeyPad}
+                                    confirm={this.confirm} 
+                                    displayRule={displayRule} 
+                                    validation={validation}
+                                    keyValid={keyValid}
+                                    label={label}
+                                    {...this.props} />
+                            </Wrapper>
+                        </ThemeProvider>
+                    </Portal>}
             </div>
         }
     }

lib/elements/KeyPad.js

@@ -45,9 +45,11 @@ const CancelButton = styled.button`
     cursor: pointer;
     border: none;
     background: transparent;
-    outline: none;
     font-size: 1.5em;
     padding: 0px 0px 2px 0px;
+    :active, :focus {
+        outline: none;
+    }
 `
 
 const ConfirmButton = CancelButton.extend`

lib/elements/KeypadButton.js

@@ -14,14 +14,16 @@ const Button = styled.button`
   font-size: 1.2em;
   font-weight: 400;
   margin: 0;
-  outline: none;
   padding: 0 12px;
   border-radius: 0;
-  &:active {
+  :active {
     transition: all 150ms linear;
     opacity: .75;    
   }
-  &:disabled {
+  :active, :focus {
+    outline: none;
+  }
+  :disabled {
     color: ${props => Color(props.theme.color.primary).alpha(0.4).string()};
     cursor: not-allowed;
   }

lib/elements/Wrapper.js

@@ -10,6 +10,7 @@ const BackgroundPanel = styled.div`
     left:0;
     width: 100%;
     height: 100%;
+    z-index: 10000;
 `
 
 const Container = styled.div`

package.json

@@ -31,6 +31,7 @@
     "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
+    "bootstrap": "^4.0.0-beta.2",
     "chai": "^4.1.2",
     "css-loader": "^0.28.7",
     "enzyme": "^3.2.0",
@@ -46,8 +47,8 @@
     "node-sass": "^4.5.3",
     "polished": "^1.8.1",
     "prop-types": "^15.6.0",
-    "react-portal": "^4.0.0",
     "react-test-renderer": "^16.0.0",
+    "reactstrap": "^5.0.0-alpha.4",
     "sass-loader": "^6.0.6",
     "sinon": "^4.1.2",
     "sinon-sandbox": "^1.0.2",
@@ -56,13 +57,14 @@
     "webpack": "^3.7.1"
   },
   "dependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "styled-components": "^2.2.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-portal": "^4.0.0",
     "color": "2.0.0",
     "moment": "2.19.1",
     "react-addons-css-transition-group": "^15.6.2",
     "react-icons": "2.2.7",
-    "react-onclickoutside": "6.6.0"
+    "react-onclickoutside": "6.6.0",
+    "styled-components": "^2.2.1"
   }
 }

stories/index.js

@@ -2,17 +2,24 @@ import React from 'react'
 import moment from 'moment'
 import { storiesOf } from '@storybook/react'
 import styled from 'styled-components'
+import 'bootstrap/dist/css/bootstrap.css';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 
 import NumPad from '../lib'
 
 storiesOf('Components', module)
   .add('Number', () => [ 
-    <NumPad.Number 
-      key='number-1'  
-      placeholder='test'       
-      theme='orange'
-      onChange={(value) => { console.log('value', value)}} 
-      label={'Totale'} />,
+    <div>
+      <label>Ciao</label>
+      <NumPad.Number 
+        key='number-1'  
+        placeholder='test'       
+        theme='orange'
+        onChange={(value) => { console.log('value', value)}} 
+        label={'Totale'}>
+          <input placeholder="test"/>
+      </NumPad.Number>
+    </div>,
     <NumPad.PositiveNumber
       key='number-2' 
       onChange={(value) => { console.log('value', value)}} 
@@ -34,6 +41,16 @@ storiesOf('Components', module)
     <NumPad.Time key='time-2' theme='blackAndWhite' onChange={(value) => console.log('changed', value)}/>,
     <LoremIpsum key='lorem' />
   ]))
+  .add('Inside modal', () => (
+    <DemoModal>
+      <NumPad.Time 
+        key='time-1' 
+        placeholder='HH:mm'
+        label={'Sveglia'} 
+        onChange={(value) => console.log('changed', value)} />
+        <NumPad.Time key='time-2' theme='blackAndWhite' onChange={(value) => console.log('changed', value)}/>
+    </DemoModal>
+  ))
   .add('Numpad date', () => ([
     <NumPad.Date 
       key='date-1' 
@@ -74,4 +91,39 @@ const LoremIpsum = () => (
     Cras ultricies massa id pharetra venenatis. In ac efficitur nunc. Phasellus eu diam commodo sapien finibus posuere. Phasellus vel eros elit. Curabitur accumsan velit ac elit tincidunt, a efficitur mauris imperdiet. Suspendisse a scelerisque lacus. Praesent at elit quis tellus lacinia ornare. Nunc vehicula pharetra nulla a iaculis. Vestibulum eleifend accumsan vestibulum. Donec id nibh eleifend, rhoncus risus ac, vulputate erat. Quisque eleifend imperdiet tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ullamcorper, nisl sit amet venenatis lobortis, nunc nibh dictum metus, sed congue neque diam at diam. Nunc sem dui, laoreet non ante ac, consectetur pellentesque dui. Phasellus congue dignissim metus, et tempus ex blandit et.
     Aliquam elementum, leo quis gravida vehicula, justo neque porttitor tortor, eget volutpat sem lacus id lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tortor tellus, fermentum vitae volutpat vitae, placerat ut lorem. Proin malesuada varius diam quis tempus. Fusce molestie massa ut turpis facilisis, ac ornare ligula cursus. Aliquam ligula ligula, maximus eu mattis elementum, tempor vel sapien. Nullam sit amet metus vitae ante ornare pharetra a id nibh. Suspendisse consectetur libero ante, id sodales lacus varius eu. Sed vehicula vulputate auctor. Quisque varius diam dui, at sollicitudin felis fringilla in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut a consectetur ligula. Curabitur commodo maximus massa quis aliquam.
   </div>
-)
+)
+
+
+class DemoModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modal: false
+    };
+
+    this.toggle = this.toggle.bind(this);
+  }
+
+  toggle() {
+    this.setState({
+      modal: !this.state.modal
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button onClick={this.toggle}>Open modal</Button>
+        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className} backdrop={false}>
+          <ModalHeader toggle={this.toggle}>Demo Modal</ModalHeader>
+          <ModalBody>
+            {this.props.children}
+          </ModalBody>
+          <ModalFooter>
+            <Button color="secondary" onClick={this.toggle}>Close</Button>
+          </ModalFooter>
+        </Modal>
+      </div>
+    );
+  }
+}