@sheinx/hooks 3.0.0-alpha.1

package/cjs/components/use-image/use-image-gallery.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ObjectType } from '../../common/type';
+import { BaseImageGalleryProps, ImageGalleryPosition } from './use-image-gallery.type';
+declare const useImageGallery: (props: BaseImageGalleryProps) => {
+    images: import("./use-image.type").Images[];
+    current: number;
+    direction: string;
+    getMaginfyProps: <TOther extends ObjectType<any> = ObjectType<any>>(position: ImageGalleryPosition, externalProps?: TOther) => TOther & {
+        position: ImageGalleryPosition;
+        lockScroll: (status: boolean) => void;
+        maxWidth: number;
+        maxHeight: number;
+    };
+    getGalleryProps: <TOther_1 extends ObjectType<any> = ObjectType<any>>(index: number, position: ImageGalleryPosition, externalProps?: TOther_1) => TOther_1 & {
+        onClick: (event: React.MouseEvent<HTMLImageElement | HTMLDivElement>) => void;
+    };
+    getOverlayProps: <TOther_2 extends ObjectType<any> = ObjectType<any>>(externalProps?: TOther_2) => TOther_2 & {
+        onClick: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>) => void;
+    };
+    getCloseIconProps: <TOther_3 extends ObjectType<any> = ObjectType<any>>(externalProps?: TOther_3) => TOther_3 & {
+        onClick: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>) => void;
+    };
+};
+export default useImageGallery;
+//# sourceMappingURL=use-image-gallery.d.ts.map

package/cjs/components/use-image/use-image-gallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-gallery.d.ts","sourceRoot":"","sources":["use-image-gallery.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAe,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAIvF,QAAA,MAAM,eAAe,UAAW,qBAAqB;;;;kFAwHvC,oBAAoB;;6BA1GE,OAAO;;;;iFAwEhC,MAAM,YACH,oBAAoB;yBAhCtB,gBAAgB,CAAC,gBAAgB,GAAG,cAAc,CAAC;;;yBA9CnD,gBAAgB,CAAC,cAAc,GAAG,iBAAiB,CAAC;;;yBAApD,gBAAgB,CAAC,cAAc,GAAG,iBAAiB,CAAC;;CAoJ/D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/cjs/components/use-image/use-image-gallery.js

