linkmore-design 1.0.73 → 1.0.74

package/lib/ImageViewer/components/Arrows.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+var Arrows = function Arrows(_ref) {
+  var instance = _ref.instance;
+  var slickNext = instance.slickNext,
+      slickPrev = instance.slickPrev;
+
+  var handlePreNext = function handlePreNext(e, type) {
+    e.stopPropagation();
+
+    if (type === 'next') {
+      slickNext();
+    }
+
+    if (type === 'prev') {
+      slickPrev();
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "arrow arrow_left",
+    onClick: function onClick(e) {
+      return handlePreNext(e, 'prev');
+    }
+  }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+    type: "lmweb-left"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "arrow arrow_right",
+    onClick: function onClick(e) {
+      return handlePreNext(e, 'next');
+    }
+  }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+    type: "lmweb-right"
+  })));
+};
+
+var _default = Arrows;
+exports.default = _default;

package/lib/ImageViewer/components/Carousel.d.ts

@@ -0,0 +1,4 @@
+declare const BigImg: ({ instance }: {
+    instance: any;
+}) => JSX.Element;
+export default BigImg;

package/lib/ImageViewer/components/Carousel.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+var ListItem = function ListItem(_ref) {
+  var key = _ref.key,
+      index = _ref.index,
+      item = _ref.item,
+      instance = _ref.instance;
+  var state = instance.state;
+  var transformProps = (0, _react.useMemo)(function () {
+    if (index !== state.currentIndex) return {};
+    var _state$transform = state.transform,
+        scale = _state$transform.scale,
+        rotateZ = _state$transform.rotateZ;
+    return {
+      transform: "scale(".concat(scale, ") rotateZ(").concat(rotateZ, "deg)")
+    };
+  }, [state.currentIndex, state.transform]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "preview_item",
+    key: key
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: item,
+    alt: "",
+    style: transformProps
+  }));
+};
+
+var BigImg = function BigImg(_ref2) {
+  var instance = _ref2.instance;
+  var urlList = instance.urlList,
+      previewRef = instance.previewRef,
+      infinite = instance.infinite,
+      setTransform = instance.setTransform,
+      afterChange = instance.afterChange;
+  var onWheel = (0, _react.useCallback)(function (e) {
+    // e?.preventDefault()
+    // e.stopPropagation()
+    if ((e === null || e === void 0 ? void 0 : e.deltaY) <= 0) {
+      setTransform('zoomIn');
+    } else {
+      setTransform('zoomOut');
+    }
+  }, [setTransform]);
+  var config = {
+    dots: false,
+    infinite: infinite,
+    // lazyLoad: true, // 懒加载
+    adaptiveHeight: false,
+    afterChange: afterChange // customPaging: (i) => <img src={urlList[i]} alt="" />,
+
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "preview_list",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    onWheel: onWheel
+  }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Carousel, Object.assign({
+    ref: previewRef
+  }, config), urlList.map(function (v, idx) {
+    return /*#__PURE__*/_react.default.createElement(ListItem, {
+      key: idx || v,
+      index: idx,
+      item: v,
+      instance: instance
+    });
+  })));
+};
+
+var _default = BigImg;
+exports.default = _default;

package/lib/ImageViewer/components/Operate.d.ts

@@ -0,0 +1,4 @@
+declare const Operate: ({ instance }: {
+    instance: any;
+}) => JSX.Element;
+export default Operate;

package/lib/ImageViewer/components/Operate.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+var Operate = function Operate(_ref) {
+  var instance = _ref.instance;
+  var setTransform = instance.setTransform;
+
+  var handleTranform = function handleTranform(e, type) {
+    setTransform(type);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "image_viewer_action",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+    type: "lmweb-zoomin",
+    onClick: function onClick(e) {
+      return handleTranform(e, 'zoomIn');
+    }
+  }), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+    type: "lmweb-a-icon_m_search1",
+    onClick: function onClick(e) {
+      return handleTranform(e, 'zoomOut');
+    }
+  }), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+    type: "lmweb-undo",
+    onClick: function onClick(e) {
+      return handleTranform(e, 'rotateLeft');
+    }
+  }), /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+    type: "lmweb-redo",
+    onClick: function onClick(e) {
+      return handleTranform(e, 'rotateRight');
+    }
+  }));
+};
+
+var _default = Operate;
+exports.default = _default;

