dtable-ui-component 6.0.29-beta9 → 6.0.29

package/lib/Modal/modal.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModalComponent = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var React = _interopRequireWildcard(require("react"));
+var _rmcDialog = _interopRequireDefault(require("rmc-dialog"));
+var _rmcFeedback = _interopRequireDefault(require("rmc-feedback"));
+class ModalComponent extends React.Component {}
+exports.ModalComponent = ModalComponent;
+class Modal extends ModalComponent {
+  renderFooterButton(button, prefixCls, i) {
+    let buttonStyle = {};
+    if (button.style) {
+      buttonStyle = button.style;
+      if (typeof buttonStyle === 'string') {
+        const styleMap = {
+          cancel: {},
+          default: {},
+          destructive: {
+            color: 'red'
+          }
+        };
+        buttonStyle = styleMap[buttonStyle] || {};
+      }
+    }
+    const onClickFn = e => {
+      e.preventDefault();
+      if (button.onPress) {
+        button.onPress();
+      }
+    };
+    return /*#__PURE__*/React.createElement(_rmcFeedback.default, {
+      activeClassName: "".concat(prefixCls, "-button-active"),
+      key: i
+    }, /*#__PURE__*/React.createElement("a", {
+      className: "".concat(prefixCls, "-button"),
+      role: "button",
+      style: buttonStyle,
+      onClick: onClickFn
+    }, button.text || 'Button'));
+  }
+  render() {
+    const {
+      prefixCls,
+      className,
+      wrapClassName,
+      transitionName,
+      maskTransitionName,
+      style,
+      platform,
+      footer = [],
+      operation,
+      animated,
+      transparent,
+      popup,
+      animationType,
+      ...restProps
+    } = this.props;
+    const btnGroupClass = (0, _classnames.default)("".concat(prefixCls, "-button-group-").concat(footer.length === 2 && !operation ? 'h' : 'v'), "".concat(prefixCls, "-button-group-").concat(operation ? 'operation' : 'normal'));
+    const footerDom = footer.length ? /*#__PURE__*/React.createElement("div", {
+      className: btnGroupClass,
+      role: "group"
+    }, footer.map((button, i) =>
+    // tslint:disable-next-line:jsx-no-multiline-js
+    this.renderFooterButton(button, prefixCls, i))) : null;
+    let transName;
+    let maskTransName;
+    if (animated) {
+      // tslint:disable-next-line:prefer-conditional-expression
+      if (transparent) {
+        transName = maskTransName = 'am-fade';
+      } else {
+        transName = maskTransName = 'am-slide-up';
+      }
+      if (popup) {
+        transName = animationType === 'slide-up' ? 'am-slide-up' : 'am-slide-down';
+        maskTransName = 'am-fade';
+      }
+    }
+    const wrapCls = (0, _classnames.default)(wrapClassName, {
+      ["".concat(prefixCls, "-wrap-popup")]: popup
+    });
+    const cls = (0, _classnames.default)(className, {
+      ["".concat(prefixCls, "-transparent")]: transparent,
+      ["".concat(prefixCls, "-popup")]: popup,
+      ["".concat(prefixCls, "-popup-").concat(animationType)]: popup && animationType,
+      ["".concat(prefixCls, "-android")]: platform === 'android'
+    });
+    return /*#__PURE__*/React.createElement(_rmcDialog.default, Object.assign({}, restProps, {
+      prefixCls: prefixCls,
+      className: cls,
+      wrapClassName: wrapCls,
+      transitionName: transitionName || transName,
+      maskTransitionName: maskTransitionName || maskTransName,
+      style: style,
+      footer: footerDom
+    }));
+  }
+}
+exports.default = Modal;
+Modal.defaultProps = {
+  prefixCls: 'am-modal',
+  transparent: false,
+  popup: false,
+  animationType: 'slide-down',
+  animated: true,
+  style: {},
+  onShow() {},
+  footer: [],
+  closable: false,
+  operation: false,
+  platform: 'ios'
+};

package/lib/Modal/operation.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = operation;
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _client = require("react-dom/client");
+var _closest = _interopRequireDefault(require("../_util/closest"));
+var _modal = _interopRequireDefault(require("./modal"));
+function operation() {
+  let actions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [{
+    text: '确定'
+  }];
+  let platform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'ios';
+  let closed = false;
+  const prefixCls = 'am-modal';
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const root = (0, _client.createRoot)(div);
+  function close() {
+    if (div) {
+      root.unmount();
+      if (div.parentNode) {
+        div.parentNode.removeChild(div);
+      }
+    }
+  }
+  const footer = actions.map(button => {
+    // tslint:disable-next-line:only-arrow-functions
+    const orginPress = button.onPress || function () {};
+    button.onPress = () => {
+      if (closed) {
+        return;
+      }
+      const res = orginPress();
+      if (res && res.then) {
+        res.then(() => {
+          closed = true;
+          close();
+        }).catch(() => {});
+      } else {
+        closed = true;
+        close();
+      }
+    };
+    return button;
+  });
+  function onWrapTouchStart(e) {
+    if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
+      return;
+    }
+    const pNode = (0, _closest.default)(e.target, '.am-modal-footer');
+    if (!pNode) {
+      e.preventDefault();
+    }
+  }
+  root.render( /*#__PURE__*/React.createElement(_modal.default, {
+    visible: true,
+    operation: true,
+    transparent: true,
+    prefixCls: prefixCls,
+    transitionName: "am-zoom",
+    closable: false,
+    maskClosable: true,
+    onClose: close,
+    footer: footer,
+    maskTransitionName: "am-fade",
+    className: "am-modal-operation",
+    platform: platform,
+    wrapProps: {
+      onTouchStart: onWrapTouchStart
+    }
+  }));
+  return {
+    close
+  };
+}

