shineout 1.12.2 → 1.12.3

package/esm/Button/Props.d.ts

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { StandardProps, RegularAttributes, ForceAdd } from '../@types/common';
+export declare type ButtonType = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'link';
+export declare type ButtonShape = 'default' | 'circle' | 'round';
+export interface OriginButtonProps extends StandardProps {
+    /**
+     * The content inside the button, can be a text icon, etc.
+     *
+     * 按钮里面的内容, 可以是文字图标等
+     *
+     * default: required
+     */
+    children?: React.ReactNode;
+    /**
+     * Specifies the button should be disabled
+     *
+     * 禁用
+     *
+     * default: false
+     */
+    disabled?: boolean;
+    /**
+     * If the href attribute is set, <a> will be used instead of <button>.
+     *
+     * 如果设置了 href 属性，将会用 <a> 代替 <button>
+     *
+     * default: -
+     */
+    href?: string;
+    /**
+     * If present, target will be set onto <a> element.(Effective only when href is been set)
+     *
+     * 当设置了 href 属性时，target 会被设置到 <a> 元素上
+     *
+     * default: -
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top' | string;
+    /**
+     * When outline is true, the background is transparent.
+     *
+     * outline 为 true 时，显示透明背景的按钮
+     *
+     * default: false
+     */
+    outline?: boolean;
+    /**
+     * size of button
+     *
+     * 按钮尺寸
+     *
+     * default: 'default'
+     */
+    size?: RegularAttributes.Size;
+    /**
+     * type of button
+     *
+     * 按钮类型
+     *
+     * default: 'default'
+     */
+    type?: ButtonType;
+    /**
+     * type of button original
+     *
+     * 按钮原生type属性
+     *
+     * default: 'button'
+     */
+    htmlType?: 'button' | 'reset' | 'submit';
+    /**
+     * text button
+     *
+     * 文字按钮，不展示边框和背景
+     *
+     * default: false
+     */
+    text?: boolean;
+    /**
+     * button click callback
+     *
+     * 按钮点击回调
+     *
+     * default: none
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * For Button with only 2 Chinese characters, whether to insert a space between the two Chinese characters.
+     *
+     * 仅有2个汉字的按钮，是否在2个汉字中间插入空格
+     *
+     * default: false
+     */
+    space?: boolean;
+    /**
+     * loading
+     *
+     * loading状态
+     *
+     * default: null
+     */
+    loading?: boolean;
+    /**
+     * Can be set button shape
+     *
+     * 设置按钮形状
+     *
+     * default: 'default'
+     */
+    shape?: ButtonShape;
+    /**
+     *  get button dom
+     *
+     *  获取按钮节点
+     *
+     *  default: -
+     */
+    onRef?: React.RefCallback<any>;
+}
+export declare type ButtonProps = ForceAdd<OriginButtonProps, Omit<React.ButtonHTMLAttributes<any>, 'placeholder' | 'onSubmit'>>;
+export interface ButtonGroupProps extends StandardProps {
+    /**
+     * array of Button
+     *
+     * 由 Button 组成的 array
+     *
+     * default: required
+     */
+    children?: React.ReactNode;
+    /**
+     * same as Button
+     *
+     * 同 Button；如果 Button 和 Group 同时设置 size，以 Group 为准
+     *
+     * default: -
+     */
+    size?: RegularAttributes.Size;
+    /**
+     * same as Button
+     *
+     * 同 Button；如果 Button 未设置，使用此值
+     *
+     * default: -
+     */
+    outline?: boolean;
+    /**
+     * same as Button
+     *
+     * 同 Button；如果 Button 和 Group 同时设置 type，以 Group 为准
+     *
+     * default: -
+     */
+    type?: ButtonType;
+}

package/esm/Button/Props.js

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

package/esm/Button/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Button';

package/esm/Button/index.js

@@ -0,0 +1 @@
+export { default } from './Button';

package/esm/Button/interface.d.ts

@@ -0,0 +1 @@
+export { ButtonType as Type, ButtonShape as Shape, ButtonProps as Props, ButtonGroupProps as GroupProps } from './Props';

package/esm/Button/interface.js

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

package/esm/Button/styles/button.less

