dcp-design-react 1.12.19 → 1.12.21

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.
@@ -130,6 +130,3 @@ table {
130
130
  -webkit-font-smoothing: antialiased;
131
131
  -moz-osx-font-smoothing: grayscale;
132
132
  }
133
- body {
134
- font-family: @--font-family;
135
- }
@@ -1,119 +1,114 @@
1
- /*
2
- * @Author: 焦质晔
3
- * @Date: 2021-07-23 18:25:34
4
- * @Last Modified by: 焦质晔
5
- * @Last Modified time: 2024-10-29 14:59:55
6
- */
7
- // The prefix to use on all css classes.
8
- @qm-prefix: qm;
9
-
10
- // An override for the html selector for theme prefixes
11
- @--html-selector: html;
12
-
13
- // -------- Colors -----------
14
- @--primary-color: #1890ff;
15
-
16
- @--info-color: @--primary-color;
17
- @--success-color: #52c41a;
18
- @--error-color: #ff4d4f;
19
- @--warning-color: #faad14;
20
- @--normal-color: #d9d9d9;
21
- @--white: #fff;
22
- @--black: #000;
23
-
24
- // Color used by default to control hover and active backgrounds and for
25
- // colorPalette from antd/lib/style/color/colorPalette
26
- @--primary-1: color(~`colorPalette('@{--primary-color}', 1) `);
27
- @--primary-2: color(~`colorPalette('@{--primary-color}', 2) `);
28
- @--primary-3: color(~`colorPalette('@{--primary-color}', 3) `);
29
- @--primary-4: color(~`colorPalette('@{--primary-color}', 4) `);
30
- @--primary-5: color(~`colorPalette('@{--primary-color}', 5) `);
31
- @--primary-6: @--primary-color;
32
- @--primary-7: color(~`colorPalette('@{--primary-color}', 7) `);
33
- @--primary-8: color(~`colorPalette('@{--primary-color}', 8) `);
34
- @--primary-9: color(~`colorPalette('@{--primary-color}', 9) `);
35
- @--primary-10: color(~`colorPalette('@{--primary-color}', 10) `);
36
-
37
- // Background color for `<body>`
38
- @--body-background: @--white;
39
- // Base background color for most components
40
- @--component-background: @--white;
41
- // Popover background color
42
- @--popover-background: @--component-background;
43
-
44
- // Background-color
45
- @--background-color: #f2f2f2;
46
- @--background-color-light: #f5f5f5;
47
-
48
- // Font-family
49
- @--font-family: LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma, 'PingFang SC',
50
- 'Microsoft Yahei', Arial, 'Hiragino Sans GB', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
51
- @--font-path: './fonts';
52
-
53
- // Text color
54
- @--text-color: fade(@--black, 85%);
55
- @--text-color-secondary: fade(@--black, 65%);
56
- @--text-color-placeholder: fade(@--black, 45%);
57
- @--header-color: fade(@--black, 85%);
58
-
59
- // Iconfont
60
- @--icon-color: @--text-color-secondary;
61
-
62
- // Disabled color
63
- @--disabled-color: fade(@--black, 25%);
64
- @--disabled-bg: @--background-color;
65
-
66
- // Font-size
67
- @--font-size-base: 14px;
68
- @--font-size-lg: @--font-size-base + 2px;
69
- @--font-size-sm: 12px;
70
-
71
- // Line-height
72
- @--line-height-base: 1.5715;
73
-
74
- // Border
75
- @--border-color-base: #d9d9d9;
76
- @--border-color-secondary: #e8e8e8;
77
- @--border-width-base: 1px;
78
- @--border-style-base: solid;
79
- @--border-radius-base: 2px;
80
- @--border-radius-lg: @--border-radius-base + 2px;
81
- @--border-radius-sm: @--border-radius-base;
82
-
83
- // Outline
84
- @--outline-width: 2px;
85
- @--outline-color: @--primary-color;
86
- @--error-color-outline: fade(@--error-color, 20%);
87
-
88
- // Vertical paddings
89
- @--padding-lg: 12px;
90
- @--padding-md: 10px;
91
- @--padding-sm: 8px;
92
-
93
- // Vertical margins
94
- @--margin-lg: 12px;
95
- @--margin-md: 10px;
96
- @--margin-sm: 8px;
97
-
98
- // Height rules
99
- @--height-lg: 40px;
100
- @--height-md: 32px;
101
- @--height-sm: 24px;
102
-
103
- // Link
104
- @--link-color: @--primary-color;
105
- @--link-hover-color: @--primary-5;
106
- @--link-active-color: @--primary-7;
107
-
108
- // Shadow
109
- @--shadow-color: fade(@--black, 0.15);
110
- @--shadow-1-up: 0 -2px 8px @--shadow-color;
111
- @--shadow-1-down: 0 2px 8px @--shadow-color;
112
- @--shadow-1-left: -2px 0 8px @--shadow-color;
113
- @--shadow-1-right: 2px 0 8px @--shadow-color;
114
- @--box-shadow-base: @--shadow-1-down;
115
-
116
- // antd
117
- @blue-base: @--primary-color;
118
- @input-disabled-color: @--text-color-secondary;
119
- @border-radius-base: @--border-radius-base;
1
+ /*
2
+ * @Author: 焦质晔
3
+ * @Date: 2021-07-23 18:25:34
4
+ * @Last Modified by: 焦质晔
5
+ * @Last Modified time: 2024-10-29 14:59:55
6
+ */
7
+ // The prefix to use on all css classes.
8
+ @qm-prefix: qm;
9
+
10
+ // An override for the html selector for theme prefixes
11
+ @--html-selector: html;
12
+
13
+ // -------- Colors -----------
14
+ @--primary-color: #1890ff;
15
+
16
+ @--info-color: @--primary-color;
17
+ @--success-color: #52c41a;
18
+ @--error-color: #ff4d4f;
19
+ @--warning-color: #faad14;
20
+ @--normal-color: #d9d9d9;
21
+ @--white: #fff;
22
+ @--black: #000;
23
+
24
+ // Color used by default to control hover and active backgrounds and for
25
+ // colorPalette from antd/lib/style/color/colorPalette
26
+ @--primary-1: color(~`colorPalette('@{--primary-color}', 1) `);
27
+ @--primary-2: color(~`colorPalette('@{--primary-color}', 2) `);
28
+ @--primary-3: color(~`colorPalette('@{--primary-color}', 3) `);
29
+ @--primary-4: color(~`colorPalette('@{--primary-color}', 4) `);
30
+ @--primary-5: color(~`colorPalette('@{--primary-color}', 5) `);
31
+ @--primary-6: @--primary-color;
32
+ @--primary-7: color(~`colorPalette('@{--primary-color}', 7) `);
33
+ @--primary-8: color(~`colorPalette('@{--primary-color}', 8) `);
34
+ @--primary-9: color(~`colorPalette('@{--primary-color}', 9) `);
35
+ @--primary-10: color(~`colorPalette('@{--primary-color}', 10) `);
36
+
37
+ // Background color for `<body>`
38
+ @--body-background: @--white;
39
+ // Base background color for most components
40
+ @--component-background: @--white;
41
+ // Popover background color
42
+ @--popover-background: @--component-background;
43
+
44
+ // Background-color
45
+ @--background-color: #f2f2f2;
46
+ @--background-color-light: #f5f5f5;
47
+
48
+ // Text color
49
+ @--text-color: fade(@--black, 85%);
50
+ @--text-color-secondary: fade(@--black, 65%);
51
+ @--text-color-placeholder: fade(@--black, 45%);
52
+ @--header-color: fade(@--black, 85%);
53
+
54
+ // Iconfont
55
+ @--icon-color: @--text-color-secondary;
56
+
57
+ // Disabled color
58
+ @--disabled-color: fade(@--black, 25%);
59
+ @--disabled-bg: @--background-color;
60
+
61
+ // Font-size
62
+ @--font-size-base: 14px;
63
+ @--font-size-lg: @--font-size-base + 2px;
64
+ @--font-size-sm: 12px;
65
+
66
+ // Line-height
67
+ @--line-height-base: 1.5715;
68
+
69
+ // Border
70
+ @--border-color-base: #d9d9d9;
71
+ @--border-color-secondary: #e8e8e8;
72
+ @--border-width-base: 1px;
73
+ @--border-style-base: solid;
74
+ @--border-radius-base: 2px;
75
+ @--border-radius-lg: @--border-radius-base + 2px;
76
+ @--border-radius-sm: @--border-radius-base;
77
+
78
+ // Outline
79
+ @--outline-width: 2px;
80
+ @--outline-color: @--primary-color;
81
+ @--error-color-outline: fade(@--error-color, 20%);
82
+
83
+ // Vertical paddings
84
+ @--padding-lg: 12px;
85
+ @--padding-md: 10px;
86
+ @--padding-sm: 8px;
87
+
88
+ // Vertical margins
89
+ @--margin-lg: 12px;
90
+ @--margin-md: 10px;
91
+ @--margin-sm: 8px;
92
+
93
+ // Height rules
94
+ @--height-lg: 40px;
95
+ @--height-md: 32px;
96
+ @--height-sm: 24px;
97
+
98
+ // Link
99
+ @--link-color: @--primary-color;
100
+ @--link-hover-color: @--primary-5;
101
+ @--link-active-color: @--primary-7;
102
+
103
+ // Shadow
104
+ @--shadow-color: fade(@--black, 0.15);
105
+ @--shadow-1-up: 0 -2px 8px @--shadow-color;
106
+ @--shadow-1-down: 0 2px 8px @--shadow-color;
107
+ @--shadow-1-left: -2px 0 8px @--shadow-color;
108
+ @--shadow-1-right: 2px 0 8px @--shadow-color;
109
+ @--box-shadow-base: @--shadow-1-down;
110
+
111
+ // antd
112
+ @blue-base: @--primary-color;
113
+ @input-disabled-color: @--text-color-secondary;
114
+ @border-radius-base: @--border-radius-base;
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import type { IColumn } from '../table/types';
3
3
  type IDefineProps = {
4
- columns: IColumn[];
5
- onChange: (columns: IColumn[]) => void;
4
+ value?: IColumn[];
5
+ onChange?: (columns: IColumn[]) => void;
6
6
  };
