@canmingir/link 1.1.0

package/minimal/src/sections/_examples/extra/animate-view/background/toolbar.jsx

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+
+import Iconify from 'src/components/iconify';
+
+// ----------------------------------------------------------------------
+
+export default function Toolbar({ onRefresh, ...other }) {
+  return (
+    <Paper sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }} {...other}>
+      <IconButton onClick={onRefresh}>
+        <Iconify icon="eva:refresh-fill" />
+      </IconButton>
+    </Paper>
+  );
+}
+
+Toolbar.propTypes = {
+  onRefresh: PropTypes.func,
+};

package/minimal/src/sections/_examples/extra/animate-view/control-panel.jsx

@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import Radio from '@mui/material/Radio';
+import Paper from '@mui/material/Paper';
+import RadioGroup from '@mui/material/RadioGroup';
+import Typography from '@mui/material/Typography';
+import FormControlLabel from '@mui/material/FormControlLabel';
+
+import Scrollbar from 'src/components/scrollbar';
+
+// ----------------------------------------------------------------------
+
+export default function ControlPanel({ variantKey, selectVariant, onChangeVariant, sx }) {
+  return (
+    <Paper variant="outlined" sx={{ height: 480, ...sx }}>
+      <Scrollbar>
+        <RadioGroup value={selectVariant} onChange={onChangeVariant} sx={{ px: 1, py: 1 }}>
+          {variantKey.map((variant) => (
+            <Box key={variant.type} sx={{ my: 1.5 }}>
+              <Typography variant="overline" sx={{ px: 1, mb: 1, display: 'block' }}>
+                {variant.type}
+              </Typography>
+              {variant.values.map((value) => (
+                <FormControlLabel
+                  key={value}
+                  value={value}
+                  label={value}
+                  control={<Radio sx={{ display: 'none' }} />}
+                  sx={{
+                    px: 1,
+                    py: 0.5,
+                    mx: 0,
+                    my: 0.25,
+                    width: '100%',
+                    borderRadius: 0.75,
+                    color: 'text.secondary',
+                    ...(selectVariant === value && {
+                      color: 'warning.contrastText',
+                    }),
+                    ...(selectVariant === value && { bgcolor: 'warning.main' }),
+                  }}
+                />
+              ))}
+            </Box>
+          ))}
+        </RadioGroup>
+      </Scrollbar>
+    </Paper>
+  );
+}
+
+ControlPanel.propTypes = {
+  onChangeVariant: PropTypes.func,
+  selectVariant: PropTypes.string,
+  sx: PropTypes.object,
+  variantKey: PropTypes.array,
+};

package/minimal/src/sections/_examples/extra/animate-view/dialog/container.jsx

