[docs][Switch][FormControlLabel] Add Typescript example and refactor …

…a little bit
mui · Aug 10, 2019 · 6b9c8e5 · 6b9c8e5
1 parent 31d5bb4
commit 6b9c8e5
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 12 deletions.
diff --git a/docs/src/pages/components/switches/FormControlLabelPosition.js b/docs/src/pages/components/switches/FormControlLabelPosition.js
@@ -3,19 +3,11 @@ import Switch from '@material-ui/core/Switch';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import FormControl from '@material-ui/core/FormControl';
-import FormLabel from '@material-ui/core/FormLabel';
-
-function FormControlLabelPosition() {
-  const [value, setValue] = React.useState('female');
-
-  function handleChange(event) {
-    setValue(event.target.value);
-  }
 
+export default function FormControlLabelPosition() {
   return (
     <FormControl component="fieldset">
-      <FormLabel component="legend">labelPlacement</FormLabel>
-      <FormGroup aria-label="position" name="position" value={value} onChange={handleChange} row>
+      <FormGroup aria-label="position" row>
         <FormControlLabel
           value="top"
           control={<Switch color="primary" />}
@@ -44,5 +36,3 @@ function FormControlLabelPosition() {
     </FormControl>
   );
 }
-
-export default FormControlLabelPosition;
diff --git a/docs/src/pages/components/switches/FormControlLabelPosition.tsx b/docs/src/pages/components/switches/FormControlLabelPosition.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import Switch from '@material-ui/core/Switch';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+
+export default function FormControlLabelPosition() {
+  return (
+    <FormControl component="fieldset">
+      <FormGroup aria-label="position" row>
+        <FormControlLabel
+          value="top"
+          control={<Switch color="primary" />}
+          label="Top"
+          labelPlacement="top"
+        />
+        <FormControlLabel
+          value="start"
+          control={<Switch color="primary" />}
+          label="Start"
+          labelPlacement="start"
+        />
+        <FormControlLabel
+          value="bottom"
+          control={<Switch color="primary" />}
+          label="Bottom"
+          labelPlacement="bottom"
+        />
+        <FormControlLabel
+          value="end"
+          control={<Switch color="primary" />}
+          label="End"
+          labelPlacement="end"
+        />
+      </FormGroup>
+    </FormControl>
+  );
+}