trepur_components 0.3.12 → 0.3.15
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.
|
@@ -54,27 +54,76 @@ const Column = _ref => {
|
|
|
54
54
|
9: 'w-9/12',
|
|
55
55
|
10: 'w-10/12',
|
|
56
56
|
11: 'w-11/12',
|
|
57
|
-
12: 'w-
|
|
57
|
+
12: 'w-full'
|
|
58
|
+
};
|
|
59
|
+
const mdWidthOptions = {
|
|
60
|
+
1: 'md:w-1/12',
|
|
61
|
+
2: 'md:w-2/12',
|
|
62
|
+
3: 'md:w-3/12',
|
|
63
|
+
4: 'md:w-4/12',
|
|
64
|
+
5: 'md:w-5/12',
|
|
65
|
+
6: 'md:w-6/12',
|
|
66
|
+
7: 'md:w-7/12',
|
|
67
|
+
8: 'md:w-8/12',
|
|
68
|
+
9: 'md:w-9/12',
|
|
69
|
+
10: 'md:w-10/12',
|
|
70
|
+
11: 'md:w-11/12',
|
|
71
|
+
12: 'md:w-full'
|
|
72
|
+
};
|
|
73
|
+
const lgWidthOptions = {
|
|
74
|
+
1: 'lg:w-1/12',
|
|
75
|
+
2: 'lg:w-2/12',
|
|
76
|
+
3: 'lg:w-3/12',
|
|
77
|
+
4: 'lg:w-4/12',
|
|
78
|
+
5: 'lg:w-5/12',
|
|
79
|
+
6: 'lg:w-6/12',
|
|
80
|
+
7: 'lg:w-7/12',
|
|
81
|
+
8: 'lg:w-8/12',
|
|
82
|
+
9: 'lg:w-9/12',
|
|
83
|
+
10: 'lg:w-10/12',
|
|
84
|
+
11: 'lg:w-11/12',
|
|
85
|
+
12: 'lg:w-full'
|
|
86
|
+
};
|
|
87
|
+
const xlWidthOptions = {
|
|
88
|
+
1: 'xl:w-1/12',
|
|
89
|
+
2: 'xl:w-2/12',
|
|
90
|
+
3: 'xl:w-3/12',
|
|
91
|
+
4: 'xl:w-4/12',
|
|
92
|
+
5: 'xl:w-5/12',
|
|
93
|
+
6: 'xl:w-6/12',
|
|
94
|
+
7: 'xl:w-7/12',
|
|
95
|
+
8: 'xl:w-8/12',
|
|
96
|
+
9: 'xl:w-9/12',
|
|
97
|
+
10: 'xl:w-10/12',
|
|
98
|
+
11: 'xl:w-11/12',
|
|
99
|
+
12: 'xl:w-full'
|
|
58
100
|
};
|
|
59
101
|
|
|
60
|
-
const calculateWidth = size => {
|
|
61
|
-
|
|
102
|
+
const calculateWidth = (screen, size) => {
|
|
103
|
+
switch (screen) {
|
|
104
|
+
case 'sm':
|
|
105
|
+
return widthOptions[size];
|
|
62
106
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
} else {
|
|
66
|
-
width = widthOptions[size];
|
|
67
|
-
}
|
|
107
|
+
case 'md':
|
|
108
|
+
return mdWidthOptions[size];
|
|
68
109
|
|
|
69
|
-
|
|
110
|
+
case 'lg':
|
|
111
|
+
return lgWidthOptions[size];
|
|
112
|
+
|
|
113
|
+
case 'xl':
|
|
114
|
+
return xlWidthOptions[size];
|
|
115
|
+
|
|
116
|
+
default:
|
|
117
|
+
return widthOptions[size];
|
|
118
|
+
}
|
|
70
119
|
};
|
|
71
120
|
|
|
72
121
|
const classList = (0, _classnames.default)({
|
|
73
122
|
[columnProps === null || columnProps === void 0 ? void 0 : columnProps.classes]: columnProps === null || columnProps === void 0 ? void 0 : columnProps.classes,
|
|
74
|
-
[
|
|
75
|
-
[
|
|
76
|
-
[
|
|
77
|
-
[
|
|
123
|
+
[calculateWidth('sm', columnProps === null || columnProps === void 0 ? void 0 : columnProps.sm)]: columnProps === null || columnProps === void 0 ? void 0 : columnProps.sm,
|
|
124
|
+
[calculateWidth('md', columnProps === null || columnProps === void 0 ? void 0 : columnProps.md)]: columnProps === null || columnProps === void 0 ? void 0 : columnProps.md,
|
|
125
|
+
[calculateWidth('lg', columnProps === null || columnProps === void 0 ? void 0 : columnProps.lg)]: columnProps === null || columnProps === void 0 ? void 0 : columnProps.lg,
|
|
126
|
+
[calculateWidth('xl', columnProps === null || columnProps === void 0 ? void 0 : columnProps.xl)]: columnProps === null || columnProps === void 0 ? void 0 : columnProps.xl
|
|
78
127
|
}, 'h-full');
|
|
79
128
|
return /*#__PURE__*/_react.default.createElement("div", _extends({}, (columnProps === null || columnProps === void 0 ? void 0 : columnProps.id) && {
|
|
80
129
|
id: columnProps === null || columnProps === void 0 ? void 0 : columnProps.id
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.containerProps = void 0;
|
|
7
|
+
|
|
8
|
+
require("core-js/modules/es.object.assign.js");
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
+
|
|
16
|
+
require("../index.css");
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
+
|
|
22
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
23
|
+
|
|
24
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
25
|
+
|
|
26
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
27
|
+
|
|
28
|
+
const containerProps = {
|
|
29
|
+
id: _propTypes.default.string,
|
|
30
|
+
classes: _propTypes.default.string
|
|
31
|
+
};
|
|
32
|
+
exports.containerProps = containerProps;
|
|
33
|
+
|
|
34
|
+
const Container = _ref => {
|
|
35
|
+
let {
|
|
36
|
+
containerProps,
|
|
37
|
+
children
|
|
38
|
+
} = _ref;
|
|
39
|
+
const classList = (0, _classnames.default)({
|
|
40
|
+
[containerProps.classes]: containerProps === null || containerProps === void 0 ? void 0 : containerProps.classes
|
|
41
|
+
}, 'mx-auto');
|
|
42
|
+
return /*#__PURE__*/_react.default.createElement("div", _extends({
|
|
43
|
+
style: {
|
|
44
|
+
'max-width': containerProps.maxWidth
|
|
45
|
+
}
|
|
46
|
+
}, (containerProps === null || containerProps === void 0 ? void 0 : containerProps.id) && {
|
|
47
|
+
id: containerProps === null || containerProps === void 0 ? void 0 : containerProps.id
|
|
48
|
+
}, {
|
|
49
|
+
className: classList
|
|
50
|
+
}), children);
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
Container.propTypes = {
|
|
54
|
+
containerProps: _propTypes.default.shape(_objectSpread({}, containerProps))
|
|
55
|
+
};
|
|
56
|
+
var _default = Container;
|
|
57
|
+
exports.default = _default;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
|
|
12
|
+
var _Icon = _interopRequireDefault(require("../Icon"));
|
|
13
|
+
|
|
14
|
+
var _Column = _interopRequireDefault(require("../Column"));
|
|
15
|
+
|
|
16
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
|
+
|
|
18
|
+
require("../index.css");
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
22
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
|
+
|
|
24
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
+
|
|
26
|
+
const Nav = _ref => {
|
|
27
|
+
let {
|
|
28
|
+
id,
|
|
29
|
+
classes,
|
|
30
|
+
items,
|
|
31
|
+
barHeight,
|
|
32
|
+
bgColor
|
|
33
|
+
} = _ref;
|
|
34
|
+
const footerBarHeight = barHeight ? barHeight : 'h-full';
|
|
35
|
+
const classList = (0, _classnames.default)({
|
|
36
|
+
[classes]: classes,
|
|
37
|
+
[bgColor]: bgColor,
|
|
38
|
+
'bg-white': !bgColor
|
|
39
|
+
}, footerBarHeight, 'flex flex-wrap items-center');
|
|
40
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
41
|
+
id: id,
|
|
42
|
+
className: classList
|
|
43
|
+
}, items && items.map((item, i) => {
|
|
44
|
+
const columnClassList = (0, _classnames.default)({
|
|
45
|
+
[item === null || item === void 0 ? void 0 : item.columnClasses]: item === null || item === void 0 ? void 0 : item.columnClasses
|
|
46
|
+
}, 'text-center md:text-left');
|
|
47
|
+
return /*#__PURE__*/_react.default.createElement(_Column.default, {
|
|
48
|
+
key: "row_item_1.".concat(i),
|
|
49
|
+
columnProps: {
|
|
50
|
+
classes: columnClassList,
|
|
51
|
+
sm: item.smColumnWidth,
|
|
52
|
+
md: item.mdColumnWidth,
|
|
53
|
+
lg: item.lgColumnWidth,
|
|
54
|
+
xl: item.xlColumnWidth
|
|
55
|
+
},
|
|
56
|
+
children: item.component
|
|
57
|
+
});
|
|
58
|
+
}));
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
var _default = Nav;
|
|
62
|
+
exports.default = _default;
|
|
@@ -51,11 +51,12 @@ const Nav = _ref => {
|
|
|
51
51
|
mobileClasses,
|
|
52
52
|
borderBottom,
|
|
53
53
|
borderBottomColor,
|
|
54
|
-
closeMobileIconProps
|
|
54
|
+
closeMobileIconProps,
|
|
55
|
+
rowHeight
|
|
55
56
|
} = _ref;
|
|
56
57
|
const [showSideNav, setShowSideNav] = (0, _react.useState)(false);
|
|
57
58
|
const [showDropdownNav, setShowDropdownNav] = (0, _react.useState)(false);
|
|
58
|
-
const navRowHeight = 'h-16';
|
|
59
|
+
const navRowHeight = rowHeight ? rowHeight : 'h-16';
|
|
59
60
|
const firstRowClassList = (0, _classnames.default)({
|
|
60
61
|
[firstRowClasses]: firstRowClasses
|
|
61
62
|
}, 'flex');
|
|
@@ -80,14 +81,14 @@ const Nav = _ref => {
|
|
|
80
81
|
'bg-white': !mobileBgColor,
|
|
81
82
|
'w-0': !showSideNav,
|
|
82
83
|
["w-".concat(sideBarWidth)]: showSideNav
|
|
83
|
-
}, "z-50 shadow-inner shaddow-lg
|
|
84
|
+
}, "z-50 shadow-inner shaddow-lg md:hidden pt-20 \n fixed top-0 left-0 z-1 overflow-hidden h-full\n duration-700");
|
|
84
85
|
const dropdownNavClasses = (0, _classnames.default)({
|
|
85
86
|
[mobileBgColor]: mobileBgColor,
|
|
86
87
|
[bgColor]: !mobileBgColor && bgColor,
|
|
87
88
|
'bg-white': !mobileBgColor && !bgColor,
|
|
88
89
|
'h-0': !showDropdownNav,
|
|
89
90
|
["h-".concat(dropdownNavHeight)]: showDropdownNav
|
|
90
|
-
},
|
|
91
|
+
}, "z-50 md:hidden duration-500 overflow-hidden");
|
|
91
92
|
const logoImageClassList = (0, _classnames.default)({
|
|
92
93
|
[mobileLogoBannerClasses]: mobileLogoBannerClasses
|
|
93
94
|
}, 'h-16 w-auto');
|
|
@@ -95,7 +96,7 @@ const Nav = _ref => {
|
|
|
95
96
|
'fixed w-full z-50 top-0 mt-0': fixedTop,
|
|
96
97
|
'border-b': borderBottom,
|
|
97
98
|
[mobileClasses]: mobileClasses
|
|
98
|
-
},
|
|
99
|
+
}, "flex items-center md:hidden py-2");
|
|
99
100
|
const colors = (0, _classnames.default)({
|
|
100
101
|
[bgColor]: bgColor,
|
|
101
102
|
'bg-blue': !bgColor,
|
|
@@ -105,12 +106,12 @@ const Nav = _ref => {
|
|
|
105
106
|
const desktopClassList = (0, _classnames.default)({
|
|
106
107
|
'fixed w-full z-50 top-0 mt-0': fixedTop,
|
|
107
108
|
'border-b': borderBottom
|
|
108
|
-
},
|
|
109
|
+
}, "hidden md:block items-center justify-between sm:items-stretch text-center");
|
|
109
110
|
return /*#__PURE__*/_react.default.createElement("nav", {
|
|
110
111
|
id: id,
|
|
111
112
|
className: classes
|
|
112
113
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
113
|
-
id: "
|
|
114
|
+
id: "mobile-nav",
|
|
114
115
|
className: "".concat(mobileClassList, " ").concat(colors)
|
|
115
116
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
116
117
|
id: "nav-collapse-btn-wrapper",
|
|
@@ -148,16 +149,20 @@ const Nav = _ref => {
|
|
|
148
149
|
src: mobileLogo,
|
|
149
150
|
alt: "Logo"
|
|
150
151
|
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
152
|
+
id: "destop-nav",
|
|
151
153
|
className: "".concat(desktopClassList, " ").concat(colors)
|
|
152
154
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
153
155
|
className: firstRowClassList
|
|
154
156
|
}, firstRow && firstRow.map((rowItem, i) => {
|
|
157
|
+
const columnClassList = (0, _classnames.default)({
|
|
158
|
+
[rowItem === null || rowItem === void 0 ? void 0 : rowItem.columnClasses]: rowItem === null || rowItem === void 0 ? void 0 : rowItem.columnClasses
|
|
159
|
+
}, navRowHeight);
|
|
155
160
|
return /*#__PURE__*/_react.default.createElement(_Column.default, {
|
|
156
161
|
key: "row_item_1.".concat(i),
|
|
157
162
|
columnProps: {
|
|
158
|
-
classes:
|
|
163
|
+
classes: columnClassList,
|
|
159
164
|
sm: rowItem.smColumnWidth,
|
|
160
|
-
md: rowItem.
|
|
165
|
+
md: rowItem.mdColumnWidth,
|
|
161
166
|
lg: rowItem.lgColumnWidth,
|
|
162
167
|
xl: rowItem.xlColumnWidth
|
|
163
168
|
},
|
|
@@ -166,12 +171,15 @@ const Nav = _ref => {
|
|
|
166
171
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
167
172
|
className: secondRowClassList
|
|
168
173
|
}, secondRow && secondRow.map((rowItem, i) => {
|
|
174
|
+
const columnClassList = (0, _classnames.default)({
|
|
175
|
+
[rowItem === null || rowItem === void 0 ? void 0 : rowItem.columnClasses]: rowItem === null || rowItem === void 0 ? void 0 : rowItem.columnClasses
|
|
176
|
+
}, navRowHeight);
|
|
169
177
|
return /*#__PURE__*/_react.default.createElement(_Column.default, {
|
|
170
178
|
key: "row_item_2.".concat(i),
|
|
171
179
|
columnProps: {
|
|
172
|
-
classes:
|
|
180
|
+
classes: columnClassList,
|
|
173
181
|
sm: rowItem.smColumnWidth,
|
|
174
|
-
md: rowItem.
|
|
182
|
+
md: rowItem.mdColumnWidth,
|
|
175
183
|
lg: rowItem.lgColumnWidth,
|
|
176
184
|
xl: rowItem.xlColumnWidth
|
|
177
185
|
},
|
|
@@ -180,12 +188,15 @@ const Nav = _ref => {
|
|
|
180
188
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
181
189
|
className: thirdRowClassList
|
|
182
190
|
}, thirdRow && thirdRow.map((rowItem, i) => {
|
|
191
|
+
const columnClassList = (0, _classnames.default)({
|
|
192
|
+
[rowItem === null || rowItem === void 0 ? void 0 : rowItem.columnClasses]: rowItem === null || rowItem === void 0 ? void 0 : rowItem.columnClasses
|
|
193
|
+
}, navRowHeight);
|
|
183
194
|
return /*#__PURE__*/_react.default.createElement(_Column.default, {
|
|
184
195
|
key: "row_item_3.".concat(i),
|
|
185
196
|
columnProps: {
|
|
186
|
-
classes:
|
|
197
|
+
classes: columnClassList,
|
|
187
198
|
sm: rowItem.smColumnWidth,
|
|
188
|
-
md: rowItem.
|
|
199
|
+
md: rowItem.mdColumnWidth,
|
|
189
200
|
lg: rowItem.lgColumnWidth,
|
|
190
201
|
xl: rowItem.xlColumnWidth
|
|
191
202
|
},
|
package/dist/index.js
CHANGED
|
@@ -81,6 +81,18 @@ Object.defineProperty(exports, "Column", {
|
|
|
81
81
|
return _Column.default;
|
|
82
82
|
}
|
|
83
83
|
});
|
|
84
|
+
Object.defineProperty(exports, "Container", {
|
|
85
|
+
enumerable: true,
|
|
86
|
+
get: function get() {
|
|
87
|
+
return _Container.default;
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
Object.defineProperty(exports, "FooterBar", {
|
|
91
|
+
enumerable: true,
|
|
92
|
+
get: function get() {
|
|
93
|
+
return _FooterBar.default;
|
|
94
|
+
}
|
|
95
|
+
});
|
|
84
96
|
Object.defineProperty(exports, "Form", {
|
|
85
97
|
enumerable: true,
|
|
86
98
|
get: function get() {
|
|
@@ -252,8 +264,12 @@ var _Collapsible = _interopRequireDefault(require("./components/Collapsible"));
|
|
|
252
264
|
|
|
253
265
|
var _Column = _interopRequireDefault(require("./components/Column"));
|
|
254
266
|
|
|
267
|
+
var _Container = _interopRequireDefault(require("./components/Container"));
|
|
268
|
+
|
|
255
269
|
var _Form = _interopRequireDefault(require("./components/Form"));
|
|
256
270
|
|
|
271
|
+
var _FooterBar = _interopRequireDefault(require("./components/FooterBar"));
|
|
272
|
+
|
|
257
273
|
var _FyreCard = _interopRequireDefault(require("./components/FyreCard"));
|
|
258
274
|
|
|
259
275
|
var _Icon = _interopRequireDefault(require("./components/Icon"));
|