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

package/esm/grid/grid.styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledGridItem = exports.StyledGridContainer = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+const StyledGridContainer = (0, _stitches.styled)('div', {});
+exports.StyledGridContainer = StyledGridContainer;
+const StyledGridItem = (0, _stitches.styled)('div', {
+  margin: 0,
+  boxSizing: 'border-box',
+  padding: '$$gridGapUnit'
+});
+exports.StyledGridItem = StyledGridItem;

package/esm/grid/index.d.ts

@@ -0,0 +1,7 @@
+import Grid from './grid';
+export type { GridItemProps } from './grid-item';
+export type { GridProps } from './grid';
+export type { GridContainerProps } from './grid-container';
+export { StyledGridContainer, StyledGridItem } from './grid.styles';
+export type { GridContainerVariantProps, GridItemVariantProps } from './grid.styles';
+export default Grid;

package/esm/grid/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledGridItem = exports.StyledGridContainer = void 0;
+
+var _grid = _interopRequireDefault(require("./grid"));
+
+var _gridContainer = _interopRequireDefault(require("./grid-container"));
+
+var _grid2 = require("./grid.styles");
+
+exports.StyledGridContainer = _grid2.StyledGridContainer;
+exports.StyledGridItem = _grid2.StyledGridItem;
+_grid.default.Container = _gridContainer.default;
+var _default = _grid.default;
+exports.default = _default;

package/esm/image/image.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ObjectFit } from '../utils/prop-types';
+import { CSS } from '../theme/stitches.config';
+import { ImageContainerVariantProps } from './image.styles';
+interface Props {
+    src: string;
+    autoResize?: boolean;
+    showSkeleton?: boolean;
+    width?: number | string;
+    height?: number | string;
+    maxDelay?: number;
+    objectFit?: ObjectFit;
+    className?: string;
+    css?: CSS;
+    containerCss?: CSS;
+}
+declare const defaultProps: {
+    showSkeleton: boolean;
+    autoResize: boolean;
+    objectFit: "inherit" | "initial" | "revert" | "unset" | "none" | "contain" | "cover" | "fill" | "scale-down";
+    maxDelay: number;
+    className: string;
+};
+declare type NativeAttrs = Omit<React.ImgHTMLAttributes<unknown>, keyof Props>;
+export declare type ImageProps = Props & typeof defaultProps & NativeAttrs & ImageContainerVariantProps;
+declare type MemoImageComponent<P = {}> = React.NamedExoticComponent<P>;
+declare type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs;
+declare const _default: MemoImageComponent<ComponentProps>;
+export default _default;

