@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/toast/toast.js

@@ -0,0 +1,185 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _context4 = _interopRequireDefault(require("../configProvider/context"));
+
+var _toastFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/toast/toastFoundation"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/toast/constants");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _index = _interopRequireDefault(require("../iconButton/index"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _lodashEs = require("lodash-es");
+
+var _utils = require("../_utils");
+
+/* eslint-disable max-len */
+const prefixCls = _constants.cssClasses.PREFIX;
+
+class Toast extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.clearCloseTimer = () => {
+      this.foundation.clearCloseTimer_();
+    };
+
+    this.startCloseTimer = () => {
+      this.foundation.startCloseTimer_();
+    };
+
+    this.state = {};
+    this.foundation = new _toastFoundation.default(this.adapter);
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      notifyWrapperToRemove: id => {
+        this.props.close(id);
+      },
+      notifyClose: () => {
+        this.props.onClose();
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.foundation.init();
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  close(e) {
+    this.foundation.close(e);
+  }
+
+  renderIcon() {
+    var _context;
+
+    const {
+      type,
+      icon
+    } = this.props;
+    const iconMap = {
+      warning: /*#__PURE__*/_react.default.createElement(_semiIcons.IconAlertTriangle, null),
+      success: /*#__PURE__*/_react.default.createElement(_semiIcons.IconTickCircle, null),
+      info: /*#__PURE__*/_react.default.createElement(_semiIcons.IconInfoCircle, null),
+      error: /*#__PURE__*/_react.default.createElement(_semiIcons.IconAlertCircle, null)
+    };
+    const iconType = iconMap[type];
+    const iconSize = 'large';
+    const iconCls = (0, _classnames.default)("".concat(prefixCls, "-icon"), (0, _concat.default)(_context = "".concat(prefixCls, "-icon-")).call(_context, type));
+
+    if (icon) {
+      return (0, _utils.isSemiIcon)(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, {
+        size: iconSize,
+        className: "".concat(prefixCls, "-icon")
+      }) : icon;
+    }
+
+    if (type && iconType) {
+      return /*#__PURE__*/_react.default.cloneElement(iconType, {
+        size: iconSize,
+        className: iconCls
+      });
+    }
+
+    return null;
+  }
+
+  render() {
+    var _context2, _context3;
+
+    const {
+      content,
+      type,
+      theme,
+      showClose,
+      textMaxWidth,
+      className,
+      style
+    } = this.props;
+    const direction = this.props.direction || this.context.direction;
+    const toastCls = (0, _classnames.default)(prefixCls, className, {
+      [(0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, type)]: true,
+      [(0, _concat.default)(_context3 = "".concat(prefixCls, "-")).call(_context3, theme)]: theme === 'light',
+      ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
+    });
+    const textStyle = {};
+    textStyle.maxWidth = textMaxWidth;
+    const btnTheme = 'borderless';
+    const btnSize = 'small';
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: toastCls,
+      style: style,
+      onMouseEnter: this.clearCloseTimer,
+      onMouseLeave: this.startCloseTimer
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-content")
+    }, this.renderIcon(), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(prefixCls, "-content-text"),
+      style: textStyle
+    }, content), showClose && /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-close-button")
+    }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      onClick: e => this.close(e),
+      type: "tertiary",
+      icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
+      theme: btnTheme,
+      size: btnSize
+    }))));
+  }
+
+}
+
+Toast.contextType = _context4.default;
+Toast.propTypes = {
+  onClose: _propTypes.default.func,
+  content: _propTypes.default.node,
+  close: _propTypes.default.func,
+  duration: _propTypes.default.number,
+  theme: _propTypes.default.oneOf(_constants.strings.themes),
+  type: _propTypes.default.oneOf(_constants.strings.types),
+  textMaxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  showClose: _propTypes.default.bool,
+  icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  direction: _propTypes.default.oneOf(_constants.strings.directions)
+};
+Toast.defaultProps = {
+  onClose: _lodashEs.noop,
+  content: '',
+  close: _lodashEs.noop,
+  duration: _constants.numbers.duration,
+  textMaxWidth: 450,
+  showClose: true,
+  theme: 'normal'
+};
+var _default = Toast;
+exports.default = _default;

