shineout 1.12.2 → 1.12.3

package/esm/Dropdown/index.js

@@ -0,0 +1,347 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import React from 'react';
+import { PureComponent } from '../component';
+import { defaultProps } from '../utils/proptypes';
+import { getParent } from '../utils/dom/element';
+import Button from '../Button';
+import { dropdownClass } from './styles';
+import List from '../AnimationList';
+import Item from './Item';
+import { docSize } from '../utils/dom/document';
+import absoluteList from '../AnimationList/AbsoluteList';
+import { getUidStr } from '../utils/uid';
+import { isFunc } from '../utils/is';
+import absoluteComsumer from '../Table/context';
+import Caret from '../icons/Caret';
+import { isRTL } from '../config';
+import { getDirectionClass } from '../utils/classname';
+import getDataset from '../utils/dom/getDataset';
+var positionMap = {
+  'left-top': 'left-top',
+  'left-bottom': 'left-bottom',
+  'right-top': 'right-top',
+  'right-bottom': 'right-bottom',
+  'top-right': 'left-bottom',
+  'top-left': 'right-bottom',
+  'bottom-right': 'left-top',
+  'bottom-left': 'right-top',
+  auto: ''
+};
+
+var DefaultProps = _objectSpread({}, defaultProps, {
+  data: [],
+  animation: true,
+  disabled: false,
+  trigger: 'click',
+  position: 'bottom-left'
+});
+
+var Dropdown =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Dropdown, _PureComponent);
+
+  function Dropdown(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "dropdownId", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseEnter", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseLeave", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "element", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "DropdownList", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "closeTimer", void 0);
+
+    _this.state = {
+      show: false
+    }; // @ts-ignore
+
+    if (props.hover !== undefined) {
+      console.warn('The "hover" property is not recommend, use trigger="hover" instead.');
+    }
+
+    _this.dropdownId = "dropdown_" + getUidStr();
+    _this.bindElement = _this.bindElement.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.clickAway = _this.clickAway.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleHide = _this.handleHide.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleMouseEnter = _this.handleToggle.bind(_assertThisInitialized(_assertThisInitialized(_this)), true);
+    _this.handleMouseLeave = _this.handleToggle.bind(_assertThisInitialized(_assertThisInitialized(_this)), false);
+    _this.renderList = _this.renderList.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+
+    _this.bindList();
+
+    return _this;
+  }
+
+  var _proto = Dropdown.prototype;
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _PureComponent.prototype.componentWillUnmount.call(this);
+
+    this.toggleDocumentEvent(false);
+  };
+
+  _proto.getTrigger = function getTrigger() {
+    // @ts-ignore
+    if (this.props.hover === true) return 'hover';
+    return this.props.trigger;
+  };
+
+  _proto.getPosition = function getPosition() {
+    var position = this.props.position;
+    if (position !== 'auto') return position;
+    if (!this.element) return 'bottom-left';
+    var windowHeight = docSize.height;
+    var windowWidth = docSize.width;
+    var rect = this.element.getBoundingClientRect();
+    var prefix = rect.bottom > windowHeight / 2 ? 'top-' : 'bottom-';
+    var suffix = rect.right > windowWidth / 2 ? 'right' : 'left';
+    position = prefix + suffix;
+    return position;
+  };
+
+  _proto.bindElement = function bindElement(el) {
+    this.element = el;
+  };
+
+  _proto.bindList = function bindList() {
+    var animation = this.props.animation;
+    var FadeList = List('fade', animation ? 'fast' : 0); // @ts-ignore
+
+    this.DropdownList = absoluteList(function (_ref) {
+      var focus = _ref.focus,
+          other = _objectWithoutPropertiesLoose(_ref, ["focus"]);
+
+      return React.createElement(FadeList, _extends({
+        show: focus
+      }, other));
+    });
+  };
+
+  _proto.toggleDocumentEvent = function toggleDocumentEvent(bind) {
+    var method = bind ? 'addEventListener' : 'removeEventListener';
+    document[method]('click', this.clickAway, true);
+  };
+
+  _proto.clickAway = function clickAway(e) {
+    var absolute = this.props.absolute;
+    var el = getParent(e.target, 'a');
+    var onSelf = absolute ? getParent(e.target, "[data-id=" + this.dropdownId + "]") : el === this.element || this.element.contains(el);
+    if (el && onSelf && el.getAttribute('data-role') === 'item') return;
+    this.handleHide(0);
+  };
+
+  _proto.handleFocus = function handleFocus() {
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+    }
+
+    if (this.state.show) return;
+    this.setState({
+      show: true
+    });
+    this.toggleDocumentEvent(true);
+  };
+
+  _proto.handleHide = function handleHide(delay) {
+    var _this2 = this;
+
+    if (delay === void 0) {
+      delay = 200;
+    }
+
+    this.closeTimer = setTimeout(function () {
+      _this2.setState({
+        show: false
+      });
+
+      _this2.toggleDocumentEvent(false);
+    }, delay);
+  };
+
+  _proto.handleToggle = function handleToggle(show) {
+    if (this.getTrigger() === 'click') return;
+    if (show) this.handleFocus();else this.handleHide();
+  };
+
+  _proto.renderRTLButton = function renderRTLButton(placeholder, spanClassName, caret, buttonClassName) {
+    var _this$props = this.props,
+        isSub = _this$props.isSub,
+        type = _this$props.type,
+        outline = _this$props.outline,
+        size = _this$props.size,
+        disabled = _this$props.disabled;
+
+    if (isSub) {
+      return React.createElement("a", {
+        key: "button",
+        className: dropdownClass('button', 'item', this.state.show && 'active'),
+        "data-role": "item",
+        onClick: this.handleFocus
+      }, React.createElement("span", {
+        className: spanClassName
+      }, placeholder), caret);
+    }
+
+    return React.createElement(Button, {
+      disabled: disabled,
+      onClick: this.handleFocus,
+      outline: outline,
+      className: buttonClassName,
+      type: type,
+      size: size,
+      key: "button"
+    }, React.createElement("span", {
+      className: spanClassName
+    }, placeholder), caret);
+  };
+
+  _proto.renderButton = function renderButton(placeholder) {
+    var _this$props2 = this.props,
+        type = _this$props2.type,
+        outline = _this$props2.outline,
+        size = _this$props2.size,
+        disabled = _this$props2.disabled,
+        isSub = _this$props2.isSub,
+        position = _this$props2.position;
+    var rtl = isRTL();
+    var buttonClassName = dropdownClass('button', !placeholder && 'split-button', rtl && 'rtl');
+    var spanClassName = dropdownClass('button-content');
+    var caret = React.createElement("span", {
+      key: "caret",
+      className: dropdownClass('caret', rtl && 'rtl')
+    }, React.createElement(Caret, null));
+    var childs = [React.createElement("span", {
+      key: "text",
+      className: spanClassName
+    }, placeholder), caret];
+
+    if (['left-bottom', 'left-top'].includes(position)) {
+      childs.reverse();
+    }
+
+    if (isSub) {
+      return React.createElement("a", {
+        key: "button",
+        className: dropdownClass('button', 'item', this.state.show && 'active'),
+        "data-role": "item",
+        onClick: this.handleFocus
+      }, childs);
+    }
+
+    return React.createElement(Button, {
+      disabled: disabled,
+      onClick: this.handleFocus,
+      outline: outline,
+      className: buttonClassName,
+      type: type,
+      size: size,
+      key: "button"
+    }, childs);
+  };
+
+  _proto.renderList = function renderList(data, placeholder, position) {
+    var _this3 = this;
+
+    var _this$props3 = this.props,
+        width = _this$props3.width,
+        onClick = _this$props3.onClick,
+        columns = _this$props3.columns,
+        renderItem = _this$props3.renderItem,
+        absolute = _this$props3.absolute;
+    if (!Array.isArray(data) || data.length === 0) return null;
+    var DropdownList = this.DropdownList;
+    return [React.createElement(DropdownList, {
+      absolute: absolute,
+      parentElement: this.element,
+      position: position,
+      className: dropdownClass(getDirectionClass('menu'), columns !== undefined && columns > 1 && 'box-list', isRTL() && 'rtl'),
+      style: {
+        width: width
+      },
+      key: "list",
+      focus: this.state.show,
+      "data-id": this.dropdownId,
+      fixed: "min"
+    }, data.map(function (d, index) {
+      var childPosition = positionMap[position];
+      var itemClassName = dropdownClass('item', !width && 'no-width', childPosition.indexOf('left') === 0 && 'item-left');
+      var renderPlaceholder;
+
+      if (renderItem) {
+        renderPlaceholder = isFunc(renderItem) ? renderItem(d) : d[renderItem];
+      } else {
+        renderPlaceholder = d.content;
+      }
+
+      var children = d.children;
+      return children ? React.createElement(Dropdown, {
+        style: {
+          width: '100%'
+        },
+        data: children,
+        disabled: !!d.disabled,
+        placeholder: renderPlaceholder,
+        type: "link",
+        key: index,
+        position: childPosition,
+        onClick: onClick,
+        renderItem: renderItem,
+        trigger: _this3.getTrigger(),
+        isSub: true
+      }) : React.createElement(Item, {
+        data: d,
+        key: index,
+        onClick: d.onClick || onClick,
+        itemClassName: itemClassName,
+        renderItem: renderItem,
+        columns: columns,
+        width: width
+      });
+    })), this.renderButton(placeholder)];
+  };
+
+  _proto.render = function render() {
+    var _this$props4 = this.props,
+        data = _this$props4.data,
+        className = _this$props4.className,
+        style = _this$props4.style,
+        placeholder = _this$props4.placeholder;
+    var show = this.state.show;
+    var position = this.getPosition();
+    var wrapClassName = dropdownClass('_', position, show && 'show', {
+      'split-dropdown': !placeholder,
+      rtl: isRTL()
+    });
+    if (className) wrapClassName += " " + className;
+    return React.createElement("div", _extends({
+      ref: this.bindElement,
+      className: wrapClassName,
+      style: style,
+      onMouseEnter: this.handleMouseEnter,
+      onMouseLeave: this.handleMouseLeave
+    }, getDataset(this.props)), this.renderList(data, placeholder, position));
+  };
+
+  return Dropdown;
+}(PureComponent);
+
+_defineProperty(Dropdown, "defaultProps", DefaultProps);
+
+_defineProperty(Dropdown, "displayName", void 0);
+
+Dropdown.displayName = 'ShineoutDropdown';
+var exports = absoluteComsumer(Dropdown);
+export default exports;

