run typescript format

mui · Jun 8, 2022 · 13915fe · 13915fe
1 parent dbf998b
commit 13915fe
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 1 deletion.
diff --git a/docs/data/joy/components/aspect-ratio/BasicRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/BasicRatio.tsx.preview
@@ -0,0 +1,8 @@
+<Sheet
+  variant="outlined"
+  sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
+>
+  <AspectRatio>
+    <Typography level="h2">16 : 9</Typography>
+  </AspectRatio>
+</Sheet>
diff --git a/docs/data/joy/components/aspect-ratio/CustomRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/CustomRatio.tsx.preview
@@ -0,0 +1,8 @@
+<Sheet
+  variant="outlined"
+  sx={{ width: 300, borderRadius: 'md', overflow: 'auto' }}
+>
+  <AspectRatio ratio="4/3">
+    <Typography level="h2">4 : 3</Typography>
+  </AspectRatio>
+</Sheet>
diff --git a/docs/data/joy/components/aspect-ratio/FlexRowRatio.js b/docs/data/joy/components/aspect-ratio/FlexRowRatio.js
@@ -44,7 +44,7 @@ export default function FlexRowRatio() {
         endDecorator="px"
         type="number"
         value={flexBasis}
-        onChange={(event) => setFlexBasis(event.target.value)}
+        onChange={(event) => setFlexBasis(event.target.valueAsNumber)}
         sx={{ mx: 'auto', width: '100%' }}
       />
     </Box>

diff --git a/docs/data/joy/components/aspect-ratio/MediaRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/MediaRatio.tsx.preview
@@ -0,0 +1,9 @@
+<AspectRatio objectFit="contain">
+  <img
+    src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2369"
+    alt=""
+  />
+</AspectRatio>
+<Typography level="body3" mt={2} textAlign="center">
+  An example of using <code>contain</code> value
+</Typography>
diff --git a/docs/data/joy/components/aspect-ratio/MinMaxRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/MinMaxRatio.tsx.preview
@@ -0,0 +1,6 @@
+<AspectRatio minHeight={120} maxHeight={200}>
+  <img
+    src="https://images.unsplash.com/photo-1502657877623-f66bf489d236?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2369"
+    alt=""
+  />
+</AspectRatio>
diff --git a/docs/data/joy/components/aspect-ratio/PlaceholderAspectRatio.tsx.preview b/docs/data/joy/components/aspect-ratio/PlaceholderAspectRatio.tsx.preview
@@ -0,0 +1,9 @@
+<Card variant="outlined" sx={{ width: 300 }}>
+  <AspectRatio>
+    <div>
+      <ImageIcon fontSize="xl5" sx={{ color: 'text.tertiary' }} />
+    </div>
+  </AspectRatio>
+  <Typography mt={2}>Title</Typography>
+  <Typography level="body2">Description of the card.</Typography>
+</Card>