@nutui/nutui-react 2.6.23 → 3.0.0-beta.0

package/dist/cjs/packages/dialog/confirm.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    default: function() {
+        return _default;
+    },
+    normalizeConfig: function() {
+        return normalizeConfig;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _dialog = require("./dialog");
+var _config = require("./config");
+var _render = require("../../utils/render");
+function ConfirmDialog(props) {
+    return /*#__PURE__*/ _react.default.createElement(_dialog.Dialog, props, props.content);
+}
+var normalizeConfig = function normalizeConfig(config) {
+    if (config.isNotice) {
+        var icon = config.icon;
+        if (!icon && icon !== null) {
+            switch(config.noticeType){
+                case 'alert':
+                    icon = '';
+                    break;
+                default:
+                    break;
+            }
+        }
+        config.hideCancelButton = true;
+    }
+    return config;
+};
+var confirm = function confirm(config, renderFunc) {
+    var div = document.createElement('div');
+    document.body.appendChild(div);
+    var dialogConfig = (0, _object_spread_props._)((0, _object_spread._)({}, config), {
+        visible: false
+    });
+    var render = function render(props, callback) {
+        (0, _render.render)(/*#__PURE__*/ _react.default.createElement(ConfirmDialog, (0, _object_spread_props._)((0, _object_spread._)({}, props), {
+            onCancel: function onCancel1() {
+                return onCancel();
+            }
+        })), div);
+        callback && callback();
+    };
+    var renderFunction = renderFunc || render;
+    var onConfirm = function onConfirm() {
+        var _onConfirm = config.onConfirm || config.onConfirm;
+        var ret = _onConfirm === null || _onConfirm === void 0 ? void 0 : _onConfirm();
+        if (ret && ret.then) {
+            renderFunction(dialogConfig);
+            return ret.then(function() {
+                onCancel(true);
+            }, function(e) {
+                console.error(e);
+                renderFunction(dialogConfig);
+            });
+        }
+        if (!ret) {
+            onCancel(true);
+        }
+    };
+    // 如果是promise，那么处理loading和加载完成关闭
+    dialogConfig.onConfirm = onConfirm;
+    dialogConfig = normalizeConfig(dialogConfig);
+    dialogConfig.visible = true;
+    renderFunction(dialogConfig);
+    var destroy = function destroy() {
+        (0, _render.unmount)(div);
+        if (div === null || div === void 0 ? void 0 : div.parentNode) {
+            div.parentNode.removeChild(div);
+        }
+        for(var i = 0; i < _config.destroyList.length; i++){
+            var fn = _config.destroyList[i];
+            if (fn === close) {
+                _config.destroyList.splice(i, 1);
+                break;
+            }
+        }
+    };
+    var onCancel = function onCancel(confirm) {
+        !confirm && config.onCancel && config.onCancel();
+        dialogConfig.visible = false;
+        dialogConfig.onClose = function() {
+            config.onClose && config.onClose();
+        };
+        renderFunction(dialogConfig, function() {
+            destroy();
+        });
+    };
+    var update = function update(newConfig) {
+        dialogConfig = (0, _object_spread._)((0, _object_spread_props._)((0, _object_spread._)({}, dialogConfig), {
+            title: config.title
+        }), newConfig);
+        dialogConfig = normalizeConfig(dialogConfig);
+        renderFunction(dialogConfig);
+    };
+    var close = function close() {
+        dialogConfig.visible = false;
+        dialogConfig.onClose = function() {
+            config.onClose && config.onClose();
+            destroy();
+        };
+        renderFunction(dialogConfig);
+    };
+    _config.destroyList.push(close);
+    return {
+        close: close,
+        update: update
+    };
+};
+var _default = confirm;

package/dist/cjs/packages/dialog/content.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Content", {
+    enumerable: true,
+    get: function() {
+        return Content;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _define_property = require("@swc/helpers/_/_define_property");
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var Content = function Content(props) {
+    var visible = props.visible, title = props.title, header = props.header, footer = props.footer, close = props.close, footerDirection = props.footerDirection, onClick = props.onClick, children = props.children;
+    var classPrefix = 'nut-dialog';
+    var renderHeader = function renderHeader() {
+        return title ? /*#__PURE__*/ _react.default.createElement("div", {
+            className: "".concat(classPrefix, "-header")
+        }, title) : null;
+    };
+    var renderFooter = function renderFooter() {
+        return footer ? /*#__PURE__*/ _react.default.createElement("div", {
+            className: (0, _classnames.default)("".concat(classPrefix, "-footer"), (0, _define_property._)({}, footerDirection, footerDirection))
+        }, footer) : null;
+    };
+    var handleClick = function handleClick(e) {
+        onClick && onClick(e);
+    };
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(classPrefix, "-outer"), props.className),
+        style: props.style,
+        onClick: function onClick(e) {
+            return handleClick(e);
+        }
+    }, close, header, /*#__PURE__*/ _react.default.createElement("div", {
+        className: classPrefix,
+        style: {
+            display: visible ? 'flex' : 'none'
+        }
+    }, renderHeader(), /*#__PURE__*/ _react.default.createElement("div", {
+        className: "".concat(classPrefix, "-content")
+    }, /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, children)), renderFooter()));
+};
+Content.displayName = 'NutContent';

