linkmore-design 1.0.72 → 1.0.75

package/es/Approval/index.d.ts

@@ -2,3 +2,4 @@ import React from 'react';
 import { IApprovalProps } from './type';
 declare const LMApproval: React.FC<IApprovalProps>;
 export default LMApproval;
+export type { ApprovalType, StatusType, IApprovalItemProps, IApprovalProps } from './type';

package/es/ConfigProvider/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/config-provider/style");
+
+var _configProvider = _interopRequireDefault(require("antd/es/config-provider"));
+
+var _default = _configProvider.default;
+exports.default = _default;

package/es/ConfigProvider/style/index.css

@@ -0,0 +1,141 @@
+.lm-radio {
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--font-color);
+}
+.lm-radio > span:last-child {
+  padding: 0;
+  margin: 0 8px;
+  max-width: 96px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.lm-radio .ant-radio .ant-radio-inner {
+  border-color: var(--stroke-color);
+}
+.lm-radio .ant-radio:hover .ant-radio-inner {
+  border-color: var(--primary-color);
+}
+.lm-radio .ant-radio-disabled.ant-radio-checked .ant-radio-inner:after {
+  background-color: var(--tip-text-color);
+}
+.lm-radio .ant-radio-disabled .ant-radio-inner {
+  background-color: var(--background-color);
+  border-color: var(--stroke-color) !important;
+}
+.lm-radio .ant-radio-disabled + span {
+  color: var(--disabled-font-color);
+}
+.lm-radio-group .ant-radio-button-wrapper {
+  font-size: 12px;
+  height: 32px;
+  padding: 0px 12px;
+  color: var(--font-color);
+  vertical-align: middle;
+}
+.lm-radio-group .ant-radio-button-wrapper .anticon {
+  font-size: 16px;
+  vertical-align: middle;
+  line-height: 1;
+}
+.lm-radio-group .ant-radio-button-wrapper:hover {
+  color: var(--primary-color);
+}
+.lm-radio-group .ant-radio-button-wrapper > span:last-child {
+  display: inline-block;
+  font-size: 12px;
+  max-width: 96px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.lm-radio-group .ant-radio-button-wrapper-checked:not([class*=' ant-radio-button-wrapper-disabled']) .ant-radio-button-wrapper:first-child {
+  border-right-color: var(--primary-hover-color);
+}
+.lm-radio-group .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
+  color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+.lm-radio-group .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):first-child {
+  border-color: var(--primary-color);
+}
+.lm-radio-group .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
+  color: var(--primary-hover-color);
+  border-color: var(--primary-hover-color);
+}
+.lm-radio-group.ant-radio-group-large .ant-radio-button-wrapper {
+  line-height: 38px;
+  height: 40px;
+}
+.lm-radio-group.ant-radio-group-large .ant-radio-button-wrapper > span:last-child {
+  line-height: 38px;
+}
+.lm-radio-group.ant-radio-group-small .ant-radio-button-wrapper {
+  line-height: 22px;
+  height: 24px;
+  padding: 0px 8px;
+}
+.lm-radio-group.ant-radio-group-small .ant-radio-button-wrapper > span:last-child {
+  line-height: 22px;
+}
+.lm-radio-group .ant-radio-wrapper {
+  font-size: 12px;
+  line-height: 20px;
+  color: var(--font-color);
+}
+.lm-radio-group .ant-radio-wrapper > span:last-child {
+  padding: 0;
+  margin: 0 8px;
+  max-width: 96px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.lm-radio-group .ant-radio-wrapper .ant-radio .ant-radio-inner {
+  border-color: var(--stroke-color);
+}
+.lm-radio-group .ant-radio-wrapper .ant-radio:hover .ant-radio-inner {
+  border-color: var(--primary-color);
+}
+.lm-radio-group .ant-radio-wrapper .ant-radio-disabled.ant-radio-checked .ant-radio-inner:after {
+  background-color: var(--tip-text-color);
+}
+.lm-radio-group .ant-radio-wrapper .ant-radio-disabled .ant-radio-inner {
+  background-color: var(--background-color);
+  border-color: var(--stroke-color) !important;
+}
+.lm-radio-group .ant-radio-wrapper .ant-radio-disabled + span {
+  color: var(--disabled-font-color);
+}
+.lm-radio-group .ant-radio-button-wrapper-disabled {
+  color: var(--disabled-font-color);
+  background-color: var(--disabled-bg-color);
+  border-color: var(--stroke-color);
+}
+.lm-radio-group .ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked {
+  color: #b8b8b8 !important;
+  background-color: var(--background-color-hover);
+  border-color: var(--stroke-color);
+}
+.lm-radio-group .ant-radio-button-wrapper-disabled:hover {
+  color: var(--disabled-font-color);
+}
+.lm-radio-group.lm-radio-group-row {
+  display: flex;
+  flex-direction: row;
+}
+.lm-radio-group.lm-radio-group-column {
+  display: flex;
+  flex-direction: column;
+}
+.lm-radio-group.lm-radio-group-column .lm-radio {
+  margin-bottom: 12px;
+}
+.lm-radio-group.lm-radio-group-column .lm-radio > span:last-child {
+  max-width: 216px;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: 0 8px;
+}
+.lm-radio-group.lm-radio-group-column .lm-radio:last-child {
+  margin-bottom: 0;
+}

package/es/ConfigProvider/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.css");

package/es/ImageViewer/LmImageViewer.js

@@ -18,19 +18,18 @@ var LmImageViewer = function LmImageViewer(_a, ref) {
   var resetProps = __rest(_a, []);
 
   var defaultRef = useRef(null);
-  var defaultConfig = {
-    visible: false,
+  var defaultConfig = Object.assign({
+    visible: null,
     urlList: [],
-    zIndex: 1,
+    zIndex: 2001,
     initialIndex: 0,
     infinite: false,
-    hideOnClickModal: false,
-    close: function close() {} // 触发关闭时的事件
-
-  };
+    hideOnClickModal: true,
+    close: function close() {}
+  }, resetProps);
   return /*#__PURE__*/React.createElement(LmImageViewerRoot, Object.assign({
     ref: ref || defaultRef
-  }, defaultConfig, resetProps));
+  }, defaultConfig));
 };
 
 export default /*#__PURE__*/forwardRef(LmImageViewer);

