@sheinx/base 3.0.0-alpha.1

package/cjs/table/use-table-select.js

@@ -0,0 +1,239 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.array.index-of.js");
+require("core-js/modules/es.array.slice.js");
+var _hooks = require("@sheinx/hooks");
+var _react = require("react");
+var isMacOS = _hooks.util.isMacOS,
+  isFirefox = _hooks.util.isFirefox,
+  ready = _hooks.util.ready,
+  getParent = _hooks.util.getParent;
+var selectAttribute = 'data-soui-table-selection';
+var tableAttribute = 'data-soui-table';
+var tdSelect = "td[".concat(selectAttribute, "]");
+var instanceNum = 0;
+function isEventCombination(event) {
+  var ismo = isMacOS();
+  return ismo && event.metaKey || !ismo && event.ctrlKey;
+}
+
+// 根据table tr层次   合并td
+function mergeDomsText(nodes) {
+  if (!nodes || nodes.length <= 0) return [];
+  var trs = [];
+  var res = [];
+  nodes.forEach(function (node) {
+    var tr = getParent(node, "tr");
+    var index = trs.indexOf(tr);
+    if (index === -1) {
+      trs.push(tr);
+      index = trs.length - 1;
+    }
+    if (res[index]) {
+      res[index].push(node.innerText);
+    } else {
+      res[index] = [node.innerText];
+    }
+  });
+  return res;
+}
+
+// format table text
+// 组合 text
+
+function formatTableText(arrs) {
+  if (!arrs || arrs.length <= 0) return '';
+  var txt = '';
+  arrs.forEach(function (value) {
+    if (typeof value === 'string') {
+      txt += "".concat(value, "\t");
+    } else {
+      txt += "".concat(formatTableText(value), "\n");
+    }
+  });
+  return txt;
+}
+
+// 生成 textarea，并且执行 copy
+function execCopyCommand(text) {
+  // if none, return;
+  if (!text) return;
+  var textarea = document.createElement('textarea');
+  textarea.setAttribute('readonly', 'readonly');
+  textarea.value = text;
+
+  // out window
+  textarea.style.position = 'fixed';
+  textarea.style.top = '-9999px';
+  textarea.style.left = '-9999px';
+  document.body.append(textarea);
+  textarea.select();
+  if (document.execCommand('copy')) {
+    document.execCommand('copy');
+  }
+  if (textarea && textarea.parentNode) textarea.parentNode.removeChild(textarea);
+}
+function setBodyAttr(flag) {
+  if (flag) {
+    document.body.setAttribute(selectAttribute, 'true');
+    return;
+  }
+  document.body.removeAttribute(selectAttribute);
+}
+
+// remove all selectClass from dom
+function removeSelectAttribute(dom) {
+  if (dom) {
+    dom.removeAttribute(selectAttribute);
+    return;
+  }
+  var nodes = document.querySelectorAll(tdSelect);
+  if (nodes.length <= 0) return;
+  nodes.forEach(function (elem) {
+    removeSelectAttribute(elem);
+  });
+}
+
+// add selection class
+function addSelectionAttribute(dom) {
+  if (!dom) return;
+  dom.setAttribute(selectAttribute, 'true');
+}
+
+// handle document click
+function docClick(event) {
+  var target = event.target;
+  if (getParent(target, "[".concat(tableAttribute, "]")) && isEventCombination(event)) return;
+  removeSelectAttribute();
+  setBodyAttr(false);
+}
+
+// 批量操作
+// bulk operation doms
+function bulkOperation(doms, start, end) {
+  if (!doms || doms.childNodes.length <= 0 || start <= -1 || end <= -1) return;
+  var arr = Array.prototype.slice.call(doms.childNodes, start, end + 1);
+  arr.forEach(function (dom) {
+    addSelectionAttribute(dom);
+  });
+}
+
+// 批量操作 -->  添加 selection classname
+function bulkAddSelectionClass(td, cache) {
+  var tr = getParent(td, "tr");
+  if (!tr) return;
+  var trs = tr.parentNode.childNodes;
+  var xIndex = Array.prototype.indexOf.call(tr.childNodes, td);
+  var count = 0;
+  // xIndex - cache.xIndex
+  while (count < trs.length) {
+    if (cache.yIndex <= count) {
+      var Atr = trs[count];
+      bulkOperation(Atr, cache.xIndex, xIndex);
+    }
+    if (trs[count] === tr) {
+      break;
+    }
+    count += 1;
+  }
+}
+function handleKeyDown(event) {
+  if (!isEventCombination(event) || event.keyCode !== 67) return;
+  var texts = formatTableText(mergeDomsText(document.querySelectorAll(tdSelect)));
+  execCopyCommand(texts);
+}
+
+// ctrl + c
+ready(function () {
+  document.addEventListener('keydown', handleKeyDown);
+});
+var useTableSelect = function useTableSelect(props) {
+  var _useRef = (0, _react.useRef)({
+      isFirefox: isFirefox(),
+      move: false,
+      prevDom: null,
+      cache: {},
+      cancel: function cancel() {}
+    }),
+    context = _useRef.current;
+  var handleMouseDown = (0, _hooks.usePersistFn)(function (e) {
+    if (!props.cellSelectable) return;
+    if (context.isFirefox) return;
+    if (!isEventCombination(e)) return;
+    setBodyAttr(true);
+    context.move = true;
+    var td = getParent(e.target, 'td');
+    var tr = getParent(td, "tr");
+    context.prevDom = td;
+    if (!tr) return;
+    var xIndex = Array.prototype.indexOf.call(tr.childNodes, td);
+    var yIndex = Array.prototype.indexOf.call(tr.parentNode.childNodes, tr);
+    context.cache.xIndex = xIndex;
+    context.cache.yIndex = yIndex;
+    context.cache.dom = td;
+  });
+  var handleMouseMove = (0, _hooks.usePersistFn)(function (event) {
+    if (!props.cellSelectable) return;
+    if (context.isFirefox) return;
+    if (!context.move) return;
+    var td = getParent(event.target, 'td');
+    if (context.prevDom === td) return;
+    context.prevDom = td;
+
+    // clear class name
+    removeSelectAttribute();
+    bulkAddSelectionClass(td, context.cache);
+  });
+  var handleMouseUp = (0, _hooks.usePersistFn)(function (event) {
+    if (!props.cellSelectable) return;
+    if (context.isFirefox) return;
+    if (!isEventCombination(event)) return;
+    var target = event.target;
+    var td = getParent(target, 'td');
+    if (td === context.cache.dom) {
+      context.cache = {};
+      context.move = false;
+      if (td.hasAttribute(selectAttribute)) {
+        removeSelectAttribute(td);
+        return;
+      }
+      addSelectionAttribute(td);
+      return;
+    }
+    context.prevDom = null;
+    bulkAddSelectionClass(td, context.cache);
+
+    // reset
+    context.cache = {};
+    context.move = false;
+  });
+  (0, _react.useEffect)(function () {
+    if (!context.isFirefox && props.cellSelectable) {
+      document.addEventListener('click', docClick);
+      instanceNum += 1;
+    }
+    return function () {
+      instanceNum -= 1;
+      if (instanceNum <= 0) {
+        document.removeEventListener('click', docClick);
+      }
+    };
+  }, [props.cellSelectable]);
+  var getTableProps = (0, _hooks.usePersistFn)(function () {
+    var _ref;
+    if (!props.cellSelectable) return {};
+    return _ref = {}, (0, _defineProperty2.default)(_ref, tableAttribute, 'true'), (0, _defineProperty2.default)(_ref, "onMouseDown", handleMouseDown), (0, _defineProperty2.default)(_ref, "onMouseMove", handleMouseMove), (0, _defineProperty2.default)(_ref, "onMouseUp", handleMouseUp), _ref;
+  });
+  return {
+    getTableProps: getTableProps
+  };
+};
+var _default = useTableSelect;
+exports.default = _default;