package/dist/cjs/packages/dialog/dialog.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Dialog", {
+    enumerable: true,
+    get: function() {
+        return Dialog;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
+var _define_property = require("@swc/helpers/_/_define_property");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _ts_generator = require("@swc/helpers/_/_ts_generator");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _iconsreact = require("@nutui/icons-react");
+var _button = /*#__PURE__*/ _interop_require_default._(require("../button"));
+var _confirm = /*#__PURE__*/ _interop_require_default._(require("./confirm"));
+var _dialogwrap = require("./dialogwrap");
+var _configprovider = require("../configprovider");
+var _typings = require("../../utils/typings");
+var _mergeprops = require("../../utils/merge-props");
+var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    confirmText: '',
+    cancelText: '',
+    overlay: true,
+    closeOnOverlayClick: true,
+    hideConfirmButton: false,
+    hideCancelButton: false,
+    disableConfirmButton: false,
+    footerDirection: 'horizontal',
+    lockScroll: true,
+    closeIconPosition: 'bottom',
+    closeIcon: false,
+    beforeCancel: function beforeCancel() {
+        return true;
+    },
+    beforeClose: function beforeClose() {
+        return true;
+    }
+});
+var BaseDialog = function BaseDialog(props, ref) {
+    var locale = (0, _configprovider.useConfig)().locale;
+    var _mergeProps = (0, _mergeprops.mergeProps)(defaultProps, props), visible = _mergeProps.visible, footer = _mergeProps.footer, hideConfirmButton = _mergeProps.hideConfirmButton, hideCancelButton = _mergeProps.hideCancelButton, lockScroll = _mergeProps.lockScroll, disableConfirmButton = _mergeProps.disableConfirmButton, closeOnOverlayClick = _mergeProps.closeOnOverlayClick, confirmText = _mergeProps.confirmText, cancelText = _mergeProps.cancelText, closeIconPosition = _mergeProps.closeIconPosition, closeIcon = _mergeProps.closeIcon, onClose = _mergeProps.onClose, onCancel = _mergeProps.onCancel, onConfirm = _mergeProps.onConfirm, beforeCancel = _mergeProps.beforeCancel, beforeClose = _mergeProps.beforeClose, restProps = (0, _object_without_properties._)(_mergeProps, [
+        "visible",
+        "footer",
+        "hideConfirmButton",
+        "hideCancelButton",
+        "lockScroll",
+        "disableConfirmButton",
+        "closeOnOverlayClick",
+        "confirmText",
+        "cancelText",
+        "closeIconPosition",
+        "closeIcon",
+        "onClose",
+        "onCancel",
+        "onConfirm",
+        "beforeCancel",
+        "beforeClose"
+    ]);
+    var classPrefix = 'nut-dialog';
+    var _useState = (0, _sliced_to_array._)((0, _react.useState)(false), 2), loading = _useState[0], setLoading = _useState[1];
+    var renderFooter = function renderFooter() {
+        if (footer === null) return '';
+        var handleCancel = function handleCancel(e) {
+            e.stopPropagation();
+            if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel())) return;
+            if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose())) return;
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        };
+        var handleOk = /*#__PURE__*/ function() {
+            var _ref = (0, _async_to_generator._)(function(e) {
+                var e1;
+                return (0, _ts_generator._)(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            e.stopPropagation();
+                            setLoading(true);
+                            _state.label = 1;
+                        case 1:
+                            _state.trys.push([
+                                1,
+                                3,
+                                ,
+                                4
+                            ]);
+                            return [
+                                4,
+                                onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(e)
+                            ];
+                        case 2:
+                            _state.sent();
+                            setLoading(false);
+                            onClose === null || onClose === void 0 ? void 0 : onClose();
+                            return [
+                                3,
+                                4
+                            ];
+                        case 3:
+                            e1 = _state.sent();
+                            setLoading(false);
+                            return [
+                                3,
+                                4
+                            ];
+                        case 4:
+                            return [
+                                2
+                            ];
+                    }
+                });
+            });
+            return function handleOk(e) {
+                return _ref.apply(this, arguments);
+            };
+        }();
+        return footer || /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, !hideCancelButton && /*#__PURE__*/ _react.default.createElement(_button.default, {
+            type: "default",
+            className: "".concat(classPrefix, "-footer-cancel"),
+            onClick: function onClick(e) {
+                return handleCancel(e);
+            }
+        }, cancelText || locale.cancel), !hideConfirmButton && /*#__PURE__*/ _react.default.createElement(_button.default, {
+            type: "primary",
+            className: (0, _classnames.default)("".concat(classPrefix, "-footer-ok"), {
+                disabled: disableConfirmButton
+            }),
+            disabled: disableConfirmButton,
+            onClick: function onClick(e) {
+                return handleOk(e);
+            },
+            loading: loading
+        }, confirmText || locale.confirm));
+    };
+    var renderCloseIcon = function renderCloseIcon() {
+        if (!closeIcon) return null;
+        var handleCancel = function handleCancel() {
+            if (!(beforeCancel === null || beforeCancel === void 0 ? void 0 : beforeCancel())) return;
+            if (!(beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose())) return;
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        };
+        var _obj;
+        var closeClasses = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-close"), true), (0, _define_property._)(_obj, "".concat(classPrefix, "-close-").concat(closeIconPosition), true), _obj));
+        return /*#__PURE__*/ _react.default.createElement("div", {
+            className: closeClasses,
+            onClick: handleCancel
+        }, /*#__PURE__*/ _react.default.isValidElement(closeIcon) ? closeIcon : /*#__PURE__*/ _react.default.createElement(_iconsreact.Close, null));
+    };
+    return /*#__PURE__*/ _react.default.createElement("div", {
+        style: {
+            display: visible ? 'block' : 'none'
+        }
+    }, /*#__PURE__*/ _react.default.createElement(_dialogwrap.DialogWrap, (0, _object_spread_props._)((0, _object_spread._)({}, props), {
+        visible: visible,
+        lockScroll: lockScroll,
+        footer: renderFooter(),
+        close: renderCloseIcon(),
+        onClose: onClose,
+        onCancel: onCancel
+    })));
+};
+var Dialog = /*#__PURE__*/ (0, _react.forwardRef)(BaseDialog);
+Dialog.confirm = function(props) {
+    return (0, _confirm.default)(props);
+};
+[
+    'alert'
+].forEach(function(type) {
+    ;
+    Dialog[type] = function(props) {
+        return (0, _confirm.default)((0, _object_spread_props._)((0, _object_spread._)({}, props), {
+            isNotice: false,
+            noticeType: type
+        }));
+    };
+});
+Dialog.displayName = 'NutDialog';

