add position attribute to display the NumPad in different way (top, c…

…enter, bottom), add material ui button style for keypad
gpietro · Feb 7, 2018 · 41787f4 · 41787f4
1 parent 71b4ab2
commit 41787f4
Show file tree

Hide file tree

Showing 9 changed files with 197 additions and 88 deletions.
diff --git a/README.md b/README.md
@@ -99,10 +99,11 @@ Calendar input field.
 | `onChange`           | `function`           | **required** | function called when value change and is valid.             |
 | `placeholder`        | `string`             | none         | text to display as input placeholder.                       |
 | `label`              | `string`             | none         | text to display as input label.                             |
-| `theme`              | `string` or `object` | 'blue'       | string as the name of the theme or object as custom styles. |
-| `dateFormat`         | `string`             | 'MM/DD/YYYY' | specify a different date format.                            |
+| `position`           | `string`             | `center`     | Position to the screen. `center`, `flex-start`, `flex-end   |
+| `theme`              | `string` or `object` | `blue`       | string as the name of the theme or object as custom styles. |
+| `dateFormat`         | `string`             | `MM/DD/YYYY` | specify a different date format.                            |
 | `defaultValue`       | `string` or `number` | none         | default value for the input field.                          |
-| `locale`             | `string`             | 'en'         | locale for days and months                                  |
+| `locale`             | `string`             | `en`         | locale for days and months                                  |
 | `inputButtonContent` | `object`             | none         | override input button content                               |
 | `minDate`            | `string`             | none         | min date for calendar input validation                      |
 | `maxDate`            | `string`             | none         | max date for calendar input validation                      |
@@ -157,19 +158,19 @@ const myTheme = {
 <NumPad.Number theme={myTheme}>
 ```
 
-
 ## Keyboard support
+
 `0, 1, 2, ... 9`: input number.
 
 `- and .`: input symbol.
 
-`Esc`: close keypad or calendar. 
+`Esc`: close keypad or calendar.
 
 `Enter`: submit value.
 
 ## Calendar swipe support
-On mobile is possible to switch between months by swipe.
 
+On mobile is possible to switch between months by swipe.
 
 ## Demo / Examples
 

diff --git a/lib/components/NumPad.js b/lib/components/NumPad.js
@@ -6,7 +6,7 @@ import { InputField, Wrapper } from '../elements';
 import globalCSS from '../styles/global-css';
 import styles from '../styles';
 