package/esm/Dropdown/interface.d.ts

@@ -0,0 +1 @@
+export { DropdownProps as Props, DropdownItem as Item } from './Props';

package/esm/Dropdown/interface.js

@@ -0,0 +1 @@
+export {};

package/esm/Dropdown/styles/dropdown.less

@@ -0,0 +1,349 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@dropdown-prefix: ~'@{so-prefix}-dropdown';
+@dropdown-list: ~'@{so-prefix}-list';
+@button-prefix: ~'@{so-prefix}-button';
+@dropdown-caret-size: 10px;
+
+.@{dropdown-prefix} {
+  position: relative;
+  display: inline-block;
+
+  &:focus {
+    outline: none;
+  }
+
+  &-button {
+    border-width: @dropdown-border-width;
+  }
+
+  &-button.@{button-prefix}-default {
+    border-color: @dropdown-default-border-width-color;
+    &:not(.@{button-prefix}-disabled):hover span.@{dropdown-prefix}-caret,
+    &:not(.@{button-prefix}-disabled):active span.@{dropdown-prefix}-caret,
+    &:not(.@{button-prefix}-disabled):focus span.@{dropdown-prefix}-caret {
+      svg path {
+        fill: @colors-primary;
+      }
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      border-color: @dropdown-default-border-width-hover-color;
+    }
+
+  }
+
+  &-button.@{button-prefix}-outline {
+    &:not(.@{button-prefix}-disabled):hover span.@{dropdown-prefix}-caret,
+    &:not(.@{button-prefix}-disabled):active span.@{dropdown-prefix}-caret,
+    &:not(.@{button-prefix}-disabled):focus span.@{dropdown-prefix}-caret {
+      svg path {
+        fill: white;
+      }
+    }
+  }
+
+  .@{dropdown-prefix}-button span.@{dropdown-prefix}-caret {
+    width: @dropdown-caret-size;
+    height: @dropdown-caret-size;
+    display: inline-block;
+    vertical-align: middle;
+    svg {
+      vertical-align: top;
+    }
+    &:after {
+      vertical-align: @dropdown-arrow-vertical;
+    }
+  }
+
+  &-menu {
+    position: absolute;
+    z-index: @zindex-dropdown;
+    min-width: 100%;
+    padding: 0;
+    background: @dropdown-bg;
+    background-clip: padding-box;
+    border-radius: @input-dropdown-border-radius;
+    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.02), @dropdown-box-shadow;
+
+    hr {
+      height: 0;
+      margin: @dropdown-padding-y 0;
+      border-width: 0;
+      border-top: solid 1px @dropdown-divider-bg;
+    }
+  }
+
+  &-menu .@{dropdown-prefix}-button {
+    display: flex;
+    align-items: center;
+  }
+
+  .@{dropdown-prefix}-button-content {
+    display: inline-block;
+    flex: 1;
+    padding: 0 2px;
+    text-align: left;
+  }
+
+  &-bottom-left,
+  &-bottom-right {
+    > .@{dropdown-prefix}-menu {
+      top: 100%;
+      margin-top: 2px;
+    }
+  }
+
+  &-bottom-left,
+  &-top-left {
+    > .@{dropdown-prefix}-menu {
+      &:not(.@{dropdown-prefix}-rtl) {
+        left: 0;
+      }
+      &.@{dropdown-prefix}-rtl {
+        right: 0;
+      }
+    }
+  }
+
+  &-bottom-right,
+  &-top-right {
+    > .@{dropdown-prefix}-menu {
+      &:not(.@{dropdown-prefix}-rtl) {
+        right: 0;
+      }
+      &.@{dropdown-prefix}-rtl{
+        left: 0
+      }
+    }
+  }
+
+  &-top-left,
+  &-top-right {
+    > .@{dropdown-prefix}-menu {
+      bottom: 100%;
+      margin-bottom: 2px;
+    }
+
+    > .@{dropdown-prefix}-button .@{dropdown-prefix}-caret {
+      transform: rotate(180deg);
+    }
+  }
+
+  &-left-bottom,
+  &-right-bottom {
+    > .@{dropdown-prefix}-menu {
+      bottom: 0;
+    }
+  }
+
+  &-left-bottom,
+  &-left-top {
+    > .@{dropdown-prefix}-menu {
+      &:not(.@{dropdown-prefix}-rtl) {
+        right: 100%;
+        margin-right: 2px;
+      }
+      &.@{dropdown-prefix}-rtl {
+        left: 100%;
+        margin-left: 2px;
+      }
+    }
+
+    > .@{dropdown-prefix}-button .@{dropdown-prefix}-caret {
+      transform: rotate(90deg);
+      .@{dropdown-prefix}-rtl& {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+
+  &-left-top,
+  &-right-top {
+    > .@{dropdown-prefix}-menu {
+      top: 0;
+    }
+  }
+
+  &-right-bottom,
+  &-right-top {
+    > .@{dropdown-prefix}-menu {
+      &-ltr {
+        left: 100%;
+        margin-left: 2px;
+      }
+      &-rtl {
+        right: 100%;
+        margin-right: 2px;
+      }
+
+    }
+
+    > .@{dropdown-prefix}-button .@{dropdown-prefix}-caret {
+
+      &.@{dropdown-prefix}-rtl {
+        transform: rotate(90deg);
+      }
+
+      transform: rotate(270deg);
+    }
+  }
+
+  //&-left-bottom, &-left-top {
+  //  .@{dropdown-prefix}-button {
+  //    flex-direction: row-reverse;
+  //  }
+  //}
+
+  &-item {
+    display: block;
+    padding: @dropdown-item-padding-y @dropdown-padding-x;
+    color: @dropdown-link-color;
+    line-height: @line-height-base;
+    text-decoration: none;
+
+    a&[disabled] {
+      color: @gray-400;
+      cursor: not-allowed;
+    }
+
+    &:first-child {
+      border-top-left-radius: @border-radius-base;
+      border-top-right-radius: @border-radius-base;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: @border-radius-base;
+      border-bottom-right-radius: @border-radius-base;
+    }
+
+    &:hover,
+    &.@{dropdown-prefix}-active {
+      background-color: @dropdown-options-hover-bgc;
+      color: @dropdown-options-hover-color;
+      fill: @dropdown-options-hover-color;
+    }
+
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  &-item-left {
+    // padding-left: @caret-width * 5 - 0.1;
+  }
+
+  &-no-width {
+    white-space: nowrap;
+  }
+
+  &-split.@{dropdown-prefix}-button {
+    padding-right: @button-padding-base-horizontal-7;
+    padding-left: @button-padding-base-horizontal-7;
+
+    &:after,
+    &:before {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+
+  &-box-list {
+    padding: @dropdown-columns-padding;
+    box-sizing: content-box;
+    .@{dropdown-prefix}-item {
+      text-align: center;
+      &:hover {
+        color: @colors-primary;
+      }
+    }
+  }
+
+
+  &-rtl {
+    direction: rtl;
+    text-align: right;
+
+    .@{dropdown-prefix}-button-content {
+      text-align: right;
+    }
+  }
+}
+
+// clear first item border
+.@{dropdown-list} + .@{dropdown-prefix}-button.@{dropdown-prefix}-item {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.@{dropdown-prefix}-split-dropdown {
+  &:not(.@{dropdown-prefix}-rtl) {
+    margin-left: -1px;
+  }
+  &.@{dropdown-prefix}-rtl {
+    margin-right: -1px;
+  }
+}
+
+
+.@{button-prefix}-group {
+  > .@{dropdown-prefix}.@{dropdown-prefix}-split-dropdown {
+    &:not(.@{dropdown-prefix}-rtl) {
+      margin-left: 0;
+    }
+    &.@{dropdown-prefix}-rtl {
+      margin-right: 0;
+    }
+    .@{dropdown-prefix}-button {
+      padding-right: 8px;
+      padding-left: 8px;
+      border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0 !important;
+      border-top-width: @dropdown-button-group-split-border-width;
+      border-bottom-width: @dropdown-button-group-split-border-width;
+      
+      &.@{button-prefix}-default {
+        border-color: @btn-default-border;
+      }
+
+      &.@{dropdown-prefix}-rtl {
+        border-radius:  @btn-border-radius-base 0 0 @btn-border-radius-base !important;
+      }
+
+      .@{dropdown-prefix}-button-content {
+        width: 0;
+      }
+
+      &:not(.@{dropdown-prefix}-rtl) {
+        &:after {margin-left: 0;}
+        .@{dropdown-prefix}-caret {
+          &:after {
+            margin-left: 0;
+          }
+        }
+      }
+      
+      &.@{dropdown-prefix}-rtl {
+        &:after {
+          margin-right: 0;
+        }
+        .@{dropdown-prefix}-caret {
+          &:after {
+            margin-right: 0;
+          }
+        }
+      }
+
+      &.@{button-prefix}-default{
+        &:hover,
+        &:active,
+        &:focus {
+          border-color: @btn-primary-border;
+        }
+      }
+    }
+    
+  }
+}

package/esm/Dropdown/styles/index.d.ts

@@ -0,0 +1 @@
+export const dropdownClass: (...args: any) => string;

package/esm/Dropdown/styles/index.js

@@ -0,0 +1,4 @@
+import '../../styles/normalize.less';
+import dropdownLess from './dropdown.less';
+import genaration from '../../utils/classname';
+export var dropdownClass = genaration(dropdownLess, 'dropdown');