build: fix circular dependency issue

luffy84217 · Feb 2, 2022 · 82ace51 · 82ace51
1 parent 101f6e0
commit 82ace51
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 28 deletions.
diff --git a/src/components/PinInput.tsx b/src/components/PinInput.tsx
@@ -4,6 +4,7 @@ import { PinInputContainer } from '../styles/PinInput';
 import { PinInputProps } from '../types/PinInput';
 import PinInputField from './PinInputField';
 import { validateToPattern } from '../utils';
+import { pinInputDefaultProps } from '../constants';
 
 const propTypes = {
   values: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -24,24 +25,6 @@ const propTypes = {
   onChange: PropTypes.func,
 };
 
-export const defaultProps: Partial<PinInputProps> = {
-  type: 'number',
-  mask: false,
-  showState: true,
-  size: 'md',
-  autoFocus: false,
-  autoTab: true,
-  borderColor: 'rgb(204,204,204)',
-  errorBorderColor: 'rgb(220,53,69)',
-  focusBorderColor: 'rgb(13,110,253)',
-  validBorderColor: 'rgb(25,135,84)',
-  containerStyle: {},
-  inputStyle: {},
-  autoComplete: 'off',
-  placeholder: 'o',
-  'aria-label': 'Please enter pin code',
-};
-
 const PinInput: React.FC<PinInputProps> = (props) => {
   const completed = useMemo(
     () => props.values.every((val) => val),
@@ -79,6 +62,6 @@ const PinInput: React.FC<PinInputProps> = (props) => {
 
 PinInput.displayName = 'PinInput';
 PinInput.propTypes = propTypes;
-PinInput.defaultProps = defaultProps;
+PinInput.defaultProps = pinInputDefaultProps;
 
 export default PinInput;
diff --git a/src/constants.ts b/src/constants.ts
@@ -0,0 +1,19 @@
+import type { PinInputProps } from './types/PinInput';
+
+export const pinInputDefaultProps: Partial<PinInputProps> = {
+  type: 'number',
+  mask: false,
+  showState: true,
+  size: 'md',
+  autoFocus: false,
+  autoTab: true,
+  borderColor: 'rgb(204,204,204)',
+  errorBorderColor: 'rgb(220,53,69)',
+  focusBorderColor: 'rgb(13,110,253)',
+  validBorderColor: 'rgb(25,135,84)',
+  containerStyle: {},
+  inputStyle: {},
+  autoComplete: 'off',
+  placeholder: 'o',
+  'aria-label': 'Please enter pin code',
+};
diff --git a/src/styles/PinInputField.ts b/src/styles/PinInputField.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { defaultProps } from '../components/PinInput';
+import { pinInputDefaultProps } from '../constants';
 import { colorParser } from '../utils';
 
 export const Input = styled.input<{
@@ -57,7 +57,9 @@ export const Input = styled.input<{
   border-color: ${({ borderColor }) => {
     const rgb = colorParser(borderColor);
 
-    return rgb ? `rgb(${rgb.r},${rgb.g},${rgb.b})` : defaultProps.borderColor;
+    return rgb
+      ? `rgb(${rgb.r},${rgb.g},${rgb.b})`
+      : pinInputDefaultProps.borderColor;
   }};
   background-color: inherit;
   box-sizing: border-box;
@@ -67,7 +69,7 @@ export const Input = styled.input<{
 
       return rgb
         ? `rgb(${rgb.r},${rgb.g},${rgb.b})`
-        : defaultProps.focusBorderColor;
+        : pinInputDefaultProps.focusBorderColor;
     }};
     box-shadow: ${({ focusBorderColor }) => focusBorderColor} 0px 0px 0px 1px;
   }
@@ -80,15 +82,19 @@ export const Input = styled.input<{
     return completed && showState
       ? `&:valid {
     border-color: ${
-      rgb ? `rgb(${rgb.r},${rgb.g},${rgb.b})` : defaultProps.validBorderColor
+      rgb
+        ? `rgb(${rgb.r},${rgb.g},${rgb.b})`
+        : pinInputDefaultProps.validBorderColor
     };
     box-shadow: ${
-      rgb ? `rgb(${rgb.r},${rgb.g},${rgb.b})` : defaultProps.validBorderColor
+      rgb
+        ? `rgb(${rgb.r},${rgb.g},${rgb.b})`
+        : pinInputDefaultProps.validBorderColor
     } 0px 0px 0px 1px;
     background-color: ${
       rgb
         ? `rgba(${rgb.r},${rgb.g},${rgb.b},0.1)`
-        : defaultProps.validBorderColor
+        : pinInputDefaultProps.validBorderColor
             .replace('rgb', 'rgba')
             .replace(')', ',0.1)')
     };
@@ -101,15 +107,19 @@ export const Input = styled.input<{
     return showState
       ? `&:invalid {
     border-color: ${
-      rgb ? `rgb(${rgb.r},${rgb.g},${rgb.b})` : defaultProps.errorBorderColor
+      rgb
+        ? `rgb(${rgb.r},${rgb.g},${rgb.b})`
+        : pinInputDefaultProps.errorBorderColor
     };
     box-shadow: ${
-      rgb ? `rgb(${rgb.r},${rgb.g},${rgb.b})` : defaultProps.errorBorderColor
+      rgb
+        ? `rgb(${rgb.r},${rgb.g},${rgb.b})`
+        : pinInputDefaultProps.errorBorderColor
     } 0px 0px 0px 1px;
     background-color: ${
       rgb
         ? `rgba(${rgb.r},${rgb.g},${rgb.b},0.1)`
-        : defaultProps.errorBorderColor
+        : pinInputDefaultProps.errorBorderColor
             .replace('rgb', 'rgba')
             .replace(')', ',0.1)')
     };