package/cjs/tabs/__example__/01-base.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;
+//# sourceMappingURL=01-base.d.ts.map

package/cjs/tabs/__example__/01-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-base.d.ts","sourceRoot":"","sources":["01-base.tsx"],"names":[],"mappings":";;AAUA,wBAqDE"}

package/cjs/tabs/__example__/01-base.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.map.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _ = require("../..");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 基本用法
+ *    --
+ * en - Basic
+ *    --
+ */
+var _default = function _default() {
+  var _useState = (0, _react.useState)(3),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  var tabsStyle = (0, _shineoutStyle.useTabsStyle)();
+  var buttonStyle = (0, _shineoutStyle.useButtonStyle)();
+  var tabs = [];
+  for (var i = 0; i < 25; i++) {
+    tabs.push({
+      title: "\u9009\u9879\u5361 ".concat(i + 1),
+      content: "Content of Tab ".concat(i + 1)
+    });
+  }
+  var handleChange = function handleChange(v) {
+    setActive(v);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      height: 200
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tabs, {
+      jssStyle: {
+        tabs: tabsStyle,
+        button: buttonStyle
+      },
+      onChange: handleChange,
+      active: active,
+      shape: "button",
+      autoFill: true,
+      defaultActive: 2
+      // splitColor='red'
+      // collapsible
+      // hideSplit
+      // defaultCollapsed
+      // position='top-left'
+      // tabBarStyle={{ color: 'red' }}
+      // position='left-top'
+      // position='left-bottom'
+      ,
+      position: "right-top"
+      // position='right-bottom'
+      // position='bottom-right'
+      // position='bottom-left'
+      // position='top-right'
+      // position='top-left'
+      ,
+      children: tabs.map(function (tab, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tabs.Panel, {
+          tab: tab.title,
+          jssStyle: {
+            tabs: tabsStyle,
+            button: buttonStyle
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: {
+              padding: 5,
+              height: '100%'
+            },
+            children: tab.content
+          })
+        }, index);
+      })
+    })
+  });
+};
+exports.default = _default;

package/cjs/tabs/index.d.ts

