thangved-react-grid 1.0.0
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 +51 -0
- package/dist/index.css +156 -0
- package/dist/index.js +36 -0
- package/dist/index.js.map +1 -0
- package/dist/index.modern.js +32 -0
- package/dist/index.modern.js.map +1 -0
- package/package.json +51 -0
package/README.md
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
# thangved-react-grid
|
|
2
|
+
|
|
3
|
+
> Made with create-react-library
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/thangved-react-grid) [](https://standardjs.com)
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install --save thangved-react-grid
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
In App.js
|
|
16
|
+
|
|
17
|
+
```jsx
|
|
18
|
+
import 'thangved-react-grid/dist/index.css';
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Container
|
|
22
|
+
|
|
23
|
+
```jsx
|
|
24
|
+
import { Container } from 'thangved-react-grid';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
| Prop name | Type | Content |
|
|
28
|
+
| --------- | ----------- | ------------------- |
|
|
29
|
+
| wide | **boolean** | Max width: `1024px` |
|
|
30
|
+
|
|
31
|
+
### Row
|
|
32
|
+
|
|
33
|
+
```jsx
|
|
34
|
+
import { Row } from 'thangved-react-grid';
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Col
|
|
38
|
+
|
|
39
|
+
```jsx
|
|
40
|
+
import { Row } from 'thangved-react-grid';
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
| Prop name | Type | Content |
|
|
44
|
+
| --------- | ------------------------ | -------------- |
|
|
45
|
+
| sm | **Number** or **String** | Size on mobile |
|
|
46
|
+
| md | **Number** or **String** | Size on tablet |
|
|
47
|
+
| lg | **Number** or **String** | Size on pc |
|
|
48
|
+
|
|
49
|
+
## License
|
|
50
|
+
|
|
51
|
+
MIT © [thangved](https://github.com/thangved)
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
._aknyc {
|
|
2
|
+
max-width: 100%;
|
|
3
|
+
margin: 0 auto;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
._aknyc._3rbLK {
|
|
7
|
+
width: 1024px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* row */
|
|
11
|
+
._1O29s {
|
|
12
|
+
width: 100%;
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-wrap: wrap;
|
|
15
|
+
/* col */
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
._1O29s ._27Faz {
|
|
19
|
+
display: block;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
._1xvdR {
|
|
23
|
+
display: none !important;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
._Wzbz3 {
|
|
27
|
+
width: calc(100/12 * 1%);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
._32iZX {
|
|
31
|
+
width: calc(200/12 * 1%);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
._3SZej {
|
|
35
|
+
width: calc(300/12 * 1%);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
._3jX9u {
|
|
39
|
+
width: calc(400/12 * 1%);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
._1DZoi {
|
|
43
|
+
width: calc(500/12 * 1%);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
._1Za-E {
|
|
47
|
+
width: calc(600/12 * 1%);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
._3Ib-0 {
|
|
51
|
+
width: calc(700/12 * 1%);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
._2NbUr {
|
|
55
|
+
width: calc(800/12 * 1%);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
._I4H69 {
|
|
59
|
+
width: calc(900/12 * 1%);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
._9kTkx {
|
|
63
|
+
width: calc(1000/12 * 1%);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
._8sobe {
|
|
67
|
+
width: calc(1100/12 * 1%);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
._244st {
|
|
71
|
+
width: calc(1200/12 * 1%);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@media screen and (max-width: 1023px) {
|
|
75
|
+
._13MbP {
|
|
76
|
+
display: none !important;
|
|
77
|
+
}
|
|
78
|
+
._2hz6b {
|
|
79
|
+
width: calc(100/12 * 1%);
|
|
80
|
+
}
|
|
81
|
+
._20OyJ {
|
|
82
|
+
width: calc(200/12 * 1%);
|
|
83
|
+
}
|
|
84
|
+
._2mJdc {
|
|
85
|
+
width: calc(300/12 * 1%);
|
|
86
|
+
}
|
|
87
|
+
._2uSj2 {
|
|
88
|
+
width: calc(400/12 * 1%);
|
|
89
|
+
}
|
|
90
|
+
._12de3 {
|
|
91
|
+
width: calc(500/12 * 1%);
|
|
92
|
+
}
|
|
93
|
+
._CKEjY {
|
|
94
|
+
width: calc(600/12 * 1%);
|
|
95
|
+
}
|
|
96
|
+
._2QsA9 {
|
|
97
|
+
width: calc(700/12 * 1%);
|
|
98
|
+
}
|
|
99
|
+
._kWFV1 {
|
|
100
|
+
width: calc(800/12 * 1%);
|
|
101
|
+
}
|
|
102
|
+
._3b6XM {
|
|
103
|
+
width: calc(900/12 * 1%);
|
|
104
|
+
}
|
|
105
|
+
._3kG87 {
|
|
106
|
+
width: calc(1000/12 * 1%);
|
|
107
|
+
}
|
|
108
|
+
._1DgXd {
|
|
109
|
+
width: calc(1100/12 * 1%);
|
|
110
|
+
}
|
|
111
|
+
._213Ji {
|
|
112
|
+
width: calc(1200/12 * 1%);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@media screen and (max-width: 739px) {
|
|
117
|
+
._qxLp3 {
|
|
118
|
+
display: none !important;
|
|
119
|
+
}
|
|
120
|
+
._xbFyG {
|
|
121
|
+
width: calc(100/12 * 1%);
|
|
122
|
+
}
|
|
123
|
+
._xIJD- {
|
|
124
|
+
width: calc(200/12 * 1%);
|
|
125
|
+
}
|
|
126
|
+
._gDvAn {
|
|
127
|
+
width: calc(300/12 * 1%);
|
|
128
|
+
}
|
|
129
|
+
._3RFY2 {
|
|
130
|
+
width: calc(400/12 * 1%);
|
|
131
|
+
}
|
|
132
|
+
._LgwLs {
|
|
133
|
+
width: calc(500/12 * 1%);
|
|
134
|
+
}
|
|
135
|
+
._3WiH9 {
|
|
136
|
+
width: calc(600/12 * 1%);
|
|
137
|
+
}
|
|
138
|
+
._2MpR5 {
|
|
139
|
+
width: calc(700/12 * 1%);
|
|
140
|
+
}
|
|
141
|
+
._1gItC {
|
|
142
|
+
width: calc(800/12 * 1%);
|
|
143
|
+
}
|
|
144
|
+
._bknaA {
|
|
145
|
+
width: calc(900/12 * 1%);
|
|
146
|
+
}
|
|
147
|
+
._3idbq {
|
|
148
|
+
width: calc(1000/12 * 1%);
|
|
149
|
+
}
|
|
150
|
+
._1H93g {
|
|
151
|
+
width: calc(1100/12 * 1%);
|
|
152
|
+
}
|
|
153
|
+
._3sMrh {
|
|
154
|
+
width: calc(1200/12 * 1%);
|
|
155
|
+
}
|
|
156
|
+
}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
2
|
+
|
|
3
|
+
var React = _interopDefault(require('react'));
|
|
4
|
+
|
|
5
|
+
var style = {"container":"_aknyc","wide":"_3rbLK","row":"_1O29s","col":"_27Faz","lg-0":"_1xvdR","lg-1":"_Wzbz3","lg-2":"_32iZX","lg-3":"_3SZej","lg-4":"_3jX9u","lg-5":"_1DZoi","lg-6":"_1Za-E","lg-7":"_3Ib-0","lg-8":"_2NbUr","lg-9":"_I4H69","lg-10":"_9kTkx","lg-11":"_8sobe","lg-12":"_244st","md-0":"_13MbP","md-1":"_2hz6b","md-2":"_20OyJ","md-3":"_2mJdc","md-4":"_2uSj2","md-5":"_12de3","md-6":"_CKEjY","md-7":"_2QsA9","md-8":"_kWFV1","md-9":"_3b6XM","md-10":"_3kG87","md-11":"_1DgXd","md-12":"_213Ji","sm-0":"_qxLp3","sm-1":"_xbFyG","sm-2":"_xIJD-","sm-3":"_gDvAn","sm-4":"_3RFY2","sm-5":"_LgwLs","sm-6":"_3WiH9","sm-7":"_2MpR5","sm-8":"_1gItC","sm-9":"_bknaA","sm-10":"_3idbq","sm-11":"_1H93g","sm-12":"_3sMrh"};
|
|
6
|
+
|
|
7
|
+
var Container = function Container(_ref) {
|
|
8
|
+
var children = _ref.children,
|
|
9
|
+
wide = _ref.wide;
|
|
10
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
11
|
+
className: style.container + " " + (wide && style.wide)
|
|
12
|
+
}, children);
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
var Row = function Row(_ref) {
|
|
16
|
+
var children = _ref.children;
|
|
17
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
18
|
+
className: style.row
|
|
19
|
+
}, children);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
var Col = function Col(_ref) {
|
|
23
|
+
var children = _ref.children,
|
|
24
|
+
sm = _ref.sm,
|
|
25
|
+
md = _ref.md,
|
|
26
|
+
lg = _ref.lg;
|
|
27
|
+
console.log(md);
|
|
28
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
29
|
+
className: style.col + " " + (sm && style["sm-" + sm] || '') + " " + (md && style["md-" + md] || '') + " " + (lg && style["lg-" + lg] || '')
|
|
30
|
+
}, children);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
exports.Col = Col;
|
|
34
|
+
exports.Container = Container;
|
|
35
|
+
exports.Row = Row;
|
|
36
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/components/Container.js","../src/components/Row.js","../src/components/Col.js"],"sourcesContent":["import React from 'react'\nimport style from './app.css'\n\nconst Container = ({ children, wide }) => {\n return (\n <div className={`${style.container} ${wide && style.wide}`}>\n {children}\n </div>\n )\n}\n\nexport default Container\n","import React from 'react'\nimport style from './app.css'\n\nconst Row = ({ children }) => {\n return (\n <div className={style.row}>\n {children}\n </div>\n )\n}\n\nexport default Row\n","import React from 'react'\nimport style from './app.css'\n\nconst Col = ({ children, sm, md, lg }) => {\n console.log(md)\n return (\n <div\n className={`${style.col} ${sm && style[`sm-${sm}`] || ''} ${md && style[`md-${md}`] || ''} ${lg && style[`lg-${lg}`] || ''}`}>\n {children}\n </div>\n )\n}\n\nexport default Col\n"],"names":["Container","children","wide","style","container","Row","row","Col","sm","md","lg","console","log","col"],"mappings":";;;;;;AAGA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAAwB;AAAA,MAArBC,QAAqB,QAArBA,QAAqB;AAAA,MAAXC,IAAW,QAAXA,IAAW;AACxC,sBACE;AAAK,IAAA,SAAS,EAAKC,KAAK,CAACC,SAAX,UAAwBF,IAAI,IAAIC,KAAK,CAACD,IAAtC;AAAd,KACGD,QADH,CADF;AAKD,CAND;;ACAA,IAAMI,GAAG,GAAG,SAANA,GAAM,OAAkB;AAAA,MAAfJ,QAAe,QAAfA,QAAe;AAC5B,sBACE;AAAK,IAAA,SAAS,EAAEE,KAAK,CAACG;AAAtB,KACGL,QADH,CADF;AAKD,CAND;;ACAA,IAAMM,GAAG,GAAG,SAANA,GAAM,OAA8B;AAAA,MAA3BN,QAA2B,QAA3BA,QAA2B;AAAA,MAAjBO,EAAiB,QAAjBA,EAAiB;AAAA,MAAbC,EAAa,QAAbA,EAAa;AAAA,MAATC,EAAS,QAATA,EAAS;AACxCC,EAAAA,OAAO,CAACC,GAAR,CAAYH,EAAZ;AACA,sBACE;AACE,IAAA,SAAS,EAAKN,KAAK,CAACU,GAAX,UAAkBL,EAAE,IAAIL,KAAK,SAAOK,EAAP,CAAX,IAA2B,EAA7C,WAAmDC,EAAE,IAAIN,KAAK,SAAOM,EAAP,CAAX,IAA2B,EAA9E,WAAoFC,EAAE,IAAIP,KAAK,SAAOO,EAAP,CAAX,IAA2B,EAA/G;AADX,KAEGT,QAFH,CADF;AAMD,CARD;;;;;;"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
var style = {"container":"_aknyc","wide":"_3rbLK","row":"_1O29s","col":"_27Faz","lg-0":"_1xvdR","lg-1":"_Wzbz3","lg-2":"_32iZX","lg-3":"_3SZej","lg-4":"_3jX9u","lg-5":"_1DZoi","lg-6":"_1Za-E","lg-7":"_3Ib-0","lg-8":"_2NbUr","lg-9":"_I4H69","lg-10":"_9kTkx","lg-11":"_8sobe","lg-12":"_244st","md-0":"_13MbP","md-1":"_2hz6b","md-2":"_20OyJ","md-3":"_2mJdc","md-4":"_2uSj2","md-5":"_12de3","md-6":"_CKEjY","md-7":"_2QsA9","md-8":"_kWFV1","md-9":"_3b6XM","md-10":"_3kG87","md-11":"_1DgXd","md-12":"_213Ji","sm-0":"_qxLp3","sm-1":"_xbFyG","sm-2":"_xIJD-","sm-3":"_gDvAn","sm-4":"_3RFY2","sm-5":"_LgwLs","sm-6":"_3WiH9","sm-7":"_2MpR5","sm-8":"_1gItC","sm-9":"_bknaA","sm-10":"_3idbq","sm-11":"_1H93g","sm-12":"_3sMrh"};
|
|
4
|
+
|
|
5
|
+
var Container = function Container(_ref) {
|
|
6
|
+
var children = _ref.children,
|
|
7
|
+
wide = _ref.wide;
|
|
8
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
9
|
+
className: style.container + " " + (wide && style.wide)
|
|
10
|
+
}, children);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
var Row = function Row(_ref) {
|
|
14
|
+
var children = _ref.children;
|
|
15
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
16
|
+
className: style.row
|
|
17
|
+
}, children);
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
var Col = function Col(_ref) {
|
|
21
|
+
var children = _ref.children,
|
|
22
|
+
sm = _ref.sm,
|
|
23
|
+
md = _ref.md,
|
|
24
|
+
lg = _ref.lg;
|
|
25
|
+
console.log(md);
|
|
26
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
27
|
+
className: style.col + " " + (sm && style["sm-" + sm] || '') + " " + (md && style["md-" + md] || '') + " " + (lg && style["lg-" + lg] || '')
|
|
28
|
+
}, children);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export { Col, Container, Row };
|
|
32
|
+
//# sourceMappingURL=index.modern.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.modern.js","sources":["../src/components/Container.js","../src/components/Row.js","../src/components/Col.js"],"sourcesContent":["import React from 'react'\nimport style from './app.css'\n\nconst Container = ({ children, wide }) => {\n return (\n <div className={`${style.container} ${wide && style.wide}`}>\n {children}\n </div>\n )\n}\n\nexport default Container\n","import React from 'react'\nimport style from './app.css'\n\nconst Row = ({ children }) => {\n return (\n <div className={style.row}>\n {children}\n </div>\n )\n}\n\nexport default Row\n","import React from 'react'\nimport style from './app.css'\n\nconst Col = ({ children, sm, md, lg }) => {\n console.log(md)\n return (\n <div\n className={`${style.col} ${sm && style[`sm-${sm}`] || ''} ${md && style[`md-${md}`] || ''} ${lg && style[`lg-${lg}`] || ''}`}>\n {children}\n </div>\n )\n}\n\nexport default Col\n"],"names":["Container","children","wide","style","container","Row","row","Col","sm","md","lg","console","log","col"],"mappings":";;;;AAGA,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAAwB;AAAA,MAArBC,QAAqB,QAArBA,QAAqB;AAAA,MAAXC,IAAW,QAAXA,IAAW;AACxC,sBACE;AAAK,IAAA,SAAS,EAAKC,KAAK,CAACC,SAAX,UAAwBF,IAAI,IAAIC,KAAK,CAACD,IAAtC;AAAd,KACGD,QADH,CADF;AAKD,CAND;;ACAA,IAAMI,GAAG,GAAG,SAANA,GAAM,OAAkB;AAAA,MAAfJ,QAAe,QAAfA,QAAe;AAC5B,sBACE;AAAK,IAAA,SAAS,EAAEE,KAAK,CAACG;AAAtB,KACGL,QADH,CADF;AAKD,CAND;;ACAA,IAAMM,GAAG,GAAG,SAANA,GAAM,OAA8B;AAAA,MAA3BN,QAA2B,QAA3BA,QAA2B;AAAA,MAAjBO,EAAiB,QAAjBA,EAAiB;AAAA,MAAbC,EAAa,QAAbA,EAAa;AAAA,MAATC,EAAS,QAATA,EAAS;AACxCC,EAAAA,OAAO,CAACC,GAAR,CAAYH,EAAZ;AACA,sBACE;AACE,IAAA,SAAS,EAAKN,KAAK,CAACU,GAAX,UAAkBL,EAAE,IAAIL,KAAK,SAAOK,EAAP,CAAX,IAA2B,EAA7C,WAAmDC,EAAE,IAAIN,KAAK,SAAOM,EAAP,CAAX,IAA2B,EAA9E,WAAoFC,EAAE,IAAIP,KAAK,SAAOO,EAAP,CAAX,IAA2B,EAA/G;AADX,KAEGT,QAFH,CADF;AAMD,CARD;;;;"}
|
package/package.json
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "thangved-react-grid",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Made with create-react-library",
|
|
5
|
+
"author": "thangved",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"repository": "thangved/thangved-react-grid",
|
|
8
|
+
"main": "dist/index.js",
|
|
9
|
+
"module": "dist/index.modern.js",
|
|
10
|
+
"source": "src/index.js",
|
|
11
|
+
"engines": {
|
|
12
|
+
"node": ">=10"
|
|
13
|
+
},
|
|
14
|
+
"scripts": {
|
|
15
|
+
"build": "microbundle-crl --no-compress --format modern,cjs",
|
|
16
|
+
"start": "microbundle-crl watch --no-compress --format modern,cjs",
|
|
17
|
+
"prepare": "run-s build",
|
|
18
|
+
"test": "run-s test:unit test:lint test:build",
|
|
19
|
+
"test:build": "run-s build",
|
|
20
|
+
"test:lint": "eslint .",
|
|
21
|
+
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
|
|
22
|
+
"test:watch": "react-scripts test --env=jsdom",
|
|
23
|
+
"predeploy": "cd example && yarn install && yarn run build",
|
|
24
|
+
"deploy": "gh-pages -d example/build"
|
|
25
|
+
},
|
|
26
|
+
"peerDependencies": {
|
|
27
|
+
"react": "^16.0.0"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"babel-eslint": "^10.0.3",
|
|
31
|
+
"cross-env": "^7.0.2",
|
|
32
|
+
"eslint-config-standard": "^14.1.0",
|
|
33
|
+
"eslint-config-standard-react": "^9.2.0",
|
|
34
|
+
"eslint-plugin-import": "^2.18.2",
|
|
35
|
+
"eslint-plugin-node": "^11.0.0",
|
|
36
|
+
"eslint-plugin-prettier": "^3.1.1",
|
|
37
|
+
"eslint-plugin-promise": "^4.2.1",
|
|
38
|
+
"eslint-plugin-react": "^7.17.0",
|
|
39
|
+
"eslint-plugin-standard": "^4.0.1",
|
|
40
|
+
"gh-pages": "^2.2.0",
|
|
41
|
+
"microbundle-crl": "^0.13.10",
|
|
42
|
+
"npm-run-all": "^4.1.5",
|
|
43
|
+
"prettier": "^2.0.4",
|
|
44
|
+
"react": "^16.13.1",
|
|
45
|
+
"react-dom": "^16.13.1",
|
|
46
|
+
"react-scripts": "^3.4.1"
|
|
47
|
+
},
|
|
48
|
+
"files": [
|
|
49
|
+
"dist"
|
|
50
|
+
]
|
|
51
|
+
}
|