agora-ui-foundation 1.0.0

package/lib/components/tooltip/dialog.js

@@ -0,0 +1,83 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrDialogToolTip = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+require("rc-tooltip/assets/bootstrap_white.css");
+require("./index.css");
+require("./arrow.css");
+var _ = require(".");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["content", "onClose", "closeable"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var DialogToolTipClosableOverlayWrap = function DialogToolTipClosableOverlayWrap(props) {
+  var content = props.content,
+    onClose = props.onClose,
+    closeable = props.closeable;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-dialog-tooltip-overlay-content'),
+    children: [closeable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])('fcr-dialog-tooltip-overlay-close'),
+      onClick: onClose,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_CLOSE,
+        size: 10
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])('fcr-dialog-tooltip-overlay-content-inner'),
+      children: content
+    })]
+  });
+};
+var FcrDialogToolTip = exports.FcrDialogToolTip = function FcrDialogToolTip(props) {
+  var content = props.content,
+    onClose = props.onClose,
+    _props$closeable = props.closeable,
+    closeable = _props$closeable === void 0 ? true : _props$closeable,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var defaultDialogOverlayInnerStyle = {
+    padding: '0',
+    background: "var(--fcr_mobile_ui_scene_color_popup_fill1)",
+    border: "2px solid var(--fcr_ui_scene_line2)",
+    color: "var(--fcr_ui_scene_icontext1)",
+    borderRadius: "var(--fcr_cornerradius_xs)",
+    boxShadow: 'none'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrToolTip, _objectSpread(_objectSpread({
+    arrowContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_TOOLTIP_ARROW_2,
+      colors: {
+        iconPrimary: 'var(--fcr_mobile_ui_scene_color_popup_fill1)',
+        iconSecondary: 'var(--fcr_ui_scene_line2)'
+      },
+      size: 20
+    }),
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogToolTipClosableOverlayWrap, {
+      onClose: onClose,
+      content: content,
+      closeable: closeable
+    }),
+    overlayInnerStyle: _objectSpread(_objectSpread({}, defaultDialogOverlayInnerStyle), props.overlayInnerStyle)
+  }, others), {}, {
+    overlayClassName: "fcr-dialog-tooltip fcr-tooltip-border-width-2 ".concat(others.overlayClassName || '')
+  }));
+};

package/lib/components/tooltip/guide.d.ts

@@ -0,0 +1,26 @@
+import 'rc-tooltip/assets/bootstrap_white.css';
+import { FC } from 'react';
+import './index.css';
+import './arrow.css';
+import { ToolTipProps } from '.';
+export interface GuideToolTipProps extends ToolTipProps {
+    /**
+     * 是否显示关闭按钮
+     */
+    /** @en
+     * Size of the input box:
+     * medium
+     * large
+     */
+    closable?: boolean;
+    /**
+     * 点击关闭按钮的回调
+     */
+    /** @en
+     * Size of the input box:
+     * medium
+     * large
+     */
+    onClose?: () => void;
+}
+export declare const FcrGuideToolTip: FC<GuideToolTipProps>;

package/lib/components/tooltip/guide.js

