@kdcloudjs/kdesign 1.0.2

package/es/tabs/tabs.js

@@ -0,0 +1,447 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useContext, useState, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import { TabsContextProvider } from './context';
+import { getCompProps } from '../_utils';
+import { omit } from '../_utils/omit';
+import { tuple } from '../_utils/type';
+import TabPane from './tab-pane';
+import Line from './active-line';
+import Icon from '../icon';
+import ArrowButton from './arrow-button';
+import Dropdown from '../dropdown';
+import Carousel from '../carousel';
+export var TabsTypes = tuple('line', 'card', 'grid', 'dynamic');
+export var TabsSizes = tuple('middle', 'small');
+export var TabsPositions = tuple('top', 'left', 'right', 'bottom');
+export var EffectTypes = tuple('scrollx', 'fade', 'none'); // 滑动，渐显， 无动画
+
+function getDefaultActiveKey(props) {
+  var activeKey;
+  React.Children.forEach(props.children, function (child) {
+    if (child && !activeKey && !child.props.disabled) {
+      activeKey = child.key;
+    }
+  });
+  return activeKey;
+}
+
+var Tabs = function Tabs(props) {
+  var _context, _classNames, _context2, _context3, _context4, _classNames2;
+
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps;
+
+  var tabsProps = getCompProps('Tabs', userDefaultProps, props);
+  var type = tabsProps.type,
+      size = tabsProps.size,
+      className = tabsProps.className,
+      customPrefixcls = tabsProps.prefixCls,
+      position = tabsProps.position,
+      disabled = tabsProps.disabled,
+      noContainer = tabsProps.noContainer,
+      defaultActiveKey = tabsProps.defaultActiveKey,
+      showScrollArrow = tabsProps.showScrollArrow,
+      _tabsProps$effect = tabsProps.effect,
+      effect = _tabsProps$effect === void 0 ? 'none' : _tabsProps$effect,
+      children = tabsProps.children,
+      onChange = tabsProps.onChange;
+  var tabsPrefixCls = getPrefixCls(prefixCls, 'tabs', customPrefixcls);
+  var activeKey;
+
+  if (tabsProps.activeKey) {
+    activeKey = tabsProps.activeKey;
+  } else if (defaultActiveKey) {
+    activeKey = defaultActiveKey;
+  } else {
+    activeKey = getDefaultActiveKey(tabsProps);
+  }
+
+  var carouselData = [];
+
+  var _useState = useState(activeKey),
+      _useState2 = _slicedToArray(_useState, 2),
+      curActiveKey = _useState2[0],
+      setCurActiveKey = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      triggerKey = _useState4[0],
+      setTriggerKey = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      left = _useState6[0],
+      setLeft = _useState6[1];
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      width = _useState8[0],
+      setWidth = _useState8[1];
+
+  var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      boxWidth = _useState10[0],
+      setBoxWidth = _useState10[1];
+
+  var _useState11 = useState(0),
+      _useState12 = _slicedToArray(_useState11, 2),
+      ListWidth = _useState12[0],
+      setListWidth = _useState12[1];
+
+  var _useState13 = useState(0),
+      _useState14 = _slicedToArray(_useState13, 2),
+      ListPostion = _useState14[0],
+      setListPosition = _useState14[1];
+
+  var tabRef = useRef(null);
+  var tabListRef = useRef(null);
+  var carouselRef = useRef(null);
+
+  var handleActive = function handleActive(id, e) {
+    setCurActiveKey(id);
+    onChange && onChange(id, e);
+  };
+
+  var getActiveLinePosition = function getActiveLinePosition(left, width) {
+    setLeft(left);
+    setWidth(width);
+  };
+
+  var getTriggerKey = function getTriggerKey(key) {
+    setTriggerKey(key);
+  };
+
+  useEffect(function () {
+    setCurActiveKey(activeKey);
+  }, [activeKey]);
+  useEffect(function () {
+    var _a;
+
+    var index = _findIndexInstanceProperty(carouselData).call(carouselData, function (data) {
+      return String(curActiveKey) === String(data.key);
+    });
+
+    if (index !== -1) {
+      (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.jumpTo(index);
+    }
+  }, [curActiveKey, carouselRef, carouselData]);
+  useEffect(function () {
+    var _a;
+
+    if (tabListRef.current) {
+      setListWidth(((_a = tabListRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
+    }
+  }, [tabListRef, children]);
+  useEffect(function () {
+    var _a, _b, _c;
+
+    if (tabRef.current) {
+      setBoxWidth(((_a = tabRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
+    }
+
+    var offset = 0; // TODO margin需要是变量的形式，不能写死
+
+    var margin = type === 'line' ? 24 : 0;
+    var curOffset = ((_b = tabListRef.current) === null || _b === void 0 ? void 0 : _b.offsetLeft) || 0;
+    var boxWidth = ((_c = tabRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth) || 0;
+
+    if (left + width + margin + curOffset >= boxWidth) {
+      offset = ListWidth - left - width - margin > 48 ? boxWidth - left - width - margin - 48 : boxWidth - ListWidth;
+      setListPosition(offset);
+      return;
+    }
+
+    if (left + curOffset < 48 && curOffset) {
+      offset = left > 48 ? 48 - left : 0;
+      setListPosition(offset); // return
+    }
+  }, [tabRef, left, width, type, ListWidth]);
+  var tabsClasses = classNames(tabsPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(tabsPrefixCls, "-")).call(_context, position), position), _defineProperty(_classNames, "".concat(tabsPrefixCls, "-noContainer"), noContainer), _classNames));
+  var tabNavsClasses = classNames("".concat(tabsPrefixCls, "-navs"), (_classNames2 = {}, _defineProperty(_classNames2, _concatInstanceProperty(_context2 = "".concat(tabsPrefixCls, "-navs-")).call(_context2, type), type), _defineProperty(_classNames2, _concatInstanceProperty(_context3 = "".concat(tabsPrefixCls, "-navs-")).call(_context3, position), position), _defineProperty(_classNames2, _concatInstanceProperty(_context4 = "".concat(tabsPrefixCls, "-navs-")).call(_context4, size), size), _defineProperty(_classNames2, "".concat(tabsPrefixCls, "-navs-disabled"), disabled), _classNames2));
+  var leftOperations;
+  var rightOperations;
+  var contextMenuList;
+  var containerPanes = [];
+  var fomatChildren = Object.prototype.toString.call(children) === '[object Object]' ? [children] : children;
+  fomatChildren === null || fomatChildren === void 0 ? void 0 : fomatChildren.forEach(function (child) {
+    if (Object.prototype.toString.call(child) === '[object Object]' && child.type.displayName === 'TabPane') {
+      if (child.props.specialPane === 'left') {
+        leftOperations = child;
+        return;
+      }
+
+      if (child.props.specialPane === 'right') {
+        rightOperations = child;
+        return;
+      }
+
+      if (child.props.specialPane === 'contextMenu') {
+        contextMenuList = child;
+        return;
+      }
+
+      containerPanes.push(child);
+      return;
+    }
+
+    if (Object.prototype.toString.call(child) === '[object Array]') {
+      containerPanes = _concatInstanceProperty(containerPanes).call(containerPanes, [], child);
+    }
+  });
+
+  var formatTabPane = function formatTabPane(child) {
+    if (Object.prototype.toString.call(child) === '[object Object]' && child.type.displayName === 'TabPane') {
+      return /*#__PURE__*/React.createElement(TabPane, _extends({}, child.props, {
+        key: child.key,
+        id: child.key,
+        onChange: handleActive
+      }));
+    }
+
+    return null;
+  };
+
+  var renderActiveLine = function renderActiveLine() {
+    return ['line', 'dynamic'].indexOf(type) > -1 && !disabled ? /*#__PURE__*/React.createElement(Line, {
+      left: left,
+      width: width
+    }) : null;
+  };
+
+  var renderLeftArrow = function renderLeftArrow() {
+    var _context5, _classNames3;
+
+    if (!showScrollArrow || position === 'left' || ListWidth < boxWidth) return null;
+    var leftClasses = classNames("".concat(tabsPrefixCls, "-left-arrows"), (_classNames3 = {}, _defineProperty(_classNames3, _concatInstanceProperty(_context5 = "".concat(tabsPrefixCls, "-left-arrows-")).call(_context5, type), type), _defineProperty(_classNames3, "".concat(tabsPrefixCls, "-left-arrows-noshadow"), ListPostion === 0), _classNames3));
+
+    var handleLeft = function handleLeft() {
+      if (!ListPostion) return;
+      var offset = ListPostion + boxWidth > 0 ? 0 : ListPostion + boxWidth;
+      setListPosition(offset);
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: leftClasses
+    }, /*#__PURE__*/React.createElement(ArrowButton, {
+      direction: "left",
+      disabled: ListPostion === 0,
+      onClick: handleLeft
+    }));
+  };
+
+  var renderRightArrows = function renderRightArrows(nodes) {
+    var _context6, _context7, _classNames4;
+
+    if (ListWidth < boxWidth || _includesInstanceProperty(_context6 = ['left', 'right']).call(_context6, position)) return null;
+    var rightClasses = classNames("".concat(tabsPrefixCls, "-right-arrows"), (_classNames4 = {}, _defineProperty(_classNames4, _concatInstanceProperty(_context7 = "".concat(tabsPrefixCls, "-right-arrows-")).call(_context7, type), type), _defineProperty(_classNames4, "".concat(tabsPrefixCls, "-right-arrows-noshadow"), ListWidth + ListPostion === boxWidth), _classNames4));
+
+    var menu = _mapInstanceProperty(nodes).call(nodes, function (node) {
+      var tmp = {
+        label: '',
+        key: 0
+      };
+      tmp.label = node.props.tab;
+      tmp.key = node.props.id;
+      return tmp;
+    });
+
+    var handleRight = function handleRight() {
+      if (ListPostion === boxWidth - ListWidth) return;
+      var offset = ListPostion - boxWidth > boxWidth - ListWidth ? ListPostion - boxWidth : boxWidth - ListWidth;
+      setListPosition(offset);
+    };
+
+    var handleSelectItem = function handleSelectItem(value) {
+      handleActive(value);
+    };
+
+    if (type === 'grid') {
+      return /*#__PURE__*/React.createElement("div", {
+        className: rightClasses
+      }, /*#__PURE__*/React.createElement(Dropdown, {
+        menu: menu,
+        trigger: ['click'],
+        onItemClick: handleSelectItem
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "".concat(tabsPrefixCls, "-more-btn")
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "more"
+      }))));
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: rightClasses
+    }, showScrollArrow ? /*#__PURE__*/React.createElement(ArrowButton, {
+      direction: "right",
+      disabled: ListWidth + ListPostion === boxWidth,
+      onClick: handleRight
+    }) : null, /*#__PURE__*/React.createElement(Dropdown, {
+      menu: menu,
+      trigger: ['click'],
+      onItemClick: handleSelectItem
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(tabsPrefixCls, "-more-btn")
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-down"
+    }))));
+  };
+
+  var renderLeftOperations = function renderLeftOperations() {
+    if (type !== 'dynamic' || !leftOperations || !leftOperations.props.children) return null;
+    var classes = classNames("".concat(tabsPrefixCls, "-left-operations"), {});
+    var children = Object.prototype.toString.call(leftOperations.props.children) === '[object Array]' ? leftOperations.props.children : [leftOperations.props.children];
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes
+    }, _mapInstanceProperty(children).call(children, function (child, index) {
+      var event = function event() {
+        child.props.onClick && child.props.onClick();
+      };
+
+      return /*#__PURE__*/React.createElement("span", {
+        className: "".concat(tabsPrefixCls, "-left-operations-item"),
+        key: index
+      }, /*#__PURE__*/React.createElement("span", {
+        onClick: event
+      }, child));
+    }));
+  };
+
+  var renderRightOperations = function renderRightOperations() {
+    if (type !== 'dynamic' || !rightOperations || !rightOperations.props.children) return null;
+    var classes = classNames("".concat(tabsPrefixCls, "-right-operations"), {});
+    var children = Object.prototype.toString.call(rightOperations.props.children) === '[object Array]' ? rightOperations.props.children : [rightOperations.props.children];
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes
+    }, _mapInstanceProperty(children).call(children, function (child, index) {
+      var event = function event() {
+        child.props.onClick && child.props.onClick();
+      };
+
+      return /*#__PURE__*/React.createElement("span", {
+        className: "".concat(tabsPrefixCls, "-right-operations-item"),
+        key: index
+      }, /*#__PURE__*/React.createElement("span", {
+        onClick: event
+      }, child));
+    }));
+  };
+
+  var renderTabPane = function renderTabPane() {
+    var disabled = tabsProps.disabled;
+    var childrenToRender = [];
+    var unDisabledTabs = [];
+    var disabledTabs = [];
+    childrenToRender = _mapInstanceProperty(containerPanes).call(containerPanes, function (child) {
+      var _a;
+
+      var tmp = formatTabPane(child);
+
+      if ((_a = child.props) === null || _a === void 0 ? void 0 : _a.disabled) {
+        disabledTabs.push(tmp);
+      } else {
+        unDisabledTabs.push(tmp);
+      }
+
+      return tmp;
+    });
+    if (!disabled) childrenToRender = _concatInstanceProperty(unDisabledTabs).call(unDisabledTabs, disabledTabs);
+
+    var renderTabWrap = function renderTabWrap() {
+      var listPositionStyle = {
+        left: "".concat(ListPostion, "px")
+      };
+      var renderWrap = /*#__PURE__*/React.createElement("div", {
+        ref: tabListRef,
+        className: "".concat(tabsPrefixCls, "-tab-list"),
+        style: listPositionStyle
+      }, childrenToRender, renderActiveLine());
+      if (!contextMenuList) return renderWrap;
+      var children = Object.prototype.toString.call(contextMenuList.props.children) === '[object Array]' ? contextMenuList.props.children : [contextMenuList.props.children];
+      var eventMap = [];
+      var menu = /*#__PURE__*/React.createElement(Dropdown.Menu, null, _mapInstanceProperty(children).call(children, function (child, index) {
+        eventMap.push(child.props.onClick);
+        return /*#__PURE__*/React.createElement(Dropdown.Item, {
+          key: index
+        }, /*#__PURE__*/React.createElement("span", null, child));
+      }));
+
+      var handleItemClick = function handleItemClick(key) {
+        var event = eventMap[key];
+        event && event(triggerKey);
+      };
+
+      return /*#__PURE__*/React.createElement(Dropdown, {
+        menu: menu,
+        trigger: ['contextMenu'],
+        onItemClick: handleItemClick
+      }, renderWrap);
+    };
+
+    return /*#__PURE__*/React.createElement("div", _extends({}, omit(tabsProps, ['activeKey', 'defaultActiveKey', 'showScrollArrow', 'noContainer']), {
+      className: tabNavsClasses
+    }), renderLeftOperations(), renderLeftArrow(), /*#__PURE__*/React.createElement("div", {
+      ref: tabRef,
+      className: "".concat(tabsPrefixCls, "-tab-wrap")
+    }, renderTabWrap()), renderRightArrows(childrenToRender), renderRightOperations());
+  };
+
+  var renderContainer = function renderContainer() {
+    if (noContainer) return null;
+    carouselData = [];
+
+    _mapInstanceProperty(containerPanes).call(containerPanes, function (pane) {
+      var props = pane.props,
+          key = pane.key; // 如果没有children传入那就以tab为准
+
+      var item = {
+        key: key
+      };
+
+      if (!props.children) {
+        item.content = props.tab;
+      } else {
+        item.content = props.children;
+      }
+
+      carouselData.push(item);
+    });
+
+    return /*#__PURE__*/React.createElement(Carousel, {
+      ref: carouselRef,
+      dots: false,
+      autoplay: false,
+      effect: effect
+    }, _mapInstanceProperty(carouselData).call(carouselData, function (item) {
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: item.key
+      }, item.content);
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(TabsContextProvider, {
+    value: {
+      type: type,
+      size: size,
+      position: position,
+      disabled: disabled,
+      activeKey: curActiveKey,
+      getActiveLinePosition: getActiveLinePosition,
+      getTriggerKey: getTriggerKey
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: tabsClasses
+  }, renderTabPane(), renderContainer()));
+};
+
+Tabs.displayName = 'Tabs';
+export default Tabs;

package/es/tag/index.d.ts

@@ -0,0 +1,3 @@
+import Tag from './tag';
+export * from './tag';
+export default Tag;

package/es/tag/index.js

@@ -0,0 +1,3 @@
+import Tag from './tag';
+export * from './tag';
+export default Tag;

package/es/tag/style/css.js

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