linear-react-components-ui 1.1.0-beta.6 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/babel.config.json +2 -2
- package/lib/alerts/AlertContainer.js +46 -54
- package/lib/alerts/AlertProvider.js +36 -53
- package/lib/alerts/BaseAlert.js +14 -20
- package/lib/alerts/Message.js +37 -46
- package/lib/alerts/helpers.js +3 -3
- package/lib/alerts/index.js +5 -5
- package/lib/alerts/withAlert.js +11 -11
- package/lib/assets/styles/checkbox.scss +0 -8
- package/lib/avatar/index.js +42 -41
- package/lib/badge/index.js +15 -16
- package/lib/buttons/ActivateButton.js +6 -8
- package/lib/buttons/AddButton.js +9 -11
- package/lib/buttons/Button.js +11 -11
- package/lib/buttons/ButtonGroups.js +8 -6
- package/lib/buttons/CancelButton.js +9 -7
- package/lib/buttons/DangerButton.js +9 -7
- package/lib/buttons/DefaultButton.js +66 -85
- package/lib/buttons/DestroyButton.js +10 -8
- package/lib/buttons/EditButton.js +6 -8
- package/lib/buttons/InactivateButton.js +6 -8
- package/lib/buttons/InfoButton.js +9 -7
- package/lib/buttons/PrimaryButton.js +9 -7
- package/lib/buttons/RestoreButton.js +6 -8
- package/lib/buttons/SaveButton.js +9 -7
- package/lib/buttons/SuccessButton.js +9 -7
- package/lib/buttons/WarningButton.js +9 -7
- package/lib/buttons/button_container/index.js +16 -19
- package/lib/buttons/index.js +31 -31
- package/lib/buttons/split_button/index.js +24 -26
- package/lib/calendar/DangerCalendar.js +9 -7
- package/lib/calendar/InfoCalendar.js +9 -7
- package/lib/calendar/PrimaryCalendar.js +9 -7
- package/lib/calendar/SuccessCalendar.js +9 -7
- package/lib/calendar/WarningCalendar.js +9 -7
- package/lib/calendar/base/Day.js +16 -14
- package/lib/calendar/base/Month.js +15 -19
- package/lib/calendar/base/Week.js +15 -19
- package/lib/calendar/base/helpers.js +17 -15
- package/lib/calendar/base/index.js +38 -51
- package/lib/calendar/index.js +13 -13
- package/lib/checkbox/Label.js +10 -8
- package/lib/checkbox/index.d.ts +1 -1
- package/lib/checkbox/index.js +75 -97
- package/lib/checkbox/types.d.ts +0 -1
- package/lib/dialog/Alert.js +7 -7
- package/lib/dialog/Custom.js +20 -23
- package/lib/dialog/Error.js +7 -7
- package/lib/dialog/Information.js +7 -7
- package/lib/dialog/Question.js +16 -16
- package/lib/dialog/Warning.js +7 -7
- package/lib/dialog/base/Content.js +9 -7
- package/lib/dialog/base/Footer.js +6 -8
- package/lib/dialog/base/Header.js +32 -34
- package/lib/dialog/base/index.js +64 -72
- package/lib/dialog/base/style.js +8 -10
- package/lib/dialog/form/index.js +35 -38
- package/lib/dialog/index.js +15 -15
- package/lib/drawer/Content.js +14 -12
- package/lib/drawer/Drawer.js +68 -82
- package/lib/drawer/Header.js +45 -48
- package/lib/drawer/helpers.js +4 -4
- package/lib/drawer/index.js +7 -7
- package/lib/dropdown/Popup.js +37 -40
- package/lib/dropdown/helper.js +6 -6
- package/lib/dropdown/withDropdown.js +44 -63
- package/lib/fieldset/index.js +49 -56
- package/lib/form/Field.js +73 -79
- package/lib/form/FieldArray.js +76 -85
- package/lib/form/FieldNumber.js +34 -42
- package/lib/form/FieldPeriod.js +54 -59
- package/lib/form/helpers.js +29 -28
- package/lib/form/index.js +121 -151
- package/lib/form/withFieldHOC.js +36 -42
- package/lib/form/withFormSecurity.js +27 -35
- package/lib/gridlayout/GridCol.js +16 -15
- package/lib/gridlayout/GridRow.js +11 -12
- package/lib/gridlayout/index.js +5 -5
- package/lib/hint/index.js +25 -29
- package/lib/icons/helper.js +2 -2
- package/lib/icons/index.js +37 -48
- package/lib/index.js +19 -19
- package/lib/inputs/base/InputTextBase.js +99 -109
- package/lib/inputs/base/helpers.js +29 -23
- package/lib/inputs/color/index.js +34 -44
- package/lib/inputs/date/Dialog.js +10 -8
- package/lib/inputs/date/Dropdown.js +14 -12
- package/lib/inputs/date/helpers.js +18 -14
- package/lib/inputs/date/index.js +96 -133
- package/lib/inputs/file/DefaultFile.js +50 -74
- package/lib/inputs/file/DragDropFile.js +119 -172
- package/lib/inputs/file/File.js +22 -28
- package/lib/inputs/file/FileButtonSettings.js +14 -16
- package/lib/inputs/file/helpers.js +6 -7
- package/lib/inputs/file/index.js +7 -7
- package/lib/inputs/inputHOC.js +23 -35
- package/lib/inputs/mask/BaseMask.js +33 -27
- package/lib/inputs/mask/Cnpj.js +19 -31
- package/lib/inputs/mask/Cpf.js +20 -35
- package/lib/inputs/mask/Phone.js +8 -6
- package/lib/inputs/mask/ZipCode.js +6 -8
- package/lib/inputs/mask/helpers.js +21 -26
- package/lib/inputs/mask/imaskHOC.js +102 -122
- package/lib/inputs/mask/index.js +11 -11
- package/lib/inputs/multiSelect/ActionButtons.js +18 -18
- package/lib/inputs/multiSelect/Dropdown.js +63 -75
- package/lib/inputs/multiSelect/helper.js +9 -7
- package/lib/inputs/multiSelect/index.js +85 -136
- package/lib/inputs/number/BaseNumber.js +23 -21
- package/lib/inputs/number/Currency.js +9 -8
- package/lib/inputs/number/Decimal.js +4 -6
- package/lib/inputs/number/format_number.js +9 -6
- package/lib/inputs/number/index.js +13 -13
- package/lib/inputs/period/Dialog.js +10 -8
- package/lib/inputs/period/Dropdown.js +12 -12
- package/lib/inputs/period/PeriodList.js +19 -17
- package/lib/inputs/period/helper.js +38 -37
- package/lib/inputs/period/index.js +147 -196
- package/lib/inputs/search/index.js +45 -67
- package/lib/inputs/select/ActionButtons.js +18 -18
- package/lib/inputs/select/Dropdown.js +51 -65
- package/lib/inputs/select/helper.js +55 -44
- package/lib/inputs/select/index.js +13 -11
- package/lib/inputs/select/multiple/Selecteds.js +20 -22
- package/lib/inputs/select/multiple/index.js +90 -143
- package/lib/inputs/select/simple/index.js +103 -156
- package/lib/inputs/text/index.js +4 -6
- package/lib/inputs/textarea/index.js +11 -10
- package/lib/internals/colorStyles.js +3 -3
- package/lib/internals/constants.js +2 -2
- package/lib/internals/withTooltip.js +54 -68
- package/lib/labelMessages/index.js +28 -47
- package/lib/labels/DangerLabel.js +9 -7
- package/lib/labels/DefaultLabel.js +29 -42
- package/lib/labels/InfoLabel.js +9 -7
- package/lib/labels/PrimaryLabel.js +9 -7
- package/lib/labels/SuccessLabel.js +9 -7
- package/lib/labels/WarningLabel.js +9 -7
- package/lib/labels/index.js +15 -15
- package/lib/labels/label_container/index.js +11 -10
- package/lib/list/Header.js +12 -10
- package/lib/list/Item.js +58 -72
- package/lib/list/Separator.js +6 -8
- package/lib/list/helpers.js +3 -3
- package/lib/list/index.js +81 -107
- package/lib/menus/float/MenuItem.js +27 -27
- package/lib/menus/float/SubMenuContainer.js +39 -44
- package/lib/menus/float/helpers.js +4 -4
- package/lib/menus/float/index.js +25 -25
- package/lib/menus/index.js +3 -3
- package/lib/menus/sidenav/ExpandMenu.js +12 -10
- package/lib/menus/sidenav/MenuLink.js +12 -10
- package/lib/menus/sidenav/NavMenuGroup.js +15 -13
- package/lib/menus/sidenav/NavMenuItem.js +56 -69
- package/lib/menus/sidenav/NavSubMenuItem.js +24 -28
- package/lib/menus/sidenav/helpers.js +7 -7
- package/lib/menus/sidenav/index.js +92 -119
- package/lib/menus/sidenav/popup_menu_search/EmptyList.js +12 -11
- package/lib/menus/sidenav/popup_menu_search/index.js +64 -84
- package/lib/noPermission/index.js +15 -17
- package/lib/panel/Content.js +46 -58
- package/lib/panel/DangerPanel.js +6 -8
- package/lib/panel/Default.js +45 -59
- package/lib/panel/Header.js +37 -34
- package/lib/panel/InfoPanel.js +6 -8
- package/lib/panel/PrimaryPanel.js +6 -8
- package/lib/panel/SuccessPanel.js +6 -8
- package/lib/panel/ToolBar.js +8 -6
- package/lib/panel/WarningPanel.js +6 -8
- package/lib/panel/helpers.js +13 -11
- package/lib/panel/index.js +17 -17
- package/lib/permissionValidations.js +26 -28
- package/lib/popover/PopoverText.js +8 -6
- package/lib/popover/PopoverTitle.js +8 -6
- package/lib/popover/index.js +21 -24
- package/lib/progress/Bar.js +34 -39
- package/lib/progress/index.js +19 -20
- package/lib/radio/index.js +37 -57
- package/lib/shortcuts/index.js +13 -11
- package/lib/skeleton/SkeletonContainer.js +12 -12
- package/lib/skeleton/index.js +27 -33
- package/lib/spinner/SpinnerLoading.js +46 -46
- package/lib/spinner/index.js +27 -40
- package/lib/split/Split.js +97 -113
- package/lib/split/SplitSide.js +22 -20
- package/lib/split/helpers.js +4 -4
- package/lib/split/index.js +5 -5
- package/lib/table/Body.js +47 -49
- package/lib/table/Header.js +39 -41
- package/lib/table/HeaderColumn.js +22 -22
- package/lib/table/Row.js +48 -50
- package/lib/table/RowColumn.js +37 -35
- package/lib/table/helpers.js +9 -12
- package/lib/table/index.js +89 -108
- package/lib/tabs/DropdownTabs.js +39 -43
- package/lib/tabs/Menu.js +20 -19
- package/lib/tabs/MenuTabs.js +48 -55
- package/lib/tabs/Panel.js +54 -73
- package/lib/tabs/context.js +62 -93
- package/lib/tabs/index.js +30 -35
- package/lib/tabs/tabHelpers.js +24 -21
- package/lib/toolbar/ButtonBar.js +49 -52
- package/lib/toolbar/LabelBar.js +38 -41
- package/lib/toolbar/Separator.js +6 -8
- package/lib/toolbar/ToolBarGroup.js +9 -8
- package/lib/toolbar/helpers.js +3 -3
- package/lib/toolbar/index.js +25 -26
- package/lib/tooltip/index.js +29 -33
- package/lib/treetable/Body.js +22 -33
- package/lib/treetable/Header.js +13 -15
- package/lib/treetable/Row.d.ts +1 -1
- package/lib/treetable/Row.js +107 -158
- package/lib/treetable/helpers.d.ts +1 -1
- package/lib/treetable/helpers.js +18 -24
- package/lib/treetable/index.d.ts +2 -2
- package/lib/treetable/index.js +11 -12
- package/lib/treeview/Header.js +11 -9
- package/lib/treeview/Node.js +109 -148
- package/lib/treeview/constants.js +2 -2
- package/lib/treeview/index.js +156 -221
- package/lib/uitour/helpers.js +3 -3
- package/lib/uitour/index.js +67 -106
- package/package.json +5 -14
- /package/lib/{types.d-BfM3lUbt.d.ts → types.d-DvJcBS8L.d.ts} +0 -0
|
@@ -3,38 +3,40 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports
|
|
6
|
+
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _multiple = _interopRequireDefault(require("./multiple"));
|
|
9
9
|
require("../../assets/styles/select.scss");
|
|
10
10
|
var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
|
|
11
11
|
var _simple = _interopRequireDefault(require("./simple"));
|
|
12
|
-
|
|
13
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {
|
|
12
|
+
const _excluded = ["gridLayout", "multiple", "value"];
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
15
15
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
16
16
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
const SelectField = props => {
|
|
18
|
+
const {
|
|
19
|
+
gridLayout,
|
|
20
|
+
multiple,
|
|
21
|
+
value
|
|
22
|
+
} = props,
|
|
21
23
|
newProps = _objectWithoutProperties(props, _excluded);
|
|
22
|
-
|
|
24
|
+
const component = multiple ? /*#__PURE__*/_react.default.createElement(_multiple.default, _extends({}, newProps, {
|
|
23
25
|
dataSource: props.dataSource ? props.dataSource : [],
|
|
24
26
|
idKey: props.idKey ? props.idKey : '',
|
|
25
27
|
value: Array.isArray(value) ? value : undefined,
|
|
26
28
|
descriptionKey: props.descriptionKey ? props.descriptionKey : ''
|
|
27
|
-
})) : /*#__PURE__*/_react
|
|
29
|
+
})) : /*#__PURE__*/_react.default.createElement(_simple.default, _extends({}, newProps, {
|
|
28
30
|
idKey: props.idKey ? props.idKey : '',
|
|
29
31
|
value: !Array.isArray(value) ? value : undefined,
|
|
30
32
|
descriptionKey: props.descriptionKey ? props.descriptionKey : ''
|
|
31
33
|
}));
|
|
32
34
|
if (gridLayout !== undefined) {
|
|
33
|
-
return /*#__PURE__*/_react
|
|
35
|
+
return /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
|
|
34
36
|
customClass: "-withinput",
|
|
35
37
|
cols: gridLayout
|
|
36
38
|
}, component);
|
|
37
39
|
}
|
|
38
40
|
return component;
|
|
39
41
|
};
|
|
40
|
-
var _default = exports
|
|
42
|
+
var _default = exports.default = SelectField;
|
|
@@ -3,27 +3,25 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports
|
|
6
|
+
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}));
|
|
27
|
-
}));
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
const Selecteds = _ref => {
|
|
10
|
+
let {
|
|
11
|
+
currents,
|
|
12
|
+
descriptionKey,
|
|
13
|
+
idKey,
|
|
14
|
+
handleOnUnselect
|
|
15
|
+
} = _ref;
|
|
16
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, currents.map(selected => /*#__PURE__*/_react.default.createElement("div", {
|
|
17
|
+
className: "selecteditem",
|
|
18
|
+
key: "selected-".concat(selected[idKey])
|
|
19
|
+
}, typeof descriptionKey === 'string' ? selected[descriptionKey] : descriptionKey(selected), /*#__PURE__*/_react.default.createElement("span", {
|
|
20
|
+
className: "close",
|
|
21
|
+
role: "button",
|
|
22
|
+
tabIndex: -1,
|
|
23
|
+
onKeyPress: () => {},
|
|
24
|
+
onClick: () => handleOnUnselect(selected[idKey])
|
|
25
|
+
}))));
|
|
28
26
|
};
|
|
29
|
-
var _default = exports
|
|
27
|
+
var _default = exports.default = Selecteds;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
exports
|
|
6
|
+
exports.default = void 0;
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
8
|
var _lodash = _interopRequireDefault(require("lodash"));
|
|
10
9
|
var _uuid = _interopRequireDefault(require("uuid"));
|
|
@@ -14,106 +13,72 @@ var _Selecteds = _interopRequireDefault(require("./Selecteds"));
|
|
|
14
13
|
var constants = _interopRequireWildcard(require("../../../internals/constants"));
|
|
15
14
|
var _InputTextBase = _interopRequireDefault(require("../../base/InputTextBase"));
|
|
16
15
|
var _helper = require("../helper");
|
|
17
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {
|
|
18
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function
|
|
19
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" !=
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
18
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
20
19
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
47
|
-
currents = _useState4[0],
|
|
48
|
-
setCurrents = _useState4[1];
|
|
49
|
-
var _useState5 = (0, _react.useState)(),
|
|
50
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
51
|
-
selected = _useState6[0],
|
|
52
|
-
setSelected = _useState6[1];
|
|
53
|
-
var _useState7 = (0, _react.useState)([]),
|
|
54
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
55
|
-
inputValue = _useState8[0],
|
|
56
|
-
setInputValue = _useState8[1];
|
|
57
|
-
var _useState9 = (0, _react.useState)(false),
|
|
58
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
59
|
-
opened = _useState10[0],
|
|
60
|
-
setOpened = _useState10[1];
|
|
61
|
-
var _useState11 = (0, _react.useState)(0),
|
|
62
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
63
|
-
dropdownWidth = _useState12[0],
|
|
64
|
-
setDropdownWidth = _useState12[1];
|
|
65
|
-
var _useState13 = (0, _react.useState)(false),
|
|
66
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
67
|
-
insideComponent = _useState14[0],
|
|
68
|
-
setInsideComponent = _useState14[1];
|
|
69
|
-
var _useState15 = (0, _react.useState)(),
|
|
70
|
-
_useState16 = _slicedToArray(_useState15, 2),
|
|
71
|
-
onDenied = _useState16[0],
|
|
72
|
-
setOnDeniedSelect = _useState16[1];
|
|
73
|
-
var _useState17 = (0, _react.useState)([]),
|
|
74
|
-
_useState18 = _slicedToArray(_useState17, 2),
|
|
75
|
-
valueFromProps = _useState18[0],
|
|
76
|
-
setValueFromProps = _useState18[1];
|
|
77
|
-
var componentId = "select-component".concat(_uuid["default"].v1());
|
|
78
|
-
var componentRef = (0, _react.useRef)(null);
|
|
79
|
-
var dropdownRef = (0, _react.useRef)(null);
|
|
80
|
-
var selectWrapper = (0, _react.useRef)();
|
|
81
|
-
var gridElRef = (0, _react.useRef)();
|
|
82
|
-
var descriptionKeyIsString = typeof descriptionKey === 'string';
|
|
83
|
-
var onScreenResize = function onScreenResize() {
|
|
20
|
+
const MultipleSelect = props => {
|
|
21
|
+
const {
|
|
22
|
+
idKey,
|
|
23
|
+
dataSource = [],
|
|
24
|
+
handlerClear,
|
|
25
|
+
value = [],
|
|
26
|
+
remoteSearch = false,
|
|
27
|
+
descriptionKey
|
|
28
|
+
} = props;
|
|
29
|
+
const [dataCombo, setDataCombo] = (0, _react.useState)(dataSource);
|
|
30
|
+
const [currents, setCurrents] = (0, _react.useState)([]);
|
|
31
|
+
const [selected, setSelected] = (0, _react.useState)();
|
|
32
|
+
const [inputValue, setInputValue] = (0, _react.useState)([]);
|
|
33
|
+
const [opened, setOpened] = (0, _react.useState)(false);
|
|
34
|
+
const [dropdownWidth, setDropdownWidth] = (0, _react.useState)(0);
|
|
35
|
+
const [insideComponent, setInsideComponent] = (0, _react.useState)(false);
|
|
36
|
+
const [onDenied, setOnDeniedSelect] = (0, _react.useState)();
|
|
37
|
+
const [valueFromProps, setValueFromProps] = (0, _react.useState)([]);
|
|
38
|
+
const componentId = "select-component".concat(_uuid.default.v1());
|
|
39
|
+
const componentRef = (0, _react.useRef)(null);
|
|
40
|
+
const dropdownRef = (0, _react.useRef)(null);
|
|
41
|
+
const selectWrapper = (0, _react.useRef)();
|
|
42
|
+
const gridElRef = (0, _react.useRef)();
|
|
43
|
+
const descriptionKeyIsString = typeof descriptionKey === 'string';
|
|
44
|
+
const onScreenResize = () => {
|
|
84
45
|
if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
|
|
85
46
|
};
|
|
86
|
-
|
|
87
|
-
|
|
47
|
+
const onClickOutside = event => {
|
|
48
|
+
const {
|
|
49
|
+
target
|
|
50
|
+
} = event;
|
|
88
51
|
if (target !== selectWrapper.current && selectWrapper.current && !selectWrapper.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
|
|
89
52
|
setOpened(false);
|
|
90
53
|
}
|
|
91
54
|
};
|
|
92
|
-
|
|
93
|
-
|
|
55
|
+
const onMouseMove = event => {
|
|
56
|
+
const {
|
|
57
|
+
target
|
|
58
|
+
} = event;
|
|
94
59
|
if (target.className === '') return;
|
|
95
|
-
|
|
60
|
+
const insideComponents = ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label'].includes(target.className);
|
|
96
61
|
setInsideComponent(insideComponents);
|
|
97
62
|
};
|
|
98
|
-
|
|
63
|
+
const onClearClick = () => {
|
|
99
64
|
setSelected(undefined);
|
|
100
65
|
setCurrents([]);
|
|
101
66
|
if (props.onSelect) props.onSelect();
|
|
102
67
|
};
|
|
103
|
-
|
|
104
|
-
|
|
68
|
+
const onFilter = filteredValue => {
|
|
69
|
+
let selectedFilter = null;
|
|
105
70
|
if (remoteSearch) {
|
|
106
71
|
if (props.onSearch) props.onSearch(filteredValue);
|
|
107
72
|
setOpened(true);
|
|
108
73
|
setInputValue([filteredValue]);
|
|
109
74
|
} else {
|
|
110
|
-
|
|
75
|
+
let dataComboFilter = dataSource;
|
|
111
76
|
if (filteredValue.length > 0) {
|
|
112
77
|
dataComboFilter = (0, _helper.getFilteredMultipleDataCombo)({
|
|
113
78
|
inputText: [filteredValue],
|
|
114
|
-
dataSource
|
|
115
|
-
descriptionKey
|
|
116
|
-
currents
|
|
79
|
+
dataSource,
|
|
80
|
+
descriptionKey,
|
|
81
|
+
currents
|
|
117
82
|
});
|
|
118
83
|
}
|
|
119
84
|
if (dataComboFilter && dataComboFilter.length > 0) selectedFilter = dataComboFilter[0];
|
|
@@ -123,50 +88,42 @@ var MultipleSelect = function MultipleSelect(props) {
|
|
|
123
88
|
setInputValue([filteredValue]);
|
|
124
89
|
}
|
|
125
90
|
};
|
|
126
|
-
|
|
91
|
+
const onSelect = select => {
|
|
127
92
|
if (select === null) return;
|
|
128
|
-
|
|
93
|
+
const currentsSelect = [...currents, select];
|
|
129
94
|
setCurrents(currentsSelect);
|
|
130
95
|
setDataCombo(dataSource);
|
|
131
96
|
setInputValue([]);
|
|
132
97
|
setOpened(false);
|
|
133
|
-
if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(
|
|
134
|
-
return i[idKey];
|
|
135
|
-
})));
|
|
98
|
+
if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(i => i[idKey])));
|
|
136
99
|
};
|
|
137
|
-
|
|
100
|
+
const onUnselect = id => {
|
|
138
101
|
if (currents) {
|
|
139
|
-
|
|
140
|
-
return item[idKey] !== id;
|
|
141
|
-
});
|
|
102
|
+
const result = currents.filter(item => item[idKey] !== id);
|
|
142
103
|
setCurrents(result);
|
|
143
|
-
if (props.onSelect) setSelected(props.onSelect(result.map(
|
|
144
|
-
return i[idKey];
|
|
145
|
-
})));
|
|
104
|
+
if (props.onSelect) setSelected(props.onSelect(result.map(i => i[idKey])));
|
|
146
105
|
}
|
|
147
106
|
};
|
|
148
|
-
|
|
107
|
+
const onOpenClose = () => {
|
|
149
108
|
setOpened(!opened);
|
|
150
109
|
if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);
|
|
151
110
|
};
|
|
152
|
-
|
|
153
|
-
|
|
111
|
+
const onFocus = () => {
|
|
112
|
+
const dropdownWidthFocus = selectWrapper.current ? selectWrapper.current.clientWidth : dropdownWidth;
|
|
154
113
|
setOpened(true);
|
|
155
114
|
setDropdownWidth(dropdownWidthFocus);
|
|
156
115
|
};
|
|
157
|
-
|
|
116
|
+
const onBlur = e => {
|
|
158
117
|
if (props.onBlur) props.onBlur(e);
|
|
159
118
|
if (!insideComponent) setOpened(false);
|
|
160
119
|
};
|
|
161
|
-
|
|
120
|
+
const onInputKeyDown = e => {
|
|
162
121
|
if (e.keyCode) {
|
|
163
122
|
if (e.keyCode === constants.keyCodes.ENTER && selected) {
|
|
164
123
|
if (!currents.includes(selected)) onSelect(selected);
|
|
165
124
|
} else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {
|
|
166
125
|
if (!opened) setOpened(true);
|
|
167
|
-
|
|
168
|
-
return d === selected;
|
|
169
|
-
}) : 0;
|
|
126
|
+
let index = dataSource ? dataSource.findIndex(d => d === selected) : 0;
|
|
170
127
|
if (e.keyCode === constants.keyCodes.ARROW_DOWN) {
|
|
171
128
|
index = dataSource && index === dataSource.length - 1 ? 0 : index + 1;
|
|
172
129
|
} else {
|
|
@@ -180,101 +137,93 @@ var MultipleSelect = function MultipleSelect(props) {
|
|
|
180
137
|
if (dataSource) setSelected(dataSource[index]);
|
|
181
138
|
} else if (e.keyCode === constants.keyCodes.BACKSPACE) {
|
|
182
139
|
if (inputValue.length === 0) {
|
|
183
|
-
|
|
140
|
+
const currentsKeyDown = _lodash.default.dropRight(currents);
|
|
184
141
|
setCurrents(currentsKeyDown);
|
|
185
|
-
if (props.onSelect) props.onSelect(currentsKeyDown.map(
|
|
186
|
-
return i[idKey];
|
|
187
|
-
}));
|
|
142
|
+
if (props.onSelect) props.onSelect(currentsKeyDown.map(i => i[idKey]));
|
|
188
143
|
}
|
|
189
144
|
}
|
|
190
145
|
}
|
|
191
146
|
};
|
|
192
|
-
|
|
147
|
+
const setOnDenied = denied => {
|
|
193
148
|
setOnDeniedSelect(denied);
|
|
194
149
|
};
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
var shouldBeReadOnly = function shouldBeReadOnly() {
|
|
199
|
-
return props.readOnly || onDenied && onDenied.readOnly;
|
|
200
|
-
};
|
|
201
|
-
(0, _react.useEffect)(function () {
|
|
150
|
+
const shouldDisable = () => props.disabled || onDenied && (onDenied.disabled || onDenied.hideContent);
|
|
151
|
+
const shouldBeReadOnly = () => props.readOnly || onDenied && onDenied.readOnly;
|
|
152
|
+
(0, _react.useEffect)(() => {
|
|
202
153
|
window.addEventListener('resize', onScreenResize);
|
|
203
154
|
document.addEventListener('click', onClickOutside);
|
|
204
155
|
document.addEventListener('mousemove', onMouseMove);
|
|
205
156
|
if (handlerClear) onClearClick();
|
|
206
|
-
return
|
|
157
|
+
return () => {
|
|
207
158
|
window.removeEventListener('resize', onScreenResize);
|
|
208
159
|
document.removeEventListener('click', onClickOutside);
|
|
209
160
|
document.removeEventListener('mousemove', onMouseMove);
|
|
210
161
|
};
|
|
211
162
|
}, []);
|
|
212
|
-
(0, _react.useEffect)(
|
|
163
|
+
(0, _react.useEffect)(() => {
|
|
213
164
|
if (props.gridLayout) {
|
|
214
|
-
|
|
165
|
+
const gridEl = document.querySelector("#".concat(componentId, ">.-withinput.grid-container"));
|
|
215
166
|
if (gridElRef.current !== gridEl && gridEl) gridElRef.current = gridEl;
|
|
216
167
|
}
|
|
217
168
|
}, []);
|
|
218
|
-
(0, _react.useEffect)(
|
|
169
|
+
(0, _react.useEffect)(() => {
|
|
219
170
|
if (value.length > 0 && value !== valueFromProps && dataSource.length > 0) {
|
|
220
|
-
|
|
221
|
-
return value.includes(item[idKey]);
|
|
222
|
-
});
|
|
171
|
+
const newCurrents = dataSource.filter(item => value.includes(item[idKey]));
|
|
223
172
|
setValueFromProps(value);
|
|
224
173
|
setCurrents(newCurrents);
|
|
225
174
|
}
|
|
226
175
|
}, [dataSource.length, value.length]);
|
|
227
|
-
(0, _react.useEffect)(
|
|
228
|
-
if (!_lodash
|
|
229
|
-
|
|
230
|
-
currents
|
|
231
|
-
dataSource
|
|
232
|
-
descriptionKey
|
|
176
|
+
(0, _react.useEffect)(() => {
|
|
177
|
+
if (!_lodash.default.isEqual(dataSource, dataCombo)) {
|
|
178
|
+
const filteredDataCombo = remoteSearch ? dataSource : (0, _helper.getFilteredMultipleDataCombo)({
|
|
179
|
+
currents,
|
|
180
|
+
dataSource,
|
|
181
|
+
descriptionKey,
|
|
233
182
|
inputText: inputValue
|
|
234
183
|
});
|
|
235
184
|
setDataCombo(filteredDataCombo);
|
|
236
185
|
setSelected(filteredDataCombo.length > 0 ? dataCombo[0] : null);
|
|
237
186
|
}
|
|
238
187
|
}, [dataSource]);
|
|
239
|
-
return /*#__PURE__*/_react
|
|
188
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
240
189
|
id: componentId,
|
|
241
190
|
ref: componentRef,
|
|
242
191
|
className: "select-component"
|
|
243
|
-
}, /*#__PURE__*/_react
|
|
192
|
+
}, /*#__PURE__*/_react.default.createElement(_InputTextBase.default, _extends({}, props, {
|
|
244
193
|
value: inputValue.toString(),
|
|
245
194
|
readOnly: shouldBeReadOnly(),
|
|
246
|
-
onFocus:
|
|
247
|
-
|
|
195
|
+
onFocus: () => {
|
|
196
|
+
onFocus();
|
|
248
197
|
},
|
|
249
|
-
onBlur:
|
|
250
|
-
|
|
198
|
+
onBlur: e => {
|
|
199
|
+
onBlur(e);
|
|
251
200
|
},
|
|
252
|
-
onChange:
|
|
201
|
+
onChange: e => {
|
|
253
202
|
if (e) onFilter(e.target.value);
|
|
254
203
|
},
|
|
255
204
|
onKeyDown: onInputKeyDown,
|
|
256
205
|
customClassForWrapper: "selectwrapper ".concat((props.readOnly || shouldDisable() || shouldBeReadOnly()) && ' -undigitable'),
|
|
257
206
|
customClassForInputContent: "multiselect",
|
|
258
|
-
inputBaseRef:
|
|
207
|
+
inputBaseRef: r => {
|
|
259
208
|
selectWrapper.current = r;
|
|
260
209
|
},
|
|
261
210
|
handlerSetOnDenied: setOnDenied,
|
|
262
|
-
rightElements: /*#__PURE__*/_react
|
|
211
|
+
rightElements: /*#__PURE__*/_react.default.createElement(_ActionButtons.default, _extends({}, props, {
|
|
263
212
|
disabled: shouldDisable() || shouldBeReadOnly(),
|
|
264
213
|
dropDownOpened: opened,
|
|
265
|
-
handleClear:
|
|
214
|
+
handleClear: () => {
|
|
266
215
|
if (shouldDisable()) return null;
|
|
267
216
|
return onClearClick();
|
|
268
217
|
},
|
|
269
|
-
handleOpenClose:
|
|
218
|
+
handleOpenClose: () => {
|
|
270
219
|
onOpenClose();
|
|
271
220
|
}
|
|
272
221
|
}))
|
|
273
|
-
}), /*#__PURE__*/_react
|
|
222
|
+
}), /*#__PURE__*/_react.default.createElement(_Selecteds.default, _extends({
|
|
274
223
|
currents: currents
|
|
275
224
|
}, props, {
|
|
276
225
|
handleOnUnselect: onUnselect
|
|
277
|
-
}))), opened && /*#__PURE__*/_react
|
|
226
|
+
}))), opened && /*#__PURE__*/_react.default.createElement(_Dropdown.default, _extends({}, props, {
|
|
278
227
|
selected: selected,
|
|
279
228
|
selectFieldRef: componentRef,
|
|
280
229
|
dropdownRef: dropdownRef,
|
|
@@ -282,14 +231,12 @@ var MultipleSelect = function MultipleSelect(props) {
|
|
|
282
231
|
handleOnSelect: onSelect,
|
|
283
232
|
handleOnFilter: onFilter,
|
|
284
233
|
handleOnKeydown: onInputKeyDown,
|
|
285
|
-
handleOnBlur:
|
|
286
|
-
|
|
287
|
-
},
|
|
288
|
-
handleOnFocus: _onFocus,
|
|
234
|
+
handleOnBlur: () => onBlur,
|
|
235
|
+
handleOnFocus: onFocus,
|
|
289
236
|
opened: opened,
|
|
290
237
|
dataCombo: dataCombo,
|
|
291
238
|
currents: currents,
|
|
292
239
|
dropdownWidth: dropdownWidth || 0
|
|
293
240
|
})));
|
|
294
241
|
};
|
|
295
|
-
var _default = exports
|
|
242
|
+
var _default = exports.default = MultipleSelect;
|