package/lib/ImageViewer/components/Thumb.d.ts

@@ -0,0 +1,4 @@
+declare const Thumb: ({ instance }: {
+    instance: any;
+}) => JSX.Element;
+export default Thumb;

package/lib/ImageViewer/components/Thumb.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var Thumb = function Thumb(_ref) {
+  var instance = _ref.instance;
+  var state = instance.state,
+      urlList = instance.urlList,
+      slickGoTo = instance.slickGoTo;
+  var activeIndex = (0, _react.useMemo)(function () {
+    return state.currentIndex;
+  }, [state.currentIndex]);
+
+  var handleGoTo = function handleGoTo(e, number) {
+    e.preventDefault();
+    slickGoTo(number);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "thumb_list",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, urlList.map(function (v, idx) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('thumb_item', activeIndex === idx && 'active'),
+      key: idx || v,
+      onClick: function onClick(e) {
+        return handleGoTo(e, idx);
+      }
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: v,
+      alt: ""
+    }));
+  }));
+};
+
+var _default = Thumb;
+exports.default = _default;

package/lib/ImageViewer/fns/index.d.ts

@@ -0,0 +1,20 @@
+declare const useCoreOptions: ({ state, dispatch, props, previewRef }: {
+    state: any;
+    dispatch: any;
+    props: any;
+    previewRef: any;
+}) => {
+    CoreMethods: {
+        getVisible: () => any;
+        onClose: () => void;
+        setTransform: (type: any) => void;
+        afterChange: (currentIndex: any) => void;
+        slickGoTo: (currentIndex: any) => void;
+        slickNext: () => void;
+        slickPrev: () => void;
+    };
+    RefMethods: {
+        getState: () => any;
+    };
+};
+export default useCoreOptions;

package/lib/ImageViewer/fns/index.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var useCoreOptions = function useCoreOptions(_ref) {
+  var state = _ref.state,
+      dispatch = _ref.dispatch,
+      props = _ref.props,
+      previewRef = _ref.previewRef;
+  // 获取显示状态
+  var getVisible = (0, _react.useCallback)(function () {
+    return typeof props.visible === 'boolean' ? props.visible : state.visible;
+  }, [props, state.visible]); // 关闭事件
+
+  var onClose = (0, _react.useCallback)(function () {
+    var _a;
+
+    (_a = props.close) === null || _a === void 0 ? void 0 : _a.call(props);
+    dispatch({
+      type: 'init'
+    });
+    dispatch({
+      type: 'changeVisible',
+      visible: false
+    });
+  }, []);
+  var setTransform = (0, _react.useCallback)(function (type) {
+    var scale = state.transform.scale * 100;
+    var rotateZ = state.transform.rotateZ;
+
+    switch (type) {
+      case 'zoomIn':
+        scale += 25;
+        break;
+
+      case 'zoomOut':
+        scale < 30 ? scale : scale -= 25;
+        break;
+
+      case 'rotateLeft':
+        rotateZ -= 90;
+        break;
+
+      case 'rotateRight':
+        rotateZ += 90;
+        break;
+
+      default:
+        break;
+    }
+
+    dispatch({
+      type: 'changeTransform',
+      transform: {
+        rotateZ: rotateZ,
+        scale: scale / 100
+      }
+    });
+  }, [state.transform]); // 切换轮播后的回调
+
+  var afterChange = (0, _react.useCallback)(function (currentIndex) {
+    console.log('currentIndex', currentIndex);
+    dispatch({
+      type: 'changeCurrent',
+      current: {
+        currentIndex: currentIndex
+      }
+    });
+  }, []); // 转到指定的轮播图, 直接跳转, 不展示动画
+
+  var slickGoTo = (0, _react.useCallback)(function (currentIndex) {
+    previewRef.current.goTo(currentIndex, true);
+  }, []); // 转到下一张轮播图
+
+  var slickNext = (0, _react.useCallback)(function () {
+    previewRef.current.next();
+  }, []); // 转到上一张轮播图
+
+  var slickPrev = (0, _react.useCallback)(function () {
+    previewRef.current.prev();
+  }, []);
+  var CoreMethods = {
+    getVisible: getVisible,
+    onClose: onClose,
+    setTransform: setTransform,
+    afterChange: afterChange,
+    slickGoTo: slickGoTo,
+    slickNext: slickNext,
+    slickPrev: slickPrev
+  };
+  var RefMethods = {
+    getState: function getState() {
+      return state;
+    }
+  };
+  return {
+    CoreMethods: CoreMethods,
+    RefMethods: RefMethods
+  };
+};
+
+var _default = useCoreOptions;
+exports.default = _default;

