@gmfe/react 2.13.0-beta.6 → 2.14.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gmfe/react",
3
- "version": "2.13.0-beta.6",
3
+ "version": "2.14.0",
4
4
  "description": "",
5
5
  "author": "liyatang <liyatang@qq.com>",
6
6
  "homepage": "https://github.com/gmfe/gmfe#readme",
@@ -27,7 +27,7 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@gm-common/tool": "^1.0.0",
30
- "@gmfe/locales": "^2.13.0-beta.6",
30
+ "@gmfe/locales": "^2.14.0",
31
31
  "big.js": "^5.2.2",
32
32
  "classnames": "^2.2.5",
33
33
  "lodash": "^4.17.14",
@@ -35,5 +35,5 @@
35
35
  "prop-types": "^15.7.2",
36
36
  "react-window": "^1.8.5"
37
37
  },
38
- "gitHead": "96f27c0dc6eada975c783069453287761eef64eb"
38
+ "gitHead": "265a37a2d09f4bf43412f667d8f6c8ec60c6e0de"
39
39
  }
@@ -31,7 +31,8 @@ class Base extends React.Component {
31
31
  searchValue: '',
32
32
  loading: false,
33
33
  // keyboard 默认第一个位置
34
- willActiveIndex: props.isKeyboard ? 0 : null
34
+ willActiveIndex: props.isKeyboard ? 0 : null,
35
+ _style: {}
35
36
  }
36
37
 
37
38
  // 要后于 this.state 执行,因为 getFilterData 用到 searchValue
@@ -72,6 +73,12 @@ class Base extends React.Component {
72
73
  }
73
74
  }
74
75
 
76
+ componentDidMount() {
77
+ const dom = findDOMNode(this)
78
+ const _style = { width: dom.offsetWidth }
79
+ this.setState({ _style })
80
+ }
81
+
75
82
  componentWillUnmount() {
76
83
  this._isUnmounted = true
77
84
  }
@@ -309,6 +316,8 @@ class Base extends React.Component {
309
316
  children
310
317
  } = this.props
311
318
 
319
+ const { _style } = this.state
320
+
312
321
  return (
313
322
  <div
314
323
  ref={this.ref}
@@ -320,7 +329,7 @@ class Base extends React.Component {
320
329
  },
321
330
  className
322
331
  )}
323
- style={style}
332
+ style={{ ..._style, ...style }}
324
333
  >
325
334
  <Popover
326
335
  ref={this.popoverRef}
