@cqsjjb/jjb-react-admin-component 3.0.6 → 3.0.8

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 (6) hide show
  1. package/MediaQuery/index.d.ts +13 -0
  2. package/MediaQuery/index.js +91 -0
  3. package/MediaQuery/index.mjs +104 -0
  4. package/SearchForm/index.js +2 -2
  5. package/SearchForm/index.mjs +52 -39
  6. package/package.json +1 -1
package/MediaQuery/index.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ // @ts-ignore
2
+ import * as React from 'react';
3
+ import { ComponentProps } from '../types';
4
+
5
+ interface mediaQueryProps extends ComponentProps {
6
+ disabled?: boolean;
7
+ }
8
+
9
+ interface mediaQueryFc extends React.FC<mediaQueryProps> {
10
+ }
11
+
12
+ declare const mediaQuery: mediaQueryFc;
13
+ export default mediaQuery;
package/MediaQuery/index.js ADDED
@@ -0,0 +1,91 @@
1
+ import React from 'react';
2
+ const MEDIA_QUERY_LIST = {
3
+ MAX_WIDTH_479: '(max-width: 479px)',
4
+ MIN_WIDTH_480_AND_MAX_WIDTH_599: '(min-width: 480px) and (max-width: 599px)',
5
+ MIN_WIDTH_600_AND_MAX_WIDTH_899: '(min-width: 600px) and (max-width: 899px)',
6
+ MIN_WIDTH_900_AND_MAX_WIDTH_1199: '(min-width: 900px) and (max-width: 1199px)',
7
+ MIN_WIDTH_1200_AND_MAX_WIDTH_1439: '(min-width: 1200px) and (max-width: 1439px)',
8
+ MIN_WIDTH_1440: '(min-width: 1440px)'
9
+ };
10
+ export default class MediaQuery extends React.Component {
11
+ state = {
12
+ media: undefined
13
+ };
14
+ componentDidMount() {
15
+ const {
16
+ disabled
17
+ } = this.props;
18
+ if (disabled) {
19
+ return;
20
+ }
21
+
22
+ // 超小
23
+ this.ultraSmall = window.matchMedia(MEDIA_QUERY_LIST.MAX_WIDTH_479);
24
+ // 正常小
25
+ this.normalSmall = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_480_AND_MAX_WIDTH_599);
26
+ // 中等
27
+ this.normalMiddle = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_600_AND_MAX_WIDTH_899);
28
+ // 正常大
29
+ this.normalLarge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_900_AND_MAX_WIDTH_1199);
30
+ // 超大
31
+ this.superLarge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_1200_AND_MAX_WIDTH_1439);
32
+ // 超宽
33
+ this.normalHuge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_1440);
34
+ this.handleMediaQueryChange();
35
+ this.ultraSmall.addEventListener('change', this.handleMediaQueryChange.bind(this));
36
+ this.normalSmall.addEventListener('change', this.handleMediaQueryChange.bind(this));
37
+ this.normalMiddle.addEventListener('change', this.handleMediaQueryChange.bind(this));
38
+ this.normalLarge.addEventListener('change', this.handleMediaQueryChange.bind(this));
39
+ this.superLarge.addEventListener('change', this.handleMediaQueryChange.bind(this));
40
+ this.normalHuge.addEventListener('change', this.handleMediaQueryChange.bind(this));
41
+ }
42
+ componentWillUnmount() {
43
+ this.ultraSmall.removeEventListener('change', this.handleMediaQueryChange.bind(this));
44
+ this.normalSmall.removeEventListener('change', this.handleMediaQueryChange.bind(this));
45
+ this.normalMiddle.removeEventListener('change', this.handleMediaQueryChange.bind(this));
46
+ this.normalLarge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
47
+ this.superLarge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
48
+ this.normalHuge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
49
+ }
50
+ handleMediaQueryChange() {
51
+ const {
52
+ disabled
53
+ } = this.props;
54
+ if (disabled) {
55
+ return;
56
+ }
57
+ let media;
58
+ if (this.ultraSmall.matches) {
59
+ media = this.ultraSmall.media;
60
+ } else if (this.normalSmall.matches) {
61
+ media = this.normalSmall.media;
62
+ } else if (this.normalMiddle.matches) {
63
+ media = this.normalMiddle.media;
64
+ } else if (this.normalLarge.matches) {
65
+ media = this.normalLarge.media;
66
+ } else if (this.superLarge.matches) {
67
+ media = this.superLarge.media;
68
+ } else if (this.normalHuge.matches) {
69
+ media = this.normalHuge.media;
70
+ }
71
+ this.setState({
72
+ media: Object.keys(MEDIA_QUERY_LIST).find(key => media === MEDIA_QUERY_LIST[key])
73
+ });
74
+ }
75
+ get children() {
76
+ return this.props.children;
77
+ }
78
+ render() {
79
+ const {
80
+ media
81
+ } = this.state;
82
+ const {
83
+ children
84
+ } = this.props;
85
+ return /*#__PURE__*/React.createElement(React.Fragment, null, (Array.isArray(children) ? children : [].concat(children)).map((item, key) => ( /*#__PURE__*/React.createElement(item.type, {
86
+ key,
87
+ ...item.props,
88
+ ['data-media-query']: media
89
+ }))));
90
+ }
91
+ }
package/MediaQuery/index.mjs ADDED
@@ -0,0 +1,104 @@
1
+ import React from 'react';
2
+
3
+ const MEDIA_QUERY_LIST = {
4
+ MAX_WIDTH_479: '(max-width: 479px)',
5
+ MIN_WIDTH_480_AND_MAX_WIDTH_599: '(min-width: 480px) and (max-width: 599px)',
6
+ MIN_WIDTH_600_AND_MAX_WIDTH_899: '(min-width: 600px) and (max-width: 899px)',
7
+ MIN_WIDTH_900_AND_MAX_WIDTH_1199: '(min-width: 900px) and (max-width: 1199px)',
8
+ MIN_WIDTH_1200_AND_MAX_WIDTH_1439: '(min-width: 1200px) and (max-width: 1439px)',
9
+ MIN_WIDTH_1440: '(min-width: 1440px)'
10
+ };
11
+
12
+ export default class MediaQuery extends React.Component {
13
+ state = {
14
+ media: undefined
15
+ };
16
+
17
+ componentDidMount () {
18
+ const { disabled } = this.props;
19
+
20
+ if (disabled) {
21
+ return;
22
+ }
23
+
24
+ // 超小
25
+ this.ultraSmall = window.matchMedia(MEDIA_QUERY_LIST.MAX_WIDTH_479);
26
+ // 正常小
27
+ this.normalSmall = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_480_AND_MAX_WIDTH_599);
28
+ // 中等
29
+ this.normalMiddle = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_600_AND_MAX_WIDTH_899);
30
+ // 正常大
31
+ this.normalLarge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_900_AND_MAX_WIDTH_1199);
32
+ // 超大
33
+ this.superLarge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_1200_AND_MAX_WIDTH_1439);
34
+ // 超宽
35
+ this.normalHuge = window.matchMedia(MEDIA_QUERY_LIST.MIN_WIDTH_1440);
36
+
37
+ this.handleMediaQueryChange();
38
+
39
+ this.ultraSmall.addEventListener('change', this.handleMediaQueryChange.bind(this));
40
+ this.normalSmall.addEventListener('change', this.handleMediaQueryChange.bind(this));
41
+ this.normalMiddle.addEventListener('change', this.handleMediaQueryChange.bind(this));
42
+ this.normalLarge.addEventListener('change', this.handleMediaQueryChange.bind(this));
43
+ this.superLarge.addEventListener('change', this.handleMediaQueryChange.bind(this));
44
+ this.normalHuge.addEventListener('change', this.handleMediaQueryChange.bind(this));
45
+ }
46
+
47
+ componentWillUnmount () {
48
+ this.ultraSmall.removeEventListener('change', this.handleMediaQueryChange.bind(this));
49
+ this.normalSmall.removeEventListener('change', this.handleMediaQueryChange.bind(this));
50
+ this.normalMiddle.removeEventListener('change', this.handleMediaQueryChange.bind(this));
51
+ this.normalLarge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
52
+ this.superLarge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
53
+ this.normalHuge.removeEventListener('change', this.handleMediaQueryChange.bind(this));
54
+ }
55
+
56
+ handleMediaQueryChange () {
57
+ const { disabled } = this.props;
58
+
59
+ if (disabled) {
60
+ return;
61
+ }
62
+
63
+ let media;
64
+
65
+ if (this.ultraSmall.matches) {
66
+ media = this.ultraSmall.media;
67
+ } else if (this.normalSmall.matches) {
68
+ media = this.normalSmall.media;
69
+ } else if (this.normalMiddle.matches) {
70
+ media = this.normalMiddle.media;
71
+ } else if (this.normalLarge.matches) {
72
+ media = this.normalLarge.media;
73
+ } else if (this.superLarge.matches) {
74
+ media = this.superLarge.media;
75
+ } else if (this.normalHuge.matches) {
76
+ media = this.normalHuge.media;
77
+ }
78
+
79
+ this.setState({ media: Object.keys(MEDIA_QUERY_LIST).find(key => media === MEDIA_QUERY_LIST[ key ]) });
80
+ }
81
+
82
+ get children () {
83
+ return this.props.children;
84
+ }
85
+
86
+ render () {
87
+ const { media } = this.state;
88
+ const { children } = this.props;
89
+
90
+ return (
91
+ <>
92
+ {(Array.isArray(children)
93
+ ? children
94
+ : [].concat(children)).map((item, key) => (
95
+ React.createElement(item.type, {
96
+ key,
97
+ ...item.props,
98
+ [ 'data-media-query' ]: media
99
+ })
100
+ ))}
101
+ </>
102
+ );
103
+ }
104
+ }
package/SearchForm/index.js CHANGED
@@ -75,7 +75,7 @@ class searchForm extends React.Component {
75
75
  onFinish
76
76
  } = this.props;
