dtable-ui-component 6.0.24-beta1 → 6.0.25

package/lib/Picker/style/index.css

@@ -0,0 +1,141 @@
+.am-picker-popup {
+  left: 0;
+  bottom: 0;
+  position: fixed;
+  width: 100%;
+  background-color: #fff;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.am-picker-popup-wrap {
+  position: fixed;
+  overflow: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  -webkit-overflow-scrolling: touch;
+  outline: 0;
+  -webkit-transform: translateZ(1px);
+  transform: translateZ(1px);
+}
+
+.am-picker-popup-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  height: 100%;
+  z-index: 1000;
+  -webkit-transform: translateZ(1px);
+  transform: translateZ(1px);
+}
+
+.am-picker-popup-mask-hidden {
+  display: none;
+}
+
+.am-picker-popup-header {
+  background-image: -webkit-linear-gradient(top, #e7e7e7, #e7e7e7, transparent, transparent);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e7e7e7), color-stop(#e7e7e7), color-stop(transparent), to(transparent));
+  background-image: linear-gradient(to bottom, #e7e7e7, #e7e7e7, transparent, transparent);
+  background-position: bottom;
+  background-size: 100% 1PX;
+  background-repeat: no-repeat;
+  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;
+  position: relative;
+  border-bottom: 1PX solid #ddd;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  html:not([data-scale]) .am-picker-popup-header {
+    border-bottom: none;
+  }
+
+  html:not([data-scale]) .am-picker-popup-header::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-picker-popup-header::after {
+    -webkit-transform: scaleY(0.33);
+    -ms-transform: scaleY(0.33);
+    transform: scaleY(0.33);
+  }
+}
+
+.am-picker-popup-header .am-picker-popup-header-right {
+  text-align: right;
+}
+
+.am-picker-popup-item {
+  color: #108ee9;
+  font-size: 17px;
+  padding: 9px 15px;
+  height: 42px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  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-picker-popup-item-active {
+  background-color: #ddd;
+}
+
+.am-picker-popup-title {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: center;
+  color: #000;
+}
+
+.am-picker-popup .am-picker-popup-close {
+  display: none;
+}
+
+.am-picker-col {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}

package/lib/Popover/index.js

@@ -0,0 +1,62 @@
+"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 = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _rmcTooltip = _interopRequireDefault(require("rmc-tooltip"));
+var _item = _interopRequireDefault(require("./item"));
+function recursiveCloneChildren(children) {
+  let cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (ch, _) => ch;
+  return React.Children.map(children, (child, index) => {
+    const newChild = cb(child, index);
+    if (typeof newChild !== 'string' && typeof newChild !== 'number' && newChild && newChild.props && newChild.props.children) {
+      return /*#__PURE__*/React.cloneElement(newChild, {}, recursiveCloneChildren(newChild.props.children, cb));
+    }
+    return newChild;
+  });
+}
+class Popover extends React.Component {
+  render() {
+    const {
+      overlay,
+      onSelect = () => {},
+      ...restProps
+    } = this.props;
+    const overlayNode = recursiveCloneChildren(overlay, (child, index) => {
+      const extraProps = {
+        firstItem: false
+      };
+      if (child && typeof child !== 'string' && typeof child !== 'number' && child.type &&
+      // Fixme: not sure where the `myName` came from.
+      child.type.myName === 'PopoverItem' && !child.props.disabled) {
+        extraProps.onClick = () => onSelect(child, index);
+        extraProps.firstItem = index === 0;
+        return /*#__PURE__*/React.cloneElement(child, extraProps);
+      }
+      return child;
+    });
+    const wrapperNode = /*#__PURE__*/React.createElement("div", {
+      className: "".concat(this.props.prefixCls, "-inner-wrapper")
+    }, overlayNode);
+    return /*#__PURE__*/React.createElement(_rmcTooltip.default, Object.assign({}, restProps, {
+      overlay: wrapperNode
+    }));
+  }
+}
+exports.default = Popover;
+Popover.defaultProps = {
+  prefixCls: 'am-popover',
+  placement: 'bottomRight',
+  align: {
+    overflow: {
+      adjustY: 0,
+      adjustX: 0
+    }
+  },
+  trigger: ['click']
+};
+Popover.Item = _item.default;

package/lib/Popover/item.js

@@ -0,0 +1,55 @@
+"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 _rmcFeedback = _interopRequireDefault(require("rmc-feedback"));
+class Item extends React.Component {
+  render() {
+    const {
+      children,
+      className,
+      prefixCls,
+      icon,
+      disabled,
+      firstItem,
+      activeStyle,
+      ...restProps
+    } = this.props;
+    const cls = (0, _classnames.default)("".concat(prefixCls, "-item"), className, {
+      ["".concat(prefixCls, "-item-disabled")]: disabled
+    });
+    let activeClass = "".concat(prefixCls, "-item-active ");
+    if (firstItem) {
+      activeClass += "".concat(prefixCls, "-item-fix-active-arrow");
+    }
+    return /*#__PURE__*/React.createElement(_rmcFeedback.default, {
+      disabled: disabled,
+      activeClassName: activeClass,
+      activeStyle: activeStyle
+    }, /*#__PURE__*/React.createElement("div", Object.assign({
+      className: cls
+    }, restProps), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-item-container")
+    }, icon ?
+    /*#__PURE__*/
+    // tslint:disable-next-line:jsx-no-multiline-js
+    React.createElement("span", {
+      className: "".concat(prefixCls, "-item-icon"),
+      "aria-hidden": "true"
+    }, icon) : null, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-item-content")
+    }, children))));
+  }
+}
+exports.default = Item;
+Item.defaultProps = {
+  prefixCls: 'am-popover',
+  disabled: false
+};
+Item.myName = 'PopoverItem';

