feat: calculate input right pading based on suffix width

Author: ganiirsyadi

src/@next/CurrencyInput/CurrencyInput.stories.tsx

@@ -24,5 +24,6 @@ Interactive.args = {
   onChange: (value: number) => {
     console.log('Currency on changed value: ', value);
   },
-  prefix: '$',
+  currencyCode: 'USD',
+  currencySymbol: '',
 };

src/@next/CurrencyInput/CurrencyInput.test.tsx

@@ -6,7 +6,9 @@ describe('<Currency />', () => {
   it('should call onChange with number', async () => {
     const onChange = jest.fn();
 
-    const screen = render(<CurrencyInput onChange={onChange} />);
+    const screen = render(
+      <CurrencyInput currencyCode="USD" onChange={onChange} />
+    );
     const input = screen.getByRole('textbox');
 
     fireEvent.change(input, { target: { value: 1000 } });

src/@next/CurrencyInput/CurrencyInput.tsx

@@ -8,14 +8,22 @@ export type CurrencyInputProps = Omit<
   locale?: string;
   value?: number;
   onChange?: (value: number) => void;
-  prefix?: string;
+  currencyCode: string;
+  currencySymbol?: string;
 };
 
 export const CurrencyInput = React.forwardRef<
   HTMLInputElement,
   CurrencyInputProps
 >(function CurrencyInput(
-  { locale = 'en', value = 0, onChange, prefix, ...props }: CurrencyInputProps,
+  {
+    locale = 'en',
+    value = 0,
+    onChange,
+    currencyCode,
+    currencySymbol,
+    ...props
+  }: CurrencyInputProps,
   ref
 ) {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -47,6 +55,36 @@ export const CurrencyInput = React.forwardRef<
     return Number.isNaN(cleanedValue) ? 0 : cleanedValue;
   };
 
+  const getCurrencySymbol = (
+    locale: string,
+    currencyCode: string,
+    currencySymbol?: string
+  ) => {
+    if (currencySymbol) {
+      return currencySymbol;
+    }
+
+    try {
+      const formatter = new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency: currencyCode,
+      });
+
+      const parts = formatter.formatToParts(0);
+      const returnedCurrencySymbol = parts.find(
+        part => part.type === 'currency'
+      )?.value;
+
+      return returnedCurrencySymbol;
+    } catch (e) {
+      console.warn(
+        `Currency code of ${currencyCode} is unsupported, "$" will be used`
+      );
+    }
+
+    return '$';
+  };
+
   const [formattedValue, setFormattedValue] = useState(
     formatter.format(getRawNumber(value.toString()))
   );
@@ -61,7 +99,11 @@ export const CurrencyInput = React.forwardRef<
     <Input
       ref={ref}
       type="text"
-      prefix={<div>{prefix ?? '$'}</div>}
+      prefix={
+        <div>
+          {getCurrencySymbol(localeValue, currencyCode, currencySymbol)}
+        </div>
+      }
       {...props}
       value={formattedValue === '0' ? '' : formattedValue}
       onChange={handleChange}

src/@next/Input/Input.tsx

@@ -22,6 +22,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const hasSuffix = !!suffix;
 
     const prefixRef = useRef(null);
+    const suffixRef = useRef(null);
 
     const Prefix = () =>
       hasPrefix ? (
@@ -30,10 +31,11 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     const Suffix = () =>
       hasSuffix ? (
-        <StyledSuffixContainer>{suffix}</StyledSuffixContainer>
+        <StyledSuffixContainer ref={suffixRef}>{suffix}</StyledSuffixContainer>
       ) : null;
 
     const [prefixWidth, setPrefixWidth] = React.useState(0);
+    const [suffixWidth, setSuffixWidth] = React.useState(0);
 
     useEffect(() => {
       if (hasPrefix) {
@@ -42,13 +44,22 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       }
     }, [hasPrefix, prefix]);
 
+    useEffect(() => {
+      if (hasSuffix) {
+        const suffixWidth = suffixRef.current.getBoundingClientRect().width;
+        setSuffixWidth(suffixWidth);
+      }
+    }, [hasSuffix, suffix]);
+
     return (
       <StyledContainer
         ref={ref}
         data-prefix={hasPrefix}
+        data-suffix={hasSuffix}
         data-error={error}
         data-disabled={disabled}
         prefixWidth={prefixWidth}
+        suffixWidth={suffixWidth}
       >
         <Prefix />
         <StyledInput disabled={disabled} {...props} />

src/@next/Input/InputStyle.ts

@@ -2,9 +2,14 @@ import styled from 'styled-components';
 import * as Breakpoints from '../utilities/breakpoints';
 import { Neutral, Red } from '../utilities/colors';
 import { InputProps } from './Input';
-import { space4, space8 } from '../utilities/spacing';
+import { space12, space4, space8 } from '../utilities/spacing';
 
-export const StyledContainer = styled.div<InputProps & { prefixWidth: number }>`
+interface PreffixSuffixWidthProps {
+  prefixWidth: number;
+  suffixWidth: number;
+}
+
+export const StyledContainer = styled.div<InputProps & PreffixSuffixWidthProps>`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -21,6 +26,10 @@ export const StyledContainer = styled.div<InputProps & { prefixWidth: number }>`
     padding-left: ${props => props.prefixWidth}px;
   }
 
+  &[data-suffix='true'] input {
+    padding-right: ${props => props.suffixWidth}px;
+  }
+
   &[data-error='true'] input {
     border: 1px solid ${Red.B93};
   }
@@ -50,37 +59,25 @@ export const StyledContainer = styled.div<InputProps & { prefixWidth: number }>`
 
 export const StyledPrefixContainer = styled.div`
   position: absolute;
-  padding: 0;
   left: 0;
-  line-height: 0;
   color: ${Neutral.B40};
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 0px ${space8} 0 ${space12};
 
   svg {
     height: 17px;
     width: 17px;
-    margin: 10px 14px;
-    margin-right: ${space8};
     fill: ${Neutral.B40};
   }
-
-  div {
-    color: ${Neutral.B40};
-    margin: 18px 12px;
-    margin-right: ${space4};
-  }
 `;
 
 export const StyledSuffixContainer = styled(StyledPrefixContainer)`
   left: auto;
   right: 0;
 
-  svg {
-    margin: 10px 14px;
-  }
-
-  div {
-    margin: 18px 12px;
-  }
+  padding: 0px ${space12} 0 ${space4};
 `;
 
 export const StyledInput = styled.input<InputProps>`

src/@next/Popover/popoverStoryHelper/SalarySelector.tsx

@@ -22,11 +22,11 @@ export const SalarySelector = ({ onFromChanged, onToChanged }: Props) => {
           IDR
         </Typography>
         <div>
-          <CurrencyInput onChange={onFromChanged} />
+          <CurrencyInput currencyCode="USD" onChange={onFromChanged} />
         </div>
         <div>-</div>
         <div>
-          <CurrencyInput onChange={onToChanged} />
+          <CurrencyInput currencyCode="USD" onChange={onToChanged} />
         </div>
       </div>
     </div>