@fle-ui/next 1.0.0-alpha.8 → 1.0.0-alpha.9

package/es/modal/demo/footer.js

@@ -1,93 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-
-/**
- * title: 自定义页脚
- * desc: 更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。<br /><br />不需要默认确定取消按钮时，你可以把 `footer` 设为 `null`。
- */
-import React from 'react';
-import { Modal, Button } from '@fle-ui/next';
-
-var Demo = /*#__PURE__*/function (_React$Component) {
-  _inherits(Demo, _React$Component);
-
-  var _super = _createSuper(Demo);
-
-  function Demo() {
-    var _this;
-
-    _classCallCheck(this, Demo);
-
-    _this = _super.apply(this, arguments);
-    _this.state = {
-      loading: false,
-      visible: false
-    };
-
-    _this.showModal = function () {
-      _this.setState({
-        visible: true
-      });
-    };
-
-    _this.handleOk = function () {
-      _this.setState({
-        loading: true
-      });
-
-      setTimeout(function () {
-        _this.setState({
-          loading: false,
-          visible: false
-        });
-      }, 3000);
-    };
-
-    _this.handleCancel = function () {
-      _this.setState({
-        visible: false
-      });
-    };
-
-    return _this;
-  }
-
-  _createClass(Demo, [{
-    key: "render",
-    value: function render() {
-      var _this$state = this.state,
-          visible = _this$state.visible,
-          loading = _this$state.loading;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-        type: "primary",
-        onClick: this.showModal
-      }, "Open Modal with customized footer"), /*#__PURE__*/React.createElement(Modal, {
-        visible: visible,
-        title: "Title",
-        onOk: this.handleOk,
-        onCancel: this.handleCancel,
-        footer: [/*#__PURE__*/React.createElement(Button, {
-          key: "back",
-          onClick: this.handleCancel
-        }, "Return"), /*#__PURE__*/React.createElement(Button, {
-          key: "submit",
-          type: "primary",
-          loading: loading,
-          onClick: this.handleOk
-        }, "Submit"), /*#__PURE__*/React.createElement(Button, {
-          key: "link",
-          href: "https://google.com",
-          type: "primary",
-          loading: loading,
-          onClick: this.handleOk
-        }, "Search on Google")]
-      }, /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents...")));
-    }
-  }]);
-
-  return Demo;
-}(React.Component);
-
-export default Demo;

package/es/modal/demo/hooks.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 使用 hooks 获得上下文
- * desc: 通过 `Modal.useModal` 创建支持读取 context 的 `contextHolder`。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/modal/demo/hooks.js

@@ -1,49 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/**
- * title: 使用 hooks 获得上下文
- * desc: 通过 `Modal.useModal` 创建支持读取 context 的 `contextHolder`。
- */
-import React from 'react';
-import { Modal, Button, Space } from '@fle-ui/next';
-var ReachableContext = /*#__PURE__*/React.createContext({});
-var UnreachableContext = /*#__PURE__*/React.createContext({});
-var config = {
-  title: 'Use Hook!',
-  content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReachableContext.Consumer, null, function (name) {
-    return "Reachable: ".concat(name, "!");
-  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(UnreachableContext.Consumer, null, function (name) {
-    return "Unreachable: ".concat(name, "!");
-  }))
-};
-
-var Demo = function Demo() {
-  var _Modal$useModal = Modal.useModal(),
-      _Modal$useModal2 = _slicedToArray(_Modal$useModal, 2),
-      modal = _Modal$useModal2[0],
-      contextHolder = _Modal$useModal2[1];
-
-  return /*#__PURE__*/React.createElement(ReachableContext.Provider, {
-    value: "Light"
-  }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      modal.confirm(config);
-    }
-  }, "Confirm"), /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      modal.warning(config);
-    }
-  }, "Warning"), /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      modal.info(config);
-    }
-  }, "Info"), /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      modal.error(config);
-    }
-  }, "Error")), contextHolder, /*#__PURE__*/React.createElement(UnreachableContext.Provider, {
-    value: "Bamboo"
-  }));
-};
-
-export default Demo;

package/es/modal/demo/info.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 信息提示
- * desc: 各种类型的信息提示，只提供一个按钮用于关闭。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/modal/demo/info.js

