shineout 1.12.2 → 1.12.3

package/esm/Popover/styles/popover.less

@@ -0,0 +1,309 @@
+@import '../../styles/variables.less';
+@import '../../styles/themes/@{so-theme}.less';
+
+@popover-prefix: ~'@{so-prefix}-popover';
+@popover-arrow-size: 12px;
+
+.@{popover-prefix} {
+  @keyframe-opacity: ~'@{popover-prefix}-kf-opacity';
+
+  @keyframes @keyframe-opacity {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .popover-variant(@background; @border; @text-color) {
+    border-color: @border;
+
+    .@{popover-prefix}-content {
+      background: @background;
+    }
+
+    .@{popover-prefix}-arrow {
+      border-color: @border;
+      background: @background;
+    }
+  }
+
+  position: absolute;
+  z-index: @zindex-popover;
+  display: block;
+  border: @popover-border-width solid @popover-arrow-outer-color;
+  // animation: @keyframe-opacity 0.5s ease;
+  background-clip: padding-box;
+  background-color: @popover-bg;
+  border-radius: @popover-border-radius;
+  box-shadow: @popover-box-shadow;
+  font-size: @popover-text-font-size;
+  word-wrap: break-word;
+
+  &:after {
+    background: transparent;
+    position: absolute;
+    content: '';
+  }
+
+  &-arrow {
+    position: absolute;
+    z-index: 1;
+    display: inline-block;
+    padding: @popover-arrow-width * 0.7;
+    border: @popover-border-width solid @popover-arrow-outer-color;
+    background-color: @popover-bg;
+    border-left: none;
+    border-bottom: none;
+  }
+
+  &-top,
+  &-top-left,
+  &-top-right {
+    margin-top: -@popover-arrow-margin;
+    transform: translate(-50%, -100%);
+    &:after {
+      left: 0;
+      right: 0;
+      bottom: -@popover-arrow-size;
+      height: @popover-arrow-size;
+    }
+
+    .@{popover-prefix}-arrow {
+      bottom: 0;
+      left: 50%;
+      transform: translate(-50%, 50%) rotate(135deg);
+    }
+  }
+
+  &-top-left {
+    transform: translate(0, -100%);
+
+    .@{popover-prefix}-arrow {
+      left: @popover-arrow-width * 2;
+    }
+  }
+
+  &-top-right {
+    transform: translate(-100%, -100%);
+
+    .@{popover-prefix}-arrow {
+      right: @popover-arrow-width;
+      left: auto;
+    }
+  }
+
+  &-left-top,
+  &-left-bottom,
+  &-left {
+    margin-left: -@popover-arrow-margin;
+    transform: translate(-100%, -50%);
+
+    &:after {
+      top: 0;
+      bottom: 0;
+      right: -@popover-arrow-size;
+      width: @popover-arrow-size;
+    }
+
+    .@{popover-prefix}-arrow {
+      top: 50%;
+      right: 0;
+      transform: translate(50%, -50%) rotate(45deg);
+    }
+  }
+
+  &-left-top {
+    transform: translateX(-100%);
+
+    .@{popover-prefix}-arrow {
+      top: @popover-arrow-width * 2;
+    }
+  }
+
+  &-left-bottom {
+    transform: translate(-100%, -100%);
+
+    .@{popover-prefix}-arrow {
+      top: auto;
+      bottom: @popover-arrow-width;
+    }
+  }
+
+  &-right-top,
+  &-right-bottom,
+  &-right {
+    margin-left: @popover-arrow-margin;
+    transform: translateY(-50%);
+
+    &:after {
+      top: 0;
+      bottom: 0;
+      left: -@popover-arrow-size;
+      width: @popover-arrow-size;
+    }
+
+    .@{popover-prefix}-arrow {
+      top: 50%;
+      left: 0;
+      transform: translate(-50%, -50%) rotate(225deg);
+    }
+  }
+
+  &-right-top {
+    transform: translateY(0);
+
+    .@{popover-prefix}-arrow {
+      top: @popover-arrow-width * 2;
+    }
+  }
+
+  &-right-bottom {
+    transform: translateY(-100%);
+
+    .@{popover-prefix}-arrow {
+      top: auto;
+      bottom: @popover-arrow-width;
+    }
+  }
+
+  &-bottom-left,
+  &-bottom,
+  &-bottom-right,
+  &-cover {
+    margin-top: @popover-arrow-margin;
+    transform: translateX(-50%);
+
+    &:after {
+      left: 0;
+      right: 0;
+      top: -@popover-arrow-size;
+      height: @popover-arrow-size;
+    }
+
+    .@{popover-prefix}-arrow {
+      top: 0;
+      left: 50%;
+      transform: translate(-50%, -50%) rotate(315deg);
+    }
+  }
+
+  &-bottom-left, &-cover {
+    transform: translateX(0);
+
+    .@{popover-prefix}-arrow {
+      left: @popover-arrow-width * 2;
+    }
+  }
+  &-cover {
+    margin-top: 0;
+  }
+
+  &-bottom-right {
+    transform: translateX(-100%);
+
+    .@{popover-prefix}-arrow {
+      right: @popover-arrow-width;
+      left: auto;
+    }
+  }
+
+  &-bottom-right {
+    transform: none;
+  }
+
+  &-top-right {
+    transform: translateY(-100%);
+  }
+
+  &-content {
+    position: relative;
+    z-index: 2;
+    background-color: @popover-bg;
+    border-radius: inherit;
+  }
+
+  &-info {
+    .popover-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
+
+    .@{popover-prefix}-icon path {
+      fill: @colors-info;
+    }
+  }
+
+  &-warning {
+    .popover-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
+
+    .@{popover-prefix}-icon path {
+      fill: @colors-warning;
+    }
+  }
+
+  &-success {
+    .popover-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
+
+    .@{popover-prefix}-icon path {
+      fill: @colors-success;
+    }
+  }
+
+  &-danger,
+  &-error {
+    .popover-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
+
+    .@{popover-prefix}-icon path {
+      fill: @colors-danger;
+    }
+  }
+
+  &-confirm {
+    padding: 16px;
+
+    .@{popover-prefix}-footer {
+      text-align: right;
+    }
+    .@{popover-prefix}-mention .@{popover-prefix}-alert {
+      padding-top: 0;
+      padding-left: 0;
+      padding-right: 0;
+      background: transparent;
+      border: none;
+      color: @text-color;
+      box-shadow: none;
+      margin-bottom: 8px;
+      font-size: @font-size-base;
+    }
+  }
+
+  &-text {
+    display: inline-block;
+    max-width: @popover-text-max-width;
+    padding: @common-content-text-padding;
+  }
+
+  &-input-tip {
+    color: @form-tip-color;
+    border: none;
+    box-shadow: 0 0 0 1px @input-border, 0 2px 8px rgba(0, 0, 0, 0.15);
+    .@{popover-prefix}-content, .@{popover-prefix}-arrow {
+      background-color: @gray-100;
+      border-color: @input-border;
+    }
+    .@{popover-prefix}-content {
+      & > span {
+        padding: @padding-base-vertical @padding-base-horizontal;
+      }
+    }
+  }
+
+  &-input-error {
+    color: @form-feedback-invalid-color;
+    border: none;
+    box-shadow: 0 0 0 1px @state-danger-border, 0 2px 8px rgba(0, 0, 0, 0.15);
+    .@{popover-prefix}-arrow {
+      border-color: @state-danger-border;
+    }
+  }
+}

package/esm/Progress/Circle.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ProgressProps } from './Props';
+declare function Circle(props: ProgressProps): JSX.Element;
+declare namespace Circle {
+    var defaultProps: {
+        strokeLinecap: string;
+        strokeWidth: number;
+        size: number;
+        value: number;
+    };
+}
+export default Circle;