package/lib/cjs/toast/useToast/HookToast.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ToastInstance } from '@douyinfe/semi-foundation/lib/cjs/toast/toastFoundation';
+interface HookToastProps extends ToastInstance {
+    afterClose: (id: string) => void;
+}
+declare const _default: React.ForwardRefExoticComponent<HookToastProps & React.RefAttributes<any>>;
+export default _default;

package/lib/cjs/toast/useToast/HookToast.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+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 _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _toast = _interopRequireDefault(require("../toast"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (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) && (0, _indexOf.default)(e).call(e, 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 ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+const HookToast = (_a, ref) => {
+  var {
+    afterClose
+  } = _a,
+      config = __rest(_a, ["afterClose"]);
+
+  const [visible, setVisible] = (0, _react.useState)(true);
+
+  const close = () => {
+    setVisible(false);
+  };
+
+  _react.default.useImperativeHandle(ref, () => ({
+    close: () => {
+      setVisible(false);
+    }
+  }));
+
+  (0, _react.useEffect)(() => {
+    if (!visible) {
+      afterClose(config.id);
+    }
+  }, [visible]);
+  return visible ? /*#__PURE__*/_react.default.createElement(_toast.default, (0, _assign.default)({}, config, {
+    close: close
+  })) : null;
+};
+
+var _default = /*#__PURE__*/_react.default.forwardRef(HookToast);
+
+exports.default = _default;

package/lib/cjs/toast/useToast/index.d.ts

@@ -0,0 +1,9 @@
+import { ToastProps } from '@douyinfe/semi-foundation/lib/cjs/toast/toastFoundation';
+export default function useToast(): (JSX.Element | {
+    success: (config: ToastProps) => string;
+    info: (config: ToastProps) => string;
+    error: (config: ToastProps) => string;
+    warning: (config: ToastProps) => string;
+    open: (config: ToastProps) => string;
+    close: (id: string) => void;
+})[];

package/lib/cjs/toast/useToast/index.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = useToast;
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uuid = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/uuid"));
+
+var _HookToast = _interopRequireDefault(require("./HookToast"));
+
+// const ref = null;
+// TODO: toast larger than N bars, automatic folding, allowing expansion, N configurable
+const defaultOpts = {
+  motion: true,
+  zIndex: 1010,
+  duration: 3
+};
+
+function usePatchElement() {
+  const [elements, setElements] = _react.default.useState([]);
+
+  function patchElement(element, config) {
+    setElements(originElements => [{
+      element,
+      config
+    }, ...originElements]);
+    return id => {
+      setElements(originElements => (0, _filter.default)(originElements).call(originElements, _ref => {
+        let {
+          config: configOfCurrentElement
+        } = _ref;
+        return configOfCurrentElement.id !== id;
+      }));
+    };
+  }
+
+  return [elements, patchElement];
+}
+
+function useToast() {
+  const [elements, patchElement] = usePatchElement();
+  const toastRef = new _map.default();
+
+  const addToast = config => {
+    const id = (0, _uuid.default)('semi_toast_');
+    const mergeConfig = (0, _assign.default)((0, _assign.default)({}, config), {
+      id
+    }); // eslint-disable-next-line prefer-const
+
+    let closeFunc;
+
+    const ref = ele => {
+      toastRef.set(id, ele);
+    };
+
+    const toast = /*#__PURE__*/_react.default.createElement(_HookToast.default, (0, _assign.default)({}, mergeConfig, {
+      key: id,
+      afterClose: instanceId => closeFunc(instanceId),
+      ref: ref
+    }));
+
+    closeFunc = patchElement(toast, (0, _assign.default)({}, mergeConfig));
+    return id;
+  };
+
+  const removeElement = id => {
+    const ele = toastRef.get(id);
+    ele && ele.close();
+  };
+
+  return [{
+    success: config => addToast((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultOpts), config), {
+      type: 'success'
+    })),
+    info: config => addToast((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultOpts), config), {
+      type: 'info'
+    })),
+    error: config => addToast((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultOpts), config), {
+      type: 'error'
+    })),
+    warning: config => addToast((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultOpts), config), {
+      type: 'warning'
+    })),
+    open: config => addToast((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, defaultOpts), config), {
+      type: 'default'
+    })),
+    close: id => removeElement(id)
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _isArray.default)(elements) && elements.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _map2.default)(elements).call(elements, item => item.element)) : null)];
+}

