linkmore-design 1.1.8 → 1.1.10

package/es/LmUpload/UploadList/ItemPictureCard.js

@@ -63,8 +63,10 @@ var renderThumb = function renderThumb(file) {
 
 var PictureItem = function PictureItem(_ref) {
   var file = _ref.file,
+      index = _ref.index,
       instance = _ref.instance;
-  var readOnly = instance.readOnly,
+  var dispatch = instance.dispatch,
+      readOnly = instance.readOnly,
       size = instance.size,
       remove = instance.remove,
       preview = instance.preview,
@@ -107,6 +109,18 @@ var PictureItem = function PictureItem(_ref) {
       fontSize: fontSize
     };
   }, [size]);
+
+  var handlePreview = function handlePreview() {
+    preview === null || preview === void 0 ? void 0 : preview(file);
+    dispatch({
+      type: 'changePreview',
+      preview: {
+        visible: true,
+        index: index
+      }
+    });
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: cn('lm_upload_item', 'lm_upload_item_card', isError && 'lm_upload_item_error'),
     style: {
@@ -128,9 +142,7 @@ var PictureItem = function PictureItem(_ref) {
     className: "lm_upload_item_action"
   }, /*#__PURE__*/React.createElement("div", {
     className: "action_preview",
-    onClick: function onClick() {
-      return preview(file);
-    }
+    onClick: handlePreview
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lmweb-eye",
     style: {

package/es/LmUpload/UploadList/index.js

@@ -1,25 +1,29 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { render } from '../utils';
 import RenderItem from './RenderItem';
 
 var LmUploadList = function LmUploadList(_ref) {
   var instance = _ref.instance;
-
-  var _a, _b;
-
   var getFileHasValue = instance.getFileHasValue,
       getFileList = instance.getFileList,
       itemRender = instance.itemRender,
       listType = instance.listType,
       showUploadList = instance.showUploadList;
   if (!showUploadList) return null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, (_b = (_a = getFileList()) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) {
-    return a.seq - b.seq;
-  })) === null || _b === void 0 ? void 0 : _b.map(function (file, idx) {
+  var fileList = useMemo(function () {
+    var _a;
+
+    return (_a = getFileList()) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) {
+      return a.seq - b.seq;
+    });
+  }, [getFileList]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, fileList === null || fileList === void 0 ? void 0 : fileList.map(function (file, idx) {
     return render(itemRender || RenderItem, {
       type: listType,
       key: getFileHasValue(file) || idx,
+      index: idx,
       file: file,
+      fileList: fileList,
       instance: instance
     });
   }));

package/es/LmUpload/components/Preview.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<({ instance }: {
+    instance: any;
+}) => JSX.Element>;
+export default _default;

package/es/LmUpload/components/Preview.js

@@ -0,0 +1,43 @@
+import React, { useMemo } from 'react';
+import { ImageViewer } from 'linkmore-design';
+
+var Preview = function Preview(_ref) {
+  var instance = _ref.instance;
+  var enabledPreview = instance.enabledPreview,
+      state = instance.state,
+      dispatch = instance.dispatch,
+      getFileList = instance.getFileList;
+  if (!enabledPreview) return null; // 与展示顺序保持一致
+
+  var fileList = useMemo(function () {
+    var _a;
+
+    return (_a = getFileList()) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) {
+      return a.seq - b.seq;
+    });
+  }, [getFileList]);
+  var config = useMemo(function () {
+    var _state$preview = state.preview,
+        index = _state$preview.index,
+        visible = _state$preview.visible;
+    return {
+      urlList: fileList === null || fileList === void 0 ? void 0 : fileList.map(function (_ref2) {
+        var url = _ref2.url;
+        return url;
+      }),
+      initialIndex: index,
+      visible: visible,
+      close: function close() {
+        dispatch({
+          type: 'changePreview',
+          preview: {
+            visible: false
+          }
+        });
+      }
+    };
+  }, [fileList, state.preview]);
+  return /*#__PURE__*/React.createElement(ImageViewer, Object.assign({}, config));
+};
+
+export default /*#__PURE__*/React.memo(Preview);

package/es/LmUpload/style/index.css

@@ -1,3 +1,121 @@
+.lm_image_viewer_wrapper {
+  position: fixed;
+  z-index: 1001;
+  inset: 0;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_mask {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-flow: column;
+  gap: var(--gap);
+  align-items: center;
+  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 {
+  overflow: hidden;
+  text-align: center;
+  border-radius: 2px;
+}
+.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;
+  gap: var(--gap);
+  width: 51%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 98px;
+  height: 98px;
+  text-align: center;
+  background-color: var(--color-contrast);
+  border: 2px solid transparent;
+  border-radius: 2px;
+  transition: 0.3s;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item .thumb_item_icon {
+  color: var(--color-45);
+  font-size: 34px;
+}
+.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;
+  bottom: 50px;
+  left: 50%;
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 24px;
+  background-color: #fff;
+  border-radius: 100px;
+  transform: translateX(-50%);
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .image_viewer_action .anticon {
+  cursor: pointer;
+  transition: 0.3s;
+}
+.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%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  color: var(--color-contrast);
+  font-size: 32px;
+  background-color: var(--text-color);
+  transform: translateY(-50%);
+  cursor: pointer;
+  transition: 0.3s;
+}
+.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);
+}
 .lm_upload_wrapper {
   display: flex;
   flex-wrap: wrap;

package/es/LmUpload/style/variables.css

@@ -1,3 +1,121 @@
+.lm_image_viewer_wrapper {
+  position: fixed;
+  z-index: 1001;
+  inset: 0;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_mask {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-flow: column;
+  gap: var(--gap);
+  align-items: center;
+  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 {
+  overflow: hidden;
+  text-align: center;
+  border-radius: 2px;
+}
+.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;
+  gap: var(--gap);
+  width: 51%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 98px;
+  height: 98px;
+  text-align: center;
+  background-color: var(--color-contrast);
+  border: 2px solid transparent;
+  border-radius: 2px;
+  transition: 0.3s;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item .thumb_item_icon {
+  color: var(--color-45);
+  font-size: 34px;
+}
+.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;
+  bottom: 50px;
+  left: 50%;
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 24px;
+  background-color: #fff;
+  border-radius: 100px;
+  transform: translateX(-50%);
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .image_viewer_action .anticon {
+  cursor: pointer;
+  transition: 0.3s;
+}
+.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%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  color: var(--color-contrast);
+  font-size: 32px;
+  background-color: var(--text-color);
+  transform: translateY(-50%);
+  cursor: pointer;
+  transition: 0.3s;
+}
+.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);
+}
 .lm_upload_wrapper {
   display: flex;
   flex-wrap: wrap;

package/es/LmUpload/wrapper/UploadWrapper.js

@@ -3,6 +3,7 @@ import React from 'react';
 import LmUploadContainer from './UploadContainer';
 import LmUploadView from '../view';
 import Crop from '../components/Crop';
+import Preview from '../components/Preview';
 
 var LmUploadWrapper = function LmUploadWrapper(_ref) {
   var instance = _ref.instance;
@@ -14,6 +15,8 @@ var LmUploadWrapper = function LmUploadWrapper(_ref) {
     instance: instance
   }), /*#__PURE__*/React.createElement(Crop, {
     instance: instance
+  }), /*#__PURE__*/React.createElement(Preview, {
+    instance: instance
   }));
 };
 