@@ -0,0 +1,85 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrGuideToolTip = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+require("rc-tooltip/assets/bootstrap_white.css");
+require("./index.css");
+require("./arrow.css");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ = require(".");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["closable", "content", "onClose"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var GuideToolTipClosableOverlayWrap = function GuideToolTipClosableOverlayWrap(props) {
+  var content = props.content,
+    closable = props.closable,
+    onClose = props.onClose;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames["default"])('fcr-guide-tooltip-overlay-content'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        padding: closable ? '0px 8px' : '0px 24px'
+      },
+      className: (0, _classnames["default"])('fcr-guide-tooltip-overlay-content-inner'),
+      children: content
+    }), closable && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames["default"])('fcr-guide-tooltip-overlay-content-closable', 'fcr-divider'),
+      onClick: onClose,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_CLOSE,
+        size: 24
+      })
+    })]
+  });
+};
+var FcrGuideToolTip = exports.FcrGuideToolTip = function FcrGuideToolTip(props) {
+  var closable = props.closable,
+    content = props.content,
+    onClose = props.onClose,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var defaultGuideOverlayInnerStyle = {
+    padding: '0',
+    background: "var(--fcr_ui_scene_inverse2)",
+    border: "1px solid var(--fcr_ui_scene_inverse2)",
+    fontStyle: 'normal',
+    fontWeight: '400',
+    fontSize: '14px',
+    lineHeight: '40px',
+    color: "var(--fcr_ui_scene_inverse)",
+    borderRadius: "var(--fcr_cornerradius_xxs)"
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrToolTip, _objectSpread({
+    arrowContent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_inverse2)'
+      },
+      type: _type.FcrIconType.FCR_TOOLTIP_ARROW,
+      size: 16
+    }),
+    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(GuideToolTipClosableOverlayWrap, {
+      content: content,
+      onClose: onClose,
+      closable: closable
+    }),
+    overlayInnerStyle: _objectSpread(_objectSpread({}, defaultGuideOverlayInnerStyle), props.overlayInnerStyle)
+  }, others));
+};

package/lib/components/tooltip/index.css

