groundfloor-react-ui 1.0.3 → 1.0.6

package/components/Inputs/TimeInput.js

@@ -3,134 +3,150 @@ import PropTypes from 'prop-types';
 import styled, { css, useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
-
 const TextBox = styled.div`
-    color: #A9B1B8;
-    font-size: 21px;
-    border: 1px solid ${({ theme, isValid }) => isValid ? defaultThemeColor.border : theme.variant['error']};
-    border-radius: 4px;
-    padding: 5px;
-    display: inline-block;
-	align-items: center;
-    
-    &:focus-within {
-		border: 1px solid ${({ theme }) => theme.variant['primary-1']};
-        outline: none;
-    }
+  color: #a9b1b8;
+  font-size: 21px;
+  border: 1px solid
+    ${({ theme, isValid }) =>
+        isValid ? defaultThemeColor.border : theme.variant['error']};
+  border-radius: 4px;
+  padding: 5px;
+  display: inline-block;
+  align-items: center;
+  background-color: ${({ theme }) => theme.bgColor};
+  &:focus-within {
+    border: 1px solid ${({ theme }) => theme.variant['primary-1']};
+    outline: none;
+  }
 `;
 
 TextBox.defaultProps = {
     theme: defaultThemeColor,
-}
+};
 
 const Input = styled.input`
-	border: 0;
-	outline: 0;
-	color: ${({ theme }) => theme.variant['primary-2']};
-	margin: 0 5px;
-	padding: 0;
-    font-size: 21px;
-    width: 24px;
+  border: 0;
+  outline: 0;
+  color: ${({ theme }) => theme.variant['primary-2']};
+  margin: 0 5px;
+  padding: 0;
+  font-size: 21px;
+  width: 24px;
+  background-color: ${({ theme }) => theme.bgColor};
 `;
 
 Input.defaultProps = {
     theme: defaultThemeColor,
-}
+};
 
 const requiredAsterisk = css`
-	&:after {
-		content:" *";
-		color: ${({ theme }) => theme.variant['error']};
-	}
-`
+  &:after {
+    content: ' *';
+    color: ${({ theme }) => theme.variant['error']};
+  }
+`;
 
 const Label = styled.label`
-	display: block;
-	margin-bottom: ${({ labelInline, errMsg }) => (labelInline && errMsg) ? '18px' : '7px'};
-	margin-right: ${({ labelInline }) => labelInline ? '7px' : ''};
-    color: ${({ theme }) => theme.variant['neutral-2']};
-	${({ required }) => required ? requiredAsterisk : null}
+  display: block;
+  margin-bottom: ${({ labelInline, errMsg }) =>
+        labelInline && errMsg ? '18px' : '7px'};
+  margin-right: ${({ labelInline }) => (labelInline ? '7px' : '')};
+  color: ${({ theme }) => theme.variant['neutral-2']};
+  ${({ required }) => (required ? requiredAsterisk : null)}
+  padding-bottom: 0px;
 `;
 
 Label.defaultProps = {
     theme: defaultThemeColor,
-}
+};
 
 const inline = css`
-	display: flex;
-	align-items: center;
-`
+  display: flex;
+  align-items: center;
+`;
 
 const Form = styled.div`
-	${({ labelInline }) => labelInline ? inline : null}
-	.err-text {
-		color: ${({ theme }) => theme.variant['error']};
-		margin-top: 5px;
-		font-size: 10px;
-	}
-
-	> div {
-		flex: 1 0 auto;
-	}
-`
+  ${({ labelInline }) => (labelInline ? inline : null)}
+  .err-text {
+    color: ${({ theme }) => theme.variant['error']};
+    margin-top: 5px;
+    font-size: 10px;
+  }
+
+  > div {
+    flex: 1 0 auto;
+  }
+`;
 
 Form.defaultProps = {
     theme: defaultThemeColor,
-}
+};
 
 const Button = styled.button`
-    border: none;
-    outline: none;
-    border-radius: 4px;
-    background-color: #F2F4FE;
-    color: #444;
-    padding: 5px 6px;
-    font-size: 18px;
-    cursor: pointer;
+  border: none;
+  outline: none;
+  border-radius: 4px;
+  background-color: ${({ theme }) => theme.bgColor};
+  color: #444;
+  padding: 5px 6px;
+  font-size: 18px;
+  cursor: pointer;
 `;
 
 Button.defaultProps = {
     theme: defaultThemeColor,
-}
-
-export const TimeInput = ({ label, errMsg, hour, minute, period, onChange, ...props }) => {
+};
+
+export const TimeInput = ({
+    label,
+    errMsg,
+    hour,
+    minute,
+    period,
+    onChange,
+    ...props
+}) => {
     const theme = useTheme() || defaultThemeColor;
 
     function hourChange(evt) {
-        const num = evt.currentTarget.value > 12 ? 12 : parseFloat(evt.currentTarget.value) || 0;
+        const num =
+            evt.currentTarget.value > 12
+                ? 12
+                : parseFloat(evt.currentTarget.value) || 0;
         onChange({ hour: num, minute, period });
     }
 
     function minuteChange(evt) {
         console.log('minute change', evt.currentTarget.value);
-        const num = evt.currentTarget.value > 59 ? 59 : parseFloat(evt.currentTarget.value) || 0;
+        const num =
+            evt.currentTarget.value > 59
+                ? 59
+                : parseFloat(evt.currentTarget.value) || 0;
         onChange({ hour, minute: num, period });
     }
 
     function periodChange(evt) {
-        const p = period === 'AM' ? 'PM' : 'AM'
+        const p = period === 'AM' ? 'PM' : 'AM';
         onChange({ hour, minute, period: p });
     }
 
     return (
         <Form {...props}>
-            <Label {...props} errMsg={errMsg} >
+            <Label {...props} errMsg={errMsg}>
                 {label}
             </Label>
             <div>
-                <TextBox
-                    {...props}
-                >
+                <TextBox {...props}>
                     <Input value={hour} onChange={hourChange} />
                     :
                     <Input value={minute} onChange={minuteChange} />
-                    <Button onClick={periodChange} >{period}</Button>
+                    <Button onClick={periodChange}>{period}</Button>
                 </TextBox>
                 <div className='err-text'>{errMsg}</div>
             </div>
         </Form>
-    )
-}
+    );
+};
 
 TimeInput.propTypes = {
     /**
@@ -165,7 +181,7 @@ TimeInput.propTypes = {
      *	Error Message
      */
     errMsg: PropTypes.string,
-}
+};
 
 TimeInput.defaultProps = {
     label: '',
@@ -176,5 +192,4 @@ TimeInput.defaultProps = {
     labelInline: false,
     isValid: true,
     errMsg: '',
-}
-
+};