package/es/LmUpload/wrapper/reducer.d.ts

@@ -5,5 +5,9 @@ export declare const initialState: (props: any) => {
     status: string;
     fileList: any;
     cropFile: any;
+    preview: {
+        index: number;
+        visible: boolean;
+    };
 };
 export default reducer;

package/es/LmUpload/wrapper/reducer.js

@@ -2,7 +2,8 @@
 export var reducer = function reducer(state, action) {
   var fileList = action.fileList,
       percent = action.percent,
-      cropFile = action.cropFile;
+      cropFile = action.cropFile,
+      preview = action.preview;
 
   switch (action.type) {
     case 'changeFileList':
@@ -20,6 +21,11 @@ export var reducer = function reducer(state, action) {
         cropFile: cropFile
       });
 
+    case 'changePreview':
+      return Object.assign(Object.assign({}, state), {
+        preview: Object.assign(Object.assign({}, state.preview), preview)
+      });
+
     default:
       throw new Error();
   }
@@ -33,8 +39,11 @@ export var initialState = function initialState(props) {
     process: 0,
     status: 'done',
     fileList: defaultFileList,
-    cropFile: null // 需要裁剪的图片
-
+    cropFile: null,
+    preview: {
+      index: 0,
+      visible: false
+    }
   };
 };
 export default reducer;

