tntd 3.0.0-beta.18 → 3.0.0-beta.19

package/lib/tntd-action/Action.js

@@ -42,9 +42,10 @@ function WarpAction(_a) {
     return _react["default"].createElement(_LocaleReceiver["default"], {
       componentName: "TntdAction"
     }, function (locale) {
-      return _react["default"].createElement(Action, Object.assign({}, other, {
-        locale: locale,
-        getContainer: _getContainer
+      return _react["default"].createElement(Action, Object.assign({
+        getPopupContainer: _getContainer
+      }, other, {
+        locale: locale
       }));
     });
   });
@@ -53,31 +54,80 @@ function Action(_ref2) {
   var title = _ref2.title,
     hidden = _ref2.hidden,
     data = _ref2.data,
+    afterClose = _ref2.afterClose,
     locale = _ref2.locale,
     className = _ref2.className,
-    getContainer = _ref2.getContainer;
+    _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? 700 : _ref2$width,
+    getPopupContainer = _ref2.getPopupContainer;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)({
+      left: 400,
+      bottom: 100,
+      width: width
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    offset = _useState4[0],
+    setOffset = _useState4[1];
   var ref = (0, _react.useRef)();
+  var refDom = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
-    ref.current = getContainer();
-  }, [getContainer]);
+    ref.current = getPopupContainer();
+  }, [getPopupContainer]);
   (0, _react.useEffect)(function () {
-    setVisible(data.length > 0);
-  }, [data]);
+    var visible = data.length > 0;
+    if (visible && ref.current) {
+      var _offset = ref.current.getBoundingClientRect();
+      setOffset({
+        left: _offset.left + (_offset.width - width) / 2,
+        bottom: 100,
+        width: width
+      });
+    }
+    setVisible(visible);
+  }, [data, width]);
+  var onMouseDown = function onMouseDown(e) {
+    var startX = e.clientX - offset.left;
+    var startY = e.clientY + offset.bottom;
+    var onmousemove = function onmousemove(e) {
+      refDom.current.style.left = e.clientX - startX + 'px';
+      refDom.current.style.bottom = startY - e.clientY + 'px';
+    };
+    var onmouseup = function onmouseup(e) {
+      setOffset(function (offset) {
+        return Object.assign(Object.assign({}, offset), {
+          left: e.clientX - startX,
+          bottom: startY - e.clientY
+        });
+      });
+      document.removeEventListener('mousemove', onmousemove);
+      document.removeEventListener('mouseup', onmouseup);
+    };
+    document.addEventListener('mousemove', onmousemove);
+    document.addEventListener('mouseup', onmouseup);
+  };
   if (ref.current && visible && !hidden) {
     return _reactDom["default"].createPortal(_react["default"].createElement("div", {
-      className: (0, _classnames["default"])('tnt-action', className)
+      className: (0, _classnames["default"])('tnt-action', className),
+      style: offset,
+      onMouseDown: onMouseDown,
+      ref: refDom
     }, _react["default"].createElement("div", {
-      className: "fr"
+      className: "fr",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      }
     }, data), _react["default"].createElement(_button.Button, {
       shape: "circle",
       icon: "close",
       type: "tertiary",
-      onClick: function onClick() {
-        return setVisible(false);
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setVisible(false);
+        afterClose && afterClose();
       }
     }), _react["default"].createElement("span", {
       className: "tnt-action-text"

package/lib/tntd-action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../src/tntd-action/Action.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0D;AAC1D,0DAAgC;AAChC,6DAAwD;AACxD,4FAAmE;AACnE,4DAAmC;AACnC,sCAAkC;AAElC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAA;AAE/C,SAAwB,UAAU,CAAC,EAAgD;QAAhD,EAAE,YAAY,GAAG,mBAAmB,OAAY,EAAP,KAAK,cAA9C,gBAAgD,CAAF;IAC/E,OAAO,CACL,8BAAC,gCAAc,QACZ,CAAC,EAAE,YAAY,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,EAAE,EAAE;QACjE,MAAM,aAAa,GAAG,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,YAAY,CAAA;QAE1F,OAAO,CACL,8BAAC,wBAAc,IAAC,aAAa,EAAC,YAAY,IACvC,CAAC,MAAM,EAAE,EAAE;YACV,OAAO,8BAAC,MAAM,oBAAK,KAAK,IAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,IAAI,CAAA;QAC3E,CAAC,CACc,CAClB,CAAA;IACH,CAAC,CACc,CAClB,CAAA;AACH,CAAC;AAhBD,6BAgBC;AAED,SAAS,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE;IACtE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,GAAG,GAAG,IAAA,cAAM,GAAE,CAAA;IAEpB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,GAAG,YAAY,EAAE,CAAA;IAC9B,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,UAAU,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,IAAI,GAAG,CAAC,OAAO,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE;QACrC,OAAO,mBAAQ,CAAC,YAAY,CAC1B,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,YAAY,EAAE,SAAS,CAAC;YACjD,uCAAK,SAAS,EAAC,IAAI,IAAE,IAAI,CAAO;YAChC,8BAAC,eAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,GAAI;YACxF,wCAAM,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAQ,CAC5C,EACN,GAAG,CAAC,OAAO,CACZ,CAAA;KACF;IACD,OAAO,IAAI,CAAA;AACb,CAAC","sourcesContent":["import React, { useState, useEffect, useRef } from 'react'\nimport ReactDOM from 'react-dom'\nimport { ConfigConsumer } from 'antd/lib/config-provider'\nimport LocaleReceiver from 'antd/lib/locale-provider/LocaleReceiver'\nimport classNames from 'classnames'\nimport { Button } from '../button'\n\nconst defaultGetContainer = () => document.body\n\nexport default function WarpAction({ getContainer = defaultGetContainer, ...other }) {\n  return (\n    <ConfigConsumer>\n      {({ getPrefixCls, getPopupContainer: getContextPopupContainer }) => {\n        const _getContainer = getContainer === undefined ? getContextPopupContainer : getContainer\n\n        return (\n          <LocaleReceiver componentName=\"TntdAction\">\n            {(locale) => {\n              return <Action {...other} locale={locale} getContainer={_getContainer} />\n            }}\n          </LocaleReceiver>\n        )\n      }}\n    </ConfigConsumer>\n  )\n}\n\nfunction Action({ title, hidden, data, locale, className, getContainer }) {\n  const [visible, setVisible] = useState(false)\n  const ref = useRef()\n\n  useEffect(() => {\n    ref.current = getContainer()\n  }, [getContainer])\n\n  useEffect(() => {\n    setVisible(data.length > 0)\n  }, [data])\n\n  if (ref.current && visible && !hidden) {\n    return ReactDOM.createPortal(\n      <div className={classNames('tnt-action', className)}>\n        <div className=\"fr\">{data}</div>\n        <Button shape=\"circle\" icon=\"close\" type=\"tertiary\" onClick={() => setVisible(false)} />\n        <span className=\"tnt-action-text\">{title}</span>\n      </div>,\n      ref.current\n    )\n  }\n  return null\n}\n"]}
+{"version":3,"file":"Action.js","sourceRoot":"","sources":["../../src/tntd-action/Action.js"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useRef } from 'react'\nimport ReactDOM from 'react-dom'\nimport { ConfigConsumer } from 'antd/lib/config-provider'\nimport LocaleReceiver from 'antd/lib/locale-provider/LocaleReceiver'\nimport classNames from 'classnames'\nimport { Button } from '../button'\n\nconst defaultGetContainer = () => document.body\n\nexport default function WarpAction({ getContainer = defaultGetContainer, ...other }) {\n  return (\n    <ConfigConsumer>\n      {({ getPrefixCls, getPopupContainer: getContextPopupContainer }) => {\n        const _getContainer = getContainer === undefined ? getContextPopupContainer : getContainer\n\n        return (\n          <LocaleReceiver componentName=\"TntdAction\">\n            {(locale) => {\n              return <Action getPopupContainer={_getContainer} {...other} locale={locale} />\n            }}\n          </LocaleReceiver>\n        )\n      }}\n    </ConfigConsumer>\n  )\n}\n\nfunction Action({\n  title,\n  hidden,\n  data,\n  afterClose,\n  locale,\n  className,\n  width = 700,\n  getPopupContainer,\n}) {\n  const [visible, setVisible] = useState(false)\n  const [offset, setOffset] = useState({ left: 400, bottom: 100, width })\n  const ref = useRef()\n  const refDom = useRef()\n\n  useEffect(() => {\n    ref.current = getPopupContainer()\n  }, [getPopupContainer])\n\n  useEffect(() => {\n    const visible = data.length > 0\n    if (visible && ref.current) {\n      const offset = ref.current.getBoundingClientRect()\n      setOffset({ left: offset.left + (offset.width - width) / 2, bottom: 100, width })\n    }\n    setVisible(visible)\n  }, [data, width])\n\n  const onMouseDown = (e) => {\n    const startX = e.clientX - offset.left\n    const startY = e.clientY + offset.bottom\n    const onmousemove = (e) => {\n      refDom.current.style.left = e.clientX - startX + 'px'\n      refDom.current.style.bottom = startY - e.clientY + 'px'\n    }\n    const onmouseup = (e) => {\n      setOffset((offset) => ({ ...offset, left: e.clientX - startX, bottom: startY - e.clientY }))\n      document.removeEventListener('mousemove', onmousemove)\n      document.removeEventListener('mouseup', onmouseup)\n    }\n    document.addEventListener('mousemove', onmousemove)\n    document.addEventListener('mouseup', onmouseup)\n  }\n\n  if (ref.current && visible && !hidden) {\n    return ReactDOM.createPortal(\n      <div\n        className={classNames('tnt-action', className)}\n        style={offset}\n        onMouseDown={onMouseDown}\n        ref={refDom}\n      >\n        <div\n          className=\"fr\"\n          onClick={(e) => {\n            e.stopPropagation()\n          }}\n        >\n          {data}\n        </div>\n        <Button\n          shape=\"circle\"\n          icon=\"close\"\n          type=\"tertiary\"\n          onClick={(e) => {\n            e.stopPropagation()\n            setVisible(false)\n            afterClose && afterClose()\n          }}\n        />\n        <span className=\"tnt-action-text\">{title}</span>\n      </div>,\n      ref.current\n    )\n  }\n  return null\n}\n"]}

package/lib/tntd-action/index.less

@@ -1,16 +1,18 @@
 .tnt-action {
   position: fixed;
-  bottom: 100px;
-  width: @tnt-action-width;
-  left: calc(50vw - @tnt-action-width / 2);
+  // bottom: 100px;
+  // width: @tnt-action-width;
+  // left: calc(50vw - @tnt-action-width / 2);
   padding: 10px 16px;
   background-color: @text-color;
   border-radius: @border-radius-base;
   z-index: 200;
+  cursor: grab;
   &-text {
     color: @white;
     margin-left: 20px;
     font-size: 14px;
+    user-select: none;
     .num {
       display: inline-block;
       width: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tntd",
-    "version": "3.0.0-beta.18",
+    "version": "3.0.0-beta.19",
     "license": "MIT",
     "scripts": {
         "start": "heft start --storybook",
@@ -37,7 +37,8 @@
         "rc-field-form": "~1.34.0",
         "scroll-into-view-if-needed": "^2.2.25",
         "@tntd/icons": "^1.0.6",
-        "@ant-design/colors": "^3.1.0"
+        "@ant-design/colors": "^3.1.0",
+        "rc-resize-observer": "~1.4.0"
     },
     "devDependencies": {
         "@react-types/shared": "^3.10.1",