-injectGlobal`${globalCSS}`;
+injectGlobal`${globalCSS}`; // eslint-disable-line no-unused-expressions
 
 export default ({ element, validation, displayRule, inputButtonContent, keyValid }) => {
   class NumPad extends Component {
@@ -33,8 +33,18 @@ export default ({ element, validation, displayRule, inputButtonContent, keyValid
 
     render() {
       const { show, value } = this.state;
-      const { placeholder, label, theme, dateFormat, locale, minDate, maxDate } = this.props;
+      const {
+        placeholder,
+        label,
+        theme,
+        dateFormat,
+        locale,
+        minDate,
+        maxDate,
+        position,
+      } = this.props;
       const customTheme = typeof theme === 'object' ? theme : styles(theme);
+      customTheme.position = position;
 
       return (
         <Fragment>
@@ -55,7 +65,7 @@ export default ({ element, validation, displayRule, inputButtonContent, keyValid
           {show && (
             <Portal>
               <ThemeProvider theme={customTheme}>
-                <Wrapper inProp={show}>
+                <Wrapper>
                   {React.createElement(
                     element,
                     {
@@ -85,9 +95,10 @@ export default ({ element, validation, displayRule, inputButtonContent, keyValid
   NumPad.defaultProps = {
     children: undefined,
     placeholder: undefined,
+    position: 'flex-end',
     label: undefined,
     theme: undefined,
-    dateFormat: undefined,
+    dateFormat: 'MM/DD/YYYY',
     locale: 'en',
     value: '',
     minDate: undefined,
@@ -98,6 +109,7 @@ export default ({ element, validation, displayRule, inputButtonContent, keyValid
     onChange: PropTypes.func.isRequired,
     children: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.element)]),
     placeholder: PropTypes.string,
+    position: PropTypes.string,
     label: PropTypes.string,
     locale: PropTypes.string,
     theme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),

diff --git a/lib/elements/Calendar.js b/lib/elements/Calendar.js
@@ -73,6 +73,8 @@ const Content = styled.div`
   height: 250px;
   min-width: 300px;
   max-width: 440px;
+  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 45px, rgba(0, 0, 0, 0.22) 0px 10px 18px;
   background: ${props => props.theme.background.primary};
 `;
 

diff --git a/lib/elements/KeyPad.js b/lib/elements/KeyPad.js
@@ -10,22 +10,14 @@ import IconCancel from 'react-icons/lib/md/close';
 import Button from './KeypadButton';
 import Display from './Display';
 
-const Container = styled.div`
-  width: 100%;
-  height: 250px;
-  background-color: ${props =>
-    Color(props.theme.color.secondary)
-      .alpha(0.9)
-      .string()};
-`;
-
 const Content = styled.div`
   display: flex;
   flex-direction: column;
-  margin: auto;
-  width: 240px;
-  height: 100%;
+  width: 264px;
+  height: 250px;
   background: ${props => props.theme.background.primary};
+  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 45px, rgba(0, 0, 0, 0.22) 0px 10px 18px;
 `;
 
 const Label = styled.div`
@@ -150,39 +142,37 @@ class KeyPad extends Component {
     } = this.props;
 
     return (
-      <Container>
-        <Content>
-          <Header>
-            <CancelButton onClick={cancel}>
-              <IconCancel />
-            </CancelButton>
-            <Label>{label}</Label>
-            <ConfirmButton
-              onClick={() => confirm(this.state.input)}
-              disabled={!validation(this.state.input)}
-            >
-              {validation(this.state.input) ? <IconCheckCircle /> : <IconCheck />}
-            </ConfirmButton>
-          </Header>
-          <Display
-            value={this.state.input}
-            displayRule={displayRule}
-            dateFormat={dateFormat}
-            cancel={this.cancelLastInsert}
-          />
-          <Keys>
-            {[7, 8, 9, 4, 5, 6, 1, 2, 3, '-', 0, '.'].map(key => (
-              <Button
-                key={`button-${key}`}
-                theme={theme}
-                click={clickedKey => this.handleClick(clickedKey)}
-                value={key}
-                disabled={!keyValid(this.state.input, key, dateFormat)}
-              />
-            ))}
-          </Keys>
-        </Content>
-      </Container>
+      <Content>
+        <Header>
+          <CancelButton onClick={cancel}>
+            <IconCancel />
+          </CancelButton>
+          <Label>{label}</Label>
+          <ConfirmButton
+            onClick={() => confirm(this.state.input)}
+            disabled={!validation(this.state.input)}
+          >
+            {validation(this.state.input) ? <IconCheckCircle /> : <IconCheck />}
+          </ConfirmButton>
+        </Header>
+        <Display
+          value={this.state.input}
+          displayRule={displayRule}
+          dateFormat={dateFormat}
+          cancel={this.cancelLastInsert}
+        />
+        <Keys>
+          {[7, 8, 9, 4, 5, 6, 1, 2, 3, '-', 0, '.'].map(key => (
+            <Button
+              key={`button-${key}`}
+              theme={theme}
+              click={clickedKey => this.handleClick(clickedKey)}
+              value={key}
+              disabled={!keyValid(this.state.input, key, dateFormat)}
+            />
+          ))}
+        </Keys>
+      </Content>
     );
   }
 }

diff --git a/lib/elements/KeypadButton.js b/lib/elements/KeypadButton.js
@@ -2,6 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Color from 'color';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import FlatButton from 'material-ui/FlatButton';
 
 const Button = styled.button`
   color: ${props => props.theme.color.primary};
@@ -35,10 +38,16 @@ const Button = styled.button`
 
 Button.displayName = 'Button';
 
+const muiTheme = getMuiTheme({
+  flatButton: {
+    fontSize: '1.2em',
+  },
+});
+
 const ButtonWrapper = ({ value, click, disabled }) => (
-  <Button onClick={() => click(value)} disabled={disabled}>
-    {value}
-  </Button>
+  <MuiThemeProvider muiTheme={muiTheme}>
+    <FlatButton label={`${value}`} onClick={() => click(value)} disabled={disabled} />
+  </MuiThemeProvider>
 );
 
 ButtonWrapper.defaultProps = {

diff --git a/lib/elements/Wrapper.js b/lib/elements/Wrapper.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import Color from 'color';
 
 const BackgroundPanel = styled.div`
   position: fixed;
@@ -15,29 +16,38 @@ const BackgroundPanel = styled.div`
 
 const Container = styled.div`
   display: flex;
-  height: 100vh;
-  justify-content: flex-end;
-  flex-direction: column;
+  width: 100%;
+  height: 100%;
   font-size: 1em;
-  font-family: ${props => (props.theme.fontFamily ? props.theme.fontFamily + ',' : '')} Arial,
+  align-items: ${props => props.theme.position};
+  font-family: ${props => (props.theme.fontFamily ? `${props.theme.fontFamily},` : '')} Arial,
     sans-serif, Helvetica;
 `;
 
+const Content = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: ${props => props.theme.position};
+  height: ${props => (props.theme.position === 'center' ? '100vh' : '250px')};
+  background-color: ${props =>
+    Color(props.theme.color.secondary)
+      .alpha(0.6)
+      .string()};
+`;
+
 const Wrapper = props => (
   <BackgroundPanel>
-    <Container>{props.children}</Container>
+    <Container>
+      <Content>{props.children}</Content>
+    </Container>
   </BackgroundPanel>
 );
 
 Wrapper.displayName = 'Wrapper';
 
 Wrapper.propTypes = {
   children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
-  inProp: PropTypes.bool,
-};
-
-Wrapper.defaultProps = {
-  inProp: false,
 };
 
 export default Wrapper;