package/lib/Popover/style/index.css

@@ -0,0 +1,229 @@
+.am-popover {
+  position: absolute;
+  z-index: 1999;
+}
+
+.am-popover-hidden {
+  display: none;
+}
+
+.am-popover-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  height: 100%;
+  z-index: 999;
+}
+
+.am-popover-mask-hidden {
+  display: none;
+}
+
+.am-popover-arrow {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  border-radius: 1PX;
+  background-color: #fff;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  z-index: 0;
+  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.21);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.21);
+}
+
+.am-popover-placement-top .am-popover-arrow,
+.am-popover-placement-topLeft .am-popover-arrow,
+.am-popover-placement-topRight .am-popover-arrow {
+  -webkit-transform: rotate(225deg);
+  -ms-transform: rotate(225deg);
+  transform: rotate(225deg);
+  bottom: -3.5px;
+}
+
+.am-popover-placement-top .am-popover-arrow {
+  left: 50%;
+}
+
+.am-popover-placement-topLeft .am-popover-arrow {
+  left: 8px;
+}
+
+.am-popover-placement-topRight .am-popover-arrow {
+  right: 8px;
+}
+
+.am-popover-placement-right .am-popover-arrow,
+.am-popover-placement-rightTop .am-popover-arrow,
+.am-popover-placement-rightBottom .am-popover-arrow {
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  left: -3.5px;
+}
+
+.am-popover-placement-right .am-popover-arrow {
+  top: 50%;
+}
+
+.am-popover-placement-rightTop .am-popover-arrow {
+  top: 8px;
+}
+
+.am-popover-placement-rightBottom .am-popover-arrow {
+  bottom: 8px;
+}
+
+.am-popover-placement-left .am-popover-arrow,
+.am-popover-placement-leftTop .am-popover-arrow,
+.am-popover-placement-leftBottom .am-popover-arrow {
+  -webkit-transform: rotate(135deg);
+  -ms-transform: rotate(135deg);
+  transform: rotate(135deg);
+  right: -3.5px;
+}
+
+.am-popover-placement-left .am-popover-arrow {
+  top: 50%;
+}
+
+.am-popover-placement-leftTop .am-popover-arrow {
+  top: 8px;
+}
+
+.am-popover-placement-leftBottom .am-popover-arrow {
+  bottom: 8px;
+}
+
+.am-popover-placement-bottom .am-popover-arrow,
+.am-popover-placement-bottomLeft .am-popover-arrow,
+.am-popover-placement-bottomRight .am-popover-arrow {
+  top: -3.5px;
+}
+
+.am-popover-placement-bottom .am-popover-arrow {
+  left: 50%;
+}
+
+.am-popover-placement-bottomLeft .am-popover-arrow {
+  left: 8px;
+}
+
+.am-popover-placement-bottomRight .am-popover-arrow {
+  right: 8px;
+}
+
+.am-popover-inner {
+  font-size: 15px;
+  color: #000;
+  background-color: #fff;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.21);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.21);
+  overflow: hidden;
+}
+
+.am-popover-inner-wrapper {
+  position: relative;
+  background-color: #fff;
+}
+
+.am-popover .am-popover-item {
+  padding: 0 8px;
+}
+
+.am-popover .am-popover-item-container {
+  position: relative;
+  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;
+  height: 39px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 8px;
+}
+
+.am-popover .am-popover-item:not(:first-child) .am-popover-item-container {
+  border-top: 1PX solid #ddd;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  html:not([data-scale]) .am-popover .am-popover-item:not(:first-child) .am-popover-item-container {
+    border-top: none;
+  }
+
+  html:not([data-scale]) .am-popover .am-popover-item:not(:first-child) .am-popover-item-container::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-popover .am-popover-item:not(:first-child) .am-popover-item-container::before {
+    -webkit-transform: scaleY(0.33);
+    -ms-transform: scaleY(0.33);
+    transform: scaleY(0.33);
+  }
+}
+
+.am-popover .am-popover-item.am-popover-item-active .am-popover-item-container {
+  border-top: 0;
+}
+
+.am-popover .am-popover-item.am-popover-item-active .am-popover-item-container:before {
+  display: none !important;
+}
+
+.am-popover .am-popover-item.am-popover-item-active+.am-popover-item .am-popover-item-container {
+  border-top: 0;
+}
+
+.am-popover .am-popover-item.am-popover-item-active+.am-popover-item .am-popover-item-container:before {
+  display: none !important;
+}
+
+.am-popover .am-popover-item.am-popover-item-active {
+  background-color: #ddd;
+}
+
+.am-popover .am-popover-item.am-popover-item-active.am-popover-item-fix-active-arrow {
+  position: relative;
+}
+
+.am-popover .am-popover-item.am-popover-item-disabled {
+  color: #bbb;
+}
+
+.am-popover .am-popover-item.am-popover-item-disabled.am-popover-item-active {
+  background-color: transparent;
+}
+
+.am-popover .am-popover-item-icon {
+  margin-right: 8px;
+  width: 18px;
+  height: 18px;
+}