package/esm/Progress/Circle.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import classnames from 'classnames';
+import { progressClass } from './styles';
+import analyzeColor from './analyzeColor';
+import { isRTL } from '../config';
+var DefaultValue = {
+  strokeLinecap: 'round',
+  strokeWidth: 8,
+  size: 100,
+  value: 0
+};
+
+function Circle(props) {
+  var children = props.children,
+      _props$strokeWidth = props.strokeWidth,
+      strokeWidth = _props$strokeWidth === void 0 ? DefaultValue.strokeWidth : _props$strokeWidth,
+      type = props.type,
+      color = props.color,
+      _props$size = props.size,
+      size = _props$size === void 0 ? DefaultValue.size : _props$size,
+      value = props.value,
+      background = props.background,
+      strokeLinecap = props.strokeLinecap;
+  var className = classnames(progressClass('circle', type, isRTL() && 'rtl'), props.className);
+  var r = 100 - Math.ceil(strokeWidth / size * 100);
+  var p = Math.PI * 2 * r;
+  var dasharray = [p * (value / 100), p * (1 - value / 100)];
+  var style = Object.assign({
+    width: size,
+    height: size
+  }, props.style);
+  var width = value === 0 && strokeLinecap === 'round' ? 0 : strokeWidth * 2;
+  var objColor = color && typeof color === 'object';
+  return React.createElement("div", {
+    className: className,
+    style: style
+  }, React.createElement("svg", {
+    viewBox: "0 0 200 200"
+  }, objColor ? React.createElement("defs", null, React.createElement("linearGradient", {
+    id: "progress-linear",
+    x1: "50%",
+    x2: "50%",
+    y1: "0%",
+    y2: "100%"
+  }, analyzeColor(color).map(function (c) {
+    return React.createElement("stop", {
+      key: c.pos,
+      offset: c.pos,
+      stopColor: c.color
+    });
+  }))) : null, React.createElement("circle", {
+    className: progressClass('background'),
+    cx: "100",
+    cy: "100",
+    r: r,
+    strokeWidth: strokeWidth * 2,
+    fill: "transparent",
+    style: {
+      stroke: background
+    }
+  }), React.createElement("circle", {
+    className: progressClass('front'),
+    cx: "100",
+    cy: "100",
+    r: r,
+    fill: "transparent",
+    style: {
+      stroke: objColor ? "url('#progress-linear')" : color
+    },
+    strokeDasharray: dasharray,
+    strokeLinecap: strokeLinecap,
+    strokeWidth: width
+  })), children && React.createElement("div", {
+    className: progressClass('content')
+  }, children));
+}
+
+Circle.defaultProps = DefaultValue;
+export default Circle;