@@ -0,0 +1,168 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _utils = require("../../utils");
+var _dom = require("../../utils/dom");
+var _ = require("../..");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var scrollX = 0;
+var useImageGallery = function useImageGallery(props) {
+  var shouldScroll = false;
+  var images = props.images,
+    defaultCurrent = props.current,
+    onClose = props.onClose;
+  var _useState = (0, _react.useState)(defaultCurrent),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    current = _useState2[0],
+    setCurrent = _useState2[1];
+  var _useState3 = (0, _react.useState)('init'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    direction = _useState4[0],
+    setDirection = _useState4[1];
+  var handleClose = function handleClose(otherHandlers) {
+    return function (event) {
+      var _otherHandlers$onClic;
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+      otherHandlers === null || otherHandlers === void 0 ? void 0 : (_otherHandlers$onClic = otherHandlers.onClick) === null || _otherHandlers$onClic === void 0 ? void 0 : _otherHandlers$onClic.call(otherHandlers, event);
+    };
+  };
+  var handleLockScroll = function handleLockScroll(status) {
+    shouldScroll = status;
+  };
+  var handleClick = (0, _.usePersistFn)(function (index) {
+    if (index === undefined) return;
+    var newCurrent = current + index;
+    if (newCurrent < 0) {
+      newCurrent = 0;
+    } else if (newCurrent >= images.length) {
+      newCurrent = images.length - 1;
+    } else {
+      setDirection(index === 1 ? 'forward' : 'backward');
+    }
+    setCurrent(newCurrent);
+  });
+  var handleScroll = (0, _.usePersistFn)(function (e) {
+    if (shouldScroll) return;
+    e.preventDefault();
+    if (scrollX !== 0) return;
+    var wheel = (0, _dom.NormalizeWheel)(e);
+    scrollX += wheel.spinX;
+    if (scrollX < 0) handleClick(-1);
+    if (scrollX > 0) handleClick(1);
+    setTimeout(function () {
+      scrollX = 0;
+    }, 1000);
+  });
+
+  /**
+   *
+   * @param index 当前点击的 Image 索引
+   * @param position 当前点击的 Image 的位置，用于判断是否需要左右切换图片
+   * @param otherHandlers 由 gallery 层额外传入的事件处理函数
+   * @returns
+   */
+  var handleGalleryClick = function handleGalleryClick(index, position, otherHandlers) {
+    return function (event) {
+      var _otherHandlers$onClic2;
+      if (position !== 'center') {
+        handleClick(index);
+      }
+      otherHandlers === null || otherHandlers === void 0 ? void 0 : (_otherHandlers$onClic2 = otherHandlers.onClick) === null || _otherHandlers$onClic2 === void 0 ? void 0 : _otherHandlers$onClic2.call(otherHandlers, event);
+    };
+  };
+
+  /**
+   *
+   * @param externalProps 由 overlay 层额外传入的属性
+   * @returns 固定返回一个 onClick 事件属性，用于点击关闭图片预览
+   */
+  var getOverlayProps = function getOverlayProps() {
+    var externalProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);
+    return _objectSpread(_objectSpread({}, externalProps), {}, {
+      onClick: handleClose(externalEventHandlers)
+    });
+  };
+
+  /**
+   *
+   * @param index 当前点击的 Image 索引，并从该索引开始展示
+   * @param position 当前点击的 Image 的位置，用于判断是否需要左右切换图片
+   * @param externalProps 由 gallery 层额外传入的属性
+   * @returns 固定返回一个 onClick 事件属性，用于处理切换图片
+   */
+  var getGalleryProps = function getGalleryProps(index, position) {
+    var externalProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);
+    return _objectSpread(_objectSpread({}, externalProps), {}, {
+      onClick: handleGalleryClick(index, position, externalEventHandlers)
+    });
+  };
+
+  /**
+   *
+   * @param externalProps 由 gallery 层额外传入的属性
+   * @returns 固定返回一个 onClick 事件属性，用于点击关闭图片预览
+   */
+  var getCloseIconProps = function getCloseIconProps() {
+    var externalProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);
+    return _objectSpread(_objectSpread({}, externalProps), {}, {
+      onClick: handleClose(externalEventHandlers)
+    });
+  };
+
+  /**
+   *
+   * @param position 当前点击的 Image 的位置，用确定图片预览的位置
+   * @param externalProps 由 gallery 层额外传入的属性
+   * @returns 固定返回 position maxWidth maxHeight lockScroll 属性。lockScroll 用于控制图片预览时是否允许滚动
+   */
+  var getMaginfyProps = function getMaginfyProps(position) {
+    var externalProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return _objectSpread(_objectSpread({}, externalProps), {}, {
+      position: position,
+      lockScroll: handleLockScroll,
+      maxWidth: _utils.docSize.width - 400,
+      maxHeight: _utils.docSize.height - 250
+    });
+  };
+  (0, _react.useEffect)(function () {
+    if (direction === 'init') return;
+    setTimeout(function () {
+      setDirection('init');
+    }, 400);
+  }, [current]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener('wheel', handleScroll, {
+      passive: false
+    });
+    return function () {
+      document.removeEventListener('wheel', handleScroll, {
+        passive: false
+      });
+    };
+  }, []);
+  return {
+    images: images,
+    current: current,
+    direction: direction,
+    getMaginfyProps: getMaginfyProps,
+    getGalleryProps: getGalleryProps,
+    getOverlayProps: getOverlayProps,
+    getCloseIconProps: getCloseIconProps
+  };
+};
+var _default = useImageGallery;
+exports.default = _default;

package/cjs/components/use-image/use-image-gallery.type.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Images } from './use-image.type';
+export declare type ImageGalleryPosition = 'left' | 'center' | 'right';
+export interface BaseImageGalleryProps {
+    images: Images[];
+    current: number;
+    onClose?: (e?: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>) => void;
+}
+//# sourceMappingURL=use-image-gallery.type.d.ts.map

package/cjs/components/use-image/use-image-gallery.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-gallery.type.d.ts","sourceRoot":"","sources":["use-image-gallery.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,oBAAY,oBAAoB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC/D,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC9E"}

