dtable-ui-component 6.0.29-beta9 → 6.0.30

package/lib/ActionSheet/index.js

@@ -0,0 +1,196 @@
+"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 = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _client = require("react-dom/client");
+var _rmcDialog = _interopRequireDefault(require("rmc-dialog"));
+var _rmcFeedback = _interopRequireDefault(require("rmc-feedback"));
+var _getDataAttr = _interopRequireDefault(require("../_util/getDataAttr"));
+var _Badge = _interopRequireDefault(require("../Badge"));
+require("./style/index.css");
+/* tslint:disable:jsx-no-multiline-js */
+
+const NORMAL = 'NORMAL';
+const SHARE = 'SHARE';
+// tslint:disable-next-line:no-empty
+function noop() {}
+const queue = [];
+function createActionSheet(flag, config, callback) {
+  const props = {
+    prefixCls: 'am-action-sheet',
+    cancelButtonText: '取消',
+    ...config
+  };
+  const {
+    prefixCls,
+    className,
+    transitionName,
+    maskTransitionName,
+    maskClosable = true
+  } = props;
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const root = (0, _client.createRoot)(div);
+  queue.push(close);
+  function close() {
+    if (div) {
+      root.unmount();
+      if (div.parentNode) {
+        div.parentNode.removeChild(div);
+      }
+      const index = queue.indexOf(close);
+      if (index !== -1) {
+        queue.splice(index, 1);
+      }
+    }
+  }
+  function cb(index) {
+    let rowIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    const res = callback(index, rowIndex);
+    if (res && res.then) {
+      res.then(() => {
+        close();
+      });
+    } else {
+      close();
+    }
+  }
+  const {
+    title,
+    message,
+    options,
+    destructiveButtonIndex,
+    cancelButtonIndex,
+    cancelButtonText,
+    badges = []
+  } = props;
+  const titleMsg = [title ? /*#__PURE__*/React.createElement("h3", {
+    key: "0",
+    className: "".concat(prefixCls, "-title")
+  }, title) : null, message ? /*#__PURE__*/React.createElement("div", {
+    key: "1",
+    className: "".concat(prefixCls, "-message")
+  }, message) : null];
+  let children = null;
+  let mode = 'normal';
+  switch (flag) {
+    case NORMAL:
+      mode = 'normal';
+      const normalOptions = options;
+      const badgesMap = {};
+      if (badges && badges.length > 0) {
+        badges.forEach(element => {
+          if (element.index >= 0) {
+            badgesMap[element.index] = /*#__PURE__*/React.createElement(_Badge.default, element);
+          }
+        });
+      }
+      children = /*#__PURE__*/React.createElement("div", (0, _getDataAttr.default)(props), titleMsg, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-button-list"),
+        role: "group"
+      }, normalOptions.map((item, index) => {
+        const itemProps = {
+          className: (0, _classnames.default)("".concat(prefixCls, "-button-list-item"), {
+            ["".concat(prefixCls, "-destructive-button")]: destructiveButtonIndex === index,
+            ["".concat(prefixCls, "-cancel-button")]: cancelButtonIndex === index
+          }),
+          onClick: () => cb(index),
+          role: 'button'
+        };
+        let bContent = /*#__PURE__*/React.createElement("div", itemProps, item);
+        // 仅在设置徽标的情况下修改dom结构
+        if (badgesMap[index]) {
+          bContent = /*#__PURE__*/React.createElement("div", Object.assign({}, itemProps, {
+            className: "".concat(itemProps.className, " ").concat(prefixCls, "-button-list-badge")
+          }), /*#__PURE__*/React.createElement("span", {
+            className: "".concat(prefixCls, "-button-list-item-content")
+          }, item), badgesMap[index]);
+        }
+        let bItem = /*#__PURE__*/React.createElement(_rmcFeedback.default, {
+          key: index,
+          activeClassName: "".concat(prefixCls, "-button-list-item-active")
+        }, bContent);
+        if (cancelButtonIndex === index || destructiveButtonIndex === index) {
+          bItem = /*#__PURE__*/React.createElement(_rmcFeedback.default, {
+            key: index,
+            activeClassName: "".concat(prefixCls, "-button-list-item-active")
+          }, /*#__PURE__*/React.createElement("div", itemProps, item, cancelButtonIndex === index ? /*#__PURE__*/React.createElement("span", {
+            className: "".concat(prefixCls, "-cancel-button-mask")
+          }) : null));
+        }
+        return bItem;
+      })));
+      break;
+    case SHARE:
+      mode = 'share';
+      const multipleLine = options.length && Array.isArray(options[0]) || false;
+      const createList = function (item, index) {
+        let rowIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+        return /*#__PURE__*/React.createElement("div", {
+          className: "".concat(prefixCls, "-share-list-item"),
+          role: "button",
+          key: index,
+          onClick: () => cb(index, rowIndex)
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "".concat(prefixCls, "-share-list-item-icon")
+        }, item.icon), /*#__PURE__*/React.createElement("div", {
+          className: "".concat(prefixCls, "-share-list-item-title")
+        }, item.title));
+      };
+      children = /*#__PURE__*/React.createElement("div", (0, _getDataAttr.default)(props), titleMsg, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-share")
+      }, multipleLine ? options.map((item, index) => /*#__PURE__*/React.createElement("div", {
+        key: index,
+        className: "".concat(prefixCls, "-share-list")
+      }, item.map((ii, ind) => createList(ii, ind, index)))) : /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-share-list")
+      }, options.map((item, index) => createList(item, index))), /*#__PURE__*/React.createElement(_rmcFeedback.default, {
+        activeClassName: "".concat(prefixCls, "-share-cancel-button-active")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-share-cancel-button"),
+        role: "button",
+        onClick: () => cb(-1)
+      }, cancelButtonText))));
+      break;
+    default:
+      break;
+  }
+  const rootCls = (0, _classnames.default)("".concat(prefixCls, "-").concat(mode), className);
+  root.render( /*#__PURE__*/React.createElement(_rmcDialog.default, {
+    visible: true,
+    title: "",
+    footer: "",
+    prefixCls: prefixCls,
+    className: rootCls,
+    transitionName: transitionName || 'am-slide-up',
+    maskTransitionName: maskTransitionName || 'am-fade',
+    onClose: () => cb(cancelButtonIndex || -1),
+    maskClosable: maskClosable,
+    wrapProps: props.wrapProps || {}
+  }, children));
+  return {
+    close
+  };
+}
+
+// eslint-disable-next-line import/no-anonymous-default-export
+var _default = exports.default = {
+  showActionSheetWithOptions(config) {
+    let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
+    createActionSheet(NORMAL, config, callback);
+  },
+  showShareActionSheetWithOptions(config) {
+    let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
+    createActionSheet(SHARE, config, callback);
+  },
+  close() {
+    queue.forEach(q => q());
+  }
+};