package/esm/Progress/Line.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ProgressProps } from './Props';
+declare function Line(props: ProgressProps): JSX.Element;
+declare namespace Line {
+    var defaultProps: {
+        strokeWidth: number;
+    };
+}
+export default Line;

package/esm/Progress/Line.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import classnames from 'classnames';
+import { progressClass } from './styles';
+import analyzeColor from './analyzeColor';
+import Popup from './Popup';
+import { isRTL } from '../config';
+var DefaultValue = {
+  strokeWidth: 8
+};
+
+function Line(props) {
+  var children = props.children,
+      _props$strokeWidth = props.strokeWidth,
+      strokeWidth = _props$strokeWidth === void 0 ? DefaultValue.strokeWidth : _props$strokeWidth,
+      type = props.type,
+      value = props.value,
+      color = props.color,
+      style = props.style,
+      background = props.background,
+      popup = props.popup;
+  var hasChildren = children !== undefined;
+  var isPopup = popup && hasChildren;
+  var className = classnames(progressClass('line', type, isPopup && 'line-popup', isRTL() && 'rtl'), props.className);
+  var innerStyle = {
+    width: value / 100 * 100 + "%",
+    borderRadius: strokeWidth / 2
+  };
+
+  if (typeof color === 'string') {
+    innerStyle.background = color;
+    innerStyle.backgroundSize = '1em 1em';
+  } else if (typeof color === 'object') {
+    innerStyle.background = "linear-gradient(to right, " + analyzeColor(color).reduce(function (p, v) {
+      var col = v.color + " " + v.pos;
+      return p ? p + "," + col : col;
+    }, '') + ")";
+  }
+
+  return React.createElement("div", {
+    className: className,
+    style: style
+  }, React.createElement("div", {
+    className: progressClass('background'),
+    style: {
+      height: strokeWidth,
+      background: background,
+      borderRadius: strokeWidth / 2
+    }
+  }, React.createElement("div", {
+    className: progressClass('front'),
+    style: innerStyle
+  })), hasChildren && (popup ? React.createElement(Popup, _extends({}, props, {
+    value: value
+  })) : React.createElement("div", {
+    className: progressClass('content')
+  }, children)));
+}
+
+Line.defaultProps = DefaultValue;
+export default Line;

package/esm/Progress/Popup.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PopupProps } from './Props';
+export default class Popup extends React.Component<PopupProps> {
+    getStyle(): {
+        [x: string]: string;
+        transform: string;
+    };
+    render(): JSX.Element;
+}

package/esm/Progress/Popup.js

@@ -0,0 +1,43 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React from 'react';
+import { progressClass } from './styles';
+import { isRTL } from '../config';
+var ROTATE_MAX_ANGLE = 15;
+var PROGRESS_CENTER = 60;
+
+var Popup =
+/*#__PURE__*/
+function (_React$Component) {
+  _inheritsLoose(Popup, _React$Component);
+
+  function Popup() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Popup.prototype;
+
+  _proto.getStyle = function getStyle() {
+    var _ref;
+
+    var value = this.props.value;
+    var rotate = 0;
+    if (value <= PROGRESS_CENTER) rotate = ROTATE_MAX_ANGLE * (value / PROGRESS_CENTER);else rotate = (1 - value / 100) * ROTATE_MAX_ANGLE;
+    return _ref = {}, _ref[isRTL() ? 'right' : 'left'] = value + "%", _ref.transform = "translateX(" + (isRTL() ? '50%' : '-50%') + ") rotate(" + rotate + "deg)", _ref;
+  };
+
+  _proto.render = function render() {
+    var children = this.props.children;
+    return React.createElement("div", {
+      className: progressClass('popup'),
+      style: this.getStyle()
+    }, React.createElement("span", {
+      className: progressClass('value')
+    }, children), React.createElement("span", {
+      className: progressClass('arrow')
+    }));
+  };
+
+  return Popup;
+}(React.Component);
+
+export { Popup as default };

