[field] Fix FromTo showing arrow regardless of "from" value

sanity-io · Oct 6, 2020 · c1ea634 · c1ea634
1 parent 6434a6a
commit c1ea634
Showing 1 changed file with 11 additions and 17 deletions.
diff --git a/packages/@sanity/field/src/diff/components/FromTo.tsx b/packages/@sanity/field/src/diff/components/FromTo.tsx
@@ -4,35 +4,29 @@ import {FromToArrow} from './FromToArrow'
 
 import styles from './FromTo.css'
 
-export interface FromToProps {
+export type FromToProps = {
   align?: 'top' | 'center' | 'bottom'
   layout?: 'grid' | 'inline'
   from?: React.ReactNode
   to?: React.ReactNode
-}
+} & Omit<React.HTMLProps<HTMLDivElement>, 'children'>
 
-export const FromTo = forwardRef(
-  (
-    {
-      align = 'top',
-      className,
-      layout = 'inline',
-      from,
-      to,
-      ...restProps
-    }: FromToProps & Omit<React.HTMLProps<HTMLDivElement>, 'children'>,
-    ref
-  ) => {
+export const FromTo = forwardRef<HTMLDivElement, FromToProps>(
+  ({align = 'top', className, layout = 'inline', from, to, ...restProps}, ref) => {
     return (
       <div
         {...restProps}
         className={classNames(styles.root, className)}
         data-from-to-align={align}
         data-from-to-layout={layout}
-        ref={ref as any}
+        ref={ref}
       >
-        <div className={styles.column}>{from}</div>
-        <FromToArrow className={styles.arrow} />
+        {from && (
+          <>
+            <div className={styles.column}>{from}</div>
+            <FromToArrow className={styles.arrow} />
+          </>
+        )}
         <div className={styles.column}>{to}</div>
       </div>
     )