dtable-ui-component 6.0.24-beta1 → 6.0.25

package/lib/List/index.css

@@ -0,0 +1,381 @@
+.am-list-header {
+  padding: 15px 15px 9px 15px;
+  font-size: 14px;
+  color: #888;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.am-list-footer {
+  padding: 9px 15px 15px 15px;
+  font-size: 14px;
+  color: #888;
+}
+
+.am-list-body {
+  position: relative;
+  background-color: #fff;
+  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-list-body {
+    border-top: none;
+  }
+
+  html:not([data-scale]) .am-list-body::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-list-body::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-list-body {
+    border-bottom: none;
+  }
+
+  html:not([data-scale]) .am-list-body::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-list-body::after {
+    -webkit-transform: scaleY(0.33);
+    -ms-transform: scaleY(0.33);
+    transform: scaleY(0.33);
+  }
+}
+
+.am-list-body div:not(:last-child) .am-list-line {
+  border-bottom: 1PX solid #ddd;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  html:not([data-scale]) .am-list-body div:not(:last-child) .am-list-line {
+    border-bottom: none;
+  }
+
+  html:not([data-scale]) .am-list-body div:not(:last-child) .am-list-line::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-list-body div:not(:last-child) .am-list-line::after {
+    -webkit-transform: scaleY(0.33);
+    -ms-transform: scaleY(0.33);
+    transform: scaleY(0.33);
+  }
+}
+
+.am-list-item {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding-left: 15px;
+  min-height: 44px;
+  background-color: #fff;
+  vertical-align: middle;
+  overflow: hidden;
+  -webkit-transition: background-color 200ms;
+  transition: background-color 200ms;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  /* list左图片显示*/
+}
+
+.am-list-item .am-list-ripple {
+  position: absolute;
+  background: transparent;
+  display: inline-block;
+  overflow: hidden;
+  will-change: box-shadow, transform;
+  -webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1);
+  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1);
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1);
+  outline: none;
+  cursor: pointer;
+  border-radius: 100%;
+  -webkit-transform: scale(0);
+  -ms-transform: scale(0);
+  transform: scale(0);
+}
+
+.am-list-item .am-list-ripple.am-list-ripple-animate {
+  background-color: rgba(158, 158, 158, 0.2);
+  -webkit-animation: ripple 1s linear;
+  animation: ripple 1s linear;
+}
+
+.am-list-item.am-list-item-top .am-list-line {
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+
+.am-list-item.am-list-item-top .am-list-line .am-list-arrow {
+  margin-top: 2px;
+}
+
+.am-list-item.am-list-item-middle .am-list-line {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.am-list-item.am-list-item-bottom .am-list-line {
+  -webkit-box-align: end;
+  -webkit-align-items: flex-end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+}
+
+.am-list-item.am-list-item-error .am-list-line .am-list-extra {
+  color: #f50;
+}
+
+.am-list-item.am-list-item-error .am-list-line .am-list-extra .am-list-brief {
+  color: #f50;
+}
+
+.am-list-item.am-list-item-active {
+  background-color: #ddd;
+}
+
+.am-list-item.am-list-item-disabled .am-list-line .am-list-content,
+.am-list-item.am-list-item-disabled .am-list-line .am-list-extra {
+  color: #bbb;
+}
+
+.am-list-item img {
+  width: 22px;
+  height: 22px;
+  vertical-align: middle;
+}
+
+.am-list-item .am-list-thumb:first-child {
+  margin-right: 15px;
+}
+
+.am-list-item .am-list-thumb:last-child {
+  margin-left: 8px;
+}
+
+.am-list-item .am-list-line {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  padding-right: 15px;
+  overflow: hidden;
+  /* list左侧主内容*/
+  /* list右补充内容*/
+  /* 辅助性文字*/
+  /* list右侧箭头*/
+}
+
+.am-list-item .am-list-line .am-list-content {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  color: #000;
+  font-size: 17px;
+  line-height: 1.5;
+  text-align: left;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+
+.am-list-item .am-list-line .am-list-extra {
+  -webkit-flex-basis: 36%;
+  -ms-flex-preferred-size: 36%;
+  flex-basis: 36%;
+  color: #888;
+  font-size: 16px;
+  line-height: 1.5;
+  text-align: right;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+
+.am-list-item .am-list-line .am-list-title {
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.am-list-item .am-list-line .am-list-brief {
+  color: #888;
+  font-size: 15px;
+  line-height: 1.5;
+  margin-top: 6px;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.am-list-item .am-list-line .am-list-arrow {
+  display: block;
+  width: 15px;
+  height: 15px;
+  margin-left: 8px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2226%22%20viewBox%3D%220%200%2016%2026%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20id%3D%22UI-KIT_%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%229.9%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20transform%3D%22translate(-5809.000000%2C%20-8482.000000)%22%20fill%3D%22%23C7C7CC%22%3E%3Cpolygon%20id%3D%22Disclosure-Indicator%22%20points%3D%225811%208482%205809%208484%205820.5%208495%205809%208506%205811%208508%205825%208495%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  visibility: hidden;
+}
+
+.am-list-item .am-list-line .am-list-arrow-horizontal {
+  visibility: visible;
+}
+
+.am-list-item .am-list-line .am-list-arrow-vertical {
+  visibility: visible;
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.am-list-item .am-list-line .am-list-arrow-vertical-up {
+  visibility: visible;
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+
+.am-list-item .am-list-line-multiple {
+  padding: 12.5px 15px 12.5px 0;
+}
+
+.am-list-item .am-list-line-multiple .am-list-content {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.am-list-item .am-list-line-multiple .am-list-extra {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.am-list-item .am-list-line-wrap .am-list-content {
+  white-space: normal;
+}
+
+.am-list-item .am-list-line-wrap .am-list-extra {
+  white-space: normal;
+}
+
+.am-list-item select {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  font-size: 17px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+}
+
+@-webkit-keyframes ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(2.5);
+    transform: scale(2.5);
+  }
+}
+
+@keyframes ripple {
+  100% {
+    opacity: 0;
+    -webkit-transform: scale(2.5);
+    transform: scale(2.5);
+  }
+}

package/lib/List/index.js

@@ -0,0 +1,41 @@
+"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 _listItem = _interopRequireDefault(require("./list-item"));
+require("./index.css");
+class List extends React.Component {
+  render() {
+    const {
+      prefixCls,
+      children,
+      className,
+      style,
+      renderHeader,
+      renderFooter,
+      ...restProps
+    } = this.props;
+    const wrapCls = (0, _classnames.default)(prefixCls, className);
+    return /*#__PURE__*/React.createElement("div", Object.assign({
+      className: wrapCls,
+      style: style
+    }, restProps), renderHeader ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-header")
+    }, typeof renderHeader === 'function' ? renderHeader() : renderHeader) : null, children ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-body")
+    }, children) : null, renderFooter ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-footer")
+    }, typeof renderFooter === 'function' ? renderFooter() : renderFooter) : null);
+  }
+}
+List.defaultProps = {
+  prefixCls: 'am-list'
+};
+List.Item = _listItem.default;
+var _default = exports.default = List;

package/lib/List/list-item.js

@@ -0,0 +1,169 @@
+"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.Brief = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var React = _interopRequireWildcard(require("react"));
+var _rmcFeedback = _interopRequireDefault(require("rmc-feedback"));
+/* tslint:disable:jsx-no-multiline-js */
+
+class Brief extends React.Component {
+  render() {
+    return /*#__PURE__*/React.createElement('div', {
+      className: 'am-list-brief',
+      style: this.props.style
+    }, this.props.children);
+  }
+}
+exports.Brief = Brief;
+class ListItem extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onClick = ev => {
+      const {
+        onClick,
+        platform
+      } = this.props;
+      const isAndroid = platform === 'android';
+      if (!!onClick && isAndroid) {
+        if (this.debounceTimeout) {
+          clearTimeout(this.debounceTimeout);
+          this.debounceTimeout = null;
+        }
+        const Item = ev.currentTarget;
+        const RippleWidth = Math.max(Item.offsetHeight, Item.offsetWidth);
+        const ClientRect = ev.currentTarget.getBoundingClientRect();
+        const pointX = ev.clientX - ClientRect.left - Item.offsetWidth / 2;
+        const pointY = ev.clientY - ClientRect.top - Item.offsetWidth / 2;
+        const coverRippleStyle = {
+          width: "".concat(RippleWidth, "px"),
+          height: "".concat(RippleWidth, "px"),
+          left: "".concat(pointX, "px"),
+          top: "".concat(pointY, "px")
+        };
+        this.setState({
+          coverRippleStyle,
+          RippleClicked: true
+        }, () => {
+          this.debounceTimeout = setTimeout(() => {
+            this.setState({
+              coverRippleStyle: {
+                display: 'none'
+              },
+              RippleClicked: false
+            });
+          }, 1000);
+        });
+      }
+      if (onClick) {
+        onClick(ev);
+      }
+    };
+    this.state = {
+      coverRippleStyle: {
+        display: 'none'
+      },
+      RippleClicked: false
+    };
+  }
+  componentWillUnmount() {
+    if (this.debounceTimeout) {
+      clearTimeout(this.debounceTimeout);
+      this.debounceTimeout = null;
+    }
+  }
+  render() {
+    const {
+      prefixCls,
+      className,
+      activeStyle,
+      error,
+      align,
+      wrap,
+      disabled,
+      children,
+      multipleLine,
+      thumb,
+      extra,
+      arrow,
+      onClick,
+      ...restProps
+    } = this.props;
+    const {
+      platform,
+      ...otherProps
+    } = restProps;
+    const {
+      coverRippleStyle,
+      RippleClicked
+    } = this.state;
+    const wrapCls = (0, _classnames.default)("".concat(prefixCls, "-item"), className, {
+      ["".concat(prefixCls, "-item-disabled")]: disabled,
+      ["".concat(prefixCls, "-item-error")]: error,
+      ["".concat(prefixCls, "-item-top")]: align === 'top',
+      ["".concat(prefixCls, "-item-middle")]: align === 'middle',
+      ["".concat(prefixCls, "-item-bottom")]: align === 'bottom'
+    });
+    const rippleCls = (0, _classnames.default)("".concat(prefixCls, "-ripple"), {
+      ["".concat(prefixCls, "-ripple-animate")]: RippleClicked
+    });
+    const lineCls = (0, _classnames.default)("".concat(prefixCls, "-line"), {
+      ["".concat(prefixCls, "-line-multiple")]: multipleLine,
+      ["".concat(prefixCls, "-line-wrap")]: wrap
+    });
+    const arrowCls = (0, _classnames.default)("".concat(prefixCls, "-arrow"), {
+      ["".concat(prefixCls, "-arrow-horizontal")]: arrow === 'horizontal',
+      ["".concat(prefixCls, "-arrow-vertical")]: arrow === 'down' || arrow === 'up',
+      ["".concat(prefixCls, "-arrow-vertical-up")]: arrow === 'up'
+    });
+    const content = /*#__PURE__*/React.createElement("div", Object.assign({}, otherProps, {
+      onClick: ev => {
+        this.onClick(ev);
+      },
+      className: wrapCls
+    }), thumb ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-thumb")
+    }, typeof thumb === 'string' ? /*#__PURE__*/React.createElement("img", {
+      src: thumb,
+      alt: ""
+    }) : thumb) : null, /*#__PURE__*/React.createElement("div", {
+      className: lineCls
+    }, children !== undefined && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-content")
+    }, children), extra !== undefined && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-extra")
+    }, extra), arrow && /*#__PURE__*/React.createElement("div", {
+      className: arrowCls,
+      "aria-hidden": "true"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: coverRippleStyle,
+      className: rippleCls
+    }));
+    let touchProps = {};
+    Object.keys(otherProps).forEach(key => {
+      if (/onTouch/i.test(key)) {
+        touchProps[key] = otherProps[key];
+        delete otherProps[key];
+      }
+    });
+    return /*#__PURE__*/React.createElement(_rmcFeedback.default, Object.assign({}, touchProps, {
+      disabled: disabled || !onClick,
+      activeStyle: activeStyle,
+      activeClassName: "".concat(prefixCls, "-item-active")
+    }), content);
+  }
+}
+ListItem.defaultProps = {
+  prefixCls: 'am-list',
+  align: 'middle',
+  error: false,
+  multipleLine: false,
+  wrap: false,
+  platform: 'ios'
+};
+ListItem.Brief = Brief;
+var _default = exports.default = ListItem;

