shineout 1.12.2 → 1.12.3

package/esm/Cascader/styles/cascader.less

@@ -0,0 +1,452 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@cascader-prefix: ~'@{so-prefix}-cascader';
+@list-prefix: ~'@{so-prefix}-list';
+@checkinput-prefix: ~'@{so-prefix}-checkinput';
+@input-prefix: ~'@{so-prefix}-input';
+@select-prefix: ~'@{so-prefix}-select';
+@input-title-prefix: ~'@{so-prefix}-input-title-box';
+@baseOffset: 12;
+@multiOffset: 22;
+
+.@{cascader-prefix} {
+  position: relative;
+  width: 100%;
+  display: flex;
+
+  &:focus {
+    outline: none;
+  }
+
+  &-result {
+    cursor: pointer;
+    // position: relative;
+    display: flex;
+    max-height: 105px;
+    flex-flow: wrap;
+    overflow-y: auto;
+    flex-grow: 1;
+    &-ltr {
+      padding: @padding-base-vertical @padding-base-horizontal+@baseOffset 0 @padding-base-horizontal;
+    }
+    &-rtl {
+      padding: @padding-base-vertical   @padding-base-horizontal 0  @padding-base-horizontal+@baseOffset;
+    }
+
+    .@{so-prefix}-input-placeholder {
+      color: @input-color-placeholder;
+    }
+
+    > span,
+    .@{cascader-prefix}-item {
+      display: inline-block;
+      overflow: hidden;
+      max-width: 80%;
+      padding: 0 @select-result-space;
+      margin-bottom: @padding-base-vertical;
+      border-radius: @select-result-border-radius;
+      color: inherit;
+      text-overflow: ellipsis;
+      position: relative;
+      &-ltr {
+        margin-right: @select-result-space;
+      }
+      &-rtl {
+        margin-left: @select-result-space;
+      }
+
+      &-compressed {
+        padding: 0 8px;
+        font-size: 80%;
+        opacity: .9;
+        > span {
+          //vertical-align: middle;
+          letter-spacing: 2px;
+          padding: 0;
+          margin: 0;
+          overflow: visible;
+          max-width: none;
+        }
+      }
+
+      &:after {
+        content: '\feff ';
+      }
+
+      &.@{cascader-prefix}-remove-container {
+        &-ltr {
+          padding-right: 16px;
+        }
+        &-rtl {
+          padding-left: 16px;
+        }
+        &:after {
+          content: none;
+        }
+      }
+
+      .@{cascader-prefix}-single-remove {
+        box-sizing: border-box;
+        position: absolute;
+        top: 50%;
+        margin: 0;
+        padding: 0;
+
+        &-ltr {
+          right: 8px;
+          transform: translate(50%, -50%);
+        }
+        &-rtl {
+          left: 8px;
+          transform: translate(-50%, -50%);
+        }
+
+        svg {
+          width: 6px;
+          height: 6px;
+          transform: translateY(-1px);
+
+          path {
+            transition: all .2s;
+            fill: @gray-500;
+          }
+        }
+        &:hover {
+          svg path {
+            fill: @colors-primary;
+          }
+        }
+      }
+    }
+
+    .@{cascader-prefix}-item {
+      background: @select-result-bg;
+      font-size: @font-size-base;
+      color: @gray-700;
+    }
+
+    .@{cascader-prefix}-input {
+      display: inline-flex;
+      min-width: 12px;
+      flex: 1;
+      margin-bottom: @padding-base-vertical;
+      outline: none;
+      cursor: text;
+      white-space: pre;
+
+      &:after {
+        content: '\feff ';
+      }
+
+      &.@{cascader-prefix}-full {
+        display: block;
+      }
+    }
+  }
+
+  &-disabled &-result{
+    cursor: not-allowed;
+    .so-cascader-item {
+      cursor: not-allowed;
+      background-color: inherit;
+      color: inherit;
+    }
+    .@{select-prefix}-multi {
+      visibility: visible;
+      cursor: not-allowed;
+    }
+  }
+
+  &:not(&-disabled) {
+    &.@{cascader-prefix}-focus .@{cascader-prefix}-close,
+    .@{cascader-prefix}-result:hover .@{cascader-prefix}-close,
+    .@{cascader-prefix}-title-box:hover .@{cascader-prefix}-close
+    {
+      display: block;
+    }
+
+    &.@{cascader-prefix}-focus .@{cascader-prefix}-result-clearable .@{select-prefix}-multi,
+    .@{cascader-prefix}-result-clearable:hover .@{select-prefix}-multi,
+    .@{cascader-prefix}-title-box:hover .@{cascader-prefix}-result-clearable .@{select-prefix}-multi
+    {
+      visibility: hidden;
+    }
+  }
+
+  &-multiple {
+    .@{cascader-prefix}-close {
+      &-ltr {
+        right: 19px;
+      }
+      &-rtl {
+        left: 19px
+      }
+    }
+  }
+
+  div&-options {
+    width: auto;
+    white-space: nowrap;
+    align-items: stretch;
+    font-size: @font-size-base;
+  }
+
+  &-focus &-options {
+    display: inline-flex;
+  }
+
+  &-compressed&-result {
+    flex-grow: 1;
+    width: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    &-ltr {
+      padding: @padding-base-vertical @padding-base-horizontal+@multiOffset 0 @padding-base-horizontal;
+    }
+    &-rtl {
+      padding: @padding-base-vertical @padding-base-horizontal 0 @padding-base-horizontal+@multiOffset;
+    }
+    .@{cascader-prefix}-item {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+    .@{cascader-prefix}-item-only {
+      flex-shrink: 1;
+    }
+    .@{cascader-prefix}-input {
+      white-space: nowrap;
+    }
+    .@{cascader-prefix}-close {
+      &-ltr {
+        right: 9px;
+      }
+      &-rtl {
+        left: 9px
+      }
+
+    }
+
+  }
+
+  &-no-data {
+    width: 100%;
+    position: relative;
+    display: block;
+    overflow: hidden;
+    padding: @dropdown-item-padding-y @dropdown-padding-x+12 @dropdown-item-padding-y @dropdown-padding-x;
+    color: @gray-500;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    text-overflow: ellipsis;
+    transition: none;
+    white-space: nowrap;
+    .@{input-prefix}-rtl &, .@{list-prefix}-rtl & {
+      padding: @dropdown-item-padding-y @dropdown-padding-x @dropdown-item-padding-y @dropdown-padding-x +12;
+    }
+    &:hover {
+      color: @dropdown-link-active-color;
+    }
+  }
+
+  &-list-loading {
+    padding: @dropdown-item-padding-y @dropdown-padding-x;
+  }
+
+  &-list {
+    display: inline-block;
+    min-width: 120px;
+    height: 100%;
+    &-ltr {
+      border-right: solid 1px @gray-200;
+    }
+    &-rtl {
+      border-left: solid 1px @gray-200;
+    }
+    overflow-y: auto;
+    vertical-align: top;
+  }
+
+  &-node {
+    position: relative;
+    padding: @dropdown-item-padding-y @dropdown-padding-x+16 @dropdown-item-padding-y @dropdown-padding-x;
+    .@{input-prefix}-rtl &, .@{list-prefix}-rtl & {
+      padding: @dropdown-item-padding-y @dropdown-padding-x @dropdown-item-padding-y @dropdown-padding-x+16;
+    }
+    color: @dropdown-link-color;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: @dropdown-link-hover-bg;
+    }
+
+    &.@{cascader-prefix}-disabled {
+      color: @gray-400;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &-loading {
+    position: absolute;
+    top: 10px;
+    right: 12px;
+    .@{input-prefix}-rtl &, .@{list-prefix}-rtl & {
+      right: auto;
+      left: 12px;
+    }
+  }
+
+  &-has-children,
+  &-may-be-children {
+    .@{cascader-prefix}-caret {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      top: 50%;
+      &-ltr {
+        right: 12px;
+        transform: translateY(-50%) rotate(-90deg);
+      }
+      &-rtl {
+        left: 12px;
+        transform: translateY(-50%) rotate(90deg);
+      }
+    }
+  }
+
+  &-may-be-children .@{cascader-prefix}-caret {
+    fill: @gray-300;
+  }
+
+  &-active {
+    background-color: @cascader-active-background-color;
+    color: @cascader-active-color;
+    // font-weight: bold;
+    text-decoration: none;
+
+    // cover hover
+    &.@{cascader-prefix}-node {
+      background-color: @cascader-active-background-color;
+      color: @cascader-active-color;
+    }
+  }
+
+  div&-filter {
+    display: block;
+    min-width: 100%;
+    width: auto;
+    &-list {
+      overflow: auto;
+      &-separator {
+        margin: 0 4px;
+      }
+      &-content {
+        display: inline-block;
+        transition: all .2s;
+        &.@{cascader-prefix}-disabled {
+          color: @gray-400;
+          cursor: not-allowed;
+        }
+      }
+      .@{cascader-prefix}-node {
+        cursor: pointer;
+      }
+    }
+    &:not(.@{cascader-prefix}-leaf-only) {
+      .@{cascader-prefix}-filter-list-content {
+        &:not(.@{cascader-prefix}-disabled):hover {
+          color: @colors-primary;
+        }
+      }
+    }
+  }
+
+
+  &-popover {
+    .@{cascader-prefix}-result {
+      max-height: 112px;
+      max-width: 300px;
+      padding: 14px 14px 8px 14px;
+
+      .@{cascader-prefix}-item  {
+        max-width: none;
+      }
+    }
+  }
+}
+
+.@{cascader-prefix}-rtl {
+  direction: rtl;
+  text-align: start;
+}
+
+
+.@{input-prefix}  {
+  &.@{input-prefix}-small {
+    .@{cascader-prefix}-result {
+      padding-top: 2px;
+
+      .@{input-prefix}-placeholder,
+      .@{cascader-prefix}-item,
+      .@{cascader-prefix}-input {
+        margin-bottom: 2px;
+        font-size: @font-size-small;
+      }
+    }
+  }
+
+  &.@{input-prefix}-large {
+    .@{cascader-prefix}-result {
+      padding-top: 8px;
+
+      .@{input-prefix}-placeholder,
+      .@{cascader-prefix}-item,
+      .@{cascader-prefix}-input {
+        margin-bottom: 8px;
+        font-size: @font-size-large;
+      }
+    }
+  }
+}
+
+.@{cascader-prefix}-result.@{cascader-prefix}-large {
+  .@{cascader-prefix}-item {
+    font-size: @font-size-large;
+  }
+}
+
+.@{cascader-prefix}-result.@{cascader-prefix}-small {
+  .@{cascader-prefix}-item {
+    font-size: @font-size-small;
+  }
+}
+
+.@{cascader-prefix} {
+  &-title-box &-title-box-title, .@{input-title-prefix}&-title-box &-result {
+    .inner-title-responsive-offset(@cascader-prefix,0, @baseOffset)
+  }
+  &-title-box &-title-box-title-compressed&-title-box-title, &-title-box &-compressed&-result {
+    .inner-title-responsive-offset(@cascader-prefix, 0, @multiOffset)
+  }
+  &-title-box {
+    > .@{input-title-prefix}-content {
+      display: flex;
+    }
+  }
+  &-title-box &-result {
+    .@{input-prefix}-placeholder,
+    .@{cascader-prefix}-item,
+    .@{cascader-prefix}-input {
+      .inner-title-responsive-scroll-item-bottom(@cascader-prefix)
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+import '../../styles/normalize.less';
+export declare const cascaderClass: (...args: any) => string;

package/esm/Cascader/styles/index.js

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

package/esm/Checkbox/CheckItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SimpleCheckProps, SimpleRadioProps, SimpleSwitchProps, CheckValueType } from './Props';
+export interface CheckboxState {
+    checked?: CheckValueType;
+}
+declare function checkItem(type: 'checkbox'): React.ComponentClass<SimpleCheckProps>;
+declare function checkItem(type: 'radio'): React.ComponentClass<SimpleRadioProps>;
+declare function checkItem(type: 'switch'): React.ComponentClass<SimpleSwitchProps>;
+export default checkItem;

package/esm/Checkbox/CheckItem.js

@@ -0,0 +1,199 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread";
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import classnames from 'classnames';
+import { PureComponent } from '../component';
+import { defaultProps } from '../utils/proptypes';
+import { getUidStr } from '../utils/uid';
+import { getDirectionClass } from '../utils/classname';
+import { isEnterPress } from '../utils/is';
+import Input from '../Input';
+import { checkinputClass } from './styles';
+import { isRTL } from '../config';
+import getDataset from '../utils/dom/getDataset';
+
+function checkItem(type) {
+  var CheckItem =
+  /*#__PURE__*/
+  function (_PureComponent) {
+    _inheritsLoose(CheckItem, _PureComponent);
+
+    function CheckItem(props) {
+      var _this;
+
+      _this = _PureComponent.call(this, props) || this;
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "id", void 0);
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "input", void 0);
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "el", void 0);
+
+      _this.state = {
+        checked: typeof props.checked === 'function' ? undefined : props.checked
+      };
+      _this.id = "cb_" + getUidStr();
+      _this.input = null;
+      _this.el = null;
+      _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+      _this.handleInputChange = _this.handleInputChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+      _this.handleEnter = _this.handleEnter.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+      _this.bindRef = _this.bindRef.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+      return _this;
+    }
+
+    var _proto = CheckItem.prototype;
+
+    _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+      var _this$props = this.props,
+          checked = _this$props.checked,
+          inputable = _this$props.inputable,
+          value = _this$props.value,
+          htmlValue = _this$props.htmlValue;
+
+      if (prevProps.value !== value && checked === undefined) {
+        // eslint-disable-next-line
+        this.setState({
+          checked: inputable ? !!value : value === htmlValue
+        });
+      }
+    };
+
+    _proto.getChecked = function getChecked() {
+      var _this$props2 = this.props,
+          checked = _this$props2.checked,
+          value = _this$props2.value,
+          htmlValue = _this$props2.htmlValue; // 传函数的用法
+
+      if (typeof checked === 'function') return checked(htmlValue);
+      if (checked !== undefined) return checked;
+      if (this.state.checked === undefined) return value === htmlValue;
+      return this.state.checked;
+    };
+
+    _proto.getProp = function getProp(key) {
+      if (this.props[key] !== undefined) return this.props[key];
+      return this.state[key];
+    };
+
+    _proto.bindRef = function bindRef(el) {
+      if (el) this.el = el;
+    };
+
+    _proto.handleEnter = function handleEnter(e) {
+      if (isEnterPress(e)) {
+        this.handleChange({
+          target: {
+            checked: !this.getChecked()
+          }
+        }); // e.target.click()
+        // if (this.el) this.el.focus()
+      }
+    };
+
+    _proto.handleChange = function handleChange(e) {
+      var _this2 = this;
+
+      var _this$props3 = this.props,
+          onChange = _this$props3.onChange,
+          onRawChange = _this$props3.onRawChange,
+          index = _this$props3.index,
+          inputable = _this$props3.inputable;
+      var checked = e.target.checked;
+      this.setState({
+        checked: checked
+      }, function () {
+        return _this2.el.focus();
+      });
+
+      if (type === 'switch' && onChange) {
+        onChange(checked);
+        return;
+      }
+
+      var value = inputable ? this.props.value : this.props.htmlValue;
+      if (onRawChange) onRawChange(value, checked);
+      value = checked ? value : undefined;
+      if (onChange) onChange(value, checked, index);
+    };
+
+    _proto.handleInputChange = function handleInputChange(val) {
+      var _this$props4 = this.props,
+          onChange = _this$props4.onChange,
+          index = _this$props4.index;
+      var checked = val.length > 0;
+      if (onChange) onChange(val, checked, index);
+    };
+
+    _proto.render = function render() {
+      var _this$props5 = this.props,
+          disabled = _this$props5.disabled,
+          style = _this$props5.style,
+          content = _this$props5.content,
+          size = _this$props5.size,
+          children = _this$props5.children,
+          inputable = _this$props5.inputable,
+          onClick = _this$props5.onClick;
+      var rtl = isRTL();
+      var checked = this.getChecked();
+      var isSwitch = type === 'switch';
+      var className = classnames(checkinputClass('_', disabled && 'disabled', checked === true && 'checked', checked === 'indeterminate' && 'indeterminate', isSwitch && 'switch', type + "-container", rtl && 'rtl', {
+        large: size === 'large',
+        small: size === 'small'
+      }), this.props.className);
+
+      var _ref = content || [],
+          checkedChildren = _ref[0],
+          uncheckedChildren = _ref[1];
+
+      var switchChildren = isSwitch && size !== 'small' ? React.createElement("span", {
+        className: checkinputClass('switch-children')
+      }, checked ? checkedChildren : uncheckedChildren) : null;
+      var value = typeof this.props.value === 'string' ? this.props.value : '';
+      return React.createElement("label", _extends({
+        onKeyDown: this.handleEnter,
+        className: className,
+        style: style,
+        htmlFor: this.id,
+        tabIndex: disabled ? undefined : 0,
+        ref: this.bindRef
+        /* @ts-ignore */
+        ,
+        disabled: disabled
+      }, getDataset(this.props)), switchChildren, React.createElement("input", {
+        id: this.id,
+        disabled: disabled,
+        tabIndex: -1,
+        type: isSwitch ? 'checkbox' : type,
+        onClick: onClick,
+        onChange: this.handleChange,
+        checked: checked
+      }), React.createElement("i", {
+        className: checkinputClass('indicator', type)
+      }), children && !isSwitch && React.createElement("span", {
+        className: checkinputClass('desc')
+      }, children), inputable && !isSwitch && checked && React.createElement(Input, {
+        className: checkinputClass('text'),
+        onChange: this.handleInputChange,
+        value: value
+      }), isSwitch && React.createElement("span", {
+        className: checkinputClass(getDirectionClass('switch-indicator'))
+      }));
+    };
+
+    return CheckItem;
+  }(PureComponent);
+
+  _defineProperty(CheckItem, "defaultProps", _objectSpread({}, defaultProps, {
+    htmlValue: true,
+    onClick: undefined,
+    content: []
+  }));
+
+  return CheckItem;
+}
+
+export default checkItem;

package/esm/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Checkbox: import("react").ComponentClass<import("./Props").SimpleCheckProps, any>;
+export default Checkbox;

package/esm/Checkbox/Checkbox.js

@@ -0,0 +1,3 @@
+import checkItem from './CheckItem';
+var Checkbox = checkItem('checkbox');
+export default Checkbox;

package/esm/Checkbox/Group.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PureComponent } from '../component';
+import { BaseCheckboxGroupProps, CheckValueType } from './Props';
+declare class CheckboxGroup<DataItem, Value> extends PureComponent<BaseCheckboxGroupProps<DataItem, Value>, {}> {
+    static defaultProps: {
+        renderItem: (d: any) => any;
+    };
+    constructor(props: BaseCheckboxGroupProps<DataItem, Value>);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    getContent(d: DataItem): React.ReactNode;
+    handleUpdate(): void;
+    handleClick(_val: unknown, checked: CheckValueType, index: number): void;
+    handleRawChange(value: DataItem, checked: CheckValueType): void;
+    render(): JSX.Element;
+}
+export default CheckboxGroup;