@@ -0,0 +1,5 @@
+export { default, default as Tabs } from './tabs';
+export type { TabsProps } from './tabs.type';
+export { default as TabsPanel } from './tabs-panel';
+export type { TabsPanelProps } from './tabs-panel.type';
+//# sourceMappingURL=index.d.ts.map

package/cjs/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/cjs/tabs/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function get() {
+    return _tabs.default;
+  }
+});
+Object.defineProperty(exports, "TabsPanel", {
+  enumerable: true,
+  get: function get() {
+    return _tabsPanel.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _tabs.default;
+  }
+});
+var _tabs = _interopRequireDefault(require("./tabs"));
+var _tabsPanel = _interopRequireDefault(require("./tabs-panel"));

package/cjs/tabs/tab.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TabProps } from './tab.type';
+declare const _default: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<unknown>>;
+export default _default;
+//# sourceMappingURL=tab.d.ts.map

package/cjs/tabs/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;;AAwFtC,wBAAqC"}

package/cjs/tabs/tab.js

@@ -0,0 +1,97 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _button = _interopRequireDefault(require("../button"));
+var _hooks = require("@sheinx/hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Tab = function Tab(props, ref) {
+  var _jssStyle$tabs;
+  var jssStyle = props.jssStyle,
+    tab = props.tab,
+    disabled = props.disabled,
+    id = props.id;
+  var _useTabsContext = (0, _hooks.useTabsContext)(),
+    active = _useTabsContext.active,
+    _useTabsContext$shape = _useTabsContext.shape,
+    shape = _useTabsContext$shape === void 0 ? 'card' : _useTabsContext$shape,
+    onChange = _useTabsContext.onChange,
+    activeBackground = _useTabsContext.activeBackground,
+    inactiveBackground = _useTabsContext.inactiveBackground;
+  var tabsStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$tabs = jssStyle.tabs) === null || _jssStyle$tabs === void 0 ? void 0 : _jssStyle$tabs.call(jssStyle)) || {};
+  var buttonStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : jssStyle.button) || {};
+  var tabClass = (0, _classnames.default)(tabsStyle.tab, {});
+  var isActive = active === id;
+  var getStateProps = function getStateProps() {
+    var stateProps = [];
+    if (isActive) stateProps.push('active');
+    if (disabled) stateProps.push('disabled');
+    return {
+      'data-soui-state': stateProps.join(' ')
+    };
+  };
+  var handleClick = function handleClick() {
+    if (disabled) return;
+    onChange === null || onChange === void 0 ? void 0 : onChange(id);
+  };
+  var renderCardTab = function renderCardTab() {
+    return tab;
+  };
+  var renderLineTab = function renderLineTab() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: tabsStyle.lineInner,
+      children: tab
+    });
+  };
+  var renderDashTab = function renderDashTab() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: tabsStyle.lineInner,
+      children: tab
+    });
+  };
+  var renderFillTab = function renderFillTab() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: tabsStyle.fillInner,
+      children: tab
+    });
+  };
+  var style = {};
+  if (activeBackground && isActive) {
+    style.background = activeBackground;
+  }
+  if (inactiveBackground && !isActive) {
+    style.background = inactiveBackground;
+  }
+  if (shape === 'button') return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, _objectSpread(_objectSpread({
+    className: tabClass,
+    jssStyle: {
+      button: buttonStyle
+    }
+  }, getStateProps()), {}, {
+    style: style,
+    type: isActive ? 'primary' : 'secondary',
+    onClick: handleClick,
+    children: tab
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
+    className: tabClass
+  }, getStateProps()), {}, {
+    style: style,
+    onClick: handleClick,
+    ref: ref,
+    children: [shape === 'card' && renderCardTab(), shape === 'line' && renderLineTab(), shape === 'dash' && renderDashTab(), shape === 'fill' && renderFillTab()]
+  }));
+};
+var _default = /*#__PURE__*/_react.default.forwardRef(Tab);
+exports.default = _default;

package/cjs/tabs/tab.type.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ButtonClasses } from '../button/button.type';
+import { TabsClasses } from './tabs.type';
+export interface TabData {
+    id: string | number;
+    tab: React.ReactNode;
+    disabled?: boolean;
+    jssStyle: {
+        tabs: () => TabsClasses;
+        button: () => ButtonClasses;
+    };
+}
+export interface TabProps extends TabData {
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=tab.type.d.ts.map

package/cjs/tabs/tab.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.type.d.ts","sourceRoot":"","sources":["tab.type.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,WAAW,CAAC;QACxB,MAAM,EAAE,MAAM,aAAa,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,QAAS,SAAQ,OAAO;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/cjs/tabs/tab.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/tabs/tabs-header.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TabsHeaderProps } from './tabs-header.type';
+declare const TabsHeader: (props: TabsHeaderProps) => JSX.Element;
+export default TabsHeader;
+//# sourceMappingURL=tabs-header.d.ts.map

package/cjs/tabs/tabs-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-header.d.ts","sourceRoot":"","sources":["tabs-header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAQrD,QAAA,MAAM,UAAU,UAAW,eAAe,gBAoMzC,CAAC;AAEF,eAAe,UAAU,CAAC"}