package/cjs/components/use-image/use-image-gallery.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/components/use-image/use-image-group.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ObjectType } from '../../common/type';
+import { BaseImageGroupProps } from './use-image-group.type';
+import { BaseImageProps } from './use-image.type';
+declare const useImageGroup: (props: BaseImageGroupProps) => {
+    getPileProps: <TOther extends ObjectType<any> = ObjectType<any>>(child: React.ReactElement<BaseImageProps>, index: number, externalProps?: TOther) => {
+        [x: string]: (event: any) => void;
+    } & TOther & {
+        style: {
+            width: string | number;
+            height: string | number;
+        };
+    };
+    getGroupItemProps: <TOther_1 extends ObjectType<any> = ObjectType<any>>(child: React.ReactElement<BaseImageProps>, index: number, externalProps?: TOther_1) => {
+        [x: string]: (event: any) => void;
+    } & TOther_1 & {
+        lazy: boolean | undefined;
+        fit: import("./use-image.type").ImageFitType | undefined;
+        width: string | number;
+        height: string | number;
+        shape: import("./use-image.type").ImageShapeType;
+        target: import("./use-image.type").ImageTargetType;
+        onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+    };
+};
+export default useImageGroup;
+//# sourceMappingURL=use-image-group.d.ts.map

package/cjs/components/use-image/use-image-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-group.d.ts","sourceRoot":"","sources":["use-image-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,UAAU,EAAe,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAU,MAAM,kBAAkB,CAAC;AAE1D,QAAA,MAAM,aAAa,UAAW,mBAAmB;4EAoEtC,MAAM,YAAY,CAAC,cAAc,CAAC,SAClC,MAAM;;;;;;;;mFA9BN,MAAM,YAAY,CAAC,cAAc,CAAC,SAClC,MAAM;;;;;;;;;yBA1BL,gBAAgB,CAAC,cAAc,CAAC;;CA8E3C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/cjs/components/use-image/use-image-group.js

@@ -0,0 +1,107 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.promise.js");
+var _react = require("react");
+var _utils = require("../../utils");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useImageGroup = function useImageGroup(props) {
+  var width = props.width,
+    height = props.height,
+    children = props.children,
+    lazy = props.lazy,
+    fit = props.fit,
+    shape = props.shape,
+    pile = props.pile,
+    target = props.target;
+  var targetSet = pile ? '_modal' : target;
+
+  /**
+   *
+   * @param otherHandlers 由 group 层额外传入的事件处理函数
+   * @param child Image 组件实例
+   * @param index Image 组件在 ImageGroup 中的索引
+   * @returns 无返回值
+   */
+  var handleClick = function handleClick(otherHandlers, child, index) {
+    return function (event) {
+      var _otherHandlers$onClic, _child$props, _child$props$onClick;
+      var _images = [];
+      var current = 0;
+      _react.Children.toArray(children).forEach(function (child, i) {
+        var Child = child;
+        if (index === i) current = _images.length;
+        var _Child$props = Child.props,
+          src = _Child$props.src,
+          href = _Child$props.href;
+        _images.push({
+          thumb: src,
+          src: href || src,
+          key: i
+        });
+      });
+
+      // 如果 ImageGroup 定义了 onClick 则需要执行，抛出组装好的图片数组 images 和当前点击的图片索引 current
+      // @ts-ignore 这里的 ts 需要优化，事件可能会传入多个参数
+      otherHandlers === null || otherHandlers === void 0 ? void 0 : (_otherHandlers$onClic = otherHandlers.onClick) === null || _otherHandlers$onClic === void 0 ? void 0 : _otherHandlers$onClic.call(otherHandlers, _images, current);
+      // 如果 children 定义了 onClick 则需要执行
+      child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : (_child$props$onClick = _child$props.onClick) === null || _child$props$onClick === void 0 ? void 0 : _child$props$onClick.call(_child$props, event);
+    };
+  };
+
+  /**
+   *
+   * @param child Image 组件实例
+   * @param index Image 组件在 ImageGroup 中的索引
+   * @param externalProps 由 group 层额外传入的属性
+   * @returns 固定返回 lazy fit width height shape target onClick 属性
+   */
+  var getGroupItemProps = function getGroupItemProps(child, index) {
+    var externalProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var externalEventHandlers = _objectSpread({}, (0, _utils.extractEventHandlers)(externalProps));
+    return _objectSpread(_objectSpread(_objectSpread({}, externalEventHandlers), externalProps), {}, {
+      lazy: lazy,
+      fit: child.props.fit || fit || undefined,
+      width: width || child.props.width || '100%',
+      height: height || child.props.height || '100%',
+      shape: shape || child.props.shape || 'rounded',
+      target: targetSet || '_modal',
+      onClick: handleClick(externalEventHandlers, child, index)
+    });
+  };
+
+  /**
+   *
+   * @param child Image 组件实例
+   * @param index Image 组件在 ImageGroup 中的索引
+   * @param externalProps 由 group 层额外传入的属性
+   * @returns 固定返回 style 属性
+   */
+  var getPileProps = function getPileProps(child, index) {
+    var externalProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var externalEventHandlers = _objectSpread({}, (0, _utils.extractEventHandlers)(externalProps));
+    var _ref = (0, _utils.parseStyleUnitValue)(width || child.props.width || '100%') || {},
+      value = _ref.value;
+    return _objectSpread(_objectSpread(_objectSpread({}, externalEventHandlers), externalProps), {}, {
+      style: {
+        width: value || '100%',
+        height: height || child.props.height || '100%'
+      }
+    });
+  };
+  return {
+    getPileProps: getPileProps,
+    getGroupItemProps: getGroupItemProps
+  };
+};
+var _default = useImageGroup;
+exports.default = _default;