package/lib/Progress/index.css

@@ -0,0 +1,22 @@
+.am-progress-outer {
+  background-color: #ddd;
+  display: block;
+}
+
+.am-progress-fixed-outer {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 2000;
+}
+
+.am-progress-hide-outer {
+  background-color: transparent;
+}
+
+.am-progress-bar {
+  border: 2px solid #108ee9;
+  -webkit-transition: all .3s linear 0s;
+  transition: all .3s linear 0s;
+}

package/lib/Progress/index.js

@@ -0,0 +1,65 @@
+"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"));
+class Progress extends React.Component {
+  componentWillReceiveProps() {
+    this.noAppearTransition = true;
+  }
+  componentDidMount() {
+    if (this.props.appearTransition) {
+      setTimeout(() => {
+        if (this.barRef) {
+          this.barRef.style.width = "".concat(this.props.percent, "%");
+        }
+      }, 10);
+    }
+  }
+  render() {
+    const {
+      className,
+      prefixCls,
+      position,
+      unfilled,
+      style = {},
+      barStyle = {}
+    } = this.props;
+    const percentStyle = {
+      width: this.noAppearTransition || !this.props.appearTransition ? "".concat(this.props.percent, "%") : 0,
+      height: 0
+    };
+    const wrapCls = (0, _classnames.default)("".concat(prefixCls, "-outer"), className, {
+      ["".concat(prefixCls, "-fixed-outer")]: position === 'fixed',
+      ["".concat(prefixCls, "-hide-outer")]: !unfilled
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      style: style,
+      className: wrapCls,
+      role: "progressbar",
+      "aria-valuenow": this.props.percent,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: el => this.barRef = el,
+      className: "".concat(prefixCls, "-bar"),
+      style: {
+        ...barStyle,
+        ...percentStyle
+      }
+    }));
+  }
+}
+exports.default = Progress;
+Progress.defaultProps = {
+  prefixCls: 'am-progress',
+  percent: 0,
+  position: 'fixed',
+  unfilled: true,
+  appearTransition: false
+};