@@ -0,0 +1,389 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@button-prefix: ~'@{so-prefix}-button';
+@button-disabled: ~'.@{button-prefix}-disabled';
+@icon-prefix:  ~'@{so-prefix}-icon';
+
+.@{button-prefix} {
+  &-rtl {
+    direction: rtl;
+    text-align: right;
+  }
+  display: inline-block;
+  margin-bottom: 0; // For input.btn
+  border: 1px solid transparent;
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  cursor: pointer;
+  font-weight: @btn-font-weight;
+  outline: none;
+  text-align: center;
+  touch-action: manipulation;
+  vertical-align: middle;
+  white-space: nowrap;
+  .button-size(@btn-padding-y; @btn-padding-x; @button-font-size-base; @line-height-base; @btn-border-radius-base);
+  .user-select(none);
+
+  &-spin {
+    display: inline-block;
+    &-ltr {
+      margin-right: @button-spin-margin;
+    }
+    &-rtl {
+      margin-left: @button-spin-margin;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    z-index: 10;
+    color: @link-hover-color;
+    outline: none;
+    text-decoration: none;
+  }
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &.active {
+    background-image: none;
+    outline: 0;
+    // .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+  }
+
+  & + & {
+    &:not(&-rtl) {
+      margin-left: @button-margin-left;
+    }
+    &-rtl {
+      margin-right: @button-margin-left;
+    }
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    position: relative;
+    box-shadow: none;
+    cursor: @cursor-disabled;
+    opacity: @button-disabled-opacity;
+  }
+
+  // cover disabled opacity
+  &.@{button-prefix}-disabled {
+    opacity: 1;
+    // cover default opacity in link disabled button
+    &.@{button-prefix}-link {
+      opacity: 0.4;
+    }
+    &.@{button-prefix}-text {
+      opacity: .65;
+    }
+  }
+
+  a& {
+    fieldset[disabled] & {
+      pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
+    }
+  }
+
+  &-default {
+    .button-variant(@button-default-text-color; @btn-default-bg; @btn-default-border; 'default' ; @btn-default-border);
+
+    &.@{button-prefix}-outline:not(@{button-disabled}) {
+      .button-outline(@button-default-text-color; @btn-default-bg; @btn-default-bg;);
+    }
+
+    &:not(.@{button-prefix}-disabled):hover,
+    &:not(.@{button-prefix}-disabled):focus,
+    &:not(.@{button-prefix}-disabled):active {
+      color: @colors-primary;
+      .@{icon-prefix} {
+        color: @colors-primary;
+        fill: @colors-primary;
+      }
+    }
+
+    & when (@so-theme = antd) {
+      &:hover,
+      &:focus {
+        border-color: @link-color;
+        color: @link-color;
+        fill: @link-color;
+      }
+    }
+
+    &[disabled]:hover {
+      color: @button-default-text-color;
+      fill: @link-color;
+    }
+  }
+
+  &-primary {
+    .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border; 'primary');
+
+    &.@{button-prefix}-outline:not(@{button-disabled}) {
+      .button-outline(@btn-primary-color; @btn-primary-bg; @colors-primary;);
+    }
+  }
+
+  &-secondary {
+    .button-variant(@btn-secondary-color; @btn-secondary-bg; @btn-secondary-border; 'secondary');
+
+    &.@{button-prefix}-outline:not(@{button-disabled}) {
+      .button-outline(@btn-secondary-color; @btn-secondary-bg; @colors-secondary;);
+    }
+  }
+
+  &-success {
+    .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border; 'success');
+
+    &.@{button-prefix}-outline:not(@{button-disabled}) {
+      .button-outline(@btn-success-color; @btn-success-bg; @colors-success;);
+    }
+  }
+
+  &-info {
+    .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border; 'info');
+
+    &.@{button-prefix}-outline:not(@{button-disabled}) {
+      .button-outline(@btn-info-color; @btn-info-bg; @colors-info;);
+    }
+  }
+
+  &-warning {
+    .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border; 'warning');
+
+    &.@{button-prefix}-outline:not(@{button-disabled}) {
+      .button-outline(@btn-warning-color; @btn-warning-bg; @colors-warning;);
+    }
+  }
+
+  &-error,
+  &-danger {
+    .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border; 'danger');
+
+    &.@{button-prefix}-outline:not(@{button-disabled}) {
+      .button-outline(@btn-danger-color; @btn-danger-bg; @colors-danger;);
+    }
+  }
+
+  &-text {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    padding-left: 4px;
+    padding-right: 4px;
+    display: inline-flex;
+    align-items: center;
+
+    &:not(:disabled):hover {
+      opacity: .8;
+    }
+
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+      background: transparent;
+      border: none;
+      box-shadow: none;
+      animation: none;
+    }
+
+    &:disabled:hover {
+      background: transparent;
+    }
+
+    &.@{button-prefix}-primary {
+      color: @btn-primary-bg;
+    }
+
+    &.@{button-prefix}-success {
+      color: @btn-success-bg;
+    }
+
+    &.@{button-prefix}-info {
+      color: @btn-info-bg;
+    }
+
+    &.@{button-prefix}-danger {
+      color: @btn-danger-bg;
+    }
+
+    &.@{button-prefix}-warning {
+      color: @btn-warning-bg;
+    }
+
+    &.@{button-prefix}-secondary {
+      color: @btn-secondary-bg;
+    }
+  }
+
+  &-link {
+    border-radius: 0;
+    color: @link-color;
+    font-weight: normal;
+
+    &,
+    &:active,
+    &[disabled],
+    fieldset[disabled] & {
+      background-color: transparent;
+      .box-shadow(none);
+    }
+
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+      border-color: transparent;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: transparent;
+      color: @link-hover-color;
+      text-decoration: @link-hover-decoration;
+    }
+
+    &[disabled],
+    fieldset[disabled] & {
+      &:hover,
+      &:focus {
+        color: @link-color;
+        text-decoration: none;
+      }
+    }
+  }
+
+  &-large {
+    .button-size(
+      @btn-padding-large-y; @btn-padding-large-x; @button-font-size-large; @line-height-base; @btn-border-radius-large
+    );
+  }
+
+  &-small {
+    .button-size(
+      @btn-padding-small-y; @btn-padding-small-x; @button-font-size-small; @line-height-small; @btn-border-radius-small
+    );
+  }
+
+  &-disabled:not(&-link):not(&-text), &-disabled:not(&-link):not(&-text):hover {
+    background: @button-disabled-bg;
+    color: @button-disabled-color;
+    fill: @button-disabled-color;
+    border-color: @button-disabled-border-color;
+  }
+
+  &-circle {
+    border-radius: 50%;
+    min-width: @btn-circle-width;
+    padding-left: 0;
+    padding-right: 0;
+    &.@{button-prefix}-large {
+      min-width: @btn-circle-large-width;
+    }
+    &.@{button-prefix}-small {
+      min-width: @btn-circle-small-width;
+    }
+  }
+
+  &-round {
+    border-radius: 1000px;
+  }
+
+  &-group {
+    .@{button-prefix} {
+      position: relative;
+      border-right-width: 0;
+      border-left-width: 0;
+      &:not(&-rtl) {
+        margin-left: 0px;
+      }
+      &-rtl {
+        margin-right: 0px;
+      }
+
+      &:before {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        height: 50%;
+        border-left-width: 1px;
+        border-left-style: solid;
+        border-left-color: rgba(255, 255, 255, 0.4);
+        content: ' ';
+        transform: translateY(-50%);
+        .@{button-prefix}-group-rtl&{
+          left: auto;
+          right: 0;
+        }
+      }
+
+
+      &:first-child {
+        &:not(.@{button-prefix}-rtl) {
+          margin-left: 0;
+          border-left-width: 1px;
+        }
+        &.@{button-prefix}-rtl {
+          border-right-width: 1px;
+          margin-right: 0;
+        }
+
+
+        &:before {
+          display: none;
+        }
+      }
+
+      &:last-child {
+        &:not(.@{button-prefix}-rtl) {
+          border-right-width: 1px;
+        }
+        &.@{button-prefix}-rtl {
+          border-left-width: 1px;
+        }
+      }
+
+      &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+      }
+
+      &:first-child:not(:last-child) {
+        &:not(.@{button-prefix}-rtl) {
+          .border-right-radius(0);
+        }
+        &.@{button-prefix}-rtl {
+          .border-left-radius(0);
+        }
+      }
+
+      &:last-child:not(:first-child) {
+        &:not(.@{button-prefix}-rtl) {
+          .border-left-radius(0);
+        }
+        &.@{button-prefix}-rtl {
+          .border-right-radius(0)
+        }
+      }
+
+
+      .button-group-border()
+    }
+  }
+
+  &-from-input-group {
+    .@{button-prefix} {
+      &:before {
+        border-left: none;
+      }
+    }
+  }
+
+  .@{so-prefix}-dropdown {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+  }
+}

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

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

