@basic-ui/core 0.0.52 → 0.0.53

package/src/Popper/Popper.story.tsx

@@ -1,263 +1,263 @@
-import { useRef, useState, useEffect } from 'react';
-import { useSpring, animated } from 'react-spring';
-
-import { Popper } from './Popper';
-import { PopperArrow } from './PopperArrow';
-import './styles.css';
-
-export default {
-  title: 'components/Popper',
-};
-
-const noop = () => {
-  // noop function to be used on onRest, as a cleanup
-};
-
-const placements = [
-  'bottom',
-  'bottom-start',
-  'bottom-end',
-  'top',
-  'top-start',
-  'top-end',
-  'right',
-  'right-start',
-  'right-end',
-  'left',
-  'left-start',
-  'left-end',
-];
-
-const Tooltip = ({ children, open, placement, anchorEl, showArrow }) => {
-  const [visible, setVisible] = useState(open);
-  const [animationProps, set] = useSpring(() => ({
-    opacity: open ? 1 : 0,
-  }));
-
-  const onRest = () => {
-    setVisible(false);
-  };
-
-  useEffect(() => {
-    if (open) {
-      setVisible(true);
-      set({ opacity: 1, onRest: noop, delay: 0 });
-    } else {
-      set({ opacity: 0, onRest, delay: 0 });
-    }
-  }, [open, set]);
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <Popper
-      anchorEl={anchorEl}
-      placement={placement}
-      usePortal={true}
-      distance={showArrow ? 8 : 0}
-      skidding={0}
-      style={{ zIndex: 1100 }}
-    >
-      <animated.div style={animationProps}>
-        <div
-          style={{
-            backgroundColor: '#fff',
-            boxShadow: '0 0 4px 1px rgba(187,187,187,0.7)',
-            padding: 8,
-          }}
-        >
-          {children}
-        </div>
-        {showArrow && <PopperArrow color="#f00" />}
-      </animated.div>
-    </Popper>
-  );
-};
-
-const PopperExample = ({ showAll = false, showArrow = false }) => {
-  const ref = useRef<any>(null);
-  const [open, setOpen] = useState(true);
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        width: '100%',
-        minHeight: 2900,
-        backgroundColor: '#f5f5f5',
-        padding: 120,
-      }}
-    >
-      <div
-        ref={ref}
-        style={{
-          width: 350,
-          height: 350,
-          minWidth: 350,
-          minHeight: 350,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: '#c5afae',
-        }}
-        onMouseEnter={() => {
-          setOpen(true);
-        }}
-        onMouseLeave={() => {
-          setOpen(true);
-        }}
-      >
-        Cool div
-      </div>
-      {showAll ? (
-        placements.map((placement) => (
-          <Tooltip
-            anchorEl={ref}
-            key={`placement_${placement}`}
-            open={open}
-            showArrow={showArrow}
-            placement={placement}
-          >
-            {placement}
-          </Tooltip>
-        ))
-      ) : (
-        <Tooltip
-          anchorEl={ref}
-          open={open}
-          showArrow={showArrow}
-          placement="right-start"
-        >
-          right-start
-        </Tooltip>
-      )}
-    </div>
-  );
-};
-
-function Menu() {
-  const ref = useRef<any>(null);
-  return (
-    <>
-      <div
-        ref={ref}
-        style={{
-          width: 64,
-          textAlign: 'center',
-          height: 32,
-          display: 'flex',
-          backgroundColor: '#cc8888',
-        }}
-      >
-        Menu
-      </div>
-      <Tooltip anchorEl={ref} open={true} showArrow={true} placement="bottom">
-        Some slightly bigger tooltip
-      </Tooltip>
-    </>
-  );
-}
-
-const PopperFixedExample = () => {
-  return (
-    <>
-      <div
-        style={{
-          position: 'fixed',
-          left: 0,
-          maxWidth: 230,
-          right: 230,
-          top: 0,
-          bottom: 0,
-          display: 'flex',
-          backgroundColor: '#f5f5f5',
-          overflow: 'hidden',
-          justifyContent: 'flex-end',
-          zIndex: 1000,
-        }}
-      >
-        <Menu />
-      </div>
-      <div style={{ paddingLeft: 560 }}>
-        <Menu />
-      </div>
-    </>
-  );
-};
-
-const JumpingPopperExample = () => {
-  const [currentPopperIndex, setCurrentPopperIndex] = useState(0);
-  const ref1 = useRef();
-  const ref2 = useRef();
-  const ref3 = useRef();
-  const allRefs = [ref1, ref2, ref3];
-
-  useEffect(() => {
-    const handler = setInterval(() => {
-      setCurrentPopperIndex((i) => i + 1);
-    }, 1000);
-
-    return () => {
-      clearInterval(handler);
-    };
-  }, []);
-
-  const currentPopperRef = allRefs[currentPopperIndex % allRefs.length];
-
-  return (
-    <>
-      <div>
-        <button ref={ref1} style={{ margin: 25 }}>
-          Button 1
-        </button>
-        <button ref={ref2} style={{ margin: 25 }}>
-          Button 2
-        </button>
-        <button ref={ref3} style={{ margin: 25 }}>
-          Button 3
-        </button>
-      </div>
-      {currentPopperRef && (
-        <Popper anchorEl={currentPopperRef}>Hello Popper</Popper>
-      )}
-    </>
-  );
-};
-
-const RerenderingPopperExample = () => {
-  const [value, setValue] = useState('');
-  const ref = useRef<HTMLButtonElement>(null);
-  return (
-    <div style={{ margin: 100 }}>
-      <button ref={ref}>Buy now</button>
-      <Popper anchorEl={ref}>
-        <div
-          style={{
-            padding: 24,
-            boxShadow: '0px 2px 10px rgba(0,0,0,0.12)',
-            backgroundColor: 'white',
-          }}
-        >
-          <input value={value} onChange={(e) => setValue(e.target.value)} />
-        </div>
-      </Popper>
-    </div>
-  );
-};
-
-export const SinglePoint = () => <PopperExample />;
-
-export const AllPoints = () => <PopperExample showAll={true} />;
-
-export const SinglePointWithArrow = () => <PopperExample showArrow={true} />;
-
-export const AllPointsWithArrow = () => (
-  <PopperExample showAll={true} showArrow={true} />
-);
-
-export const FixedPopperAllPoints = () => <PopperFixedExample />;
-export const RerenderingPopper = () => <RerenderingPopperExample />;
-export const JumpingPopper = () => <JumpingPopperExample />;
+import { useRef, useState, useEffect } from 'react';
+import { useSpring, animated } from 'react-spring';
+
+import { Popper } from './Popper';
+import { PopperArrow } from './PopperArrow';
+import './styles.css';
+
+export default {
+  title: 'components/Popper',
+};
+
+const noop = () => {
+  // noop function to be used on onRest, as a cleanup
+};
+
+const placements = [
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'top',
+  'top-start',
+  'top-end',
+  'right',
+  'right-start',
+  'right-end',
+  'left',
+  'left-start',
+  'left-end',
+];
+
+const Tooltip = ({ children, open, placement, anchorEl, showArrow }) => {
+  const [visible, setVisible] = useState(open);
+  const [animationProps, set] = useSpring(() => ({
+    opacity: open ? 1 : 0,
+  }));
+
+  const onRest = () => {
+    setVisible(false);
+  };
+
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+      set({ opacity: 1, onRest: noop, delay: 0 });
+    } else {
+      set({ opacity: 0, onRest, delay: 0 });
+    }
+  }, [open, set]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Popper
+      anchorEl={anchorEl}
+      placement={placement}
+      usePortal={true}
+      distance={showArrow ? 8 : 0}
+      skidding={0}
+      style={{ zIndex: 1100 }}
+    >
+      <animated.div style={animationProps}>
+        <div
+          style={{
+            backgroundColor: '#fff',
+            boxShadow: '0 0 4px 1px rgba(187,187,187,0.7)',
+            padding: 8,
+          }}
+        >
+          {children}
+        </div>
+        {showArrow && <PopperArrow color="#f00" />}
+      </animated.div>
+    </Popper>
+  );
+};
+
+const PopperExample = ({ showAll = false, showArrow = false }) => {
+  const ref = useRef<any>(null);
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        minHeight: 2900,
+        backgroundColor: '#f5f5f5',
+        padding: 120,
+      }}
+    >
+      <div
+        ref={ref}
+        style={{
+          width: 350,
+          height: 350,
+          minWidth: 350,
+          minHeight: 350,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#c5afae',
+        }}
+        onMouseEnter={() => {
+          setOpen(true);
+        }}
+        onMouseLeave={() => {
+          setOpen(true);
+        }}
+      >
+        Cool div
+      </div>
+      {showAll ? (
+        placements.map((placement) => (
+          <Tooltip
+            anchorEl={ref}
+            key={`placement_${placement}`}
+            open={open}
+            showArrow={showArrow}
+            placement={placement}
+          >
+            {placement}
+          </Tooltip>
+        ))
+      ) : (
+        <Tooltip
+          anchorEl={ref}
+          open={open}
+          showArrow={showArrow}
+          placement="right-start"
+        >
+          right-start
+        </Tooltip>
+      )}
+    </div>
+  );
+};
+
+function Menu() {
+  const ref = useRef<any>(null);
+  return (
+    <>
+      <div
+        ref={ref}
+        style={{
+          width: 64,
+          textAlign: 'center',
+          height: 32,
+          display: 'flex',
+          backgroundColor: '#cc8888',
+        }}
+      >
+        Menu
+      </div>
+      <Tooltip anchorEl={ref} open={true} showArrow={true} placement="bottom">
+        Some slightly bigger tooltip
+      </Tooltip>
+    </>
+  );
+}
+
+const PopperFixedExample = () => {
+  return (
+    <>
+      <div
+        style={{
+          position: 'fixed',
+          left: 0,
+          maxWidth: 230,
+          right: 230,
+          top: 0,
+          bottom: 0,
+          display: 'flex',
+          backgroundColor: '#f5f5f5',
+          overflow: 'hidden',
+          justifyContent: 'flex-end',
+          zIndex: 1000,
+        }}
+      >
+        <Menu />
+      </div>
+      <div style={{ paddingLeft: 560 }}>
+        <Menu />
+      </div>
+    </>
+  );
+};
+
+const JumpingPopperExample = () => {
+  const [currentPopperIndex, setCurrentPopperIndex] = useState(0);
+  const ref1 = useRef();
+  const ref2 = useRef();
+  const ref3 = useRef();
+  const allRefs = [ref1, ref2, ref3];
+
+  useEffect(() => {
+    const handler = setInterval(() => {
+      setCurrentPopperIndex((i) => i + 1);
+    }, 1000);
+
+    return () => {
+      clearInterval(handler);
+    };
+  }, []);
+
+  const currentPopperRef = allRefs[currentPopperIndex % allRefs.length];
+
+  return (
+    <>
+      <div>
+        <button ref={ref1} style={{ margin: 25 }}>
+          Button 1
+        </button>
+        <button ref={ref2} style={{ margin: 25 }}>
+          Button 2
+        </button>
+        <button ref={ref3} style={{ margin: 25 }}>
+          Button 3
+        </button>
+      </div>
+      {currentPopperRef && (
+        <Popper anchorEl={currentPopperRef}>Hello Popper</Popper>
+      )}
+    </>
+  );
+};
+
+const RerenderingPopperExample = () => {
+  const [value, setValue] = useState('');
+  const ref = useRef<HTMLButtonElement>(null);
+  return (
+    <div style={{ margin: 100 }}>
+      <button ref={ref}>Buy now</button>
+      <Popper anchorEl={ref}>
+        <div
+          style={{
+            padding: 24,
+            boxShadow: '0px 2px 10px rgba(0,0,0,0.12)',
+            backgroundColor: 'white',
+          }}
+        >
+          <input value={value} onChange={(e) => setValue(e.target.value)} />
+        </div>
+      </Popper>
+    </div>
+  );
+};
+
+export const SinglePoint = () => <PopperExample />;
+
+export const AllPoints = () => <PopperExample showAll={true} />;
+
+export const SinglePointWithArrow = () => <PopperExample showArrow={true} />;
+
+export const AllPointsWithArrow = () => (
+  <PopperExample showAll={true} showArrow={true} />
+);
+
+export const FixedPopperAllPoints = () => <PopperFixedExample />;
+export const RerenderingPopper = () => <RerenderingPopperExample />;
+export const JumpingPopper = () => <JumpingPopperExample />;