package/lib/Modal/alert.js

@@ -0,0 +1,82 @@
+"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 = alert;
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _closest = _interopRequireDefault(require("../_util/closest"));
+var _modal = _interopRequireDefault(require("./modal"));
+function alert(title, message) {
+  let actions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [{
+    text: '确定'
+  }];
+  let platform = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'ios';
+  let closed = false;
+  if (!title && !message) {
+    // console.log('Must specify either an alert title, or message, or both');
+    return {
+      close: () => {}
+    };
+  }
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  function close() {
+    ReactDOM.unmountComponentAtNode(div);
+    if (div && 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;
+  });
+  const prefixCls = 'am-modal';
+  function onWrapTouchStart(e) {
+    if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
+      return;
+    }
+    const pNode = (0, _closest.default)(e.target, ".".concat(prefixCls, "-footer"));
+    if (!pNode) {
+      e.preventDefault();
+    }
+  }
+  ReactDOM.render( /*#__PURE__*/React.createElement(_modal.default, {
+    visible: true,
+    transparent: true,
+    title: title,
+    transitionName: "am-zoom",
+    closable: false,
+    maskClosable: false,
+    footer: footer,
+    maskTransitionName: "am-fade",
+    platform: platform,
+    wrapProps: {
+      onTouchStart: onWrapTouchStart
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-alert-content")
+  }, message)), div);
+  return {
+    close
+  };
+}

package/lib/Modal/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _alert = _interopRequireDefault(require("./alert"));
+var _modal = _interopRequireDefault(require("./modal"));
+var _operation = _interopRequireDefault(require("./operation"));
+var _prompt = _interopRequireDefault(require("./prompt"));
+_modal.default.alert = _alert.default;
+_modal.default.prompt = _prompt.default;
+_modal.default.operation = _operation.default;
+var _default = exports.default = _modal.default;