7
7
  declare const Define: React.FC<IDefineProps>;
8
8
  export default Define;
@@ -11,7 +11,7 @@ declare const useTableVirtual: (tableFlatData: IRecord[], tableFlatColumns: ICol
11
11
  virtualTranslateX: () => number;
12
12
  calcVirtualYSize: () => number | "";
13
13
  calcVirtualXSize: () => number | "";
14
- scrollToYIndex: (index: number) => void;
15
- scrollToXIndex: (index: number) => void;
14
+ scrollToYIndex: (index: number, align?: 'start' | 'auto') => void;
15
+ scrollToXIndex: (index: number, align?: 'start' | 'auto') => void;
16
16
  };
17
17
  export default useTableVirtual;
@@ -474,7 +474,7 @@ export type TableBodyRef = {
474
474
  createFocus: (rowKey: IRowKey, dataIndex: string) => void;
475
475
  forceUpdate: () => void;
476
476
  resetItemXSize: (columns: IColumn[]) => void;
477
- scrollToYIndex: (index: number) => void;
477
+ scrollToYIndex: (index: number, align?: 'start' | 'auto') => void;
478
478
  };
479
479
  export type ColumnDefineRef = {
480
480
  initialHandler: (columns?: IColumn[]) => void;
@@ -1,105 +1,101 @@
1
- /*
2
- * @Author: 焦质晔
3
- * @Date: 2020-02-28 22:13:54
4
- * @Last Modified by: 焦质晔
5
- * @Last Modified time: 2024-12-01 18:48:00
6
- */
7
- .body--row {
8
- // position: sticky; // 解决列固定快读滚动时,非固定列上下留白卡顿问题(chrome 135~137),138版本后已修复
9
- &-draggable {
10
- position: relative;
11
- .drop-indicator {
12
- position: absolute;
13
- right: 0;
14
- bottom: 0;
15
- z-index: 5;
16
- height: 2px;
17
- background-color: @v-primary-color;
18
- border-radius: 1px;
19
- pointer-events: none;
20
- &::after {
21
- position: absolute;
22
- top: -3px;
23
- left: 0;
24
- width: 8px;
25
- height: 8px;
26
- background-color: #fff;
27
- border: 2px solid @v-primary-color;
28
- border-radius: 50%;
29
- content: '';
30
- }
31
- }
32
- }
33
- }
34
- .body--column {
35
- .cell--edit {
36
- margin: 0 -1 * (@v-module-distance - 1px);
37
- // placeholder
38
- input::placeholder {
39
- text-align: left;
40
- }
41
- // search
42
- .ant-input-search {
43
- width: calc(100% + 1px);
44
- & > .ant-input-group > .ant-input-group-addon {
45
- line-height: 1;
46
- }
47
- }
48
- // search-helper-multiple
49
- .search-helper-multiple {
50
- .ant-input-group > .ant-select:first-child {
51
- z-index: 1;
52
- .ant-select-selector {
53
- border-top-right-radius: 0;
54
- border-bottom-right-radius: 0;
55
- }
56
- }
57
- .ant-select-multiple {
58
- .ant-select-selection-overflow-item-rest {
59
- pointer-events: none;
60
- }
61
- }
62
- }
63
- // textArea
64
- textarea[class='ant-input'] {
65
- resize: none;
66
- }
67
- &.is-error {
68
- position: relative;
69
- .ant-input,
70
- .ant-input-affix-wrapper,
71
- .ant-select > .ant-select-selector {
72
- border-color: @v-danger-color;
73
- box-shadow: none;
74
- z-index: 1;
75
- }
76
- .ant-input-search {
77
- & + .cell-error {
78
- right: 38px;
79
- }
80
- }
81
- .cell-error {
82
- position: absolute;
83
- top: calc(50% - 9px);
84
- font-size: @v-font-size-small;
85
- color: @v-danger-color;
86
- right: 8px;
87
- pointer-events: none;
88
- z-index: 1;
89
- }
90
- }
91
- }
92
- &.col--center {
93
- .cell--edit .ant-input {
94
- text-align: center;
95
- }
96
- }
97
- &.col--right {
98
- .cell--edit .ant-input {
99
- text-align: right;
100
- }
101
- }
102
- &.selected {
103
- background-color: @v-table-row-selected-background-color !important;
104
- }
105
- }
1
+ /*
2
+ * @Author: 焦质晔
3
+ * @Date: 2020-02-28 22:13:54
4
+ * @Last Modified by: 焦质晔
5
+ * @Last Modified time: 2024-12-01 18:48:00
6
+ */
7
+ .body--row {
8
+ // position: sticky; // 解决列固定快读滚动时,非固定列上下留白卡顿问题(chrome 135~137),138版本后已修复
9
+ &-draggable {
10
+ position: relative;
11
+ .drop-indicator {
12
+ position: absolute;
13
+ right: 0;
14
+ bottom: 0;
15
+ z-index: 5;
16
+ height: 2px;
17
+ background-color: @v-primary-color;
18
+ border-radius: 1px;
19
+ pointer-events: none;
20
+ &::after {
21
+ position: absolute;
22
+ top: -3px;
23
+ left: 0;
24
+ width: 8px;
25
+ height: 8px;
26
+ background-color: #fff;
27
+ border: 2px solid @v-primary-color;
28
+ border-radius: 50%;
29
+ content: '';
30
+ }
31
+ }
32
+ }
33
+ }
34
+ .body--column {
35
+ .cell--edit {
36
+ margin: 0 -1 * (@v-module-distance - 1px);
37
+ // placeholder
38
+ input::placeholder {
39
+ text-align: left;
40
+ }
41
+ // search
42
+ .ant-input-search {
43
+ width: calc(100% + 1px);
44
+ & > .ant-input-group > .ant-input-group-addon {
45
+ line-height: 1;
46
+ }
47
+ }
48
+ // search-helper-multiple
49
+ .search-helper-multiple {
50
+ .ant-input-group > .ant-select:first-child {
51
+ z-index: 1;
52
+ .ant-select-selector {
53
+ border-top-right-radius: 0;
54
+ border-bottom-right-radius: 0;
55
+ }
56
+ }
57
+ .ant-select-multiple {
58
+ .ant-select-selection-overflow-item-rest {
59
+ pointer-events: none;
60
+ }
61
+ }
62
+ }
63
+ // textArea
64
+ textarea[class='ant-input'] {
65
+ resize: none;
66
+ }
67
+ &.is-error {
68
+ .ant-input,
69
+ .ant-input-affix-wrapper,
70
+ .ant-select > .ant-select-selector {
71
+ border-color: @v-danger-color;
72
+ box-shadow: none;
73
+ z-index: 1;
74
+ }
75
+ .cell-error {
76
+ content: ' ';
77
+ position: absolute;
78
+ z-index: 2;
79
+ top: 0;
80
+ left: 0;
81
+ width: 0;
82
+ height: 0;
83
+ border-top: 12px solid @v-danger-color;
84
+ border-right: 12px solid rgba(0, 0, 0, 0);
85
+ }
86
+ }
87
+ }
88
+ &.col--center {
89
+ .cell--edit .ant-input {
90
+ text-align: center;
91
+ }
92
+ }
93
+ &.col--right {
94
+ .cell--edit .ant-input {
95
+ text-align: right;
96
+ }
97
+ }
98
+ &.selected {
99
+ background-color: @v-table-row-selected-background-color !important;
100
+ }
101
+ }
@@ -181,14 +181,14 @@
181
181
  }
