@mjhls/mjh-framework 1.0.56 → 1.0.57
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/README.md +170 -170
- package/dist/index.es.js +28 -19
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +27 -18
- package/dist/index.js.map +1 -1
- package/package.json +80 -80
package/README.md
CHANGED
|
@@ -1,170 +1,170 @@
|
|
|
1
|
-
# mjh-framework v. 1.0.55
|
|
2
|
-
|
|
3
|
-
> Foundation Framework
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/mjh-framework) [](https://standardjs.com)
|
|
6
|
-
|
|
7
|
-
## Install
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm install --save @mjhls/mjh-framework
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## Usage
|
|
14
|
-
|
|
15
|
-
```jsx
|
|
16
|
-
import React, { Component } from 'react'
|
|
17
|
-
|
|
18
|
-
import { NavMagazine, DeckQueue } from 'mjh-framework'
|
|
19
|
-
|
|
20
|
-
export default class App extends Component {
|
|
21
|
-
render() {
|
|
22
|
-
return (
|
|
23
|
-
<div>
|
|
24
|
-
<NavMagazine />
|
|
25
|
-
<DeckQueue />
|
|
26
|
-
</div>
|
|
27
|
-
)
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## Publish new updates to the npm registry
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
npm publish
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## For getting updates in the template without publishing each time a change is made in the framework
|
|
39
|
-
|
|
40
|
-
Link react and react-dom of the template repo, so that it can be used by the framework.
|
|
41
|
-
This is to avoid the error arising due to multiple instances of React.
|
|
42
|
-
|
|
43
|
-
```bash
|
|
44
|
-
cd ../mjh-template/node_modules/react
|
|
45
|
-
|
|
46
|
-
yarn link
|
|
47
|
-
|
|
48
|
-
cd ../react-dom
|
|
49
|
-
|
|
50
|
-
yarn link
|
|
51
|
-
|
|
52
|
-
cd ../../../mjh-framework
|
|
53
|
-
|
|
54
|
-
yarn link react && yarn link react-dom
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
Link the framework repo so that it can be used in the template
|
|
58
|
-
|
|
59
|
-
```bash
|
|
60
|
-
npm link
|
|
61
|
-
|
|
62
|
-
cd ../mjh-template
|
|
63
|
-
|
|
64
|
-
npm link @mjhls/mjh-framework
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
## Components and "props"
|
|
68
|
-
|
|
69
|
-
### Deck Components
|
|
70
|
-
|
|
71
|
-
- #### DeckContent
|
|
72
|
-
|
|
73
|
-
##### Props
|
|
74
|
-
|
|
75
|
-
- mapping
|
|
76
|
-
- dataRecord
|
|
77
|
-
- query
|
|
78
|
-
- params
|
|
79
|
-
- pointer
|
|
80
|
-
- pointerArray
|
|
81
|
-
- defaultImage
|
|
82
|
-
|
|
83
|
-
- #### DeckQueue
|
|
84
|
-
##### Props
|
|
85
|
-
- page
|
|
86
|
-
- dataRecord
|
|
87
|
-
- query
|
|
88
|
-
- params
|
|
89
|
-
- pointer
|
|
90
|
-
- pointerArray
|
|
91
|
-
|
|
92
|
-
### Layout Components
|
|
93
|
-
|
|
94
|
-
- #### Column1
|
|
95
|
-
- #### Column2
|
|
96
|
-
##### Props
|
|
97
|
-
- rightItems
|
|
98
|
-
- #### Column3
|
|
99
|
-
##### Props
|
|
100
|
-
- leftItems
|
|
101
|
-
- rightItems
|
|
102
|
-
##### Common Props (Column1, Column2, Column3)
|
|
103
|
-
- title
|
|
104
|
-
- children
|
|
105
|
-
- #### Header
|
|
106
|
-
##### Props
|
|
107
|
-
- title
|
|
108
|
-
- keyword
|
|
109
|
-
- description
|
|
110
|
-
- #### LeftNav
|
|
111
|
-
##### Props
|
|
112
|
-
- leftItems
|
|
113
|
-
- #### AccordionPanel
|
|
114
|
-
##### Props
|
|
115
|
-
- accordionClassName
|
|
116
|
-
- data
|
|
117
|
-
|
|
118
|
-
### Navigation Components
|
|
119
|
-
|
|
120
|
-
- #### NavMagazine
|
|
121
|
-
##### Props
|
|
122
|
-
- logo
|
|
123
|
-
- dataObject
|
|
124
|
-
- #### NavNative
|
|
125
|
-
##### Props
|
|
126
|
-
- logo
|
|
127
|
-
- dataObject
|
|
128
|
-
- #### NavNormal
|
|
129
|
-
##### Props
|
|
130
|
-
- logo
|
|
131
|
-
- dataObject
|
|
132
|
-
- variant
|
|
133
|
-
- #### NavDvm
|
|
134
|
-
##### Props
|
|
135
|
-
- logo
|
|
136
|
-
- dataObject
|
|
137
|
-
- subNavHeads
|
|
138
|
-
|
|
139
|
-
### Template Components
|
|
140
|
-
|
|
141
|
-
- #### TemplateNormal
|
|
142
|
-
##### Props
|
|
143
|
-
- config
|
|
144
|
-
- title
|
|
145
|
-
- keywords
|
|
146
|
-
- description
|
|
147
|
-
- website
|
|
148
|
-
|
|
149
|
-
### Ad Components
|
|
150
|
-
|
|
151
|
-
- #### AD300x250
|
|
152
|
-
- #### AD300x250x600
|
|
153
|
-
- #### AD728x90
|
|
154
|
-
##### Common Props
|
|
155
|
-
- networkID
|
|
156
|
-
- adUnit
|
|
157
|
-
|
|
158
|
-
### Serializers
|
|
159
|
-
|
|
160
|
-
- #### getSerializers (function)
|
|
161
|
-
##### arguments
|
|
162
|
-
- client
|
|
163
|
-
##### types
|
|
164
|
-
- youtube
|
|
165
|
-
- figure
|
|
166
|
-
- slideshow
|
|
167
|
-
|
|
168
|
-
## License
|
|
169
|
-
|
|
170
|
-
MIT © [mjh-framework](https://github.com/mjh-framework)
|
|
1
|
+
# mjh-framework v. 1.0.55
|
|
2
|
+
|
|
3
|
+
> Foundation Framework
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/mjh-framework) [](https://standardjs.com)
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install --save @mjhls/mjh-framework
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
```jsx
|
|
16
|
+
import React, { Component } from 'react'
|
|
17
|
+
|
|
18
|
+
import { NavMagazine, DeckQueue } from 'mjh-framework'
|
|
19
|
+
|
|
20
|
+
export default class App extends Component {
|
|
21
|
+
render() {
|
|
22
|
+
return (
|
|
23
|
+
<div>
|
|
24
|
+
<NavMagazine />
|
|
25
|
+
<DeckQueue />
|
|
26
|
+
</div>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Publish new updates to the npm registry
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm publish
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## For getting updates in the template without publishing each time a change is made in the framework
|
|
39
|
+
|
|
40
|
+
Link react and react-dom of the template repo, so that it can be used by the framework.
|
|
41
|
+
This is to avoid the error arising due to multiple instances of React.
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
cd ../mjh-template/node_modules/react
|
|
45
|
+
|
|
46
|
+
yarn link
|
|
47
|
+
|
|
48
|
+
cd ../react-dom
|
|
49
|
+
|
|
50
|
+
yarn link
|
|
51
|
+
|
|
52
|
+
cd ../../../mjh-framework
|
|
53
|
+
|
|
54
|
+
yarn link react && yarn link react-dom
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Link the framework repo so that it can be used in the template
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
npm link
|
|
61
|
+
|
|
62
|
+
cd ../mjh-template
|
|
63
|
+
|
|
64
|
+
npm link @mjhls/mjh-framework
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Components and "props"
|
|
68
|
+
|
|
69
|
+
### Deck Components
|
|
70
|
+
|
|
71
|
+
- #### DeckContent
|
|
72
|
+
|
|
73
|
+
##### Props
|
|
74
|
+
|
|
75
|
+
- mapping
|
|
76
|
+
- dataRecord
|
|
77
|
+
- query
|
|
78
|
+
- params
|
|
79
|
+
- pointer
|
|
80
|
+
- pointerArray
|
|
81
|
+
- defaultImage
|
|
82
|
+
|
|
83
|
+
- #### DeckQueue
|
|
84
|
+
##### Props
|
|
85
|
+
- page
|
|
86
|
+
- dataRecord
|
|
87
|
+
- query
|
|
88
|
+
- params
|
|
89
|
+
- pointer
|
|
90
|
+
- pointerArray
|
|
91
|
+
|
|
92
|
+
### Layout Components
|
|
93
|
+
|
|
94
|
+
- #### Column1
|
|
95
|
+
- #### Column2
|
|
96
|
+
##### Props
|
|
97
|
+
- rightItems
|
|
98
|
+
- #### Column3
|
|
99
|
+
##### Props
|
|
100
|
+
- leftItems
|
|
101
|
+
- rightItems
|
|
102
|
+
##### Common Props (Column1, Column2, Column3)
|
|
103
|
+
- title
|
|
104
|
+
- children
|
|
105
|
+
- #### Header
|
|
106
|
+
##### Props
|
|
107
|
+
- title
|
|
108
|
+
- keyword
|
|
109
|
+
- description
|
|
110
|
+
- #### LeftNav
|
|
111
|
+
##### Props
|
|
112
|
+
- leftItems
|
|
113
|
+
- #### AccordionPanel
|
|
114
|
+
##### Props
|
|
115
|
+
- accordionClassName
|
|
116
|
+
- data
|
|
117
|
+
|
|
118
|
+
### Navigation Components
|
|
119
|
+
|
|
120
|
+
- #### NavMagazine
|
|
121
|
+
##### Props
|
|
122
|
+
- logo
|
|
123
|
+
- dataObject
|
|
124
|
+
- #### NavNative
|
|
125
|
+
##### Props
|
|
126
|
+
- logo
|
|
127
|
+
- dataObject
|
|
128
|
+
- #### NavNormal
|
|
129
|
+
##### Props
|
|
130
|
+
- logo
|
|
131
|
+
- dataObject
|
|
132
|
+
- variant
|
|
133
|
+
- #### NavDvm
|
|
134
|
+
##### Props
|
|
135
|
+
- logo
|
|
136
|
+
- dataObject
|
|
137
|
+
- subNavHeads
|
|
138
|
+
|
|
139
|
+
### Template Components
|
|
140
|
+
|
|
141
|
+
- #### TemplateNormal
|
|
142
|
+
##### Props
|
|
143
|
+
- config
|
|
144
|
+
- title
|
|
145
|
+
- keywords
|
|
146
|
+
- description
|
|
147
|
+
- website
|
|
148
|
+
|
|
149
|
+
### Ad Components
|
|
150
|
+
|
|
151
|
+
- #### AD300x250
|
|
152
|
+
- #### AD300x250x600
|
|
153
|
+
- #### AD728x90
|
|
154
|
+
##### Common Props
|
|
155
|
+
- networkID
|
|
156
|
+
- adUnit
|
|
157
|
+
|
|
158
|
+
### Serializers
|
|
159
|
+
|
|
160
|
+
- #### getSerializers (function)
|
|
161
|
+
##### arguments
|
|
162
|
+
- client
|
|
163
|
+
##### types
|
|
164
|
+
- youtube
|
|
165
|
+
- figure
|
|
166
|
+
- slideshow
|
|
167
|
+
|
|
168
|
+
## License
|
|
169
|
+
|
|
170
|
+
MIT © [mjh-framework](https://github.com/mjh-framework)
|
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { Component, useState,
|
|
1
|
+
import React__default, { Component, useState, createContext, createElement } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import reactDom from 'react-dom';
|
|
4
4
|
import Row from 'react-bootstrap/Row';
|
|
@@ -3814,7 +3814,7 @@ var DeckContent = function (_React$Component) {
|
|
|
3814
3814
|
data: _this.data,
|
|
3815
3815
|
dataKeptToCompareNewDatarecord: _this.data,
|
|
3816
3816
|
per: _this.params ? _this.params.to : 2,
|
|
3817
|
-
page: 1,
|
|
3817
|
+
page: _this.props.currentPage || 1,
|
|
3818
3818
|
from: _this.params ? _this.params.from : 0,
|
|
3819
3819
|
to: _this.params ? _this.params.to : 2,
|
|
3820
3820
|
total_pages: null,
|
|
@@ -3832,17 +3832,16 @@ var DeckContent = function (_React$Component) {
|
|
|
3832
3832
|
return {
|
|
3833
3833
|
page: page + 1,
|
|
3834
3834
|
from: from + per,
|
|
3835
|
-
to: to + per
|
|
3836
|
-
currentPage: currentPage + 1
|
|
3835
|
+
to: to + per
|
|
3837
3836
|
};
|
|
3838
3837
|
}, _this.loadData);
|
|
3839
|
-
},
|
|
3838
|
+
}, 0), _this.loadData = function () {
|
|
3840
3839
|
var _this$state = _this.state,
|
|
3841
3840
|
from = _this$state.from,
|
|
3842
3841
|
to = _this$state.to,
|
|
3843
3842
|
data = _this$state.data,
|
|
3844
3843
|
query = _this$state.query,
|
|
3845
|
-
|
|
3844
|
+
page = _this$state.page;
|
|
3846
3845
|
var client = _this.props.client;
|
|
3847
3846
|
|
|
3848
3847
|
|
|
@@ -3856,7 +3855,7 @@ var DeckContent = function (_React$Component) {
|
|
|
3856
3855
|
}
|
|
3857
3856
|
dataArr = dataArr.map(function (item) {
|
|
3858
3857
|
return _extends({}, item, {
|
|
3859
|
-
pageNumber:
|
|
3858
|
+
pageNumber: page
|
|
3860
3859
|
});
|
|
3861
3860
|
});
|
|
3862
3861
|
|
|
@@ -3892,13 +3891,21 @@ var DeckContent = function (_React$Component) {
|
|
|
3892
3891
|
var currentPage = _this.state.currentPage;
|
|
3893
3892
|
|
|
3894
3893
|
if (seoPaginate) {
|
|
3894
|
+
var newPath = pageNumber === 1 ? '' + router.pathname : router.pathname + '?page=' + pageNumber;
|
|
3895
3895
|
if (currentPage !== pageNumber) {
|
|
3896
|
+
console.error('currentPage:', currentPage);
|
|
3897
|
+
console.error('pageNumber:', pageNumber);
|
|
3896
3898
|
lib_3.refresh();
|
|
3897
3899
|
if (pageview) {
|
|
3898
|
-
|
|
3900
|
+
_this.setState({
|
|
3901
|
+
currentPage: pageNumber
|
|
3902
|
+
}, function () {
|
|
3903
|
+
pageview(newPath);
|
|
3904
|
+
});
|
|
3899
3905
|
}
|
|
3900
3906
|
}
|
|
3901
|
-
|
|
3907
|
+
|
|
3908
|
+
window.history.pushState(newPath, '', newPath);
|
|
3902
3909
|
}
|
|
3903
3910
|
}, _this.cardLoader = function (page, columns, variant) {
|
|
3904
3911
|
var mode = variant && variant === 'bottom' ? 'column-reverse' : 'column';
|
|
@@ -3917,12 +3924,14 @@ var DeckContent = function (_React$Component) {
|
|
|
3917
3924
|
lgVar = 6;
|
|
3918
3925
|
}
|
|
3919
3926
|
|
|
3927
|
+
var pageNumber = row.pageNumber || _this.state.page;
|
|
3928
|
+
|
|
3920
3929
|
return React__default.createElement(
|
|
3921
3930
|
VisibilitySensor,
|
|
3922
3931
|
{
|
|
3923
3932
|
key: itemCounter,
|
|
3924
3933
|
onChange: function onChange(isVisible) {
|
|
3925
|
-
isVisible && _this.changePageNumber(
|
|
3934
|
+
isVisible && _this.changePageNumber(pageNumber);
|
|
3926
3935
|
} },
|
|
3927
3936
|
React__default.createElement(
|
|
3928
3937
|
Col,
|
|
@@ -5411,15 +5420,15 @@ var TaxonomyCard = function TaxonomyCard(props) {
|
|
|
5411
5420
|
);
|
|
5412
5421
|
};
|
|
5413
5422
|
|
|
5414
|
-
/*
|
|
5415
|
-
GROQ query -
|
|
5416
|
-
*[_type == "article" && references(*[_type == 'documentGroup' && name == 'test']._id)][0...10]{
|
|
5417
|
-
title,
|
|
5418
|
-
published,
|
|
5419
|
-
"thumbnail": thumbnail.asset->url,
|
|
5420
|
-
"url": url.current
|
|
5421
|
-
}
|
|
5422
|
-
|
|
5423
|
+
/*
|
|
5424
|
+
GROQ query -
|
|
5425
|
+
*[_type == "article" && references(*[_type == 'documentGroup' && name == 'test']._id)][0...10]{
|
|
5426
|
+
title,
|
|
5427
|
+
published,
|
|
5428
|
+
"thumbnail": thumbnail.asset->url,
|
|
5429
|
+
"url": url.current
|
|
5430
|
+
}
|
|
5431
|
+
|
|
5423
5432
|
*/
|
|
5424
5433
|
var GroupDeck = function GroupDeck(props) {
|
|
5425
5434
|
// Props should be an array of objects containing Thumbnail, title, and URL
|