@mjhls/mjh-framework 1.0.30 → 1.0.32
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 +36 -15
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +36 -15
- package/dist/index.js.map +1 -1
- package/package.json +77 -77
package/README.md
CHANGED
|
@@ -1,170 +1,170 @@
|
|
|
1
|
-
# mjh-framework v. 1.0.24
|
|
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.24
|
|
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
|
@@ -549,6 +549,7 @@ var DeckContent = function (_React$Component) {
|
|
|
549
549
|
|
|
550
550
|
return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = DeckContent.__proto__ || Object.getPrototypeOf(DeckContent)).call.apply(_ref, [this].concat(args))), _this), _this.mapping = _this.props.mapping, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.pointer = _this.props.pointer ? _this.props.pointer : false, _this.pointerArray = _this.props.pointerArray ? _this.props.pointerArray : false, _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.state = {
|
|
551
551
|
data: _this.data,
|
|
552
|
+
dataKeptToCompareNewDatarecord: _this.data,
|
|
552
553
|
per: _this.params ? _this.params.to : 2,
|
|
553
554
|
page: 1,
|
|
554
555
|
from: _this.params ? _this.params.from : 0,
|
|
@@ -677,6 +678,24 @@ var DeckContent = function (_React$Component) {
|
|
|
677
678
|
}
|
|
678
679
|
|
|
679
680
|
createClass(DeckContent, [{
|
|
681
|
+
key: 'componentDidUpdate',
|
|
682
|
+
value: function componentDidUpdate(prevProps, prevState) {
|
|
683
|
+
if (this.state.dataKeptToCompareNewDatarecord !== this.props.dataRecord) {
|
|
684
|
+
// eslint-disable-next-line react/no-did-update-set-state
|
|
685
|
+
this.setState({
|
|
686
|
+
data: this.props.dataRecord,
|
|
687
|
+
dataKeptToCompareNewDatarecord: this.props.dataRecord,
|
|
688
|
+
per: this.props.params ? this.props.params.to : 2,
|
|
689
|
+
page: 1,
|
|
690
|
+
from: this.props.params ? this.props.params.from : 0,
|
|
691
|
+
to: this.props.params ? this.props.params.to : 2,
|
|
692
|
+
total_pages: null,
|
|
693
|
+
scrolling: true,
|
|
694
|
+
query: this.props.query
|
|
695
|
+
});
|
|
696
|
+
}
|
|
697
|
+
}
|
|
698
|
+
}, {
|
|
680
699
|
key: 'componentDidMount',
|
|
681
700
|
value: function componentDidMount() {
|
|
682
701
|
// this.loadData();
|
|
@@ -2244,6 +2263,8 @@ var TaxonomyCard = function TaxonomyCard(props) {
|
|
|
2244
2263
|
};
|
|
2245
2264
|
|
|
2246
2265
|
var Column1 = function Column1(props) {
|
|
2266
|
+
var title = props.title;
|
|
2267
|
+
|
|
2247
2268
|
return React__default.createElement(
|
|
2248
2269
|
'section',
|
|
2249
2270
|
null,
|
|
@@ -2252,11 +2273,11 @@ var Column1 = function Column1(props) {
|
|
|
2252
2273
|
{ className: 'justify-content-md-center' },
|
|
2253
2274
|
React__default.createElement(
|
|
2254
2275
|
Col,
|
|
2255
|
-
{ className: 'middleCol', style: { marginTop: !
|
|
2256
|
-
|
|
2276
|
+
{ className: 'middleCol', style: { marginTop: !title && '10px' } },
|
|
2277
|
+
title && React__default.createElement(
|
|
2257
2278
|
'h1',
|
|
2258
2279
|
null,
|
|
2259
|
-
|
|
2280
|
+
title
|
|
2260
2281
|
),
|
|
2261
2282
|
props.children
|
|
2262
2283
|
)
|
|
@@ -2265,7 +2286,8 @@ var Column1 = function Column1(props) {
|
|
|
2265
2286
|
};
|
|
2266
2287
|
|
|
2267
2288
|
var Column2 = function Column2(props) {
|
|
2268
|
-
var rightItems = props.rightItems
|
|
2289
|
+
var rightItems = props.rightItems,
|
|
2290
|
+
title = props.title;
|
|
2269
2291
|
|
|
2270
2292
|
|
|
2271
2293
|
return React__default.createElement(
|
|
@@ -2276,11 +2298,11 @@ var Column2 = function Column2(props) {
|
|
|
2276
2298
|
{ className: 'justify-content-md-center' },
|
|
2277
2299
|
React__default.createElement(
|
|
2278
2300
|
Col,
|
|
2279
|
-
{ md: true, className: 'middleCol', style: { marginTop: !
|
|
2280
|
-
|
|
2301
|
+
{ md: true, className: 'middleCol', style: { marginTop: !title && '10px' } },
|
|
2302
|
+
title && React__default.createElement(
|
|
2281
2303
|
'h1',
|
|
2282
2304
|
null,
|
|
2283
|
-
|
|
2305
|
+
title
|
|
2284
2306
|
),
|
|
2285
2307
|
props.children
|
|
2286
2308
|
),
|
|
@@ -2371,8 +2393,8 @@ var LeftNav = function LeftNav(props) {
|
|
|
2371
2393
|
|
|
2372
2394
|
var Column3 = function Column3(props) {
|
|
2373
2395
|
var leftItems = props.leftItems,
|
|
2374
|
-
rightItems = props.rightItems
|
|
2375
|
-
|
|
2396
|
+
rightItems = props.rightItems,
|
|
2397
|
+
title = props.title;
|
|
2376
2398
|
|
|
2377
2399
|
return React__default.createElement(
|
|
2378
2400
|
'section',
|
|
@@ -2387,11 +2409,11 @@ var Column3 = function Column3(props) {
|
|
|
2387
2409
|
),
|
|
2388
2410
|
React__default.createElement(
|
|
2389
2411
|
Col,
|
|
2390
|
-
{ md: true, className: 'middleCol', style: { maxWidth: '640px', marginTop: !
|
|
2391
|
-
|
|
2412
|
+
{ md: true, className: 'middleCol', style: { maxWidth: '640px', marginTop: !title && '10px' } },
|
|
2413
|
+
title && React__default.createElement(
|
|
2392
2414
|
'h1',
|
|
2393
2415
|
null,
|
|
2394
|
-
|
|
2416
|
+
title
|
|
2395
2417
|
),
|
|
2396
2418
|
props.children
|
|
2397
2419
|
),
|
|
@@ -4739,8 +4761,7 @@ var TemplateNormal = function TemplateNormal(props) {
|
|
|
4739
4761
|
keywords = props.keywords,
|
|
4740
4762
|
description = props.description,
|
|
4741
4763
|
website = props.website,
|
|
4742
|
-
horizontalAD = props.config.horizontalAD
|
|
4743
|
-
onSearch = props.onSearch;
|
|
4764
|
+
horizontalAD = props.config.horizontalAD;
|
|
4744
4765
|
|
|
4745
4766
|
|
|
4746
4767
|
var navigation = function navigation() {
|
|
@@ -4786,7 +4807,7 @@ var TemplateNormal = function TemplateNormal(props) {
|
|
|
4786
4807
|
return React__default.createElement(
|
|
4787
4808
|
'section',
|
|
4788
4809
|
null,
|
|
4789
|
-
React__default.createElement(Header, { title: title, keyword: keywords, description: description }),
|
|
4810
|
+
React__default.createElement(Header, { title: title + ' | ' + website.title, keyword: keywords, description: description }),
|
|
4790
4811
|
navigation(),
|
|
4791
4812
|
horizontalAD && horizontalAD.networkID && horizontalAD.adUnit && React__default.createElement(
|
|
4792
4813
|
Container,
|