groundfloor-react-ui 1.0.16 → 1.0.19

package/components/Inputs/TimeInput.js

@@ -8,7 +8,7 @@ const TextBox = styled.div`
   font-size: 21px;
   border: 1px solid
     ${({ theme, isValid }) =>
-        isValid ? defaultThemeColor.border : theme.variant['error']};
+    isValid ? defaultThemeColor.border : theme.variant['error']};
   border-radius: 4px;
   padding: 5px;
   display: inline-block;
@@ -21,7 +21,7 @@ const TextBox = styled.div`
 `;
 
 TextBox.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const Input = styled.input`
@@ -32,11 +32,12 @@ const Input = styled.input`
   padding: 0;
   font-size: 21px;
   width: 24px;
+  text-align:center;
   background-color: ${({ theme }) => theme.bgColor};
 `;
 
 Input.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const requiredAsterisk = css`
@@ -49,7 +50,7 @@ const requiredAsterisk = css`
 const Label = styled.label`
   display: block;
   margin-bottom: ${({ labelInline, errMsg }) =>
-        labelInline && errMsg ? '18px' : '7px'};
+    labelInline && errMsg ? '18px' : '7px'};
   margin-right: ${({ labelInline }) => (labelInline ? '7px' : '')};
   color: ${({ theme }) => theme.variant['neutral-2']};
   ${({ required }) => (required ? requiredAsterisk : null)}
@@ -57,7 +58,7 @@ const Label = styled.label`
 `;
 
 Label.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const inline = css`
@@ -79,7 +80,7 @@ const Form = styled.div`
 `;
 
 Form.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const Button = styled.button`
@@ -94,102 +95,102 @@ const Button = styled.button`
 `;
 
 Button.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 export const TimeInput = ({
-    label,
-    errMsg,
-    hour,
-    minute,
-    period,
-    onChange,
-    ...props
+  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;
-        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;
-        onChange({ hour, minute: num, period });
-    }
-
-    function periodChange(evt) {
-        const p = period === 'AM' ? 'PM' : 'AM';
-        onChange({ hour, minute, period: p });
-    }
-
-    return (
-        <Form {...props}>
-            <Label {...props} errMsg={errMsg}>
-                {label}
-            </Label>
-            <div>
-                <TextBox {...props}>
-                    <Input value={hour} onChange={hourChange} />
-                    :
-                    <Input value={minute} onChange={minuteChange} />
-                    <Button onClick={periodChange}>{period}</Button>
-                </TextBox>
-                <div className='err-text'>{errMsg}</div>
-            </div>
-        </Form>
-    );
+  const theme = useTheme() || defaultThemeColor;
+
+  function hourChange(evt) {
+    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;
+    onChange({ hour, minute: num, period });
+  }
+
+  function periodChange(evt) {
+    const p = period === 'AM' ? 'PM' : 'AM';
+    onChange({ hour, minute, period: p });
+  }
+
+  return (
+    <Form {...props}>
+      <Label {...props} errMsg={errMsg}>
+        {label}
+      </Label>
+      <div>
+        <TextBox {...props}>
+          <Input value={hour} onChange={hourChange} />
+          :
+          <Input value={minute} onChange={minuteChange} />
+          <Button onClick={periodChange}>{period}</Button>
+        </TextBox>
+        <div className='err-text'>{errMsg}</div>
+      </div>
+    </Form>
+  );
 };
 
 TimeInput.propTypes = {
-    /**
-     *	Label of Input
-     */
-    label: PropTypes.string,
-    /**
-     *	Hour value
-     */
-    hour: PropTypes.number.isRequired,
-    /**
-     *	Minute value
-     */
-    minute: PropTypes.number.isRequired,
-    /**
-     *	AM or PM ?
-     */
-    period: PropTypes.string.isRequired,
-    /**
-     *	Is the input required?
-     */
-    required: PropTypes.bool,
-    /**
-     *	Should label be inline?
-     */
-    labelInline: PropTypes.bool,
-    /**
-     *	Is the input correct?
-     */
-    isValid: PropTypes.bool,
-    /**
-     *	Error Message
-     */
-    errMsg: PropTypes.string,
+  /**
+   *	Label of Input
+   */
+  label: PropTypes.string,
+  /**
+   *	Hour value
+   */
+  hour: PropTypes.number.isRequired,
+  /**
+   *	Minute value
+   */
+  minute: PropTypes.number.isRequired,
+  /**
+   *	AM or PM ?
+   */
+  period: PropTypes.string.isRequired,
+  /**
+   *	Is the input required?
+   */
+  required: PropTypes.bool,
+  /**
+   *	Should label be inline?
+   */
+  labelInline: PropTypes.bool,
+  /**
+   *	Is the input correct?
+   */
+  isValid: PropTypes.bool,
+  /**
+   *	Error Message
+   */
+  errMsg: PropTypes.string,
 };
 
 TimeInput.defaultProps = {
-    label: '',
-    hour: 0,
-    minute: 0,
-    period: 'AM',
-    required: false,
-    labelInline: false,
-    isValid: true,
-    errMsg: '',
+  label: '',
+  hour: 0,
+  minute: 0,
+  period: 'AM',
+  required: false,
+  labelInline: false,
+  isValid: true,
+  errMsg: '',
 };

package/components/Modal/ModalComp.js

@@ -77,7 +77,12 @@ const CommonDiv = styled.div`
       padding: 2rem 3rem 0rem 3rem;
 `;
 
-Modal.setAppElement(window.next?.version ? "#__next" : '#root')
+try {
+  Modal.setAppElement('#root')
+
+} catch (error) {
+  Modal.setAppElement('#__next')
+}
 
 export const ModalComp = ({
   modalIsOpen,

package/components/constants/defaultStyle.js

@@ -401,7 +401,6 @@ const defaultStyles = {
      * Default Style of the dropZone component
      */
     'dropzone-parent': {
-        width: '100%',
         height: '86px',
         'padding-left': '8px',
         'padding-right': '8px',