intelicoreact 0.3.6 → 0.3.10
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/dist/Atomic/FormElements/Input/Input.js +1 -1
- package/dist/Atomic/FormElements/NumericInput/NumericInput.js +9 -5
- package/dist/Atomic/FormElements/SwitchableRow/SwitchableRow.js +54 -0
- package/dist/Atomic/FormElements/SwitchableRow/SwitchableRow.scss +19 -0
- package/dist/Atomic/FormElements/SwitchableRow/partial/AnyOuterClass.scss +18 -0
- package/dist/Atomic/FormElements/WidgetPseudoTable/WidgetPseudoTable.js +87 -0
- package/dist/Atomic/FormElements/WidgetPseudoTable/WidgetPseudoTable.scss +89 -0
- package/dist/Atomic/FormElements/WidgetPseudoTable/partial/AnyOuterClass.scss +76 -0
- package/dist/Atomic/FormElements/WidgetPseudoTable/partial/constructor.js +40 -0
- package/dist/Atomic/FormElements/WidgetWithSwitchableRows/WidgetWithSwitchableRows.js +98 -0
- package/dist/Atomic/FormElements/WidgetWithSwitchableRows/WidgetWithSwitchableRows.scss +89 -0
- package/dist/Atomic/FormElements/WidgetWithSwitchableRows/partial/AnyOuterClass.scss +76 -0
- package/dist/Atomic/FormElements/WidgetWithSwitchableRows/partial/constructor.js +39 -0
- package/dist/Atomic/UI/AccordionTable/AccordionTable.js +2 -2
- package/package.json +1 -1
|
@@ -207,7 +207,7 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
|
207
207
|
var uniProps = _objectSpread(_objectSpread({
|
|
208
208
|
className: "input ".concat(className),
|
|
209
209
|
placeholder: placeholder,
|
|
210
|
-
value: value || '',
|
|
210
|
+
value: value === undefined || value === null ? '' : value,
|
|
211
211
|
inputMode: isNumericMobileKeyboard ? 'numeric' : 'text',
|
|
212
212
|
disabled: disabled,
|
|
213
213
|
onChange: handle.change,
|
|
@@ -72,7 +72,9 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
72
72
|
blinkTime = _ref.blinkTime,
|
|
73
73
|
isPriceInput = _ref.isPriceInput,
|
|
74
74
|
_ref$isFocusDefault = _ref.isFocusDefault,
|
|
75
|
-
isFocusDefault = _ref$isFocusDefault === void 0 ? false : _ref$isFocusDefault
|
|
75
|
+
isFocusDefault = _ref$isFocusDefault === void 0 ? false : _ref$isFocusDefault,
|
|
76
|
+
_ref$isNotRenderButto = _ref.isNotRenderButtons,
|
|
77
|
+
isNotRenderButtons = _ref$isNotRenderButto === void 0 ? false : _ref$isNotRenderButto;
|
|
76
78
|
var DEFAULT_BLINK_TIME = 200; //REFS
|
|
77
79
|
|
|
78
80
|
var inputRef = (0, _react.useRef)(null);
|
|
@@ -130,9 +132,11 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
130
132
|
var inputValue = e.target ? (0, _fieldValueFormatters.filterNumeric)(e.target.value, {
|
|
131
133
|
type: 'int'
|
|
132
134
|
}) : e;
|
|
133
|
-
if (inputValue == '0') inputValue = min || '';
|
|
135
|
+
if (inputValue == '0') inputValue = min || ''; // ToDo - не совсем понятно что проверяется, т.к. при нажатии инкремента/декримента все равно в change приходит число, а не эвент
|
|
136
|
+
// ToDo - боюсь сломать, временно оставляю, выпилить через какое-то время
|
|
137
|
+
// if (inputValue && (decRef.current?.contains?.(e.target) || incRef.current?.contains?.(e.target))) {
|
|
134
138
|
|
|
135
|
-
if (inputValue
|
|
139
|
+
if (inputValue) {
|
|
136
140
|
inputValue = parseFloat(inputValue);
|
|
137
141
|
|
|
138
142
|
if (min && +min > inputValue) {
|
|
@@ -286,7 +290,7 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
286
290
|
value: (0, _fieldValueFormatters.formatToAddBitDepthPoints)((0, _fieldValueFormatters.formatToRemoveComa)(value)),
|
|
287
291
|
ref: inputRef,
|
|
288
292
|
type: "text"
|
|
289
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
293
|
+
})), !isNotRenderButtons ? /*#__PURE__*/_react.default.createElement("div", {
|
|
290
294
|
className: "input__nums"
|
|
291
295
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
292
296
|
"data-testid": "input--button--".concat(testId, "--minus"),
|
|
@@ -314,7 +318,7 @@ var NumericInput = function NumericInput(_ref) {
|
|
|
314
318
|
className: (0, _classnames.default)({
|
|
315
319
|
disabled: +value >= max
|
|
316
320
|
})
|
|
317
|
-
}))));
|
|
321
|
+
}))) : null);
|
|
318
322
|
}
|
|
319
323
|
|
|
320
324
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
|
|
14
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
+
|
|
16
|
+
var _Switcher = _interopRequireDefault(require("../Switcher/Switcher"));
|
|
17
|
+
|
|
18
|
+
require("./SwitchableRow.scss");
|
|
19
|
+
|
|
20
|
+
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); }
|
|
21
|
+
|
|
22
|
+
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; }
|
|
23
|
+
|
|
24
|
+
var RC_default = 'switchable-row';
|
|
25
|
+
|
|
26
|
+
var SwitchableRow = function SwitchableRow(props) {
|
|
27
|
+
var _ref = props || {},
|
|
28
|
+
_ref$RC = _ref.RC,
|
|
29
|
+
RC = _ref$RC === void 0 ? RC_default : _ref$RC,
|
|
30
|
+
className = _ref.className,
|
|
31
|
+
children = _ref.children,
|
|
32
|
+
isActive = _ref.isActive,
|
|
33
|
+
setIsActive = _ref.setIsActive,
|
|
34
|
+
switcherLabel = _ref.switcherLabel,
|
|
35
|
+
isSwitcherLabelBold = _ref.isSwitcherLabelBold,
|
|
36
|
+
testId = _ref.testId,
|
|
37
|
+
id = _ref.id;
|
|
38
|
+
|
|
39
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
40
|
+
className: (0, _classnames.default)(RC, className),
|
|
41
|
+
"data-testid": "".concat(RC, "-").concat(testId)
|
|
42
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
43
|
+
className: (0, _classnames.default)("".concat(RC, "__cell"))
|
|
44
|
+
}, /*#__PURE__*/_react.default.createElement(_Switcher.default, {
|
|
45
|
+
isActive: isActive,
|
|
46
|
+
onChange: setIsActive,
|
|
47
|
+
isLabelBold: isSwitcherLabelBold,
|
|
48
|
+
label: switcherLabel,
|
|
49
|
+
"data-testid": "switchable-row-".concat(testId, "-switcher")
|
|
50
|
+
})), children);
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
var _default = SwitchableRow;
|
|
54
|
+
exports.default = _default;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@import "../../../scss/vars";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
.switchable-row {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-flow: row nowrap;
|
|
7
|
+
justify-content: flex-start;
|
|
8
|
+
align-items: center;
|
|
9
|
+
|
|
10
|
+
&__cell {
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
height: 100%;
|
|
13
|
+
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-flow: row nowrap;
|
|
16
|
+
justify-content: flex-start;
|
|
17
|
+
align-items: center;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=swap');
|
|
2
|
+
|
|
3
|
+
.any-outer-class__switchable-row {
|
|
4
|
+
height: 40px;
|
|
5
|
+
|
|
6
|
+
.switchable-row__cell {
|
|
7
|
+
width: calc((100% - 200px)/3);
|
|
8
|
+
padding: 8px 0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.switchable-row__cell:first-of-type {
|
|
12
|
+
width: 200px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.switchable-row__cell>div {
|
|
16
|
+
width: 90%;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
|
15
|
+
|
|
16
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
|
+
|
|
18
|
+
require("./WidgetPseudoTable.scss");
|
|
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) { (0, _defineProperty2.default)(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
|
+
var RC = 'widget-pseudo-table';
|
|
25
|
+
|
|
26
|
+
var WidgetPseudoTable = function WidgetPseudoTable(props) {
|
|
27
|
+
var _ref = props || {},
|
|
28
|
+
className = _ref.className,
|
|
29
|
+
title = _ref.title,
|
|
30
|
+
rightHeaderContent = _ref.rightHeaderContent,
|
|
31
|
+
nullContentData = _ref.nullContentData,
|
|
32
|
+
_ref$isNotRenderThead = _ref.isNotRenderThead,
|
|
33
|
+
isNotRenderThead = _ref$isNotRenderThead === void 0 ? false : _ref$isNotRenderThead,
|
|
34
|
+
_ref$columns = _ref.columns,
|
|
35
|
+
columns = _ref$columns === void 0 ? [] : _ref$columns,
|
|
36
|
+
rows = _ref.rows,
|
|
37
|
+
CellComponent = _ref.CellComponent,
|
|
38
|
+
CellComponentProps = _ref.CellComponentProps,
|
|
39
|
+
_onChange = _ref.onChange;
|
|
40
|
+
|
|
41
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
42
|
+
className: (0, _classnames.default)(RC, className)
|
|
43
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
44
|
+
className: (0, _classnames.default)("".concat(RC, "__header"))
|
|
45
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
46
|
+
className: (0, _classnames.default)("".concat(RC, "__title-block"))
|
|
47
|
+
}, title), /*#__PURE__*/_react.default.createElement("div", {
|
|
48
|
+
className: (0, _classnames.default)("".concat(RC, "__right-header-content-block"))
|
|
49
|
+
}, rightHeaderContent)), /*#__PURE__*/_react.default.createElement("div", {
|
|
50
|
+
className: (0, _classnames.default)("".concat(RC, "__body"), (0, _defineProperty2.default)({}, "".concat(RC, "__body_no-content"), !(rows !== null && rows !== void 0 && rows.length)))
|
|
51
|
+
}, !!(rows !== null && rows !== void 0 && rows.length) && !isNotRenderThead && /*#__PURE__*/_react.default.createElement("div", {
|
|
52
|
+
className: (0, _classnames.default)("".concat(RC, "__thead"))
|
|
53
|
+
}, columns.map(function (field) {
|
|
54
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
55
|
+
key: field.key,
|
|
56
|
+
className: (0, _classnames.default)("".concat(RC, "__thead-cell"), field.theadCellClassName, field.columnClassName, (0, _defineProperty2.default)({}, "".concat(RC, "__thead-cell_reqiured"), field.isRequired)),
|
|
57
|
+
"data-key": field.key
|
|
58
|
+
}, field.label);
|
|
59
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
60
|
+
className: (0, _classnames.default)("".concat(RC, "__table"))
|
|
61
|
+
}, rows !== null && rows !== void 0 && rows.length ? rows.map(function (row) {
|
|
62
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
63
|
+
className: (0, _classnames.default)("".concat(RC, "__row")),
|
|
64
|
+
"data-id": row.id
|
|
65
|
+
}, columns.map(function (cell) {
|
|
66
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
67
|
+
className: (0, _classnames.default)("".concat(RC, "__cell"), cell.cellClassName, cell.columnClassName)
|
|
68
|
+
}, /*#__PURE__*/_react.default.createElement(CellComponent, (0, _extends2.default)({}, CellComponentProps, {
|
|
69
|
+
field: _objectSpread(_objectSpread({}, cell), {}, {
|
|
70
|
+
value: row[cell.key],
|
|
71
|
+
rowData: row
|
|
72
|
+
}),
|
|
73
|
+
onChange: function onChange(key, val) {
|
|
74
|
+
return _onChange(val, cell.key, row.id);
|
|
75
|
+
}
|
|
76
|
+
})));
|
|
77
|
+
}));
|
|
78
|
+
}) : /*#__PURE__*/_react.default.createElement("div", {
|
|
79
|
+
className: (0, _classnames.default)("".concat(RC, "__row")),
|
|
80
|
+
"data-id": "empty-row"
|
|
81
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
82
|
+
className: (0, _classnames.default)("".concat(RC, "__no-data-content"))
|
|
83
|
+
}, nullContentData !== null && nullContentData !== void 0 ? nullContentData : 'No data')))));
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
var _default = WidgetPseudoTable;
|
|
87
|
+
exports.default = _default;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
@import "../../../scss/vars";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
.widget-pseudo-table {
|
|
5
|
+
--row-height: 44px;
|
|
6
|
+
--thead-height: 20px;
|
|
7
|
+
--grid-template-columns: 1fr 1fr 1fr;
|
|
8
|
+
|
|
9
|
+
background-color: #FFFFFF;
|
|
10
|
+
border-radius: 3px;
|
|
11
|
+
border: 1px solid #E2E5EC;
|
|
12
|
+
|
|
13
|
+
&__header {
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
height: var(--row-height);
|
|
16
|
+
padding: 12px 16px 12px 16px;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-flow: row nowrap;
|
|
19
|
+
justify-content: space-between;
|
|
20
|
+
align-items: center;
|
|
21
|
+
border-bottom: 1px solid #E2E5EC;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&__title-block,
|
|
25
|
+
&__right-header-content-block {
|
|
26
|
+
width: fit-content;
|
|
27
|
+
height: 100%;
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-flow: row nowrap;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
align-items: center;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&__body {
|
|
35
|
+
padding: 8px 16px;
|
|
36
|
+
|
|
37
|
+
&_no-content {
|
|
38
|
+
padding: 0 16px;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&__thead {
|
|
43
|
+
box-sizing: border-box;
|
|
44
|
+
height: var(--thead-height);
|
|
45
|
+
display: grid;
|
|
46
|
+
grid-template-columns: var(--grid-template-columns);
|
|
47
|
+
|
|
48
|
+
&-cell {
|
|
49
|
+
text-align: right;
|
|
50
|
+
text-transform: uppercase;
|
|
51
|
+
|
|
52
|
+
&:first-of-type {
|
|
53
|
+
text-align: left;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&_reqiured {
|
|
57
|
+
&::after {
|
|
58
|
+
content: '*';
|
|
59
|
+
color: red;
|
|
60
|
+
margin-left: 3px;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&__row {
|
|
67
|
+
box-sizing: border-box;
|
|
68
|
+
height: var(--row-height);
|
|
69
|
+
padding: 8px 0;
|
|
70
|
+
display: grid;
|
|
71
|
+
grid-template-columns: var(--grid-template-columns);
|
|
72
|
+
border-bottom: 1px solid #EBEFF2;
|
|
73
|
+
|
|
74
|
+
&:last-of-type {
|
|
75
|
+
border-bottom: none;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&__cell {
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-flow: row nowrap;
|
|
82
|
+
justify-content: flex-end;
|
|
83
|
+
align-items: center;
|
|
84
|
+
|
|
85
|
+
&:first-of-type {
|
|
86
|
+
justify-content: flex-start;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
|
|
2
|
+
|
|
3
|
+
.any-outer-class__widget-pseudo-table {
|
|
4
|
+
&.widget-pseudo-table {
|
|
5
|
+
--grid-template-columns: 40% repeat(2, 1fr);
|
|
6
|
+
width: 565px;
|
|
7
|
+
|
|
8
|
+
border-radius: 6px;
|
|
9
|
+
box-shadow: 0px 0.7px 2px rgba(60, 77, 106, 0.1), 0px 1.9px 2px rgba(60, 77, 106, 0.07), 0px 4.5px 6px rgba(60, 77, 106, 0.05);
|
|
10
|
+
border: none;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.widget-pseudo-table__title-block {
|
|
14
|
+
font-family: 'Roboto';
|
|
15
|
+
font-style: normal;
|
|
16
|
+
font-weight: 500;
|
|
17
|
+
font-size: 13px;
|
|
18
|
+
line-height: 20px;
|
|
19
|
+
color: #1E1E2D;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.widget-pseudo-table__thead-cell {
|
|
23
|
+
font-family: 'Roboto';
|
|
24
|
+
font-style: normal;
|
|
25
|
+
font-weight: 400;
|
|
26
|
+
font-size: 10px;
|
|
27
|
+
line-height: 20px;
|
|
28
|
+
color: #9AA0B9;
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.widget-pseudo-table__cell {
|
|
34
|
+
.input__wrap {
|
|
35
|
+
width: 60px;
|
|
36
|
+
background: #F7FAFC;
|
|
37
|
+
border: 1px solid #E2E5EC;
|
|
38
|
+
border-radius: 0;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.input {
|
|
42
|
+
font-family: 'Roboto';
|
|
43
|
+
font-style: normal;
|
|
44
|
+
font-weight: 300;
|
|
45
|
+
font-size: 13px;
|
|
46
|
+
line-height: 20px;
|
|
47
|
+
color: #1E1E2D;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.switcher__button-content_active {
|
|
51
|
+
background-color: #2680C1;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.switcher__label {
|
|
55
|
+
font-family: 'Roboto';
|
|
56
|
+
font-style: normal;
|
|
57
|
+
font-weight: 400;
|
|
58
|
+
font-size: 13px;
|
|
59
|
+
line-height: 20px;
|
|
60
|
+
color: #1E1E2D;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
.delete-icon {
|
|
68
|
+
width: 16px;
|
|
69
|
+
height: 16px;
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-flow: row nowrap;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
align-items: center;
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
color: red;
|
|
76
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var constructor = [{
|
|
8
|
+
key: 'key1',
|
|
9
|
+
type: 'label',
|
|
10
|
+
label: 'lender',
|
|
11
|
+
cellClassName: ''
|
|
12
|
+
}, {
|
|
13
|
+
key: 'key2',
|
|
14
|
+
type: 'input',
|
|
15
|
+
label: 'Transaction Fee split, %',
|
|
16
|
+
isRequired: true,
|
|
17
|
+
theadCellClassName: '',
|
|
18
|
+
cellClassName: '',
|
|
19
|
+
columnClassName: '',
|
|
20
|
+
onlyNumbers: {
|
|
21
|
+
type: 'float',
|
|
22
|
+
decimalPlaces: 2
|
|
23
|
+
}
|
|
24
|
+
}, {
|
|
25
|
+
key: 'key3',
|
|
26
|
+
type: 'input',
|
|
27
|
+
label: 'Revenue Share split, %',
|
|
28
|
+
isRequired: true,
|
|
29
|
+
theadCellClassName: '',
|
|
30
|
+
cellClassName: '',
|
|
31
|
+
columnClassName: '',
|
|
32
|
+
onlyNumbers: {
|
|
33
|
+
type: 'float',
|
|
34
|
+
decimalPlaces: 2
|
|
35
|
+
},
|
|
36
|
+
min: 0,
|
|
37
|
+
max: 50
|
|
38
|
+
}];
|
|
39
|
+
var _default = constructor;
|
|
40
|
+
exports.default = _default;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
15
|
+
|
|
16
|
+
var _react = _interopRequireDefault(require("react"));
|
|
17
|
+
|
|
18
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
|
+
|
|
20
|
+
require("./WidgetWithSwitchableRows.scss");
|
|
21
|
+
|
|
22
|
+
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; }
|
|
23
|
+
|
|
24
|
+
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) { (0, _defineProperty2.default)(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; }
|
|
25
|
+
|
|
26
|
+
var RC = 'widget-with-switchable-rows';
|
|
27
|
+
|
|
28
|
+
var WidgetWithSwitchableRows = function WidgetWithSwitchableRows(props) {
|
|
29
|
+
var _ref = props || {},
|
|
30
|
+
className = _ref.className,
|
|
31
|
+
title = _ref.title,
|
|
32
|
+
rightHeaderContent = _ref.rightHeaderContent,
|
|
33
|
+
nullContentData = _ref.nullContentData,
|
|
34
|
+
_ref$columns = _ref.columns,
|
|
35
|
+
columns = _ref$columns === void 0 ? [] : _ref$columns,
|
|
36
|
+
rows = _ref.rows,
|
|
37
|
+
CellComponent = _ref.CellComponent,
|
|
38
|
+
CellComponentProps = _ref.CellComponentProps,
|
|
39
|
+
_onChange = _ref.onChange;
|
|
40
|
+
|
|
41
|
+
var preperedColumns = [_objectSpread(_objectSpread({}, columns[0]), {}, {
|
|
42
|
+
key: 'isActive',
|
|
43
|
+
type: 'switcher'
|
|
44
|
+
})].concat((0, _toConsumableArray2.default)(columns.slice(1)));
|
|
45
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
46
|
+
className: (0, _classnames.default)(RC, className)
|
|
47
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
48
|
+
className: (0, _classnames.default)("".concat(RC, "__header"))
|
|
49
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
50
|
+
className: (0, _classnames.default)("".concat(RC, "__title-block"))
|
|
51
|
+
}, title), /*#__PURE__*/_react.default.createElement("div", {
|
|
52
|
+
className: (0, _classnames.default)("".concat(RC, "__right-header-content-block"))
|
|
53
|
+
}, rightHeaderContent)), /*#__PURE__*/_react.default.createElement("div", {
|
|
54
|
+
className: (0, _classnames.default)("".concat(RC, "__body"), (0, _defineProperty2.default)({}, "".concat(RC, "__body_no-content"), !(rows !== null && rows !== void 0 && rows.length)))
|
|
55
|
+
}, !!(rows !== null && rows !== void 0 && rows.length) && /*#__PURE__*/_react.default.createElement("div", {
|
|
56
|
+
className: (0, _classnames.default)("".concat(RC, "__thead"))
|
|
57
|
+
}, preperedColumns.map(function (field) {
|
|
58
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
59
|
+
key: field.key,
|
|
60
|
+
className: (0, _classnames.default)("".concat(RC, "__thead-cell"), field.theadCellClassName, field.columnClassName, (0, _defineProperty2.default)({}, "".concat(RC, "__thead-cell_reqiured"), field.isRequired)),
|
|
61
|
+
"data-key": field.key
|
|
62
|
+
}, field.label);
|
|
63
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
64
|
+
className: (0, _classnames.default)("".concat(RC, "__table"))
|
|
65
|
+
}, rows !== null && rows !== void 0 && rows.length ? rows.map(function (row) {
|
|
66
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
67
|
+
className: (0, _classnames.default)("".concat(RC, "__row")),
|
|
68
|
+
"data-id": row.id
|
|
69
|
+
}, preperedColumns.map(function (cell) {
|
|
70
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
71
|
+
className: (0, _classnames.default)("".concat(RC, "__cell"), cell.cellClassName, cell.columnClassName)
|
|
72
|
+
}, /*#__PURE__*/_react.default.createElement(CellComponent, (0, _extends2.default)({}, CellComponentProps, {
|
|
73
|
+
field: _objectSpread(_objectSpread({}, cell), {}, {
|
|
74
|
+
value: row[cell.key],
|
|
75
|
+
rowData: row
|
|
76
|
+
}, cell.key === 'isActive' ? {
|
|
77
|
+
disabled: cell.disabled,
|
|
78
|
+
label: row.label,
|
|
79
|
+
isActive: row.isActive
|
|
80
|
+
} : {
|
|
81
|
+
disabled: !row.isActive,
|
|
82
|
+
label: cell.label
|
|
83
|
+
}),
|
|
84
|
+
onChange: function onChange(key, val) {
|
|
85
|
+
return _onChange(val, cell.key, row.id);
|
|
86
|
+
}
|
|
87
|
+
})));
|
|
88
|
+
}));
|
|
89
|
+
}) : /*#__PURE__*/_react.default.createElement("div", {
|
|
90
|
+
className: (0, _classnames.default)("".concat(RC, "__row")),
|
|
91
|
+
"data-id": "empty-row"
|
|
92
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
93
|
+
className: (0, _classnames.default)("".concat(RC, "__no-data-content"))
|
|
94
|
+
}, nullContentData !== null && nullContentData !== void 0 ? nullContentData : 'No data')))));
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
var _default = WidgetWithSwitchableRows;
|
|
98
|
+
exports.default = _default;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
@import "../../../scss/vars";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
.widget-with-switchable-rows {
|
|
5
|
+
--row-height: 44px;
|
|
6
|
+
--thead-height: 20px;
|
|
7
|
+
--grid-template-columns: 1fr 1fr 1fr;
|
|
8
|
+
|
|
9
|
+
background-color: #FFFFFF;
|
|
10
|
+
border-radius: 3px;
|
|
11
|
+
border: 1px solid #E2E5EC;
|
|
12
|
+
|
|
13
|
+
&__header {
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
height: var(--row-height);
|
|
16
|
+
padding: 12px 16px 12px 16px;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-flow: row nowrap;
|
|
19
|
+
justify-content: space-between;
|
|
20
|
+
align-items: center;
|
|
21
|
+
border-bottom: 1px solid #E2E5EC;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&__title-block,
|
|
25
|
+
&__right-header-content-block {
|
|
26
|
+
width: fit-content;
|
|
27
|
+
height: 100%;
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-flow: row nowrap;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
align-items: center;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&__body {
|
|
35
|
+
padding: 8px 16px;
|
|
36
|
+
|
|
37
|
+
&_no-content {
|
|
38
|
+
padding: 0 16px;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&__thead {
|
|
43
|
+
box-sizing: border-box;
|
|
44
|
+
height: var(--thead-height);
|
|
45
|
+
display: grid;
|
|
46
|
+
grid-template-columns: var(--grid-template-columns);
|
|
47
|
+
|
|
48
|
+
&-cell {
|
|
49
|
+
text-align: right;
|
|
50
|
+
text-transform: uppercase;
|
|
51
|
+
|
|
52
|
+
&:first-of-type {
|
|
53
|
+
text-align: left;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&_reqiured {
|
|
57
|
+
&::after {
|
|
58
|
+
content: '*';
|
|
59
|
+
color: red;
|
|
60
|
+
margin-left: 3px;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&__row {
|
|
67
|
+
box-sizing: border-box;
|
|
68
|
+
height: var(--row-height);
|
|
69
|
+
padding: 8px 0;
|
|
70
|
+
display: grid;
|
|
71
|
+
grid-template-columns: var(--grid-template-columns);
|
|
72
|
+
border-bottom: 1px solid #EBEFF2;
|
|
73
|
+
|
|
74
|
+
&:last-of-type {
|
|
75
|
+
border-bottom: none;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&__cell {
|
|
80
|
+
display: flex;
|
|
81
|
+
flex-flow: row nowrap;
|
|
82
|
+
justify-content: flex-end;
|
|
83
|
+
align-items: center;
|
|
84
|
+
|
|
85
|
+
&:first-of-type {
|
|
86
|
+
justify-content: flex-start;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
|
|
2
|
+
|
|
3
|
+
.any-outer-class__widget-with-switchable-rows {
|
|
4
|
+
&.widget-with-switchable-rows {
|
|
5
|
+
--grid-template-columns: 40% repeat(2, 1fr);
|
|
6
|
+
width: 565px;
|
|
7
|
+
|
|
8
|
+
border-radius: 6px;
|
|
9
|
+
box-shadow: 0px 0.7px 2px rgba(60, 77, 106, 0.1), 0px 1.9px 2px rgba(60, 77, 106, 0.07), 0px 4.5px 6px rgba(60, 77, 106, 0.05);
|
|
10
|
+
border: none;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.widget-with-switchable-rows__title-block {
|
|
14
|
+
font-family: 'Roboto';
|
|
15
|
+
font-style: normal;
|
|
16
|
+
font-weight: 500;
|
|
17
|
+
font-size: 13px;
|
|
18
|
+
line-height: 20px;
|
|
19
|
+
color: #1E1E2D;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.widget-with-switchable-rows__thead-cell {
|
|
23
|
+
font-family: 'Roboto';
|
|
24
|
+
font-style: normal;
|
|
25
|
+
font-weight: 400;
|
|
26
|
+
font-size: 10px;
|
|
27
|
+
line-height: 20px;
|
|
28
|
+
color: #9AA0B9;
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.widget-with-switchable-rows__cell {
|
|
34
|
+
.input__wrap {
|
|
35
|
+
width: 60px;
|
|
36
|
+
background: #F7FAFC;
|
|
37
|
+
border: 1px solid #E2E5EC;
|
|
38
|
+
border-radius: 0;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.input {
|
|
42
|
+
font-family: 'Roboto';
|
|
43
|
+
font-style: normal;
|
|
44
|
+
font-weight: 300;
|
|
45
|
+
font-size: 13px;
|
|
46
|
+
line-height: 20px;
|
|
47
|
+
color: #1E1E2D;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.switcher__button-content_active {
|
|
51
|
+
background-color: #2680C1;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.switcher__label {
|
|
55
|
+
font-family: 'Roboto';
|
|
56
|
+
font-style: normal;
|
|
57
|
+
font-weight: 400;
|
|
58
|
+
font-size: 13px;
|
|
59
|
+
line-height: 20px;
|
|
60
|
+
color: #1E1E2D;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
.delete-icon {
|
|
68
|
+
width: 16px;
|
|
69
|
+
height: 16px;
|
|
70
|
+
display: flex;
|
|
71
|
+
flex-flow: row nowrap;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
align-items: center;
|
|
74
|
+
cursor: pointer;
|
|
75
|
+
color: red;
|
|
76
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var constructor = [// первый элемент относится к свитчеру, можно пробросить доп. пропы
|
|
8
|
+
// невозможно сменить ключ и тип (ключ - isActive, тип - switcher)
|
|
9
|
+
// label применится к шапке таблички, но в самих строках label свитчера - это label строки
|
|
10
|
+
{
|
|
11
|
+
label: 'lender',
|
|
12
|
+
cellClassName: ''
|
|
13
|
+
}, {
|
|
14
|
+
key: 'key1',
|
|
15
|
+
label: 'Transaction Fee split, %',
|
|
16
|
+
isRequired: true,
|
|
17
|
+
theadCellClassName: '',
|
|
18
|
+
cellClassName: '',
|
|
19
|
+
columnClassName: '',
|
|
20
|
+
onlyNumbers: {
|
|
21
|
+
type: 'float',
|
|
22
|
+
decimalPlaces: 2
|
|
23
|
+
}
|
|
24
|
+
}, {
|
|
25
|
+
key: 'key2',
|
|
26
|
+
label: 'Revenue Share split, %',
|
|
27
|
+
isRequired: true,
|
|
28
|
+
theadCellClassName: '',
|
|
29
|
+
cellClassName: '',
|
|
30
|
+
columnClassName: '',
|
|
31
|
+
onlyNumbers: {
|
|
32
|
+
type: 'float',
|
|
33
|
+
decimalPlaces: 2
|
|
34
|
+
},
|
|
35
|
+
min: 0,
|
|
36
|
+
max: 50
|
|
37
|
+
}];
|
|
38
|
+
var _default = constructor;
|
|
39
|
+
exports.default = _default;
|
|
@@ -96,7 +96,7 @@ var AccordionTable = function AccordionTable(_ref) {
|
|
|
96
96
|
}, row.className)
|
|
97
97
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
98
98
|
className: "df w100"
|
|
99
|
-
}, renderTd(row.cols || row)), row.promoDetails || (
|
|
99
|
+
}, renderTd(row.cols || row)), row.promoDetails || (_row$cols2 = row.cols) !== null && _row$cols2 !== void 0 && _row$cols2.promoDetails ? /*#__PURE__*/_react.default.createElement("div", {
|
|
100
100
|
className: "accordion-table__tr-promo-wrapper"
|
|
101
101
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
102
102
|
className: "accordion-table__tr-promo"
|
|
@@ -104,7 +104,7 @@ var AccordionTable = function AccordionTable(_ref) {
|
|
|
104
104
|
className: "tr-promo-icon"
|
|
105
105
|
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
106
106
|
className: "tr-promo-label"
|
|
107
|
-
}, "PROMOTION"), row.promoDetails || ((_row$cols3 = row.cols) === null || _row$cols3 === void 0 ? void 0 : _row$cols3.promoDetails))));
|
|
107
|
+
}, "PROMOTION"), row.promoDetails || ((_row$cols3 = row.cols) === null || _row$cols3 === void 0 ? void 0 : _row$cols3.promoDetails))) : null);
|
|
108
108
|
});
|
|
109
109
|
};
|
|
110
110
|
|