agora-ui-foundation 1.0.0

package/lib/utilities/hooks/animations.js

@@ -0,0 +1,76 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMinimize = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+/**
+ * 最小化
+ * Minimize
+ * @returns
+ */
+var useMinimize = exports.useMinimize = function useMinimize(_ref) {
+  var minimize = _ref.minimize,
+    _ref$afterChange = _ref.afterChange,
+    afterChange = _ref$afterChange === void 0 ? function () {} : _ref$afterChange,
+    _ref$beforeChange = _ref.beforeChange,
+    beforeChange = _ref$beforeChange === void 0 ? function () {} : _ref$beforeChange;
+  var ref = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)({
+      transform: "translate3d(0px, 0px, 0) scale(1)"
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    style = _useState2[0],
+    setStyle = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var timer = 0;
+    beforeChange === null || beforeChange === void 0 || beforeChange(minimize);
+    if (minimize) {
+      var _document$querySelect, _ref$current;
+      var targetEleBounds = (_document$querySelect = document.querySelector('.fcr-status-bar-widget-slot')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getBoundingClientRect();
+      var selfEleBounds = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect();
+      if (targetEleBounds && selfEleBounds) {
+        var x = targetEleBounds.left - selfEleBounds.left - selfEleBounds.width / 2;
+        var y = targetEleBounds.top - selfEleBounds.top - selfEleBounds.height / 2;
+        setTimeout(function () {
+          setStyle({
+            transform: "translate3d(".concat(x, "px, ").concat(y, "px, 0) scale(0)"),
+            transition: 'all 0.5s'
+          });
+          timer = window.setTimeout(function () {
+            afterChange === null || afterChange === void 0 || afterChange(minimize);
+            setStyle({
+              transform: "translate3d(".concat(x, "px, ").concat(y, "px, 0) scale(0)")
+            });
+          }, 500);
+        });
+      }
+    } else {
+      setTimeout(function () {
+        setStyle({
+          transform: "translate3d(0px, 0px, 0) scale(1)",
+          transition: 'all 0.5s'
+        });
+        setTimeout(function () {
+          afterChange === null || afterChange === void 0 || afterChange(minimize);
+          setStyle({
+            transform: "translate3d(0px, 0px, 0) scale(1)"
+          });
+        }, 500);
+      });
+    }
+    return function () {
+      window.clearTimeout(timer);
+    };
+  }, [minimize]);
+  return {
+    ref: ref,
+    style: style
+  };
+};

package/lib/utilities/hooks/use-click-anywhere.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useClickAnywhere: (cb: () => void) => import("react").RefObject<HTMLDivElement>;

package/lib/utilities/hooks/use-click-anywhere.js

@@ -0,0 +1,18 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClickAnywhere = void 0;
+var _react = require("react");
+var _clickAnywhere = require("../click-anywhere");
+var useClickAnywhere = exports.useClickAnywhere = function useClickAnywhere(cb) {
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (ref.current) {
+      return (0, _clickAnywhere.clickAnywhere)(ref.current, cb);
+    }
+  }, []);
+  return ref;
+};

package/lib/utilities/use-namespace.d.ts

@@ -0,0 +1,15 @@
+export declare const useNamespace: (block: string) => {
+    namespace: string;
+    b: (blockSuffix?: string) => string;
+    e: (element?: string) => string;
+    m: (modifier?: string) => string;
+    be: (blockSuffix?: string, element?: string) => string;
+    em: (element?: string, modifier?: string) => string;
+    bm: (blockSuffix?: string, modifier?: string) => string;
+    bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+    is: {
+        (name: string, state: boolean | undefined): string;
+        (name: string): string;
+    };
+};
+export type UseNamespaceReturn = ReturnType<typeof useNamespace>;

package/lib/utilities/use-namespace.js