package/es/ImageViewer/components/Arrows.d.ts

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

package/es/ImageViewer/components/Arrows.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { IconFont } from '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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "arrow arrow_left",
+    onClick: function onClick(e) {
+      return handlePreNext(e, 'prev');
+    }
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-left"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "arrow arrow_right",
+    onClick: function onClick(e) {
+      return handlePreNext(e, 'next');
+    }
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-right"
+  })));
+};
+
+export default Arrows;

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

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

package/es/ImageViewer/components/Carousel.js

@@ -0,0 +1,71 @@
+import React, { useMemo, useCallback } from 'react';
+import { Carousel } from '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 = 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.createElement("div", {
+    className: "preview_item",
+    key: key
+  }, /*#__PURE__*/React.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 = 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.createElement("div", {
+    className: "preview_list",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    onWheel: onWheel
+  }, /*#__PURE__*/React.createElement(Carousel, Object.assign({
+    ref: previewRef
+  }, config), urlList.map(function (v, idx) {
+    return /*#__PURE__*/React.createElement(ListItem, {
+      key: idx || v,
+      index: idx,
+      item: v,
+      instance: instance
+    });
+  })));
+};
+
+export default BigImg;

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

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

package/es/ImageViewer/components/Operate.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { IconFont } from '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.createElement("div", {
+    className: "image_viewer_action",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-zoomin",
+    onClick: function onClick(e) {
+      return handleTranform(e, 'zoomIn');
+    }
+  }), /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-a-icon_m_search1",
+    onClick: function onClick(e) {
+      return handleTranform(e, 'zoomOut');
+    }
+  }), /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-undo",
+    onClick: function onClick(e) {
+      return handleTranform(e, 'rotateLeft');
+    }
+  }), /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-redo",
+    onClick: function onClick(e) {
+      return handleTranform(e, 'rotateRight');
+    }
+  }));
+};
+
+export default Operate;

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

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

package/es/ImageViewer/components/Thumb.js

@@ -0,0 +1,37 @@
+import React, { useMemo } from 'react';
+import cn from 'classnames';
+
+var Thumb = function Thumb(_ref) {
+  var instance = _ref.instance;
+  var state = instance.state,
+      urlList = instance.urlList,
+      slickGoTo = instance.slickGoTo;
+  var activeIndex = useMemo(function () {
+    return state.currentIndex;
+  }, [state.currentIndex]);
+
+  var handleGoTo = function handleGoTo(e, number) {
+    e.preventDefault();
+    slickGoTo(number);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "thumb_list",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, urlList.map(function (v, idx) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('thumb_item', activeIndex === idx && 'active'),
+      key: idx || v,
+      onClick: function onClick(e) {
+        return handleGoTo(e, idx);
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      src: v,
+      alt: ""
+    }));
+  }));
+};
+
+export default Thumb;

package/es/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/es/ImageViewer/fns/index.js

@@ -0,0 +1,100 @@
+import { useCallback } from 'react';
+
+var useCoreOptions = function useCoreOptions(_ref) {
+  var state = _ref.state,
+      dispatch = _ref.dispatch,
+      props = _ref.props,
+      previewRef = _ref.previewRef;
+  // 获取显示状态
+  var getVisible = useCallback(function () {
+    return typeof props.visible === 'boolean' ? props.visible : state.visible;
+  }, [props, state.visible]); // 关闭事件
+
+  var onClose = 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 = 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 = useCallback(function (currentIndex) {
+    console.log('currentIndex', currentIndex);
+    dispatch({
+      type: 'changeCurrent',
+      current: {
+        currentIndex: currentIndex
+      }
+    });
+  }, []); // 转到指定的轮播图, 直接跳转, 不展示动画
+
+  var slickGoTo = useCallback(function (currentIndex) {
+    previewRef.current.goTo(currentIndex, true);
+  }, []); // 转到下一张轮播图
+
+  var slickNext = useCallback(function () {
+    previewRef.current.next();
+  }, []); // 转到上一张轮播图
+
+  var slickPrev = 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
+  };
+};
+
+export default useCoreOptions;

package/es/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/es/ImageViewer/wrapeer/Container.js

@@ -1,13 +1,31 @@
 // 根文件 => 参数聚合
 import React from 'react';
+import Carouserl from '../components/Carousel';
+import Thumb from '../components/Thumb';
+import Operate from '../components/Operate';
+import Arrows from '../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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "lm_image_viewer_container"
-  }, "container"));
+    className: "lm_image_viewer_container",
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(Carouserl, {
+    instance: instance
+  }), /*#__PURE__*/React.createElement(Thumb, {
+    instance: instance
+  }), /*#__PURE__*/React.createElement(Operate, {
+    instance: instance
+  }), /*#__PURE__*/React.createElement(Arrows, {
+    instance: instance
+  })));
 };
 
 export default LmImageViewerContainer;