package/lib/cjs/tooltip/ArrowBoundingShape.d.ts

@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+declare const _default: PropTypes.Requireable<PropTypes.InferProps<{
+    offsetX: PropTypes.Requireable<number>;
+    offsetY: PropTypes.Requireable<number>;
+    width: PropTypes.Requireable<number>;
+    height: PropTypes.Requireable<number>;
+}>>;
+export default _default;

package/lib/cjs/tooltip/ArrowBoundingShape.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _default = _propTypes.default.shape({
+  offsetX: _propTypes.default.number,
+  offsetY: _propTypes.default.number,
+  width: _propTypes.default.number,
+  height: _propTypes.default.number
+});
+
+exports.default = _default;

package/lib/cjs/tooltip/TooltipStyledTransition.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Motion } from '../_base/base';
+export interface TooltipTransitionProps {
+    [key: string]: any;
+    children?: (arg: any) => React.ReactNode;
+    motion?: Motion<TooltipTransitionProps>;
+}
+declare const TooltipTransition: React.FC<TooltipTransitionProps>;
+export default TooltipTransition;

package/lib/cjs/tooltip/TooltipStyledTransition.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _semiAnimationReact = require("@douyinfe/semi-animation-react");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/tooltip/constants");
+
+var _getMotionObjFromProps = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/getMotionObjFromProps"));
+
+/* eslint-disable max-len */
+
+/* eslint-disable @typescript-eslint/no-shadow */
+const enterCls = "".concat(_constants.cssClasses.PREFIX, "-bounceIn");
+const leaveCls = "".concat(_constants.cssClasses.PREFIX, "-zoomOut");
+
+const TooltipTransition = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    children
+  } = props;
+  const motion = (0, _getMotionObjFromProps.default)(props);
+  return /*#__PURE__*/_react.default.createElement(_semiAnimationReact.StyledTransition, (0, _assign.default)({}, props, {
+    enter: enterCls,
+    leave: leaveCls,
+    duration: '100ms'
+  }, motion), typeof children === 'function' ? _ref => {
+    let {
+      animateCls,
+      animateEvents,
+      animateStyle
+    } = _ref;
+    return children({
+      animateCls,
+      animateEvents,
+      animateStyle
+    });
+  } : children);
+};
+
+var _default = TooltipTransition;
+exports.default = _default;

package/lib/cjs/tooltip/TriangleArrow.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const TriangleArrow: React.FC<{
+    [key: string]: any;
+}>;
+export default TriangleArrow;

package/lib/cjs/tooltip/TriangleArrow.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, 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 ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+const TriangleArrow = props => {
+  const {
+    className,
+    style
+  } = props,
+        restProps = __rest(props, ["className", "style"]);
+
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _assign.default)({
+    className: className,
+    style: style
+  }, restProps, {
+    width: "24",
+    height: "7",
+    viewBox: "0 0 24 7",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M24 0V1C20 1 18.5 2 16.5 4C14.5 6 14 7 12 7C10 7 9.5 6 7.5 4C5.5 2 4 1 0 1V0H24Z"
+  }));
+};
+
+var _default = TriangleArrow;
+exports.default = _default;

package/lib/cjs/tooltip/TriangleArrowVertical.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const TriangleArrowVertical: React.FC<{
+    [key: string]: any;
+}>;
+export default TriangleArrowVertical;

package/lib/cjs/tooltip/TriangleArrowVertical.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, 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 ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+const TriangleArrowVertical = props => {
+  const {
+    className,
+    style
+  } = props,
+        restProps = __rest(props, ["className", "style"]);
+
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _assign.default)({
+    className: className,
+    style: style
+  }, restProps, {
+    width: "7",
+    height: "24",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M0 0L1 0C1 4, 2 5.5, 4 7.5S7,10 7,12S6 14.5, 4 16.5S1,20 1,24L0 24L0 0z"
+  }));
+};
+
+var _default = TriangleArrowVertical;
+exports.default = _default;