182
182
  .cell--sign {
183
183
  content: ' ';
184
- top: -5px;
185
- left: -5px;
186
184
  position: absolute;
187
185
  z-index: 1;
188
- border-width: 5px;
189
- border-style: solid;
190
- border-color: transparent @v-primary-color transparent transparent;
191
- transform: rotate(45deg);
186
+ top: 0;
187
+ left: 0;
188
+ width: 0;
189
+ height: 0;
190
+ border-top: 6px solid @v-primary-color;
191
+ border-right: 6px solid rgba(0, 0, 0, 0);
192
192
  pointer-events: none;
193
193
  }
194
194
  .is-cell-bg {
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { type Virtualizer } from './useVirtual';
2
+ import { type Virtualizer, type ScrollToOptions } from './useVirtual';
3
3
  import type { IRecord } from '../../table/src/table/types';
4
4
  type IProps = {
5
5
  height?: number;
@@ -13,8 +13,8 @@ type IProps = {
13
13
  };
14
14
  export type VirtualListProps = IProps;
15
15
  export type VirtualListRef = {
16
- SCROLL_TO_INDEX: (index: number) => void;
17
- SCROLL_TO_OFFSET: (offset: number) => void;
16
+ SCROLL_TO_INDEX: (index: number, option?: ScrollToOptions) => void;
17
+ SCROLL_TO_OFFSET: (offset: number, option?: ScrollToOptions) => void;
18
18
  };
19
19
  declare const VirtualList: React.ForwardRefExoticComponent<IProps & React.RefAttributes<VirtualListRef>>;
20
20
  export default VirtualList;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dcp-design-react",
3
- "version": "1.12.19",
3
+ "version": "1.12.21",
4
4
  "description": "A Component Library for React",
5
5
  "keywords": [
6
6
  "React",