@autobest-ui/components 1.4.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,9 @@
1
1
  import React from 'react';
2
2
  export interface GuideProps {
3
+ /**
4
+ * 图片路径
5
+ */
6
+ imgSrc: string;
3
7
  /**
4
8
  * 是否显示遮罩层
5
9
  */
@@ -12,10 +16,6 @@ export interface GuideProps {
12
16
  * 是否显示带箭头的图片,图片默认显示在子元素上方,水平居中
13
17
  */
14
18
  loadablePointer?: boolean;
15
- /**
16
- * 图片路径
17
- */
18
- img?: string;
19
19
  /**
20
20
  * 图片默认显示在子元素上方,水平居中
21
21
  */
@@ -43,7 +43,6 @@ declare class Guide extends React.Component<GuideProps, GuideStates> {
43
43
  imgRef: React.RefObject<HTMLImageElement>;
44
44
  static defaultProps: {
45
45
  loadablePointer: boolean;
46
- img: string;
47
46
  position: string;
48
47
  translateX: number;
49
48
  translateY: number;
@@ -29,7 +29,6 @@ import classNames from 'classnames';
29
29
  import { findDOMNode } from 'react-dom';
30
30
  import { getOffsetAndSize } from '@autobest-ui/utils';
31
31
  import Portal from '../portal';
32
- import UseConfig from '../use-config';
33
32
  import Mask from '../mask';
34
33
 
35
34
  var Guide =
@@ -101,7 +100,7 @@ function (_super) {
101
100
 
102
101
  var _a = this.props,
103
102
  loadablePointer = _a.loadablePointer,
104
- img = _a.img,
103
+ imgSrc = _a.imgSrc,
105
104
  position = _a.position,
106
105
  visible = _a.visible,
107
106
  translateX = _a.translateX,
@@ -109,7 +108,7 @@ function (_super) {
109
108
 
110
109
  if (loadablePointer && visible) {
111
110
  var image_1 = new Image();
112
- image_1.src = img;
111
+ image_1.src = imgSrc;
113
112
 
114
113
  image_1.onload = function () {
115
114
  var element = _this.getElement();
@@ -156,7 +155,7 @@ function (_super) {
156
155
  var _a = this.props,
157
156
  visible = _a.visible,
158
157
  loadablePointer = _a.loadablePointer,
159
- img = _a.img;
158
+ imgSrc = _a.imgSrc;
160
159
  var _b = this.state,
161
160
  top = _b.top,
162
161
  left = _b.left;
@@ -176,7 +175,7 @@ function (_super) {
176
175
  }), loadablePointer ? React.createElement("img", {
177
176
  style: style,
178
177
  className: cls + "-icon",
179
- src: img,
178
+ src: imgSrc,
180
179
  alt: "selection pointer",
181
180
  ref: this.imgRef
182
181
  }) : null));
@@ -207,7 +206,6 @@ function (_super) {
207
206
 
208
207
  Guide.defaultProps = {
209
208
  loadablePointer: false,
210
- img: UseConfig.assetCommonUiUrl + "/images/vehicle_pointer.png",
211
209
  position: 'center',
212
210
  translateX: 0,
213
211
  translateY: 0,
package/esm/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- export { default as UseConfig } from './use-config';
2
1
  export type { AccordionProps } from './accordion';
3
2
  export { default as Accordion } from './accordion';
4
3
  export type { EllipsisProps, EllipsisLinesType } from './ellipsis';
package/esm/index.js CHANGED
@@ -1,4 +1,3 @@
1
- export { default as UseConfig } from './use-config';
2
1
  export { default as Accordion } from './accordion';
3
2
  export { default as Ellipsis } from './ellipsis';
4
3
  export { default as Affix } from './affix';
@@ -1,8 +1,13 @@
1
+ import React from 'react';
1
2
  export interface LoadingProps {
2
3
  /**
3
- * loading 样式的另一种
4
+ * loading 样式
4
5
  */
5
- isRectLoading?: boolean;
6
+ className?: string;
7
+ /**
8
+ * 自定义loading, 需要补全自定义元素样式
9
+ */
10
+ customIcon?: React.ReactElement;
6
11
  /**
7
12
  * loading开始后自动隐藏的时间,单位:毫秒
8
13
  */
@@ -18,24 +18,18 @@ import React from 'react';
18
18
  import classNames from 'classnames';
19
19
  import ReactDOM from 'react-dom';
20
20
  import { canUseDOM } from '@autobest-ui/utils';
21
- import UseConfig from '../use-config';
22
21
  import LoadingIcon from '../loading-icon'; // 缓存创建的loading元素
23
22
 
24
23
  var loadingElement = null;
25
24
  var loadingTimer = null;
26
25
  var closeTimer = null;
26
+ var prevCustomIcon = null;
27
27
  var cls = 'ab-loading';
28
28
 
29
- function getLoadingContainer(isRectLoading) {
30
- var _a;
31
-
29
+ function getLoadingContainer(customIcon, className) {
32
30
  return React.createElement("div", {
33
- className: classNames(cls + "-wrap", (_a = {}, _a[cls + "-rect-loading"] = isRectLoading, _a))
34
- }, isRectLoading ? React.createElement("img", {
35
- className: cls + "-content",
36
- src: UseConfig.assetCommonUiUrl + "/images/p_loading_rect.gif",
37
- alt: "loading..."
38
- }) : React.createElement(LoadingIcon, {
31
+ className: classNames(cls + "-wrap", className)
32
+ }, customIcon || React.createElement(LoadingIcon, {
39
33
  className: cls + "-content"
40
34
  }));
41
35
  } // openIds 容器
@@ -44,12 +38,11 @@ function getLoadingContainer(isRectLoading) {
44
38
  var openIds = []; // closeIds 容器
45
39
 
46
40
  var closeIds = [];
47
- var prevIsRectLoading = false;
48
41
 
49
- function createLoading(isRectLoading) {
42
+ function createLoading(customIcon, className) {
50
43
  loadingElement = document.createElement('div');
51
44
  document.body.appendChild(loadingElement);
52
- ReactDOM.render(getLoadingContainer(isRectLoading), loadingElement);
45
+ ReactDOM.render(getLoadingContainer(customIcon, className), loadingElement);
53
46
  }
54
47
 
55
48
  var Loading =
@@ -63,24 +56,25 @@ function () {
63
56
  }
64
57
 
65
58
  config = __assign({
66
- isRectLoading: false,
67
59
  expire: 0
68
- }, config); // 防止重复创建
60
+ }, config); // 防止重复创建或自定义loading icon,重新创建
69
61
 
70
62
  if (!loadingElement) {
71
- createLoading(config.isRectLoading);
72
- } else if (prevIsRectLoading !== config.isRectLoading) {
73
- // loading 类型不同时,重新创建
74
- try {
75
- document.body.removeChild(loadingElement);
76
- } catch (e) {}
77
-
78
- createLoading(config.isRectLoading);
63
+ createLoading(config.customIcon, config.className);
64
+ } else if (config.customIcon || config.customIcon !== prevCustomIcon) {
65
+ if (loadingElement) {
66
+ try {
67
+ document.body.removeChild(loadingElement);
68
+ loadingElement = null;
69
+ } catch (e) {}
70
+ }
71
+
72
+ createLoading(config.customIcon, config.className);
79
73
  } else {
80
74
  loadingElement.style.display = 'block';
81
75
  }
82
76
 
83
- prevIsRectLoading = config.isRectLoading; // 如果配置中有expire且大于0
77
+ prevCustomIcon = config.customIcon; // 如果配置中有expire且大于0
84
78
  // 将会在到达时间后自动关闭,不用手动再关闭(不需要再close())
85
79
 
86
80
  if (config.expire > 0) {
@@ -1 +1 @@
1
- .ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}.ab-loading-wrap.ab-loading-rect-loading{background-color:rgba(0,0,0,.7)}.ab-loading-wrap.ab-loading-rect-loading .ab-loading-content{top:10%;width:1.6rem;height:.24rem}
1
+ .ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}
@@ -18,14 +18,4 @@ $namespace: ab-loading;
18
18
  height: .31rem;
19
19
  transform: translate3d(-50%, -50%, 0);
20
20
  }
21
-
22
- &.#{$namespace}-rect-loading {
23
- background-color: rgba(#000, .7);
24
-
25
- .#{$namespace}-content {
26
- top: 10%;
27
- width: 1.6rem;
28
- height: .24rem;
29
- }
30
- }
31
21
  }
package/esm/style.css CHANGED
@@ -11,24 +11,23 @@ a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd
11
11
  .ab-guide-mask.ab-mask{background-color:rgba(0,0,0,.7);z-index:4}.ab-guide-icon{position:absolute;z-index:5}.ab-guide-content{position:relative;z-index:6}
12
12
  .ab-input-number{padding:.06rem .07rem;-webkit-appearance:none;outline:0;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;font-size:.12rem;transition:all .3s;position:relative;background-color:transparent;z-index:2}.ab-input-number:focus{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-input-number-wrap{position:relative;background-color:#fff;display:inline-block}.ab-input-number-button-wrap{position:absolute;user-select:none;top:50%;transform:translateY(-50%);right:.02rem}.ab-input-number-button{position:relative;width:.16rem;height:.1rem;overflow:hidden;background-color:#f1f1f1}.ab-input-number-button.ab-input-number-hover{background-color:#d0d0d0}.ab-input-number-button.ab-input-number-active{background-color:#787878}.ab-input-number-button.ab-input-number-active .ab-input-number-add{border-bottom-color:#fff}.ab-input-number-button.ab-input-number-active .ab-input-number-sub{border-top-color:#fff}.ab-input-number-button:first-child{margin-bottom:.02rem}.ab-input-number-add{position:absolute;top:-.01rem;left:.04rem;display:block;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#505050;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}.ab-input-number-sub{display:block;margin:.03rem 0 0 .04rem;border-top-color:#505050;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}
13
13
  .ab-lazy-image{transition:opacity .5s}.ab-lazy-image-loading{background:#f2f2f2;overflow:hidden}.ab-lazy-image-loading.ab-lazy-image-active{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
14
- .ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}.ab-loading-wrap.ab-loading-rect-loading{background-color:rgba(0,0,0,.7)}.ab-loading-wrap.ab-loading-rect-loading .ab-loading-content{top:10%;width:1.6rem;height:.24rem}
15
14
  .ab-link-list-title{font-size:.16rem;margin:0 0;padding:0 0 .12rem 0;display:flex;justify-content:space-between;align-items:center}.ab-link-list-icon{display:none}.ab-link-list-content{flex-wrap:wrap;width:auto;margin-right:-.15rem}.ab-link-list-content.ab-link-list-col2>a,.ab-link-list-content.ab-link-list-col2>span{min-width:calc(100% / 2 - .15rem);max-width:calc(100% / 2 - .15rem)}.ab-link-list-content.ab-link-list-col4>a,.ab-link-list-content.ab-link-list-col4>span{min-width:calc(100% / 4 - .15rem);max-width:calc(100% / 4 - .15rem)}.ab-link-list-content.ab-link-list-col5>a,.ab-link-list-content.ab-link-list-col5>span{min-width:calc(100% / 5 - .15rem);max-width:calc(100% / 5 - .15rem)}.ab-link-list-content.ab-link-list-col6>a,.ab-link-list-content.ab-link-list-col6>span{min-width:calc(100% / 6 - .15rem);max-width:calc(100% / 6 - .15rem)}.ab-link-list-content.ab-link-list-col8>a,.ab-link-list-content.ab-link-list-col8>span{min-width:calc(100% / 8 - .15rem);max-width:calc(100% / 8 - .15rem)}.ab-link-list-content>a,.ab-link-list-content>span{cursor:pointer;border:.5px solid #d0d0d0;margin-bottom:8px;display:inline-block;justify-content:space-between;align-items:center;width:100%;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.085rem .15rem .085rem .12rem;color:#333;margin-right:.15rem}.ab-link-list-content>a:after,.ab-link-list-content>span:after{content:'>';position:absolute;right:.1rem;top:50%;transform:translateY(-50%);color:grey;font-size:.12rem}.ab-link-list-content>a:hover,.ab-link-list-content>span:hover{text-decoration:underline;color:#f97601}.ab-link-list-content>.ab-link-list-hidden{display:none}.ab-link-list-wrap-popover.ab-popover-wrap{max-width:3.5rem;min-width:3rem}.ab-link-list-sub-title{display:block;padding-bottom:.06rem;font-size:.12rem}.ab-link-list-sub-link{text-decoration:underline;color:#333;font-size:.12rem;padding:0 .05rem .05rem 0;display:inline-block}@media only screen and (max-width:767px){.ab-link-list-divider{border-bottom:1px solid #d0d0d0}.ab-link-list-body{height:0;width:0;overflow:hidden}.ab-link-list-body.ab-link-list-active{height:auto;width:auto}.ab-link-list-content>a,.ab-link-list-content>span{min-width:calc(50% - .15rem)!important;max-width:calc(50% - .15rem)!important}.ab-link-list-icon{font-weight:700;font-size:.22rem;cursor:pointer;width:.2rem;height:.2rem;display:flex;align-items:center;justify-content:center}}
16
15
  .ab-loading-bar{position:fixed;top:0;left:0;margin-bottom:-3px;height:3px;width:100%;z-index:999}@keyframes movingBar{0%{left:50%;right:50%}99.9%{left:0;right:0}100%{left:50%;right:50%}}@keyframes changeBar{0%{background-color:#0aa770}33.3%{background-color:#0aa770}33.33%{background-color:red}66.6%{background-color:#f987d6}66.66%{background-color:#f987d6}99.9%{background-color:#00bcd4}}.ab-loading-bar-bar{position:absolute;height:0;width:100%;text-indent:-9999px;background-color:#0aa770;animation:changeBar 2.25s infinite}.ab-loading-bar-bar:before{content:"";height:3px;position:absolute;left:50%;right:50%;background-color:inherit;animation:movingBar .75s infinite}
16
+ .ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}
17
17
  .ab-loading-container{position:relative}.ab-loading-container-active{user-select:none;pointer-events:none}.ab-loading-container-icon-box{position:absolute;background-color:rgba(255,255,255,.7);top:0;left:0;z-index:4;display:block;width:100%;height:100%}.ab-loading-container-icon{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
18
- .ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done{opacity:1}.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}
19
18
  .ab-svg-loading{display:inline-block}.ab-svg-loading-icon{display:block;width:.31rem;height:.31rem;animation:loading 1s infinite linear reverse}@keyframes loading{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
20
- .ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:''}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active{transform:translateZ(0);opacity:1}.ab-modal-fade-enter-done{transform:translateZ(0);opacity:1}.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}
21
- .ab-message-container{position:fixed;left:0;bottom:0}.ab-message-content{display:flex;align-items:center;justify-content:space-between;max-width:calc(100vw - .3rem);border-radius:.02rem;margin:.08rem .15rem;padding:.08rem;background-color:#333;color:#fff;box-shadow:0 .04rem .08rem #00000059;transition:opacity .3s}.ab-message-close{display:flex;align-items:center;justify-content:center;cursor:pointer;width:.2rem;height:.2rem;font-size:.2rem;margin-left:.08rem;color:#b0b0b0}.ab-message-close:hover{color:#fff}.ab-message-fade-appear,.ab-message-fade-enter{opacity:0}.ab-message-fade-appear-active,.ab-message-fade-enter-active,.ab-message-fade-enter-done{opacity:1}.ab-message-fade-exit{opacity:1}.ab-message-fade-exit-active{opacity:0}.ab-message-fade-exit-done{display:none}@media only screen and (max-width:767px){.ab-message-content{width:calc(100vw - .3rem);margin:.08rem .15rem}}
19
+ .ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done{opacity:1}.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}
22
20
  .ab-move{cursor:move;visibility:hidden;transform-origin:center center}
21
+ .ab-message-container{position:fixed;left:0;bottom:0}.ab-message-content{display:flex;align-items:center;justify-content:space-between;max-width:calc(100vw - .3rem);border-radius:.02rem;margin:.08rem .15rem;padding:.08rem;background-color:#333;color:#fff;box-shadow:0 .04rem .08rem #00000059;transition:opacity .3s}.ab-message-close{display:flex;align-items:center;justify-content:center;cursor:pointer;width:.2rem;height:.2rem;font-size:.2rem;margin-left:.08rem;color:#b0b0b0}.ab-message-close:hover{color:#fff}.ab-message-fade-appear,.ab-message-fade-enter{opacity:0}.ab-message-fade-appear-active,.ab-message-fade-enter-active,.ab-message-fade-enter-done{opacity:1}.ab-message-fade-exit{opacity:1}.ab-message-fade-exit-active{opacity:0}.ab-message-fade-exit-done{display:none}@media only screen and (max-width:767px){.ab-message-content{width:calc(100vw - .3rem);margin:.08rem .15rem}}
22
+ .ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:''}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active{transform:translateZ(0);opacity:1}.ab-modal-fade-enter-done{transform:translateZ(0);opacity:1}.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}
23
23
  .ab-popover-wrap{background-color:#fff;background-clip:padding-box;box-shadow:0 2px 8px rgba(0,0,0,.15);padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px}.ab-popover-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-popover-inner-expand{padding-right:.1rem}.ab-popover-arrow{position:absolute;display:block;width:8px;height:8px;border-top-color:transparent;border-left-color:transparent;border-style:solid;background-color:#fff;border-right-color:#fff;border-bottom-color:#fff;border-width:4px;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.ab-popover-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-popover-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-popover-wrap{width:calc(100% - .3rem)}}
24
24
 
25
25
 
26
26
  .ab-select-wrap{min-width:177px;background-color:#fff;background-clip:padding-box;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.ab-select-bottom,.ab-select-content,.ab-select-title{display:flex}.ab-select-title{padding:.09rem 0;background-color:transparent;cursor:context-menu;border-bottom:1px solid #d7d7d7;font-weight:700;color:#606060;font-size:.12rem;margin:0 .1rem}.ab-select-col{font-size:.12rem;padding-right:.07rem;flex:auto}.ab-select-col:last-child{padding-right:0}.ab-select-col>li{padding:.08rem .11rem;cursor:pointer}.ab-select-col>li:hover{background-color:#eee}.ab-select-col>li.ab-select-active{background-color:#e6f7ff}.ab-select-col>li.ab-select-unselect{background-color:transparent;cursor:context-menu}.ab-select-input-group{position:relative;overflow:hidden}.ab-select-input-control{-webkit-appearance:none;outline:0;user-select:none;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;transition:all .2s;background-color:#fff;text-overflow:ellipsis;padding:.08rem .28rem .07rem .07rem;font-size:.14rem;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer}.ab-select-input-control.ab-select-focused{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-select-input-control.ab-select-empty{color:#888}.ab-select-input-control.error{background-color:#fffacd}.ab-select-icon{position:absolute;right:.21rem;top:50%;color:#ccc;font-size:0;transform:translate(100%,-50%);transition:transform .2s}.ab-select-icon svg{font-size:.12rem}.ab-select-active .ab-select-icon{transform:translate(100%,-50%) rotate(180deg)}@media only screen and (max-width:767px){.ab-select-content{display:block}.ab-select-input-control{padding:.1rem .05rem;font-size:.14rem}.ab-select-col{padding-right:0}}
27
27
  .ab-show-more-ellipsis{white-space:nowrap}.ab-show-more-btn{color:#4068b0;cursor:pointer}.ab-show-more-hidden,.ab-show-more-text{visibility:hidden;height:0;display:block;overflow:hidden}.ab-show-more-hidden{width:0}
28
- .ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{font-size:.16rem;color:#fff;padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
29
- .ab-tabs{position:relative;display:flex}.ab-tabs-item{cursor:pointer}.ab-tabs-item.ab-tabs-active{font-weight:700}.ab-tabs-item.ab-tabs-disabled{cursor:not-allowed;opacity:.7}.ab-tabs-bar{position:absolute;background-color:#b22222;transition:all .25s;width:0;height:0;overflow:hidden;margin:0;padding:0}.ab-tabs-bottom,.ab-tabs-top{flex-direction:row}.ab-tabs-bottom>.ab-tabs-bar,.ab-tabs-top>.ab-tabs-bar{left:0}.ab-tabs-left,.ab-tabs-right{flex-direction:column}.ab-tabs-left>.ab-tabs-bar,.ab-tabs-right>.ab-tabs-bar{top:0}.ab-tabs-top>.ab-tabs-bar{bottom:0}.ab-tabs-bottom>.ab-tabs-bar{top:0}.ab-tabs-left>.ab-tabs-bar{right:0}.ab-tabs-right>.ab-tabs-bar{left:0}
30
28
  .ab-skeleton{overflow:hidden}.ab-skeleton-item{background:#f2f2f2;overflow:hidden}.ab-skeleton-active .ab-skeleton-item{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
29
+ .ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{font-size:.16rem;color:#fff;padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
31
30
  .ab-tooltip-wrap{background-clip:padding-box;padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px;line-height:1.4;border:1px solid #906c00;box-shadow:1px 1px 5px -1px #000;background-color:#fffaec}.ab-tooltip-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-tooltip-inner-expand{padding-right:.1rem}.ab-tooltip-arrow{position:absolute;display:block;width:8px;height:8px;border-top-color:transparent;border-left-color:transparent;border-style:solid;box-shadow:3px 3px 7px rgba(0,0,0,.07);background-color:#fffaec;border-right-color:#906c00;border-bottom-color:#906c00;border-width:1px}.ab-tooltip-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-tooltip-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-tooltip-wrap{width:calc(100% - .3rem)}}
31
+ .ab-tabs{position:relative;display:flex}.ab-tabs-item{cursor:pointer}.ab-tabs-item.ab-tabs-active{font-weight:700}.ab-tabs-item.ab-tabs-disabled{cursor:not-allowed;opacity:.7}.ab-tabs-bar{position:absolute;background-color:#b22222;transition:all .25s;width:0;height:0;overflow:hidden;margin:0;padding:0}.ab-tabs-bottom,.ab-tabs-top{flex-direction:row}.ab-tabs-bottom>.ab-tabs-bar,.ab-tabs-top>.ab-tabs-bar{left:0}.ab-tabs-left,.ab-tabs-right{flex-direction:column}.ab-tabs-left>.ab-tabs-bar,.ab-tabs-right>.ab-tabs-bar{top:0}.ab-tabs-top>.ab-tabs-bar{bottom:0}.ab-tabs-bottom>.ab-tabs-bar{top:0}.ab-tabs-left>.ab-tabs-bar{right:0}.ab-tabs-right>.ab-tabs-bar{left:0}
32
32
  .ab-trigger-wrap{position:absolute;top:0;left:0;z-index:101}.ab-trigger-wrap.ab-trigger-hidden{display:none}.ab-trigger-mask{position:fixed;top:0;left:0;bottom:0;right:0;z-index:101;background-color:transparent;display:none}.ab-trigger-mask.ab-trigger-mask-show{display:block}.ab-trigger-fade-appear,.ab-trigger-fade-enter,.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0}.ab-trigger-fade-appear,.ab-trigger-fade-enter{transform:scale(.7)}.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0;transform:scaleY(.7)}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active,.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{opacity:1;transition:opacity .2s,transform .2s}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active{transform:scale(1)}.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{transform:scaleY(1)}.ab-trigger-fade-exit,.ab-trigger-fade-hr-exit{opacity:1}.ab-trigger-fade-exit-active,.ab-trigger-fade-hr-exit-active{opacity:0;transition:opacity .2s,transform .2s}.ab-trigger-fade-exit-active{transform:scale(.7)}.ab-trigger-fade-hr-exit-active{transform:scaleY(.7)}.ab-trigger-fade-exit-done,.ab-trigger-fade-hr-exit-done{display:none}
33
-
34
33
  .ab-dp-cg-content,.ab-dp-cg-head,.ab-dp-cg-title{display:flex;align-items:center}.ab-dp-cg-title{user-select:none;font-size:.14rem;padding-bottom:.08rem}.ab-dp-cg-title>strong{flex:1 1;margin-left:.1rem;cursor:default;color:#4a4a4a}.ab-dp-cg-title>strong.ab-dp-cg-clickable{cursor:pointer}.ab-dp-cg-title>strong.ab-dp-cg-clickable:hover{color:#000}.ab-dp-cg-dis-icon,.ab-dp-cg-icon{align-self:flex-end;margin-left:.08rem}.ab-dp-cg-icon{cursor:pointer}.ab-dp-cg-head{padding-bottom:.05rem}.ab-dp-cg-head>li{display:flex;align-items:center;justify-content:center;cursor:default}.ab-dp-cg-content{flex-wrap:wrap}.ab-dp-cg-content>li{cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}.ab-dp-cg-content>li:hover{background:#f0f0f0}.ab-dp-cg-content>li.ab-dp-cg-dis{cursor:not-allowed;color:#b0b0b0}.ab-dp-cg-content>li.ab-dp-cg-dis:hover{background:0 0}.ab-dp-cg-content>li.ab-dp-cg-selected,.ab-dp-cg-content>li:active{background:#c7e0f4;border:3px solid #c7e0f4;border-radius:2px;color:#000}.ab-dp-cg-content>li.ab-dp-cg-today{background:#0078d4;color:#fff}.ab-dp-cg-arrow{cursor:pointer}
@@ -1,5 +1,9 @@
1
1
  import React from 'react';
2
2
  export interface GuideProps {
3
+ /**
4
+ * 图片路径
5
+ */
6
+ imgSrc: string;
3
7
  /**
4
8
  * 是否显示遮罩层
5
9
  */
@@ -12,10 +16,6 @@ export interface GuideProps {
12
16
  * 是否显示带箭头的图片,图片默认显示在子元素上方,水平居中
13
17
  */
14
18
  loadablePointer?: boolean;
15
- /**
16
- * 图片路径
17
- */
18
- img?: string;
19
19
  /**
20
20
  * 图片默认显示在子元素上方,水平居中
21
21
  */
@@ -43,7 +43,6 @@ declare class Guide extends React.Component<GuideProps, GuideStates> {
43
43
  imgRef: React.RefObject<HTMLImageElement>;
44
44
  static defaultProps: {
45
45
  loadablePointer: boolean;
46
- img: string;
47
46
  position: string;
48
47
  translateX: number;
49
48
  translateY: number;
@@ -17,8 +17,6 @@ var _utils = require("@autobest-ui/utils");
17
17
 
18
18
  var _portal = _interopRequireDefault(require("../portal"));
19
19
 
20
- var _useConfig = _interopRequireDefault(require("../use-config"));
21
-
22
20
  var _mask = _interopRequireDefault(require("../mask"));
23
21
 
24
22
  var __extends = void 0 && (void 0).__extends || function () {
@@ -116,7 +114,7 @@ function (_super) {
116
114
 
117
115
  var _a = this.props,
118
116
  loadablePointer = _a.loadablePointer,
119
- img = _a.img,
117
+ imgSrc = _a.imgSrc,
120
118
  position = _a.position,
121
119
  visible = _a.visible,
122
120
  translateX = _a.translateX,
@@ -124,7 +122,7 @@ function (_super) {
124
122
 
125
123
  if (loadablePointer && visible) {
126
124
  var image_1 = new Image();
127
- image_1.src = img;
125
+ image_1.src = imgSrc;
128
126
 
129
127
  image_1.onload = function () {
130
128
  var element = _this.getElement();
@@ -171,7 +169,7 @@ function (_super) {
171
169
  var _a = this.props,
172
170
  visible = _a.visible,
173
171
  loadablePointer = _a.loadablePointer,
174
- img = _a.img;
172
+ imgSrc = _a.imgSrc;
175
173
  var _b = this.state,
176
174
  top = _b.top,
177
175
  left = _b.left;
@@ -191,7 +189,7 @@ function (_super) {
191
189
  }), loadablePointer ? _react.default.createElement("img", {
192
190
  style: style,
193
191
  className: cls + "-icon",
194
- src: img,
192
+ src: imgSrc,
195
193
  alt: "selection pointer",
196
194
  ref: this.imgRef
197
195
  }) : null));
@@ -223,7 +221,6 @@ function (_super) {
223
221
 
224
222
  Guide.defaultProps = {
225
223
  loadablePointer: false,
226
- img: _useConfig.default.assetCommonUiUrl + "/images/vehicle_pointer.png",
227
224
  position: 'center',
228
225
  translateX: 0,
229
226
  translateY: 0,
package/lib/index.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- export { default as UseConfig } from './use-config';
2
1
  export type { AccordionProps } from './accordion';
3
2
  export { default as Accordion } from './accordion';
4
3
  export type { EllipsisProps, EllipsisLinesType } from './ellipsis';
package/lib/index.js CHANGED
@@ -5,12 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- Object.defineProperty(exports, "UseConfig", {
9
- enumerable: true,
10
- get: function get() {
11
- return _useConfig.default;
12
- }
13
- });
14
8
  Object.defineProperty(exports, "Accordion", {
15
9
  enumerable: true,
16
10
  get: function get() {
@@ -180,8 +174,6 @@ Object.defineProperty(exports, "LoadingIcon", {
180
174
  }
181
175
  });
182
176
 
183
- var _useConfig = _interopRequireDefault(require("./use-config"));
184
-
185
177
  var _accordion = _interopRequireDefault(require("./accordion"));
186
178
 
187
179
  var _ellipsis = _interopRequireDefault(require("./ellipsis"));
@@ -1,8 +1,13 @@
1
+ import React from 'react';
1
2
  export interface LoadingProps {
2
3
  /**
3
- * loading 样式的另一种
4
+ * loading 样式
4
5
  */
5
- isRectLoading?: boolean;
6
+ className?: string;
7
+ /**
8
+ * 自定义loading, 需要补全自定义元素样式
9
+ */
10
+ customIcon?: React.ReactElement;
6
11
  /**
7
12
  * loading开始后自动隐藏的时间,单位:毫秒
8
13
  */
@@ -15,8 +15,6 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
15
15
 
16
16
  var _utils = require("@autobest-ui/utils");
17
17
 
18
- var _useConfig = _interopRequireDefault(require("../use-config"));
19
-
20
18
  var _loadingIcon = _interopRequireDefault(require("../loading-icon"));
21
19
 
22
20
  var __assign = void 0 && (void 0).__assign || function () {
@@ -39,18 +37,13 @@ var __assign = void 0 && (void 0).__assign || function () {
39
37
  var loadingElement = null;
40
38
  var loadingTimer = null;
41
39
  var closeTimer = null;
40
+ var prevCustomIcon = null;
42
41
  var cls = 'ab-loading';
43
42
 
44
- function getLoadingContainer(isRectLoading) {
45
- var _a;
46
-
43
+ function getLoadingContainer(customIcon, className) {
47
44
  return _react.default.createElement("div", {
48
- className: (0, _classnames.default)(cls + "-wrap", (_a = {}, _a[cls + "-rect-loading"] = isRectLoading, _a))
49
- }, isRectLoading ? _react.default.createElement("img", {
50
- className: cls + "-content",
51
- src: _useConfig.default.assetCommonUiUrl + "/images/p_loading_rect.gif",
52
- alt: "loading..."
53
- }) : _react.default.createElement(_loadingIcon.default, {
45
+ className: (0, _classnames.default)(cls + "-wrap", className)
46
+ }, customIcon || _react.default.createElement(_loadingIcon.default, {
54
47
  className: cls + "-content"
55
48
  }));
56
49
  } // openIds 容器
@@ -59,13 +52,12 @@ function getLoadingContainer(isRectLoading) {
59
52
  var openIds = []; // closeIds 容器
60
53
 
61
54
  var closeIds = [];
62
- var prevIsRectLoading = false;
63
55
 
64
- function createLoading(isRectLoading) {
56
+ function createLoading(customIcon, className) {
65
57
  loadingElement = document.createElement('div');
66
58
  document.body.appendChild(loadingElement);
67
59
 
68
- _reactDom.default.render(getLoadingContainer(isRectLoading), loadingElement);
60
+ _reactDom.default.render(getLoadingContainer(customIcon, className), loadingElement);
69
61
  }
70
62
 
71
63
  var Loading =
@@ -79,24 +71,25 @@ function () {
79
71
  }
80
72
 
81
73
  config = __assign({
82
- isRectLoading: false,
83
74
  expire: 0
84
- }, config); // 防止重复创建
75
+ }, config); // 防止重复创建或自定义loading icon,重新创建
85
76
 
86
77
  if (!loadingElement) {
87
- createLoading(config.isRectLoading);
88
- } else if (prevIsRectLoading !== config.isRectLoading) {
89
- // loading 类型不同时,重新创建
90
- try {
91
- document.body.removeChild(loadingElement);
92
- } catch (e) {}
93
-
94
- createLoading(config.isRectLoading);
78
+ createLoading(config.customIcon, config.className);
79
+ } else if (config.customIcon || config.customIcon !== prevCustomIcon) {
80
+ if (loadingElement) {
81
+ try {
82
+ document.body.removeChild(loadingElement);
83
+ loadingElement = null;
84
+ } catch (e) {}
85
+ }
86
+
87
+ createLoading(config.customIcon, config.className);
95
88
  } else {
96
89
  loadingElement.style.display = 'block';
97
90
  }
98
91
 
99
- prevIsRectLoading = config.isRectLoading; // 如果配置中有expire且大于0
92
+ prevCustomIcon = config.customIcon; // 如果配置中有expire且大于0
100
93
  // 将会在到达时间后自动关闭,不用手动再关闭(不需要再close())
101
94
 
102
95
  if (config.expire > 0) {
@@ -1 +1 @@
1
- .ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}.ab-loading-wrap.ab-loading-rect-loading{background-color:rgba(0,0,0,.7)}.ab-loading-wrap.ab-loading-rect-loading .ab-loading-content{top:10%;width:1.6rem;height:.24rem}
1
+ .ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}
@@ -18,14 +18,4 @@ $namespace: ab-loading;
18
18
  height: .31rem;
19
19
  transform: translate3d(-50%, -50%, 0);
20
20
  }
21
-
22
- &.#{$namespace}-rect-loading {
23
- background-color: rgba(#000, .7);
24
-
25
- .#{$namespace}-content {
26
- top: 10%;
27
- width: 1.6rem;
28
- height: .24rem;
29
- }
30
- }
31
21
  }
package/lib/style.css CHANGED
@@ -11,24 +11,23 @@ a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd
11
11
  .ab-guide-mask.ab-mask{background-color:rgba(0,0,0,.7);z-index:4}.ab-guide-icon{position:absolute;z-index:5}.ab-guide-content{position:relative;z-index:6}
12
12
  .ab-input-number{padding:.06rem .07rem;-webkit-appearance:none;outline:0;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;font-size:.12rem;transition:all .3s;position:relative;background-color:transparent;z-index:2}.ab-input-number:focus{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-input-number-wrap{position:relative;background-color:#fff;display:inline-block}.ab-input-number-button-wrap{position:absolute;user-select:none;top:50%;transform:translateY(-50%);right:.02rem}.ab-input-number-button{position:relative;width:.16rem;height:.1rem;overflow:hidden;background-color:#f1f1f1}.ab-input-number-button.ab-input-number-hover{background-color:#d0d0d0}.ab-input-number-button.ab-input-number-active{background-color:#787878}.ab-input-number-button.ab-input-number-active .ab-input-number-add{border-bottom-color:#fff}.ab-input-number-button.ab-input-number-active .ab-input-number-sub{border-top-color:#fff}.ab-input-number-button:first-child{margin-bottom:.02rem}.ab-input-number-add{position:absolute;top:-.01rem;left:.04rem;display:block;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#505050;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}.ab-input-number-sub{display:block;margin:.03rem 0 0 .04rem;border-top-color:#505050;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;border-width:.04rem;border-style:solid;width:0;height:0}
13
13
  .ab-lazy-image{transition:opacity .5s}.ab-lazy-image-loading{background:#f2f2f2;overflow:hidden}.ab-lazy-image-loading.ab-lazy-image-active{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
14
- .ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}.ab-loading-wrap.ab-loading-rect-loading{background-color:rgba(0,0,0,.7)}.ab-loading-wrap.ab-loading-rect-loading .ab-loading-content{top:10%;width:1.6rem;height:.24rem}
15
14
  .ab-link-list-title{font-size:.16rem;margin:0 0;padding:0 0 .12rem 0;display:flex;justify-content:space-between;align-items:center}.ab-link-list-icon{display:none}.ab-link-list-content{flex-wrap:wrap;width:auto;margin-right:-.15rem}.ab-link-list-content.ab-link-list-col2>a,.ab-link-list-content.ab-link-list-col2>span{min-width:calc(100% / 2 - .15rem);max-width:calc(100% / 2 - .15rem)}.ab-link-list-content.ab-link-list-col4>a,.ab-link-list-content.ab-link-list-col4>span{min-width:calc(100% / 4 - .15rem);max-width:calc(100% / 4 - .15rem)}.ab-link-list-content.ab-link-list-col5>a,.ab-link-list-content.ab-link-list-col5>span{min-width:calc(100% / 5 - .15rem);max-width:calc(100% / 5 - .15rem)}.ab-link-list-content.ab-link-list-col6>a,.ab-link-list-content.ab-link-list-col6>span{min-width:calc(100% / 6 - .15rem);max-width:calc(100% / 6 - .15rem)}.ab-link-list-content.ab-link-list-col8>a,.ab-link-list-content.ab-link-list-col8>span{min-width:calc(100% / 8 - .15rem);max-width:calc(100% / 8 - .15rem)}.ab-link-list-content>a,.ab-link-list-content>span{cursor:pointer;border:.5px solid #d0d0d0;margin-bottom:8px;display:inline-block;justify-content:space-between;align-items:center;width:100%;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.085rem .15rem .085rem .12rem;color:#333;margin-right:.15rem}.ab-link-list-content>a:after,.ab-link-list-content>span:after{content:'>';position:absolute;right:.1rem;top:50%;transform:translateY(-50%);color:grey;font-size:.12rem}.ab-link-list-content>a:hover,.ab-link-list-content>span:hover{text-decoration:underline;color:#f97601}.ab-link-list-content>.ab-link-list-hidden{display:none}.ab-link-list-wrap-popover.ab-popover-wrap{max-width:3.5rem;min-width:3rem}.ab-link-list-sub-title{display:block;padding-bottom:.06rem;font-size:.12rem}.ab-link-list-sub-link{text-decoration:underline;color:#333;font-size:.12rem;padding:0 .05rem .05rem 0;display:inline-block}@media only screen and (max-width:767px){.ab-link-list-divider{border-bottom:1px solid #d0d0d0}.ab-link-list-body{height:0;width:0;overflow:hidden}.ab-link-list-body.ab-link-list-active{height:auto;width:auto}.ab-link-list-content>a,.ab-link-list-content>span{min-width:calc(50% - .15rem)!important;max-width:calc(50% - .15rem)!important}.ab-link-list-icon{font-weight:700;font-size:.22rem;cursor:pointer;width:.2rem;height:.2rem;display:flex;align-items:center;justify-content:center}}
16
15
  .ab-loading-bar{position:fixed;top:0;left:0;margin-bottom:-3px;height:3px;width:100%;z-index:999}@keyframes movingBar{0%{left:50%;right:50%}99.9%{left:0;right:0}100%{left:50%;right:50%}}@keyframes changeBar{0%{background-color:#0aa770}33.3%{background-color:#0aa770}33.33%{background-color:red}66.6%{background-color:#f987d6}66.66%{background-color:#f987d6}99.9%{background-color:#00bcd4}}.ab-loading-bar-bar{position:absolute;height:0;width:100%;text-indent:-9999px;background-color:#0aa770;animation:changeBar 2.25s infinite}.ab-loading-bar-bar:before{content:"";height:3px;position:absolute;left:50%;right:50%;background-color:inherit;animation:movingBar .75s infinite}
16
+ .ab-loading-wrap{position:fixed;top:0;left:0;z-index:9999;background-color:rgba(255,255,255,.7);height:100%;width:100%}.ab-loading-wrap .ab-loading-content{position:absolute;left:50%;top:50%;display:block;width:.31rem;height:.31rem;transform:translate3d(-50%,-50%,0)}
17
17
  .ab-loading-container{position:relative}.ab-loading-container-active{user-select:none;pointer-events:none}.ab-loading-container-icon-box{position:absolute;background-color:rgba(255,255,255,.7);top:0;left:0;z-index:4;display:block;width:100%;height:100%}.ab-loading-container-icon{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}
18
- .ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done{opacity:1}.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}
19
18
  .ab-svg-loading{display:inline-block}.ab-svg-loading-icon{display:block;width:.31rem;height:.31rem;animation:loading 1s infinite linear reverse}@keyframes loading{0%{transform:rotate(0)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
20
- .ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:''}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active{transform:translateZ(0);opacity:1}.ab-modal-fade-enter-done{transform:translateZ(0);opacity:1}.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}
21
- .ab-message-container{position:fixed;left:0;bottom:0}.ab-message-content{display:flex;align-items:center;justify-content:space-between;max-width:calc(100vw - .3rem);border-radius:.02rem;margin:.08rem .15rem;padding:.08rem;background-color:#333;color:#fff;box-shadow:0 .04rem .08rem #00000059;transition:opacity .3s}.ab-message-close{display:flex;align-items:center;justify-content:center;cursor:pointer;width:.2rem;height:.2rem;font-size:.2rem;margin-left:.08rem;color:#b0b0b0}.ab-message-close:hover{color:#fff}.ab-message-fade-appear,.ab-message-fade-enter{opacity:0}.ab-message-fade-appear-active,.ab-message-fade-enter-active,.ab-message-fade-enter-done{opacity:1}.ab-message-fade-exit{opacity:1}.ab-message-fade-exit-active{opacity:0}.ab-message-fade-exit-done{display:none}@media only screen and (max-width:767px){.ab-message-content{width:calc(100vw - .3rem);margin:.08rem .15rem}}
19
+ .ab-mask{position:fixed;top:0;left:0;z-index:101;width:100%;height:100%;background-color:rgba(0,0,0,.45);transition:opacity .4s cubic-bezier(.7,.3,.1,1)}.ab-mask-fade-appear,.ab-mask-fade-enter{opacity:0}.ab-mask-fade-appear-active,.ab-mask-fade-enter-active,.ab-mask-fade-enter-done{opacity:1}.ab-mask-fade-exit{opacity:1}.ab-mask-fade-exit-active{opacity:0}.ab-mask-fade-exit-done{display:none}
22
20
  .ab-move{cursor:move;visibility:hidden;transform-origin:center center}
21
+ .ab-message-container{position:fixed;left:0;bottom:0}.ab-message-content{display:flex;align-items:center;justify-content:space-between;max-width:calc(100vw - .3rem);border-radius:.02rem;margin:.08rem .15rem;padding:.08rem;background-color:#333;color:#fff;box-shadow:0 .04rem .08rem #00000059;transition:opacity .3s}.ab-message-close{display:flex;align-items:center;justify-content:center;cursor:pointer;width:.2rem;height:.2rem;font-size:.2rem;margin-left:.08rem;color:#b0b0b0}.ab-message-close:hover{color:#fff}.ab-message-fade-appear,.ab-message-fade-enter{opacity:0}.ab-message-fade-appear-active,.ab-message-fade-enter-active,.ab-message-fade-enter-done{opacity:1}.ab-message-fade-exit{opacity:1}.ab-message-fade-exit-active{opacity:0}.ab-message-fade-exit-done{display:none}@media only screen and (max-width:767px){.ab-message-content{width:calc(100vw - .3rem);margin:.08rem .15rem}}
22
+ .ab-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;overflow:auto;outline:0}.ab-modal.ab-modal-center{text-align:center}.ab-modal.ab-modal-center:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:''}.ab-modal.ab-modal-center .ab-modal-content{top:0;text-align:left;display:inline-block;vertical-align:middle}.ab-modal-content{position:relative;background-color:#fff;max-width:calc(100vw - .3rem);margin-left:auto;margin-right:auto;overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .3s,opacity .3s cubic-bezier(.7,.3,.1,1);z-index:101}.ab-modal-title{position:relative;width:100%}.ab-modal-title .ab-modal-times{top:50%;transform:translateY(-50%)}.ab-modal-times{position:absolute;top:.12rem;right:.12rem;font-size:.15rem;color:#b0b0b0;cursor:pointer}.ab-modal-times svg{display:block}.ab-modal-times:hover{color:#333}.ab-modal-hidden{display:none}@media only screen and (max-width:767px){.ab-modal-content{width:calc(100vw - .3rem)}}.ab-modal-fade-appear,.ab-modal-fade-enter{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-appear-active,.ab-modal-fade-enter-active{transform:translateZ(0);opacity:1}.ab-modal-fade-enter-done{transform:translateZ(0);opacity:1}.ab-modal-fade-exit{transform:translateZ(0);opacity:1}.ab-modal-fade-exit-active{transform:translate3d(0,-30px,0);opacity:0}.ab-modal-fade-exit-done{display:none}
23
23
  .ab-popover-wrap{background-color:#fff;background-clip:padding-box;box-shadow:0 2px 8px rgba(0,0,0,.15);padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px}.ab-popover-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-popover-inner-expand{padding-right:.1rem}.ab-popover-arrow{position:absolute;display:block;width:8px;height:8px;border-top-color:transparent;border-left-color:transparent;border-style:solid;background-color:#fff;border-right-color:#fff;border-bottom-color:#fff;border-width:4px;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.ab-popover-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-popover-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-popover-wrap{width:calc(100% - .3rem)}}
24
24
 
25
25
 
26
26
  .ab-select-wrap{min-width:177px;background-color:#fff;background-clip:padding-box;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15)}.ab-select-bottom,.ab-select-content,.ab-select-title{display:flex}.ab-select-title{padding:.09rem 0;background-color:transparent;cursor:context-menu;border-bottom:1px solid #d7d7d7;font-weight:700;color:#606060;font-size:.12rem;margin:0 .1rem}.ab-select-col{font-size:.12rem;padding-right:.07rem;flex:auto}.ab-select-col:last-child{padding-right:0}.ab-select-col>li{padding:.08rem .11rem;cursor:pointer}.ab-select-col>li:hover{background-color:#eee}.ab-select-col>li.ab-select-active{background-color:#e6f7ff}.ab-select-col>li.ab-select-unselect{background-color:transparent;cursor:context-menu}.ab-select-input-group{position:relative;overflow:hidden}.ab-select-input-control{-webkit-appearance:none;outline:0;user-select:none;width:100%;border:1px solid #ccc;border-radius:2px;resize:none;transition:all .2s;background-color:#fff;text-overflow:ellipsis;padding:.08rem .28rem .07rem .07rem;font-size:.14rem;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer}.ab-select-input-control.ab-select-focused{box-shadow:0 0 4px rgba(52,143,238,.8);border-color:rgba(52,143,238,.8)}.ab-select-input-control.ab-select-empty{color:#888}.ab-select-input-control.error{background-color:#fffacd}.ab-select-icon{position:absolute;right:.21rem;top:50%;color:#ccc;font-size:0;transform:translate(100%,-50%);transition:transform .2s}.ab-select-icon svg{font-size:.12rem}.ab-select-active .ab-select-icon{transform:translate(100%,-50%) rotate(180deg)}@media only screen and (max-width:767px){.ab-select-content{display:block}.ab-select-input-control{padding:.1rem .05rem;font-size:.14rem}.ab-select-col{padding-right:0}}
27
27
  .ab-show-more-ellipsis{white-space:nowrap}.ab-show-more-btn{color:#4068b0;cursor:pointer}.ab-show-more-hidden,.ab-show-more-text{visibility:hidden;height:0;display:block;overflow:hidden}.ab-show-more-hidden{width:0}
28
- .ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{font-size:.16rem;color:#fff;padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
29
- .ab-tabs{position:relative;display:flex}.ab-tabs-item{cursor:pointer}.ab-tabs-item.ab-tabs-active{font-weight:700}.ab-tabs-item.ab-tabs-disabled{cursor:not-allowed;opacity:.7}.ab-tabs-bar{position:absolute;background-color:#b22222;transition:all .25s;width:0;height:0;overflow:hidden;margin:0;padding:0}.ab-tabs-bottom,.ab-tabs-top{flex-direction:row}.ab-tabs-bottom>.ab-tabs-bar,.ab-tabs-top>.ab-tabs-bar{left:0}.ab-tabs-left,.ab-tabs-right{flex-direction:column}.ab-tabs-left>.ab-tabs-bar,.ab-tabs-right>.ab-tabs-bar{top:0}.ab-tabs-top>.ab-tabs-bar{bottom:0}.ab-tabs-bottom>.ab-tabs-bar{top:0}.ab-tabs-left>.ab-tabs-bar{right:0}.ab-tabs-right>.ab-tabs-bar{left:0}
30
28
  .ab-skeleton{overflow:hidden}.ab-skeleton-item{background:#f2f2f2;overflow:hidden}.ab-skeleton-active .ab-skeleton-item{background:linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);background-size:400% 100%;animation:ab-skeleton-loading 1.4s ease infinite}@keyframes ab-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
29
+ .ab-table{overflow-x:auto}.ab-table table{border-spacing:0;width:100%;table-layout:fixed}.ab-table-header{overflow:hidden}.ab-table-header table{width:calc(100% - .17rem)}.ab-table-body{overflow:auto scroll}.ab-table-checkbox{width:.32rem;text-align:center}.ab-table-title{display:flex;align-items:center;text-align:left}.ab-table-title.ab-table-point{cursor:pointer}.ab-table-arrow{font-size:.16rem;color:#fff;padding:0 .05rem}@media only screen and (max-width:767px){.ab-table-header table{width:100%}}
31
30
  .ab-tooltip-wrap{background-clip:padding-box;padding:.08rem .11rem .05rem;min-width:210px;border-radius:4px;line-height:1.4;border:1px solid #906c00;box-shadow:1px 1px 5px -1px #000;background-color:#fffaec}.ab-tooltip-inner{position:relative;width:100%;overflow:hidden;font-size:.12rem}.ab-tooltip-inner-expand{padding-right:.1rem}.ab-tooltip-arrow{position:absolute;display:block;width:8px;height:8px;border-top-color:transparent;border-left-color:transparent;border-style:solid;box-shadow:3px 3px 7px rgba(0,0,0,.07);background-color:#fffaec;border-right-color:#906c00;border-bottom-color:#906c00;border-width:1px}.ab-tooltip-close{position:absolute;right:.02rem;top:.05rem;cursor:pointer;padding:0 .05rem;color:#bfbfbf;font-size:.2rem;line-height:1;z-index:2}.ab-tooltip-close:hover{color:#4a4a4a}@media only screen and (max-width:767px){.ab-tooltip-wrap{width:calc(100% - .3rem)}}
31
+ .ab-tabs{position:relative;display:flex}.ab-tabs-item{cursor:pointer}.ab-tabs-item.ab-tabs-active{font-weight:700}.ab-tabs-item.ab-tabs-disabled{cursor:not-allowed;opacity:.7}.ab-tabs-bar{position:absolute;background-color:#b22222;transition:all .25s;width:0;height:0;overflow:hidden;margin:0;padding:0}.ab-tabs-bottom,.ab-tabs-top{flex-direction:row}.ab-tabs-bottom>.ab-tabs-bar,.ab-tabs-top>.ab-tabs-bar{left:0}.ab-tabs-left,.ab-tabs-right{flex-direction:column}.ab-tabs-left>.ab-tabs-bar,.ab-tabs-right>.ab-tabs-bar{top:0}.ab-tabs-top>.ab-tabs-bar{bottom:0}.ab-tabs-bottom>.ab-tabs-bar{top:0}.ab-tabs-left>.ab-tabs-bar{right:0}.ab-tabs-right>.ab-tabs-bar{left:0}
32
32
  .ab-trigger-wrap{position:absolute;top:0;left:0;z-index:101}.ab-trigger-wrap.ab-trigger-hidden{display:none}.ab-trigger-mask{position:fixed;top:0;left:0;bottom:0;right:0;z-index:101;background-color:transparent;display:none}.ab-trigger-mask.ab-trigger-mask-show{display:block}.ab-trigger-fade-appear,.ab-trigger-fade-enter,.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0}.ab-trigger-fade-appear,.ab-trigger-fade-enter{transform:scale(.7)}.ab-trigger-fade-hr-appear,.ab-trigger-fade-hr-enter{opacity:0;transform:scaleY(.7)}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active,.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{opacity:1;transition:opacity .2s,transform .2s}.ab-trigger-fade-appear-active,.ab-trigger-fade-enter-active{transform:scale(1)}.ab-trigger-fade-hr-appear-active,.ab-trigger-fade-hr-enter-active{transform:scaleY(1)}.ab-trigger-fade-exit,.ab-trigger-fade-hr-exit{opacity:1}.ab-trigger-fade-exit-active,.ab-trigger-fade-hr-exit-active{opacity:0;transition:opacity .2s,transform .2s}.ab-trigger-fade-exit-active{transform:scale(.7)}.ab-trigger-fade-hr-exit-active{transform:scaleY(.7)}.ab-trigger-fade-exit-done,.ab-trigger-fade-hr-exit-done{display:none}
33
-
34
33
  .ab-dp-cg-content,.ab-dp-cg-head,.ab-dp-cg-title{display:flex;align-items:center}.ab-dp-cg-title{user-select:none;font-size:.14rem;padding-bottom:.08rem}.ab-dp-cg-title>strong{flex:1 1;margin-left:.1rem;cursor:default;color:#4a4a4a}.ab-dp-cg-title>strong.ab-dp-cg-clickable{cursor:pointer}.ab-dp-cg-title>strong.ab-dp-cg-clickable:hover{color:#000}.ab-dp-cg-dis-icon,.ab-dp-cg-icon{align-self:flex-end;margin-left:.08rem}.ab-dp-cg-icon{cursor:pointer}.ab-dp-cg-head{padding-bottom:.05rem}.ab-dp-cg-head>li{display:flex;align-items:center;justify-content:center;cursor:default}.ab-dp-cg-content{flex-wrap:wrap}.ab-dp-cg-content>li{cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000}.ab-dp-cg-content>li:hover{background:#f0f0f0}.ab-dp-cg-content>li.ab-dp-cg-dis{cursor:not-allowed;color:#b0b0b0}.ab-dp-cg-content>li.ab-dp-cg-dis:hover{background:0 0}.ab-dp-cg-content>li.ab-dp-cg-selected,.ab-dp-cg-content>li:active{background:#c7e0f4;border:3px solid #c7e0f4;border-radius:2px;color:#000}.ab-dp-cg-content>li.ab-dp-cg-today{background:#0078d4;color:#fff}.ab-dp-cg-arrow{cursor:pointer}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@autobest-ui/components",
3
- "version": "1.4.0",
3
+ "version": "1.5.0",
4
4
  "private": false,
5
5
  "description": "components common ui for React",
6
6
  "main": "lib/index.js",
@@ -46,5 +46,5 @@
46
46
  "react": ">=16.8.6",
47
47
  "react-transition-group": ">=4.2.2"
48
48
  },
49
- "gitHead": "6ab77a55f1adfa56753e559118f43c0181c08304"
49
+ "gitHead": "300bad54619d88be7e1cc9a94e0615a57df91f21"
50
50
  }
@@ -1,5 +0,0 @@
1
- export default class UseConfig {
2
- static assetCommonUiUrl: string;
3
- static assetWWWUrl: any;
4
- static assetSupportWebP: any;
5
- }
@@ -1,13 +0,0 @@
1
- var UseConfig =
2
- /** @class */
3
- function () {
4
- function UseConfig() {} // 配置静态资源链接库, 默认指向测试环境
5
-
6
-
7
- UseConfig.assetCommonUiUrl = 'https://assets-web.dev.autobestdevops.com/common-uiasset';
8
- UseConfig.assetWWWUrl = null;
9
- UseConfig.assetSupportWebP = null;
10
- return UseConfig;
11
- }();
12
-
13
- export default UseConfig;
File without changes
@@ -1 +0,0 @@
1
-
@@ -1 +0,0 @@
1
- "use strict";
File without changes
@@ -1,5 +0,0 @@
1
- export default class UseConfig {
2
- static assetCommonUiUrl: string;
3
- static assetWWWUrl: any;
4
- static assetSupportWebP: any;
5
- }
@@ -1,21 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
-
8
- var UseConfig =
9
- /** @class */
10
- function () {
11
- function UseConfig() {} // 配置静态资源链接库, 默认指向测试环境
12
-
13
-
14
- UseConfig.assetCommonUiUrl = 'https://assets-web.dev.autobestdevops.com/common-uiasset';
15
- UseConfig.assetWWWUrl = null;
16
- UseConfig.assetSupportWebP = null;
17
- return UseConfig;
18
- }();
19
-
20
- var _default = UseConfig;
21
- exports.default = _default;
File without changes
@@ -1 +0,0 @@
1
-
@@ -1 +0,0 @@
1
- "use strict";
File without changes