package/lib/ActionSheet/style/index.css

@@ -0,0 +1,377 @@
+@import url('../../css/am.css');
+
+.am-action-sheet-wrap {
+  position: fixed;
+  overflow: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+}
+
+.am-action-sheet-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  height: 100%;
+  z-index: 1000;
+}
+
+.am-action-sheet-mask-hidden {
+  display: none;
+}
+
+.am-action-sheet-close {
+  display: none;
+}
+
+.am-action-sheet {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: #fff;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.am-action-sheet.am-action-sheet-share {
+  background-color: #f2f2f2;
+}
+
+.am-action-sheet-title,
+.am-action-sheet-message {
+  margin: 15px auto;
+  padding: 0 15px;
+  text-align: center;
+}
+
+.am-action-sheet-title {
+  font-size: 17px;
+}
+
+.am-action-sheet-message {
+  color: #888;
+  font-size: 14px;
+}
+
+.am-action-sheet-button-list {
+  text-align: center;
+  color: #000;
+}
+
+.am-action-sheet-button-list-item {
+  font-size: 18px;
+  padding: 0 8px;
+  margin: 0;
+  position: relative;
+  height: 50px;
+  line-height: 50px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  border-top: 1PX solid #ddd;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),
+(min-resolution: 2dppx) {
+  html:not([data-scale]) .am-action-sheet-button-list-item {
+    border-top: none;
+  }
+
+  html:not([data-scale]) .am-action-sheet-button-list-item::before {
+    content: '';
+    position: absolute;
+    background-color: #ddd;
+    display: block;
+    z-index: 1;
+    top: 0;
+    right: auto;
+    bottom: auto;
+    left: 0;
+    width: 100%;
+    height: 1PX;
+    -webkit-transform-origin: 50% 50%;
+    -ms-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -webkit-transform: scaleY(0.5);
+    -ms-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3),
+(min-resolution: 2dppx) and (min-resolution: 3dppx) {
+  html:not([data-scale]) .am-action-sheet-button-list-item::before {
+    -webkit-transform: scaleY(0.33);
+    -ms-transform: scaleY(0.33);
+    transform: scaleY(0.33);
+  }
+}
+
+.am-action-sheet-button-list-item.am-action-sheet-button-list-item-active {
+  background-color: #ddd;
+}
+
+.am-action-sheet-button-list-badge {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.am-action-sheet-button-list-badge .am-badge {
+  margin-left: 8px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.am-action-sheet-button-list-item-content {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.am-action-sheet-button-list .am-action-sheet-cancel-button {
+  padding-top: 6px;
+  position: relative;
+}
+
+.am-action-sheet-button-list .am-action-sheet-cancel-button-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 6px;
+  background-color: #e7e7ed;
+  border-top: 1PX solid #ddd;
+  border-bottom: 1PX solid #ddd;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),
+(min-resolution: 2dppx) {
+  html:not([data-scale]) .am-action-sheet-button-list .am-action-sheet-cancel-button-mask {
+    border-top: none;
+  }
+
+  html:not([data-scale]) .am-action-sheet-button-list .am-action-sheet-cancel-button-mask::before {
+    content: '';
+    position: absolute;
+    background-color: #ddd;
+    display: block;
+    z-index: 1;
+    top: 0;
+    right: auto;
+    bottom: auto;
+    left: 0;
+    width: 100%;
+    height: 1PX;
+    -webkit-transform-origin: 50% 50%;
+    -ms-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -webkit-transform: scaleY(0.5);
+    -ms-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3),
+(min-resolution: 2dppx) and (min-resolution: 3dppx) {
+  html:not([data-scale]) .am-action-sheet-button-list .am-action-sheet-cancel-button-mask::before {
+    -webkit-transform: scaleY(0.33);
+    -ms-transform: scaleY(0.33);
+    transform: scaleY(0.33);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),
+(min-resolution: 2dppx) {
+  html:not([data-scale]) .am-action-sheet-button-list .am-action-sheet-cancel-button-mask {
+    border-bottom: none;
+  }
+
+  html:not([data-scale]) .am-action-sheet-button-list .am-action-sheet-cancel-button-mask::after {
+    content: '';
+    position: absolute;
+    background-color: #ddd;
+    display: block;
+    z-index: 1;
+    top: auto;
+    right: auto;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1PX;
+    -webkit-transform-origin: 50% 100%;
+    -ms-transform-origin: 50% 100%;
+    transform-origin: 50% 100%;
+    -webkit-transform: scaleY(0.5);
+    -ms-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3),
+(min-resolution: 2dppx) and (min-resolution: 3dppx) {
+  html:not([data-scale]) .am-action-sheet-button-list .am-action-sheet-cancel-button-mask::after {
+    -webkit-transform: scaleY(0.33);
+    -ms-transform: scaleY(0.33);
+    transform: scaleY(0.33);
+  }
+}
+
+.am-action-sheet-button-list .am-action-sheet-destructive-button {
+  color: #f4333c;
+}
+
+.am-action-sheet-share-list {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  border-top: 1PX solid #ddd;
+  padding: 21px 0 21px 15px;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),
+(min-resolution: 2dppx) {
+  html:not([data-scale]) .am-action-sheet-share-list {
+    border-top: none;
+  }
+
+  html:not([data-scale]) .am-action-sheet-share-list::before {
+    content: '';
+    position: absolute;
+    background-color: #ddd;
+    display: block;
+    z-index: 1;
+    top: 0;
+    right: auto;
+    bottom: auto;
+    left: 0;
+    width: 100%;
+    height: 1PX;
+    -webkit-transform-origin: 50% 50%;
+    -ms-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -webkit-transform: scaleY(0.5);
+    -ms-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3),
+(min-resolution: 2dppx) and (min-resolution: 3dppx) {
+  html:not([data-scale]) .am-action-sheet-share-list::before {
+    -webkit-transform: scaleY(0.33);
+    -ms-transform: scaleY(0.33);
+    transform: scaleY(0.33);
+  }
+}
+
+.am-action-sheet-share-list-item {
+  -webkit-box-flex: 0;
+  -webkit-flex: none;
+  -ms-flex: none;
+  flex: none;
+  margin: 0 12px 0 0;
+}
+
+.am-action-sheet-share-list-item-icon {
+  margin-bottom: 9px;
+  width: 60px;
+  height: 60px;
+  background-color: #fff;
+  border-radius: 3px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.am-action-sheet-share-list-item-title {
+  color: #888;
+  font-size: 10px;
+  text-align: center;
+}
+
+.am-action-sheet-share-cancel-button {
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  background-color: #fff;
+  color: #000;
+  font-size: 18px;
+  position: relative;
+  border-top: 1PX solid #ddd;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2),
+(min-resolution: 2dppx) {
+  html:not([data-scale]) .am-action-sheet-share-cancel-button {
+    border-top: none;
+  }
+
+  html:not([data-scale]) .am-action-sheet-share-cancel-button::before {
+    content: '';
+    position: absolute;
+    background-color: #ddd;
+    display: block;
+    z-index: 1;
+    top: 0;
+    right: auto;
+    bottom: auto;
+    left: 0;
+    width: 100%;
+    height: 1PX;
+    -webkit-transform-origin: 50% 50%;
+    -ms-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -webkit-transform: scaleY(0.5);
+    -ms-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3),
+(min-resolution: 2dppx) and (min-resolution: 3dppx) {
+  html:not([data-scale]) .am-action-sheet-share-cancel-button::before {
+    -webkit-transform: scaleY(0.33);
+    -ms-transform: scaleY(0.33);
+    transform: scaleY(0.33);
+  }
+}
+
+.am-action-sheet-share-cancel-button.am-action-sheet-share-cancel-button-active {
+  background-color: #ddd;
+}

package/lib/ActivityIndicator/index.css

@@ -0,0 +1,110 @@
+@import url('../css/am.css');
+
+.am-activity-indicator {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  z-index: 99;
+}
+
+.am-activity-indicator-spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-2.125%20-1.875%2064%2064%22%3E%3Cpath%20fill%3D%22%23CCC%22%20d%3D%22M29.875-1.875c-17.673%200-32%2014.327-32%2032s14.327%2032%2032%2032%2032-14.327%2032-32-14.327-32-32-32zm0%2060.7c-15.85%200-28.7-12.85-28.7-28.7s12.85-28.7%2028.7-28.7%2028.7%2012.85%2028.7%2028.7-12.85%2028.7-28.7%2028.7z%22%2F%3E%3Cpath%20fill%3D%22%23108ee9%22%20d%3D%22M61.858%2030.34c.003-.102.008-.203.008-.305%200-11.43-5.996-21.452-15.01-27.113l-.013.026c-.24-.137-.515-.22-.81-.22-.912%200-1.65.738-1.65%201.65%200%20.654.384%201.215.937%201.482%207.963%205.1%2013.247%2014.017%2013.247%2024.176%200%20.147-.01.293-.01.44h.022c0%20.01-.004.02-.004.03%200%20.91.74%201.65%201.65%201.65s1.65-.74%201.65-1.65c0-.06-.012-.112-.018-.167z%22%2F%3E%3C%2Fsvg%3E");
+  background-position: 50%;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  -webkit-animation: spinner-anime 1s linear infinite;
+  animation: spinner-anime 1s linear infinite;
+}
+
+.am-activity-indicator-tip {
+  font-size: 14px;
+  margin-left: 8px;
+  color: #000;
+  opacity: 0.4;
+}
+
+.am-activity-indicator.am-activity-indicator-toast {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  z-index: 1999;
+}
+
+.am-activity-indicator.am-activity-indicator-toast .am-activity-indicator-spinner {
+  margin: 0;
+}
+
+.am-activity-indicator.am-activity-indicator-toast .am-activity-indicator-toast {
+  display: inline-block;
+  position: relative;
+  top: 4px;
+}
+
+.am-activity-indicator-content {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 15px 15px;
+  border-radius: 7px;
+  background-clip: padding-box;
+  color: #fff;
+  background-color: rgba(58, 58, 58, 0.9);
+  font-size: 15px;
+  line-height: 20px;
+}
+
+.am-activity-indicator-spinner-lg {
+  width: 32px;
+  height: 32px;
+}
+
+@-webkit-keyframes spinner-anime {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner-anime {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}