From 5a69d1dcfb0ae36d6a1aa9761d1882923048aa0d Mon Sep 17 00:00:00 2001
From: arturbien <artur.bien@gmail.com>
Date: Mon, 25 Jul 2022 21:04:05 +0200
Subject: [PATCH] refactor(getsize): create 'getSize' util

---
 src/Avatar/Avatar.js      | 14 +++-----------
 src/Bar/Bar.spec.tsx      |  2 +-
 src/Bar/Bar.tsx           | 34 ++++++++++++++--------------------
 src/Divider/Divider.tsx   |  8 +++-----
 src/Slider/Slider.js      |  7 +++----
 src/common/utils/index.ts |  4 ++++
 6 files changed, 28 insertions(+), 41 deletions(-)

diff --git a/src/Avatar/Avatar.js b/src/Avatar/Avatar.js
index e57071e9..8a68da18 100644
--- a/src/Avatar/Avatar.js
+++ b/src/Avatar/Avatar.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import propTypes from 'prop-types';
 import styled from 'styled-components';
+import { getSize } from '../common/utils';
 
 const StyledAvatar = styled.div`
   display: inline-block;
@@ -41,22 +42,13 @@ const SlyledAvatarIMG = styled.img`
 `;
 
 const Avatar = React.forwardRef(function Avatar(props, ref) {
-  const {
-    alt,
-    children,
-    noBorder,
-    size: sizeProp,
-    square,
-    src,
-    ...otherProps
-  } = props;
+  const { alt, children, noBorder, size, square, src, ...otherProps } = props;
 
-  const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp;
   return (
     <StyledAvatar
       noBorder={noBorder}
       ref={ref}
-      size={size}
+      size={getSize(size)}
       square={square}
       {...otherProps}
     >
diff --git a/src/Bar/Bar.spec.tsx b/src/Bar/Bar.spec.tsx
index aacf574a..a8964a4b 100644
--- a/src/Bar/Bar.spec.tsx
+++ b/src/Bar/Bar.spec.tsx
@@ -1,6 +1,6 @@
 import { renderWithTheme } from '../../test/utils';
 
-import Bar from './Bar';
+import { Bar } from './Bar';
 
 describe('<Bar />', () => {
   it('should render bar', () => {
diff --git a/src/Bar/Bar.tsx b/src/Bar/Bar.tsx
index 6b4db196..1adb0c32 100644
--- a/src/Bar/Bar.tsx
+++ b/src/Bar/Bar.tsx
@@ -1,33 +1,27 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { CommonStyledProps } from '../types';
+import { getSize } from '../common/utils';
 
 type BarProps = {
   size?: string | number;
 } & React.HTMLAttributes<HTMLDivElement> &
   CommonStyledProps;
 
-const StyledBar = styled.div<BarProps & { size?: string }>`
+// TODO: add horizontal variant
+// TODO: allow user to specify number of bars (like 3 horizontal bars for drag handle)
+const Bar = styled.div<BarProps>`
+  ${({ theme, size = '100%' }) => `
   display: inline-block;
   box-sizing: border-box;
-  height: ${({ size }) => size};
+  height: ${getSize(size)};
   width: 5px;
-  border-top: 2px solid ${({ theme }) => theme.borderLightest};
-  border-left: 2px solid ${({ theme }) => theme.borderLightest};
-  border-bottom: 2px solid ${({ theme }) => theme.borderDark};
-  border-right: 2px solid ${({ theme }) => theme.borderDark};
-  background: ${({ theme }) => theme.material};
+  border-top: 2px solid ${theme.borderLightest};
+  border-left: 2px solid ${theme.borderLightest};
+  border-bottom: 2px solid ${theme.borderDark};
+  border-right: 2px solid ${theme.borderDark};
+  background: ${theme.material};
+`}
 `;
 
-// TODO: add horizontal variant
-// TODO: allow user to specify number of bars (like 3 horizontal bars for drag handle)
-const Bar = forwardRef<HTMLDivElement, BarProps>(function Bar(
-  { size: sizeProp = '100%', ...otherProps },
-  ref
-) {
-  const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp;
-
-  return <StyledBar size={size} ref={ref} {...otherProps} />;
-});
-
-export default Bar;
+export { Bar, BarProps };
diff --git a/src/Divider/Divider.tsx b/src/Divider/Divider.tsx
index 7e3fd922..788a8213 100644
--- a/src/Divider/Divider.tsx
+++ b/src/Divider/Divider.tsx
@@ -1,13 +1,11 @@
 import styled from 'styled-components';
+import { getSize } from '../common/utils';
 import { Orientation } from '../types';
 
-function getSize(value: string | number) {
-  return typeof value === 'number' ? `${value}px` : value;
-}
-interface DividerProps {
+type DividerProps = {
   size?: string | number;
   orientation?: Orientation;
-}
+};
 const Divider = styled.div<DividerProps>`
   ${({ orientation, theme, size = '100%' }) =>
     orientation === 'vertical'
diff --git a/src/Slider/Slider.js b/src/Slider/Slider.js
index 59ae75c6..6b4db6a0 100644
--- a/src/Slider/Slider.js
+++ b/src/Slider/Slider.js
@@ -10,7 +10,7 @@ import {
   createDisabledTextStyles,
   createHatchedBackground
 } from '../common';
-import { clamp, roundValueToStep } from '../common/utils';
+import { clamp, getSize, roundValueToStep } from '../common/utils';
 import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
 import useForkRef from '../common/hooks/useForkRef';
 import { useIsFocusVisible } from '../common/hooks/useIsFocusVisible';
@@ -242,7 +242,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     step,
     min,
     max,
-    size: sizeProp,
+    size,
     marks: marksProp,
     onChange,
     onChangeCommitted,
@@ -475,13 +475,12 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     };
   }, [handleTouchEnd, handleTouchMove, handleTouchStart]);
 
-  const size = typeof sizeProp === 'number' ? `${sizeProp}px` : sizeProp;
 
   return (
     <Wrapper
       isDisabled={disabled}
       vertical={vertical}
-      size={size}
+      size={getSize(size)}
       onMouseDown={handleMouseDown}
       ref={handleRef}
       isFocused={focusVisible}
diff --git a/src/common/utils/index.ts b/src/common/utils/index.ts
index 7b8b6d6c..2a3dd702 100644
--- a/src/common/utils/index.ts
+++ b/src/common/utils/index.ts
@@ -103,3 +103,7 @@ export function roundValueToStep(value: number, step: number, min: number) {
   const nearest = Math.round((value - min) / step) * step + min;
   return Number(nearest.toFixed(getDecimalPrecision(step)));
 }
+
+export function getSize(value: string | number) {
+  return typeof value === 'number' ? `${value}px` : value;
+}