@kdcloudjs/kdesign 1.0.2

package/lib/menu/menu.js

@@ -0,0 +1,191 @@
+"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 = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactChildren = require("../_utils/react-children");
+
+var _configProvider = require("../config-provider");
+
+var _utils = require("../_utils");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+
+var _menuItem = _interopRequireDefault(require("./menuItem"));
+
+var _subMenu = _interopRequireDefault(require("./subMenu"));
+
+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 __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var isFunction = function isFunction(fn) {
+  return fn && typeof fn === 'function';
+};
+
+var Menu = function Menu(props) {
+  var _context2, _classNames;
+
+  var _a;
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      pkgPrefixCls = _React$useContext.prefixCls,
+      userDefaultProps = _React$useContext.compDefaultProps;
+
+  var _b = (0, _utils.getCompProps)('Menu', userDefaultProps, props),
+      customPrefixcls = _b.prefixCls,
+      mode = _b.mode,
+      inlineIndent = _b.inlineIndent,
+      forceSubMenuRender = _b.forceSubMenuRender,
+      additionalTools = _b.additionalTools,
+      onClick = _b.onClick,
+      onOpenChange = _b.onOpenChange,
+      children = _b.children,
+      className = _b.className,
+      theme = _b.theme,
+      collapsed = _b.collapsed,
+      restProps = __rest(_b, ["prefixCls", "mode", "inlineIndent", "forceSubMenuRender", "additionalTools", "onClick", "onOpenChange", "children", "className", "theme", "collapsed"]);
+
+  var prefixCls = getPrefixCls(pkgPrefixCls, 'menu', customPrefixcls);
+  (0, _devwarning.default)(['inline', 'vertical', undefined].indexOf(mode) === -1, 'menu', "cannot found menu mode '".concat(mode, "'"));
+  var defaultSelectedKey = ('selectedKey' in restProps ? restProps.selectedKey : restProps.defaultSelectedKey) || '';
+  var defaultOpenKeys = ('openKeys' in restProps ? restProps.openKeys : restProps.defaultOpenKeys) || []; // const [collapsed, setCollapsed] = React.useState<boolean | undefined>(restProps.collapsed)
+
+  var _React$useState = React.useState(defaultSelectedKey),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      selectedKey = _React$useState2[0],
+      setSelectedKey = _React$useState2[1];
+
+  var _React$useState3 = React.useState(defaultOpenKeys),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      openKeys = _React$useState4[0],
+      setOpenKeys = _React$useState4[1]; // triggerSubMenuAction内嵌模式固定为click，即该值设置只对垂直模式有效
+
+
+  if (mode === 'inline') {
+    restProps.triggerSubMenuAction = 'click';
+  } // React.useEffect(() => {
+  //   setCollapsed(restProps.collapsed)
+  // }, [restProps.collapsed])
+
+
+  var handleOnClick = function handleOnClick(info) {
+    setSelectedKey(info.key);
+
+    if (mode !== 'inline' && openKeys.length > 0) {
+      setOpenKeys([]);
+    }
+
+    onClick && onClick(info);
+  };
+
+  var handleMouseEnterMenu = function handleMouseEnterMenu() {
+    if (isFunction(restProps.onMouseEnter)) {
+      restProps.onMouseEnter();
+    }
+  };
+
+  var handleMouseLeaveMenu = function handleMouseLeaveMenu() {
+    if (isFunction(restProps.onMouseLeave)) {
+      restProps.onMouseLeave();
+    }
+  }; // 子菜单展开关闭的回调
+
+
+  var handleOnOpenChange = function handleOnOpenChange(openKey) {
+    var index = openKeys.indexOf(openKey);
+
+    if (index > -1) {
+      (0, _splice.default)(openKeys).call(openKeys, index, 1);
+      setOpenKeys(openKeys);
+    } else {
+      setOpenKeys((0, _concat.default)(openKeys).call(openKeys, openKey));
+    }
+
+    onOpenChange && onOpenChange(openKey);
+  };
+
+  var renderMenu = function renderMenu() {
+    var _context;
+
+    return /*#__PURE__*/React.createElement("ul", null, (0, _map.default)(_context = (0, _reactChildren.toArray)(children)).call(_context, function (item, i) {
+      if (!item) return;
+      var key = (item === null || item === void 0 ? void 0 : item.key) || i;
+      return /*#__PURE__*/React.cloneElement(item, {
+        key: key,
+        keyValue: key,
+        collapsed: collapsed,
+        mode: mode,
+        openKeys: openKeys,
+        selectedKey: selectedKey,
+        triggerSubMenuAction: restProps.triggerSubMenuAction,
+        forceSubMenuRender: forceSubMenuRender,
+        handleOnOpenChange: handleOnOpenChange,
+        handleOnClick: handleOnClick,
+        inlineIndent: inlineIndent
+      });
+    }));
+  };
+
+  var style = (0, _extends2.default)((0, _extends2.default)({}, restProps.style), {
+    width: !collapsed && ((_a = restProps.style) === null || _a === void 0 ? void 0 : _a.width),
+    transition: 'width 0.2s cubic-bezier(0,.4,.4,1)'
+  });
+  var mouseEvent = {
+    onMouseLeave: handleMouseLeaveMenu,
+    onMouseEnter: handleMouseEnterMenu
+  };
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    className: (0, _classnames.default)(prefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-inline"), mode === 'inline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-vertical"), mode !== 'inline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-collapsed"), true), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, theme === 'light' ? 'light' : 'dark'), true), _classNames)),
+    role: "menu",
+    style: style
+  }, mouseEvent), children && renderMenu(), additionalTools);
+};
+
+Menu.displayName = 'Menu';
+Menu.Item = _menuItem.default;
+Menu.SubMenu = _subMenu.default;
+var _default = Menu;
+exports.default = _default;