package/lib/Modal/prompt.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = prompt;
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _client = require("react-dom/client");
+var _closest = _interopRequireDefault(require("../_util/closest"));
+var _modal = _interopRequireDefault(require("./modal"));
+function prompt(title, message, callbackOrActions) {
+  let type = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'default';
+  let defaultValue = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
+  let placeholders = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : ['', ''];
+  let platform = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 'ios';
+  let closed = false;
+  defaultValue = typeof defaultValue === 'string' ? defaultValue : typeof defaultValue === 'number' ? "".concat(defaultValue) : '';
+  if (!callbackOrActions) {
+    // console.log('Must specify callbackOrActions');
+    return {
+      close: () => {}
+    };
+  }
+  const prefixCls = 'am-modal';
+  const data = {
+    text: defaultValue
+  };
+  function onChange(e) {
+    const target = e.target;
+    const inputType = target.getAttribute('type');
+    if (inputType !== null) {
+      data[inputType] = target.value;
+    }
+  }
+
+  // hotfix issue: https://github.com/ant-design/ant-design-mobile/issues/2177
+  function onClick(e) {
+    const target = e.currentTarget || e.target;
+    if (target) {
+      target.focus();
+    }
+  }
+  function onBlurFixWechat() {
+    // https://github.com/ant-design/ant-design-mobile/issues/3137
+    if (/MicroMessenger/.test(navigator.userAgent)) {
+      // eslint-disable-next-line no-self-assign
+      document.body.scrollTop = document.body.scrollTop;
+    }
+  }
+  let inputDom;
+  const focusFn = input => {
+    setTimeout(() => {
+      if (input) {
+        input.focus();
+      }
+    }, 500);
+  };
+  switch (type) {
+    case 'login-password':
+      inputDom = /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-input-container")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-input")
+      }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+        type: "text",
+        defaultValue: data.text,
+        ref: input => focusFn(input),
+        onClick: onClick,
+        onChange: onChange,
+        placeholder: placeholders[0],
+        onBlur: onBlurFixWechat
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-input")
+      }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+        type: "password",
+        defaultValue: data.password,
+        onClick: onClick,
+        onChange: onChange,
+        placeholder: placeholders[1],
+        onBlur: onBlurFixWechat
+      }))));
+      break;
+    case 'secure-text':
+      inputDom = /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-input-container")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-input")
+      }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+        type: "password",
+        defaultValue: data.password,
+        ref: input => focusFn(input),
+        onClick: onClick,
+        onChange: onChange,
+        placeholder: placeholders[0],
+        onBlur: onBlurFixWechat
+      }))));
+      break;
+    case 'default':
+    default:
+      inputDom = /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-input-container")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-input")
+      }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+        type: "text",
+        defaultValue: data.text,
+        ref: input => focusFn(input),
+        onClick: onClick,
+        onChange: onChange,
+        placeholder: placeholders[0],
+        onBlur: onBlurFixWechat
+      }))));
+  }
+  const content = /*#__PURE__*/React.createElement("div", null, message, inputDom);
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const root = (0, _client.createRoot)(div);
+  function close() {
+    if (div) {
+      root.unmount();
+      if (div.parentNode) {
+        div.parentNode.removeChild(div);
+      }
+    }
+  }
+  function handleConfirm(callback) {
+    if (typeof callback !== 'function') {
+      return;
+    }
+    const {
+      text = '',
+      password = ''
+    } = data;
+    const callbackArgs = type === 'login-password' ? [text, password] : type === 'secure-text' ? [password] : [text];
+    return callback(...callbackArgs);
+  }
+  let actions;
+  if (typeof callbackOrActions === 'function') {
+    actions = [{
+      text: '取消',
+      onPress: () => {}
+    }, {
+      text: '确定',
+      onPress: () => {
+        handleConfirm(callbackOrActions);
+      }
+    }];
+  } else {
+    actions = callbackOrActions.map(item => {
+      return {
+        text: item.text,
+        onPress: () => {
+          return handleConfirm(item.onPress);
+        }
+      };
+    });
+  }
+  const footer = actions.map(button => {
+    // tslint:disable-next-line:only-arrow-functions
+    const orginPress = button.onPress || function () {};
+    button.onPress = () => {
+      if (closed) {
+        return;
+      }
+      const res = orginPress();
+      if (res && res.then) {
+        res.then(() => {
+          closed = true;
+          close();
+        }).catch(() => {});
+      } else {
+        closed = true;
+        close();
+      }
+    };
+    return button;
+  });
+  function onWrapTouchStart(e) {
+    // exclude input element for focus
+    if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
+      return;
+    }
+    const pNode = (0, _closest.default)(e.target, ".".concat(prefixCls, "-content"));
+    if (!pNode) {
+      e.preventDefault();
+    }
+  }
+  root.render( /*#__PURE__*/React.createElement(_modal.default, {
+    visible: true,
+    transparent: true,
+    prefixCls: prefixCls,
+    title: title,
+    closable: false,
+    maskClosable: false,
+    transitionName: "am-zoom",
+    footer: footer,
+    maskTransitionName: "am-fade",
+    platform: platform,
+    wrapProps: {
+      onTouchStart: onWrapTouchStart
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-propmt-content")
+  }, content)));
+  return {
+    close
+  };
+}