@dxc-technology/halstack-react 0.0.0-fb2efcc → 0.0.0-fb5dc94
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 +46 -0
- package/dist/index.d.mts +6589 -0
- package/dist/index.d.ts +6589 -0
- package/dist/index.js +13742 -0
- package/dist/index.mjs +13684 -0
- package/package.json +69 -68
- package/BackgroundColorContext.js +0 -50
- package/ThemeContext.js +0 -246
- package/V3Select/V3Select.js +0 -455
- package/V3Select/index.d.ts +0 -27
- package/V3Textarea/V3Textarea.js +0 -260
- package/V3Textarea/index.d.ts +0 -27
- package/accordion/Accordion.js +0 -289
- package/accordion/index.d.ts +0 -28
- package/accordion-group/AccordionGroup.js +0 -184
- package/accordion-group/index.d.ts +0 -16
- package/alert/Alert.js +0 -309
- package/alert/index.d.ts +0 -51
- package/badge/Badge.js +0 -59
- package/box/Box.js +0 -152
- package/box/index.d.ts +0 -25
- package/button/Button.d.ts +0 -4
- package/button/Button.js +0 -182
- package/button/Button.stories.tsx +0 -306
- package/button/types.d.ts +0 -57
- package/button/types.js +0 -5
- package/card/Card.js +0 -200
- package/card/index.d.ts +0 -22
- package/checkbox/Checkbox.js +0 -275
- package/checkbox/index.d.ts +0 -24
- package/chip/Chip.js +0 -221
- package/chip/index.d.ts +0 -22
- package/common/OpenSans.css +0 -81
- package/common/RequiredComponent.js +0 -32
- package/common/fonts/OpenSans-Bold.ttf +0 -0
- package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
- package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
- package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
- package/common/fonts/OpenSans-Italic.ttf +0 -0
- package/common/fonts/OpenSans-Light.ttf +0 -0
- package/common/fonts/OpenSans-LightItalic.ttf +0 -0
- package/common/fonts/OpenSans-Regular.ttf +0 -0
- package/common/fonts/OpenSans-SemiBold.ttf +0 -0
- package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
- package/common/utils.js +0 -22
- package/common/variables.js +0 -1569
- package/date/Date.js +0 -373
- package/date/index.d.ts +0 -27
- package/date-input/DateInput.js +0 -396
- package/date-input/index.d.ts +0 -95
- package/dialog/Dialog.js +0 -184
- package/dialog/index.d.ts +0 -18
- package/dropdown/Dropdown.js +0 -450
- package/dropdown/index.d.ts +0 -26
- package/file-input/FileInput.js +0 -532
- package/file-input/FileItem.js +0 -193
- package/file-input/index.d.ts +0 -81
- package/footer/Footer.js +0 -297
- package/footer/Icons.js +0 -77
- package/footer/index.d.ts +0 -25
- package/header/Header.js +0 -326
- package/header/Icons.js +0 -59
- package/header/index.d.ts +0 -25
- package/heading/Heading.js +0 -176
- package/heading/index.d.ts +0 -17
- package/input-text/Icons.js +0 -22
- package/input-text/InputText.js +0 -611
- package/input-text/index.d.ts +0 -36
- package/layout/ApplicationLayout.js +0 -235
- package/layout/Icons.js +0 -55
- package/link/Link.js +0 -183
- package/link/index.d.ts +0 -23
- package/main.d.ts +0 -44
- package/main.js +0 -363
- package/number-input/NumberInput.js +0 -128
- package/number-input/NumberInputContext.js +0 -16
- package/number-input/index.d.ts +0 -113
- package/paginator/Icons.js +0 -66
- package/paginator/Paginator.js +0 -221
- package/paginator/index.d.ts +0 -20
- package/password-input/PasswordInput.js +0 -199
- package/password-input/index.d.ts +0 -94
- package/progress-bar/ProgressBar.js +0 -188
- package/progress-bar/index.d.ts +0 -18
- package/radio/Radio.js +0 -195
- package/radio/index.d.ts +0 -23
- package/resultsetTable/ResultsetTable.js +0 -274
- package/resultsetTable/index.d.ts +0 -19
- package/select/Select.js +0 -865
- package/select/index.d.ts +0 -131
- package/sidenav/Sidenav.js +0 -145
- package/sidenav/index.d.ts +0 -13
- package/slider/Slider.js +0 -340
- package/slider/index.d.ts +0 -29
- package/spinner/Spinner.js +0 -267
- package/spinner/index.d.ts +0 -17
- package/switch/Switch.js +0 -208
- package/switch/index.d.ts +0 -24
- package/table/Table.js +0 -118
- package/table/index.d.ts +0 -13
- package/tabs/Tabs.js +0 -259
- package/tabs/index.d.ts +0 -19
- package/tag/Tag.js +0 -208
- package/tag/index.d.ts +0 -24
- package/text-input/TextInput.js +0 -825
- package/text-input/index.d.ts +0 -135
- package/textarea/Textarea.js +0 -317
- package/textarea/index.d.ts +0 -117
- package/toggle/Toggle.js +0 -186
- package/toggle/index.d.ts +0 -21
- package/toggle-group/ToggleGroup.js +0 -243
- package/toggle-group/index.d.ts +0 -21
- package/upload/Upload.js +0 -201
- package/upload/buttons-upload/ButtonsUpload.js +0 -111
- package/upload/buttons-upload/Icons.js +0 -40
- package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
- package/upload/dragAndDropArea/Icons.js +0 -39
- package/upload/file-upload/FileToUpload.js +0 -115
- package/upload/file-upload/Icons.js +0 -66
- package/upload/files-upload/FilesToUpload.js +0 -109
- package/upload/index.d.ts +0 -15
- package/upload/transaction/Icons.js +0 -160
- package/upload/transaction/Transaction.js +0 -104
- package/upload/transactions/Transactions.js +0 -94
- package/useTheme.js +0 -22
- package/wizard/Icons.js +0 -65
- package/wizard/Wizard.js +0 -271
- package/wizard/index.d.ts +0 -18
|
@@ -1,188 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
|
8
|
-
value: true
|
|
9
|
-
});
|
|
10
|
-
exports["default"] = void 0;
|
|
11
|
-
|
|
12
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
-
|
|
14
|
-
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
15
|
-
|
|
16
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
17
|
-
|
|
18
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
21
|
-
|
|
22
|
-
var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
|
|
23
|
-
|
|
24
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
25
|
-
|
|
26
|
-
var _variables = require("../common/variables.js");
|
|
27
|
-
|
|
28
|
-
var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
29
|
-
|
|
30
|
-
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
|
|
31
|
-
|
|
32
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
33
|
-
|
|
34
|
-
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); }
|
|
35
|
-
|
|
36
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
|
|
37
|
-
|
|
38
|
-
var DxcProgressBar = function DxcProgressBar(_ref) {
|
|
39
|
-
var _ref$label = _ref.label,
|
|
40
|
-
label = _ref$label === void 0 ? "" : _ref$label,
|
|
41
|
-
_ref$helperText = _ref.helperText,
|
|
42
|
-
helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
|
|
43
|
-
_ref$overlay = _ref.overlay,
|
|
44
|
-
overlay = _ref$overlay === void 0 ? true : _ref$overlay,
|
|
45
|
-
value = _ref.value,
|
|
46
|
-
_ref$showValue = _ref.showValue,
|
|
47
|
-
showValue = _ref$showValue === void 0 ? false : _ref$showValue,
|
|
48
|
-
margin = _ref.margin;
|
|
49
|
-
var colorsTheme = (0, _useTheme["default"])();
|
|
50
|
-
var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
|
|
51
|
-
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
52
|
-
theme: colorsTheme.progressBar
|
|
53
|
-
}, /*#__PURE__*/_react["default"].createElement(BackgroundProgressBar, {
|
|
54
|
-
overlay: overlay
|
|
55
|
-
}, /*#__PURE__*/_react["default"].createElement(DXCProgressBar, {
|
|
56
|
-
overlay: overlay,
|
|
57
|
-
margin: margin,
|
|
58
|
-
backgroundType: backgroundType
|
|
59
|
-
}, /*#__PURE__*/_react["default"].createElement(InfoProgressBar, null, /*#__PURE__*/_react["default"].createElement(ProgressBarLabel, {
|
|
60
|
-
overlay: overlay,
|
|
61
|
-
backgroundType: backgroundType
|
|
62
|
-
}, label), /*#__PURE__*/_react["default"].createElement(ProgressBarProgress, {
|
|
63
|
-
overlay: overlay,
|
|
64
|
-
showValue: showValue,
|
|
65
|
-
backgroundType: backgroundType
|
|
66
|
-
}, value === "" ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100, " %")), /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
|
|
67
|
-
variant: showValue ? "determinate" : "indeterminate",
|
|
68
|
-
value: value === "" ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100,
|
|
69
|
-
helperText: helperText
|
|
70
|
-
}), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
|
|
71
|
-
overlay: overlay,
|
|
72
|
-
backgroundType: backgroundType
|
|
73
|
-
}, helperText))));
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
var BackgroundProgressBar = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n opacity: ", ";\n width: ", ";\n display: flex;\n flex-wrap: wrap;\n justify-content: ", ";\n height: ", ";\n align-items: ", ";\n min-width: 100px;\n max-width: ", ";\n position: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n right: ", ";\n z-index: ", ";\n width: 100%;\n"])), function (props) {
|
|
77
|
-
return props.overlay === true ? "".concat(props.theme.overlayColor) : "transparent";
|
|
78
|
-
}, function (props) {
|
|
79
|
-
return props.overlay === true && "0.8";
|
|
80
|
-
}, function (props) {
|
|
81
|
-
return props.overlay === true ? "100%" : "";
|
|
82
|
-
}, function (props) {
|
|
83
|
-
return props.overlay === true ? "center" : "";
|
|
84
|
-
}, function (props) {
|
|
85
|
-
return props.overlay === true ? "100vh" : "";
|
|
86
|
-
}, function (props) {
|
|
87
|
-
return props.overlay === true ? "center" : "";
|
|
88
|
-
}, function (props) {
|
|
89
|
-
return props.overlay === true ? "100%" : "";
|
|
90
|
-
}, function (props) {
|
|
91
|
-
return props.overlay === true ? "fixed" : "";
|
|
92
|
-
}, function (props) {
|
|
93
|
-
return props.overlay === true ? "0" : "";
|
|
94
|
-
}, function (props) {
|
|
95
|
-
return props.overlay === true ? "0" : "";
|
|
96
|
-
}, function (props) {
|
|
97
|
-
return props.overlay === true ? "0" : "";
|
|
98
|
-
}, function (props) {
|
|
99
|
-
return props.overlay === true ? "0" : "";
|
|
100
|
-
}, function (props) {
|
|
101
|
-
return props.overlay ? 1300 : "";
|
|
102
|
-
});
|
|
103
|
-
|
|
104
|
-
var DXCProgressBar = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: ", ";\n width: ", ";\n .MuiLinearProgress-root {\n height: ", ";\n background-color: ", ";\n border-radius: ", ";\n margin-bottom: ", ";\n }\n .MuiLinearProgress-bar {\n background-color: ", ";\n }\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
|
|
105
|
-
return props.overlay === true && "100" || "0";
|
|
106
|
-
}, function (props) {
|
|
107
|
-
return props.overlay === true ? "80%" : "100%";
|
|
108
|
-
}, function (props) {
|
|
109
|
-
return props.theme.thickness;
|
|
110
|
-
}, function (props) {
|
|
111
|
-
return props.theme.totalLineColor;
|
|
112
|
-
}, function (props) {
|
|
113
|
-
return props.theme.borderRadius;
|
|
114
|
-
}, function (props) {
|
|
115
|
-
return props.helperText !== "" && "8px";
|
|
116
|
-
}, function (props) {
|
|
117
|
-
return props.backgroundType === "dark" ? props.theme.trackLineColorOnDark : props.theme.trackLineColor;
|
|
118
|
-
}, function (props) {
|
|
119
|
-
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
120
|
-
}, function (props) {
|
|
121
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
|
|
122
|
-
}, function (props) {
|
|
123
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
|
|
124
|
-
}, function (props) {
|
|
125
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
|
|
126
|
-
}, function (props) {
|
|
127
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
128
|
-
});
|
|
129
|
-
|
|
130
|
-
var InfoProgressBar = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n width: 685px;\n flex-wrap: wrap;\n width: 100%;\n margin-bottom: 8px;\n align-items: baseline;\n justify-content: space-between;\n"])));
|
|
131
|
-
|
|
132
|
-
var ProgressBarLabel = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (props) {
|
|
133
|
-
return props.theme.labelFontFamily;
|
|
134
|
-
}, function (props) {
|
|
135
|
-
return props.theme.labelFontStyle;
|
|
136
|
-
}, function (props) {
|
|
137
|
-
return props.theme.labelFontSize;
|
|
138
|
-
}, function (props) {
|
|
139
|
-
return props.theme.labelFontWeight;
|
|
140
|
-
}, function (props) {
|
|
141
|
-
return props.theme.labelFontTextTransform;
|
|
142
|
-
}, function (props) {
|
|
143
|
-
return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.labelFontColor;
|
|
144
|
-
});
|
|
145
|
-
|
|
146
|
-
var ProgressBarProgress = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n display: ", ";\n flex-shrink: 0;\n"])), function (props) {
|
|
147
|
-
return props.theme.valueFontFamily;
|
|
148
|
-
}, function (props) {
|
|
149
|
-
return props.theme.valueFontStyle;
|
|
150
|
-
}, function (props) {
|
|
151
|
-
return props.theme.valueFontSize;
|
|
152
|
-
}, function (props) {
|
|
153
|
-
return props.theme.valueFontWeight;
|
|
154
|
-
}, function (props) {
|
|
155
|
-
return props.theme.valueFontTextTransform;
|
|
156
|
-
}, function (props) {
|
|
157
|
-
return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.valueFontColor;
|
|
158
|
-
}, function (props) {
|
|
159
|
-
return props.value !== "" && props.showValue === true && "block" || "none";
|
|
160
|
-
});
|
|
161
|
-
|
|
162
|
-
var HelperText = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n"])), function (props) {
|
|
163
|
-
return props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.overlay === true ? "#FFFFFF" : props.theme.helperTextFontColor;
|
|
164
|
-
}, function (props) {
|
|
165
|
-
return props.theme.fontFamily;
|
|
166
|
-
}, function (props) {
|
|
167
|
-
return props.theme.helperTextFontSize;
|
|
168
|
-
}, function (props) {
|
|
169
|
-
return props.theme.helperTextFontStyle;
|
|
170
|
-
}, function (props) {
|
|
171
|
-
return props.theme.helperTextFontWeight;
|
|
172
|
-
});
|
|
173
|
-
|
|
174
|
-
DxcProgressBar.propTypes = {
|
|
175
|
-
label: _propTypes["default"].string,
|
|
176
|
-
helperText: _propTypes["default"].string,
|
|
177
|
-
overlay: _propTypes["default"].bool,
|
|
178
|
-
value: _propTypes["default"].number,
|
|
179
|
-
showValue: _propTypes["default"].bool,
|
|
180
|
-
margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
181
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
182
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
183
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
184
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
185
|
-
}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
|
|
186
|
-
};
|
|
187
|
-
var _default = DxcProgressBar;
|
|
188
|
-
exports["default"] = _default;
|
package/progress-bar/index.d.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
2
|
-
type Margin = {
|
|
3
|
-
top?: Space;
|
|
4
|
-
bottom?: Space;
|
|
5
|
-
left?: Space;
|
|
6
|
-
right?: Space;
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
type Props = {
|
|
10
|
-
label?: string;
|
|
11
|
-
helperText?: string;
|
|
12
|
-
overlay?: boolean;
|
|
13
|
-
value?: number;
|
|
14
|
-
showValue?: boolean,
|
|
15
|
-
margin?: Space | Margin;
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
export default function DxcProgressBar(props: Props): JSX.Element;
|
package/radio/Radio.js
DELETED
|
@@ -1,195 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
|
-
Object.defineProperty(exports, "__esModule", {
|
|
8
|
-
value: true
|
|
9
|
-
});
|
|
10
|
-
exports["default"] = void 0;
|
|
11
|
-
|
|
12
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
13
|
-
|
|
14
|
-
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
15
|
-
|
|
16
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
17
|
-
|
|
18
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
19
|
-
|
|
20
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
-
|
|
22
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
23
|
-
|
|
24
|
-
var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
|
|
25
|
-
|
|
26
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
27
|
-
|
|
28
|
-
var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
|
|
29
|
-
|
|
30
|
-
var _variables = require("../common/variables.js");
|
|
31
|
-
|
|
32
|
-
var _utils = require("../common/utils.js");
|
|
33
|
-
|
|
34
|
-
var _useTheme = _interopRequireDefault(require("../useTheme.js"));
|
|
35
|
-
|
|
36
|
-
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
|
|
37
|
-
|
|
38
|
-
var _templateObject, _templateObject2;
|
|
39
|
-
|
|
40
|
-
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); }
|
|
41
|
-
|
|
42
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
|
|
43
|
-
|
|
44
|
-
var DxcRadio = function DxcRadio(_ref) {
|
|
45
|
-
var _ref$checked = _ref.checked,
|
|
46
|
-
checked = _ref$checked === void 0 ? false : _ref$checked,
|
|
47
|
-
value = _ref.value,
|
|
48
|
-
label = _ref.label,
|
|
49
|
-
_ref$labelPosition = _ref.labelPosition,
|
|
50
|
-
labelPosition = _ref$labelPosition === void 0 ? "before" : _ref$labelPosition,
|
|
51
|
-
name = _ref.name,
|
|
52
|
-
_ref$disabled = _ref.disabled,
|
|
53
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
54
|
-
onClick = _ref.onClick,
|
|
55
|
-
_ref$required = _ref.required,
|
|
56
|
-
required = _ref$required === void 0 ? false : _ref$required,
|
|
57
|
-
margin = _ref.margin,
|
|
58
|
-
_ref$size = _ref.size,
|
|
59
|
-
size = _ref$size === void 0 ? "fitContent" : _ref$size;
|
|
60
|
-
|
|
61
|
-
var _useState = (0, _react.useState)(false),
|
|
62
|
-
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
63
|
-
innerChecked = _useState2[0],
|
|
64
|
-
setInnerChecked = _useState2[1];
|
|
65
|
-
|
|
66
|
-
var colorsTheme = (0, _useTheme["default"])();
|
|
67
|
-
var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
|
|
68
|
-
|
|
69
|
-
var handlerRadioChange = function handlerRadioChange(value) {
|
|
70
|
-
if (checked == null) {
|
|
71
|
-
setInnerChecked(true);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
if (typeof onClick === "function") {
|
|
75
|
-
onClick(true);
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
80
|
-
theme: colorsTheme.radio
|
|
81
|
-
}, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
|
|
82
|
-
id: name,
|
|
83
|
-
labelPosition: labelPosition,
|
|
84
|
-
disabled: disabled,
|
|
85
|
-
margin: margin,
|
|
86
|
-
size: size,
|
|
87
|
-
backgroundType: backgroundType
|
|
88
|
-
}, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
|
|
89
|
-
checked: checked != null && checked || innerChecked,
|
|
90
|
-
name: name,
|
|
91
|
-
onClick: handlerRadioChange,
|
|
92
|
-
value: value,
|
|
93
|
-
label: label,
|
|
94
|
-
disabled: disabled,
|
|
95
|
-
disableRipple: true
|
|
96
|
-
}), /*#__PURE__*/_react["default"].createElement(LabelContainer, {
|
|
97
|
-
checked: checked || innerChecked,
|
|
98
|
-
labelPosition: labelPosition,
|
|
99
|
-
disabled: disabled,
|
|
100
|
-
onClick: !disabled && handlerRadioChange || null,
|
|
101
|
-
backgroundType: backgroundType
|
|
102
|
-
}, required && /*#__PURE__*/_react["default"].createElement(_RequiredComponent["default"], null), label)));
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
var sizes = {
|
|
106
|
-
small: "120px",
|
|
107
|
-
medium: "240px",
|
|
108
|
-
large: "480px",
|
|
109
|
-
fillParent: "100%",
|
|
110
|
-
fitContent: "unset"
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
var calculateWidth = function calculateWidth(margin, size) {
|
|
114
|
-
if (size === "fillParent") {
|
|
115
|
-
return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
return sizes[size];
|
|
119
|
-
};
|
|
120
|
-
|
|
121
|
-
var RadioContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n\n display: inline-flex;\n align-items: center;\n max-height: 42px;\n position: relative;\n flex-direction: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n cursor: ", ";\n .MuiButtonBase-root {\n width: auto;\n height: auto;\n padding: 10px;\n margin: 2px;\n ", ": ", ";\n padding-left: ", ";\n padding-right: ", ";\n margin-left: ", ";\n margin-right: ", ";\n .MuiIconButton-label {\n .MuiSvgIcon-root {\n height: ", ";\n width: ", ";\n }\n color: ", ";\n\n > div > :nth-child(2) path {\n color: ", ";\n }\n }\n\n &.Mui-focusVisible {\n background-color: transparent;\n .MuiSvgIcon-root {\n outline: ", "\n auto 1px;\n }\n }\n :hover {\n background-color: transparent;\n }\n .MuiTouchRipple-ripple {\n height: 40px !important;\n width: 40px !important;\n top: 0px !important;\n left: 0px !important;\n }\n }\n .MuiRadio-colorSecondary.Mui-checked {\n color: ", ";\n :hover {\n background-color: transparent;\n }\n }\n"])), function (props) {
|
|
122
|
-
return calculateWidth(props.margin, props.size);
|
|
123
|
-
}, function (props) {
|
|
124
|
-
return props.labelPosition === "before" ? "row-reverse" : "row";
|
|
125
|
-
}, function (props) {
|
|
126
|
-
return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
|
|
127
|
-
}, function (props) {
|
|
128
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
|
|
129
|
-
}, function (props) {
|
|
130
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
|
|
131
|
-
}, function (props) {
|
|
132
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
|
|
133
|
-
}, function (props) {
|
|
134
|
-
return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
|
|
135
|
-
}, function (props) {
|
|
136
|
-
return props.disabled === true ? "not-allowed" : "default";
|
|
137
|
-
}, function (props) {
|
|
138
|
-
return props.labelPosition === "after" ? "padding-right" : "padding-left";
|
|
139
|
-
}, function (props) {
|
|
140
|
-
return props.theme.circleLabelSpacing;
|
|
141
|
-
}, function (props) {
|
|
142
|
-
return props.labelPosition === "after" ? "0px" : "";
|
|
143
|
-
}, function (props) {
|
|
144
|
-
return props.labelPosition === "before" ? "0px" : "";
|
|
145
|
-
}, function (props) {
|
|
146
|
-
return props.labelPosition === "after" ? "0px" : "";
|
|
147
|
-
}, function (props) {
|
|
148
|
-
return props.labelPosition === "before" ? "0px" : "";
|
|
149
|
-
}, function (props) {
|
|
150
|
-
return props.theme.circleSize;
|
|
151
|
-
}, function (props) {
|
|
152
|
-
return props.theme.circleSize;
|
|
153
|
-
}, function (props) {
|
|
154
|
-
return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
|
|
155
|
-
}, function (props) {
|
|
156
|
-
return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
|
|
157
|
-
}, function (props) {
|
|
158
|
-
return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
|
|
159
|
-
}, function (props) {
|
|
160
|
-
return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
|
|
161
|
-
});
|
|
162
|
-
|
|
163
|
-
var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n color: ", ";\n cursor: ", ";\n"])), function (props) {
|
|
164
|
-
return props.theme.fontFamily;
|
|
165
|
-
}, function (props) {
|
|
166
|
-
return props.theme.fontSize;
|
|
167
|
-
}, function (props) {
|
|
168
|
-
return props.theme.fontWeight;
|
|
169
|
-
}, function (props) {
|
|
170
|
-
return props.theme.fontStyle;
|
|
171
|
-
}, function (props) {
|
|
172
|
-
return props.backgroundType === "dark" ? props.disabled && props.theme.disabledFontColorOnDark || props.theme.fontColorOnDark : props.disabled && props.theme.disabledFontColor || props.theme.fontColor;
|
|
173
|
-
}, function (props) {
|
|
174
|
-
return props.disabled === true ? "not-allowed" : "pointer";
|
|
175
|
-
});
|
|
176
|
-
|
|
177
|
-
DxcRadio.propTypes = {
|
|
178
|
-
size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
|
|
179
|
-
checked: _propTypes["default"].bool,
|
|
180
|
-
value: _propTypes["default"].any,
|
|
181
|
-
label: _propTypes["default"].string,
|
|
182
|
-
labelPosition: _propTypes["default"].oneOf(["after", "before", ""]),
|
|
183
|
-
name: _propTypes["default"].string,
|
|
184
|
-
disabled: _propTypes["default"].bool,
|
|
185
|
-
onClick: _propTypes["default"].func,
|
|
186
|
-
required: _propTypes["default"].bool,
|
|
187
|
-
margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
188
|
-
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
189
|
-
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
190
|
-
left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
191
|
-
right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
|
|
192
|
-
}), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
|
|
193
|
-
};
|
|
194
|
-
var _default = DxcRadio;
|
|
195
|
-
exports["default"] = _default;
|
package/radio/index.d.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
|
|
2
|
-
type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
-
type Margin = {
|
|
4
|
-
top?: Space;
|
|
5
|
-
bottom?: Space;
|
|
6
|
-
left?: Space;
|
|
7
|
-
right?: Space;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
type Props = {
|
|
11
|
-
checked?: boolean;
|
|
12
|
-
value?: any;
|
|
13
|
-
label?: string;
|
|
14
|
-
labelPosition?: "before" | "after";
|
|
15
|
-
name?: string,
|
|
16
|
-
disabled?: boolean;
|
|
17
|
-
onClick?: void;
|
|
18
|
-
required?: boolean;
|
|
19
|
-
margin?: Space | Margin;
|
|
20
|
-
size?: Size;
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export default function DxcRadio(props: Props): JSX.Element;
|