@@ -0,0 +1,314 @@
+.fcr-tooltip.fcr-tooltip-zoom-appear,
+.fcr-tooltip.fcr-tooltip-zoom-enter {
+  opacity: 0;
+}
+.fcr-tooltip.fcr-tooltip-zoom-enter,
+.fcr-tooltip.fcr-tooltip-zoom-leave {
+  display: block;
+}
+.fcr-tooltip-zoom-enter,
+.fcr-tooltip-zoom-appear {
+  opacity: 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  animation-play-state: paused;
+}
+.fcr-tooltip-zoom-leave {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+  animation-play-state: paused;
+}
+.fcr-tooltip-zoom-enter.fcr-tooltip-zoom-enter-active,
+.fcr-tooltip-zoom-appear.fcr-tooltip-zoom-appear-active {
+  animation-name: rcToolTipZoomIn;
+  animation-play-state: running;
+}
+.fcr-tooltip-zoom-leave.fcr-tooltip-zoom-leave-active {
+  animation-name: rcToolTipZoomOut;
+  animation-play-state: running;
+}
+@keyframes rcToolTipZoomIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+}
+@keyframes rcToolTipZoomOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 50%;
+    transform: scale(0, 0);
+  }
+}
+.fcr-tooltip {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  visibility: visible;
+  line-height: 1.5;
+  font-size: 12px;
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 1px;
+  font-weight: 300;
+  max-width: 230px;
+}
+.fcr-tooltip-hidden {
+  display: none;
+}
+.fcr-tooltip-inner {
+  padding: 8px 10px;
+  color: #333333;
+  text-align: left;
+  text-decoration: none;
+  background-color: #ffffff;
+  border-radius: 3px;
+  min-height: 30px;
+  border: 1px solid #b1b1b1;
+}
+.fcr-tooltip-arrow,
+.fcr-tooltip-arrow-inner {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.fcr-tooltip-placement-top .fcr-tooltip-arrow,
+.fcr-tooltip-placement-topLeft .fcr-tooltip-arrow,
+.fcr-tooltip-placement-topRight .fcr-tooltip-arrow {
+  bottom: -5px;
+  margin-left: -6px;
+  border-width: 6px 6px 0;
+  border-top-color: #b1b1b1;
+}
+.fcr-tooltip-placement-top .fcr-tooltip-arrow-inner,
+.fcr-tooltip-placement-topLeft .fcr-tooltip-arrow-inner,
+.fcr-tooltip-placement-topRight .fcr-tooltip-arrow-inner {
+  bottom: 1px;
+  margin-left: -6px;
+  border-width: 6px 6px 0;
+  border-top-color: #ffffff;
+}
+.fcr-tooltip-placement-top .fcr-tooltip-arrow {
+  left: 50%;
+}
+.fcr-tooltip-placement-topLeft .fcr-tooltip-arrow {
+  left: 15%;
+}
+.fcr-tooltip-placement-topRight .fcr-tooltip-arrow {
+  right: 15%;
+}
+.fcr-tooltip-placement-right .fcr-tooltip-arrow,
+.fcr-tooltip-placement-rightTop .fcr-tooltip-arrow,
+.fcr-tooltip-placement-rightBottom .fcr-tooltip-arrow {
+  left: -5px;
+  margin-top: -6px;
+  border-width: 6px 6px 6px 0;
+  border-right-color: #b1b1b1;
+}
+.fcr-tooltip-placement-right .fcr-tooltip-arrow-inner,
+.fcr-tooltip-placement-rightTop .fcr-tooltip-arrow-inner,
+.fcr-tooltip-placement-rightBottom .fcr-tooltip-arrow-inner {
+  left: 1px;
+  margin-top: -6px;
+  border-width: 6px 6px 6px 0;
+  border-right-color: #ffffff;
+}
+.fcr-tooltip-placement-right .fcr-tooltip-arrow {
+  top: 50%;
+}
+.fcr-tooltip-placement-rightTop .fcr-tooltip-arrow {
+  top: 15%;
+  margin-top: 0;
+}
+.fcr-tooltip-placement-rightBottom .fcr-tooltip-arrow {
+  bottom: 15%;
+}
+.fcr-tooltip-placement-left .fcr-tooltip-arrow,
+.fcr-tooltip-placement-leftTop .fcr-tooltip-arrow,
+.fcr-tooltip-placement-leftBottom .fcr-tooltip-arrow {
+  right: -5px;
+  margin-top: -6px;
+  border-width: 6px 0 6px 6px;
+  border-left-color: #b1b1b1;
+}
+.fcr-tooltip-placement-left .fcr-tooltip-arrow-inner,
+.fcr-tooltip-placement-leftTop .fcr-tooltip-arrow-inner,
+.fcr-tooltip-placement-leftBottom .fcr-tooltip-arrow-inner {
+  right: 1px;
+  margin-top: -6px;
+  border-width: 6px 0 6px 6px;
+  border-left-color: #ffffff;
+}
+.fcr-tooltip-placement-left .fcr-tooltip-arrow {
+  top: 50%;
+}
+.fcr-tooltip-placement-leftTop .fcr-tooltip-arrow {
+  top: 15%;
+  margin-top: 0;
+}
+.fcr-tooltip-placement-leftBottom .fcr-tooltip-arrow {
+  bottom: 15%;
+}
+.fcr-tooltip-placement-bottom .fcr-tooltip-arrow,
+.fcr-tooltip-placement-bottomLeft .fcr-tooltip-arrow,
+.fcr-tooltip-placement-bottomRight .fcr-tooltip-arrow {
+  top: -5px;
+  margin-left: -6px;
+  border-width: 0 6px 6px;
+  border-bottom-color: #b1b1b1;
+}
+.fcr-tooltip-placement-bottom .fcr-tooltip-arrow-inner,
+.fcr-tooltip-placement-bottomLeft .fcr-tooltip-arrow-inner,
+.fcr-tooltip-placement-bottomRight .fcr-tooltip-arrow-inner {
+  top: 1px;
+  margin-left: -6px;
+  border-width: 0 6px 6px;
+  border-bottom-color: #ffffff;
+}
+.fcr-tooltip-placement-bottom .fcr-tooltip-arrow {
+  left: 50%;
+}
+.fcr-tooltip-placement-bottomLeft .fcr-tooltip-arrow {
+  left: 15%;
+}
+.fcr-tooltip-placement-bottomRight .fcr-tooltip-arrow {
+  right: 15%;
+}
+
+.fcr-tooltip {
+  background: transparent;
+}
+.fcr-tooltip .fcr-tooltip-arrow {
+  border-color: transparent;
+}
+
+.fcr-tooltip-content {
+  background: transparent;
+}
+
+/** Guide ToolTip **/
+.fcr-guide-tooltip-overlay-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.fcr-guide-tooltip-overlay-content-inner {
+  flex: 1;
+  flex-shrink: 0;
+}
+.fcr-guide-tooltip-overlay-content-closable {
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+}
+
+/** Dialog ToolTip **/
+.fcr-dialog-tooltip .fcr-tooltip-inner {
+  overflow: hidden;
+}
+.fcr-dialog-tooltip-overlay-content {
+  padding: 15px 12px;
+  position: relative;
+  backdrop-filter: blur(25px);
+}
+.fcr-dialog-tooltip-overlay-close {
+  background: var(--fcr_web_ui_scene_fill3);
+  border-radius: var(--fcr_cornerradius_round);
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 7px;
+  right: 7px;
+}
+.fcr-dialog-tooltip-overlay-close:hover {
+  background: var(--fcr_ui_scene_ramp_brand6);
+}
+
+.fcr-dialog-tooltip-overlay-content-inner {
+  line-height: 1;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes zoomOut {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+.fcr-tooltip-anim-appear {
+  opacity: 0;
+}
+.fcr-tooltip-anim-appear-active {
+  animation: 0.1s linear zoomIn;
+}
+.fcr-tooltip-anim-enter {
+  opacity: 0;
+}
+.fcr-tooltip-anim-enter-active {
+  animation: 0.1s linear zoomIn;
+}
+.fcr-tooltip-anim-leave {
+  opacity: 1;
+}
+.fcr-tooltip-anim-leave-active {
+  animation: 0.1s linear zoomOut;
+}

package/lib/components/tooltip/index.d.ts

@@ -0,0 +1,90 @@
+import { CSSMotionProps } from 'rc-motion';
+import { CSSProperties, FC, ReactNode } from 'react';
+import './index.css';
+import './arrow.css';
+import React from 'react';
+type ToolTipActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
+export interface ToolTipProps {
+    /**
+     * 卡片内容
+     */
+    /** @en
+     * Size of the input box:
+     * medium
+     * large
+     */
+    content?: ReactNode;
+    /**
+     * 触发行为，可选 hover | focus | click | contextMenu
+     */
+    /** @en
+     * Size of the input box:
+     * medium
+     * large
+     */
+    trigger?: ToolTipActionType;
+    /**
+     * 气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom
+     */
+    /** @en
+     * Size of the input box:
+     * medium
+     * large
+     */
+    placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    /**
+     * 自定义箭头
+     */
+    /** @en
+     * Size of the input box:
+     * medium
+     * large
+     */
+    arrowContent?: ReactNode;
+    /**
+     * 卡片内容区域的样式对象
+     */
+    /** @en
+     * Size of the input box:
+     * medium
+     * large
+     */
+    overlayInnerStyle?: CSSProperties;
+    /**
+     * 气泡的显示状态
+     */
+    /** @en
+     * Size of the input box:
+     * medium
+     * large
+     */
+    visible?: boolean;
+    /**
+     * 卡片类名
+     */
+    /** @en
+     * Size of the input box:
+     * medium
+     * large
+     */
+    overlayClassName?: string;
+    /**
+     * 修改箭头的显示状态
+     */
+    /** @en
+     * Size of the input box:
+     * medium
+     * large
+     */
+    showArrow?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    motion?: CSSMotionProps;
+    getTooltipContainer?: (node: HTMLElement) => HTMLElement;
+    children?: React.ReactNode;
+    mouseEnterDelay?: number;
+    overlayOffset?: number;
+    mouseLeaveDelay?: number;
+    afterVisibleChange?: (visible: boolean) => void;
+}
+export declare const FcrToolTip: FC<ToolTipProps>;
+export {};