yusmar
/
tbg-ecomm-nextjs
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
2 Revize
1 Větev
204 MiB
 
 
Strom: 657abc4c68
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „657abc4c68“
${ noResults }
tbg-ecomm-nextjs/pages-sections/Components-Sections/SectionBasics.js

614 řádky
21 KiB
Surový Blame Historie 

  1. import React from "react";

  2. // plugin that creates slider

  3. import Slider from "nouislider";

  4. // @material-ui/core components

  5. import { makeStyles } from "@material-ui/core/styles";

  6. import InputAdornment from "@material-ui/core/InputAdornment";

  7. import FormControlLabel from "@material-ui/core/FormControlLabel";

  8. import Checkbox from "@material-ui/core/Checkbox";

  9. import Radio from "@material-ui/core/Radio";

  10. import Switch from "@material-ui/core/Switch";

  11. // @material-ui/icons

  12. import Favorite from "@material-ui/icons/Favorite";

  13. import People from "@material-ui/icons/People";

  14. import Check from "@material-ui/icons/Check";

  15. import FiberManualRecord from "@material-ui/icons/FiberManualRecord";

  16. // core components

  17. import GridContainer from "components/Grid/GridContainer.js";

  18. import GridItem from "components/Grid/GridItem.js";

  19. import Button from "components/CustomButtons/Button.js";

  20. import CustomInput from "components/CustomInput/CustomInput.js";

  21. import CustomLinearProgress from "components/CustomLinearProgress/CustomLinearProgress.js";

  22. import Paginations from "components/Pagination/Pagination.js";

  23. import Badge from "components/Badge/Badge.js";

  24. 

  25. import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/basicsStyle.js";

  26. 

  27. const useStyles = makeStyles(styles);

  28. 

  29. export default function SectionBasics() {

  30.   const classes = useStyles();

  31.   const [checked, setChecked] = React.useState([24, 22]);

  32.   const [selectedEnabled, setSelectedEnabled] = React.useState("b");

  33.   const [checkedA, setCheckedA] = React.useState(true);

  34.   const [checkedB, setCheckedB] = React.useState(false);

  35.   React.useEffect(() => {

  36.     if (

  37.       !document

  38.         .getElementById("sliderRegular")

  39.         .classList.contains("noUi-target")

  40.     ) {

  41.       Slider.create(document.getElementById("sliderRegular"), {

  42.         start: [40],

  43.         connect: [true, false],

  44.         step: 1,

  45.         range: { min: 0, max: 100 }

  46.       });

  47.     }

  48.     if (

  49.       !document.getElementById("sliderDouble").classList.contains("noUi-target")

  50.     ) {

  51.       Slider.create(document.getElementById("sliderDouble"), {

  52.         start: [20, 60],

  53.         connect: [false, true, false],

  54.         step: 1,

  55.         range: { min: 0, max: 100 }

  56.       });

  57.     }

  58.     return function cleanup() {};

  59.   });

  60.   const handleToggle = value => {

  61.     const currentIndex = checked.indexOf(value);

  62.     const newChecked = [...checked];

  63. 

  64.     if (currentIndex === -1) {

  65.       newChecked.push(value);

  66.     } else {

  67.       newChecked.splice(currentIndex, 1);

  68.     }

  69.     setChecked(newChecked);

  70.   };

  71.   return (

  72.     <div className={classes.sections}>

  73.       <div className={classes.container}>

  74.         <div className={classes.title}>

  75.           <h2>Basic Elements</h2>

  76.         </div>

  77.         <div id="buttons">

  78.           <div className={classes.title}>

  79.             <h3>

  80.               Buttons

  81.               <br />

  82.               <small>Pick your style</small>

  83.             </h3>

  84.           </div>

  85.           <GridContainer justify="center">

  86.             <GridItem xs={12} sm={12} md={8}>

  87.               <Button color="primary">Default</Button>

  88.               <Button color="primary" round>

  89.                 round

  90.               </Button>

  91.               <Button color="primary" round>

  92.                 <Favorite className={classes.icons} /> with icon

  93.               </Button>

  94.               <Button justIcon round color="primary">

  95.                 <Favorite className={classes.icons} />

  96.               </Button>

  97.               <Button color="primary" simple>

  98.                 simple

  99.               </Button>

  100.             </GridItem>

  101.           </GridContainer>

  102.           <div className={classes.title}>

  103.             <h3>

  104.               <small>Pick your size</small>

  105.             </h3>

  106.           </div>

  107.           <GridContainer justify="center">

  108.             <GridItem xs={12} sm={12} md={8}>

  109.               <Button color="primary" size="sm">

  110.                 Small

  111.               </Button>

  112.               <Button color="primary">Regular</Button>

  113.               <Button color="primary" size="lg">

  114.                 Large

  115.               </Button>

  116.             </GridItem>

  117.           </GridContainer>

  118.           <div className={classes.title}>

  119.             <h3>

  120.               <small>Pick your color</small>

  121.             </h3>

  122.           </div>

  123.           <GridContainer justify="center">

  124.             <GridItem xs={12} sm={12} md={8}>

  125.               <Button>Default</Button>

  126.               <Button color="primary">Primary</Button>

  127.               <Button color="info">Info</Button>

  128.               <Button color="success">Success</Button>

  129.               <Button color="warning">Warning</Button>

  130.               <Button color="danger">Danger</Button>

  131.               <Button color="rose">Rose</Button>

  132.             </GridItem>

  133.           </GridContainer>

  134.         </div>

  135.         <div className={classes.space50} />

  136.         <div id="inputs">

  137.           <div className={classes.title}>

  138.             <h3>Inputs</h3>

  139.           </div>

  140.           <GridContainer>

  141.             <GridItem xs={12} sm={4} md={4} lg={3}>

  142.               <CustomInput

  143.                 id="regular"

  144.                 inputProps={{

  145.                   placeholder: "Regular"

  146.                 }}

  147.                 formControlProps={{

  148.                   fullWidth: true

  149.                 }}

  150.               />

  151.             </GridItem>

  152.             <GridItem xs={12} sm={4} md={4} lg={3}>

  153.               <CustomInput

  154.                 labelText="With floating label"

  155.                 id="float"

  156.                 formControlProps={{

  157.                   fullWidth: true

  158.                 }}

  159.               />

  160.             </GridItem>

  161.             <GridItem xs={12} sm={4} md={4} lg={3}>

  162.               <CustomInput

  163.                 labelText="Success input"

  164.                 id="success"

  165.                 success

  166.                 formControlProps={{

  167.                   fullWidth: true

  168.                 }}

  169.               />

  170.             </GridItem>

  171.             <GridItem xs={12} sm={4} md={4} lg={3}>

  172.               <CustomInput

  173.                 labelText="Error input"

  174.                 id="error"

  175.                 error

  176.                 formControlProps={{

  177.                   fullWidth: true

  178.                 }}

  179.               />

  180.             </GridItem>

  181.             <GridItem xs={12} sm={4} md={4} lg={3}>

  182.               <CustomInput

  183.                 labelText="With material Icons"

  184.                 id="material"

  185.                 formControlProps={{

  186.                   fullWidth: true

  187.                 }}

  188.                 inputProps={{

  189.                   endAdornment: (

  190.                     <InputAdornment position="end">

  191.                       <People />

  192.                     </InputAdornment>

  193.                   )

  194.                 }}

  195.               />

  196.             </GridItem>

  197.             <GridItem xs={12} sm={4} md={4} lg={3}>

  198.               <CustomInput

  199.                 labelText="With Font Awesome Icons"

  200.                 id="font-awesome"

  201.                 formControlProps={{

  202.                   fullWidth: true

  203.                 }}

  204.                 inputProps={{

  205.                   endAdornment: (

  206.                     <InputAdornment position="end">

  207.                       <i className="fas fa-users" />

  208.                     </InputAdornment>

  209.                   )

  210.                 }}

  211.               />

  212.             </GridItem>

  213.           </GridContainer>

  214.         </div>

  215.         <div className={classes.space70} />

  216.         <div id="checkRadios">

  217.           <GridContainer>

  218.             <GridItem xs={12} sm={6} md={4} lg={3}>

  219.               <div className={classes.title}>

  220.                 <h3>Checkboxes</h3>

  221.               </div>

  222.               <div

  223.                 className={

  224.                   classes.checkboxAndRadio +

  225.                   " " +

  226.                   classes.checkboxAndRadioHorizontal

  227.                 }

  228.               >

  229.                 <FormControlLabel

  230.                   control={

  231.                     <Checkbox

  232.                       tabIndex={-1}

  233.                       onClick={() => handleToggle(21)}

  234.                       checkedIcon={<Check className={classes.checkedIcon} />}

  235.                       icon={<Check className={classes.uncheckedIcon} />}

  236.                       classes={{

  237.                         checked: classes.checked,

  238.                         root: classes.checkRoot

  239.                       }}

  240.                     />

  241.                   }

  242.                   classes={{ label: classes.label, root: classes.labelRoot }}

  243.                   label="Unchecked"

  244.                 />

  245.               </div>

  246.               <div

  247.                 className={

  248.                   classes.checkboxAndRadio +

  249.                   " " +

  250.                   classes.checkboxAndRadioHorizontal

  251.                 }

  252.               >

  253.                 <FormControlLabel

  254.                   control={

  255.                     <Checkbox

  256.                       tabIndex={-1}

  257.                       onClick={() => handleToggle(22)}

  258.                       checked={checked.indexOf(22) !== -1 ? true : false}

  259.                       checkedIcon={<Check className={classes.checkedIcon} />}

  260.                       icon={<Check className={classes.uncheckedIcon} />}

  261.                       classes={{

  262.                         checked: classes.checked,

  263.                         root: classes.checkRoot

  264.                       }}

  265.                     />

  266.                   }

  267.                   classes={{ label: classes.label, root: classes.labelRoot }}

  268.                   label="Checked"

  269.                 />

  270.               </div>

  271.               <div

  272.                 className={

  273.                   classes.checkboxAndRadio +

  274.                   " " +

  275.                   classes.checkboxAndRadioHorizontal

  276.                 }

  277.               >

  278.                 <FormControlLabel

  279.                   disabled

  280.                   control={

  281.                     <Checkbox

  282.                       tabIndex={-1}

  283.                       checkedIcon={<Check className={classes.checkedIcon} />}

  284.                       icon={<Check className={classes.uncheckedIcon} />}

  285.                       classes={{

  286.                         checked: classes.checked,

  287.                         root: classes.checkRoot

  288.                       }}

  289.                     />

  290.                   }

  291.                   classes={{

  292.                     label: classes.label,

  293.                     disabled: classes.disabledCheckboxAndRadio,

  294.                     root: classes.labelRoot

  295.                   }}

  296.                   label="Disabled Unchecked"

  297.                 />

  298.               </div>

  299.               <div

  300.                 className={

  301.                   classes.checkboxAndRadio +

  302.                   " " +

  303.                   classes.checkboxAndRadioHorizontal

  304.                 }

  305.               >

  306.                 <FormControlLabel

  307.                   disabled

  308.                   control={

  309.                     <Checkbox

  310.                       tabIndex={-1}

  311.                       checked={checked.indexOf(24) !== -1 ? true : false}

  312.                       checkedIcon={<Check className={classes.checkedIcon} />}

  313.                       icon={<Check className={classes.uncheckedIcon} />}

  314.                       classes={{

  315.                         checked: classes.checked,

  316.                         root: classes.checkRoot

  317.                       }}

  318.                     />

  319.                   }

  320.                   classes={{

  321.                     label: classes.label,

  322.                     disabled: classes.disabledCheckboxAndRadio,

  323.                     root: classes.labelRoot

  324.                   }}

  325.                   label="Disabled Checked"

  326.                 />

  327.               </div>

  328.             </GridItem>

  329.             <GridItem xs={12} sm={6} md={4} lg={3}>

  330.               <div className={classes.title}>

  331.                 <h3>Radio Buttons</h3>

  332.               </div>

  333.               <div

  334.                 className={

  335.                   classes.checkboxAndRadio +

  336.                   " " +

  337.                   classes.checkboxAndRadioHorizontal

  338.                 }

  339.               >

  340.                 <FormControlLabel

  341.                   control={

  342.                     <Radio

  343.                       checked={selectedEnabled === "a"}

  344.                       onChange={() => setSelectedEnabled("a")}

  345.                       value="a"

  346.                       name="radio button enabled"

  347.                       aria-label="A"

  348.                       icon={

  349.                         <FiberManualRecord className={classes.radioUnchecked} />

  350.                       }

  351.                       checkedIcon={

  352.                         <FiberManualRecord className={classes.radioChecked} />

  353.                       }

  354.                       classes={{

  355.                         checked: classes.radio,

  356.                         root: classes.radioRoot

  357.                       }}

  358.                     />

  359.                   }

  360.                   classes={{

  361.                     label: classes.label,

  362.                     root: classes.labelRoot

  363.                   }}

  364.                   label="First Radio"

  365.                 />

  366.               </div>

  367.               <div

  368.                 className={

  369.                   classes.checkboxAndRadio +

  370.                   " " +

  371.                   classes.checkboxAndRadioHorizontal

  372.                 }

  373.               >

  374.                 <FormControlLabel

  375.                   control={

  376.                     <Radio

  377.                       checked={selectedEnabled === "b"}

  378.                       onChange={() => setSelectedEnabled("b")}

  379.                       value="b"

  380.                       name="radio button enabled"

  381.                       aria-label="B"

  382.                       icon={

  383.                         <FiberManualRecord className={classes.radioUnchecked} />

  384.                       }

  385.                       checkedIcon={

  386.                         <FiberManualRecord className={classes.radioChecked} />

  387.                       }

  388.                       classes={{

  389.                         checked: classes.radio,

  390.                         root: classes.radioRoot

  391.                       }}

  392.                     />

  393.                   }

  394.                   classes={{

  395.                     label: classes.label,

  396.                     root: classes.labelRoot

  397.                   }}

  398.                   label="Second Radio"

  399.                 />

  400.               </div>

  401.               <div

  402.                 className={

  403.                   classes.checkboxAndRadio +

  404.                   " " +

  405.                   classes.checkboxAndRadioHorizontal

  406.                 }

  407.               >

  408.                 <FormControlLabel

  409.                   disabled

  410.                   control={

  411.                     <Radio

  412.                       checked={false}

  413.                       value="a"

  414.                       name="radio button disabled"

  415.                       aria-label="B"

  416.                       icon={

  417.                         <FiberManualRecord className={classes.radioUnchecked} />

  418.                       }

  419.                       checkedIcon={

  420.                         <FiberManualRecord className={classes.radioChecked} />

  421.                       }

  422.                       classes={{

  423.                         checked: classes.radio,

  424.                         disabled: classes.disabledCheckboxAndRadio,

  425.                         root: classes.radioRoot

  426.                       }}

  427.                     />

  428.                   }

  429.                   classes={{

  430.                     label: classes.label,

  431.                     root: classes.labelRoot

  432.                   }}

  433.                   label="Disabled Unchecked Radio"

  434.                 />

  435.               </div>

  436.               <div

  437.                 className={

  438.                   classes.checkboxAndRadio +

  439.                   " " +

  440.                   classes.checkboxAndRadioHorizontal

  441.                 }

  442.               >

  443.                 <FormControlLabel

  444.                   disabled

  445.                   control={

  446.                     <Radio

  447.                       checked={true}

  448.                       value="b"

  449.                       name="radio button disabled"

  450.                       aria-label="B"

  451.                       icon={

  452.                         <FiberManualRecord className={classes.radioUnchecked} />

  453.                       }

  454.                       checkedIcon={

  455.                         <FiberManualRecord className={classes.radioChecked} />

  456.                       }

  457.                       classes={{

  458.                         checked: classes.radio,

  459.                         disabled: classes.disabledCheckboxAndRadio,

  460.                         root: classes.radioRoot

  461.                       }}

  462.                     />

  463.                   }

  464.                   classes={{ label: classes.label, root: classes.labelRoot }}

  465.                   label="Disabled Checked Radio"

  466.                 />

  467.               </div>

  468.             </GridItem>

  469.             <GridItem xs={12} sm={6} md={4} lg={3}>

  470.               <div className={classes.title}>

  471.                 <h3>Toggle Buttons</h3>

  472.               </div>

  473.               <div>

  474.                 <FormControlLabel

  475.                   control={

  476.                     <Switch

  477.                       checked={checkedA}

  478.                       onChange={event => setCheckedA(event.target.checked)}

  479.                       value="checkedA"

  480.                       classes={{

  481.                         switchBase: classes.switchBase,

  482.                         checked: classes.switchChecked,

  483.                         thumb: classes.switchIcon,

  484.                         track: classes.switchBar

  485.                       }}

  486.                     />

  487.                   }

  488.                   classes={{

  489.                     label: classes.label

  490.                   }}

  491.                   label="Toggle is on"

  492.                 />

  493.               </div>

  494.               <div>

  495.                 <FormControlLabel

  496.                   control={

  497.                     <Switch

  498.                       checked={checkedB}

  499.                       onChange={event => setCheckedB(event.target.checked)}

  500.                       value="checkedB"

  501.                       classes={{

  502.                         switchBase: classes.switchBase,

  503.                         checked: classes.switchChecked,

  504.                         thumb: classes.switchIcon,

  505.                         track: classes.switchBar

  506.                       }}

  507.                     />

  508.                   }

  509.                   classes={{

  510.                     label: classes.label

  511.                   }}

  512.                   label="Toggle is off"

  513.                 />

  514.               </div>

  515.             </GridItem>

  516.           </GridContainer>

  517.         </div>

  518.         <div className={classes.space70} />

  519.         <div id="progress">

  520.           <GridContainer>

  521.             <GridItem xs={12} sm={12} md={6}>

  522.               <div className={classes.title}>

  523.                 <h3>Progress Bars</h3>

  524.               </div>

  525.               <CustomLinearProgress

  526.                 variant="determinate"

  527.                 color="primary"

  528.                 value={30}

  529.               />

  530.               <CustomLinearProgress

  531.                 variant="determinate"

  532.                 color="info"

  533.                 value={60}

  534.               />

  535.               <CustomLinearProgress

  536.                 variant="determinate"

  537.                 color="success"

  538.                 value={100}

  539.                 style={{ width: "35%", display: "inline-block" }}

  540.               />

  541.               <CustomLinearProgress

  542.                 variant="determinate"

  543.                 color="warning"

  544.                 value={100}

  545.                 style={{ width: "20%", display: "inline-block" }}

  546.               />

  547.               <CustomLinearProgress

  548.                 variant="determinate"

  549.                 color="danger"

  550.                 value={25}

  551.                 style={{ width: "45%", display: "inline-block" }}

  552.               />

  553.             </GridItem>

  554.             <GridItem xs={12} sm={12} md={6}>

  555.               <div className={classes.title}>

  556.                 <h3>Pagination</h3>

  557.               </div>

  558.               <Paginations

  559.                 pages={[

  560.                   { text: 1 },

  561.                   { text: "..." },

  562.                   { text: 5 },

  563.                   { text: 6 },

  564.                   { active: true, text: 7 },

  565.                   { text: 8 },

  566.                   { text: 9 },

  567.                   { text: "..." },

  568.                   { text: 12 }

  569.                 ]}

  570.               />

  571.               <Paginations

  572.                 pages={[

  573.                   { text: "PREV" },

  574.                   { text: 1 },

  575.                   { text: 2 },

  576.                   { active: true, text: 3 },

  577.                   { text: 4 },

  578.                   { text: 5 },

  579.                   { text: "NEXT" }

  580.                 ]}

  581.                 color="info"

  582.               />

  583.             </GridItem>

  584.           </GridContainer>

  585.         </div>

  586.         <div id="sliders">

  587.           <GridContainer>

  588.             <GridItem xs={12} sm={12} md={6}>

  589.               <div className={classes.title}>

  590.                 <h3>Sliders</h3>

  591.               </div>

  592.               <div id="sliderRegular" className="slider-primary" />

  593.               <br />

  594.               <div id="sliderDouble" className="slider-info" />

  595.             </GridItem>

  596.             <GridItem xs={12} sm={12} md={6}>

  597.               <div className={classes.title}>

  598.                 <h3>Badges</h3>

  599.               </div>

  600.               <Badge>default</Badge>

  601.               <Badge color="primary">primary</Badge>

  602.               <Badge color="info">info</Badge>

  603.               <Badge color="success">success</Badge>

  604.               <Badge color="warning">warning</Badge>

  605.               <Badge color="danger">danger</Badge>

  606.               <Badge color="rose">rose</Badge>

  607.             </GridItem>

  608.           </GridContainer>

  609.         </div>

  610.       </div>

  611.     </div>

  612.   );

  613. }