@cqsjjb/jjb-react-admin-component 3.0.7 → 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 (4) 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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cqsjjb/jjb-react-admin-component",
3
- "version": "3.0.7",
3
+ "version": "3.0.8",
4
4
  "description": "jjb-react-admin-组件库@new",
5
5
  "main": "index.js",
6
6
  "author": "jjb-front-team",