@nutui/nutui-react 0.1.0-beta.1 → 0.1.0-beta.2

package/dist/esm/CollapseItem.js

@@ -0,0 +1,142 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React__default, { useState, useEffect, useCallback } from 'react';
+import { c as cn } from './bem-893ad28d.js';
+import { I as Icon } from './icon-63c0d58f.js';
+import '@bem-react/classname';
+var defaultProps = {
+  title: '',
+  name: '',
+  isOpen: false,
+  icon: '',
+  iconSize: '',
+  iconColor: '',
+  disabled: false,
+  rotate: 180,
+  subTitle: '',
+  titleIcon: '',
+  titleIconColor: '',
+  titleIconPosition: '',
+  titleIconSize: ''
+};
+
+var CollapseItem = function CollapseItem(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
+      title = _defaultProps$props.title,
+      isOpen = _defaultProps$props.isOpen,
+      onToggle = _defaultProps$props.onToggle,
+      name = _defaultProps$props.name,
+      disabled = _defaultProps$props.disabled,
+      icon = _defaultProps$props.icon,
+      rotate = _defaultProps$props.rotate,
+      subTitle = _defaultProps$props.subTitle,
+      titleIcon = _defaultProps$props.titleIcon,
+      titleIconColor = _defaultProps$props.titleIconColor,
+      titleIconPosition = _defaultProps$props.titleIconPosition,
+      titleIconSize = _defaultProps$props.titleIconSize,
+      iconSize = _defaultProps$props.iconSize,
+      iconColor = _defaultProps$props.iconColor;
+
+  var _useState = useState(-1),
+      _useState2 = _slicedToArray(_useState, 2),
+      domHeight = _useState2[0],
+      setDomHeight = _useState2[1]; //保存content的高度
+
+
+  var _useState3 = useState('auto'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currHeight = _useState4[0],
+      setCurrHeight = _useState4[1]; //设置content的高度
+
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      update = _useState6[0],
+      setUpdate = _useState6[1];
+
+  var _useState7 = useState({
+    transform: 'translateY(-50%)'
+  }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      iconStyle = _useState8[0],
+      setIconStyle = _useState8[1];
+
+  var colBem = cn('collapse-item');
+  useEffect(function () {
+    setCurrHeight('auto');
+    setUpdate(!update);
+  }, [children]);
+  var measuredRef = useCallback(function (node) {
+    if (node !== null) {
+      setDomHeight(node.getBoundingClientRect().height);
+    }
+  }, [children, update]);
+  useEffect(function () {
+    // setCurrHeight('auto')
+    //一开始content都有高度，在这里根据isOpen，改变其高度
+    if (domHeight !== -1) {
+      isOpen ? setCurrHeight(domHeight + 'px') : setCurrHeight('0px');
+    }
+
+    var newIconStyle = isOpen ? {
+      transform: "translateY(-50%) rotate(".concat(rotate, "deg)")
+    } : {
+      transform: 'translateY(-50%)'
+    };
+    setIconStyle(newIconStyle);
+  }, [isOpen, domHeight]);
+  return React__default.createElement("div", {
+    className: colBem()
+  }, React__default.createElement("div", {
+    className: colBem('header', {
+      disabled: disabled
+    }),
+    onClick: function onClick() {
+      if (disabled) return;
+      onToggle && onToggle(isOpen, name);
+    }
+  }, React__default.createElement("div", {
+    className: colBem('title')
+  }, titleIcon && titleIconPosition == 'left' && React__default.createElement("b", {
+    className: colBem('title-icon-left')
+  }, React__default.createElement(Icon, {
+    name: titleIcon,
+    size: titleIconSize,
+    color: disabled ? '#C2C2C2' : titleIconColor
+  })), title, titleIcon && titleIconPosition == 'right' && React__default.createElement("b", {
+    className: colBem('title-icon-right')
+  }, React__default.createElement(Icon, {
+    name: titleIcon,
+    size: titleIconSize,
+    color: disabled ? '#C2C2C2' : titleIconColor
+  }))), React__default.createElement("div", {
+    className: colBem('sub-title')
+  }, subTitle), React__default.createElement("div", {
+    className: colBem('icon-box')
+  }, React__default.createElement("div", {
+    className: colBem('icon'),
+    style: iconStyle
+  }, React__default.createElement(Icon, {
+    name: icon,
+    size: iconSize,
+    color: disabled ? '#C2C2C2' : iconColor
+  })))), React__default.createElement("div", {
+    className: colBem('content'),
+    style: {
+      height: currHeight
+    },
+    ref: measuredRef
+  }, React__default.createElement("div", {
+    className: colBem('content-text')
+  }, children)));
+};
+
+CollapseItem.defaultProps = defaultProps;
+CollapseItem.displayName = 'NutCollapseItem';
+export { CollapseItem as default };

package/dist/esm/Dialog/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/dialog/dialog.scss'

package/dist/esm/Dialog.js

@@ -0,0 +1,327 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["visible", "footer", "noOkBtn", "noCancelBtn", "okBtnDisabled", "cancelAutoClose"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import * as React from 'react';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import Button from './Button.js';
+import { CSSTransition } from 'react-transition-group';
+import ReactDOM__default from 'react-dom';
+
+var Content = function Content(props) {
+  var visible = props.visible,
+      title = props.title,
+      footer = props.footer,
+      textAlign = props.textAlign,
+      footerDirection = props.footerDirection,
+      children = props.children;
+  var headerNode;
+
+  if (title) {
+    headerNode = React__default.createElement("div", {
+      className: "nut-dialog__header"
+    }, title);
+  }
+
+  var footerNode;
+
+  if (footer) {
+    footerNode = React__default.createElement("div", {
+      className: classNames('nut-dialog__footer', _defineProperty({}, footerDirection, footerDirection))
+    }, footer);
+  }
+
+  return React__default.createElement("div", {
+    className: "nut-dialog__outer"
+  }, React__default.createElement("div", {
+    className: "nut-dialog",
+    style: {
+      display: visible ? 'flex' : 'none'
+    }
+  }, headerNode, React__default.createElement("div", {
+    className: "nut-dialog__content",
+    style: {
+      textAlign: textAlign
+    }
+  }, React__default.createElement("div", null, children)), footerNode));
+};
+
+Content.displayName = 'NutContent';
+
+function Mask(props) {
+  return React.createElement("div", {
+    className: "nut-dialog__mask"
+  });
+}
+
+var DialogWrap = function DialogWrap(props) {
+  var className = props.className,
+      style = props.style,
+      visible = props.visible,
+      mask = props.mask,
+      closeOnClickOverlay = props.closeOnClickOverlay,
+      lockScroll = props.lockScroll,
+      onClosed = props.onClosed,
+      onCancel = props.onCancel;
+
+  var handleClick = function handleClick(e) {
+    if (closeOnClickOverlay && visible && e.target === e.currentTarget) {
+      onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+      onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+      lockScroll && document.body.classList.remove('nut-overflow-hidden');
+    }
+  };
+
+  var wrapStyle = _objectSpread(_objectSpread({}, style), {}, {
+    display: visible ? 'block' : 'none'
+  });
+
+  if (lockScroll && visible) {
+    document.body.classList.add('nut-overflow-hidden');
+  }
+
+  return React__default.createElement(React__default.Fragment, null, mask ? React__default.createElement(CSSTransition, {
+    "in": visible,
+    timeout: 300,
+    classNames: "fadeDialog",
+    unmountOnExit: true,
+    appear: true
+  }, React__default.createElement(Mask, null)) : null, React__default.createElement("div", {
+    className: classNames('nut-dialog__wrap', className),
+    onClick: handleClick,
+    style: wrapStyle
+  }, React__default.createElement(Content, _objectSpread(_objectSpread({}, props), {}, {
+    visible: visible
+  }))));
+};
+
+DialogWrap.displayName = 'NutDialogWrap';
+
+var DialogWrapper = function DialogWrapper(props) {
+  var visible = props.visible;
+  return React__default.createElement("div", {
+    style: {
+      display: visible ? 'block' : 'none'
+    }
+  }, React__default.createElement(DialogWrap, _objectSpread({}, props)));
+};
+
+DialogWrapper.displayName = 'NutDialogWrapper';
+
+function ConfirmDialog(props) {
+  return React__default.createElement(Dialog, _objectSpread({}, 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;
+      }
+    }
+
+    _config.noCancelBtn = true;
+  }
+
+  return _config;
+};
+
+function confirm(config, renderFunc) {
+  var div = document.createElement('div');
+  document.body.appendChild(div);
+
+  function render(props) {
+    ReactDOM__default.render(React__default.createElement(ConfirmDialog, _objectSpread(_objectSpread({}, props), {}, {
+      onCancel: onCancel
+    })), div);
+  }
+
+  var renderFunction = renderFunc || render;
+
+  var dialogConfig = _objectSpread(_objectSpread({}, config), {}, {
+    visible: false
+  });
+
+  var onOk = function onOk() {
+    var ret;
+
+    var _onOk = config.onOk || config.onConfirm;
+
+    if (_onOk) {
+      ret = _onOk();
+    }
+
+    if (ret && ret.then) {
+      renderFunction(dialogConfig);
+      ret.then(function () {
+        onCancel(true);
+      }, function (e) {
+        console.error(e);
+        renderFunction(dialogConfig);
+      });
+    }
+
+    if (!ret) {
+      onCancel(true);
+    }
+  }; // 如果是promise，那么处理loading和加载完成关闭
+
+
+  dialogConfig.onOk = onOk;
+  dialogConfig = normalizeConfig(dialogConfig);
+  dialogConfig.visible = true;
+  renderFunction(dialogConfig);
+
+  function destroy() {
+    var unmountEle = ReactDOM__default.unmountComponentAtNode(div);
+
+    if (unmountEle && div.parentNode) {
+      div.parentNode.removeChild(div);
+    }
+  }
+
+  function onCancel(isOnOk) {
+    !isOnOk && config.onCancel && config.onCancel();
+    dialogConfig.visible = false;
+
+    dialogConfig.onClosed = function () {
+      config.onClosed && config.onClosed();
+      destroy();
+    };
+
+    renderFunction(dialogConfig);
+  }
+
+  function update(newConfig) {
+    dialogConfig = _objectSpread(_objectSpread({}, dialogConfig), {}, {
+      title: config.title
+    }, newConfig);
+    dialogConfig = normalizeConfig(dialogConfig);
+    renderFunction(dialogConfig);
+  }
+
+  function close() {
+    dialogConfig.visible = false;
+
+    dialogConfig.onClosed = function () {
+      config.onClosed && config.onClosed();
+      destroy();
+    };
+
+    renderFunction(dialogConfig);
+  }
+
+  return {
+    close: close,
+    update: update
+  };
+}
+
+var defaultProps = {
+  okText: '确定',
+  cancelText: '取消',
+  mask: true,
+  closeOnClickOverlay: true,
+  noFooter: false,
+  noOkBtn: false,
+  noCancelBtn: false,
+  okBtnDisabled: false,
+  cancelAutoClose: true,
+  textAlign: 'center',
+  footerDirection: 'horizontal',
+  lockScroll: false
+};
+
+var BaseDialog = function BaseDialog(props, ref) {
+  var visible = props.visible,
+      footer = props.footer,
+      noOkBtn = props.noOkBtn,
+      noCancelBtn = props.noCancelBtn,
+      okBtnDisabled = props.okBtnDisabled,
+      cancelAutoClose = props.cancelAutoClose,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var renderFooter = function renderFooter() {
+    var okText = props.okText,
+        cancelText = props.cancelText,
+        footer = props.footer,
+        lockScroll = props.lockScroll,
+        onClosed = props.onClosed,
+        onCancel = props.onCancel,
+        onOk = props.onOk;
+    if (footer === null) return;
+
+    var handleCancel = function handleCancel(e) {
+      if (!cancelAutoClose) return;
+      onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+      onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+
+      if (lockScroll && visible) {
+        document.body.classList.remove('nut-overflow-hidden');
+      }
+    };
+
+    var handleOk = function handleOk(e) {
+      onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+      onOk === null || onOk === void 0 ? void 0 : onOk(e);
+
+      if (lockScroll && visible) {
+        document.body.classList.remove('nut-overflow-hidden');
+      }
+    };
+
+    var footerContent = footer || React__default.createElement(React__default.Fragment, null, !noCancelBtn && React__default.createElement(Button, {
+      size: "small",
+      plain: true,
+      type: "primary",
+      className: "nut-dialog__footer-cancel",
+      onClick: function onClick() {
+        return handleCancel();
+      }
+    }, cancelText), !noOkBtn && React__default.createElement(Button, {
+      size: "small",
+      type: "primary",
+      className: classNames('nut-dialog__footer-ok', {
+        disabled: okBtnDisabled
+      }),
+      disabled: okBtnDisabled,
+      onClick: function onClick() {
+        return handleOk();
+      }
+    }, okText));
+    return footerContent;
+  };
+
+  return React__default.createElement(DialogWrapper, _objectSpread(_objectSpread({}, restProps), {}, {
+    visible: visible,
+    footer: renderFooter()
+  }));
+};
+
+var Dialog = forwardRef(BaseDialog);
+
+Dialog.confirm = function (props) {
+  return confirm(props);
+};
+
+['alert'].forEach(function (type) {
+  Dialog[type] = function (props) {
+    return confirm(_objectSpread(_objectSpread({}, props), {}, {
+      isNotice: false,
+      noticeType: type
+    }));
+  };
+});
+Dialog.defaultProps = defaultProps;
+Dialog.displayName = 'NutDialog';
+export { Dialog as default };

package/dist/esm/Divider/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/divider/divider.scss'

package/dist/esm/Drag/style/index.js

@@ -0,0 +1 @@
+import '../../../packages/drag/drag.scss'