@dtjoy/dt-design 1.0.1 → 1.0.2

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.
Files changed (141) hide show
  1. package/esm/_util/gapSize.d.ts +3 -0
  2. package/esm/_util/gapSize.js +10 -0
  3. package/esm/_util/hooks/index.d.ts +1 -0
  4. package/esm/_util/hooks/index.js +1 -0
  5. package/esm/_util/hooks/useOrientation.d.ts +2 -0
  6. package/esm/_util/hooks/useOrientation.js +19 -0
  7. package/esm/_util/isNonNullable.d.ts +2 -0
  8. package/esm/_util/isNonNullable.js +4 -0
  9. package/esm/_util/type.d.ts +2 -1
  10. package/esm/blockHeader/index.js +12 -11
  11. package/esm/blockHeader/style/index.d.ts +1 -1
  12. package/esm/blockHeader/style/index.js +1 -1
  13. package/esm/blockHeader/style/index.less +8 -7
  14. package/esm/button/style/index.less +60 -46
  15. package/esm/button/style/mixin.less +47 -0
  16. package/esm/collapsible/index.d.ts +97 -0
  17. package/esm/collapsible/index.js +234 -0
  18. package/esm/collapsible/style/index.d.ts +1 -0
  19. package/esm/collapsible/style/index.js +1 -0
  20. package/esm/collapsible/style/index.less +24 -0
  21. package/esm/collapsibleActionItems/index.d.ts +24 -0
  22. package/esm/collapsibleActionItems/index.js +74 -0
  23. package/esm/collapsibleActionItems/style/index.d.ts +2 -0
  24. package/esm/collapsibleActionItems/style/index.js +2 -0
  25. package/esm/collapsibleActionItems/style/index.less +7 -0
  26. package/esm/flex/index.d.ts +7 -0
  27. package/esm/flex/index.js +62 -0
  28. package/esm/flex/interface.d.ts +16 -0
  29. package/esm/flex/interface.js +1 -0
  30. package/esm/flex/style/index.d.ts +2 -0
  31. package/esm/flex/style/index.js +2 -0
  32. package/esm/flex/style/index.less +77 -0
  33. package/esm/flex/utils.d.ts +7 -0
  34. package/esm/flex/utils.js +33 -0
  35. package/esm/index.d.ts +9 -0
  36. package/esm/index.js +7 -5
  37. package/esm/resize/index.d.ts +8 -0
  38. package/esm/resize/index.js +29 -0
  39. package/esm/splitter/Panel.d.ts +7 -0
  40. package/esm/splitter/Panel.js +38 -0
  41. package/esm/splitter/SplitBar.d.ts +24 -0
  42. package/esm/splitter/SplitBar.js +185 -0
  43. package/esm/splitter/Splitter.d.ts +5 -0
  44. package/esm/splitter/Splitter.js +215 -0
  45. package/esm/splitter/hooks/sizeUtil.d.ts +3 -0
  46. package/esm/splitter/hooks/sizeUtil.js +63 -0
  47. package/esm/splitter/hooks/useItems.d.ts +14 -0
  48. package/esm/splitter/hooks/useItems.js +44 -0
  49. package/esm/splitter/hooks/useResizable.d.ts +10 -0
  50. package/esm/splitter/hooks/useResizable.js +73 -0
  51. package/esm/splitter/hooks/useResize.d.ts +6 -0
  52. package/esm/splitter/hooks/useResize.js +158 -0
  53. package/esm/splitter/hooks/useSizes.d.ts +4 -0
  54. package/esm/splitter/hooks/useSizes.js +80 -0
  55. package/esm/splitter/index.d.ts +8 -0
  56. package/esm/splitter/index.js +5 -0
  57. package/esm/splitter/interface.d.ts +68 -0
  58. package/esm/splitter/interface.js +1 -0
  59. package/esm/splitter/style/index.d.ts +2 -0
  60. package/esm/splitter/style/index.js +2 -0
  61. package/esm/splitter/style/index.less +312 -0
  62. package/esm/statusTag/index.d.ts +28 -0
  63. package/esm/statusTag/index.js +122 -0
  64. package/esm/statusTag/style/index.d.ts +2 -0
  65. package/esm/statusTag/style/index.js +2 -0
  66. package/esm/statusTag/style/index.less +70 -0
  67. package/esm/statusTag/style/mixin.less +39 -0
  68. package/esm/style/mixins/index.less +0 -0
  69. package/esm/style/themes/index.less +2 -1
  70. package/esm/style/themes/variable.less +1 -0
  71. package/lib/_util/gapSize.d.ts +3 -0
  72. package/lib/_util/gapSize.js +17 -0
  73. package/lib/_util/hooks/index.d.ts +1 -0
  74. package/lib/_util/hooks/index.js +16 -0
  75. package/lib/_util/hooks/useOrientation.d.ts +2 -0
  76. package/lib/_util/hooks/useOrientation.js +26 -0
  77. package/lib/_util/isNonNullable.d.ts +2 -0
  78. package/lib/_util/isNonNullable.js +10 -0
  79. package/lib/_util/type.d.ts +2 -1
  80. package/lib/blockHeader/index.js +12 -12
  81. package/lib/blockHeader/style/index.d.ts +1 -1
  82. package/lib/blockHeader/style/index.js +1 -1
  83. package/lib/blockHeader/style/index.less +8 -7
  84. package/lib/button/style/index.less +60 -46
  85. package/lib/button/style/mixin.less +47 -0
  86. package/lib/collapsible/index.d.ts +97 -0
  87. package/lib/collapsible/index.js +199 -0
  88. package/lib/collapsible/style/index.d.ts +1 -0
  89. package/lib/collapsible/style/index.js +3 -0
  90. package/lib/collapsible/style/index.less +24 -0
  91. package/lib/collapsibleActionItems/index.d.ts +24 -0
  92. package/lib/collapsibleActionItems/index.js +68 -0
  93. package/lib/collapsibleActionItems/style/index.d.ts +2 -0
  94. package/lib/collapsibleActionItems/style/index.js +4 -0
  95. package/lib/collapsibleActionItems/style/index.less +7 -0
  96. package/lib/flex/index.d.ts +7 -0
  97. package/lib/flex/index.js +60 -0
  98. package/lib/flex/interface.d.ts +16 -0
  99. package/lib/flex/interface.js +5 -0
  100. package/lib/flex/style/index.d.ts +2 -0
  101. package/lib/flex/style/index.js +4 -0
  102. package/lib/flex/style/index.less +77 -0
  103. package/lib/flex/utils.d.ts +7 -0
  104. package/lib/flex/utils.js +39 -0
  105. package/lib/index.d.ts +9 -0
  106. package/lib/index.js +65 -0
  107. package/lib/resize/index.d.ts +8 -0
  108. package/lib/resize/index.js +38 -0
  109. package/lib/splitter/Panel.d.ts +7 -0
  110. package/lib/splitter/Panel.js +44 -0
  111. package/lib/splitter/SplitBar.d.ts +24 -0
  112. package/lib/splitter/SplitBar.js +179 -0
  113. package/lib/splitter/Splitter.d.ts +5 -0
  114. package/lib/splitter/Splitter.js +202 -0
  115. package/lib/splitter/hooks/sizeUtil.d.ts +3 -0
  116. package/lib/splitter/hooks/sizeUtil.js +56 -0
  117. package/lib/splitter/hooks/useItems.d.ts +14 -0
  118. package/lib/splitter/hooks/useItems.js +46 -0
  119. package/lib/splitter/hooks/useResizable.d.ts +10 -0
  120. package/lib/splitter/hooks/useResizable.js +83 -0
  121. package/lib/splitter/hooks/useResize.d.ts +6 -0
  122. package/lib/splitter/hooks/useResize.js +142 -0
  123. package/lib/splitter/hooks/useSizes.d.ts +4 -0
  124. package/lib/splitter/hooks/useSizes.js +62 -0
  125. package/lib/splitter/index.d.ts +8 -0
  126. package/lib/splitter/index.js +12 -0
  127. package/lib/splitter/interface.d.ts +68 -0
  128. package/lib/splitter/interface.js +5 -0
  129. package/lib/splitter/style/index.d.ts +2 -0
  130. package/lib/splitter/style/index.js +4 -0
  131. package/lib/splitter/style/index.less +312 -0
  132. package/lib/statusTag/index.d.ts +28 -0
  133. package/lib/statusTag/index.js +125 -0
  134. package/lib/statusTag/style/index.d.ts +2 -0
  135. package/lib/statusTag/style/index.js +4 -0
  136. package/lib/statusTag/style/index.less +70 -0
  137. package/lib/statusTag/style/mixin.less +39 -0
  138. package/lib/style/mixins/index.less +0 -0
  139. package/lib/style/themes/index.less +2 -1
  140. package/lib/style/themes/variable.less +1 -0
  141. package/package.json +142 -141