package/esm/Button/styles/index.js

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

package/esm/Card/Accordion.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PureComponent } from '../component';
+import { CardAccordionProps } from './Props';
+declare class Accordion<T = string> extends PureComponent<CardAccordionProps<T>, {
+    active?: T | null;
+}> {
+    static defaultProps: {
+        defaultActive: number;
+    };
+    constructor(props: CardAccordionProps<T>);
+    getActive(): T | null | undefined;
+    handleActive(active: T | null): void;
+    render(): React.DetailedReactHTMLElement<{
+        collapsed: boolean;
+        collapsible: boolean;
+        className: string;
+        onCollapse: any;
+    }, HTMLElement>[];
+}
+export default Accordion;

package/esm/Card/Accordion.js

@@ -0,0 +1,67 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { Children, cloneElement } from 'react';
+import classnames from 'classnames';
+import { PureComponent } from '../component';
+import { cardClass } from './styles';
+import { isRTL } from '../config';
+
+var getChildId = function getChildId(child, i) {
+  if (child && child.props && child.props.id !== undefined) return child.props.id;
+  return i;
+};
+
+var Accordion =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Accordion, _PureComponent);
+
+  function Accordion(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.state = {
+      active: props.active || props.defaultActive
+    };
+    return _this;
+  }
+
+  var _proto = Accordion.prototype;
+
+  _proto.getActive = function getActive() {
+    if (this.props.active !== undefined) return this.props.active;
+    return this.state.active;
+  };
+
+  _proto.handleActive = function handleActive(active) {
+    if (active === this.state.active) active = null;
+    this.setState({
+      active: active
+    });
+    if (this.props.onChange) this.props.onChange(active);
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var active = this.getActive();
+    return Children.toArray(this.props.children).map(function (child, i) {
+      var childId = getChildId(child, i);
+      var props = {
+        collapsed: active !== childId,
+        collapsible: true,
+        className: classnames(typeof child === 'object' && child.className, cardClass('accordion', isRTL() && 'accordion-rtl')),
+        onCollapse: _this2.handleActive.bind(_this2, childId)
+      };
+      return cloneElement(child, props);
+    });
+  };
+
+  return Accordion;
+}(PureComponent);
+
+_defineProperty(Accordion, "defaultProps", {
+  defaultActive: 0
+});
+
+export default Accordion;

