@mjhls/mjh-framework 1.0.56 → 1.0.58
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 +35 -18
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +35 -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
|
@@ -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,29 @@ var DeckContent = function (_React$Component) {
|
|
|
3892
3891
|
var currentPage = _this.state.currentPage;
|
|
3893
3892
|
|
|
3894
3893
|
if (seoPaginate) {
|
|
3894
|
+
|
|
3895
|
+
var path = router.asPath;
|
|
3896
|
+
var qrIndex = path.indexOf('?');
|
|
3897
|
+
if (qrIndex > 0) {
|
|
3898
|
+
path = path.substring(1, qrIndex);
|
|
3899
|
+
}
|
|
3900
|
+
|
|
3901
|
+
pageNumber = parseInt(pageNumber);
|
|
3902
|
+
|
|
3903
|
+
var newPath = pageNumber === 1 ? '' + path : path + '?page=' + pageNumber;
|
|
3895
3904
|
if (currentPage !== pageNumber) {
|
|
3905
|
+
|
|
3896
3906
|
lib_3.refresh();
|
|
3897
3907
|
if (pageview) {
|
|
3898
|
-
|
|
3908
|
+
_this.setState({
|
|
3909
|
+
currentPage: pageNumber
|
|
3910
|
+
}, function () {
|
|
3911
|
+
pageview(newPath);
|
|
3912
|
+
});
|
|
3899
3913
|
}
|
|
3900
3914
|
}
|
|
3901
|
-
|
|
3915
|
+
|
|
3916
|
+
window.history.pushState(newPath, '', newPath);
|
|
3902
3917
|
}
|
|
3903
3918
|
}, _this.cardLoader = function (page, columns, variant) {
|
|
3904
3919
|
var mode = variant && variant === 'bottom' ? 'column-reverse' : 'column';
|
|
@@ -3917,12 +3932,14 @@ var DeckContent = function (_React$Component) {
|
|
|
3917
3932
|
lgVar = 6;
|
|
3918
3933
|
}
|
|
3919
3934
|
|
|
3935
|
+
var pageNumber = row.pageNumber || _this.state.page;
|
|
3936
|
+
|
|
3920
3937
|
return React__default.createElement(
|
|
3921
3938
|
VisibilitySensor,
|
|
3922
3939
|
{
|
|
3923
3940
|
key: itemCounter,
|
|
3924
3941
|
onChange: function onChange(isVisible) {
|
|
3925
|
-
isVisible && _this.changePageNumber(
|
|
3942
|
+
isVisible && _this.changePageNumber(pageNumber);
|
|
3926
3943
|
} },
|
|
3927
3944
|
React__default.createElement(
|
|
3928
3945
|
Col,
|
|
@@ -5411,15 +5428,15 @@ var TaxonomyCard = function TaxonomyCard(props) {
|
|
|
5411
5428
|
);
|
|
5412
5429
|
};
|
|
5413
5430
|
|
|
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
|
-
|
|
5431
|
+
/*
|
|
5432
|
+
GROQ query -
|
|
5433
|
+
*[_type == "article" && references(*[_type == 'documentGroup' && name == 'test']._id)][0...10]{
|
|
5434
|
+
title,
|
|
5435
|
+
published,
|
|
5436
|
+
"thumbnail": thumbnail.asset->url,
|
|
5437
|
+
"url": url.current
|
|
5438
|
+
}
|
|
5439
|
+
|
|
5423
5440
|
*/
|
|
5424
5441
|
var GroupDeck = function GroupDeck(props) {
|
|
5425
5442
|
// Props should be an array of objects containing Thumbnail, title, and URL
|