77
77
  const formItemList = this.groupsList();
78
- return /*#__PURE__*/React.createElement(Form, {
78
+ return formItemList.length > 0 ? /*#__PURE__*/React.createElement(Form, {
79
79
  ref: form || this.form,
80
80
  style: style,
81
81
  initialValues: initialValues,
@@ -92,7 +92,7 @@ class searchForm extends React.Component {
92
92
  span: 24 / colSize
93
93
  }, /*#__PURE__*/React.createElement(Form.Item, {
94
94
  noStyle: true
95
- }, this.getButtons()))));
95
+ }, this.getButtons())))) : /*#__PURE__*/React.createElement(React.Fragment, null);
96
96
  }
97
97
  }
98
98
  searchForm.defaultProps = {
package/SearchForm/index.mjs CHANGED
@@ -33,8 +33,12 @@ class searchForm extends React.Component {
33
33
  icon={<UndoOutlined />}
34
34
  loading={loading}
35
35
  onClick={() => {
36
- form?form.current.resetFields():this.form.current.resetFields()
37
- onReset(form?form.current.getFieldsValue():this.form.current.getFieldsValue())
36
+ form
37
+ ? form.current.resetFields()
38
+ : this.form.current.resetFields();
39
+ onReset(form
40
+ ? form.current.getFieldsValue()
41
+ : this.form.current.getFieldsValue());
38
42
  }}
39
43
  >
40
44
  重置
@@ -62,24 +66,24 @@ class searchForm extends React.Component {
62
66
  }
63
67
 
64
68
  groupsList () {
65
- const arr = []
66
- this.props.formLine.forEach(i=>{
69
+ const arr = [];
70
+ this.props.formLine.forEach(i => {
67
71
  arr.push({
68
72
  show: true,
69
73
  node: i
70
- })
71
- })
74
+ });
75
+ });
72
76
  if (this.props.expand && this.state.isOpen) {
73
77
  return arr;
74
78
  }
75
- if(!this.props.expand && arr.length>3){
79
+ if (!this.props.expand && arr.length > 3) {
76
80
  return arr;
77
81
  }
78
- arr.forEach((i,index)=> {
79
- if(index>2){
80
- i.show=false
82
+ arr.forEach((i, index) => {
83
+ if (index > 2) {
84
+ i.show = false;
81
85
  }
82
- })
86
+ });
83
87
  return arr;
84
88
  }
85
89
 
@@ -98,31 +102,37 @@ class searchForm extends React.Component {
98
102
  onFinish
99
103
  } = this.props;
100
104
  const formItemList = this.groupsList();
101
- return (
102
- <Form
103
- ref={ form || this.form}
104
- style={style}
105
- initialValues={initialValues}
106
- onFinish={values => onFinish(values)}
107
- >
108
- <Row gutter={[ 16, 16 ]}>
109
- {formItemList.map((item, index) => (
110
- <Col
111
- style={{display:item.show?'block':'none'}}
112
- key={index}
113
- span={24 / colSize}
114
- >
115
- {item.node}
105
+ return formItemList.length > 0
106
+ ? (
107
+ <Form
108
+ ref={form || this.form}
109
+ style={style}
110
+ initialValues={initialValues}
111
+ onFinish={values => onFinish(values)}
112
+ >
113
+ <Row gutter={[ 16, 16 ]}>
114
+ {formItemList.map((item, index) => (
115
+ <Col
116
+ style={{
117
+ display: item.show
118
+ ? 'block'
119
+ : 'none'
120
+ }}
121
+ key={index}
122
+ span={24 / colSize}
123
+ >
124
+ {item.node}
125
+ </Col>
126
+ ))}
127
+ <Col span={24 / colSize}>
128
+ <Form.Item noStyle>
129
+ {this.getButtons()}
130
+ </Form.Item>
116
131
  </Col>
117
- ))}
118
- <Col span={24 / colSize}>
119
- <Form.Item noStyle>
120
- {this.getButtons()}
121
- </Form.Item>
122
- </Col>
123
- </Row>
124
- </Form>
125
- );
132
+ </Row>
133
+ </Form>
134
+ )
135
+ : <></>;
126
136
  }
127
137
  }
128
138
 
@@ -133,9 +143,12 @@ searchForm.defaultProps = {
133
143
  loading: false,
134
144
  formLine: [],
135
145
  initialValues: {},
136
- onRef: () => {},
137
- onReset: () => {},
138
- onFinish: () => {},
146
+ onRef: () => {
147
+ },
148
+ onReset: () => {
149
+ },
150
+ onFinish: () => {
151
+ }
139
152
  };
140
153
  searchForm.propTypes = {
141
154
  form: PropTypes.object,
@@ -147,6 +160,6 @@ searchForm.propTypes = {
147
160
  initialValues: PropTypes.object,
148
161
  onRef: PropTypes.func,
149
162
  onReset: PropTypes.func,
150
- onFinish: PropTypes.func,
163
+ onFinish: PropTypes.func
151
164
  };
152
165
  export default searchForm;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cqsjjb/jjb-react-admin-component",
3
- "version": "3.0.6",
3
+ "version": "3.0.8",
4
4
  "description": "jjb-react-admin-组件库@new",
5
5
  "main": "index.js",
6
6
  "author": "jjb-front-team",