package/dist/cjs/packages/dialog/dialogwrap.d.ts

@@ -0,0 +1,15 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import { OverlayProps } from "../overlay/overlay";
+interface DialogWrapProps extends OverlayProps {
+    visible: boolean;
+    overlay: boolean;
+    overlayStyle: React.CSSProperties;
+    overlayClassName: string;
+    footer: React.ReactNode;
+    close: React.ReactNode;
+    onCancel: () => void;
+    onClose: () => void;
+    onOverlayClick: (e: MouseEvent) => boolean | void;
+}
+export declare const DialogWrap: FunctionComponent<Partial<DialogWrapProps> & Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'>>;
+export {};

package/dist/cjs/packages/dialog/dialogwrap.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DialogWrap", {
+    enumerable: true,
+    get: function() {
+        return DialogWrap;
+    }
+});
+var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _react = /*#__PURE__*/ _interop_require_default._(require("react"));
+var _reacttransitiongroup = require("react-transition-group");
+var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
+var _content = require("./content");
+var _overlay = require("../overlay/overlay");
+var _typings = require("../../utils/typings");
+var _overlay1 = /*#__PURE__*/ _interop_require_default._(require("../overlay"));
+var _mergeprops = require("../../utils/merge-props");
+var defaultDialogProps = (0, _object_spread._)((0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
+    overlay: true,
+    overlayStyle: {},
+    overlayClassName: '',
+    onCancel: function onCancel() {},
+    onClose: function onClose() {},
+    onOverlayClick: function onOverlayClick(e) {
+        return true;
+    }
+}), _overlay.defaultOverlayProps);
+var DialogWrap = function DialogWrap(props) {
+    var _mergeProps = (0, _mergeprops.mergeProps)(defaultDialogProps, props), visible = _mergeProps.visible, overlay = _mergeProps.overlay, overlayStyle = _mergeProps.overlayStyle, overlayClassName = _mergeProps.overlayClassName, closeOnOverlayClick = _mergeProps.closeOnOverlayClick, lockScroll = _mergeProps.lockScroll, onClose = _mergeProps.onClose, onCancel = _mergeProps.onCancel, onOverlayClick = _mergeProps.onOverlayClick;
+    var onHandleClickOverlay = function onHandleClickOverlay(e) {
+        if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
+            var closed = onOverlayClick && onOverlayClick(e);
+            closed && (onClose === null || onClose === void 0 ? void 0 : onClose());
+            closed && (onCancel === null || onCancel === void 0 ? void 0 : onCancel());
+        }
+    };
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, overlay ? /*#__PURE__*/ _react.default.createElement(_overlay1.default, {
+        style: overlayStyle,
+        className: (0, _classnames.default)('nut-dialog-overlay', overlayClassName),
+        visible: visible,
+        closeOnOverlayClick: closeOnOverlayClick,
+        lockScroll: lockScroll,
+        onClick: onHandleClickOverlay
+    }) : null, /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
+        in: visible,
+        timeout: 300,
+        classNames: "fadeDialog",
+        unmountOnExit: true,
+        appear: true
+    }, /*#__PURE__*/ _react.default.createElement(_content.Content, (0, _object_spread_props._)((0, _object_spread._)({}, props), {
+        visible: visible
+    }))));
+};
+DialogWrap.displayName = 'NutDialogWrap';