@@ -1,48 +0,0 @@
-/**
- * title: 信息提示
- * desc: 各种类型的信息提示，只提供一个按钮用于关闭。
- */
-import React from 'react';
-import { Modal, Button, Space } from '@fle-ui/next';
-
-function info() {
-  Modal.info({
-    title: 'This is a notification message',
-    content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "some messages...some messages..."), /*#__PURE__*/React.createElement("p", null, "some messages...some messages...")),
-    onOk: function onOk() {}
-  });
-}
-
-function success() {
-  Modal.success({
-    content: 'some messages...some messages...'
-  });
-}
-
-function error() {
-  Modal.error({
-    title: 'This is an error message',
-    content: 'some messages...some messages...'
-  });
-}
-
-function warning() {
-  Modal.warning({
-    title: 'This is a warning message',
-    content: 'some messages...some messages...'
-  });
-}
-
-var Demo = function Demo() {
-  return /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: info
-  }, "Info"), /*#__PURE__*/React.createElement(Button, {
-    onClick: success
-  }, "Success"), /*#__PURE__*/React.createElement(Button, {
-    onClick: error
-  }, "Error"), /*#__PURE__*/React.createElement(Button, {
-    onClick: warning
-  }, "Warning"));
-};
-
-export default Demo;

package/es/modal/demo/locale.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 国际化
- * desc: 设置 `okText` 与 `cancelText` 以自定义按钮文字。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/modal/demo/locale.js

@@ -1,80 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-
-/**
- * title: 国际化
- * desc: 设置 `okText` 与 `cancelText` 以自定义按钮文字。
- */
-import React from 'react';
-import { Modal, Button, Space } from '@fle-ui/next';
-import { ExclamationCircleOutlined } from '@ant-design/icons';
-
-var LocalizedModal = /*#__PURE__*/function (_React$Component) {
-  _inherits(LocalizedModal, _React$Component);
-
-  var _super = _createSuper(LocalizedModal);
-
-  function LocalizedModal() {
-    var _this;
-
-    _classCallCheck(this, LocalizedModal);
-
-    _this = _super.apply(this, arguments);
-    _this.state = {
-      visible: false
-    };
-
-    _this.showModal = function () {
-      _this.setState({
-        visible: true
-      });
-    };
-
-    _this.hideModal = function () {
-      _this.setState({
-        visible: false
-      });
-    };
-
-    return _this;
-  }
-
-  _createClass(LocalizedModal, [{
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-        type: "primary",
-        onClick: this.showModal
-      }, "Modal"), /*#__PURE__*/React.createElement(Modal, {
-        title: "Modal",
-        visible: this.state.visible,
-        onOk: this.hideModal,
-        onCancel: this.hideModal,
-        okText: "\u786E\u8BA4",
-        cancelText: "\u53D6\u6D88"
-      }, /*#__PURE__*/React.createElement("p", null, "Bla bla ..."), /*#__PURE__*/React.createElement("p", null, "Bla bla ..."), /*#__PURE__*/React.createElement("p", null, "Bla bla ...")));
-    }
-  }]);
-
-  return LocalizedModal;
-}(React.Component);
-
-function confirm() {
-  Modal.confirm({
-    title: 'Confirm',
-    icon: /*#__PURE__*/React.createElement(ExclamationCircleOutlined, null),
-    content: 'Bla bla ...',
-    okText: '确认',
-    cancelText: '取消'
-  });
-}
-
-var Demo = function Demo() {
-  return /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(LocalizedModal, null), /*#__PURE__*/React.createElement(Button, {
-    onClick: confirm
-  }, "Confirm"));
-};
-
-export default Demo;

package/es/modal/demo/manual.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 手动更新和移除
- * desc: 手动更新和关闭 `Modal.method` 方式创建的对话框。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/modal/demo/manual.js

@@ -1,32 +0,0 @@
-/**
- * title: 手动更新和移除
- * desc: 手动更新和关闭 `Modal.method` 方式创建的对话框。
- */
-import React from 'react';
-import { Modal, Button } from '@fle-ui/next';
-
-function countDown() {
-  var secondsToGo = 5;
-  var modal = Modal.success({
-    title: 'This is a notification message',
-    content: "This modal will be destroyed after ".concat(secondsToGo, " second.")
-  });
-  var timer = setInterval(function () {
-    secondsToGo -= 1;
-    modal.update({
-      content: "This modal will be destroyed after ".concat(secondsToGo, " second.")
-    });
-  }, 1000);
-  setTimeout(function () {
-    clearInterval(timer);
-    modal.destroy();
-  }, secondsToGo * 1000);
-}
-
-var Demo = function Demo() {
-  return /*#__PURE__*/React.createElement(Button, {
-    onClick: countDown
-  }, "Open modal to close in 5s");
-};
-
-export default Demo;

package/es/modal/demo/modal-render.d.ts