@@ -0,0 +1,312 @@
1
+ @import '../../style/themes/index.less';
2
+
3
+ @splitter-prefix-cls: ~'@{ant-prefix}-splitter';
4
+
5
+ @splitter-resize-spinner-size: 20px;
6
+ @splitter-split-bar-draggable-size: @splitter-resize-spinner-size;
7
+ @splitter-split-bar-size: 2px;
8
+ @splitter-split-trigger-size: 6px;
9
+
10
+ @splitterBarPreviewOffsetVar: ~'@{splitter-prefix-cls}-bar-preview-offset';
11
+ @splitter-transform-x: ~'translateX(var(--@{splitterBarPreviewOffsetVar}))';
12
+ @splitter-transform-y: ~'translateY(var(--@{splitterBarPreviewOffsetVar}))';
13
+
14
+ .center-position() {
15
+ position: absolute;
16
+ top: 50%;
17
+ left: 50%;
18
+ transform: translate(-50%, -50%);
19
+ }
20
+
21
+ .@{splitter-prefix-cls} {
22
+ display: flex;
23
+ width: 100%;
24
+ height: 100%;
25
+ align-items: stretch;
26
+
27
+ & > .@{splitter-prefix-cls}-bar {
28
+ flex: none;
29
+ position: relative;
30
+ user-select: none;
31
+
32
+ .@{splitter-prefix-cls}-bar-dragger {
33
+ .center-position();
34
+ z-index: 1;
35
+ pointer-events: auto;
36
+
37
+ &::before {
38
+ content: '';
39
+ background: @item-hover-bg;
40
+ .center-position();
41
+ }
42
+
43
+ &::after {
44
+ content: '';
45
+ background: rgba(0, 0, 0, 0.15);
46
+ .center-position();
47
+ }
48
+
49
+ &:hover:not(.@{splitter-prefix-cls}-bar-dragger-active) {
50
+ &::before {
51
+ background: @item-active-bg;
52
+ }
53
+ }
54
+
55
+ &.@{splitter-prefix-cls}-bar-dragger-active {
56
+ z-index: 2;
57
+
58
+ &::before {
59
+ background: @item-active-bg;
60
+ }
61
+ }
62
+
63
+ &.@{splitter-prefix-cls}-bar-dragger-disabled {
64
+ z-index: 0;
65
+ cursor: default;
66
+
67
+ &,
68
+ &:hover,
69
+ &.@{splitter-prefix-cls}-bar-dragger-active {
70
+ &::before {
71
+ background: @disabled-bg;
72
+ }
73
+ }
74
+
75
+ &::after {
76
+ display: none;
77
+ }
78
+ }
79
+ }
80
+
81
+ .@{splitter-prefix-cls}-bar-collapse-bar {
82
+ .center-position();
83
+ z-index: @zindex-popover;
84
+ background: @item-hover-bg;
85
+ font-size: @font-size-base;
86
+ border-radius: @border-radius-base;
87
+ color: @text-color;
88
+ cursor: pointer;
89
+ opacity: 0;
90
+ display: flex;
91
+ align-items: center;
92
+ justify-content: center;
93
+
94
+ &:hover {
95
+ background: @item-active-bg;
96
+ }
97
+
98
+ &:active {
99
+ background: @item-active-bg;
100
+ }
101
+ }
102
+
103
+ &:hover,
104
+ &:active {
105
+ .@{splitter-prefix-cls}-bar-collapse-bar-hover-only {
106
+ opacity: 1;
107
+ }
108
+ }
109
+
110
+ .@{splitter-prefix-cls}-bar-collapse-bar-hover-only {
111
+ @media (hover: none) {
112
+ opacity: 1;
113
+ }
114
+ }
115
+
116
+ .@{splitter-prefix-cls}-bar-collapse-bar-always-hidden {
117
+ display: none;
118
+ }
119
+
120
+ .@{splitter-prefix-cls}-bar-collapse-bar-always-visible {
121
+ opacity: 1;
122
+ }
123
+ }
124
+
125
+ .@{splitter-prefix-cls}-mask {
126
+ position: fixed;
127
+ z-index: 9999;
128
+ top: 0;
129
+ right: 0;
130
+ bottom: 0;
131
+ left: 0;
132
+ background: transparent;
133
+
134
+ &.@{splitter-prefix-cls}-mask-horizontal {
135
+ cursor: col-resize;
136
+ }
137
+
138
+ &.@{splitter-prefix-cls}-mask-vertical {
139
+ cursor: row-resize;
140
+ }
141
+ }
142
+
143
+ &.@{splitter-prefix-cls}-horizontal {
144
+ flex-direction: row;
145
+
146
+ & > .@{splitter-prefix-cls}-bar {
147
+ width: 0;
148
+
149
+ .@{splitter-prefix-cls}-bar-preview {
150
+ height: 100%;
151
+ width: @splitter-split-bar-size;
152
+ position: absolute;
153
+ background: @primary-color;
154
+ opacity: 0.2;
155
+ pointer-events: none;
156
+ transition: none;
157
+ z-index: 1;
158
+ display: none;
159
+
160
+ &.@{splitter-prefix-cls}-bar-preview-active {
161
+ display: block;
162
+
163
+ transform: @splitter-transform-x;
164
+ }
165
+ }
166
+
167
+ .@{splitter-prefix-cls}-bar-dragger {
168
+ cursor: col-resize;
169
+ height: 100%;
170
+ width: @splitter-split-trigger-size;
171
+
172
+ &::before {
173
+ height: 100%;
174
+ width: @splitter-split-bar-size;
175
+ }
176
+
177
+ &::after {
178
+ height: @splitter-split-bar-draggable-size;
179
+ width: @splitter-split-bar-size;
180
+ }
181
+ }
182
+
183
+ .@{splitter-prefix-cls}-bar-collapse-bar {
184
+ width: @font-size-sm;
185
+ height: @btn-height-sm;
186
+
187
+ &.@{splitter-prefix-cls}-bar-collapse-bar-start {
188
+ left: auto;
189
+ right: (@splitter-split-trigger-size / 2);
190
+ transform: translateY(-50%);
191
+ }
192
+
193
+ &.@{splitter-prefix-cls}-bar-collapse-bar-end {
194
+ left: (@splitter-split-trigger-size / 2);
195
+ right: auto;
196
+ transform: translateY(-50%);
197
+ }
198
+ }
199
+ }
200
+ }
201
+
202
+ &.@{splitter-prefix-cls}-vertical {
203
+ flex-direction: column;
204
+
205
+ & > .@{splitter-prefix-cls}-bar {
206
+ height: 0;
207
+
208
+ .@{splitter-prefix-cls}-bar-preview {
209
+ height: @splitter-split-bar-size;
210
+ width: 100%;
211
+ position: absolute;
212
+ background: @primary-color;
213
+ opacity: 0.2;
214
+ pointer-events: none;
215
+ transition: none;
216
+ z-index: 1;
217
+ display: none;
218
+
219
+ &.@{splitter-prefix-cls}-bar-preview-active {
220
+ display: block;
221
+ transform: @splitter-transform-y;
222
+ }
223
+ }
224
+
225
+ .@{splitter-prefix-cls}-bar-dragger {
226
+ cursor: row-resize;
227
+ width: 100%;
228
+ height: @splitter-split-trigger-size;
229
+
230
+ &::before {
231
+ width: 100%;
232
+ height: @splitter-split-bar-size;
233
+ }
234
+
235
+ &::after {
236
+ width: @splitter-split-bar-draggable-size;
237
+ height: @splitter-split-bar-size;
238
+ }
239
+ }
240
+
241
+ .@{splitter-prefix-cls}-bar-collapse-bar {
242
+ height: @font-size-sm;
243
+ width: @btn-height-sm;
244
+
245
+ &.@{splitter-prefix-cls}-bar-collapse-bar-start {
246
+ top: auto;
247
+ bottom: (@splitter-split-trigger-size / 2);
248
+ transform: translateX(-50%);
249
+ }
250
+
251
+ &.@{splitter-prefix-cls}-bar-collapse-bar-end {
252
+ top: (@splitter-split-trigger-size / 2);
253
+ bottom: auto;
254
+ transform: translateX(-50%);
255
+ }
256
+ }
257
+ }
258
+ }
259
+
260
+ .@{splitter-prefix-cls}-panel {
261
+ overflow: auto;
262
+ padding: 0 1px;
263
+ box-sizing: border-box;
264
+
265
+ &::-webkit-scrollbar {
266
+ width: 8px;
267
+ height: 8px;
268
+ }
269
+
270
+ &::-webkit-scrollbar-thumb {
271
+ background: @table-sticky-scroll-bar-bg;
272
+ border-radius: @table-sticky-scroll-bar-radius;
273
+ }
274
+
275
+ &.@{splitter-prefix-cls}-panel-hidden {
276
+ padding: 0;
277
+ overflow: hidden;
278
+ }
279
+
280
+ &:has(.@{splitter-prefix-cls}:only-child) {
281
+ overflow: hidden;
282
+ }
283
+ }
284
+
285
+ &.@{ant-prefix}-rtl.@{splitter-prefix-cls}-horizontal {
286
+ & > .@{splitter-prefix-cls}-bar {
287
+ .@{splitter-prefix-cls}-bar-collapse-previous {
288
+ right: 0;
289
+ left: unset;
290
+ }
291
+
292
+ .@{splitter-prefix-cls}-bar-collapse-next {
293
+ right: unset;
294
+ left: 0;
295
+ }
296
+ }
297
+ }
298
+
299
+ &.@{ant-prefix}-rtl.@{splitter-prefix-cls}-vertical {
300
+ & > .@{splitter-prefix-cls}-bar {
301
+ .@{splitter-prefix-cls}-bar-collapse-previous {
302
+ right: 50%;
303
+ left: unset;
304
+ }
305
+
306
+ .@{splitter-prefix-cls}-bar-collapse-next {
307
+ right: 50%;
308
+ left: unset;
309
+ }
310
+ }
311
+ }
312
+ }
@@ -0,0 +1,28 @@
1
+ import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
2
+ import './style';
3
+ export declare const PRESET_COLOR_TYPES: readonly ["blue", "yellow", "green", "gray", "red", "purple", "cyan", "pink"];
4
+ export declare const STATUS_TAG_TYPES: readonly ["default", "outline", "fill"];
5
+ export declare type PresetColorType = (typeof PRESET_COLOR_TYPES)[number] | (string & {});
6
+ export declare type StatusTagType = (typeof STATUS_TAG_TYPES)[number];
7
+ export interface IStatusTagProps extends HTMLAttributes<HTMLDivElement> {
8
+ /** 状态类型 */
9
+ type?: StatusTagType;
10
+ /** 是否圆角 */
11
+ rounded?: boolean;
12
+ /** 状态颜色(支持预设值/自定义十六进制/RGB) */
13
+ color?: PresetColorType;
14
+ /** 是否加载中 */
15
+ loading?: boolean;
16
+ /** 自定义图标 */
17
+ icon?: ReactNode;
18
+ /** 背景颜色(仅fill类型生效),未设置时使用color的0.15透明度 */
19
+ background?: string;
20
+ /** 类名 */
21
+ className?: string;
22
+ /** 子节点 */
23
+ children?: ReactNode;
24
+ /** 自定义样式 */
25
+ style?: CSSProperties;
26
+ }
27
+ declare const StatusTag: React.FC<IStatusTagProps>;
28
+ export default StatusTag;
@@ -0,0 +1,122 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ var _excluded = ["className", "type", "icon", "color", "loading", "rounded", "background", "style", "children"];
3
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
7
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
8
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
9
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
10
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
11
+ import React, { useMemo } from 'react';
12
+ import { SpinOutlined } from '@dtinsight/react-icons';
13
+ import { Spin } from 'antd';
14
+ import { globalConfig } from 'antd/es/config-provider';
15
+ import classNames from 'classnames';
16
+ import "./style";
17
+ export var PRESET_COLOR_TYPES = Object.freeze(['blue', 'yellow', 'green', 'gray', 'red', 'purple', 'cyan', 'pink']);
18
+ export var STATUS_TAG_TYPES = Object.freeze(['default', 'outline', 'fill']);
19
+ var DEFAULT_OPACITY = 0.15;
20
+ /**
21
+ * 校验是否为预设颜色
22
+ * @param color 待校验颜色值
23
+ */
24
+ function isPresetColor(color) {
25
+ if (!color || typeof color !== 'string') return false;
26
+ return PRESET_COLOR_TYPES.includes(color);
27
+ }
28
+
29
+ /**
30
+ * 计算颜色的透明版本
31
+ * @param color 原始颜色(支持hex/rgb/rgba)
32
+ * @param opacity 透明度(默认0.15)
33
+ */
34
+ function calculateTransparentColor(color) {
35
+ var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_OPACITY;
36
+ if (!color) return 'rgba(0, 0, 0, 0.15)';
37
+ if (color.startsWith('rgb')) {
38
+ if (color.startsWith('rgba')) return color.replace(/,\s*[\d.]+(?=\))/, ",".concat(opacity));
39
+ return "".concat(color.slice(0, -1), ",").concat(opacity, ")");
40
+ }
41
+ var hex = color.trim().replace(/^#/, '');
42
+ if (hex.length === 3) {
43
+ hex = hex.split('').map(function (char) {
44
+ return char + char;
45
+ }).join('');
46
+ }
47
+ if (!/^[0-9A-Fa-f]{6}$/.test(hex)) return 'rgba(0, 0, 0, 0.15)';
48
+ var r = parseInt(hex.substring(0, 2), 16);
49
+ var g = parseInt(hex.substring(2, 4), 16);
50
+ var b = parseInt(hex.substring(4, 6), 16);
51
+ return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
52
+ }
53
+ var StatusTag = /*#__PURE__*/React.memo(function (props) {
54
+ var className = props.className,
55
+ _props$type = props.type,
56
+ type = _props$type === void 0 ? 'default' : _props$type,
57
+ icon = props.icon,
58
+ _props$color = props.color,
59
+ color = _props$color === void 0 ? 'green' : _props$color,
60
+ _props$loading = props.loading,
61
+ loading = _props$loading === void 0 ? false : _props$loading,
62
+ _props$rounded = props.rounded,
63
+ rounded = _props$rounded === void 0 ? false : _props$rounded,
64
+ background = props.background,
65
+ style = props.style,
66
+ children = props.children,
67
+ restProps = _objectWithoutProperties(props, _excluded);
68
+ var prefixCls = globalConfig().getPrefixCls('status-tag');
69
+ var showDefaultIcon = useMemo(function () {
70
+ return icon === undefined;
71
+ }, [icon]);
72
+ var containerClasses = useMemo(function () {
73
+ return classNames(prefixCls, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "--border"), type === 'outline'), "".concat(prefixCls, "--fill"), type === 'fill'), "".concat(prefixCls, "--rounded"), rounded), "".concat(prefixCls, "__").concat(color, "--fill"), type === 'fill' && isPresetColor(color)));
74
+ }, [className, type, color, rounded, prefixCls]);
75
+ var customColorStyle = useMemo(function () {
76
+ if (type !== 'fill' || isPresetColor(color)) return {};
77
+ return {
78
+ color: color,
79
+ background: background || calculateTransparentColor(color)
80
+ };
81
+ }, [type, color, background]);
82
+ var iconStyleConfig = useMemo(function () {
83
+ if (isPresetColor(color)) {
84
+ return {
85
+ className: classNames('anticon', _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "__").concat(color, "--icon"), true), "".concat(prefixCls, "__icon--default"), !icon), "".concat(prefixCls, "__").concat(color, "--iconBg"), !icon)),
86
+ style: {}
87
+ };
88
+ }
89
+ return {
90
+ className: classNames('anticon', _defineProperty({}, "".concat(prefixCls, "__icon--default"), !icon)),
91
+ style: {
92
+ color: icon ? color : undefined,
93
+ background: !icon ? color : undefined
94
+ }
95
+ };
96
+ }, [color, icon, prefixCls]);
97
+ var loadingIndicator = useMemo(function () {
98
+ return /*#__PURE__*/React.createElement(SpinOutlined, {
99
+ className: "".concat(prefixCls, "__icon ").concat(prefixCls, "__icon--loading")
100
+ });
101
+ }, [prefixCls]);
102
+ return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
103
+ className: containerClasses,
104
+ style: _objectSpread(_objectSpread({}, customColorStyle), style),
105
+ "aria-busy": loading
106
+ }), loading ? /*#__PURE__*/React.createElement(Spin, {
107
+ spinning: true,
108
+ indicator: loadingIndicator,
109
+ size: "small"
110
+ }) : (icon || showDefaultIcon) && /*#__PURE__*/React.createElement("div", {
111
+ className: "".concat(prefixCls, "__icon")
112
+ }, /*#__PURE__*/React.createElement("span", {
113
+ className: iconStyleConfig.className,
114
+ style: iconStyleConfig.style
115
+ }, icon !== null && icon !== void 0 ? icon : null)), children && /*#__PURE__*/React.createElement("span", {
116
+ className: "".concat(prefixCls, "__text")
117
+ }, children));
118
+ });
119
+ if (process.env.NODE_ENV !== 'production') {
120
+ StatusTag.displayName = 'StatusTag';
121
+ }
122
+ export default StatusTag;
@@ -0,0 +1,2 @@
1
+ import '../../style/index.less';
2
+ import './index.less';
@@ -0,0 +1,2 @@
1
+ import "../../style/index.less";
2
+ import "./index.less";
@@ -0,0 +1,70 @@
1
+ @import '../../style/themes/index.less';
2
+ @import './mixin.less';
3
+ @import './mixin.less';
4
+
5
+ @status-tag-prefix-cls: ~'@{ant-prefix}-status-tag';
6
+
7
+ @keyframes spin {
8
+ from {
9
+ transform: rotate(0deg);
10
+ }
11
+ to {
12
+ transform: rotate(360deg);
13
+ }
14
+ }
15
+
16
+ // 主选择器
17
+ .@{status-tag-prefix-cls} {
18
+ display: flex;
19
+ align-items: center;
20
+ width: fit-content;
21
+ height: 24px;
22
+ font-size: 12px;
23
+ color: #3d446e;
24
+
25
+ .ant-spin {
26
+ font-size: 14px; // 修复 antd 字体居中问题
27
+ }
28
+
29
+ &--border {
30
+ padding: 2px 12px;
31
+ border: 1px solid #d8dae2;
32
+ background-color: #fff;
33
+ }
34
+
35
+ &--fill {
36
+ padding: 2px 12px;
37
+ }
38
+
39
+ &--rounded {
40
+ border-radius: 14px;
41
+ }
42
+
43
+ &__icon {
44
+ display: flex;
45
+ align-items: center;
46
+ font-size: 16px;
47
+ margin-right: 8px;
48
+
49
+ &--default {
50
+ display: inline-block;
51
+ width: 6px;
52
+ height: 6px;
53
+ border-radius: 50%;
54
+ }
55
+
56
+ &--loading {
57
+ animation: spin 1s linear infinite;
58
+ }
59
+ }
60
+
61
+ &__text {
62
+ font-size: 12px;
63
+ font-weight: 400;
64
+ line-height: 22px;
65
+ white-space: nowrap;
66
+ }
67
+
68
+ // 调用颜色映射 Mixin,生成所有颜色的样式
69
+ .color-map();
70
+ }
@@ -0,0 +1,39 @@
1
+ .status-color(@color, @bg) {
2
+ &--icon {
3
+ color: @color;
4
+ }
5
+ &--fill {
6
+ color: @color;
7
+ background-color: @bg;
8
+ }
9
+ &--iconBg {
10
+ background: @color;
11
+ }
12
+ }
13
+
14
+ .color-map() {
15
+ &__yellow {
16
+ .status-color(#FBB310, #FFF4D9);
17
+ }
18
+ &__blue {
19
+ .status-color(#1d78ff, #E8F1FF);
20
+ }
21
+ &__green {
22
+ .status-color(#11d782, #E7FBF7);
23
+ }
24
+ &__gray {
25
+ .status-color(#B1B4C5, #F5F5F8);
26
+ }
27
+ &__red {
28
+ .status-color(#F96C5B, #FDE9E7);
29
+ }
30
+ &__purple {
31
+ .status-color(#AC9DFF, #EAE6FF);
32
+ }
33
+ &__cyan {
34
+ .status-color(#2cccdf, #E7F8FA);
35
+ }
36
+ &__pink {
37
+ .status-color(#FF82AE, #FFE6EF);
38
+ }
39
+ }
File without changes
@@ -1 +1,2 @@
1
- @import "~antd/es/style/themes/default.less";
1
+ @import '~antd/es/style/themes/default.less';
2
+ @import './variable.less';
@@ -0,0 +1 @@
1
+ @primary-color-disabled: #f3f3f3;
@@ -0,0 +1,3 @@
1
+ import { SizeType } from 'antd/es/config-provider/SizeContext';
2
+ export declare function isPresetSize(size?: SizeType | string | number): size is SizeType;
3
+ export declare function isValidGapNumber(size?: SizeType | string | number): size is number;
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.isPresetSize = isPresetSize;
7
+ exports.isValidGapNumber = isValidGapNumber;
8
+ function isPresetSize(size) {
9
+ return ['small', 'middle', 'large'].includes(size);
10
+ }
11
+ function isValidGapNumber(size) {
12
+ if (!size) {
13
+ // The case of size = 0 is deliberately excluded here, because the default value of the gap attribute in CSS is 0, so if the user passes 0 in, we can directly ignore it.
14
+ return false;
15
+ }
16
+ return typeof size === 'number' && !Number.isNaN(size);
17
+ }
@@ -0,0 +1 @@
1
+ export * from './useOrientation';
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _useOrientation = require("./useOrientation");
7
+ Object.keys(_useOrientation).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _useOrientation[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _useOrientation[key];
14
+ }
15
+ });
16
+ });
@@ -0,0 +1,2 @@
1
+ export declare type Orientation = 'horizontal' | 'vertical';
2
+ export declare const useOrientation: (orientation?: Orientation, vertical?: boolean, legacyDirection?: Orientation) => [Orientation, boolean];
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useOrientation = void 0;
7
+ var _react = require("react");
8
+ const isValidOrientation = orientation => {
9
+ return orientation === 'horizontal' || orientation === 'vertical';
10
+ };
11
+ const useOrientation = (orientation, vertical, legacyDirection) => {
12
+ return (0, _react.useMemo)(() => {
13
+ const validOrientation = isValidOrientation(orientation);
14
+ let mergedOrientation;
15
+ if (validOrientation) {
16
+ mergedOrientation = orientation || 'horizontal';
17
+ } else if (typeof vertical === 'boolean') {
18
+ mergedOrientation = vertical ? 'vertical' : 'horizontal';
19
+ } else {
20
+ const validLegacyDirection = isValidOrientation(legacyDirection);
21
+ mergedOrientation = validLegacyDirection ? legacyDirection || 'horizontal' : 'horizontal';
22
+ }
23
+ return [mergedOrientation, mergedOrientation === 'vertical'];
24
+ }, [legacyDirection, orientation, vertical]);
25
+ };
26
+ exports.useOrientation = useOrientation;
@@ -0,0 +1,2 @@
1
+ declare const isNonNullable: <T>(val: T) => val is NonNullable<T>;
2
+ export default isNonNullable;
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ const isNonNullable = val => {
8
+ return val !== undefined && val !== null;
9
+ };
10
+ var _default = exports.default = isNonNullable;