@kdcloudjs/kdesign 1.7.39 → 1.7.40

package/lib/qr-code/qr-code.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.QRCodeTypes = exports.QRCodeStatus = exports.QRCodeErrorLevels = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+var _utils = require("../_utils");
+var _qrcode = require("qrcode.react");
+var _spin = _interopRequireDefault(require("../spin"));
+var _button = _interopRequireDefault(require("../button"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+var _type = require("../_utils/type");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var QRCodeTypes = (0, _type.tuple)('canvas', 'svg');
+exports.QRCodeTypes = QRCodeTypes;
+var QRCodeStatus = (0, _type.tuple)('active', 'expired', 'loading');
+exports.QRCodeStatus = QRCodeStatus;
+var QRCodeErrorLevels = (0, _type.tuple)('L', 'M', 'Q', 'H');
+exports.QRCodeErrorLevels = QRCodeErrorLevels;
+var QRCode = function QRCode(props) {
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  var qrCodeProps = (0, _utils.getCompProps)('QRCode', userDefaultProps, props);
+  var value = qrCodeProps.value,
+    size = qrCodeProps.size,
+    status = qrCodeProps.status,
+    style = qrCodeProps.style,
+    type = qrCodeProps.type,
+    errorLevel = qrCodeProps.errorLevel,
+    color = qrCodeProps.color,
+    onRefresh = qrCodeProps.onRefresh,
+    icon = qrCodeProps.icon,
+    _qrCodeProps$iconSize = qrCodeProps.iconSize,
+    iconSize = _qrCodeProps$iconSize === void 0 ? 24 : _qrCodeProps$iconSize,
+    bgColor = qrCodeProps.bgColor,
+    _qrCodeProps$bordered = qrCodeProps.bordered,
+    bordered = _qrCodeProps$bordered === void 0 ? true : _qrCodeProps$bordered;
+  var className = qrCodeProps.className,
+    customPrefixcls = qrCodeProps.prefixCls;
+  var qrCodePrefixCls = getPrefixCls(prefixCls, 'qrcode', customPrefixcls);
+  var qrCodeClass = (0, _classnames.default)(qrCodePrefixCls, className, (0, _defineProperty2.default)({}, "".concat(qrCodePrefixCls, "-borderless"), !bordered));
+  var gap = 8;
+  var containerSize = size + gap * 2 + 2;
+  (0, _devwarning.default)(!value === false, 'QRCode', 'need to receive `value` props');
+  (0, _devwarning.default)(icon && errorLevel === 'L', 'QRCode', 'ErrorLevel `L` is not recommended to be used with `icon`, for scanning result would be affected by low level.');
+  var imageSettings = {
+    src: icon,
+    x: undefined,
+    y: undefined,
+    height: iconSize,
+    width: iconSize,
+    excavate: true
+  };
+  var codeProps = {
+    value: value,
+    size: size,
+    level: errorLevel,
+    fgColor: color,
+    imageSettings: icon ? imageSettings : undefined
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: qrCodeClass,
+    style: (0, _extends2.default)((0, _extends2.default)({}, style), {
+      width: "".concat(containerSize, "px"),
+      height: "".concat(containerSize, "px"),
+      backgroundColor: bgColor
+    })
+  }, status !== 'active' && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(qrCodePrefixCls, "-mask")
+  }, status === 'loading' && /*#__PURE__*/_react.default.createElement(_spin.default, null), status === 'expired' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
+    className: "".concat(qrCodePrefixCls, "-expired")
+  }, "\u4E8C\u7EF4\u7801\u8FC7\u671F"), onRefresh && /*#__PURE__*/_react.default.createElement(_button.default, {
+    icon: /*#__PURE__*/_react.default.createElement(_icon.default, {
+      type: "refresh"
+    }),
+    type: "text",
+    onClick: onRefresh,
+    size: "middle"
+  }, "\u70B9\u51FB\u5237\u65B0"))), type === 'canvas' ? /*#__PURE__*/_react.default.createElement(_qrcode.QRCodeCanvas, (0, _extends2.default)({}, codeProps)) : /*#__PURE__*/_react.default.createElement(_qrcode.QRCodeSVG, (0, _extends2.default)({}, codeProps)));
+};
+QRCode.displayName = 'QRCode';
+var _default = QRCode;
+exports.default = _default;

package/lib/qr-code/style/css.js

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

package/lib/qr-code/style/index.css