package/esm/Card/Body.d.ts

@@ -0,0 +1,6 @@
+import { PureComponent } from 'react';
+import { OriginCardBodyProps } from './Props';
+declare class Body extends PureComponent<OriginCardBodyProps> {
+    render(): JSX.Element;
+}
+export default Body;

package/esm/Card/Body.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import List from '../AnimationList';
+import { cardClass } from './styles';
+import { isRTL } from '../config';
+var CollapseList = List(['collapse'], 'fast');
+
+var Body =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Body, _PureComponent);
+
+  function Body() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+
+  var _proto = Body.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        className = _this$props.className,
+        collapsed = _this$props.collapsed,
+        collapsible = _this$props.collapsible,
+        onCollapse = _this$props.onCollapse,
+        other = _objectWithoutPropertiesLoose(_this$props, ["className", "collapsed", "collapsible", "onCollapse"]);
+
+    var newClassName = classnames(cardClass('body', isRTL() && 'body-rtl'), className);
+    if (!collapsible) return React.createElement("div", _extends({}, other, {
+      className: newClassName
+    }));
+    var onClick = typeof collapsed === 'boolean' ? onCollapse : undefined;
+    return React.createElement(CollapseList, {
+      show: !collapsed
+    }, React.createElement("div", _extends({}, other, {
+      className: newClassName
+    }), other.children, collapsible === 'bottom' && React.createElement("div", {
+      className: cardClass('foldup'),
+      onClick: onClick
+    }, React.createElement("span", null))));
+  };
+
+  return Body;
+}(PureComponent);
+
+export default Body;