@@ -1,24 +0,0 @@
-/**
- * title: 自定义渲染对话框
- * desc: 自定义渲染对话框, 可通过 `react-draggable` 来实现拖拽。
- */
-import React from 'react';
-declare class Demo extends React.Component {
-    state: {
-        visible: boolean;
-        disabled: boolean;
-        bounds: {
-            left: number;
-            top: number;
-            bottom: number;
-            right: number;
-        };
-    };
-    draggleRef: any;
-    showModal: () => void;
-    handleOk: (e: any) => void;
-    handleCancel: (e: any) => void;
-    onStart: (event: any, uiData: any) => void;
-    render(): JSX.Element;
-}
-export default Demo;

package/es/modal/demo/modal-render.js

@@ -1,139 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-
-/**
- * title: 自定义渲染对话框
- * desc: 自定义渲染对话框, 可通过 `react-draggable` 来实现拖拽。
- */
-import React from 'react';
-import { Modal, Button } from '@fle-ui/next';
-import Draggable from 'react-draggable';
-
-var Demo = /*#__PURE__*/function (_React$Component) {
-  _inherits(Demo, _React$Component);
-
-  var _super = _createSuper(Demo);
-
-  function Demo() {
-    var _this;
-
-    _classCallCheck(this, Demo);
-
-    _this = _super.apply(this, arguments);
-    _this.state = {
-      visible: false,
-      disabled: true,
-      bounds: {
-        left: 0,
-        top: 0,
-        bottom: 0,
-        right: 0
-      }
-    };
-    _this.draggleRef = /*#__PURE__*/React.createRef();
-
-    _this.showModal = function () {
-      _this.setState({
-        visible: true
-      });
-    };
-
-    _this.handleOk = function (e) {
-      console.log(e);
-
-      _this.setState({
-        visible: false
-      });
-    };
-
-    _this.handleCancel = function (e) {
-      console.log(e);
-
-      _this.setState({
-        visible: false
-      });
-    };
-
-    _this.onStart = function (event, uiData) {
-      var _a, _b, _c;
-
-      console.log(event);
-
-      var _ref = (_a = window === null || window === void 0 ? void 0 : window.document) === null || _a === void 0 ? void 0 : _a.documentElement,
-          clientWidth = _ref.clientWidth,
-          clientHeight = _ref.clientHeight; // @ts-ignore
-
-
-      var targetRect = (_c = (_b = _this.draggleRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-
-      _this.setState({
-        bounds: {
-          left: -(targetRect === null || targetRect === void 0 ? void 0 : targetRect.left) + (uiData === null || uiData === void 0 ? void 0 : uiData.x),
-          right: clientWidth - ((targetRect === null || targetRect === void 0 ? void 0 : targetRect.right) - (uiData === null || uiData === void 0 ? void 0 : uiData.x)),
-          top: -(targetRect === null || targetRect === void 0 ? void 0 : targetRect.top) + (uiData === null || uiData === void 0 ? void 0 : uiData.y),
-          bottom: clientHeight - ((targetRect === null || targetRect === void 0 ? void 0 : targetRect.bottom) - (uiData === null || uiData === void 0 ? void 0 : uiData.y))
-        }
-      });
-    };
-
-    return _this;
-  }
-
-  _createClass(Demo, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$state = this.state,
-          bounds = _this$state.bounds,
-          disabled = _this$state.disabled,
-          visible = _this$state.visible;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-        onClick: this.showModal
-      }, "Open Draggable Modal"), /*#__PURE__*/React.createElement(Modal, {
-        title: /*#__PURE__*/React.createElement("div", {
-          style: {
-            width: '100%',
-            cursor: 'move'
-          },
-          onMouseOver: function onMouseOver() {
-            if (disabled) {
-              _this2.setState({
-                disabled: false
-              });
-            }
-          },
-          onMouseOut: function onMouseOut() {
-            _this2.setState({
-              disabled: true
-            });
-          },
-          // fix eslintjsx-a11y/mouse-events-have-key-events
-          // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
-          onFocus: function onFocus() {},
-          onBlur: function onBlur() {}
-        }, "Draggable Modal"),
-        visible: visible,
-        onOk: this.handleOk,
-        onCancel: this.handleCancel,
-        modalRender: function modalRender(modal) {
-          return /*#__PURE__*/React.createElement(Draggable, {
-            disabled: disabled,
-            bounds: bounds,
-            onStart: function onStart(event, uiData) {
-              return _this2.onStart(event, uiData);
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            ref: _this2.draggleRef
-          }, modal));
-        }
-      }, /*#__PURE__*/React.createElement("p", null, "Just don't learn physics at school and your life will be full of magic and miracles."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.")));
-    }
-  }]);
-
-  return Demo;
-}(React.Component);
-
-export default Demo;

package/es/modal/demo/position.d.ts