package/cjs/components/use-image/use-image-group.type.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ImageTargetType, ImageFitType, ImageShapeType } from './use-image.type';
+export interface BaseImageGroupProps {
+    width?: number | string;
+    height?: number | string;
+    lazy?: boolean;
+    pile?: boolean;
+    target?: ImageTargetType;
+    children: React.ReactNode;
+    fit?: ImageFitType;
+    shape?: ImageShapeType;
+}
+//# sourceMappingURL=use-image-group.type.d.ts.map

package/cjs/components/use-image/use-image-group.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-group.type.d.ts","sourceRoot":"","sources":["use-image-group.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEjF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB"}

package/cjs/components/use-image/use-image-group.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/components/use-image/use-image-magnify.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { BaseImageMagnifyProps } from './use-image-magnify.type';
+declare const useImageMagnify: (props: BaseImageMagnifyProps) => {
+    src: string | undefined;
+    status: number;
+    maxWidth: number;
+    maxHeight: number;
+    loading: boolean;
+    getRootProps: () => {
+        ref: React.RefObject<HTMLDivElement>;
+        onLoad: () => void;
+        onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+        onMouseMove: ((e: React.MouseEvent<HTMLDivElement>) => void) | undefined;
+    };
+};
+export default useImageMagnify;
+//# sourceMappingURL=use-image-magnify.d.ts.map

package/cjs/components/use-image/use-image-magnify.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-magnify.d.ts","sourceRoot":"","sources":["use-image-magnify.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAKjE,QAAA,MAAM,eAAe,UAAW,qBAAqB;;;;;;;;;qBA4B1B,gBAAgB,CAAC,cAAc,CAAC;0BAoB7B,gBAAgB,CAAC,cAAc,CAAC;;CAmC7D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/cjs/components/use-image/use-image-magnify.js

