@nextui-org/react 1.0.1-alpha.7 → 1.0.2-alpha.2

package/esm/utils/drip.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledDrip = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _stitches = require("../theme/stitches.config");
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  visible: false,
+  x: 0,
+  y: 0,
+  className: ''
+};
+const expand = (0, _stitches.keyframes)({
+  '0%': {
+    opacity: 0,
+    transform: 'scale(0.25)'
+  },
+  '30%': {
+    opacity: 1
+  },
+  '80%': {
+    opacity: 0.5
+  },
+  '100%': {
+    transform: 'scale(28)',
+    opacity: 0
+  }
+});
+const StyledDrip = (0, _stitches.styled)('div', {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  '& svg': {
+    position: 'absolute',
+    animation: `350ms linear ${expand}`,
+    animationFillMode: 'forwards',
+    width: '$md',
+    height: '$md'
+  }
+});
+exports.StyledDrip = StyledDrip;
+
+const Drip = ({
+  visible,
+  x,
+  y,
+  color,
+  onCompleted,
+  className,
+  ...props
+}) => {
+  const dripRef = (0, _react.useRef)(null);
+  const top = Number.isNaN(+y) ? 0 : y - 10;
+  const left = Number.isNaN(+x) ? 0 : x - 10;
+  (0, _react.useEffect)(() => {
+    if (!dripRef.current) return;
+    dripRef.current.addEventListener('animationend', onCompleted);
+    return () => {
+      if (!dripRef.current) return;
+      dripRef.current.removeEventListener('animationend', onCompleted);
+    };
+  });
+  if (!visible) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDrip, {
+    ref: dripRef,
+    className: (0, _clsx.default)('nextui-drip', className),
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      style: {
+        top,
+        left
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        stroke: "none",
+        strokeWidth: "1",
+        fill: "none",
+        fillRule: "evenodd",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+          className: "nextui-drip-filler",
+          fill: color,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+            width: "100%",
+            height: "100%",
+            rx: "10"
+          })
+        })
+      })
+    })
+  });
+};
+
+const MemoDrip = /*#__PURE__*/_react.default.memo(Drip);
+
+var _default = (0, _withDefaults.default)(MemoDrip, defaultProps);
+
+exports.default = _default;

package/esm/utils/expand.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CSS } from '../theme/stitches.config';
+interface Props {
+    isExpanded?: boolean;
+    animated?: boolean;
+    delay?: number;
+    css?: CSS;
+}
+declare const defaultProps: {
+    isExpanded: boolean;
+    animated: boolean;
+    delay: number;
+};
+export declare type ExpandProps = Props & typeof defaultProps;
+declare const _default: React.ComponentType<Partial<{
+    isExpanded: boolean;
+    animated: boolean;
+    delay: number;
+}> & Omit<React.PropsWithChildren<ExpandProps>, "animated" | "isExpanded" | "delay">>;
+export default _default;

package/esm/utils/expand.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _stitches = require("../theme/stitches.config");
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _useRealShape = _interopRequireDefault(require("../use-real-shape"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  isExpanded: false,
+  animated: true,
+  delay: 200
+};
+const StyledExpand = (0, _stitches.styled)('div', {
+  p: 0,
+  m: 0,
+  h: 0,
+  opacity: 0,
+  overflow: 'hidden',
+  variants: {
+    expanded: {
+      true: {
+        opacity: 1
+      }
+    }
+  }
+});
+
+const Expand = ({
+  isExpanded,
+  delay,
+  animated,
+  css,
+  children
+}) => {
+  const [height, setHeight] = (0, _react.useState)(isExpanded ? 'auto' : '0');
+  const [selfExpanded, setSelfExpanded] = (0, _react.useState)(isExpanded);
+  const contentRef = (0, _react.useRef)(null);
+  const entryTimer = (0, _react.useRef)();
+  const leaveTimer = (0, _react.useRef)();
+  const resetTimer = (0, _react.useRef)();
+  const [state, updateShape] = (0, _useRealShape.default)(contentRef);
+  (0, _react.useEffect)(() => setHeight(`${state.height}px`), [state.height]);
+  (0, _react.useEffect)(() => {
+    if (isExpanded === selfExpanded) return; // show element or reset height.
+    // force an update once manually, even if the element does not change.
+    // (the height of the element might be "auto")
+
+    if (!isExpanded) {
+      updateShape();
+      setHeight(`${state.height}px`);
+    } // show expand animation
+
+
+    entryTimer.current = window.setTimeout(() => {
+      setSelfExpanded(isExpanded);
+      clearTimeout(entryTimer.current);
+    }, 30); // Reset height after animation
+
+    if (isExpanded) {
+      resetTimer.current = window.setTimeout(() => {
+        setHeight('auto');
+        clearTimeout(resetTimer.current);
+      }, delay);
+    } else {
+      leaveTimer.current = window.setTimeout(() => {
+        clearTimeout(leaveTimer.current);
+      }, delay / 2);
+    }
+
+    return () => {
+      clearTimeout(entryTimer.current);
+      clearTimeout(leaveTimer.current);
+      clearTimeout(resetTimer.current);
+    };
+  }, [isExpanded]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledExpand, {
+    expanded: selfExpanded,
+    css: {
+      height: selfExpanded ? height : '0',
+      transition: animated ? `height ${delay}ms ease 0ms,
+    opacity ${delay * 1.5}ms ease 0ms;` : 'none',
+      ...css
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: contentRef,
+      className: "nextui-expand-content",
+      children: children
+    })
+  });
+};
+
+var _default = (0, _withDefaults.default)(Expand, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;