@@ -0,0 +1,154 @@
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+.kd-qrcode {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: 0;
+  border-radius: var(--kd-c-qrcode-border-radius, 2px);
+  border: var(--kd-c-qrcode-size-border, 1px) solid var(--kd-c-qrcode-color-border, rgba(5, 5, 5, 0.06));
+  padding: var(--kd-c-qrcode-spacing-padding-horizontal, 8px);
+  font-size: var(--kd-c-qrcode-font-size, 12px);
+  list-style: none;
+  overflow: hidden;
+}
+.kd-qrcode-expired {
+  margin-bottom: var(--kd-c-qrcode-spacing-margin-vertical, 4px);
+}
+.kd-qrcode-mask {
+  position: absolute;
+  z-index: 10;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 100%;
+  height: 100%;
+  color: var(--kd-c-qrcode-color-text, #111111);
+  background: var(--kd-c-qrcode-color-background, rgba(255, 255, 255, 0.96));
+  text-align: center;
+}
+.kd-qrcode-borderless {
+  border: none;
+}

package/lib/qr-code/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/lib/qr-code/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.less");
+require("./index.less");

package/lib/qr-code/style/index.less

@@ -0,0 +1,42 @@
+@import '../../style/themes/index';
+@import './mixin.less';
+@qrcode-prefix-cls: ~'@{kd-prefix}-qrcode';
+@qrcode-prefix-icon-cls: ~'@{kd-prefix}-icon';
+@--kd-c-spin-page-dot-spin-sizing-square: 30px;
+
+.@{qrcode-prefix-cls} {
+  .qrcode;
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  border-radius: @qrcode-border-radius;
+  border: @qrcode-size-boder solid @qrcode-color-border;
+  padding: @qrcode-spacing-padding-horizontal;
+  font-size: @qrcode-font-size;
+  list-style: none;
+  overflow: hidden;
+
+  &-expired{
+    margin-bottom: @qrcode-spacing-margin-vertical;
+  }
+
+  &-mask{
+    position: absolute;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: @qrcode-color-text;
+    background: @qrcode-color-background;
+    text-align: center;
+  }
+  &-borderless{
+    border: none;
+  }
+}

package/lib/qr-code/style/mixin.less

@@ -0,0 +1,6 @@
+@import './token.less';
+
+.qrcode() {
+  // color: @qrcode-color-text;
+  // font-size: @qrcode-font-size;
+}

package/lib/qr-code/style/token.less

@@ -0,0 +1,24 @@
+@import '../../style/themes/token.less';
+@qrcode-custom-prefix: ~'--@{kd-prefix}-c-qrcode';
+// color
+@qrcode-color-text: var(~'@{qrcode-custom-prefix}-color-text', #111111);
+@qrcode-color-border: var(~'@{qrcode-custom-prefix}-color-border',rgba(5, 5, 5, 0.06));
+@qrcode-color-background: var(~'@{qrcode-custom-prefix}-color-background',rgba(255, 255, 255, 0.96));
+// font
+@qrcode-font-size: var(~'@{qrcode-custom-prefix}-font-size', 12px); // 组件级token
+
+// line-height
+
+// motion
+
+// radius
+@qrcode-border-radius: var(~'@{qrcode-custom-prefix}-border-radius', 2px);
+// shadow
+
+// sizing
+@qrcode-size-boder: var(~'@{qrcode-custom-prefix}-size-border',1px);
+@qrcode-size-spin: var(--kd-c-spin-page-dot-spin-sizing-square,28px);
+// spacing
+@qrcode-spacing-padding-horizontal: var(~'@{qrcode-custom-prefix}-spacing-padding-horizontal', 8px);
+@qrcode-spacing-margin-vertical: var(~'@{qrcode-custom-prefix}-spacing-margin-vertical',4px);
+// z-index

package/lib/style/components.less

@@ -33,6 +33,7 @@
 @import "../pagination/style/index.less";
 @import "../popconfirm/style/index.less";
 @import "../progress/style/index.less";
+@import "../qr-code/style/index.less";
 @import "../radio/style/index.less";
 @import "../rate/style/index.less";
 @import "../search/style/index.less";

package/lib/tree/tree.js

@@ -154,7 +154,7 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       setSearchStatus('NONE');
     }
   }, [filterValue]);
-  var _useExpand = (0, _treeHooks.useExpand)(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus),
+  var _useExpand = (0, _treeHooks.useExpand)(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus, filterValue),
     _useExpand2 = (0, _slicedToArray2.default)(_useExpand, 2),
     expandedKeys = _useExpand2[0],
     setExpandedKeys = _useExpand2[1];