@@ -0,0 +1,72 @@
+import PropTypes from 'prop-types';
+import { m, AnimatePresence } from 'framer-motion';
+
+import Paper from '@mui/material/Paper';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+
+import getVariant from '../get-variant';
+
+// ----------------------------------------------------------------------
+
+export default function ContainerView({ open, onOpen, onClose, selectVariant, ...other }) {
+  return (
+    <>
+      <Paper
+        sx={{
+          height: 480,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          bgcolor: 'background.neutral',
+        }}
+        {...other}
+      >
+        <Button variant="contained" onClick={onOpen}>
+          Click Me!
+        </Button>
+      </Paper>
+
+      <AnimatePresence>
+        {open && (
+          <Dialog
+            fullWidth
+            maxWidth="xs"
+            open={open}
+            onClose={onClose}
+            PaperComponent={(props) => (
+              <m.div {...getVariant(selectVariant)}>
+                <Paper {...props}>{props.children}</Paper>
+              </m.div>
+            )}
+          >
+            <DialogTitle id="alert-dialog-title">{`Use Google's location service?`}</DialogTitle>
+
+            <DialogContent>
+              Let Google help apps determine location. This means sending anonymous location data to
+              Google, even when no apps are running.
+            </DialogContent>
+
+            <DialogActions>
+              <Button onClick={onClose}>Disagree</Button>
+              <Button variant="contained" onClick={onClose} autoFocus>
+                Agree
+              </Button>
+            </DialogActions>
+          </Dialog>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}
+
+ContainerView.propTypes = {
+  onClose: PropTypes.func,
+  onOpen: PropTypes.func,
+  open: PropTypes.bool,
+  selectVariant: PropTypes.string,
+  children: PropTypes.node,
+};

package/minimal/src/sections/_examples/extra/animate-view/dialog/index.jsx

@@ -0,0 +1,76 @@
+import { useState, useCallback } from 'react';
+
+import Card from '@mui/material/Card';
+import Grid from '@mui/material/Unstable_Grid2';
+
+import { useBoolean } from 'src/hooks/use-boolean';
+
+import ContainerView from './container';
+import ControlPanel from '../control-panel';
+
+// ----------------------------------------------------------------------
+
+export default function DialogView() {
+  const view = useBoolean();
+
+  const [selectVariant, setSelectVariant] = useState('slideInUp');
+
+  const handleChangeVariant = useCallback((event) => {
+    setSelectVariant(event.target.value);
+  }, []);
+
+  return (
+    <Card sx={{ p: 3 }}>
+      <Grid container spacing={3}>
+        <Grid xs={12} md={9}>
+          <ContainerView
+            open={view.value}
+            onOpen={view.onTrue}
+            onClose={view.onFalse}
+            selectVariant={selectVariant}
+          />
+        </Grid>
+        <Grid xs={12} md={3}>
+          <ControlPanel
+            variantKey={variantKey}
+            selectVariant={selectVariant}
+            onChangeVariant={handleChangeVariant}
+          />
+        </Grid>
+      </Grid>
+    </Card>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+const variantKey = [
+  {
+    type: 'slide',
+    values: ['slideInUp', 'slideInDown', 'slideInLeft', 'slideInRight'],
+  },
+  {
+    type: 'fade',
+    values: ['fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight'],
+  },
+  {
+    type: 'zoom',
+    values: ['zoomIn', 'zoomInUp', 'zoomInDown', 'zoomInLeft', 'zoomInRight'],
+  },
+  {
+    type: 'bounce',
+    values: ['bounceIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight'],
+  },
+  {
+    type: 'flip',
+    values: ['flipInX', 'flipInY'],
+  },
+  {
+    type: 'scale',
+    values: ['scaleInX', 'scaleInY'],
+  },
+  {
+    type: 'rotate',
+    values: ['rotateIn'],
+  },
+];

package/minimal/src/sections/_examples/extra/animate-view/get-variant.js

@@ -0,0 +1,91 @@
+import {
+  varFade,
+  varZoom,
+  varFlip,
+  varSlide,
+  varScale,
+  varBgPan,
+  varBounce,
+  varRotate,
+  varBgColor,
+  varBgKenburns,
+} from 'src/components/animate';
+
+// ----------------------------------------------------------------------
+
+export default function getVariant(variant = 'slideInUp') {
+  return {
+    // Slide
+    slideInUp: varSlide().inUp,
+    slideInDown: varSlide().inDown,
+    slideInLeft: varSlide().inLeft,
+    slideInRight: varSlide().inRight,
+    slideOutUp: varSlide().outUp,
+    slideOutDown: varSlide().outDown,
+    slideOutLeft: varSlide().outLeft,
+    slideOutRight: varSlide().outRight,
+    // Fade
+    fadeIn: varFade().in,
+    fadeInUp: varFade().inUp,
+    fadeInDown: varFade().inDown,
+    fadeInLeft: varFade().inLeft,
+    fadeInRight: varFade().inRight,
+    fadeOut: varFade().out,
+    fadeOutUp: varFade().outUp,
+    fadeOutDown: varFade().outDown,
+    fadeOutLeft: varFade().outLeft,
+    fadeOutRight: varFade().outRight,
+    // Zoom
+    zoomIn: varZoom({ distance: 80 }).in,
+    zoomInUp: varZoom({ distance: 80 }).inUp,
+    zoomInDown: varZoom({ distance: 80 }).inDown,
+    zoomInLeft: varZoom({ distance: 240 }).inLeft,
+    zoomInRight: varZoom({ distance: 240 }).inRight,
+    zoomOut: varZoom().out,
+    zoomOutLeft: varZoom().outLeft,
+    zoomOutRight: varZoom().outRight,
+    zoomOutUp: varZoom().outUp,
+    zoomOutDown: varZoom().outDown,
+    // Bounce
+    bounceIn: varBounce().in,
+    bounceInUp: varBounce().inUp,
+    bounceInDown: varBounce().inDown,
+    bounceInLeft: varBounce().inLeft,
+    bounceInRight: varBounce().inRight,
+    bounceOut: varBounce().out,
+    bounceOutUp: varBounce().outUp,
+    bounceOutDown: varBounce().outDown,
+    bounceOutLeft: varBounce().outLeft,
+    bounceOutRight: varBounce().outRight,
+    // Flip
+    flipInX: varFlip().inX,
+    flipInY: varFlip().inY,
+    flipOutX: varFlip().outX,
+    flipOutY: varFlip().outY,
+    // Scale
+    scaleInX: varScale().inX,
+    scaleInY: varScale().inY,
+    scaleOutX: varScale().outX,
+    scaleOutY: varScale().outY,
+    // Rotate
+    rotateIn: varRotate().in,
+    rotateOut: varRotate().out,
+    // Background
+    kenburnsTop: varBgKenburns().top,
+    kenburnsBottom: varBgKenburns().bottom,
+    kenburnsLeft: varBgKenburns().left,
+    kenburnsRight: varBgKenburns().right,
+    panTop: varBgPan().top,
+    panBottom: varBgPan().bottom,
+    panLeft: varBgPan().left,
+    panRight: varBgPan().right,
+    color2x: varBgColor(),
+    color3x: varBgColor({ colors: ['#19dcea', '#b22cff', '#ea2222'] }),
+    color4x: varBgColor({
+      colors: ['#19dcea', '#b22cff', '#ea2222', '#f5be10'],
+    }),
+    color5x: varBgColor({
+      colors: ['#19dcea', '#b22cff', '#ea2222', '#f5be10', '#3bd80d'],
+    }),
+  }[variant];
+}

package/minimal/src/sections/_examples/extra/animate-view/index.jsx

@@ -0,0 +1,78 @@
+import { useState, useCallback } from 'react';
+
+import Tab from '@mui/material/Tab';
+import Box from '@mui/material/Box';
+import Tabs from '@mui/material/Tabs';
+import Container from '@mui/material/Container';
+
+import { paths } from 'src/routes/paths';
+
+import CustomBreadcrumbs from 'src/components/custom-breadcrumbs';
+
+import Inview from './inview';
+import OtherView from './other';
+import ScrollView from './scroll';
+import DialogView from './dialog';
+import BackgroundView from './background';
+
+// ----------------------------------------------------------------------
+
+const TABS = [
+  { value: 'inview', label: 'In View', component: <Inview /> },
+  { value: 'scroll', label: 'Scroll', component: <ScrollView /> },
+  { value: 'dialog', label: 'Dialog', component: <DialogView /> },
+  { value: 'background', label: 'Background', component: <BackgroundView /> },
+  { value: 'other', label: 'Other', component: <OtherView /> },
+];
+
+// ----------------------------------------------------------------------
+
+export default function AnimateView() {
+  const [currentTab, setCurrentTab] = useState('inview');
+
+  const handleChangeTab = useCallback((event, newValue) => {
+    setCurrentTab(newValue);
+  }, []);
+
+  return (
+    <>
+      <Box
+        sx={{
+          py: 5,
+          bgcolor: (theme) => (theme.palette.mode === 'light' ? 'grey.200' : 'grey.800'),
+        }}
+      >
+        <Container>
+          <CustomBreadcrumbs
+            heading="Animate"
+            links={[
+              {
+                name: 'Components',
+                href: paths.components,
+              },
+              { name: 'Animate' },
+            ]}
+            moreLink={['https://www.framer.com/api/motion']}
+          />
+        </Container>
+      </Box>
+
+      <Container sx={{ my: 10 }}>
+        <Tabs value={currentTab} onChange={handleChangeTab}>
+          {TABS.map((tab) => (
+            <Tab key={tab.value} value={tab.value} label={tab.label} />
+          ))}
+        </Tabs>
+
+        {TABS.map(
+          (tab) =>
+            tab.value === currentTab && (
+              <Box key={tab.value} sx={{ mt: 5 }}>
+                {tab.component}
+              </Box>
+            )
+        )}
+      </Container>
+    </>
+  );
+}

package/minimal/src/sections/_examples/extra/animate-view/inview/container.jsx

@@ -0,0 +1,80 @@
+import { m } from 'framer-motion';
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+
+import { _mock } from 'src/_mock';
+
+import { MotionContainer } from 'src/components/animate';
+
+import getVariant from '../get-variant';
+
+// ----------------------------------------------------------------------
+
+const TEXT = 'Minimals';
+
+const IMG = [
+  _mock.image.cover(2),
+  _mock.image.cover(3),
+  _mock.image.cover(4),
+  _mock.image.cover(5),
+  _mock.image.cover(8),
+];
+
+export default function ContainerView({ isText, isMulti, selectVariant, ...other }) {
+  const items = isMulti ? IMG : IMG.slice(0, 1);
+
+  return (
+    <Paper
+      sx={{
+        p: 3,
+        minHeight: 480,
+        display: 'flex',
+        overflow: 'hidden',
+        alignItems: 'center',
+        justifyContent: 'center',
+        bgcolor: 'background.neutral',
+      }}
+      {...other}
+    >
+      {isText ? (
+        <MotionContainer
+          component={m.h1}
+          sx={{ typography: 'h1', display: 'flex', overflow: 'hidden' }}
+        >
+          {TEXT.split('').map((letter, index) => (
+            <m.span key={index} variants={getVariant(selectVariant)}>
+              {letter}
+            </m.span>
+          ))}
+        </MotionContainer>
+      ) : (
+        <MotionContainer>
+          {items.map((row, index) => (
+            <Box
+              key={index}
+              component={m.img}
+              src={row}
+              variants={getVariant(selectVariant)}
+              sx={{
+                my: 2,
+                width: 480,
+                borderRadius: 1,
+                objectFit: 'cover',
+                height: isMulti ? 72 : 320,
+                boxShadow: (theme) => theme.customShadows.z8,
+              }}
+            />
+          ))}
+        </MotionContainer>
+      )}
+    </Paper>
+  );
+}
+
+ContainerView.propTypes = {
+  isMulti: PropTypes.bool,
+  isText: PropTypes.bool,
+  selectVariant: PropTypes.string,
+};

package/minimal/src/sections/_examples/extra/animate-view/inview/index.jsx

@@ -0,0 +1,129 @@
+import { useState, useCallback } from 'react';
+
+import Card from '@mui/material/Card';
+import Grid from '@mui/material/Unstable_Grid2';
+
+import { useBoolean } from 'src/hooks/use-boolean';
+
+import Toolbar from './toolbar';
+import ContainerView from './container';
+import ControlPanel from '../control-panel';
+
+// ----------------------------------------------------------------------
+
+export default function Inview() {
+  const [count, setCount] = useState(0);
+
+  const multi = useBoolean();
+
+  const text = useBoolean();
+
+  const [selectVariant, setSelectVariant] = useState('slideInUp');
+
+  const handleRefresh = useCallback(() => {
+    setCount(count + 1);
+  }, [count]);
+
+  const handleChangeVariant = useCallback(
+    (event) => {
+      setCount(count + 1);
+      setSelectVariant(event.target.value);
+    },
+    [count]
+  );
+
+  return (
+    <Card sx={{ p: 3 }}>
+      <Grid container sx={{ mb: 3 }}>
+        <Grid xs={12} md={9}>
+          <Toolbar
+            isText={text.value}
+            isMulti={multi.value}
+            onChangeText={text.onToggle}
+            onChangeMulti={multi.onToggle}
+            onRefresh={handleRefresh}
+          />
+        </Grid>
+      </Grid>
+
+      <Grid container spacing={3}>
+        <Grid xs={12} md={9}>
+          <ContainerView
+            key={count}
+            isText={text.value}
+            isMulti={multi.value}
+            selectVariant={selectVariant}
+          />
+        </Grid>
+        <Grid xs={12} md={3}>
+          <ControlPanel
+            variantKey={variantKey}
+            selectVariant={selectVariant}
+            onChangeVariant={handleChangeVariant}
+          />
+        </Grid>
+      </Grid>
+    </Card>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+const variantKey = [
+  {
+    type: 'slide in',
+    values: ['slideInUp', 'slideInDown', 'slideInLeft', 'slideInRight'],
+  },
+  {
+    type: 'slide out',
+    values: ['slideOutUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight'],
+  },
+  {
+    type: 'fade in',
+    values: ['fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight'],
+  },
+  {
+    type: 'fade out',
+    values: ['fadeOut', 'fadeOutUp', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight'],
+  },
+  {
+    type: 'zoom in',
+    values: ['zoomIn', 'zoomInUp', 'zoomInDown', 'zoomInLeft', 'zoomInRight'],
+  },
+  {
+    type: 'zoom out',
+    values: ['zoomOut', 'zoomOutUp', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight'],
+  },
+  {
+    type: 'bounce in',
+    values: ['bounceIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight'],
+  },
+  {
+    type: 'bounce out',
+    values: ['bounceOut', 'bounceOutUp', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight'],
+  },
+  {
+    type: 'flip in',
+    values: ['flipInX', 'flipInY'],
+  },
+  {
+    type: 'flip out',
+    values: ['flipOutX', 'flipOutY'],
+  },
+  {
+    type: 'scale in',
+    values: ['scaleInX', 'scaleInY'],
+  },
+  {
+    type: 'scale out',
+    values: ['scaleOutX', 'scaleOutY'],
+  },
+  {
+    type: 'rotate in',
+    values: ['rotateIn'],
+  },
+  {
+    type: 'rotate out',
+    values: ['rotateOut'],
+  },
+];

package/minimal/src/sections/_examples/extra/animate-view/inview/toolbar.jsx

@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Switch from '@mui/material/Switch';
+import IconButton from '@mui/material/IconButton';
+import FormControlLabel from '@mui/material/FormControlLabel';
+
+import Iconify from 'src/components/iconify';
+
+// ----------------------------------------------------------------------
+
+export default function Toolbar({
+  isText,
+  isMulti,
+  onChangeText,
+  onChangeMulti,
+  onRefresh,
+  ...other
+}) {
+  return (
+    <Paper
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+      {...other}
+    >
+      <FormControlLabel
+        control={<Switch checked={isText} onChange={onChangeText} />}
+        label="Text Object"
+      />
+
+      <Box sx={{ flexGrow: 1 }} />
+
+      {!isText && (
+        <FormControlLabel
+          control={<Switch checked={isMulti} onChange={onChangeMulti} />}
+          label="Multi Item"
+        />
+      )}
+
+      <IconButton onClick={onRefresh}>
+        <Iconify icon="eva:refresh-fill" />
+      </IconButton>
+    </Paper>
+  );
+}
+
+Toolbar.propTypes = {
+  isMulti: PropTypes.bool,
+  isText: PropTypes.bool,
+  onChangeMulti: PropTypes.func,
+  onChangeText: PropTypes.func,
+  onRefresh: PropTypes.func,
+};