package/lib/ImageViewer/style/index.css

@@ -1,5 +1,107 @@
-.lm_image_viwer_wrapper {
+.lm_image_viewer_wrapper {
   position: fixed;
   inset: 0;
-  z-index: 1;
+  z-index: 1001;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_mask {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  gap: var(--gap);
+  height: 100vh;
+  padding: 50px 0;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .preview_list {
+  flex: 1;
+  width: 51%;
+  max-height: 100%;
+  overflow: hidden;
+  touch-action: none;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .preview_list div {
+  height: 100%;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .preview_list .preview_item {
+  text-align: center;
+  border-radius: 2px;
+  overflow: hidden;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .preview_list .preview_item img {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: 0.3s;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list {
+  display: flex;
+  width: 51%;
+  gap: var(--gap);
+  overflow-x: auto;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item {
+  text-align: center;
+  border-radius: 2px;
+  border: 2px solid transparent;
+  transition: 0.3s;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item img {
+  display: inline-block;
+  width: 94px;
+  height: 94px;
+  object-fit: cover;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item.active {
+  border-color: var(--primary-color);
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .image_viewer_action {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  border-radius: 100px;
+  gap: 24px;
+  font-size: 24px;
+  padding: 8px 12px;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .image_viewer_action .anticon {
+  transition: 0.3s;
+  cursor: pointer;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .image_viewer_action .anticon:hover {
+  color: var(--primary-color);
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  height: 48px;
+  color: var(--color-contrast);
+  background-color: var(--text-color);
+  transition: 0.3s;
+  cursor: pointer;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .arrow.arrow_left {
+  left: 40px;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .arrow.arrow_right {
+  right: 40px;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .arrow:hover {
+  color: var(--primary-color);
 }

package/lib/ImageViewer/wrapeer/Container.js

@@ -9,14 +9,36 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _Carousel = _interopRequireDefault(require("../components/Carousel"));
+
+var _Thumb = _interopRequireDefault(require("../components/Thumb"));
+
+var _Operate = _interopRequireDefault(require("../components/Operate"));
+
+var _Arrows = _interopRequireDefault(require("../components/Arrows"));
+
 // 根文件 => 参数聚合
 var LmImageViewerContainer = function LmImageViewerContainer(_ref) {
   var instance = _ref.instance;
-  var viisble = instance.viisble;
-  if (!viisble) return null;
+  var onClose = instance.onClose,
+      hideOnClickModal = instance.hideOnClickModal;
+
+  var handleClose = function handleClose() {
+    hideOnClickModal && onClose();
+  };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "lm_image_viewer_container"
-  }, "container"));
+    className: "lm_image_viewer_container",
+    onClick: handleClose
+  }, /*#__PURE__*/_react.default.createElement(_Carousel.default, {
+    instance: instance
+  }), /*#__PURE__*/_react.default.createElement(_Thumb.default, {
+    instance: instance
+  }), /*#__PURE__*/_react.default.createElement(_Operate.default, {
+    instance: instance
+  }), /*#__PURE__*/_react.default.createElement(_Arrows.default, {
+    instance: instance
+  })));
 };
 
 var _default = LmImageViewerContainer;

package/lib/ImageViewer/wrapeer/Root.js

@@ -1,22 +1,52 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
+var _reducer = _interopRequireWildcard(require("./reducer"));
+
+var _fns = _interopRequireDefault(require("../fns"));
+
 var _Wrapper = _interopRequireDefault(require("./Wrapper"));
 
 // 根文件 => 参数聚合
 var LmImageViewerRoot = function LmImageViewerRoot(props, ref) {
-  // 组件实例
-  var instance = Object.assign({}, props); // 向外暴露出的方法
+  var previewRef = (0, _react.useRef)(null);
+  var initialState = (0, _react.useMemo)(function () {
+    return (0, _reducer.initialState)(props);
+  }, []);
+
+  var _useReducer = (0, _react.useReducer)(_reducer.default, initialState),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1]; // 获取核心Methods
+
+
+  var _useCoreOptions = (0, _fns.default)({
+    state: state,
+    dispatch: dispatch,
+    props: props,
+    previewRef: previewRef
+  }),
+      CoreMethods = _useCoreOptions.CoreMethods,
+      RefMethods = _useCoreOptions.RefMethods; // 组件实例
+
+
+  var instance = Object.assign(Object.assign(Object.assign(Object.assign({}, props), CoreMethods), RefMethods), {
+    previewRef: previewRef,
+    state: state,
+    dispatch: dispatch
+  }); // 向外暴露出的方法
 
   (0, _react.useImperativeHandle)(ref, function () {
     return {};

package/lib/ImageViewer/wrapeer/Wrapper.js

@@ -14,9 +14,23 @@ var _Container = _interopRequireDefault(require("./Container"));
 // 根文件 => 参数聚合
 var LmImageViewerWrapper = function LmImageViewerWrapper(_ref) {
   var instance = _ref.instance;
+  var getVisible = instance.getVisible,
+      zIndex = instance.zIndex;
+
+  var handleClose = function handleClose() {
+    console.log('handleClose');
+  };
+
+  if (!getVisible()) return null;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "lm_image_viwer_wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_Container.default, {
+    className: "lm_image_viewer_wrapper",
+    style: {
+      zIndex: zIndex
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_image_viewer_mask",
+    onClick: handleClose
+  }), /*#__PURE__*/_react.default.createElement(_Container.default, {
     instance: instance
   }));
 };

package/lib/ImageViewer/wrapeer/reducer.d.ts

@@ -0,0 +1,10 @@
+export declare const reducer: (state: any, action: any) => any;
+export declare const initialState: (props: any) => {
+    currentIndex: any;
+    currentUrl: string;
+    transform: {
+        scale: number;
+        rotateZ: number;
+    };
+};
+export default reducer;

package/lib/ImageViewer/wrapeer/reducer.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.reducer = exports.initialState = exports.default = void 0;
+// 初始化状态值
+var defaultState = {
+  currentIndex: 0,
+  currentUrl: '',
+  transform: {
+    scale: 1,
+    rotateZ: 0 // Z轴旋转方向
+
+  } // 当前选中的图片变换
+
+}; // 状态管理操作
+
+var reducer = function reducer(state, action) {
+  var transform = action.transform,
+      current = action.current,
+      visible = action.visible;
+
+  switch (action.type) {
+    case 'changeVisible':
+      // 控制显示隐藏
+      return Object.assign(Object.assign({}, state), {
+        visible: visible
+      });
+
+    case 'changeTransform':
+      // 改变转换
+      return Object.assign(Object.assign({}, state), {
+        transform: Object.assign(Object.assign({}, state.transform), transform)
+      });
+
+    case 'changeCurrent':
+      // 改变当前选中的图片
+      return Object.assign(Object.assign(Object.assign({}, state), current), {
+        transform: defaultState.transform
+      });
+
+    case 'init':
+      // 改变当前选中的图片
+      return Object.assign(Object.assign({}, state), defaultState);
+
+    default:
+      throw new Error();
+  }
+}; // 仅在初始化时触发一次
+
+
+exports.reducer = reducer;
+
+var initialState = function initialState(props) {
+  var initialIndex = props.initialIndex;
+  return Object.assign(Object.assign({}, defaultState), {
+    currentIndex: initialIndex
+  });
+};
+
+exports.initialState = initialState;
+var _default = reducer;
+exports.default = _default;