@@ -171,7 +171,7 @@ var InternalTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     setHalfCheckedKeys = _useChecked2[3];
   var filterData = _react.default.useMemo(function () {
     return (0, _treeUtils.getFilterData)(spreadAttrData, filterTreeNode, isSearching, posData, keysData);
-  }, [spreadAttrData, isSearching, posData, keysData]);
+  }, [spreadAttrData, isSearching, posData, keysData, filterValue]);
   (0, _react.useEffect)(function () {
     var _a, _b;
     if (typeof scrollKey === 'undefined') {

package/lib/tree/treeHooks.d.ts

@@ -4,6 +4,6 @@ export declare const useViewportHeight: (height: number, listRef: React.RefObjec
 export declare const useVisibleDataMemo: (virtual: boolean, filterData: TreeNodeData[], viewportHeight: number, estimatedItemSize: number, start: number) => TreeNodeData[][];
 export declare const usePlantomHeightEffect: (plantomRef: React.RefObject<HTMLElement>, filterData: TreeNodeData[], estimatedItemSize: number) => void;
 export declare const useChecked: (checkStrictly: boolean, checkedKeysProps: string[], defaultCheckedKeys: string[], _flattenAllData: any[], _maxLevel: number, checkable: boolean, keysData: KeysDataType) => readonly [string[], string[], React.Dispatch<React.SetStateAction<string[]>>, React.Dispatch<React.SetStateAction<string[]>>];
-export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchStatus: SearchStatus) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
+export declare const useExpand: (flattenAllData: any[], expandedKeysProps: string[], defaultExpandedKeys: string[], defaultExpandAll: boolean, defaultExpandRoot: boolean, defaultExpandParent: boolean, scrollKey: string, isInit: boolean, filterTreeNode: FunctionConstructor, isSearching: boolean, keysData: KeysDataType, searchStatus: SearchStatus, filterValue: string) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];
 export declare const useScrollToKey: (scrollKey: string, index: number, estimatedItemSize: number, scrollRef: any, viewportHeight: number, treeNodePrefixCls: string) => void;
 export declare const useSelect: (selectedKeysProps: string[], defaultSelectedKeys: string[]) => readonly [string[], React.Dispatch<React.SetStateAction<string[]>>];

package/lib/tree/treeHooks.js

@@ -75,7 +75,7 @@ var useChecked = function useChecked(checkStrictly, checkedKeysProps, defaultChe
   return [checkedKeys, halfCheckedKeys, setCheckedKeys, setHalfCheckedKeys];
 };
 exports.useChecked = useChecked;
-var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus) {
+var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExpandedKeys, defaultExpandAll, defaultExpandRoot, defaultExpandParent, scrollKey, isInit, filterTreeNode, isSearching, keysData, searchStatus, filterValue) {
   var expandScrollkeys = [];
   if (scrollKey) {
     var pos = (0, _treeUtils.getPos)(flattenAllData, scrollKey);
@@ -90,7 +90,7 @@ var useExpand = function useExpand(flattenAllData, expandedKeysProps, defaultExp
     setExpandedKeys = _React$useState8[1];
   _react.default.useEffect(function () {
     setExpandedKeys(initialExpandedKeys);
-  }, [flattenAllData, expandedKeysProps, defaultExpandAll, defaultExpandedKeys, defaultExpandRoot, defaultExpandParent, scrollKey, searchStatus]);
+  }, [flattenAllData, expandedKeysProps, defaultExpandAll, defaultExpandedKeys, defaultExpandRoot, defaultExpandParent, scrollKey, searchStatus, filterValue]);
   return [expandedKeys, setExpandedKeys];
 };
 exports.useExpand = useExpand;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/kdesign",
-  "version": "1.7.39",
+  "version": "1.7.40",
   "description": "KDesign 金蝶前端react 组件库",
   "title": "kdesign",
   "keywords": [
@@ -78,7 +78,7 @@
     "@babel/runtime-corejs3": "^7.11.2",
     "@babel/standalone": "^7.14.3",
     "@kdcloudjs/kdesign-icons": "^1.0.0",
-    "@kdcloudjs/table": "1.2.0-canary.6",
+    "@kdcloudjs/table": "1.2.0-canary.8",
     "@popperjs/core": "^2.5.4",
     "@types/js-cookie": "^3.0.3",
     "async-validator": "^3.5.1",
@@ -91,6 +91,7 @@
     "date-fns": "2.28.0",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.20",
+    "qrcode.react": "^3.1.0",
     "react-color": "^2.19.3",
     "react-draggable": "^4.4.3",
     "react-popper": "^2.2.3",
@@ -167,6 +168,7 @@
     "identity-obj-proxy": "^3.0.0",
     "intersection-observer": "^0.11.0",
     "jest": "^26.4.2",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-enzyme": "^7.1.2",
     "jest-enzyme": "^7.1.2",
     "jest-image-snapshot": "^4.2.0",