linkmore-design 1.0.84 → 1.0.87

package/es/LmUpload/style/index.css

@@ -8,77 +8,77 @@
   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;
+  font-size: 12px;
   text-align: center;
-  border: 1px solid var(--color-15);
   background-color: var(--color-2);
-  transition: all 0.3s;
+  border: 1px solid var(--color-15);
   cursor: pointer;
+  transition: all 0.3s;
 }
 .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);
+  text-align: center;
 }
 .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);
+  color: var(--color-45);
 }
 .lm_upload_wrapper .lm_upload_progress {
   width: 100%;
   height: 2px;
+  margin: 10px 0;
   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;
+  transition: 0.3;
 }
 .lm_upload_wrapper .lm_upload_item {
   vertical-align: middle;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_text {
   display: flex;
+  gap: var(--gap);
   align-items: center;
   justify-content: space-between;
-  gap: var(--gap);
   width: 100%;
   height: 22px;
   padding: 0 6px;
-  transition: 0.3s;
   cursor: pointer;
+  transition: 0.3s;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_text:hover {
   background-color: var(--color-2);
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_left {
-  flex: 1;
   display: flex;
-  align-items: center;
+  flex: 1;
   gap: var(--gap);
+  align-items: center;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_left .prefix {
-  font-size: 14px;
   color: var(--color-45);
+  font-size: 14px;
   transition: 0.3s;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_left .lm_upload_item_name {
   flex: 1;
-  font-size: 14px;
   color: var(--primary-color);
+  font-size: 14px;
   transition: 0.3s;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_right {
@@ -86,8 +86,8 @@
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_right .action_delete {
   width: 24px;
-  text-align: center;
   color: var(--color-45);
+  text-align: center;
   transition: 0.3s;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_right .action_delete .anticon {
@@ -96,86 +96,93 @@
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_right .action_delete:hover {
   color: var(--primary-color);
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_text.error {
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_text.lm_upload_item_error {
   color: var(--error-color);
 }
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_text.lm_upload_item_error .text_left .prefix,
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_text.lm_upload_item_error .text_left .lm_upload_item_name {
+  color: inherit;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_text.lm_upload_item_error .text_right .action_delete {
+  color: inherit;
+}
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_card {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  padding: var(--gap);
   text-align: center;
   border: 1px solid var(--color-15);
   border-radius: 2px;
-  padding: var(--gap);
-  transition: all 0.3s;
   cursor: pointer;
+  transition: all 0.3s;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_thumb {
   width: 100%;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_thumb .anticon {
-  font-size: 34px;
   color: var(--color-45);
+  font-size: 34px;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_thumb img {
   object-fit: contain;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_error .lm_upload_item_name {
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_thumb_error .lm_upload_item_name {
+  margin-top: 8px;
+  overflow: hidden;
   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;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.5);
   opacity: 0;
   transition: 0.3s;
-  z-index: 1;
+  inset: 8px;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_mask .lm_upload_item_action {
   display: flex;
-  align-items: center;
   gap: var(--gap);
+  align-items: center;
   color: #fff;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_card:hover .lm_upload_item_mask {
   opacity: 1;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card.error {
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card.lm_upload_item_error {
   border-color: var(--error-color);
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card.error .lm_upload_item_mask {
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card.lm_upload_item_error .lm_upload_item_mask {
   display: none;
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_card.error .lm_upload_item_error {
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card.lm_upload_item_error .lm_upload_item_thumb_error {
   color: var(--error-color);
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_picture {
   display: flex;
+  gap: var(--gap);
   align-items: center;
   justify-content: space-between;
-  gap: var(--gap);
   width: 100%;
+  padding: var(--gap);
   border: 1px solid var(--color-15);
   border-radius: 2px;
-  padding: var(--gap);
-  transition: 0.3s;
   cursor: pointer;
+  transition: 0.3s;
 }
 .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;
+  flex: 1;
   gap: var(--gap);
+  align-items: center;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_left .lm_upload_item_thumb {
   width: 48px;
@@ -186,8 +193,8 @@
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_left .lm_upload_item_name {
   flex: 1;
-  font-size: 14px;
   color: var(--primary-color);
+  font-size: 14px;
   transition: 0.3s;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_right {
@@ -196,8 +203,8 @@
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_right .action_delete {
   width: 24px;
-  text-align: center;
   color: var(--color-45);
+  text-align: center;
   transition: 0.3s;
 }
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_right .action_delete .anticon {
@@ -206,6 +213,6 @@
 .lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_right .action_delete:hover {
   color: var(--primary-color);
 }
-.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture.error {
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture.lm_upload_item_error {
   color: var(--error-color);
 }

package/es/LmUpload/utils.d.ts

@@ -3,3 +3,4 @@ export declare function isClassComponent(component: any): any;
 export declare function isExoticComponent(component: any): boolean;
 export declare function isReactComponent(component: any): any;
 export declare const render: (Comp: any, props: any) => any;
+export declare const getBase64: (img: any, callback: any) => void;

package/es/LmUpload/utils.js

@@ -30,4 +30,16 @@ export function isReactComponent(component) {
 }
 export var render = function render(Comp, props) {
   return !Comp ? null : isReactComponent(Comp) ? /*#__PURE__*/React.createElement(Comp, Object.assign({}, props)) : Comp;
+};
+/*
+ * 将上传的图片转换为可展示的形式
+ * getBase64(file, (img) => {})
+ */
+
+export var getBase64 = function getBase64(img, callback) {
+  var reader = new FileReader();
+  reader.addEventListener('load', function () {
+    return callback(reader.result);
+  });
+  reader.readAsDataURL(img);
 };

package/es/LmUpload/wrapper/UploadRoot.js

@@ -13,15 +13,7 @@ var LmUploadRoot = function LmUploadRoot(props, ref) {
   var _useReducer = useReducer(reducer, initialState),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],
-      dispatch = _useReducer2[1]; // 格式化接收参数值
-  // const configProps = useMemo(() => {
-  //   const { ...resetProps } = props
-  //   // 受控/非受控时的数据收集
-  //   return {
-  //     ...resetProps,
-  //   }
-  // }, [props])
-  // 获取核心Methods
+      dispatch = _useReducer2[1]; // 获取核心Methods
 
 
   var _useCoreOptions = useCoreOptions({
@@ -33,10 +25,12 @@ var LmUploadRoot = function LmUploadRoot(props, ref) {
       RefMethods = _useCoreOptions.RefMethods; // 组件实例
 
 
-  var instance = Object.assign(Object.assign(Object.assign(Object.assign({}, props), CoreMethods), RefMethods), {
-    state: state,
-    dispatch: dispatch
-  }); // 向外暴露出的方法
+  var instance = useMemo(function () {
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, props), CoreMethods), RefMethods), {
+      state: state,
+      dispatch: dispatch
+    });
+  }, [props, CoreMethods, RefMethods, state, dispatch]); // 向外暴露出的方法
 
   useImperativeHandle(ref, function () {
     return Object.assign({}, RefMethods);

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

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

package/es/LmUpload/wrapper/UploadWrapper.js

@@ -14,4 +14,4 @@ var LmUploadWrapper = function LmUploadWrapper(_ref) {
   }));
 };
 
-export default LmUploadWrapper;
+export default /*#__PURE__*/React.memo(LmUploadWrapper);

package/es/Select/index.js

@@ -16,15 +16,16 @@ var __rest = this && this.__rest || function (s, e) {
 
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
+import SizeContext from '../ConfigProvider/SizeContext';
 var prefixCls = 'lm_select';
 var CLMSelect = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       className = props.className,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'middle' : _props$size,
+      customizeSize = props.size,
       dropdownClassName = props.dropdownClassName,
       others = __rest(props, ["children", "className", "size", "dropdownClassName"]);
 
+  var size = customizeSize || React.useContext(SizeContext) || 'middle';
   return /*#__PURE__*/React.createElement(_Select, Object.assign({
     className: classNames(className, prefixCls),
     size: size,

package/es/Tabs/index.js

@@ -16,16 +16,17 @@ var __rest = this && this.__rest || function (s, e) {
 
 import React from 'react';
 import classNames from 'classnames';
+import SizeContext from '../ConfigProvider/SizeContext';
 var prefixCls = 'lm_tabs';
 
 var LMTabs = function LMTabs(props) {
   var className = props.className,
-      _props$size = props.size,
-      size = _props$size === void 0 ? "middle" : _props$size,
+      customizeSize = props.size,
       _props$noBorder = props.noBorder,
       noBorder = _props$noBorder === void 0 ? false : _props$noBorder,
       others = __rest(props, ["className", "size", "noBorder"]);
 
+  var size = customizeSize || React.useContext(SizeContext) || 'middle';
   return /*#__PURE__*/React.createElement(_Tabs, Object.assign({
     size: size
   }, others, {

package/es/index.d.ts

@@ -1,4 +1,5 @@
 export { default as ConfigProvider } from './ConfigProvider';
+export type { SizeType } from './ConfigProvider';
 export { default as Button } from './Button';
 export type { ILmButtonProps } from './Button';
 export { default as ButtonTags } from './ButtonTags';
@@ -116,3 +117,5 @@ export { default as Skeleton } from './Skeleton';
 export type { ISkeletonProps } from './Skeleton';
 export { default as Descriptions } from './Descriptions';
 export type { DescriptionsProps } from './Descriptions';
+export { default as InputRange } from './InputRange';
+export type { InputRangeProps } from './InputRange';

package/es/index.js

@@ -77,4 +77,5 @@ export { default as Badge } from './Badge';
 export { default as Avatar } from './Avatar';
 export { default as Divider } from './Divider';
 export { default as Skeleton } from './Skeleton';
-export { default as Descriptions } from './Descriptions';
+export { default as Descriptions } from './Descriptions';
+export { default as InputRange } from './InputRange';

package/lib/Button/index.js

@@ -17,6 +17,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _SizeContext = _interopRequireDefault(require("../ConfigProvider/SizeContext"));
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -33,14 +35,15 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 var LMButton = function LMButton(props) {
   var children = props.children,
       className = props.className,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'middle' : _props$size,
+      customizeSize = props.size,
       _props$type = props.type,
       type = _props$type === void 0 ? 'default' : _props$type,
       _props$hover = props.hover,
       hover = _props$hover === void 0 ? false : _props$hover,
       restProps = __rest(props, ["children", "className", "size", "type", "hover"]);
 
+  var size = customizeSize || _react.default.useContext(_SizeContext.default) || 'middle'; // const { getPrefixCls, autoInsertSpaceInButton, direction } = React.useContext(ConfigContext);
+
   var classs = (0, _classnames.default)('lm-button', className, {
     'lm-button-icon-only': !children
   }, (0, _defineProperty2.default)({}, "lm-button-".concat(size), size), (0, _defineProperty2.default)({}, "lm-button-".concat(type), type), (0, _defineProperty2.default)({}, "lm-button-".concat(type, "-hover"), type && hover));

package/lib/ConfigProvider/cssVariables.js

@@ -98,7 +98,7 @@ function getStyle(globalPrefixCls, theme) {
 
 
   var cssList = Object.keys(variables).map(function (key) {
-    return "--".concat(globalPrefixCls, "-").concat(key, ": ").concat(variables[key], ";");
+    return globalPrefixCls ? "--".concat(globalPrefixCls, "-").concat(key, ": ").concat(variables[key], ";") : "--".concat(key, ": ").concat(variables[key], ";");
   });
   return "\n  :root {\n    ".concat(cssList.join('\n'), "\n  }\n  ").trim();
 }

package/lib/ConfigProvider/index.d.ts

@@ -8,7 +8,7 @@ import type { CSPConfig, DirectionType, ConfigConsumerProps } from './context';
 import type { RenderEmptyHandler } from './defaultRenderEmpty';
 import type { SizeType } from './SizeContext';
 import SizeContext from './SizeContext';
-export { RenderEmptyHandler, ConfigContext, ConfigConsumer, CSPConfig, DirectionType, ConfigConsumerProps, };
+export { RenderEmptyHandler, ConfigContext, ConfigConsumer, CSPConfig, DirectionType, ConfigConsumerProps, SizeType };
 export declare const configConsumerProps: string[];
 export interface ConfigProviderProps {
     getTargetContainer?: () => HTMLElement;
@@ -43,7 +43,7 @@ export interface ConfigProviderProps {
     virtual?: boolean;
     dropdownMatchSelectWidth?: boolean;
 }
-export declare const defaultPrefixCls = "ant";
+export declare const defaultPrefixCls = "";
 export declare const defaultIconPrefixCls = "anticon";
 declare function getGlobalIconPrefixCls(): string;
 declare const setGlobalConfig: ({ prefixCls, iconPrefixCls, theme, }: Pick<ConfigProviderProps, "prefixCls" | "iconPrefixCls"> & {

package/lib/ConfigProvider/index.js

@@ -55,7 +55,8 @@ var configConsumerProps = ['getTargetContainer', 'getPopupContainer', 'rootPrefi
 
 exports.configConsumerProps = configConsumerProps;
 var PASSED_PROPS = ['getTargetContainer', 'getPopupContainer', 'renderEmpty', 'pageHeader', 'input', 'pagination', 'form'];
-var defaultPrefixCls = 'ant';
+var defaultPrefixCls = ''; //'ant';
+
 exports.defaultPrefixCls = defaultPrefixCls;
 var defaultIconPrefixCls = 'anticon';
 exports.defaultIconPrefixCls = defaultIconPrefixCls;

package/lib/DatePicker/generatePicker/generateSinglePicker.js

@@ -25,12 +25,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _ = require(".");
 
-var _configProvider = require("antd/es/config-provider");
-
-var _DisabledContext = _interopRequireDefault(require("antd/es/config-provider/DisabledContext"));
-
-var _SizeContext = _interopRequireDefault(require("antd/es/config-provider/SizeContext"));
-
 var _context = require("antd/es/form/context");
 
 var _LocaleReceiver = _interopRequireDefault(require("antd/es/locale-provider/LocaleReceiver"));
@@ -43,6 +37,12 @@ var _en_US = _interopRequireDefault(require("antd/es/date-picker/locale/en_US"))
 
 var _util = require("../util");
 
+var _SizeContext = _interopRequireDefault(require("../../ConfigProvider/SizeContext"));
+
+var _DisabledContext = _interopRequireDefault(require("../../ConfigProvider/DisabledContext"));
+
+var _context2 = require("../../ConfigProvider/context");
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -74,7 +74,7 @@ function generatePicker(generateConfig) {
       console.log(restProps, '---restProps');
       (0, _warning.default)(picker !== 'quarter', displayName, "DatePicker.".concat(displayName, " is legacy usage. Please use DatePicker[picker='").concat(picker, "'] directly."));
 
-      var _useContext = (0, React.useContext)(_configProvider.ConfigContext),
+      var _useContext = (0, React.useContext)(_context2.ConfigContext),
           getPrefixCls = _useContext.getPrefixCls,
           direction = _useContext.direction,
           getPopupContainer = _useContext.getPopupContainer;

package/lib/Form/container.js

@@ -17,6 +17,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _lodash = require("lodash");
 
+var _util = require("./util");
+
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -77,22 +79,7 @@ var LMContainer = function LMContainer(props) {
   var changeSize = function changeSize() {
     var _a;
 
-    var index = 1;
-    containerWrapRef.current.querySelectorAll('.ant-form-item').forEach(function (el) {
-      if (el.classList.contains('ant-form-item-responsive')) {
-        if (index % 3 === 0) {
-          el.classList.add('nth-three');
-        } else if (index % 4 === 0) {
-          el.classList.add('nth-four');
-        } else if (index % 5 === 0) {
-          el.classList.add('nth-five');
-        }
-
-        index++;
-      } else {
-        index = 1;
-      }
-    });
+    (0, _util.updateFormResponsiveClass)(containerWrapRef.current);
 
     var _ref = ((_a = containerWrapRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {},
         _ref$width = _ref.width,

package/lib/Form/style/index.css

@@ -563,10 +563,10 @@ p {
   flex-direction: row;
   flex-wrap: wrap;
 }
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item {
+.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item-responsive {
   margin-right: 24px;
 }
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item .ant-form-item-control {
+.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item-responsive .ant-form-item-control {
   width: 100%;
 }
 .lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item {
@@ -684,3 +684,9 @@ p {
 .lm_form-item-tip-error-bottom .ant-form-item-explain .ant-form-item-explain-error {
   margin-left: -4px;
 }
+.ant-form-item.ant-form-item-responsive .lm_select {
+  width: 100%;
+}
+.ant-form-item-explain-error {
+  font-size: 12px;
+}

package/lib/Form/util.d.ts

@@ -1,3 +1,4 @@
 import type { InternalNamePath } from './interface';
 export declare function toArray<T>(candidate?: T | T[] | false): T[];
 export declare function getFieldId(namePath: InternalNamePath, formName?: string): string | undefined;
+export declare function updateFormResponsiveClass(dom: HTMLElement): void;

package/lib/Form/util.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getFieldId = getFieldId;
 exports.toArray = toArray;
+exports.updateFormResponsiveClass = updateFormResponsiveClass;
 // form item name black list.  in form ,you can use form.id get the form item element.
 // use object hasOwnProperty will get better performance if black list is longer.
 var formItemNameBlackList = ['parentNode']; // default form item id prefix.
@@ -26,4 +27,27 @@ function getFieldId(namePath, formName) {
 
   var isIllegalName = formItemNameBlackList.indexOf(mergedId) >= 0;
   return isIllegalName ? "".concat(defaultItemNamePrefixCls, "_").concat(mergedId) : mergedId;
+}
+
+function updateFormResponsiveClass(dom) {
+  var form = dom.tagName.toLocaleLowerCase() === 'form' ? dom : dom.querySelector('form');
+
+  if (form) {
+    var index = 0;
+    Array.prototype.slice.call(form.children).forEach(function (element) {
+      if (element.classList.contains('ant-form-item-responsive')) {
+        index += 1;
+
+        if (index % 3 === 0) {
+          element.classList.add('nth-three');
+        } else if (index % 4 === 0) {
+          element.classList.add('nth-four');
+        } else if (index % 5 === 0) {
+          element.classList.add('nth-five');
+        }
+      } else {
+        index = 0;
+      }
+    });
+  }
 }

package/lib/ImageViewer/components/Carousel.js

@@ -16,7 +16,8 @@ var ListItem = function ListItem(_ref) {
       index = _ref.index,
       item = _ref.item,
       instance = _ref.instance;
-  var state = instance.state;
+  var state = instance.state,
+      getIsVideo = instance.getIsVideo;
   var transformProps = (0, _react.useMemo)(function () {
     if (index !== state.currentIndex) return {};
     var _state$transform = state.transform,
@@ -29,7 +30,24 @@ var ListItem = function ListItem(_ref) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "preview_item",
     key: key
-  }, /*#__PURE__*/_react.default.createElement("img", {
+  }, getIsVideo(item) ?
+  /*#__PURE__*/
+  // @ts-ignore
+  // eslint-disable-next-line jsx-a11y/media-has-caption
+  _react.default.createElement("video", {
+    width: "100%",
+    height: "100%",
+    controls: "controls"
+  }, /*#__PURE__*/_react.default.createElement("source", {
+    src: item,
+    type: "video/mp4"
+  }), /*#__PURE__*/_react.default.createElement("source", {
+    src: item,
+    type: "video/webm"
+  }), /*#__PURE__*/_react.default.createElement("source", {
+    src: item,
+    type: "video/ogg"
+  }), "\u89C6\u9891\u64AD\u653E\u5931\u8D25\uFF01") : /*#__PURE__*/_react.default.createElement("img", {
     src: item,
     alt: "",
     style: transformProps

package/lib/ImageViewer/components/Thumb.js

@@ -13,8 +13,28 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var Thumb = function Thumb(_ref) {
-  var instance = _ref.instance;
+var _linkmoreDesign = require("linkmore-design");
+
+var ThumbItem = function ThumbItem(_ref) {
+  var item = _ref.item,
+      instance = _ref.instance;
+  var getIsVideo = instance.getIsVideo;
+
+  if (getIsVideo(item)) {
+    return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
+      type: "lmweb-video",
+      className: "thumb_item_icon"
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement("img", {
+    src: item,
+    alt: ""
+  });
+};
+
+var Thumb = function Thumb(_ref2) {
+  var instance = _ref2.instance;
   var state = instance.state,
       urlList = instance.urlList,
       slickGoTo = instance.slickGoTo;
@@ -39,9 +59,9 @@ var Thumb = function Thumb(_ref) {
       onClick: function onClick(e) {
         return handleGoTo(e, idx);
       }
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      src: v,
-      alt: ""
+    }, /*#__PURE__*/_react.default.createElement(ThumbItem, {
+      item: v,
+      instance: instance
     }));
   }));
 };

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

@@ -6,6 +6,7 @@ declare const useCoreOptions: ({ state, dispatch, props, previewRef }: {
 }) => {
     CoreMethods: {
         getVisible: () => any;
+        getIsVideo: (url: any) => boolean;
         onClose: () => void;
         setTransform: (type: any) => void;
         afterChange: (currentIndex: any) => void;