@hipay/hipay-material-ui 2.3.0-rc.5 → 2.3.0-rc.PSYCHE-2530
Sign up to get free protection for your applications and to get access to all the features.
- package/HiAlertModal/HiAlertModal.js +16 -78
- package/HiAlertModal/index.js +1 -1
- package/HiAppBar/HiAppBar.js +11 -55
- package/HiAppBar/index.js +1 -1
- package/HiBadge/HiBadge.js +4 -32
- package/HiBadge/index.js +1 -1
- package/HiBreadcrumb/HiBreadcrumb.js +15 -46
- package/HiBreadcrumb/HiStep.js +17 -72
- package/HiBreadcrumb/HiStepConnector.js +17 -56
- package/HiBreadcrumb/HiStepContent.js +10 -20
- package/HiBreadcrumb/HiStepIcon.js +11 -34
- package/HiBreadcrumb/HiStepLabel.js +28 -80
- package/HiBreadcrumb/HiStepper.js +12 -28
- package/HiBreadcrumb/index.js +1 -1
- package/HiButton/HiButton.js +58 -205
- package/HiButton/index.js +6 -8
- package/HiCell/CellAddress.js +10 -51
- package/HiCell/CellDate.js +16 -44
- package/HiCell/CellIcon.js +10 -52
- package/HiCell/CellImage.js +10 -51
- package/HiCell/CellNumeric.js +10 -41
- package/HiCell/CellPinToAction.js +6 -25
- package/HiCell/CellRate.js +9 -47
- package/HiCell/CellSentinel.js +10 -20
- package/HiCell/CellSentinelScore.js +10 -16
- package/HiCell/CellText.js +11 -33
- package/HiCell/CellTextStyled.js +1 -39
- package/HiCell/index.js +1 -1
- package/HiCheckbox/HiCheckbox.js +15 -63
- package/HiCheckbox/index.js +1 -1
- package/HiChip/HiChip.js +15 -115
- package/HiChip/HiChipSwitch.js +19 -73
- package/HiChip/index.js +1 -1
- package/HiColoredLabel/HiColoredLabel.js +13 -55
- package/HiColoredLabel/index.js +1 -1
- package/HiDatePicker/Caption.js +3 -39
- package/HiDatePicker/HiDatePicker.js +56 -150
- package/HiDatePicker/HiDatePickerMobile.js +11 -32
- package/HiDatePicker/HiDateRangePicker.js +71 -226
- package/HiDatePicker/HiDateRangeSelector.js +58 -180
- package/HiDatePicker/ListPicker.js +13 -44
- package/HiDatePicker/NavBar.js +1 -49
- package/HiDatePicker/Overlays/CustomOverlayLayout.js +7 -27
- package/HiDatePicker/Overlays/CustomOverlayLayoutWithoutFooter.js +7 -27
- package/HiDatePicker/Overlays/MonthPickerOverlay.js +14 -45
- package/HiDatePicker/Overlays/Overlay.js +5 -47
- package/HiDatePicker/Overlays/TimePickerOverlay.js +19 -53
- package/HiDatePicker/Overlays/YearPickerOverlay.js +14 -60
- package/HiDatePicker/Overlays/index.js +1 -1
- package/HiDatePicker/Weekday.js +1 -24
- package/HiDatePicker/index.js +15 -0
- package/HiDatePicker/stylesheet.js +6 -6
- package/HiDotsStepper/HiDot.js +12 -18
- package/HiDotsStepper/HiDotsStepper.js +13 -23
- package/HiDotsStepper/index.js +23 -0
- package/HiExpansionPanel/HiExpansionPanel.js +24 -73
- package/HiExpansionPanel/index.js +6 -8
- package/HiForm/HiAddressField.js +13 -36
- package/HiForm/HiEmailField.js +13 -46
- package/HiForm/HiFormControl.js +24 -121
- package/HiForm/HiFormLabel.js +15 -59
- package/HiForm/HiInput.js +20 -200
- package/HiForm/HiPasswordField.js +13 -25
- package/HiForm/HiSearchField.js +13 -43
- package/HiForm/HiSlider.js +15 -86
- package/HiForm/HiTextField.js +14 -153
- package/HiForm/HiUpload.js +29 -91
- package/HiForm/HiUploadField.js +12 -73
- package/HiForm/HiUploadInput.js +33 -113
- package/HiForm/index.js +1 -1
- package/HiIcon/HiIcon.js +36 -114
- package/HiIcon/index.js +1 -1
- package/HiIconButton/HiIconButton.js +4 -22
- package/HiIconButton/index.js +1 -1
- package/HiLoader/HiLoader.js +7 -27
- package/HiLoader/index.js +1 -1
- package/HiMap/HiMap.js +14 -35
- package/HiMap/HiMapExpand.js +13 -41
- package/HiMap/index.js +1 -1
- package/HiNotice/HiKPI.js +12 -82
- package/HiNotice/HiKPINotice.js +1 -29
- package/HiNotice/index.js +1 -1
- package/HiPaymentMeans/HiPaymentMeans.js +17 -112
- package/HiPaymentMeans/index.js +1 -1
- package/HiPdfReader/HiPdfReader.js +24 -48
- package/HiPdfReader/index.js +1 -1
- package/HiPin/HiPin.js +3 -16
- package/HiPin/index.js +1 -1
- package/HiRadio/HiRadio.js +1 -13
- package/HiRadio/index.js +1 -1
- package/HiSelect/HiDynamicSelect.js +23 -94
- package/HiSelect/HiDynamicSelectField.js +8 -56
- package/HiSelect/HiNestedSelect.js +25 -116
- package/HiSelect/HiNestedSelectContent.js +24 -102
- package/HiSelect/HiNestedSelectField.js +8 -56
- package/HiSelect/HiSelect.js +68 -270
- package/HiSelect/HiSelectContent.js +42 -167
- package/HiSelect/HiSelectField.js +8 -61
- package/HiSelect/HiSelectInput.js +24 -125
- package/HiSelect/HiSelectMobile.js +23 -54
- package/HiSelect/HiSuggestSelect.js +25 -105
- package/HiSelect/HiSuggestSelectField.js +8 -56
- package/HiSelect/index.js +2 -2
- package/HiSelectableList/HiSelectableList.js +24 -122
- package/HiSelectableList/HiSelectableListHierarchic.js +18 -78
- package/HiSelectableList/HiSelectableListItem.js +20 -159
- package/HiSelectableList/index.js +1 -1
- package/HiSwitch/HiSwitch.js +4 -40
- package/HiSwitch/HiSwitchState.js +2 -58
- package/HiSwitch/index.js +1 -1
- package/HiTable/HiCellBuilder.js +13 -34
- package/HiTable/HiTable.js +11 -65
- package/HiTable/HiTableBody.js +6 -34
- package/HiTable/HiTableHeader.js +13 -50
- package/HiTable/HiTableRow.js +11 -49
- package/HiTable/constants.js +2 -2
- package/HiTable/index.js +1 -1
- package/README.md +11 -38
- package/es/HiAlertModal/HiAlertModal.js +211 -220
- package/es/HiAlertModal/index.js +15 -1
- package/es/HiAppBar/HiAppBar.js +120 -118
- package/es/HiAppBar/index.js +15 -1
- package/es/HiBadge/HiBadge.js +85 -100
- package/es/HiBadge/index.js +15 -1
- package/es/HiBreadcrumb/HiBreadcrumb.js +98 -83
- package/es/HiBreadcrumb/HiStep.js +113 -113
- package/es/HiBreadcrumb/HiStepConnector.js +144 -137
- package/es/HiBreadcrumb/HiStepContent.js +90 -58
- package/es/HiBreadcrumb/HiStepIcon.js +144 -141
- package/es/HiBreadcrumb/HiStepLabel.js +161 -184
- package/es/HiBreadcrumb/HiStepper.js +73 -46
- package/es/HiBreadcrumb/index.js +15 -1
- package/es/HiButton/HiButton.js +77 -217
- package/es/HiButton/index.js +13 -1
- package/es/HiCell/CellAddress.js +85 -83
- package/es/HiCell/CellDate.js +87 -70
- package/es/HiCell/CellIcon.js +94 -96
- package/es/HiCell/CellImage.js +99 -98
- package/es/HiCell/CellNumeric.js +79 -68
- package/es/HiCell/CellPinToAction.js +61 -41
- package/es/HiCell/CellRate.js +137 -133
- package/es/HiCell/CellSentinel.js +75 -46
- package/es/HiCell/CellSentinelScore.js +69 -35
- package/es/HiCell/CellText.js +190 -160
- package/es/HiCell/CellTextStyled.js +37 -59
- package/es/HiCell/index.js +79 -9
- package/es/HiCheckbox/HiCheckbox.js +154 -162
- package/es/HiCheckbox/index.js +15 -1
- package/es/HiChip/HiChip.js +172 -245
- package/es/HiChip/HiChipSwitch.js +208 -223
- package/es/HiChip/index.js +23 -2
- package/es/HiColoredLabel/HiColoredLabel.js +157 -185
- package/es/HiColoredLabel/index.js +15 -1
- package/es/HiDatePicker/Caption.js +46 -61
- package/es/HiDatePicker/HiDatePicker.js +283 -323
- package/es/HiDatePicker/HiDatePickerMobile.js +104 -87
- package/es/HiDatePicker/HiDateRangePicker.js +500 -570
- package/es/HiDatePicker/HiDateRangeSelector.js +328 -376
- package/es/HiDatePicker/ListPicker.js +125 -101
- package/es/HiDatePicker/NavBar.js +94 -112
- package/es/HiDatePicker/Overlays/CustomOverlayLayout.js +93 -96
- package/es/HiDatePicker/Overlays/CustomOverlayLayoutWithoutFooter.js +86 -89
- package/es/HiDatePicker/Overlays/MonthPickerOverlay.js +80 -75
- package/es/HiDatePicker/Overlays/Overlay.js +62 -87
- package/es/HiDatePicker/Overlays/TimePickerOverlay.js +202 -188
- package/es/HiDatePicker/Overlays/YearPickerOverlay.js +90 -95
- package/es/HiDatePicker/Overlays/index.js +47 -5
- package/es/HiDatePicker/Weekday.js +19 -32
- package/es/HiDatePicker/hiLocaleUtils.js +41 -28
- package/es/HiDatePicker/index.js +15 -0
- package/es/HiDatePicker/stylesheet.js +259 -244
- package/es/HiDotsStepper/HiDot.js +86 -50
- package/es/HiDotsStepper/HiDotsStepper.js +96 -58
- package/es/HiDotsStepper/index.js +23 -0
- package/es/HiExpansionPanel/HiExpansionPanel.js +198 -204
- package/es/HiExpansionPanel/index.js +13 -1
- package/es/HiForm/HiAddressField.js +125 -106
- package/es/HiForm/HiEmailField.js +69 -66
- package/es/HiForm/HiFormControl.js +266 -309
- package/es/HiForm/HiFormLabel.js +110 -112
- package/es/HiForm/HiInput.js +397 -530
- package/es/HiForm/HiPasswordField.js +101 -67
- package/es/HiForm/HiSearchField.js +130 -121
- package/es/HiForm/HiSlider.js +251 -272
- package/es/HiForm/HiTextField.js +145 -244
- package/es/HiForm/HiUpload.js +288 -300
- package/es/HiForm/HiUploadField.js +82 -109
- package/es/HiForm/HiUploadInput.js +295 -325
- package/es/HiForm/index.js +95 -11
- package/es/HiIcon/HiIcon.js +75 -132
- package/es/HiIcon/index.js +15 -1
- package/es/HiIconButton/HiIconButton.js +82 -80
- package/es/HiIconButton/index.js +15 -1
- package/es/HiLoader/HiLoader.js +30 -37
- package/es/HiLoader/index.js +15 -1
- package/es/HiMap/HiMap.js +281 -245
- package/es/HiMap/HiMapExpand.js +182 -162
- package/es/HiMap/index.js +23 -2
- package/es/HiNotice/HiKPI.js +173 -201
- package/es/HiNotice/HiKPINotice.js +42 -52
- package/es/HiNotice/index.js +23 -2
- package/es/HiPaymentMeans/HiPaymentMeans.js +453 -500
- package/es/HiPaymentMeans/index.js +15 -1
- package/es/HiPdfReader/HiPdfReader.js +215 -184
- package/es/HiPdfReader/index.js +15 -1
- package/es/HiPin/HiPin.js +82 -79
- package/es/HiPin/index.js +15 -1
- package/es/HiRadio/HiRadio.js +47 -40
- package/es/HiRadio/index.js +15 -1
- package/es/HiSelect/HiDynamicSelect.js +110 -146
- package/es/HiSelect/HiDynamicSelectField.js +91 -104
- package/es/HiSelect/HiNestedSelect.js +235 -260
- package/es/HiSelect/HiNestedSelectContent.js +186 -197
- package/es/HiSelect/HiNestedSelectField.js +91 -104
- package/es/HiSelect/HiSelect.js +564 -684
- package/es/HiSelect/HiSelectContent.js +283 -338
- package/es/HiSelect/HiSelectField.js +93 -111
- package/es/HiSelect/HiSelectInput.js +266 -321
- package/es/HiSelect/HiSelectMobile.js +118 -100
- package/es/HiSelect/HiSuggestSelect.js +237 -256
- package/es/HiSelect/HiSuggestSelectField.js +80 -93
- package/es/HiSelect/index.js +85 -8
- package/es/HiSelectableList/HiSelectableList.js +195 -219
- package/es/HiSelectableList/HiSelectableListHierarchic.js +148 -150
- package/es/HiSelectableList/HiSelectableListItem.js +378 -475
- package/es/HiSelectableList/index.js +31 -3
- package/es/HiSwitch/HiSwitch.js +172 -185
- package/es/HiSwitch/HiSwitchState.js +134 -171
- package/es/HiSwitch/index.js +23 -2
- package/es/HiTable/HiCellBuilder.js +106 -72
- package/es/HiTable/HiTable.js +92 -105
- package/es/HiTable/HiTableBody.js +59 -53
- package/es/HiTable/HiTableHeader.js +133 -116
- package/es/HiTable/HiTableRow.js +126 -110
- package/es/HiTable/constants.js +97 -138
- package/es/HiTable/index.js +15 -1
- package/es/hi-svg-icons/HiAccount.js +41 -21
- package/es/hi-svg-icons/HiActivity.js +40 -20
- package/es/hi-svg-icons/HiAll.js +44 -24
- package/es/hi-svg-icons/HiBilling.js +41 -21
- package/es/hi-svg-icons/HiBriefcaseRescue.js +29 -10
- package/es/hi-svg-icons/HiCatalog.js +41 -21
- package/es/hi-svg-icons/HiCustomer.js +41 -21
- package/es/hi-svg-icons/HiDownload.js +29 -12
- package/es/hi-svg-icons/HiFinance.js +41 -21
- package/es/hi-svg-icons/HiPermission.js +40 -20
- package/es/hi-svg-icons/HiRoute.js +41 -21
- package/es/hi-svg-icons/HiSettlement.js +41 -21
- package/es/hi-svg-icons/HiSizeLarge.js +28 -15
- package/es/hi-svg-icons/HiSizeMedium.js +26 -15
- package/es/hi-svg-icons/HiSizeSmall.js +26 -15
- package/es/hi-svg-icons/HiTransaction.js +41 -21
- package/es/hi-svg-icons/HiUser.js +41 -21
- package/es/hi-svg-icons/HiWidget.js +44 -24
- package/es/hi-svg-icons/index.js +151 -18
- package/es/hi-svg-icons/index.text.js +27 -17
- package/es/styleguide/Wrapper.js +51 -0
- package/es/styles/MuiThemeProvider.js +131 -111
- package/es/styles/colorManipulator.js +89 -52
- package/es/styles/createBreakpoints.js +48 -35
- package/es/styles/createGenerateClassName.js +34 -22
- package/es/styles/createMixins.js +31 -20
- package/es/styles/createMuiTheme.js +67 -44
- package/es/styles/createPalette.js +135 -102
- package/es/styles/createStyles.js +8 -1
- package/es/styles/createTypography.js +86 -75
- package/es/styles/getStylesCreator.js +31 -18
- package/es/styles/getThemeProps.js +11 -5
- package/es/styles/index.js +47 -7
- package/es/styles/jssPreset.js +25 -9
- package/es/styles/mergeClasses.js +28 -16
- package/es/styles/shadows.js +14 -7
- package/es/styles/shape.js +9 -2
- package/es/styles/spacing.js +13 -2
- package/es/styles/themeListener.js +22 -10
- package/es/styles/transitions.js +61 -31
- package/es/styles/zIndex.js +9 -2
- package/es/test-utils/createMount.js +31 -18
- package/es/test-utils/createRender.js +25 -12
- package/es/test-utils/createShallow.js +34 -19
- package/es/test-utils/getClasses.js +11 -2
- package/es/test-utils/index.js +47 -5
- package/es/test-utils/until.js +25 -12
- package/es/test-utils/unwrap.js +8 -1
- package/es/theme/palette.js +106 -0
- package/es/theme/typography.js +170 -0
- package/es/theme.js +22 -0
- package/es/transitions/utils.js +18 -6
- package/es/utils/helpers.js +99 -39
- package/es/withMobileDialog/index.js +15 -1
- package/es/withMobileDialog/withMobileDialog.js +32 -20
- package/hi-svg-icons/HiAccount.js +16 -10
- package/hi-svg-icons/HiActivity.js +16 -10
- package/hi-svg-icons/HiAll.js +16 -10
- package/hi-svg-icons/HiBilling.js +16 -10
- package/hi-svg-icons/HiBriefcaseRescue.js +15 -9
- package/hi-svg-icons/HiCatalog.js +16 -10
- package/hi-svg-icons/HiCustomer.js +16 -10
- package/hi-svg-icons/HiDownload.js +13 -5
- package/hi-svg-icons/HiFinance.js +16 -10
- package/hi-svg-icons/HiPermission.js +16 -10
- package/hi-svg-icons/HiRoute.js +16 -10
- package/hi-svg-icons/HiSettlement.js +16 -10
- package/hi-svg-icons/HiSizeLarge.js +5 -3
- package/hi-svg-icons/HiSizeMedium.js +3 -3
- package/hi-svg-icons/HiSizeSmall.js +3 -3
- package/hi-svg-icons/HiTransaction.js +16 -10
- package/hi-svg-icons/HiUser.js +16 -10
- package/hi-svg-icons/HiWidget.js +16 -10
- package/hi-svg-icons/index.js +1 -1
- package/hi-svg-icons/index.text.js +1 -1
- package/package.json +37 -56
- package/styleguide/Wrapper.js +51 -0
- package/styles/MuiThemeProvider.js +17 -44
- package/styles/colorManipulator.js +1 -1
- package/styles/createBreakpoints.js +4 -4
- package/styles/createGenerateClassName.js +1 -1
- package/styles/createMixins.js +6 -6
- package/styles/createMuiTheme.js +4 -4
- package/styles/createPalette.js +5 -5
- package/styles/createTypography.js +15 -15
- package/styles/getStylesCreator.js +4 -4
- package/styles/index.js +2 -18
- package/styles/jssPreset.js +1 -1
- package/styles/mergeClasses.js +3 -3
- package/styles/themeListener.js +2 -2
- package/styles/transitions.js +2 -2
- package/test-utils/createMount.js +5 -5
- package/test-utils/createRender.js +4 -4
- package/test-utils/createShallow.js +5 -5
- package/test-utils/index.js +1 -1
- package/test-utils/until.js +5 -5
- package/theme/palette.js +106 -0
- package/theme/typography.js +170 -0
- package/theme.js +22 -0
- package/utils/helpers.js +4 -4
- package/withMobileDialog/index.js +1 -1
- package/withMobileDialog/withMobileDialog.js +3 -8
- package/CHANGELOG.md +0 -8486
- package/LICENSE +0 -21
- package/es/index.js +0 -26
- package/es/styles/withStyles.js +0 -317
- package/es/styles/withTheme.js +0 -84
- package/es/utils/exactProp.js +0 -28
- package/es/utils/ownerDocument.js +0 -5
- package/es/utils/ownerWindow.js +0 -8
- package/es/utils/reactHelpers.js +0 -19
- package/es/utils/requirePropFactory.js +0 -20
- package/es/utils/unsupportedProp.js +0 -16
- package/index.es.js +0 -31
- package/index.js +0 -256
- package/styles/withStyles.js +0 -378
- package/styles/withTheme.js +0 -126
- package/utils/exactProp.js +0 -43
- package/utils/ownerDocument.js +0 -13
- package/utils/ownerWindow.js +0 -19
- package/utils/reactHelpers.js +0 -36
- package/utils/requirePropFactory.js +0 -32
- package/utils/unsupportedProp.js +0 -24
package/es/HiSelect/HiSelect.js
CHANGED
@@ -1,81 +1,129 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
import Paper from '@material-ui/core/Paper';
|
8
|
-
import Popper from '@material-ui/core/Popper';
|
9
|
-
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
|
10
|
-
import HiSelectableList from '../HiSelectableList';
|
11
|
-
import HiInput from '../HiForm/HiInput';
|
12
|
-
import HiSelectInput from './HiSelectInput';
|
13
|
-
import { withStyles } from '@material-ui/core/styles';
|
14
|
-
import { foldAccents } from '../utils/helpers';
|
15
|
-
import HiIcon from '../HiIcon';
|
16
|
-
import keycode from 'keycode';
|
17
|
-
import classNames from 'classnames';
|
18
|
-
import HiAlertModal from '../HiAlertModal';
|
19
|
-
import { isMobile } from 'react-device-detect';
|
20
|
-
import HiSelectMobile from './HiSelectMobile';
|
21
|
-
import { findDOMNode } from 'react-dom';
|
22
|
-
export const styles = theme => ({
|
23
|
-
root: {
|
24
|
-
backgroundColor: theme.palette.background2,
|
25
|
-
maxWidth: 500,
|
26
|
-
width: '100%',
|
27
|
-
position: 'relative'
|
28
|
-
},
|
29
|
-
popper: {
|
30
|
-
zIndex: 1200
|
31
|
-
},
|
32
|
-
popperWidth: {
|
33
|
-
width: '100% !important'
|
34
|
-
},
|
35
|
-
popperRightAlign: {
|
36
|
-
right: 0,
|
37
|
-
left: 'unset!important'
|
38
|
-
},
|
39
|
-
paper: {
|
40
|
-
borderRadius: '0px 2px',
|
41
|
-
maxHeight: 480,
|
42
|
-
transition: 'none !important'
|
43
|
-
},
|
44
|
-
labelIcon: {
|
45
|
-
marginRight: 10,
|
46
|
-
verticalAlign: 'text-bottom'
|
47
|
-
},
|
48
|
-
labelImg: {
|
49
|
-
height: 18,
|
50
|
-
width: 'auto',
|
51
|
-
margin: '0 4px',
|
52
|
-
verticalAlign: 'text-bottom'
|
53
|
-
},
|
54
|
-
selectIconLabel: _objectSpread({
|
55
|
-
whiteSpace: 'nowrap',
|
56
|
-
overflow: 'hidden',
|
57
|
-
textOverflow: 'ellipsis',
|
58
|
-
paddingRight: 16
|
59
|
-
}, theme.typography.b1, {
|
60
|
-
display: 'inline-block',
|
61
|
-
width: '100%'
|
62
|
-
}),
|
63
|
-
selectImgLabel: _objectSpread({
|
64
|
-
whiteSpace: 'nowrap',
|
65
|
-
overflow: 'hidden',
|
66
|
-
textOverflow: 'ellipsis',
|
67
|
-
paddingRight: 16
|
68
|
-
}, theme.typography.b1, {
|
69
|
-
display: 'inline-flex',
|
70
|
-
width: '100%'
|
71
|
-
}),
|
72
|
-
separator: {
|
73
|
-
borderTop: `1px solid ${theme.palette.input.bottomLine}`
|
74
|
-
}
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
75
7
|
});
|
8
|
+
exports.default = exports.styles = void 0;
|
9
|
+
|
10
|
+
var _extends2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends"));
|
11
|
+
|
12
|
+
var _toConsumableArray2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/toConsumableArray"));
|
13
|
+
|
14
|
+
var _classCallCheck2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/classCallCheck"));
|
15
|
+
|
16
|
+
var _createClass2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/createClass"));
|
17
|
+
|
18
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn"));
|
19
|
+
|
20
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/getPrototypeOf"));
|
21
|
+
|
22
|
+
var _assertThisInitialized2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/assertThisInitialized"));
|
23
|
+
|
24
|
+
var _inherits2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/inherits"));
|
25
|
+
|
26
|
+
var _defineProperty2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/defineProperty"));
|
27
|
+
|
28
|
+
var _objectSpread2 = _interopRequireDefault(require("/home/mfazio/dev/projects/hipay-material-ui/node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectSpread2"));
|
29
|
+
|
30
|
+
var _react = _interopRequireDefault(require("react"));
|
31
|
+
|
32
|
+
var _reactCustomScrollbars = _interopRequireDefault(require("react-custom-scrollbars"));
|
33
|
+
|
34
|
+
var _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
|
35
|
+
|
36
|
+
var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
|
37
|
+
|
38
|
+
var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
|
39
|
+
|
40
|
+
var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
|
41
|
+
|
42
|
+
var _HiSelectableList = _interopRequireDefault(require("../HiSelectableList"));
|
43
|
+
|
44
|
+
var _HiInput = _interopRequireDefault(require("../HiForm/HiInput"));
|
45
|
+
|
46
|
+
var _HiSelectInput = _interopRequireDefault(require("./HiSelectInput"));
|
47
|
+
|
48
|
+
var _styles = require("@material-ui/core/styles");
|
49
|
+
|
50
|
+
var _helpers = require("../utils/helpers");
|
51
|
+
|
52
|
+
var _HiIcon = _interopRequireDefault(require("../HiIcon"));
|
53
|
+
|
54
|
+
var _keycode = _interopRequireDefault(require("keycode"));
|
55
|
+
|
56
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
57
|
+
|
58
|
+
var _HiAlertModal = _interopRequireDefault(require("../HiAlertModal"));
|
59
|
+
|
60
|
+
var _reactDeviceDetect = require("react-device-detect");
|
61
|
+
|
62
|
+
var _HiSelectMobile = _interopRequireDefault(require("./HiSelectMobile"));
|
63
|
+
|
64
|
+
var _reactDom = require("react-dom");
|
65
|
+
|
66
|
+
var styles = function styles(theme) {
|
67
|
+
return {
|
68
|
+
root: {
|
69
|
+
backgroundColor: theme.palette.background2,
|
70
|
+
maxWidth: 500,
|
71
|
+
width: '100%',
|
72
|
+
position: 'relative'
|
73
|
+
},
|
74
|
+
popper: {
|
75
|
+
zIndex: 1200
|
76
|
+
},
|
77
|
+
popperWidth: {
|
78
|
+
width: '100% !important'
|
79
|
+
},
|
80
|
+
popperRightAlign: {
|
81
|
+
right: 0,
|
82
|
+
left: 'unset!important'
|
83
|
+
},
|
84
|
+
paper: {
|
85
|
+
borderRadius: '0px 2px',
|
86
|
+
maxHeight: 480,
|
87
|
+
transition: 'none !important'
|
88
|
+
},
|
89
|
+
labelIcon: {
|
90
|
+
marginRight: 10,
|
91
|
+
verticalAlign: 'text-bottom'
|
92
|
+
},
|
93
|
+
labelImg: {
|
94
|
+
height: 18,
|
95
|
+
width: 'auto',
|
96
|
+
margin: '0 4px',
|
97
|
+
verticalAlign: 'text-bottom'
|
98
|
+
},
|
99
|
+
selectIconLabel: (0, _objectSpread2.default)({
|
100
|
+
whiteSpace: 'nowrap',
|
101
|
+
overflow: 'hidden',
|
102
|
+
textOverflow: 'ellipsis',
|
103
|
+
paddingRight: 16
|
104
|
+
}, theme.typography.b1, {
|
105
|
+
display: 'inline-block',
|
106
|
+
width: '100%'
|
107
|
+
}),
|
108
|
+
selectImgLabel: (0, _objectSpread2.default)({
|
109
|
+
whiteSpace: 'nowrap',
|
110
|
+
overflow: 'hidden',
|
111
|
+
textOverflow: 'ellipsis',
|
112
|
+
paddingRight: 16
|
113
|
+
}, theme.typography.b1, {
|
114
|
+
display: 'inline-flex',
|
115
|
+
width: '100%'
|
116
|
+
}),
|
117
|
+
separator: {
|
118
|
+
borderTop: "1px solid ".concat(theme.palette.input.bottomLine)
|
119
|
+
}
|
120
|
+
};
|
121
|
+
};
|
122
|
+
|
123
|
+
exports.styles = styles;
|
76
124
|
|
77
125
|
function filterValue(item, search) {
|
78
|
-
return search === '' || foldAccents(item.label.toString().toLowerCase()).search(foldAccents(search.toLowerCase())) !== -1;
|
126
|
+
return search === '' || (0, _helpers.foldAccents)(item.label.toString().toLowerCase()).search((0, _helpers.foldAccents)(search.toLowerCase())) !== -1;
|
79
127
|
}
|
80
128
|
/**
|
81
129
|
*
|
@@ -94,42 +142,52 @@ function filterValue(item, search) {
|
|
94
142
|
*/
|
95
143
|
|
96
144
|
|
97
|
-
|
98
|
-
|
99
|
-
|
145
|
+
var HiSelect =
|
146
|
+
/*#__PURE__*/
|
147
|
+
function (_React$PureComponent) {
|
148
|
+
(0, _inherits2.default)(HiSelect, _React$PureComponent);
|
100
149
|
|
101
|
-
|
150
|
+
function HiSelect(props) {
|
151
|
+
var _this;
|
152
|
+
|
153
|
+
(0, _classCallCheck2.default)(this, HiSelect);
|
154
|
+
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiSelect).call(this, props));
|
155
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buildSelectProps", function (options) {
|
156
|
+
var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
157
|
+
var search = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
|
158
|
+
var loading = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
102
159
|
// build item list
|
103
|
-
|
160
|
+
var itemList = [].concat((0, _toConsumableArray2.default)(loading ? [{
|
104
161
|
id: '_loading',
|
105
162
|
type: 'loader',
|
106
163
|
disabled: true,
|
107
164
|
centered: true,
|
108
165
|
hideCheckbox: true,
|
109
166
|
label: 'loading'
|
110
|
-
}] : []),
|
111
|
-
|
167
|
+
}] : []), (0, _toConsumableArray2.default)(search !== '' ? (0, _toConsumableArray2.default)(options.filter(function (item) {
|
168
|
+
return _this.props.filterFunc(item, search);
|
169
|
+
})) : [].concat((0, _toConsumableArray2.default)(_this.props.hasAll ? [(0, _objectSpread2.default)({
|
112
170
|
id: '_all',
|
113
|
-
label:
|
114
|
-
},
|
171
|
+
label: _this.props.translations.all
|
172
|
+
}, _this.props.iconAll && {
|
115
173
|
type: 'icon',
|
116
|
-
icon:
|
117
|
-
})] : []),
|
174
|
+
icon: _this.props.iconAll
|
175
|
+
})] : []), (0, _toConsumableArray2.default)(options))));
|
118
176
|
return {
|
119
|
-
itemList,
|
120
|
-
inputValue:
|
177
|
+
itemList: itemList,
|
178
|
+
inputValue: _this.buildInputValue(options, value, loading)
|
121
179
|
};
|
122
|
-
};
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
180
|
+
});
|
181
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "buildInputValue", function (options) {
|
182
|
+
var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
183
|
+
var loading = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
184
|
+
var _this$props = _this.props,
|
185
|
+
classes = _this$props.classes,
|
186
|
+
hasAll = _this$props.hasAll,
|
187
|
+
translations = _this$props.translations,
|
188
|
+
type = _this$props.type; // build input value
|
131
189
|
|
132
|
-
|
190
|
+
var inputValue;
|
133
191
|
|
134
192
|
if (loading && value.length === 1) {
|
135
193
|
inputValue = translations.one_item_selected;
|
@@ -139,28 +197,30 @@ class HiSelect extends React.PureComponent {
|
|
139
197
|
} else if (value.length > 1) {
|
140
198
|
inputValue = translations.n_items_selected.replace('%s', value.length);
|
141
199
|
} else if (value.length === 1) {
|
142
|
-
|
200
|
+
var item = options.find(function (o) {
|
201
|
+
return o.id === value[0];
|
202
|
+
});
|
143
203
|
|
144
204
|
if (item === undefined) {
|
145
205
|
inputValue = translations.one_item_selected;
|
146
206
|
} else if (type === 'icon' || item.type === 'icon') {
|
147
|
-
inputValue =
|
207
|
+
inputValue = _react.default.createElement("span", {
|
148
208
|
className: classes.selectIconLabel
|
149
|
-
},
|
209
|
+
}, _react.default.createElement(_HiIcon.default, {
|
150
210
|
className: classes.labelIcon,
|
151
211
|
color: item.color,
|
152
212
|
icon: item.icon
|
153
213
|
}), item.label);
|
154
214
|
} else if (type === 'image' || item.type === 'image') {
|
155
|
-
inputValue =
|
215
|
+
inputValue = _react.default.createElement("span", {
|
156
216
|
className: classes.selectIconLabel
|
157
|
-
}, item.img &&
|
217
|
+
}, item.img && _react.default.createElement("img", {
|
158
218
|
className: classes.labelImg,
|
159
219
|
src: item.img,
|
160
220
|
alt: item.label,
|
161
|
-
onError: e
|
221
|
+
onError: function onError(e) {
|
162
222
|
if (item.fallbackImage) {
|
163
|
-
e.target.src =
|
223
|
+
e.target.src = "".concat(item.fallbackImage);
|
164
224
|
} else {
|
165
225
|
e.target.style.display = 'none';
|
166
226
|
}
|
@@ -172,90 +232,85 @@ class HiSelect extends React.PureComponent {
|
|
172
232
|
}
|
173
233
|
|
174
234
|
return inputValue;
|
175
|
-
};
|
235
|
+
});
|
236
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusOnFirstItem", function () {
|
237
|
+
if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
|
238
|
+
setTimeout(function () {
|
239
|
+
var item = _this.overlay.getElementsByTagName('li')[0];
|
176
240
|
|
177
|
-
this.focusOnFirstItem = () => {
|
178
|
-
if (this.overlay && this.overlay.getElementsByTagName('li')[0]) {
|
179
|
-
setTimeout(() => {
|
180
|
-
const item = this.overlay.getElementsByTagName('li')[0];
|
181
241
|
item.focus();
|
182
242
|
}, 1);
|
183
243
|
}
|
184
|
-
};
|
185
|
-
|
186
|
-
|
187
|
-
this.searchField = el;
|
244
|
+
});
|
245
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getInputElement", function (el) {
|
246
|
+
_this.searchField = el;
|
188
247
|
|
189
|
-
if (
|
190
|
-
|
248
|
+
if (_this.props.inputRef) {
|
249
|
+
_this.props.inputRef(_this.searchField);
|
191
250
|
}
|
192
|
-
};
|
251
|
+
});
|
252
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleBlur", function (event) {
|
253
|
+
_this.handleSearchReset();
|
193
254
|
|
194
|
-
|
195
|
-
this.handleSearchReset();
|
196
|
-
this.setState({
|
255
|
+
_this.setState({
|
197
256
|
focused: false
|
198
257
|
});
|
199
258
|
|
200
|
-
if (
|
201
|
-
|
259
|
+
if (_this.props.onBlur && !_this.inputEl.contains(event.relatedTarget) && !_this.state.open) {
|
260
|
+
_this.props.onBlur(event);
|
202
261
|
}
|
203
|
-
};
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
this.setState({
|
262
|
+
});
|
263
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
|
264
|
+
if (_this.state.open) {
|
265
|
+
_this.handleClose();
|
266
|
+
} else if (_this.props.alert && !_this.state.alertOpen) {
|
267
|
+
_this.setState({
|
210
268
|
open: false,
|
211
269
|
alertOpen: true
|
212
270
|
});
|
213
271
|
} else {
|
214
|
-
|
272
|
+
_this.setState({
|
215
273
|
open: true,
|
216
274
|
alertOpen: false
|
217
275
|
});
|
218
|
-
this.handleSuggestions(this.props.options);
|
219
|
-
if (this.props.onClick) this.props.onClick(); // Gestion du focus
|
220
276
|
|
221
|
-
|
222
|
-
|
277
|
+
_this.handleSuggestions(_this.props.options);
|
278
|
+
|
279
|
+
if (_this.props.onClick) _this.props.onClick(); // Gestion du focus
|
280
|
+
|
281
|
+
setTimeout(function () {
|
282
|
+
if (!_this.props.searchable) {
|
223
283
|
// Sinon focus sur l'élément sélectionné
|
224
|
-
|
284
|
+
_this.focusOnSelectedItem(_this.props.value);
|
225
285
|
}
|
226
286
|
}, 1);
|
227
287
|
}
|
228
|
-
};
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
this.handleExitedAlert = () => {
|
239
|
-
if (this.searchField) {
|
240
|
-
this.searchField.focus();
|
288
|
+
});
|
289
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSubmitAlert", function () {
|
290
|
+
_this.handleClick();
|
291
|
+
});
|
292
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCancelAlert", function () {
|
293
|
+
_this.handleClose();
|
294
|
+
});
|
295
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleExitedAlert", function () {
|
296
|
+
if (_this.searchField) {
|
297
|
+
_this.searchField.focus();
|
241
298
|
}
|
242
|
-
};
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
setTimeout(() => {
|
251
|
-
if (this.overlay) {
|
299
|
+
});
|
300
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCloseAlert", function () {
|
301
|
+
_this.handleClose();
|
302
|
+
});
|
303
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusOnSelectedItem", function (selectedValue) {
|
304
|
+
if (_this.overlay && _this.overlay.getElementsByTagName('li')[0]) {
|
305
|
+
setTimeout(function () {
|
306
|
+
if (_this.overlay) {
|
252
307
|
// On initialise au premier élément pour être sûr de ne pas se retrouver avec un focus of undefined
|
253
|
-
|
308
|
+
var item = _this.overlay.getElementsByTagName('li')[0];
|
254
309
|
|
255
310
|
if (selectedValue && typeof selectedValue === 'string') {
|
256
|
-
item =
|
311
|
+
item = _this.overlay.getElementsByTagName('li')[selectedValue];
|
257
312
|
} else if (selectedValue && typeof selectedValue === 'number') {
|
258
|
-
item =
|
313
|
+
item = _this.overlay.getElementsByTagName('li')[selectedValue - 1];
|
259
314
|
}
|
260
315
|
|
261
316
|
if (item) {
|
@@ -264,105 +319,102 @@ class HiSelect extends React.PureComponent {
|
|
264
319
|
}
|
265
320
|
}, 1);
|
266
321
|
}
|
267
|
-
};
|
268
|
-
|
269
|
-
this.handleClickAway = event => {
|
322
|
+
});
|
323
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClickAway", function (event) {
|
270
324
|
// Au clic sur le bouton, on laisse le handleClick fermer le select
|
271
|
-
if (!
|
272
|
-
|
325
|
+
if (!_this.inputEl.contains(event.target)) {
|
326
|
+
_this.handleClose(event);
|
273
327
|
}
|
274
|
-
};
|
328
|
+
});
|
329
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClose", function () {
|
330
|
+
_this.handleSearchReset();
|
275
331
|
|
276
|
-
|
277
|
-
this.handleSearchReset();
|
278
|
-
this.setState({
|
332
|
+
_this.setState({
|
279
333
|
open: false,
|
280
334
|
alertOpen: false
|
281
335
|
});
|
282
336
|
|
283
|
-
if (
|
284
|
-
|
337
|
+
if (_this.props.onClose) {
|
338
|
+
_this.props.onClose();
|
285
339
|
}
|
286
340
|
|
287
|
-
if (
|
288
|
-
|
341
|
+
if (_this.inputEl) {
|
342
|
+
_this.inputEl.focus();
|
289
343
|
}
|
290
|
-
};
|
291
|
-
|
292
|
-
|
293
|
-
this.setState({
|
344
|
+
});
|
345
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleFocus", function () {
|
346
|
+
_this.setState({
|
294
347
|
focused: true
|
295
348
|
});
|
296
|
-
};
|
297
|
-
|
298
|
-
|
299
|
-
const key = keycode(event);
|
349
|
+
});
|
350
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDownCapture", function (event) {
|
351
|
+
var key = (0, _keycode.default)(event);
|
300
352
|
|
301
353
|
if (key === 'enter') {
|
302
|
-
if (
|
303
|
-
if (
|
354
|
+
if (_this.state.open) {
|
355
|
+
if (_this.props.multiple) {
|
304
356
|
event.stopPropagation();
|
305
|
-
|
357
|
+
|
358
|
+
_this.handleClose();
|
306
359
|
}
|
307
360
|
}
|
308
361
|
}
|
309
|
-
};
|
310
|
-
|
311
|
-
|
312
|
-
const key = keycode(event);
|
362
|
+
});
|
363
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
|
364
|
+
var key = (0, _keycode.default)(event);
|
313
365
|
|
314
|
-
if (!
|
366
|
+
if (!_this.state.alertOpen) {
|
315
367
|
if (key === 'esc') {
|
316
368
|
event.preventDefault();
|
317
|
-
|
369
|
+
|
370
|
+
_this.handleClose();
|
318
371
|
} else if (key === 'enter') {
|
319
|
-
if (
|
320
|
-
if (
|
321
|
-
|
372
|
+
if (_this.state.open) {
|
373
|
+
if (_this.props.multiple) {
|
374
|
+
_this.handleClose();
|
322
375
|
}
|
323
376
|
}
|
324
|
-
} else if (key === 'space' && event.target !==
|
377
|
+
} else if (key === 'space' && event.target !== _this.searchField) {
|
325
378
|
event.preventDefault();
|
326
|
-
|
379
|
+
|
380
|
+
_this.handleClick();
|
327
381
|
} else if (key === 'tab') {
|
328
|
-
|
382
|
+
_this.handleClose();
|
329
383
|
}
|
330
384
|
}
|
331
|
-
};
|
332
|
-
|
333
|
-
|
334
|
-
const key = keycode(event);
|
385
|
+
});
|
386
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDownSearch", function (event) {
|
387
|
+
var key = (0, _keycode.default)(event);
|
335
388
|
|
336
|
-
if (
|
337
|
-
|
338
|
-
} else if (
|
389
|
+
if (_this.overlay && (key === 'down' || key === 'up')) {
|
390
|
+
_this.focusOnFirstItem();
|
391
|
+
} else if (_this.overlay && (key === 'esc' || key === 'enter')) {
|
339
392
|
event.preventDefault();
|
340
|
-
|
393
|
+
|
394
|
+
_this.handleClose();
|
341
395
|
} else if (key === 'tab') {
|
342
|
-
|
396
|
+
_this.setState({
|
343
397
|
open: false
|
344
398
|
});
|
345
399
|
}
|
346
|
-
};
|
347
|
-
|
348
|
-
this.handleScroll = e => {
|
400
|
+
});
|
401
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleScroll", function (e) {
|
349
402
|
if (e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop < 15) {
|
350
|
-
|
403
|
+
_this.props.onScrollReachBottom();
|
351
404
|
}
|
352
|
-
};
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
value
|
361
|
-
} = this.props;
|
405
|
+
});
|
406
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelect", function (event, item) {
|
407
|
+
var _this$props2 = _this.props,
|
408
|
+
hasAll = _this$props2.hasAll,
|
409
|
+
multiple = _this$props2.multiple,
|
410
|
+
onChange = _this$props2.onChange,
|
411
|
+
options = _this$props2.options,
|
412
|
+
value = _this$props2.value;
|
362
413
|
|
363
414
|
if (!multiple) {
|
364
415
|
// single value
|
365
|
-
|
416
|
+
_this.handleClose();
|
417
|
+
|
366
418
|
onChange(event, item.id, item);
|
367
419
|
} else if (hasAll && item.id === '_all') {
|
368
420
|
if (value.length === options.length) {
|
@@ -370,87 +422,88 @@ class HiSelect extends React.PureComponent {
|
|
370
422
|
onChange(event, [], item);
|
371
423
|
} else {
|
372
424
|
// select _all options
|
373
|
-
onChange(event, options.map(
|
425
|
+
onChange(event, options.map(function (option) {
|
426
|
+
return option.id;
|
427
|
+
}), item);
|
374
428
|
}
|
375
|
-
} else if (isMobile && multiple) {
|
429
|
+
} else if (_reactDeviceDetect.isMobile && multiple) {
|
376
430
|
// Array of selected values
|
377
|
-
onChange(event, item.map(
|
431
|
+
onChange(event, item.map(function (option) {
|
432
|
+
return option.id;
|
433
|
+
}), item);
|
378
434
|
} else if (value.includes(item.id)) {
|
379
435
|
// unselect item
|
380
|
-
onChange(event, value.filter(
|
436
|
+
onChange(event, value.filter(function (id) {
|
437
|
+
return id !== item.id;
|
438
|
+
}), item);
|
381
439
|
} else {
|
382
|
-
onChange(event, [
|
440
|
+
onChange(event, [].concat((0, _toConsumableArray2.default)(value), [item.id]), item);
|
383
441
|
}
|
384
|
-
};
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
translations
|
391
|
-
} = this.props;
|
442
|
+
});
|
443
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSuggestions", function (suggestions) {
|
444
|
+
var _this$props3 = _this.props,
|
445
|
+
hasAll = _this$props3.hasAll,
|
446
|
+
iconAll = _this$props3.iconAll,
|
447
|
+
translations = _this$props3.translations;
|
392
448
|
|
393
449
|
if (suggestions.length === 0) {
|
394
450
|
// Add '_no_result' suggestion
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
451
|
+
_this.setState(function (prevState) {
|
452
|
+
return (0, _objectSpread2.default)({}, prevState, {
|
453
|
+
suggestions: [{
|
454
|
+
id: '_no_result',
|
455
|
+
type: 'text',
|
456
|
+
disabled: true,
|
457
|
+
centered: true,
|
458
|
+
hideCheckbox: true,
|
459
|
+
label: translations.no_result_match
|
460
|
+
}]
|
461
|
+
});
|
462
|
+
});
|
405
463
|
} else {
|
406
|
-
|
407
|
-
suggestions: [
|
408
|
-
...(hasAll ? [_objectSpread({
|
464
|
+
_this.setState({
|
465
|
+
suggestions: [].concat((0, _toConsumableArray2.default)(hasAll ? [(0, _objectSpread2.default)({
|
409
466
|
id: '_all',
|
410
467
|
label: translations.all
|
411
468
|
}, iconAll && {
|
412
469
|
type: 'icon',
|
413
470
|
icon: iconAll
|
414
|
-
})] : []),
|
471
|
+
})] : []), (0, _toConsumableArray2.default)(suggestions))
|
415
472
|
});
|
416
473
|
}
|
417
|
-
};
|
418
|
-
|
419
|
-
|
420
|
-
const searchValue = inputValue && e.target.value ? inputValue : e.target.value;
|
474
|
+
});
|
475
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSearch", function (e, inputValue) {
|
476
|
+
var searchValue = inputValue && e.target.value ? inputValue : e.target.value;
|
421
477
|
|
422
|
-
if (
|
423
|
-
|
478
|
+
if (_this.props.onSearch) {
|
479
|
+
_this.props.onSearch(e, searchValue);
|
424
480
|
} else {
|
425
|
-
|
426
|
-
searchValue
|
481
|
+
_this.setState({
|
482
|
+
searchValue: searchValue
|
427
483
|
});
|
428
484
|
}
|
429
|
-
};
|
430
|
-
|
431
|
-
|
432
|
-
this.handleSearch({
|
485
|
+
});
|
486
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSearchReset", function () {
|
487
|
+
_this.handleSearch({
|
433
488
|
target: {
|
434
489
|
value: ''
|
435
490
|
}
|
436
491
|
}, '');
|
437
|
-
};
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
itemList.forEach(parent => {
|
492
|
+
});
|
493
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLengthItemList", function (itemList) {
|
494
|
+
var itemListLength = 0;
|
495
|
+
itemList.forEach(function (parent) {
|
442
496
|
if (parent.displayed !== false) {
|
443
497
|
itemListLength += 1;
|
444
498
|
|
445
499
|
if (parent.children) {
|
446
|
-
itemListLength +=
|
500
|
+
itemListLength += _this.getLengthItemList(parent.children);
|
447
501
|
}
|
448
502
|
}
|
449
503
|
});
|
450
504
|
return itemListLength;
|
451
|
-
};
|
452
|
-
|
453
|
-
this.state = {
|
505
|
+
});
|
506
|
+
_this.state = {
|
454
507
|
alertOpen: false,
|
455
508
|
open: false,
|
456
509
|
focused: false,
|
@@ -459,263 +512,267 @@ class HiSelect extends React.PureComponent {
|
|
459
512
|
openDown: true,
|
460
513
|
overlayWidth: 0
|
461
514
|
};
|
515
|
+
return _this;
|
462
516
|
}
|
463
517
|
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
this.setState({
|
471
|
-
overlayWidth: findDOMNode(this.overlay).clientWidth
|
472
|
-
});
|
473
|
-
}
|
474
|
-
}
|
475
|
-
|
476
|
-
static getDerivedStateFromProps(nextProps, prevState) {
|
477
|
-
if (nextProps.options !== prevState.suggestions) {
|
478
|
-
return _objectSpread({}, prevState, {
|
479
|
-
suggestions: nextProps.options
|
480
|
-
});
|
481
|
-
}
|
518
|
+
(0, _createClass2.default)(HiSelect, [{
|
519
|
+
key: "componentDidMount",
|
520
|
+
value: function componentDidMount() {
|
521
|
+
if (this.props.autoFocus) {
|
522
|
+
this.inputEl.focus();
|
523
|
+
}
|
482
524
|
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
* @param options
|
488
|
-
* @param value
|
489
|
-
* @param search
|
490
|
-
* @param loading
|
491
|
-
* @returns {{itemList: *[], inputValue: *}}
|
492
|
-
*/
|
493
|
-
|
494
|
-
|
495
|
-
render() {
|
496
|
-
const {
|
497
|
-
alert,
|
498
|
-
classes,
|
499
|
-
disabled,
|
500
|
-
error,
|
501
|
-
loading,
|
502
|
-
options,
|
503
|
-
searchable,
|
504
|
-
displayAsChip,
|
505
|
-
type,
|
506
|
-
value,
|
507
|
-
multiple,
|
508
|
-
translations,
|
509
|
-
hiSearchInputProps,
|
510
|
-
hiSelectableListProps,
|
511
|
-
hiSelectInputProps,
|
512
|
-
id,
|
513
|
-
onScrollReachBottom,
|
514
|
-
onSubmit,
|
515
|
-
placeholder,
|
516
|
-
searchValue = this.state.searchValue,
|
517
|
-
startAdornment,
|
518
|
-
staticPosition,
|
519
|
-
maxOptionsDisplayed,
|
520
|
-
buildSelectProps = this.buildSelectProps // use parent builder if defined
|
521
|
-
|
522
|
-
} = this.props;
|
523
|
-
const {
|
524
|
-
alertOpen,
|
525
|
-
open,
|
526
|
-
focused
|
527
|
-
} = this.state;
|
528
|
-
|
529
|
-
if (multiple) {
|
530
|
-
if (!Array.isArray(value)) {
|
531
|
-
throw new Error('HiPay Material-UI: the `value` property must be an array ' + 'when using the `HiSelect` component with `multiple`.');
|
525
|
+
if (this.overlay) {
|
526
|
+
this.setState({
|
527
|
+
overlayWidth: (0, _reactDom.findDOMNode)(this.overlay).clientWidth
|
528
|
+
});
|
532
529
|
}
|
533
530
|
}
|
531
|
+
}, {
|
532
|
+
key: "render",
|
533
|
+
value: function render() {
|
534
|
+
var _classNames,
|
535
|
+
_this2 = this;
|
536
|
+
|
537
|
+
var _this$props4 = this.props,
|
538
|
+
alert = _this$props4.alert,
|
539
|
+
classes = _this$props4.classes,
|
540
|
+
disabled = _this$props4.disabled,
|
541
|
+
error = _this$props4.error,
|
542
|
+
loading = _this$props4.loading,
|
543
|
+
options = _this$props4.options,
|
544
|
+
searchable = _this$props4.searchable,
|
545
|
+
displayAsChip = _this$props4.displayAsChip,
|
546
|
+
type = _this$props4.type,
|
547
|
+
value = _this$props4.value,
|
548
|
+
multiple = _this$props4.multiple,
|
549
|
+
translations = _this$props4.translations,
|
550
|
+
hiSearchInputProps = _this$props4.hiSearchInputProps,
|
551
|
+
hiSelectableListProps = _this$props4.hiSelectableListProps,
|
552
|
+
hiSelectInputProps = _this$props4.hiSelectInputProps,
|
553
|
+
id = _this$props4.id,
|
554
|
+
onScrollReachBottom = _this$props4.onScrollReachBottom,
|
555
|
+
onSubmit = _this$props4.onSubmit,
|
556
|
+
placeholder = _this$props4.placeholder,
|
557
|
+
_this$props4$searchVa = _this$props4.searchValue,
|
558
|
+
searchValue = _this$props4$searchVa === void 0 ? this.state.searchValue : _this$props4$searchVa,
|
559
|
+
startAdornment = _this$props4.startAdornment,
|
560
|
+
staticPosition = _this$props4.staticPosition,
|
561
|
+
maxOptionsDisplayed = _this$props4.maxOptionsDisplayed,
|
562
|
+
_this$props4$buildSel = _this$props4.buildSelectProps,
|
563
|
+
buildSelectProps = _this$props4$buildSel === void 0 ? this.buildSelectProps : _this$props4$buildSel;
|
564
|
+
var _this$state = this.state,
|
565
|
+
alertOpen = _this$state.alertOpen,
|
566
|
+
open = _this$state.open,
|
567
|
+
focused = _this$state.focused;
|
568
|
+
|
569
|
+
if (multiple) {
|
570
|
+
if (!Array.isArray(value)) {
|
571
|
+
throw new Error('HiPay Material-UI: the `value` property must be an array ' + 'when using the `HiSelect` component with `multiple`.');
|
572
|
+
}
|
573
|
+
}
|
534
574
|
|
535
|
-
|
575
|
+
var selectedItemIdList = [];
|
536
576
|
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
const {
|
542
|
-
itemList,
|
543
|
-
inputValue = this.buildInputValue(options, selectedItemIdList, loading)
|
544
|
-
} = buildSelectProps(options, selectedItemIdList, searchValue, loading);
|
545
|
-
let popperStyle = {};
|
577
|
+
if (value) {
|
578
|
+
selectedItemIdList = multiple ? (0, _toConsumableArray2.default)(value) : [value];
|
579
|
+
}
|
546
580
|
|
547
|
-
|
548
|
-
|
549
|
-
|
550
|
-
|
581
|
+
var _buildSelectProps = buildSelectProps(options, selectedItemIdList, searchValue, loading),
|
582
|
+
itemList = _buildSelectProps.itemList,
|
583
|
+
_buildSelectProps$inp = _buildSelectProps.inputValue,
|
584
|
+
inputValue = _buildSelectProps$inp === void 0 ? this.buildInputValue(options, selectedItemIdList, loading) : _buildSelectProps$inp;
|
551
585
|
|
552
|
-
|
553
|
-
popperStyle.position = 'absolute';
|
554
|
-
}
|
555
|
-
}
|
586
|
+
var popperStyle = {};
|
556
587
|
|
557
|
-
|
558
|
-
|
559
|
-
|
560
|
-
|
588
|
+
if (this.props.containerWidth > 0) {
|
589
|
+
popperStyle = {
|
590
|
+
width: this.props.containerWidth
|
591
|
+
};
|
561
592
|
|
562
|
-
|
563
|
-
|
564
|
-
|
565
|
-
value: searchValue,
|
566
|
-
autoFocus: true,
|
567
|
-
inputRef: this.getInputElement,
|
568
|
-
onKeyDown: this.handleKeyDownSearch,
|
569
|
-
onChange: this.handleSearch,
|
570
|
-
onReset: this.handleSearchReset,
|
571
|
-
placeholder: translations.search,
|
572
|
-
startAdornment: 'search',
|
573
|
-
tabIndex: 0,
|
574
|
-
className: classNames({
|
575
|
-
[classes.separator]: position === 'top'
|
576
|
-
})
|
577
|
-
}, hiSearchInputProps));
|
593
|
+
if (!staticPosition) {
|
594
|
+
popperStyle.position = 'absolute';
|
595
|
+
}
|
578
596
|
}
|
579
597
|
|
580
|
-
|
581
|
-
|
598
|
+
var popperClass = (0, _classnames.default)(classes.popper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.popperWidth, !this.props.containerWidth), (0, _defineProperty2.default)(_classNames, classes.popperRightAlign, this.props.containerWidth && this.props.align === 'right'), _classNames));
|
599
|
+
|
600
|
+
var searchInput = function searchInput(position) {
|
601
|
+
if (searchable) {
|
602
|
+
return _react.default.createElement(_HiInput.default, (0, _extends2.default)({
|
603
|
+
value: searchValue,
|
604
|
+
autoFocus: true,
|
605
|
+
inputRef: _this2.getInputElement,
|
606
|
+
onKeyDown: _this2.handleKeyDownSearch,
|
607
|
+
onChange: _this2.handleSearch,
|
608
|
+
onReset: _this2.handleSearchReset,
|
609
|
+
placeholder: translations.search,
|
610
|
+
startAdornment: 'search',
|
611
|
+
tabIndex: 0,
|
612
|
+
className: (0, _classnames.default)((0, _defineProperty2.default)({}, classes.separator, position === 'top'))
|
613
|
+
}, hiSearchInputProps));
|
614
|
+
}
|
582
615
|
|
616
|
+
return null;
|
617
|
+
}; // Replace popper onSearch when popper displayed on top of selectButton
|
583
618
|
|
584
|
-
if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
|
585
|
-
// In case we have a nested list
|
586
|
-
const itemListLength = this.getLengthItemList(itemList); // +1 for search input
|
587
619
|
|
588
|
-
|
589
|
-
|
590
|
-
|
591
|
-
popperStyle.transform = 'translate3d(-1px, 40px, 0px)';
|
592
|
-
}
|
620
|
+
if (this.placement && this.placement.indexOf('top') >= 0 && !!searchable) {
|
621
|
+
// In case we have a nested list
|
622
|
+
var itemListLength = this.getLengthItemList(itemList); // +1 for search input
|
593
623
|
|
594
|
-
|
595
|
-
|
596
|
-
|
597
|
-
|
598
|
-
this.placement = placement;
|
624
|
+
var nbItems = itemListLength <= maxOptionsDisplayed - 2 ? itemListLength + 1 : maxOptionsDisplayed - 1;
|
625
|
+
popperStyle.transform = "translate3d(-1px, -".concat(nbItems * 40 + 2, "px, 0px)");
|
626
|
+
} else if (this.placement && this.placement.indexOf('top') < 0 && !!searchable) {
|
627
|
+
popperStyle.transform = 'translate3d(-1px, 40px, 0px)';
|
599
628
|
}
|
600
629
|
|
601
|
-
|
602
|
-
|
603
|
-
|
604
|
-
|
605
|
-
|
606
|
-
in: open,
|
607
|
-
id: "menu-list",
|
608
|
-
style: {
|
609
|
-
transformOrigin: '0 0 0'
|
630
|
+
var content = function content(_ref) {
|
631
|
+
var placement = _ref.placement;
|
632
|
+
|
633
|
+
if (placement !== _this2.placement) {
|
634
|
+
_this2.placement = placement;
|
610
635
|
}
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
636
|
+
|
637
|
+
var nbItemsDisplayed = !!searchable ? maxOptionsDisplayed - 1 : maxOptionsDisplayed;
|
638
|
+
var autoHeightMax = nbItemsDisplayed * 40 - 10;
|
639
|
+
return _react.default.createElement(_ClickAwayListener.default, {
|
640
|
+
onClickAway: _this2.handleClickAway
|
641
|
+
}, _react.default.createElement(_Grow.default, {
|
642
|
+
in: open,
|
643
|
+
id: "menu-list",
|
644
|
+
style: {
|
645
|
+
transformOrigin: '0 0 0'
|
646
|
+
}
|
647
|
+
}, _react.default.createElement(_Paper.default, {
|
648
|
+
style: maxOptionsDisplayed < 12 ? {
|
649
|
+
maxHeight: 40 * maxOptionsDisplayed
|
650
|
+
} : {},
|
651
|
+
className: classes.paper
|
652
|
+
}, (_this2.placement && _this2.placement.indexOf('bottom') >= 0 || staticPosition) && searchInput('bottom'), startAdornment, _react.default.createElement(_reactCustomScrollbars.default, (0, _extends2.default)({
|
653
|
+
ref: function ref(contentEl) {
|
654
|
+
_this2.optionsContent = contentEl;
|
655
|
+
},
|
656
|
+
autoHeight: true,
|
657
|
+
autoHeightMax: autoHeightMax
|
658
|
+
}, onScrollReachBottom && {
|
659
|
+
onScroll: _this2.handleScroll
|
660
|
+
}), _react.default.createElement(_HiSelectableList.default, (0, _extends2.default)({
|
661
|
+
type: type,
|
662
|
+
itemList: itemList,
|
663
|
+
onSelect: _this2.handleSelect,
|
664
|
+
selectedItemIdList: selectedItemIdList,
|
665
|
+
fallbackImage: _this2.props.fallbackImage,
|
666
|
+
overlay: _this2.overlay,
|
667
|
+
value: value
|
668
|
+
}, hiSelectableListProps))), _this2.placement && _this2.placement.indexOf('top') >= 0 && !staticPosition && searchInput('top'))));
|
669
|
+
};
|
670
|
+
|
671
|
+
return !_reactDeviceDetect.isMobile ? _react.default.createElement("div", {
|
672
|
+
className: classes.root,
|
673
|
+
ref: function ref(el) {
|
674
|
+
_this2.overlay = el;
|
619
675
|
},
|
620
|
-
|
621
|
-
|
622
|
-
},
|
623
|
-
|
624
|
-
|
676
|
+
onKeyDown: this.handleKeyDown,
|
677
|
+
onKeyDownCapture: this.handleKeyDownCapture
|
678
|
+
}, alert && _react.default.createElement(_HiAlertModal.default, {
|
679
|
+
open: alertOpen,
|
680
|
+
title: alert.title,
|
681
|
+
content: alert.content,
|
682
|
+
onSubmitClick: this.handleSubmitAlert,
|
683
|
+
onCancelClick: this.handleCancelAlert,
|
684
|
+
onClose: this.handleCloseAlert,
|
685
|
+
onExited: this.handleExitedAlert,
|
686
|
+
labelSubmitButton: alert.submitButton,
|
687
|
+
labelCancelButton: alert.cancelButton
|
688
|
+
}), _react.default.createElement(_HiSelectInput.default, (0, _extends2.default)({
|
689
|
+
id: id,
|
690
|
+
value: inputValue,
|
691
|
+
open: open,
|
692
|
+
focused: focused,
|
693
|
+
type: type,
|
694
|
+
disabled: disabled,
|
695
|
+
noButton: displayAsChip,
|
696
|
+
error: error,
|
697
|
+
onClick: this.handleClick,
|
698
|
+
onFocus: this.handleFocus,
|
699
|
+
onBlur: this.handleBlur,
|
700
|
+
onSubmit: onSubmit,
|
701
|
+
onMouseEnter: this.props.onMouseEnter,
|
702
|
+
onMouseLeave: this.props.onMouseLeave,
|
703
|
+
onReset: this.props.onReset,
|
704
|
+
placeholder: placeholder
|
705
|
+
}, hiSelectInputProps, {
|
706
|
+
refElement: function refElement(el) {
|
707
|
+
_this2.inputEl = el;
|
708
|
+
}
|
709
|
+
})), open && staticPosition ? _react.default.createElement("div", {
|
710
|
+
style: popperStyle,
|
711
|
+
className: popperClass
|
712
|
+
}, content({})) : _react.default.createElement(_Popper.default, {
|
713
|
+
anchorEl: this.inputEl,
|
714
|
+
placement: "bottom-start",
|
715
|
+
open: open,
|
716
|
+
className: popperClass,
|
717
|
+
disablePortal: true,
|
718
|
+
style: popperStyle
|
719
|
+
}, content)) : _react.default.createElement("div", {
|
720
|
+
ref: function ref(el) {
|
721
|
+
_this2.overlay = el;
|
722
|
+
}
|
723
|
+
}, _react.default.createElement(_HiSelectInput.default, (0, _extends2.default)({
|
724
|
+
id: id,
|
725
|
+
value: inputValue,
|
726
|
+
open: open,
|
727
|
+
focused: focused,
|
625
728
|
type: type,
|
729
|
+
disabled: disabled,
|
730
|
+
noButton: displayAsChip,
|
731
|
+
error: error,
|
732
|
+
onFocus: this.handleFocus,
|
733
|
+
onBlur: this.handleBlur,
|
734
|
+
onMouseEnter: this.props.onMouseEnter,
|
735
|
+
onMouseLeave: this.props.onMouseLeave,
|
736
|
+
onReset: this.props.onReset,
|
737
|
+
placeholder: placeholder
|
738
|
+
}, hiSelectInputProps, {
|
739
|
+
refElement: function refElement(el) {
|
740
|
+
_this2.inputEl = el;
|
741
|
+
}
|
742
|
+
})), _react.default.createElement(_HiSelectMobile.default, {
|
743
|
+
onChange: this.handleSelect,
|
744
|
+
multiple: multiple,
|
745
|
+
id: id,
|
626
746
|
itemList: itemList,
|
627
|
-
|
628
|
-
|
629
|
-
|
630
|
-
|
631
|
-
|
632
|
-
|
633
|
-
|
634
|
-
|
635
|
-
|
636
|
-
|
637
|
-
|
638
|
-
this.overlay = el;
|
639
|
-
},
|
640
|
-
onKeyDown: this.handleKeyDown,
|
641
|
-
onKeyDownCapture: this.handleKeyDownCapture
|
642
|
-
}, alert && React.createElement(HiAlertModal, {
|
643
|
-
open: alertOpen,
|
644
|
-
title: alert.title,
|
645
|
-
content: alert.content,
|
646
|
-
onSubmitClick: this.handleSubmitAlert,
|
647
|
-
onCancelClick: this.handleCancelAlert,
|
648
|
-
onClose: this.handleCloseAlert,
|
649
|
-
onExited: this.handleExitedAlert,
|
650
|
-
labelSubmitButton: alert.submitButton,
|
651
|
-
labelCancelButton: alert.cancelButton
|
652
|
-
}), React.createElement(HiSelectInput, _extends({
|
653
|
-
id: id,
|
654
|
-
value: inputValue,
|
655
|
-
open: open,
|
656
|
-
focused: focused,
|
657
|
-
type: type,
|
658
|
-
disabled: disabled,
|
659
|
-
noButton: displayAsChip,
|
660
|
-
error: error,
|
661
|
-
onClick: this.handleClick,
|
662
|
-
onFocus: this.handleFocus,
|
663
|
-
onBlur: this.handleBlur,
|
664
|
-
onSubmit: onSubmit,
|
665
|
-
onMouseEnter: this.props.onMouseEnter,
|
666
|
-
onMouseLeave: this.props.onMouseLeave,
|
667
|
-
onReset: this.props.onReset,
|
668
|
-
placeholder: placeholder
|
669
|
-
}, hiSelectInputProps, {
|
670
|
-
refElement: el => {
|
671
|
-
this.inputEl = el;
|
672
|
-
}
|
673
|
-
})), open && staticPosition ? React.createElement("div", {
|
674
|
-
style: popperStyle,
|
675
|
-
className: popperClass
|
676
|
-
}, content({})) : React.createElement(Popper, {
|
677
|
-
anchorEl: this.inputEl,
|
678
|
-
placement: "bottom-start",
|
679
|
-
open: open,
|
680
|
-
className: popperClass,
|
681
|
-
disablePortal: true,
|
682
|
-
style: popperStyle
|
683
|
-
}, content)) : React.createElement("div", {
|
684
|
-
ref: el => {
|
685
|
-
this.overlay = el;
|
686
|
-
}
|
687
|
-
}, React.createElement(HiSelectInput, _extends({
|
688
|
-
id: id,
|
689
|
-
value: inputValue,
|
690
|
-
open: open,
|
691
|
-
focused: focused,
|
692
|
-
type: type,
|
693
|
-
disabled: disabled,
|
694
|
-
noButton: displayAsChip,
|
695
|
-
error: error,
|
696
|
-
onFocus: this.handleFocus,
|
697
|
-
onBlur: this.handleBlur,
|
698
|
-
onMouseEnter: this.props.onMouseEnter,
|
699
|
-
onMouseLeave: this.props.onMouseLeave,
|
700
|
-
onReset: this.props.onReset,
|
701
|
-
placeholder: placeholder
|
702
|
-
}, hiSelectInputProps, {
|
703
|
-
refElement: el => {
|
704
|
-
this.inputEl = el;
|
747
|
+
value: value,
|
748
|
+
width: this.state.overlayWidth
|
749
|
+
}));
|
750
|
+
}
|
751
|
+
}], [{
|
752
|
+
key: "getDerivedStateFromProps",
|
753
|
+
value: function getDerivedStateFromProps(nextProps, prevState) {
|
754
|
+
if (nextProps.options !== prevState.suggestions) {
|
755
|
+
return (0, _objectSpread2.default)({}, prevState, {
|
756
|
+
suggestions: nextProps.options
|
757
|
+
});
|
705
758
|
}
|
706
|
-
})), React.createElement(HiSelectMobile, {
|
707
|
-
onChange: this.handleSelect,
|
708
|
-
multiple: multiple,
|
709
|
-
id: id,
|
710
|
-
itemList: itemList,
|
711
|
-
value: value,
|
712
|
-
width: this.state.overlayWidth
|
713
|
-
}));
|
714
|
-
}
|
715
759
|
|
716
|
-
|
717
|
-
|
718
|
-
|
760
|
+
return null;
|
761
|
+
}
|
762
|
+
/**
|
763
|
+
* Build itemList & inputValue from select props
|
764
|
+
* @param options
|
765
|
+
* @param value
|
766
|
+
* @param search
|
767
|
+
* @param loading
|
768
|
+
* @returns {{itemList: *[], inputValue: *}}
|
769
|
+
*/
|
770
|
+
|
771
|
+
}]);
|
772
|
+
return HiSelect;
|
773
|
+
}(_react.default.PureComponent);
|
774
|
+
|
775
|
+
(0, _defineProperty2.default)(HiSelect, "defaultProps", {
|
719
776
|
align: 'left',
|
720
777
|
autoFocus: false,
|
721
778
|
disabled: false,
|
@@ -741,188 +798,11 @@ HiSelect.defaultProps = {
|
|
741
798
|
type: 'text',
|
742
799
|
filterFunc: filterValue,
|
743
800
|
maxOptionsDisplayed: 12
|
744
|
-
};
|
745
|
-
|
746
|
-
|
747
|
-
* Affiche une alerte à l'ouverture de la liste
|
748
|
-
*/
|
749
|
-
alert: PropTypes.object,
|
750
|
-
align: PropTypes.oneOf(['left', 'right']),
|
751
|
-
|
752
|
-
/**
|
753
|
-
* Permet de forcer le focus sur le composant
|
754
|
-
*/
|
755
|
-
autoFocus: PropTypes.bool,
|
756
|
-
|
757
|
-
/**
|
758
|
-
* Useful to extend the style applied to components.
|
759
|
-
*/
|
760
|
-
classes: PropTypes.object,
|
761
|
-
|
762
|
-
/**
|
763
|
-
* Popper width
|
764
|
-
*/
|
765
|
-
containerWidth: PropTypes.number,
|
766
|
-
|
767
|
-
/**
|
768
|
-
* Inactif
|
769
|
-
*/
|
770
|
-
disabled: PropTypes.bool,
|
771
|
-
|
772
|
-
/**
|
773
|
-
* Option permettant d'afficher les sélection sous forme de Chip.
|
774
|
-
*/
|
775
|
-
displayAsChip: PropTypes.bool,
|
776
|
-
|
777
|
-
/**
|
778
|
-
* Applique le style error
|
779
|
-
*/
|
780
|
-
error: PropTypes.bool,
|
781
|
-
|
782
|
-
/**
|
783
|
-
* Chemin vers l'image à afficher par défaut si une image n'est pas trouvée
|
784
|
-
*/
|
785
|
-
fallbackImage: PropTypes.string,
|
786
|
-
|
787
|
-
/*
|
788
|
-
* Fonction de filtrage custom
|
789
|
-
*/
|
790
|
-
filterFunc: PropTypes.func,
|
791
|
-
|
792
|
-
/**
|
793
|
-
* Affiche l'élément 'All'
|
794
|
-
*/
|
795
|
-
hasAll: PropTypes.bool,
|
796
|
-
|
797
|
-
/**
|
798
|
-
* Override HiInput props (for search)
|
799
|
-
*/
|
800
|
-
hiSearchInputProps: PropTypes.object,
|
801
|
-
|
802
|
-
/**
|
803
|
-
* Override HiSelectableList props
|
804
|
-
*/
|
805
|
-
hiSelectableListProps: PropTypes.object,
|
806
|
-
|
807
|
-
/**
|
808
|
-
* Override HiSelectInput props
|
809
|
-
*/
|
810
|
-
hiSelectInputProps: PropTypes.object,
|
811
|
-
|
812
|
-
/**
|
813
|
-
* Nom de l'icône
|
814
|
-
*/
|
815
|
-
iconAll: PropTypes.string,
|
816
|
-
|
817
|
-
/**
|
818
|
-
* id du select
|
819
|
-
*/
|
820
|
-
id: PropTypes.string,
|
821
|
-
|
822
|
-
/**
|
823
|
-
* Ajoute un loader
|
824
|
-
*/
|
825
|
-
loading: PropTypes.bool,
|
826
|
-
|
827
|
-
/**
|
828
|
-
* Nombre max d'items affichés
|
829
|
-
*/
|
830
|
-
maxOptionsDisplayed: PropTypes.number,
|
831
|
-
|
832
|
-
/**
|
833
|
-
* Autorise la sélection de plusieurs valeurs
|
834
|
-
*/
|
835
|
-
multiple: PropTypes.bool,
|
836
|
-
|
837
|
-
/**
|
838
|
-
* Nom du champ de formulaire
|
839
|
-
*/
|
840
|
-
name: PropTypes.string.isRequired,
|
841
|
-
|
842
|
-
/**
|
843
|
-
* Fonction de callback appelée lorsqu'on perd le focus
|
844
|
-
*/
|
845
|
-
onBlur: PropTypes.func,
|
846
|
-
|
847
|
-
/**
|
848
|
-
* Fonction de callback qui renvoit la/les valeurs sélectionnées
|
849
|
-
*
|
850
|
-
* @param {object} event
|
851
|
-
* @param {string || array} value
|
852
|
-
*/
|
853
|
-
onChange: PropTypes.func.isRequired,
|
854
|
-
|
855
|
-
/**
|
856
|
-
* Fonction de callback appelée lorsqu'on ferme le select
|
857
|
-
*/
|
858
|
-
onClose: PropTypes.func,
|
859
|
-
|
860
|
-
/**
|
861
|
-
* Fonction de callback appelée lorsqu'on survole le champs
|
862
|
-
*/
|
863
|
-
onMouseEnter: PropTypes.func,
|
864
|
-
|
865
|
-
/**
|
866
|
-
* Fonction de callback appelée lorsque le curseur quitte le champs
|
867
|
-
*/
|
868
|
-
onMouseLeave: PropTypes.func,
|
869
|
-
|
870
|
-
/**
|
871
|
-
* Fonction de callback appelée lorsqu'on vide le champs
|
872
|
-
*/
|
873
|
-
onReset: PropTypes.func,
|
874
|
-
|
875
|
-
/**
|
876
|
-
* Fonction de callback appelée lorsque le scroll atteint le bas de la liste
|
877
|
-
*/
|
878
|
-
onScrollReachBottom: PropTypes.func,
|
879
|
-
|
880
|
-
/**
|
881
|
-
* Fonction de callback appelée lorsque le champs de recherche est utilisé
|
882
|
-
*/
|
883
|
-
onSearch: PropTypes.func,
|
884
|
-
|
885
|
-
/**
|
886
|
-
* Listes des options du select
|
887
|
-
*/
|
888
|
-
options: PropTypes.array.isRequired,
|
889
|
-
|
890
|
-
/**
|
891
|
-
* Placeholder affiché lorsque l'input est vide
|
892
|
-
*/
|
893
|
-
placeholder: PropTypes.string,
|
894
|
-
|
895
|
-
/**
|
896
|
-
* Affiche un input de recherche permettant de filtrer les options
|
897
|
-
*/
|
898
|
-
searchable: PropTypes.bool,
|
899
|
-
|
900
|
-
/**
|
901
|
-
* Node qui s'ajoute entre la barre de recherche et la liste de résultats
|
902
|
-
*/
|
903
|
-
startAdornment: PropTypes.object,
|
904
|
-
|
905
|
-
/**
|
906
|
-
* Si true, le contenu du select sera dans une div static plutôt que dans une popper absolute
|
907
|
-
*/
|
908
|
-
staticPosition: PropTypes.bool,
|
909
|
-
|
910
|
-
/**
|
911
|
-
* Traductions (par défaut en anglais)
|
912
|
-
*/
|
913
|
-
translations: PropTypes.object,
|
914
|
-
|
915
|
-
/**
|
916
|
-
* Type des éléments du select, définit le rendu d'un élément
|
917
|
-
*/
|
918
|
-
type: PropTypes.oneOf(['icon', 'text', 'image', 'primary-highlight']),
|
919
|
-
|
920
|
-
/**
|
921
|
-
* Value(s) du select
|
922
|
-
*/
|
923
|
-
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array])
|
924
|
-
} : {};
|
925
|
-
export default withStyles(styles, {
|
801
|
+
});
|
802
|
+
|
803
|
+
var _default = (0, _styles.withStyles)(styles, {
|
926
804
|
hiComponent: true,
|
927
805
|
name: 'HmuiHiSelect'
|
928
|
-
})(HiSelect);
|
806
|
+
})(HiSelect);
|
807
|
+
|
808
|
+
exports.default = _default;
|