@@ -0,0 +1,66 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNamespace = void 0;
+require("core-js/modules/es.array.concat.js");
+var defaultNamespace = 'fcr';
+var statePrefix = 'is-';
+var _bem = function _bem(namespace, block, blockSuffix, element, modifier) {
+  var cls = "".concat(namespace, "-").concat(block);
+  if (blockSuffix) {
+    cls += "-".concat(blockSuffix);
+  }
+  if (element) {
+    cls += "__".concat(element);
+  }
+  if (modifier) {
+    cls += "--".concat(modifier);
+  }
+  return cls;
+};
+var useNamespace = exports.useNamespace = function useNamespace(block) {
+  var namespace = defaultNamespace;
+  var b = function b() {
+    var blockSuffix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return _bem(namespace, block, blockSuffix, '', '');
+  };
+  var e = function e(element) {
+    return element ? _bem(namespace, block, '', element, '') : '';
+  };
+  var m = function m(modifier) {
+    return modifier ? _bem(namespace, block, '', '', modifier) : '';
+  };
+  var be = function be(blockSuffix, element) {
+    return blockSuffix && element ? _bem(namespace, block, blockSuffix, element, '') : '';
+  };
+  var em = function em(element, modifier) {
+    return element && modifier ? _bem(namespace, block, '', element, modifier) : '';
+  };
+  var bm = function bm(blockSuffix, modifier) {
+    return blockSuffix && modifier ? _bem(namespace, block, blockSuffix, '', modifier) : '';
+  };
+  var bem = function bem(blockSuffix, element, modifier) {
+    return blockSuffix && element && modifier ? _bem(namespace, block, blockSuffix, element, modifier) : '';
+  };
+  var is = function is(name) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    var state = args.length >= 1 ? args[0] : true;
+    return name && state ? "".concat(statePrefix).concat(name) : '';
+  };
+  return {
+    namespace: namespace,
+    b: b,
+    e: e,
+    m: m,
+    be: be,
+    em: em,
+    bm: bm,
+    bem: bem,
+    is: is
+  };
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "agora-ui-foundation",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "i18next": "^23.10.1",
+    "normalize.css": "^8.0.1",
+    "patch-package": "^8.0.0",
+    "postinstall-postinstall": "^2.1.0",
+    "rc-dialog": "^8",
+    "rc-tooltip": "5.1.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-i18next": "^14.1.0",
+    "react-rnd": "^10.4.1",
+    "react-select": "5.8.0",
+    "react-transition-group": "^4.4.2",
+    "react-virtualized": "^9.22.5",
+    "tinycolor2": "^1.6.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.5",
+    "@babel/plugin-proposal-decorators": "^7.23.5",
+    "@babel/plugin-transform-runtime": "^7.13.15",
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.23.3",
+    "@chromatic-com/storybook": "^1.2.25",
+    "@storybook/addon-essentials": "8.0.5",
+    "@storybook/addon-interactions": "8.0.5",
+    "@storybook/addon-links": "8.0.5",
+    "@storybook/addon-onboarding": "8.0.5",
+    "@storybook/blocks": "8.0.5",
+    "@storybook/react": "8.0.5",
+    "@storybook/react-vite": "8.0.5",
+    "@storybook/test": "8.0.5",
+    "@types/eslint": "^8.56.7",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-virtualized": "^9.21.30",
+    "@types/tinycolor2": "^1.4.6",
+    "@types/webpack-env": "^1.18.4",
+    "core-js": "^3.33.3",
+    "eslint": "^9.0.0",
+    "node-html-parser": "^6.1.13",
+    "storybook": "8.0.5",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.7"
+  },
+  "scripts": {
+    "build": "agora-tc-transpile",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "convertsvg": "ts-node --skipProject tools/convertsvg",
+    "postinstall": "patch-package"
+  }
+}

package/patches/rc-util+5.39.1.patch

@@ -0,0 +1,60 @@
+diff --git a/node_modules/rc-util/es/Dom/findDOMNode.js b/node_modules/rc-util/es/Dom/findDOMNode.js
+index 44d1e00..a10d7a0 100644
+--- a/node_modules/rc-util/es/Dom/findDOMNode.js
++++ b/node_modules/rc-util/es/Dom/findDOMNode.js
+@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
+ export function isDOM(node) {
+   // https://developer.mozilla.org/en-US/docs/Web/API/Element
+   // Since XULElement is also subclass of Element, we only need HTMLElement and SVGElement
++  if (node && node.tagName) return true;
+   return node instanceof HTMLElement || node instanceof SVGElement;
+ }
+ 
+diff --git a/node_modules/rc-util/es/Dom/isVisible.js b/node_modules/rc-util/es/Dom/isVisible.js
+index 85811e3..dfd3839 100644
+--- a/node_modules/rc-util/es/Dom/isVisible.js
++++ b/node_modules/rc-util/es/Dom/isVisible.js
+@@ -2,7 +2,7 @@ export default (function (element) {
+   if (!element) {
+     return false;
+   }
+-  if (element instanceof Element) {
++  if (element instanceof Element || (element && element.tagName)) {
+     if (element.offsetParent) {
+       return true;
+     }
+diff --git a/node_modules/rc-util/es/raf.js b/node_modules/rc-util/es/raf.js
+index dd81635..44112b3 100644
+--- a/node_modules/rc-util/es/raf.js
++++ b/node_modules/rc-util/es/raf.js
+@@ -4,21 +4,21 @@ var raf = function raf(callback) {
+ var caf = function caf(num) {
+   return clearTimeout(num);
+ };
+-if (typeof window !== 'undefined' && 'requestAnimationFrame' in window) {
+-  raf = function raf(callback) {
+-    return window.requestAnimationFrame(callback);
+-  };
+-  caf = function caf(handle) {
+-    return window.cancelAnimationFrame(handle);
+-  };
+-}
++// if (typeof window !== 'undefined' && 'requestAnimationFrame' in window) {
++//   raf = function raf(callback) {
++//     return window.requestAnimationFrame(callback);
++//   };
++//   caf = function caf(handle) {
++//     return window.cancelAnimationFrame(handle);
++//   };
++// }
+ var rafUUID = 0;
+ var rafIds = new Map();
+ function cleanup(id) {
+   rafIds.delete(id);
+ }
+ var wrapperRaf = function wrapperRaf(callback) {
+-  var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
++  var times = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+   rafUUID += 1;
+   var id = rafUUID;
+   function callRef(leftTimes) {