package/lib/Radio/Radio.js

@@ -0,0 +1,47 @@
+"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 _rcCheckbox = _interopRequireDefault(require("rc-checkbox"));
+var React = _interopRequireWildcard(require("react"));
+class Radio extends React.Component {
+  render() {
+    const {
+      className,
+      style,
+      ...restProps
+    } = this.props;
+    const {
+      prefixCls,
+      children
+    } = restProps;
+    const wrapCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"), className);
+    if ('class' in restProps) {
+      // Todo https://github.com/developit/preact-compat/issues/422
+      /* tslint:disable:no-string-literal */
+      delete restProps['class'];
+    }
+    const mark = /*#__PURE__*/React.createElement("label", {
+      className: wrapCls,
+      style: style
+    }, /*#__PURE__*/React.createElement(_rcCheckbox.default, Object.assign({}, restProps, {
+      type: "radio"
+    })), children);
+    if (this.props.wrapLabel) {
+      return mark;
+    }
+    return /*#__PURE__*/React.createElement(_rcCheckbox.default, Object.assign({}, this.props, {
+      type: "radio"
+    }));
+  }
+}
+exports.default = Radio;
+Radio.defaultProps = {
+  prefixCls: 'am-radio',
+  wrapLabel: true
+};

package/lib/Radio/RadioItem.js

@@ -0,0 +1,57 @@
+"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 _List = _interopRequireDefault(require("../List"));
+var _Radio = _interopRequireDefault(require("./Radio"));
+const ListItem = _List.default.Item;
+function noop() {}
+class RadioItem extends React.Component {
+  render() {
+    const {
+      listPrefixCls,
+      onChange,
+      disabled,
+      radioProps,
+      onClick,
+      ...otherProps
+    } = this.props;
+    const {
+      prefixCls,
+      className,
+      children
+    } = otherProps;
+    const wrapCls = (0, _classnames.default)("".concat(prefixCls, "-item"), className, {
+      ["".concat(prefixCls, "-item-disabled")]: disabled === true
+    });
+
+    // Note: if not omit `onChange`, it will trigger twice on check listitem
+
+    if (!disabled) {
+      otherProps.onClick = onClick || noop;
+    }
+    const extraProps = {};
+    ['name', 'defaultChecked', 'checked', 'onChange', 'disabled'].forEach(i => {
+      if (i in this.props) {
+        extraProps[i] = this.props[i];
+      }
+    });
+    return /*#__PURE__*/React.createElement(ListItem, Object.assign({}, otherProps, {
+      prefixCls: listPrefixCls,
+      className: wrapCls,
+      extra: /*#__PURE__*/React.createElement(_Radio.default, Object.assign({}, radioProps, extraProps))
+    }), children);
+  }
+}
+exports.default = RadioItem;
+RadioItem.defaultProps = {
+  prefixCls: 'am-radio',
+  listPrefixCls: 'am-list',
+  radioProps: {}
+};