feat(components): Move the sub-component in Switch outside.

To imporve its render speed.

Author: PeterlitsZo

packages/components/src/Switch.js

@@ -5,85 +5,85 @@ import { Label } from './Label'
 const GUTTER = 2
 const SIZE = 18
 
-export const Switch = React.forwardRef(function Switch(
-  { className, label, labelPosition = 'end', sx, variant = 'switch', ...props },
-  ref
-) {
-  // Inner really checkbox (but hidden).
-  const ReallyHiddenCheckbox = ({ ref, label, ...props }) => {
-    return (
-      <Box
-        ref={ref}
-        as="input"
-        type="checkbox"
-        __themeKey="forms"
-        aria-label={label}
-        {...props}
-        sx={{
-          position: 'absolute',
-          opacity: 0,
-          zIndex: -1,
-          width: 1,
-          height: 1,
-          overflow: 'hidden',
-        }}
-      />
-    );
-  };
+// Inner really checkbox (but hidden).
+const ReallyHiddenCheckbox = ({ ref, label, ...props }) => {
+  return (
+    <Box
+      ref={ref}
+      as="input"
+      type="checkbox"
+      __themeKey="forms"
+      aria-label={label}
+      {...props}
+      sx={{
+        position: 'absolute',
+        opacity: 0,
+        zIndex: -1,
+        width: 1,
+        height: 1,
+        overflow: 'hidden',
+      }}
+    />
+  )
+}
 
-  // Switch just for show
-  const SwitchForShow = ({ variant, className, sx }) => {
-    return (
-      <Box
-        css={{
-          padding: GUTTER,
-        }}
-        __themeKey="forms"
-        variant={variant}
-        className={className}
-        sx={sx}
-        __css={{
+// Switch just for show
+const SwitchForShow = ({ variant, className, sx }) => {
+  return (
+    <Box
+      css={{
+        padding: GUTTER,
+      }}
+      __themeKey="forms"
+      variant={variant}
+      className={className}
+      sx={sx}
+      __css={{
+        position: 'relative',
+        flexShrink: 0,
+        bg: 'gray',
+        borderRadius: SIZE,
+        height: SIZE + GUTTER * 2,
+        width: SIZE * 2 + GUTTER * 2,
+        'input:disabled ~ &': {
+          opacity: 0.5,
+          cursor: 'not-allowed',
+        },
+        '& > div': {
+          display: 'flex',
+          alignItems: 'center',
+          borderRadius: '50%',
+          height: SIZE,
+          width: SIZE,
+          bg: 'white',
+          boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
           position: 'relative',
-          flexShrink: 0,
-          bg: 'gray',
-          borderRadius: SIZE,
-          height: SIZE + GUTTER * 2,
-          width: SIZE * 2 + GUTTER * 2,
-          'input:disabled ~ &': {
-            opacity: 0.5,
-            cursor: 'not-allowed',
+          transform: 'translateX(0%)',
+          transition: `transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000)`,
+        },
+        'input:checked ~ &': {
+          bg: 'primary',
+          '> div': {
+            transform: 'translateX(100%)',
           },
-          '& > div': {
-            display: 'flex',
-            alignItems: 'center',
-            borderRadius: '50%',
-            height: SIZE,
-            width: SIZE,
-            bg: 'white',
-            boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
-            position: 'relative',
-            transform: 'translateX(0%)',
-            transition: `transform 240ms cubic-bezier(0.165, 0.840, 0.440, 1.000)`,
-          },
-          'input:checked ~ &': {
-            bg: 'primary',
-            '> div': {
-              transform: 'translateX(100%)',
-            },
-          },
-        }}
-      >
-        <Box />
-      </Box>
-    )
-  };
+        },
+      }}
+    >
+      <Box />
+    </Box>
+  )
+}
 
+export const Switch = React.forwardRef(function Switch(
+  { className, label, labelPosition = 'end', sx, variant = 'switch', ...props },
+  ref
+) {
   return (
     <Label sx={{ cursor: 'pointer', gap: 2 }}>
-      { labelPosition === 'start' && label ? <span>{label}</span> : null }
+      {labelPosition === 'start' && label ? <span>{label}</span> : null}
       <ReallyHiddenCheckbox ref={ref} label={label} {...props} />
       <SwitchForShow variant={variant} className={className} sx={sx} />
-      { labelPosition === 'end' && label ? <span>{label}</span> : null }
+      {labelPosition === 'end' && label ? <span>{label}</span> : null}
     </Label>
   )
 })