package/esm/Progress/Props.d.ts

@@ -0,0 +1,103 @@
+import React from 'react';
+import { StandardProps } from '../@types/common';
+declare type ReactNode = React.ReactNode;
+export interface ColorStep {
+    form?: string;
+    to?: string;
+    [key: string]: string | undefined;
+}
+export interface ProgressProps extends StandardProps {
+    /**
+     * popup to show children
+     *
+     * 是否通过弹出框展示children
+     *
+     * default: -
+     */
+    popup?: boolean;
+    /**
+     * Background color
+     *
+     * 背景色
+     *
+     * default: '#e9ecef'
+     */
+    background?: string;
+    /**
+     * Content
+     *
+     * 附加内容
+     *
+     * default: -
+     */
+    children?: string | ReactNode;
+    /**
+     * The foreground color can be set to the object to become a gradient
+     *
+     * 前景色, 可以设置为对象变成渐变.
+     *
+     * default: primary
+     */
+    color?: string | ColorStep;
+    /**
+     * Options: ['line', 'circle']
+     *
+     * 样式，可选值为 ['line', 'circle']
+     *
+     * default: 'line'
+     */
+    shape?: 'line' | 'circle';
+    /**
+     * The width and height of 'circle' shape
+     *
+     * 进度条大小，仅对 circle 有效
+     *
+     * default: 100
+     */
+    size?: number;
+    /**
+     * The width of the stroke
+     *
+     * 线框宽度
+     *
+     * default: 8
+     */
+    strokeWidth?: number;
+    /**
+     * Container element style
+     *
+     * 最外层扩展样式
+     *
+     * default: -
+     */
+    style?: React.CSSProperties;
+    /**
+     * Built-in color, options: ['success', 'info', 'warning', 'danger']
+     *
+     * 内置配色，可选值为，['success', 'info', 'warning', 'danger']
+     *
+     * default: -
+     */
+    type?: 'success' | 'info' | 'warning' | 'danger';
+    /**
+     * Percentage, 0 <= value <= 100
+     *
+     * 百分比值，0 <= value <= 100
+     *
+     * default: 0
+     */
+    value?: number;
+    /**
+     * The shape to be used at the end of open subpaths when they are stroked
+     *
+     * 进度条两端的描边形状
+     *
+     * default: -
+     */
+    strokeLinecap?: React.SVGAttributes<any>['strokeLinecap'];
+}
+export interface PopupProps {
+    value?: number;
+    children?: ReactNode;
+}
+export {};

package/esm/Progress/Props.js

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

package/esm/Progress/analyzeColor.d.ts

@@ -0,0 +1,3 @@
+import { ColorStep } from './Props';
+declare const _default: (color: ColorStep) => ColorStep[];
+export default _default;

package/esm/Progress/analyzeColor.js

@@ -0,0 +1,21 @@
+export default (function (color) {
+  if (color.from) {
+    return [{
+      pos: '0%',
+      color: color.from
+    }, {
+      pos: '100%',
+      color: color.to
+    }];
+  }
+
+  return Object.keys(color).sort(function (a, b) {
+    return window.parseInt(a) - window.parseInt(b);
+  }).reduce(function (p, v) {
+    p.push({
+      pos: v,
+      color: color[v]
+    });
+    return p;
+  }, []);
+});

package/esm/Progress/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ProgressProps } from './Props';
+declare function Progress(props: ProgressProps): JSX.Element;
+declare namespace Progress {
+    var defaultProps: {
+        shape: string;
+    };
+    var displayName: string;
+}
+export default Progress;

package/esm/Progress/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Line from './Line';
+import Circle from './Circle';
+
+function Progress(props) {
+  switch (props.shape) {
+    case 'circle':
+      return React.createElement(Circle, props);
+
+    default:
+      return React.createElement(Line, props);
+  }
+}
+
+Progress.defaultProps = {
+  shape: 'line'
+};
+Progress.displayName = 'ShineoutProgress';
+export default Progress;

package/esm/Progress/interface.d.ts

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

package/esm/Progress/interface.js

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

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

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

package/esm/Progress/styles/index.js

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