package/esm/image/image.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _image = _interopRequireDefault(require("./image.skeleton"));
+
+var _useRealShape = _interopRequireDefault(require("../use-real-shape"));
+
+var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
+
+var _useResize = _interopRequireDefault(require("../use-resize"));
+
+var _image2 = require("./image.styles");
+
+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 = {
+  showSkeleton: true,
+  autoResize: false,
+  objectFit: 'scale-down',
+  maxDelay: 3000,
+  className: ''
+};
+
+const Image = ({
+  src,
+  width,
+  height,
+  showSkeleton: showSkeletonProp,
+  className,
+  maxDelay,
+  autoResize,
+  objectFit,
+  containerCss,
+  css,
+  ...props
+}) => {
+  const [loading, setLoading] = (0, _react.useState)(true);
+  const [showSkeleton, setShowSkeleton] = (0, _react.useState)(showSkeletonProp);
+  const {
+    w,
+    h
+  } = (0, _react.useMemo)(() => {
+    return {
+      w: width ? typeof width === 'number' ? `${width}px` : width : 'auto',
+      h: height ? typeof height === 'number' ? `${height}px` : height : 'auto'
+    };
+  }, [width, height]);
+  const [zoomHeight, setZoomHeight, zoomHeightRef] = (0, _useCurrentState.default)(h);
+  const imageRef = (0, _react.useRef)(null);
+  const [shape, updateShape] = (0, _useRealShape.default)(imageRef);
+  const showAnimation = showSkeletonProp && !!width && !!height;
+
+  const onImageLoaded = () => {
+    setLoading(false);
+  };
+
+  (0, _react.useEffect)(() => {
+    if (!showAnimation) return;
+    if (!imageRef.current) return;
+
+    if (imageRef.current.complete) {
+      setLoading(false);
+      setShowSkeleton(false);
+    }
+  });
+  (0, _react.useEffect)(() => {
+    const timer = setTimeout(() => {
+      if (showAnimation) {
+        setShowSkeleton(false);
+      }
+
+      clearTimeout(timer);
+    }, maxDelay);
+    return () => clearTimeout(timer);
+  }, [loading]);
+  /**
+   * On mobile devices, the render witdth may be less than CSS width value.
+   * If the image is scaled, set the height manually.
+   * This is to ensure the aspect ratio of the image.
+   *
+   * If the image is auto width, ignore all.
+   */
+
+  (0, _react.useEffect)(() => {
+    if (!autoResize) return;
+    const notLoaded = shape.width === 0;
+    const isAutoZoom = zoomHeightRef.current === 'auto';
+    if (notLoaded || !width || !height) return;
+
+    if (shape.width < width) {
+      !isAutoZoom && setZoomHeight('auto');
+    } else {
+      isAutoZoom && setZoomHeight(h);
+    }
+  }, [shape, width]);
+  (0, _useResize.default)(() => {
+    if (!autoResize) return;
+    updateShape();
+  });
+  const getState = (0, _react.useMemo)(() => {
+    return loading ? 'loading' : 'ready';
+  }, [loading]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_image2.StyledImageContainer, {
+    className: (0, _clsx.default)('nextui-image-container', `nextui-image--${getState}`, className),
+    "data-state": getState,
+    ready: !loading,
+    css: { ...containerCss,
+      width: w,
+      height: zoomHeight
+    },
+    children: [showSkeleton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
+      opacity: 1
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_image2.StyledImage, {
+      ref: imageRef,
+      className: "nextui-image",
+      width: width,
+      height: height,
+      onLoad: onImageLoaded,
+      src: src,
+      "data-state": getState,
+      alt: props.alt || '',
+      css: {
+        objectFit,
+        ...css
+      },
+      ...props
+    })]
+  });
+};
+
+Image.toString = () => '.nextui-image';
+
+Image.defaultProps = defaultProps;
+
+var _default = /*#__PURE__*/_react.default.memo(Image);
+
+exports.default = _default;
+module.exports = exports.default;

package/esm/image/image.skeleton.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CSS } from '../theme/stitches.config';
+import { ImageSkeletonVariantsProps } from './image.styles';
+interface Props {
+    opacity: number;
+    as?: keyof JSX.IntrinsicElements;
+    css?: CSS;
+    className?: string;
+}
+declare const defaultProps: {
+    opacity: number;
+    className: string;
+};
+export declare type ImageSkeletonProps = Props & typeof defaultProps & ImageSkeletonVariantsProps;
+declare const _default: React.ComponentType<Partial<{
+    opacity: number;
+    className: string;
+}> & Omit<ImageSkeletonProps, "opacity" | "className">>;
+export default _default;

package/esm/image/image.skeleton.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _image = require("./image.styles");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _assertion = require("../utils/assertion");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const defaultProps = {
+  opacity: 0.5,
+  className: ''
+};
+
+const ImageSkeleton = /*#__PURE__*/_react.default.memo(({
+  opacity,
+  css,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.StyledImageSkeleton, {
+    css: {
+      opacity,
+      ...css
+    },
+    className: (0, _clsx.default)('nextui-image-skeleton', className),
+    ...props
+  });
+});
+
+if (_assertion.__DEV__) {
+  ImageSkeleton.displayName = 'NextUI - ImageSkeleton';
+}
+
+ImageSkeleton.toString = () => '.nextui-image-skeleton';
+
+var _default = (0, _withDefaults.default)(ImageSkeleton, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;