package/dist/cjs/packages/dialog/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _dialog = require("./dialog");
+var _default = _dialog.Dialog;

package/dist/cjs/packages/dialog/style/dialog.scss

@@ -0,0 +1,167 @@
+@import '../../../../styles/mixins/index';
+
+.nut-dialog {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: $dialog-width;
+  max-height: 67%;
+  min-height: $dialog-min-height;
+  padding: $dialog-padding;
+  box-sizing: border-box;
+
+  &-overlay {
+    --nutui-overlay-zIndex: 1200;
+  }
+
+  &-outer {
+    position: fixed;
+    max-height: 100%;
+    background-color: $white;
+    transition:
+      transform 0.2s,
+      -webkit-transform 0.2s;
+    -webkit-overflow-scrolling: touch;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    border-radius: $dialog-border-radius;
+    z-index: $dialog-z-index;
+    animation-duration: 0.3s;
+  }
+
+  &-close {
+    position: absolute !important;
+    z-index: 1;
+    cursor: pointer;
+    width: $dialog-close-width;
+    height: $dialog-close-height;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: $dialog-close-top;
+    color: $dialog-close-color;
+    .nut-icon {
+      font-size: 24px;
+      height: 24px;
+      width: 24px;
+    }
+
+    &-top-right {
+      right: $dialog-close-right;
+    }
+
+    &-top-left {
+      left: $dialog-close-left;
+    }
+
+    &-bottom {
+      top: initial;
+      bottom: -56px;
+      left: 50%;
+      transform: translate(-50%);
+    }
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
+  &-header {
+    display: block;
+    text-align: center;
+    font-size: $dialog-header-font-size;
+    font-weight: $dialog-header-font-weight;
+    color: $color-title;
+    @include oneline-ellipsis();
+  }
+
+  &-content {
+    width: 100%;
+    margin: $dialog-content-margin;
+    max-height: $dialog-content-max-height;
+    line-height: $dialog-content-line-height;
+    font-size: $font-size-base;
+    color: $color-text;
+    word-wrap: break-word;
+    word-break: break-all;
+    white-space: pre-wrap;
+    text-align: $dialog-content-text-align;
+    overflow-y: auto;
+  }
+
+  &-footer {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-around;
+
+    &.vertical {
+      flex-direction: column;
+
+      .nut-button {
+        min-width: 100%;
+        margin: 0;
+
+        &.nut-dialog-footer-ok {
+          order: 1;
+        }
+
+        &.nut-dialog-footer-cancel {
+          border: 0;
+          color: $color-text;
+          order: 2;
+          display: flex;
+          align-items: flex-end;
+          margin-top: $dialog-vertical-footer-ok-margin-top;
+        }
+      }
+    }
+
+    .nut-button {
+      min-width: $dialog-footer-button-min-width;
+    }
+
+    &-cancel.nut-dialog-footer-cancel {
+      margin-right: $dialog-footer-cancel-margin-right;
+    }
+
+    &-ok {
+      max-width: $dialog-footer-ok-max-width;
+    }
+  }
+}
+
+[dir='rtl'] .nut-dialog,
+.nut-rtl .nut-dialog {
+  &-outer {
+    left: auto;
+    right: 50%;
+    -webkit-transform: translate(50%, -50%);
+    transform: translate(50%, -50%);
+  }
+
+  &-close {
+    &-top-right {
+      right: auto;
+      left: $dialog-close-right;
+    }
+
+    &-top-left {
+      left: auto;
+      right: $dialog-close-left;
+    }
+  }
+
+  &-footer {
+    &-cancel.nut-dialog-footer-cancel {
+      margin-right: 0;
+      margin-left: $dialog-footer-cancel-margin-right;
+    }
+  }
+
+  &-content {
+    text-align: var(--nutui-dialog-content-text-align, right);
+  }
+}

package/dist/cjs/packages/dialog/style/index.js

@@ -0,0 +1,4 @@
+import '../../button/style';
+import '../../overlay/style';
+import '../../../../styles/mixins/index.scss';
+import './dialog.scss';