package/lib/menu/menuItem.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface MenuItemProps extends React.HTMLAttributes<HTMLElement> {
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    key?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}
+declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<unknown>>;
+export default MenuItem;

package/lib/menu/menuItem.js

@@ -0,0 +1,174 @@
+"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 = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _utils = require("../_utils");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _util = require("./util");
+
+var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+
+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 __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var renderItemChildren = function renderItemChildren(children) {
+  if (typeof children === 'string') {
+    return /*#__PURE__*/React.createElement("span", null, children);
+  }
+
+  return (0, _util.renderReactNodeFunction)(children);
+};
+
+var InternalMenuItem = function InternalMenuItem(props, ref) {
+  var _classNames;
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      pkgPrefixCls = _React$useContext.prefixCls,
+      userDefaultProps = _React$useContext.compDefaultProps; // 属性需要合并一遍用户定义的默认属性
+
+
+  var _a = (0, _utils.getCompProps)('MenuItem', userDefaultProps, props),
+      customPrefixcls = _a.prefixCls,
+      icon = _a.icon,
+      mode = _a.mode,
+      _a$level = _a.level,
+      level = _a$level === void 0 ? 1 : _a$level,
+      disabled = _a.disabled,
+      children = _a.children,
+      collapsed = _a.collapsed,
+      keyValue = _a.keyValue,
+      selectedKey = _a.selectedKey,
+      subMenuMode = _a.subMenuMode,
+      inlineIndent = _a.inlineIndent,
+      className = _a.className,
+      handleOnClick = _a.handleOnClick,
+      _a$paddingLeft = _a.paddingLeft,
+      paddingLeft = _a$paddingLeft === void 0 ? 0 : _a$paddingLeft,
+      style = _a.style,
+      restProps = __rest(_a, ["prefixCls", "icon", "mode", "level", "disabled", "children", "collapsed", "keyValue", "selectedKey", "subMenuMode", "inlineIndent", "className", "handleOnClick", "paddingLeft", "style"]);
+
+  (0, _devwarning.default)(!keyValue && keyValue !== 0, 'menuitem', 'cannot found children in Menu.Item');
+  var prefixCls = getPrefixCls(pkgPrefixCls, 'menu-item', customPrefixcls);
+  var menuItemRef = ref || /*#__PURE__*/React.createRef();
+
+  var preventClick = function preventClick() {
+    if (disabled || mode === 'inline') return true;
+    return false;
+  };
+
+  var handleOnMouseEnter = function handleOnMouseEnter(e) {
+    if (preventClick()) return;
+    restProps.onMouseEnter && restProps.onMouseEnter(e);
+  };
+
+  var handleOnMouseLeave = function handleOnMouseLeave(e) {
+    if (preventClick()) return;
+    restProps.onMouseLeave && restProps.onMouseLeave(e);
+  };
+
+  var handleOnClickItem = function handleOnClickItem(e) {
+    if (disabled) return;
+    e.stopPropagation();
+    var info = {
+      key: keyValue,
+      keyPath: [keyValue],
+      domEvent: e.nativeEvent
+    };
+    handleOnClick(info);
+  };
+
+  var getPaddingLeft = function getPaddingLeft() {
+    if (icon || subMenuMode === 'horizontal') {
+      return 0;
+    }
+
+    if (level > 1 && mode !== 'inline') {
+      return _util.DEFAUTL_PADDING;
+    } // if (level === 1 && icon) {
+    //   return 0
+    // }
+    // 无图标显示首个字符不需要paddingleft
+
+
+    if (!icon && collapsed && level === 1 && typeof children === 'string') {
+      return 0;
+    }
+
+    return inlineIndent + paddingLeft;
+  };
+
+  var mouseEvent = {
+    onClick: handleOnClickItem,
+    onMouseLeave: handleOnMouseLeave,
+    onMouseEnter: handleOnMouseEnter
+  };
+  var titleStyle = {
+    paddingLeft: "".concat(getPaddingLeft(), "px"),
+    paddingRight: mode !== 'inline' && level > 1 ? "".concat(_util.DEFAUTL_PADDING, "px") : 0
+  };
+
+  var renderTitle = function renderTitle() {
+    if (!icon && collapsed && level === 1 && typeof children === 'string') {
+      return /*#__PURE__*/React.createElement("p", null, children.charAt(0));
+    }
+
+    return renderItemChildren(children);
+  };
+
+  return /*#__PURE__*/React.createElement("li", (0, _extends2.default)({
+    ref: menuItemRef,
+    className: (0, _classnames.default)(className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, prefixCls, subMenuMode !== 'horizontal'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-collapsed"), collapsed && level === 1), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-active"), selectedKey === keyValue), _classNames)),
+    role: "menuitem",
+    style: style,
+    key: keyValue,
+    title: children
+  }, mouseEvent), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-title")),
+    style: titleStyle
+  }, icon && /*#__PURE__*/React.cloneElement((0, _util.renderReactNodeFunction)(icon), {
+    className: (0, _classnames.default)("".concat(prefixCls, "-icon"))
+  }), renderTitle()));
+};
+
+var MenuItem = /*#__PURE__*/React.forwardRef(InternalMenuItem);
+MenuItem.displayName = 'MenuItem';
+var _default = MenuItem;
+exports.default = _default;

package/lib/menu/style/css.js

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