@@ -1,15 +0,0 @@
-/**
- * title: 自定义位置
- * desc: 使用 `centered` 或类似 `style.top` 的样式来设置对话框位置。
- */
-import React from 'react';
-declare class Demo extends React.Component {
-    state: {
-        modal1Visible: boolean;
-        modal2Visible: boolean;
-    };
-    setModal1Visible(modal1Visible: boolean): void;
-    setModal2Visible(modal2Visible: boolean): void;
-    render(): JSX.Element;
-}
-export default Demo;

package/es/modal/demo/position.js

@@ -1,89 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-
-/**
- * title: 自定义位置
- * desc: 使用 `centered` 或类似 `style.top` 的样式来设置对话框位置。
- */
-import React from 'react';
-import { Modal, Button } from '@fle-ui/next';
-
-var Demo = /*#__PURE__*/function (_React$Component) {
-  _inherits(Demo, _React$Component);
-
-  var _super = _createSuper(Demo);
-
-  function Demo() {
-    var _this;
-
-    _classCallCheck(this, Demo);
-
-    _this = _super.apply(this, arguments);
-    _this.state = {
-      modal1Visible: false,
-      modal2Visible: false
-    };
-    return _this;
-  }
-
-  _createClass(Demo, [{
-    key: "setModal1Visible",
-    value: function setModal1Visible(modal1Visible) {
-      this.setState({
-        modal1Visible: modal1Visible
-      });
-    }
-  }, {
-    key: "setModal2Visible",
-    value: function setModal2Visible(modal2Visible) {
-      this.setState({
-        modal2Visible: modal2Visible
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-        type: "primary",
-        onClick: function onClick() {
-          return _this2.setModal1Visible(true);
-        }
-      }, "Display a modal dialog at 20px to Top"), /*#__PURE__*/React.createElement(Modal, {
-        title: "20px to Top",
-        style: {
-          top: 20
-        },
-        visible: this.state.modal1Visible,
-        onOk: function onOk() {
-          return _this2.setModal1Visible(false);
-        },
-        onCancel: function onCancel() {
-          return _this2.setModal1Visible(false);
-        }
-      }, /*#__PURE__*/React.createElement("p", null, "some contents..."), /*#__PURE__*/React.createElement("p", null, "some contents..."), /*#__PURE__*/React.createElement("p", null, "some contents...")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
-        type: "primary",
-        onClick: function onClick() {
-          return _this2.setModal2Visible(true);
-        }
-      }, "Vertically centered modal dialog"), /*#__PURE__*/React.createElement(Modal, {
-        title: "Vertically centered modal dialog",
-        centered: true,
-        visible: this.state.modal2Visible,
-        onOk: function onOk() {
-          return _this2.setModal2Visible(false);
-        },
-        onCancel: function onCancel() {
-          return _this2.setModal2Visible(false);
-        }
-      }, /*#__PURE__*/React.createElement("p", null, "some contents..."), /*#__PURE__*/React.createElement("p", null, "some contents..."), /*#__PURE__*/React.createElement("p", null, "some contents...")));
-    }
-  }]);
-
-  return Demo;
-}(React.Component);
-
-export default Demo;

package/es/modal/demo/width.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 自定义模态的宽度
- * desc: 使用 `width` 来设置模态对话框的宽度。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;

package/es/modal/demo/width.js

@@ -1,35 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-
-/**
- * title: 自定义模态的宽度
- * desc: 使用 `width` 来设置模态对话框的宽度。
- */
-import React, { useState } from 'react';
-import { Modal, Button } from '@fle-ui/next';
-
-var Demo = function Demo() {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    onClick: function onClick() {
-      return setVisible(true);
-    }
-  }, "Open Modal of 1000px width"), /*#__PURE__*/React.createElement(Modal, {
-    title: "Modal 1000px width",
-    centered: true,
-    visible: visible,
-    onOk: function onOk() {
-      return setVisible(false);
-    },
-    onCancel: function onCancel() {
-      return setVisible(false);
-    },
-    width: 1000
-  }, /*#__PURE__*/React.createElement("p", null, "some contents..."), /*#__PURE__*/React.createElement("p", null, "some contents..."), /*#__PURE__*/React.createElement("p", null, "some contents...")));
-};
-
-export default Demo;

package/es/modal/style/index-pure.less

@@ -1,8 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/theme.less';
-@import '../../style/mixins/index';
-@import './modal';
-@import './confirm';
-@import './rtl';
-
-.popover-customize-bg(@dialog-prefix-cls, @popover-background);

package/es/notification/demo/basic.d.ts

@@ -1,6 +0,0 @@
-/**
- * title: 基本
- * desc: 最简单的用法，4.5 秒后自动关闭。
- */
-declare const Demo: () => JSX.Element;
-export default Demo;