package/es/styles/variables.css

@@ -11266,6 +11266,9 @@ p {
   height: 48px;
   font-size: 12px;
 }
+#lm_protable_warp .ant-table-tbody > tr > .ant-table-selection-column {
+  text-align: left;
+}
 #lm_protable_warp .ant-table-tbody > tr.ant-table-measure-row > td {
   padding: 0 !important;
 }
@@ -11647,6 +11650,124 @@ button.ant-table-row-expand-icon::after {
 .WeChatContactsAvatarTools .rightClickItems:last-child {
   border-bottom: 0;
 }
+.lm_image_viewer_wrapper {
+  position: fixed;
+  z-index: 1001;
+  inset: 0;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_mask {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+  inset: 0;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-flow: column;
+  gap: var(--gap);
+  align-items: center;
+  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 {
+  overflow: hidden;
+  text-align: center;
+  border-radius: 2px;
+}
+.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;
+  gap: var(--gap);
+  width: 51%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 98px;
+  height: 98px;
+  text-align: center;
+  background-color: var(--color-contrast);
+  border: 2px solid transparent;
+  border-radius: 2px;
+  transition: 0.3s;
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .thumb_list .thumb_item .thumb_item_icon {
+  color: var(--color-45);
+  font-size: 34px;
+}
+.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;
+  bottom: 50px;
+  left: 50%;
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 24px;
+  background-color: #fff;
+  border-radius: 100px;
+  transform: translateX(-50%);
+}
+.lm_image_viewer_wrapper .lm_image_viewer_container .image_viewer_action .anticon {
+  cursor: pointer;
+  transition: 0.3s;
+}
+.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%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  color: var(--color-contrast);
+  font-size: 32px;
+  background-color: var(--text-color);
+  transform: translateY(-50%);
+  cursor: pointer;
+  transition: 0.3s;
+}
+.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);
+}
 .lm_upload_wrapper {
   display: flex;
   flex-wrap: wrap;

package/lib/Form/FormItem/index.d.ts

@@ -1,5 +1,6 @@
 import type { FormInstance } from 'rc-field-form';
 import type { FieldProps } from 'rc-field-form/lib/Field';
+import type { Rule } from 'rc-field-form/lib/interface';
 import * as React from 'react';
 import useFormItemStatus from '../hooks/useFormItemStatus';
 import type { FormItemInputProps } from '../FormItemInput';
@@ -9,7 +10,10 @@ export declare type ValidateStatus = typeof ValidateStatuses[number];
 declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
 declare type RcFieldProps<Values = any> = Omit<FieldProps<Values>, 'children'>;
 declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
-export interface FormItemProps<Values = any> extends FormItemLabelProps, FormItemInputProps, RcFieldProps<Values> {
+export declare type LmRule = Rule & {
+    time?: number;
+};
+export interface FormItemProps<Values = any> extends FormItemLabelProps, FormItemInputProps, Omit<RcFieldProps<Values>, 'rules'> {
     prefixCls?: string;
     noStyle?: boolean;
     style?: React.CSSProperties;
@@ -25,6 +29,8 @@ export interface FormItemProps<Values = any> extends FormItemLabelProps, FormIte
     tooltip?: LabelTooltipType;
     /** @deprecated No need anymore */
     fieldKey?: React.Key | React.Key[];
+    /** 变更 */
+    rules?: LmRule[];
     errorPlacement?: string;
     responsive?: boolean;
 }