@@ -1,5 +1,6 @@
1
1
  .gm-more-select {
2
2
  .gm-more-select-selected {
3
+ width: 100%;
3
4
  cursor: pointer;
4
5
  vertical-align: middle;
5
6
  position: relative;
@@ -11,6 +12,11 @@
11
12
  overflow: hidden;
12
13
  white-space: nowrap;
13
14
 
15
+ .gm-more-select-selected-item {
16
+ width: 100%;
17
+ overflow: hidden;
18
+ }
19
+
14
20
  &.gm-popover-active {
15
21
  border-color: @brand-primary;
16
22
  }
@@ -13,6 +13,7 @@ const PopupContentConfirm = props => {
13
13
  onSave,
14
14
  className,
15
15
  children,
16
+ hideClose,
16
17
  ...rest
17
18
  } = props
18
19
 
@@ -23,9 +24,9 @@ const PopupContentConfirm = props => {
23
24
  >
24
25
  <div className='gm-popup-content-confirm-title-wrap'>
25
26
  <div className='gm-popup-content-confirm-title'>{title}</div>
26
- <div className='gm-popup-content-confirm-close' onClick={onCancel}>
27
+ {!hideClose && <div className='gm-popup-content-confirm-close' onClick={onCancel}>
27
28
  <SVGRemove />
28
- </div>
29
+ </div>}
29
30
  </div>
30
31
  <div className='gm-popup-content-confirm-content'>
31
32
  {children}
@@ -55,6 +56,7 @@ PopupContentConfirm.propTypes = {
55
56
  onDelete: PropTypes.func,
56
57
  onSave: PropTypes.func,
57
58
  className: PropTypes.string,
59
+ hideClose: PropTypes.bool,
58
60
  style: PropTypes.object
59
61
  }
60
62
 
@@ -21,9 +21,11 @@ class Box extends React.Component {
21
21
  }
22
22
 
23
23
  handleSelectAll = checked => {
24
- const { list, onSelect } = this.props
24
+ const { onSelect } = this.props
25
25
 
26
- onSelect(checked.length === 0 ? [] : _.map(list, v => v.value))
26
+ onSelect(
27
+ checked.length === 0 ? [] : _.map(this.getProcessList(), v => v.value)
28
+ )
27
29
  }
28
30
 
29
31
  handleQuery = e => {
@@ -32,9 +34,18 @@ class Box extends React.Component {
32
34
  })
33
35
  }
34
36
 
37
+ getProcessList = () => {
38
+ const { list, withFilter } = this.props
39
+ const { query } = this.state
40
+ if (withFilter === true) {
41
+ return pinYinFilter(list, query, e => e.name)
42
+ } else if (withFilter) {
43
+ return withFilter(list, query)
44
+ }
45
+ }
46
+
35
47
  render() {
36
48
  const {
37
- list,
38
49
  selectedValues,
39
50
 
40
51
  style,
@@ -47,12 +58,7 @@ class Box extends React.Component {
47
58
 
48
59
  const { query } = this.state
49
60
 
50
- let processList
51
- if (withFilter === true) {
52
- processList = pinYinFilter(list, query, e => e.name)
53
- } else if (withFilter) {
54
- processList = withFilter(list, query)
55
- }
61
+ const processList = this.getProcessList()
56
62
 
57
63
  return (
58
64
  <Flex column className='gm-transfer-box gm-border gm-bg' style={style}>
@@ -102,7 +108,10 @@ class Box extends React.Component {
102
108
  <CheckboxGroup
103
109
  name='transferBoxBottom'
104
110
  className='gm-margin-0 gm-padding-5'
105
- value={[list.length !== 0 && list.length === selectedValues.length]}
111
+ value={[
112
+ processList.length !== 0 &&
113
+ processList.length === selectedValues.length
114
+ ]}
106
115
  onChange={this.handleSelectAll}
107
116
  >
108
117
  <Checkbox value disabled={disabled}>
@@ -110,7 +119,7 @@ class Box extends React.Component {
110
119
  </Checkbox>
111
120
  </CheckboxGroup>
112
121
  <div className='gm-padding-lr-5 gm-text-desc'>
113
- {selectedValues.length}/{list.length}
122
+ {selectedValues.length}/{processList.length}
114
123
  </div>
115
124
  </Flex>
116
125
  </Flex>
@@ -55,6 +55,7 @@ const Tree = ({
55
55
  // 区分正常的 展开收起 和 搜索导致的展开收起
56
56
  const [queryGroupSelected, setQueryGroupSelected] = useState([])
57
57
  const [groupSelected, setGroupSelected] = useState([])
58
+ const [checkedAll, setCheckedAll] = useState(false)
58
59
 
59
60
  // 响应 list 的变化
60
61
  useEffect(() => {
@@ -62,7 +63,8 @@ const Tree = ({
62
63
  }, [list])
63
64
 
64
65
  const handleSelectAll = checked => {
65
- onSelectValues(checked ? _.map(getLeaf(list), v => v.value) : [])
66
+ setCheckedAll(checked)
67
+ onSelectValues(checked ? _.map(getLeaf(filterList), v => v.value) : [])
66
68
  }
67
69
 
68
70
  const handleQueryFilter = query => {
@@ -92,11 +94,6 @@ const Tree = ({
92
94
  setGroupSelected(groupSelected)
93
95
  }
94
96
 
95
- const leafList = getLeaf(list)
96
-
97
- const checkedAll =
98
- leafList.length !== 0 && leafList.length === selectedValues.length
99
-
100
97
  const newGS = query ? queryGroupSelected : groupSelected
101
98
 
102
99
  return (
@@ -155,7 +152,7 @@ const Tree = ({
155
152
  checkedAll={checkedAll}
156
153
  onChange={() => handleSelectAll(!checkedAll)}
157
154
  selectValuesLength={selectedValues.length}
158
- leafListLength={leafList.length}
155
+ leafListLength={getLeaf(filterList).length}
159
156
  disabled={disabled}
160
157
  />
161
158
  )}
@@ -89,7 +89,7 @@ const TreeV2 = ({
89
89
  }, [findIndex])
90
90
 
91
91
  const handleSelectAll = checked => {
92
- onSelectValues(checked ? getLeafValues(list) : [])
92
+ onSelectValues(checked ? getLeafValues(filterList) : [])
93
93
  }
94
94
 
95
95
  const handleQuery = e => {
@@ -201,7 +201,7 @@ const TreeV2 = ({
201
201
 
202
202
  {showAllCheck ? (
203
203
  <Bottom
204
- list={list}
204
+ list={filterList}
205
205
  selectedValues={selectedValues}
206
206
  onChange={handleSelectAll}
207
207
  />