@@ -0,0 +1,104 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+var ClientX = 0;
+var ClientY = 0;
+var useImageMagnify = function useImageMagnify(props) {
+  var maxHeight = props.maxHeight,
+    maxWidth = props.maxWidth,
+    position = props.position,
+    lockScroll = props.lockScroll,
+    src = props.src;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = (0, _react.useState)({
+      maxWidth: maxWidth,
+      maxHeight: maxHeight
+    }),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    setStyle = _useState6[1];
+  var imgRef = _react.default.useRef(null);
+  var handleMove = function handleMove(clientX, clientY) {
+    if (!imgRef.current) return;
+    var element = imgRef.current;
+    var rect = element.getBoundingClientRect();
+    var image = element.querySelector('img');
+    if (!image) return;
+    var width = rect.width - 100;
+    var height = rect.height - 100;
+    var x = (clientX - rect.left - 50) / width;
+    var y = (clientY - rect.top - 50) / height;
+    element.scrollTop = (image.offsetHeight - height) * y;
+    element.scrollLeft = (image.offsetWidth - width) * x;
+  };
+  var handleResize = function handleResize(e) {
+    if (position !== 'center') return;
+    var newStatus = status === 1 ? 0 : 1;
+    setStatus(newStatus);
+    var clientX = e.clientX,
+      clientY = e.clientY;
+    ClientY = clientY;
+    ClientX = clientX;
+    if (status === 0) return;
+    lockScroll(newStatus === 1);
+  };
+  (0, _react.useEffect)(function () {
+    if (status === 1) {
+      handleMove(ClientX, ClientY);
+    } else {
+      ClientX = 0;
+      ClientY = 0;
+    }
+  }, [status]);
+  var handleMouseMove = function handleMouseMove(e) {
+    handleMove(e.clientX, e.clientY);
+  };
+  var handleLoaded = function handleLoaded() {
+    setLoading(false);
+  };
+  var getRootProps = function getRootProps() {
+    return {
+      ref: imgRef,
+      onLoad: handleLoaded,
+      onClick: handleResize,
+      onMouseMove: status === 1 ? handleMouseMove : undefined
+    };
+  };
+  (0, _react.useEffect)(function () {
+    setLoading(true);
+    setStatus(0);
+    setStyle({
+      maxHeight: maxHeight,
+      maxWidth: maxWidth
+    });
+    lockScroll(false);
+  }, [src]);
+  return {
+    src: src,
+    status: status,
+    maxWidth: maxWidth,
+    maxHeight: maxHeight,
+    loading: loading,
+    getRootProps: getRootProps
+  };
+};
+var _default = useImageMagnify;
+exports.default = _default;

package/cjs/components/use-image/use-image-magnify.type.d.ts

@@ -0,0 +1,9 @@
+import { ImageGalleryPosition } from './use-image-gallery.type';
+export interface BaseImageMagnifyProps {
+    maxHeight: number;
+    maxWidth: number;
+    position: ImageGalleryPosition;
+    lockScroll(lock: boolean): void;
+    src?: string;
+}
+//# sourceMappingURL=use-image-magnify.type.d.ts.map

package/cjs/components/use-image/use-image-magnify.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image-magnify.type.d.ts","sourceRoot":"","sources":["use-image-magnify.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,UAAU,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd"}

package/cjs/components/use-image/use-image-magnify.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/components/use-image/use-image.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ObjectType } from '../../common/type';
+import { BaseImageProps } from './use-image.type';
+declare const useImage: (props?: BaseImageProps) => {
+    src: string | undefined;
+    alt: string | undefined;
+    href: string | undefined;
+    status: number;
+    fetchImage: () => void;
+    getRootProps: <TOther extends ObjectType<any> = ObjectType<any>>(externalProps?: TOther) => {
+        [x: string]: (event: any) => void;
+    } & TOther & {
+        ref: React.RefObject<HTMLDivElement | HTMLAnchorElement>;
+        onClick: (event: React.MouseEvent<HTMLImageElement | HTMLDivElement>) => void;
+    };
+    getImageProps: <TOther_1 extends ObjectType<any> = ObjectType<any>>(externalProps?: TOther_1) => {
+        [x: string]: (event: any) => void;
+    } & TOther_1 & {
+        alt: string | undefined;
+        draggable: boolean;
+    };
+    getImageDivProps: <TOther_2 extends ObjectType<any> = ObjectType<any>>(externalProps?: TOther_2) => {
+        [x: string]: (event: any) => void;
+    } & TOther_2;
+};
+export default useImage;
+//# sourceMappingURL=use-image.d.ts.map

package/cjs/components/use-image/use-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-image.d.ts","sourceRoot":"","sources":["use-image.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAe,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD,QAAA,MAAM,QAAQ,WAAW,cAAc;;;;;;;;;;yBAkE3B,gBAAgB,CAAC,gBAAgB,GAAG,cAAc,CAAC;;;;;;;;;;;CA2E9D,CAAC;AAEF,eAAe,QAAQ,CAAC"}