@dxc-technology/halstack-react 0.0.0-f44cd28 → 0.0.0-f77ec3a
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 +2 -2
- package/babel.config.js +0 -1
- package/dist/BackgroundColorContext.js +46 -0
- package/dist/ThemeContext.js +213 -153
- package/dist/V3Select/V3Select.js +549 -0
- package/dist/V3Select/index.d.ts +27 -0
- package/dist/V3Textarea/V3Textarea.js +264 -0
- package/dist/V3Textarea/index.d.ts +27 -0
- package/dist/accordion/Accordion.js +131 -46
- package/dist/accordion/index.d.ts +28 -0
- package/dist/accordion-group/AccordionGroup.js +34 -4
- package/dist/accordion-group/index.d.ts +16 -0
- package/dist/alert/Alert.js +180 -80
- package/dist/alert/index.d.ts +51 -0
- package/dist/badge/Badge.js +28 -7
- package/dist/box/Box.js +29 -18
- package/dist/box/index.d.ts +25 -0
- package/dist/button/Button.js +62 -23
- package/dist/button/index.d.ts +24 -0
- package/dist/card/Card.js +72 -35
- package/dist/card/index.d.ts +22 -0
- package/dist/checkbox/Checkbox.js +98 -28
- package/dist/checkbox/index.d.ts +24 -0
- package/dist/chip/Chip.js +92 -32
- package/dist/chip/index.d.ts +22 -0
- package/dist/common/utils.js +2 -22
- package/dist/common/variables.js +1404 -179
- package/dist/date/Date.js +65 -38
- package/dist/date/index.d.ts +27 -0
- package/dist/date-input/DateInput.js +400 -0
- package/dist/date-input/index.d.ts +95 -0
- package/dist/dialog/Dialog.js +54 -31
- package/dist/dialog/index.d.ts +18 -0
- package/dist/dropdown/Dropdown.js +173 -75
- package/dist/dropdown/index.d.ts +26 -0
- package/dist/file-input/FileInput.js +644 -0
- package/dist/file-input/FileItem.js +287 -0
- package/dist/file-input/index.d.ts +81 -0
- package/dist/footer/Footer.js +89 -34
- package/dist/footer/Icons.js +77 -0
- package/dist/footer/index.d.ts +25 -0
- package/dist/header/Header.js +190 -88
- package/dist/header/Icons.js +59 -0
- package/dist/header/index.d.ts +25 -0
- package/dist/heading/Heading.js +93 -16
- package/dist/heading/index.d.ts +17 -0
- package/dist/input-text/Icons.js +22 -0
- package/dist/input-text/InputText.js +247 -101
- package/dist/input-text/index.d.ts +36 -0
- package/dist/layout/ApplicationLayout.js +15 -18
- package/dist/layout/Icons.js +55 -0
- package/dist/link/Link.js +84 -34
- package/dist/link/index.d.ts +23 -0
- package/dist/main.d.ts +40 -0
- package/dist/main.js +72 -16
- package/dist/number-input/NumberInput.js +136 -0
- package/dist/number-input/NumberInputContext.js +16 -0
- package/dist/number-input/index.d.ts +113 -0
- package/dist/paginator/Icons.js +66 -0
- package/dist/paginator/Paginator.js +102 -44
- package/dist/paginator/index.d.ts +20 -0
- package/dist/password-input/PasswordInput.js +203 -0
- package/dist/password-input/index.d.ts +94 -0
- package/dist/progress-bar/ProgressBar.js +91 -33
- package/dist/progress-bar/index.d.ts +18 -0
- package/dist/radio/Radio.js +30 -11
- package/dist/radio/index.d.ts +23 -0
- package/dist/resultsetTable/ResultsetTable.js +79 -48
- package/dist/resultsetTable/index.d.ts +19 -0
- package/dist/select/Select.js +899 -278
- package/dist/select/index.d.ts +53 -0
- package/dist/sidenav/Sidenav.js +64 -8
- package/dist/sidenav/index.d.ts +13 -0
- package/dist/slider/Slider.js +212 -65
- package/dist/slider/index.d.ts +29 -0
- package/dist/spinner/Spinner.js +247 -56
- package/dist/spinner/index.d.ts +17 -0
- package/dist/stories/Button.js +71 -0
- package/dist/stories/Button.stories.js +55 -0
- package/dist/stories/Header.js +67 -0
- package/dist/stories/Header.stories.js +31 -0
- package/dist/stories/Introduction.stories.mdx +211 -0
- package/dist/stories/Page.js +68 -0
- package/dist/stories/Page.stories.js +39 -0
- package/dist/stories/assets/code-brackets.svg +1 -0
- package/dist/stories/assets/colors.svg +1 -0
- package/dist/stories/assets/comments.svg +1 -0
- package/dist/stories/assets/direction.svg +1 -0
- package/dist/stories/assets/flow.svg +1 -0
- package/dist/stories/assets/plugin.svg +1 -0
- package/dist/stories/assets/repo.svg +1 -0
- package/dist/stories/assets/stackalt.svg +1 -0
- package/dist/stories/button.css +30 -0
- package/dist/stories/header.css +26 -0
- package/dist/stories/page.css +69 -0
- package/dist/switch/Switch.js +51 -19
- package/dist/switch/index.d.ts +24 -0
- package/dist/table/Table.js +48 -18
- package/dist/table/index.d.ts +13 -0
- package/dist/tabs/Tabs.js +58 -17
- package/dist/tabs/index.d.ts +19 -0
- package/dist/tag/Tag.js +68 -35
- package/dist/tag/index.d.ts +24 -0
- package/dist/text-input/TextInput.js +974 -0
- package/dist/text-input/index.d.ts +135 -0
- package/dist/textarea/Textarea.js +246 -97
- package/dist/textarea/index.d.ts +117 -0
- package/dist/toggle/Toggle.js +16 -19
- package/dist/toggle/index.d.ts +21 -0
- package/dist/toggle-group/ToggleGroup.js +150 -32
- package/dist/toggle-group/index.d.ts +21 -0
- package/dist/upload/Upload.js +13 -8
- package/dist/upload/buttons-upload/ButtonsUpload.js +32 -19
- package/dist/upload/buttons-upload/Icons.js +40 -0
- package/dist/upload/dragAndDropArea/DragAndDropArea.js +84 -34
- package/dist/upload/dragAndDropArea/Icons.js +39 -0
- package/dist/upload/file-upload/FileToUpload.js +64 -33
- package/dist/upload/file-upload/Icons.js +66 -0
- package/dist/upload/files-upload/FilesToUpload.js +16 -16
- package/dist/upload/index.d.ts +15 -0
- package/dist/upload/transaction/Icons.js +160 -0
- package/dist/upload/transaction/Transaction.js +42 -49
- package/dist/upload/transactions/Transactions.js +38 -20
- package/dist/wizard/Icons.js +65 -0
- package/dist/wizard/Wizard.js +126 -47
- package/dist/wizard/index.d.ts +18 -0
- package/package.json +19 -13
- package/test/AccordionGroup.test.js +16 -0
- package/test/Date.test.js +15 -13
- package/test/DateInput.test.js +242 -0
- package/test/Dropdown.test.js +15 -0
- package/test/FileInput.test.js +201 -0
- package/test/Footer.test.js +2 -7
- package/test/Header.test.js +5 -10
- package/test/Heading.test.js +60 -12
- package/test/InputText.test.js +1 -2
- package/test/Link.test.js +3 -2
- package/test/NumberInput.test.js +259 -0
- package/test/Paginator.test.js +6 -2
- package/test/PasswordInput.test.js +83 -0
- package/test/ResultsetTable.test.js +6 -6
- package/test/Select.test.js +371 -148
- package/test/Slider.test.js +9 -17
- package/test/Spinner.test.js +5 -0
- package/test/TextInput.test.js +732 -0
- package/test/Textarea.test.js +193 -0
- package/test/ToggleGroup.test.js +5 -1
- package/test/Upload.test.js +1 -1
- package/test/V3Select.test.js +212 -0
- package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
- package/dist/accordion/Accordion.stories.js +0 -207
- package/dist/accordion/readme.md +0 -96
- package/dist/accordion-group/AccordionGroup.stories.js +0 -207
- package/dist/accordion-group/readme.md +0 -70
- package/dist/alert/Alert.stories.js +0 -158
- package/dist/alert/close.svg +0 -4
- package/dist/alert/error.svg +0 -4
- package/dist/alert/info.svg +0 -4
- package/dist/alert/readme.md +0 -43
- package/dist/alert/success.svg +0 -4
- package/dist/alert/warning.svg +0 -4
- package/dist/button/Button.stories.js +0 -224
- package/dist/button/readme.md +0 -93
- package/dist/checkbox/Checkbox.stories.js +0 -144
- package/dist/checkbox/readme.md +0 -116
- package/dist/common/services/example-service.js +0 -10
- package/dist/common/services/example-service.test.js +0 -12
- package/dist/date/Date.stories.js +0 -205
- package/dist/date/calendar.svg +0 -1
- package/dist/date/calendar_dark.svg +0 -1
- package/dist/date/readme.md +0 -73
- package/dist/dialog/Dialog.stories.js +0 -217
- package/dist/dialog/readme.md +0 -32
- package/dist/dropdown/Dropdown.stories.js +0 -249
- package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
- package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
- package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
- package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
- package/dist/dropdown/readme.md +0 -69
- package/dist/footer/Footer.stories.js +0 -94
- package/dist/footer/dxc_logo_wht.png +0 -0
- package/dist/footer/readme.md +0 -41
- package/dist/header/Header.stories.js +0 -176
- package/dist/header/close_icon.svg +0 -1
- package/dist/header/dxc_logo_black.png +0 -0
- package/dist/header/dxc_logo_blk_rgb.svg +0 -6
- package/dist/header/dxc_logo_white.png +0 -0
- package/dist/header/hamb_menu_black.svg +0 -1
- package/dist/header/hamb_menu_white.svg +0 -1
- package/dist/header/readme.md +0 -33
- package/dist/input-text/InputText.stories.js +0 -209
- package/dist/input-text/error.svg +0 -1
- package/dist/input-text/readme.md +0 -91
- package/dist/layout/facebook.svg +0 -45
- package/dist/layout/linkedin.svg +0 -50
- package/dist/layout/twitter.svg +0 -53
- package/dist/link/readme.md +0 -51
- package/dist/paginator/images/next.svg +0 -3
- package/dist/paginator/images/nextPage.svg +0 -3
- package/dist/paginator/images/previous.svg +0 -3
- package/dist/paginator/images/previousPage.svg +0 -3
- package/dist/paginator/readme.md +0 -50
- package/dist/progress-bar/ProgressBar.stories.js +0 -280
- package/dist/progress-bar/readme.md +0 -63
- package/dist/radio/Radio.stories.js +0 -166
- package/dist/radio/readme.md +0 -70
- package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
- package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
- package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
- package/dist/select/Select.stories.js +0 -235
- package/dist/select/readme.md +0 -72
- package/dist/slider/Slider.stories.js +0 -241
- package/dist/slider/readme.md +0 -64
- package/dist/spinner/Spinner.stories.js +0 -183
- package/dist/spinner/readme.md +0 -65
- package/dist/switch/Switch.stories.js +0 -134
- package/dist/switch/readme.md +0 -133
- package/dist/tabs/Tabs.stories.js +0 -130
- package/dist/tabs/readme.md +0 -78
- package/dist/tabs-for-sections/TabsForSections.js +0 -92
- package/dist/tabs-for-sections/readme.md +0 -78
- package/dist/toggle/Toggle.stories.js +0 -297
- package/dist/toggle/readme.md +0 -80
- package/dist/toggle-group/readme.md +0 -82
- package/dist/upload/Upload.stories.js +0 -72
- package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
- package/dist/upload/buttons-upload/upload-button.svg +0 -1
- package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
- package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
- package/dist/upload/file-upload/audio-icon.svg +0 -4
- package/dist/upload/file-upload/close.svg +0 -4
- package/dist/upload/file-upload/file-icon.svg +0 -4
- package/dist/upload/file-upload/video-icon.svg +0 -4
- package/dist/upload/readme.md +0 -37
- package/dist/upload/transaction/audio-icon-err.svg +0 -4
- package/dist/upload/transaction/audio-icon.svg +0 -4
- package/dist/upload/transaction/error-icon.svg +0 -4
- package/dist/upload/transaction/file-icon-err.svg +0 -4
- package/dist/upload/transaction/file-icon.svg +0 -4
- package/dist/upload/transaction/image-icon-err.svg +0 -4
- package/dist/upload/transaction/image-icon.svg +0 -4
- package/dist/upload/transaction/success-icon.svg +0 -4
- package/dist/upload/transaction/video-icon-err.svg +0 -4
- package/dist/upload/transaction/video-icon.svg +0 -4
- package/dist/wizard/invalid_icon.svg +0 -6
- package/dist/wizard/valid_icon.svg +0 -6
- package/dist/wizard/validation-wrong.svg +0 -6
- package/test/TabsForSections.test.js +0 -34
|
@@ -1,217 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
6
|
-
|
|
7
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
8
|
-
|
|
9
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
|
-
|
|
11
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
12
|
-
|
|
13
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
14
|
-
|
|
15
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
16
|
-
|
|
17
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
18
|
-
|
|
19
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
20
|
-
|
|
21
|
-
var _react = _interopRequireDefault(require("react"));
|
|
22
|
-
|
|
23
|
-
var _react2 = require("@storybook/react");
|
|
24
|
-
|
|
25
|
-
var _addonActions = require("@storybook/addon-actions");
|
|
26
|
-
|
|
27
|
-
require("../common/OpenSans.css");
|
|
28
|
-
|
|
29
|
-
var _addonKnobs = require("@storybook/addon-knobs");
|
|
30
|
-
|
|
31
|
-
var _readme = _interopRequireDefault(require("./readme.md"));
|
|
32
|
-
|
|
33
|
-
var _Dialog = _interopRequireDefault(require("./Dialog"));
|
|
34
|
-
|
|
35
|
-
var _Button = _interopRequireDefault(require("../button/Button"));
|
|
36
|
-
|
|
37
|
-
var _Switch = _interopRequireDefault(require("../switch/Switch"));
|
|
38
|
-
|
|
39
|
-
var _Date = _interopRequireDefault(require("../date/Date"));
|
|
40
|
-
|
|
41
|
-
var _InputText = _interopRequireDefault(require("../input-text/InputText"));
|
|
42
|
-
|
|
43
|
-
var onChange = (0, _addonActions.action)("onChange");
|
|
44
|
-
|
|
45
|
-
onChange.toString = function () {
|
|
46
|
-
return "onChangeHandler";
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
(0, _react2.storiesOf)("Form Components|Dialog", module).add("Component", function () {
|
|
50
|
-
var ControlledStory =
|
|
51
|
-
/*#__PURE__*/
|
|
52
|
-
function (_React$Component) {
|
|
53
|
-
(0, _inherits2["default"])(ControlledStory, _React$Component);
|
|
54
|
-
|
|
55
|
-
function ControlledStory(props) {
|
|
56
|
-
var _this;
|
|
57
|
-
|
|
58
|
-
(0, _classCallCheck2["default"])(this, ControlledStory);
|
|
59
|
-
_this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ControlledStory).call(this, props));
|
|
60
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dialogHandler", function () {
|
|
61
|
-
_this.setState({
|
|
62
|
-
opened: !_this.state.opened
|
|
63
|
-
});
|
|
64
|
-
});
|
|
65
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dialogHandler1", function () {
|
|
66
|
-
_this.setState({
|
|
67
|
-
opened1: !_this.state.opened1
|
|
68
|
-
});
|
|
69
|
-
});
|
|
70
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dialogHandler2", function () {
|
|
71
|
-
_this.setState({
|
|
72
|
-
opened2: !_this.state.opened2
|
|
73
|
-
});
|
|
74
|
-
});
|
|
75
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "contentHandler", function () {
|
|
76
|
-
_this.setState({
|
|
77
|
-
content: !_this.state.content
|
|
78
|
-
});
|
|
79
|
-
});
|
|
80
|
-
_this.state = {
|
|
81
|
-
opened: false,
|
|
82
|
-
opened1: false,
|
|
83
|
-
opened2: false,
|
|
84
|
-
content: false
|
|
85
|
-
};
|
|
86
|
-
return _this;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
(0, _createClass2["default"])(ControlledStory, [{
|
|
90
|
-
key: "render",
|
|
91
|
-
value: function render() {
|
|
92
|
-
return _react["default"].createElement("div", null, _react["default"].createElement(_Dialog["default"], {
|
|
93
|
-
isVisible: this.state.opened,
|
|
94
|
-
isCloseVisible: true,
|
|
95
|
-
onClose: this.dialogHandler,
|
|
96
|
-
overlay: true
|
|
97
|
-
}, _react["default"].createElement("div", {
|
|
98
|
-
style: {
|
|
99
|
-
display: "flex",
|
|
100
|
-
justifyContent: "center",
|
|
101
|
-
width: "100%"
|
|
102
|
-
}
|
|
103
|
-
}, _react["default"].createElement(_Switch["default"], {
|
|
104
|
-
label: "Content",
|
|
105
|
-
checked: false,
|
|
106
|
-
onChange: this.contentHandler
|
|
107
|
-
})), this.state.content && _react["default"].createElement("div", {
|
|
108
|
-
style: {
|
|
109
|
-
fontFamily: "Open Sans, sans serif"
|
|
110
|
-
}
|
|
111
|
-
}, _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."))), _react["default"].createElement(_Button["default"], {
|
|
112
|
-
onClick: this.dialogHandler,
|
|
113
|
-
label: "Click me"
|
|
114
|
-
}), _react["default"].createElement(_Dialog["default"], {
|
|
115
|
-
isVisible: this.state.opened1,
|
|
116
|
-
isCloseVisible: true,
|
|
117
|
-
onClose: this.dialogHandler1,
|
|
118
|
-
overlay: false
|
|
119
|
-
}, _react["default"].createElement("div", {
|
|
120
|
-
style: {
|
|
121
|
-
fontFamily: "Open Sans, sans serif"
|
|
122
|
-
}
|
|
123
|
-
}, _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."), _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."), _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."), _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis.")), _react["default"].createElement("div", {
|
|
124
|
-
style: {
|
|
125
|
-
display: "flex",
|
|
126
|
-
justifyContent: "center",
|
|
127
|
-
width: "100%"
|
|
128
|
-
}
|
|
129
|
-
}, _react["default"].createElement(_Button["default"], {
|
|
130
|
-
mode: "raised",
|
|
131
|
-
theme: "light",
|
|
132
|
-
label: "OK",
|
|
133
|
-
onClick: this.dialogHandler1
|
|
134
|
-
}), _react["default"].createElement(_Button["default"], {
|
|
135
|
-
mode: "flat",
|
|
136
|
-
theme: "light",
|
|
137
|
-
label: "CANCEL",
|
|
138
|
-
onClick: this.dialogHandler1
|
|
139
|
-
}))), _react["default"].createElement(_Button["default"], {
|
|
140
|
-
onClick: this.dialogHandler1,
|
|
141
|
-
label: "Click me"
|
|
142
|
-
}), _react["default"].createElement(_Dialog["default"], {
|
|
143
|
-
isVisible: this.state.opened2,
|
|
144
|
-
isCloseVisible: false,
|
|
145
|
-
onClose: this.dialogHandler2,
|
|
146
|
-
overlay: true
|
|
147
|
-
}, _react["default"].createElement("div", {
|
|
148
|
-
style: {
|
|
149
|
-
display: "flex",
|
|
150
|
-
justifyContent: "center",
|
|
151
|
-
alignItems: "center",
|
|
152
|
-
width: "100%"
|
|
153
|
-
}
|
|
154
|
-
}, _react["default"].createElement(_Date["default"], {
|
|
155
|
-
name: "date",
|
|
156
|
-
format: "dd/MM/yyyy",
|
|
157
|
-
label: "BirthDate",
|
|
158
|
-
theme: "light",
|
|
159
|
-
assistiveText: "Assistive Text Here",
|
|
160
|
-
onInputChange: function onInputChange(event) {
|
|
161
|
-
return console.log(event);
|
|
162
|
-
}
|
|
163
|
-
}), _react["default"].createElement(_InputText["default"], {
|
|
164
|
-
disabled: false,
|
|
165
|
-
label: "Amount",
|
|
166
|
-
multiline: false,
|
|
167
|
-
sufix: "K",
|
|
168
|
-
prefix: "\u20AC",
|
|
169
|
-
theme: "light",
|
|
170
|
-
assistiveText: "Assistive Text Here"
|
|
171
|
-
})), _react["default"].createElement("div", {
|
|
172
|
-
style: {
|
|
173
|
-
display: "flex",
|
|
174
|
-
justifyContent: "center",
|
|
175
|
-
width: "100%"
|
|
176
|
-
}
|
|
177
|
-
}, _react["default"].createElement(_Button["default"], {
|
|
178
|
-
onClick: this.dialogHandler2,
|
|
179
|
-
label: "Close"
|
|
180
|
-
}))), _react["default"].createElement(_Button["default"], {
|
|
181
|
-
onClick: this.dialogHandler2,
|
|
182
|
-
label: "Click me"
|
|
183
|
-
}));
|
|
184
|
-
}
|
|
185
|
-
}]);
|
|
186
|
-
return ControlledStory;
|
|
187
|
-
}(_react["default"].Component);
|
|
188
|
-
|
|
189
|
-
return _react["default"].createElement(ControlledStory, null);
|
|
190
|
-
}, {
|
|
191
|
-
notes: {
|
|
192
|
-
markdown: _readme["default"]
|
|
193
|
-
}
|
|
194
|
-
});
|
|
195
|
-
|
|
196
|
-
var knobProps = function knobProps() {
|
|
197
|
-
return {
|
|
198
|
-
isVisible: (0, _addonKnobs["boolean"])("Visible", false),
|
|
199
|
-
isCloseVisible: (0, _addonKnobs["boolean"])("Close Visible", false),
|
|
200
|
-
overlay: (0, _addonKnobs["boolean"])("Overlay", false)
|
|
201
|
-
};
|
|
202
|
-
};
|
|
203
|
-
|
|
204
|
-
(0, _react2.storiesOf)("Form Components|Dialog", module).add("Knobs example", function () {
|
|
205
|
-
var props = knobProps();
|
|
206
|
-
return _react["default"].createElement("div", null, _react["default"].createElement("p", {
|
|
207
|
-
style: {
|
|
208
|
-
fontFamily: "Open Sans, sans serif"
|
|
209
|
-
}
|
|
210
|
-
}, "Check visible"), _react["default"].createElement(_Dialog["default"], (0, _extends2["default"])({
|
|
211
|
-
onClose: close
|
|
212
|
-
}, props), "This is a knobs example"));
|
|
213
|
-
}, {
|
|
214
|
-
notes: {
|
|
215
|
-
markdown: _readme["default"]
|
|
216
|
-
}
|
|
217
|
-
});
|
package/dist/dialog/readme.md
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
# DXC Dialog Component
|
|
2
|
-
|
|
3
|
-
## Props
|
|
4
|
-
|
|
5
|
-
<table>
|
|
6
|
-
<tr style="background-color: grey">
|
|
7
|
-
<td>Name</td>
|
|
8
|
-
<td>Default</td>
|
|
9
|
-
<td>Description</td>
|
|
10
|
-
</tr>
|
|
11
|
-
<tr>
|
|
12
|
-
<td>isVisible: boolean</td>
|
|
13
|
-
<td>true</td>
|
|
14
|
-
<td>If true, the modal should be visible</td>
|
|
15
|
-
</tr>
|
|
16
|
-
<tr>
|
|
17
|
-
<td>isCloseVisible: boolean</td>
|
|
18
|
-
<td>true</td>
|
|
19
|
-
<td>If true, the close button should be visible</td>
|
|
20
|
-
</tr>
|
|
21
|
-
<tr>
|
|
22
|
-
<td>onClose: function</td>
|
|
23
|
-
<td></td>
|
|
24
|
-
<td>This function will be called when the user clicks the close button. If there is no function we should close the modal by default</td>
|
|
25
|
-
</tr>
|
|
26
|
-
<tr>
|
|
27
|
-
<td>overlay: boolean</td>
|
|
28
|
-
<td>true</td>
|
|
29
|
-
<td>If true, the modal will be over a darker background</td>
|
|
30
|
-
</tr>
|
|
31
|
-
</table>
|
|
32
|
-
|
|
@@ -1,249 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
6
|
-
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
|
|
9
|
-
var _react2 = require("@storybook/react");
|
|
10
|
-
|
|
11
|
-
var _addonActions = require("@storybook/addon-actions");
|
|
12
|
-
|
|
13
|
-
var _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
|
|
14
|
-
|
|
15
|
-
var _addonKnobs = require("@storybook/addon-knobs");
|
|
16
|
-
|
|
17
|
-
var _readme = _interopRequireDefault(require("./readme.md"));
|
|
18
|
-
|
|
19
|
-
var _Dropdown = _interopRequireDefault(require("./Dropdown"));
|
|
20
|
-
|
|
21
|
-
var onChange = (0, _addonActions.action)("onChange");
|
|
22
|
-
|
|
23
|
-
onChange.toString = function () {
|
|
24
|
-
return "onChangeHandler";
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
var optionsWithoutIcon = [{
|
|
28
|
-
value: 1,
|
|
29
|
-
label: "Amazon"
|
|
30
|
-
}, {
|
|
31
|
-
value: 2,
|
|
32
|
-
label: "Ebay"
|
|
33
|
-
}, {
|
|
34
|
-
value: 3,
|
|
35
|
-
label: "Apple"
|
|
36
|
-
}];
|
|
37
|
-
var optionsWithIcon = [{
|
|
38
|
-
value: 1,
|
|
39
|
-
label: "Amazon",
|
|
40
|
-
iconSrc: _amazon["default"]
|
|
41
|
-
}, {
|
|
42
|
-
value: 2,
|
|
43
|
-
label: "Ebay",
|
|
44
|
-
iconSrc: _amazon["default"]
|
|
45
|
-
}, {
|
|
46
|
-
value: 3,
|
|
47
|
-
label: "Apple",
|
|
48
|
-
iconSrc: _amazon["default"]
|
|
49
|
-
}];
|
|
50
|
-
|
|
51
|
-
var selectOption = function selectOption(option) {
|
|
52
|
-
console.log(option);
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
(0, _react2.storiesOf)("Form Components|Dropdown", module).add("Component", function () {
|
|
56
|
-
return _react["default"].createElement("div", null, _react["default"].createElement("div", {
|
|
57
|
-
style: {
|
|
58
|
-
height: "200px",
|
|
59
|
-
display: "flex",
|
|
60
|
-
flexWrap: "wrap"
|
|
61
|
-
}
|
|
62
|
-
}, _react["default"].createElement(_Dropdown["default"], {
|
|
63
|
-
options: optionsWithoutIcon,
|
|
64
|
-
onSelectOption: selectOption,
|
|
65
|
-
iconSrc: _amazon["default"],
|
|
66
|
-
label: "Basic dropdown",
|
|
67
|
-
theme: "light",
|
|
68
|
-
mode: "basic",
|
|
69
|
-
optionsIconPosition: "before"
|
|
70
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
71
|
-
options: optionsWithIcon,
|
|
72
|
-
onSelectOption: selectOption,
|
|
73
|
-
iconSrc: _amazon["default"],
|
|
74
|
-
label: "Outlined dropdown",
|
|
75
|
-
theme: "light",
|
|
76
|
-
mode: "outlined",
|
|
77
|
-
optionsIconPosition: "after"
|
|
78
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
79
|
-
options: optionsWithoutIcon,
|
|
80
|
-
onSelectOption: selectOption,
|
|
81
|
-
label: "Basic dropdown",
|
|
82
|
-
theme: "light",
|
|
83
|
-
mode: "basic",
|
|
84
|
-
optionsIconPosition: "before"
|
|
85
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
86
|
-
options: optionsWithoutIcon,
|
|
87
|
-
onSelectOption: selectOption,
|
|
88
|
-
label: "Outlined dropdown",
|
|
89
|
-
theme: "light",
|
|
90
|
-
mode: "outlined",
|
|
91
|
-
optionsIconPosition: "after"
|
|
92
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
93
|
-
options: optionsWithIcon,
|
|
94
|
-
onSelectOption: selectOption,
|
|
95
|
-
iconSrc: _amazon["default"],
|
|
96
|
-
label: "",
|
|
97
|
-
theme: "light",
|
|
98
|
-
mode: "basic",
|
|
99
|
-
caretHidden: true,
|
|
100
|
-
optionsIconPosition: "before"
|
|
101
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
102
|
-
options: optionsWithIcon,
|
|
103
|
-
onSelectOption: selectOption,
|
|
104
|
-
iconSrc: _amazon["default"],
|
|
105
|
-
label: "",
|
|
106
|
-
theme: "light",
|
|
107
|
-
mode: "outlined",
|
|
108
|
-
caretHidden: true,
|
|
109
|
-
optionsIconPosition: "after"
|
|
110
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
111
|
-
options: optionsWithIcon,
|
|
112
|
-
onSelectOption: selectOption,
|
|
113
|
-
iconSrc: _amazon["default"],
|
|
114
|
-
label: "",
|
|
115
|
-
theme: "light",
|
|
116
|
-
mode: "basic",
|
|
117
|
-
caretHidden: false,
|
|
118
|
-
optionsIconPosition: "before"
|
|
119
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
120
|
-
options: optionsWithIcon,
|
|
121
|
-
onSelectOption: selectOption,
|
|
122
|
-
iconSrc: _amazon["default"],
|
|
123
|
-
label: "",
|
|
124
|
-
theme: "light",
|
|
125
|
-
mode: "outlined",
|
|
126
|
-
caretHidden: false,
|
|
127
|
-
optionsIconPosition: "after"
|
|
128
|
-
})), _react["default"].createElement("div", {
|
|
129
|
-
style: {
|
|
130
|
-
background: "black",
|
|
131
|
-
display: "flex",
|
|
132
|
-
height: "250px",
|
|
133
|
-
flexWrap: "wrap"
|
|
134
|
-
}
|
|
135
|
-
}, _react["default"].createElement(_Dropdown["default"], {
|
|
136
|
-
options: optionsWithIcon,
|
|
137
|
-
onSelectOption: selectOption,
|
|
138
|
-
iconSrc: _amazon["default"],
|
|
139
|
-
label: "Basic dropdown",
|
|
140
|
-
theme: "dark",
|
|
141
|
-
mode: "basic",
|
|
142
|
-
optionsIconPosition: "before"
|
|
143
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
144
|
-
options: optionsWithIcon,
|
|
145
|
-
onSelectOption: selectOption,
|
|
146
|
-
iconSrc: _amazon["default"],
|
|
147
|
-
label: "Outlined dropdown",
|
|
148
|
-
theme: "dark",
|
|
149
|
-
mode: "outlined",
|
|
150
|
-
optionsIconPosition: "after"
|
|
151
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
152
|
-
options: optionsWithoutIcon,
|
|
153
|
-
onSelectOption: selectOption,
|
|
154
|
-
label: "Basic dropdown",
|
|
155
|
-
theme: "dark",
|
|
156
|
-
mode: "basic",
|
|
157
|
-
optionsIconPosition: "before"
|
|
158
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
159
|
-
options: optionsWithoutIcon,
|
|
160
|
-
onSelectOption: selectOption,
|
|
161
|
-
label: "Outlined dropdown",
|
|
162
|
-
theme: "dark",
|
|
163
|
-
mode: "outlined",
|
|
164
|
-
optionsIconPosition: "after"
|
|
165
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
166
|
-
options: optionsWithIcon,
|
|
167
|
-
onSelectOption: selectOption,
|
|
168
|
-
iconSrc: _amazon["default"],
|
|
169
|
-
label: "",
|
|
170
|
-
theme: "dark",
|
|
171
|
-
mode: "basic",
|
|
172
|
-
caretHidden: true,
|
|
173
|
-
optionsIconPosition: "before"
|
|
174
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
175
|
-
options: optionsWithIcon,
|
|
176
|
-
onSelectOption: selectOption,
|
|
177
|
-
iconSrc: _amazon["default"],
|
|
178
|
-
label: "",
|
|
179
|
-
theme: "dark",
|
|
180
|
-
mode: "outlined",
|
|
181
|
-
caretHidden: true,
|
|
182
|
-
optionsIconPosition: "after"
|
|
183
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
184
|
-
options: optionsWithIcon,
|
|
185
|
-
onSelectOption: selectOption,
|
|
186
|
-
iconSrc: _amazon["default"],
|
|
187
|
-
label: "",
|
|
188
|
-
theme: "dark",
|
|
189
|
-
mode: "basic",
|
|
190
|
-
caretHidden: false,
|
|
191
|
-
optionsIconPosition: "before"
|
|
192
|
-
}), _react["default"].createElement(_Dropdown["default"], {
|
|
193
|
-
options: optionsWithIcon,
|
|
194
|
-
onSelectOption: selectOption,
|
|
195
|
-
iconSrc: _amazon["default"],
|
|
196
|
-
label: "",
|
|
197
|
-
theme: "dark",
|
|
198
|
-
mode: "outlined",
|
|
199
|
-
caretHidden: false,
|
|
200
|
-
optionsIconPosition: "after"
|
|
201
|
-
})));
|
|
202
|
-
}, {
|
|
203
|
-
notes: {
|
|
204
|
-
markdown: _readme["default"]
|
|
205
|
-
}
|
|
206
|
-
});
|
|
207
|
-
|
|
208
|
-
var knobProps = function knobProps() {
|
|
209
|
-
return {
|
|
210
|
-
optionsIconPosition: (0, _addonKnobs.select)("Options Icon Position", {
|
|
211
|
-
before: "before",
|
|
212
|
-
after: "after"
|
|
213
|
-
}, "before"),
|
|
214
|
-
iconPosition: (0, _addonKnobs.select)("Icon Position", {
|
|
215
|
-
before: "before",
|
|
216
|
-
after: "after"
|
|
217
|
-
}, "before"),
|
|
218
|
-
label: (0, _addonKnobs.text)("Label", "Test Dropdown"),
|
|
219
|
-
theme: (0, _addonKnobs.select)("Theme", {
|
|
220
|
-
light: "light",
|
|
221
|
-
dark: "dark"
|
|
222
|
-
}, "light"),
|
|
223
|
-
mode: (0, _addonKnobs.select)("Mode", {
|
|
224
|
-
basic: "basic",
|
|
225
|
-
outlined: "outlined"
|
|
226
|
-
}, "basic"),
|
|
227
|
-
caretHidden: (0, _addonKnobs["boolean"])("Caret Hidden", false),
|
|
228
|
-
disableRipple: (0, _addonKnobs["boolean"])("Disable Ripple", false)
|
|
229
|
-
};
|
|
230
|
-
};
|
|
231
|
-
|
|
232
|
-
(0, _react2.storiesOf)("Form Components|Dropdown", module).add("Knobs example", function () {
|
|
233
|
-
var props = knobProps();
|
|
234
|
-
return _react["default"].createElement("div", {
|
|
235
|
-
style: {
|
|
236
|
-
paddingTop: "20px",
|
|
237
|
-
height: "200px",
|
|
238
|
-
background: props.theme === "dark" && "black" || "transparent"
|
|
239
|
-
}
|
|
240
|
-
}, _react["default"].createElement(_Dropdown["default"], (0, _extends2["default"])({}, props, {
|
|
241
|
-
iconSrc: _amazon["default"],
|
|
242
|
-
options: optionsWithIcon,
|
|
243
|
-
onSelectOption: selectOption
|
|
244
|
-
})));
|
|
245
|
-
}, {
|
|
246
|
-
notes: {
|
|
247
|
-
markdown: _readme["default"]
|
|
248
|
-
}
|
|
249
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
<svg id="baseline-arrow_drop_down-24px" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
2
|
-
<path id="Trazado_2384" data-name="Trazado 2384" d="M7,10l5,5,5-5Z" fill="#fff"/>
|
|
3
|
-
<path id="Trazado_2385" data-name="Trazado 2385" d="M0,0H24V24H0Z" fill="none"/>
|
|
4
|
-
</svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
<svg id="baseline-arrow_drop_up-24px" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
2
|
-
<path id="Trazado_2386" data-name="Trazado 2386" d="M7,14l5-5,5,5Z" fill="#fff"/>
|
|
3
|
-
<path id="Trazado_2387" data-name="Trazado 2387" d="M0,0H24V24H0Z" fill="none"/>
|
|
4
|
-
</svg>
|
package/dist/dropdown/readme.md
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
# DXC Dropdown Component
|
|
2
|
-
|
|
3
|
-
## Props
|
|
4
|
-
|
|
5
|
-
<table>
|
|
6
|
-
<tr style="background-color: grey">
|
|
7
|
-
<td>Name</td>
|
|
8
|
-
<td>Default</td>
|
|
9
|
-
<td>Description</td>
|
|
10
|
-
</tr>
|
|
11
|
-
<tr>
|
|
12
|
-
<td>options: object[]</td>
|
|
13
|
-
<td><code>[]</code></td>
|
|
14
|
-
<td>An array of objects representing the options. Each object has the following properties:
|
|
15
|
-
<ul>
|
|
16
|
-
<li><b>label</b>: Option display value</li>
|
|
17
|
-
<li><b>iconSrc</b>: URL of the icon that will be placed next to the option label (Optional)</li>
|
|
18
|
-
<li><b>value</b>: Option inner value</li>
|
|
19
|
-
<li><b>options</b>: array for nested</li>
|
|
20
|
-
</ul>
|
|
21
|
-
</td>
|
|
22
|
-
</tr>
|
|
23
|
-
<tr>
|
|
24
|
-
<td>optionsIconPosition: 'before' | 'after'</td>
|
|
25
|
-
<td><code>'before'</code></td>
|
|
26
|
-
<td>In case options include an icon, whether the icon should appear after or before the label.</td>
|
|
27
|
-
</tr>
|
|
28
|
-
<tr>
|
|
29
|
-
<td>iconSrc: string</td>
|
|
30
|
-
<td><code></code></td>
|
|
31
|
-
<td>URL of the icon that will be placed next to the option label (Optional)</td>
|
|
32
|
-
</tr>
|
|
33
|
-
<tr>
|
|
34
|
-
<td>iconPosition: 'before' | 'after'</td>
|
|
35
|
-
<td><code>'before'</code></td>
|
|
36
|
-
<td>Whether the icon should appear after or before the label.</td>
|
|
37
|
-
</tr>
|
|
38
|
-
<tr>
|
|
39
|
-
<td>label: string</td>
|
|
40
|
-
<td></td>
|
|
41
|
-
<td>Text to be placed within the dropdown.</td>
|
|
42
|
-
</tr>
|
|
43
|
-
<tr>
|
|
44
|
-
<td>theme: 'light' | 'dark'</td>
|
|
45
|
-
<td><code>'light'</code></td>
|
|
46
|
-
<td>Uses one of the available component themes.</td>
|
|
47
|
-
</tr>
|
|
48
|
-
<tr>
|
|
49
|
-
<td>mode: 'basic' | 'outlined'</td>
|
|
50
|
-
<td><code>'basic'</code></td>
|
|
51
|
-
<td>Uses one of the available component modes.</td>
|
|
52
|
-
</tr>
|
|
53
|
-
<tr>
|
|
54
|
-
<td>showCaret: boolean</td>
|
|
55
|
-
<td><code>true</code></td>
|
|
56
|
-
<td>Whether the arrow next to the labe must be displayed or not.</td>
|
|
57
|
-
</tr>
|
|
58
|
-
<tr>
|
|
59
|
-
<td>disableRipple: boolean</td>
|
|
60
|
-
<td><code>false</code></td>
|
|
61
|
-
<td>If true, the ripple effect will be disabled.</td>
|
|
62
|
-
</tr>
|
|
63
|
-
<tr>
|
|
64
|
-
<td>onSelectOption: function</td>
|
|
65
|
-
<td></td>
|
|
66
|
-
<td>This function will be called every time the selection changes. The string with the key of the selected value will be passed as a parameter to this function.</td>
|
|
67
|
-
</tr>
|
|
68
|
-
</table>
|
|
69
|
-
|