@canmingir/link 1.1.7 → 1.2.0

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

@@ -1,22 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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,
-};