linkmore-design 1.0.71 → 1.0.74

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,211 +1,107 @@
-.lm_upload_wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-.lm_upload_wrapper .lm_upload_core {
-  display: inline-flex;
-  vertical-align: middle;
-}
-.lm_upload_wrapper .lm_upload_core .lm_upload_core_picture {
-  font-size: 12px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  border: 1px solid var(--color-15);
-  background-color: var(--color-2);
-  transition: all 0.3s;
-  cursor: pointer;
-}
-.lm_upload_wrapper .lm_upload_core .lm_upload_core_picture:hover {
-  border-color: var(--primary-color);
-}
-.lm_upload_wrapper .lm_upload_core .lm_upload_core_picture .lm_upload_core_picture_action {
-  width: 100%;
-  text-align: center;
-  padding: var(--gap);
-}
-.lm_upload_wrapper .lm_upload_core .lm_upload_core_picture .lm_upload_core_picture_action .action_plus {
-  color: var(--color-85);
-}
-.lm_upload_wrapper .lm_upload_core .lm_upload_core_picture .lm_upload_core_picture_action .tip {
-  color: var(--color-45);
-  margin-top: var(--gap);
-}
-.lm_upload_wrapper .lm_upload_progress {
-  width: 100%;
-  height: 2px;
-  background-color: var(--color-4);
-  border-radius: 20px;
-  margin: 10px 0;
-}
-.lm_upload_wrapper .lm_upload_progress .line {
-  width: 0%;
-  height: 2px;
-  transition: 0.3;
-  background-color: var(--primary-color);
-  border-radius: 20px;
-}
-.lm_upload_wrapper .lm_upload_item {
-  vertical-align: middle;
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_text {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--gap);
-  width: 100%;
-  height: 22px;
-  padding: 0 6px;
-  transition: 0.3s;
-  cursor: pointer;
+.lm_image_viewer_wrapper {
+  position: fixed;
+  inset: 0;
+  z-index: 1001;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_text:hover {
-  background-color: var(--color-2);
+.lm_image_viewer_wrapper .lm_image_viewer_mask {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_left {
-  flex: 1;
+.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_upload_wrapper .lm_upload_item.lm_upload_item_text .text_left .prefix {
-  font-size: 14px;
-  color: var(--color-45);
-  transition: 0.3s;
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_left .lm_upload_item_name {
+.lm_image_viewer_wrapper .lm_image_viewer_container .preview_list {
   flex: 1;
-  font-size: 14px;
-  color: var(--primary-color);
-  transition: 0.3s;
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_right {
-  display: inline-flex;
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_right .action_delete {
-  width: 24px;
-  text-align: center;
-  color: var(--color-45);
-  transition: 0.3s;
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_right .action_delete .anticon {
-  font-size: 14px;
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_right .action_delete:hover {
-  color: var(--primary-color);
+  width: 51%;
+  max-height: 100%;
+  overflow: hidden;
+  touch-action: none;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_text.error {
-  color: var(--error-color);
+.lm_image_viewer_wrapper .lm_image_viewer_container .preview_list div {
+  height: 100%;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+.lm_image_viewer_wrapper .lm_image_viewer_container .preview_list .preview_item {
   text-align: center;
-  border: 1px solid var(--color-15);
   border-radius: 2px;
-  padding: var(--gap);
-  transition: all 0.3s;
-  cursor: pointer;
+  overflow: hidden;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_thumb {
+.lm_image_viewer_wrapper .lm_image_viewer_container .preview_list .preview_item img {
+  display: inline-block;
   width: 100%;
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_thumb .anticon {
-  font-size: 34px;
-  color: var(--color-45);
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_thumb img {
+  height: 100%;
   object-fit: contain;
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_error .lm_upload_item_name {
-  font-size: 12px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  margin-top: 8px;
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_mask {
-  position: absolute;
-  inset: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, 0.5);
-  opacity: 0;
   transition: 0.3s;
-  z-index: 1;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_mask .lm_upload_item_action {
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list {
   display: flex;
-  align-items: center;
+  width: 51%;
   gap: var(--gap);
-  color: #fff;
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card:hover .lm_upload_item_mask {
-  opacity: 1;
+  overflow-x: auto;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card.error {
-  border-color: var(--error-color);
+.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_upload_wrapper .lm_upload_item.lm_upload_item_card.error .lm_upload_item_mask {
-  display: none;
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item img {
+  display: inline-block;
+  width: 94px;
+  height: 94px;
+  object-fit: cover;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card.error .lm_upload_item_error {
-  color: var(--error-color);
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item.active {
+  border-color: var(--primary-color);
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture {
+.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;
-  gap: var(--gap);
-  width: 100%;
-  border: 1px solid var(--color-15);
-  border-radius: 2px;
-  padding: var(--gap);
+  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_upload_wrapper .lm_upload_item.lm_upload_item_picture:hover {
-  border-color: var(--primary-color);
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_left {
-  flex: 1;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--gap);
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_left .lm_upload_item_thumb {
-  width: 48px;
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_left .lm_upload_item_thumb img {
-  width: 100%;
-  max-height: 80px;
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_left .lm_upload_item_name {
-  flex: 1;
-  font-size: 14px;
+.lm_image_viewer_wrapper .lm_image_viewer_container .image_viewer_action .anticon:hover {
   color: var(--primary-color);
-  transition: 0.3s;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_right {
+.lm_image_viewer_wrapper .lm_image_viewer_container .arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
   align-items: center;
-}
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_right .action_delete {
-  width: 24px;
-  text-align: center;
-  color: var(--color-45);
+  justify-content: center;
+  font-size: 32px;
+  height: 48px;
+  color: var(--color-contrast);
+  background-color: var(--text-color);
   transition: 0.3s;
+  cursor: pointer;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_right .action_delete .anticon {
-  font-size: 14px;
+.lm_image_viewer_wrapper .lm_image_viewer_container .arrow.arrow_left {
+  left: 40px;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_right .action_delete:hover {
-  color: var(--primary-color);
+.lm_image_viewer_wrapper .lm_image_viewer_container .arrow.arrow_right {
+  right: 40px;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture.error {
-  color: var(--error-color);
+.lm_image_viewer_wrapper .lm_image_viewer_container .arrow:hover {
+  color: var(--primary-color);
 }

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

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

package/lib/ImageViewer/wrapeer/Container.js

@@ -0,0 +1,45 @@
+"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 _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 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",
+    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;
+exports.default = _default;

package/lib/ImageViewer/wrapeer/Root.js

@@ -2,20 +2,58 @@
 
 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 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 {};
   });
-  return /*#__PURE__*/_react.default.createElement("div", null, "ImageViewer");
+  return /*#__PURE__*/_react.default.createElement(_Wrapper.default, {
+    instance: instance
+  });
 };
 
 var _default = /*#__PURE__*/(0, _react.forwardRef)(LmImageViewerRoot);

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

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

package/lib/ImageViewer/wrapeer/Wrapper.js

@@ -0,0 +1,39 @@
+"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 _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_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
+  }));
+};
+
+var _default = LmImageViewerWrapper;
+exports.default = _default;

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;