@geneui/components 2.11.1
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/ActionableList.js +1761 -0
- package/AdvancedSearch.js +872 -0
- package/Alert.js +98 -0
- package/Avatar.js +77 -0
- package/Badge.js +76 -0
- package/Breadcrumb.js +128 -0
- package/BusyLoader.js +69 -0
- package/Button.js +130 -0
- package/CHANGELOG.md +424 -0
- package/Card.js +513 -0
- package/CardList.js +705 -0
- package/CellMeasurerCache-c11cec83.js +229 -0
- package/Charts.js +99 -0
- package/Checkbox.js +232 -0
- package/CheckboxGroup.js +206 -0
- package/CheckboxGroupWithSearch.js +279 -0
- package/Collapse.js +196 -0
- package/ColorPicker.js +210 -0
- package/ComboBox.js +99 -0
- package/Counter.js +99 -0
- package/DateFilter.js +179 -0
- package/DatePicker.js +1231 -0
- package/DatePickerInput.js +30 -0
- package/Divider.js +56 -0
- package/Drawer.js +264 -0
- package/Dropdown.js +99 -0
- package/Editor.js +22965 -0
- package/Empty.js +132 -0
- package/ExtendedInput.js +578 -0
- package/Form.js +116 -0
- package/FormContainer.js +189 -0
- package/FormableCheckbox.js +27 -0
- package/FormableDatePicker.js +39 -0
- package/FormableDropdown.js +105 -0
- package/FormableEditor.js +24 -0
- package/FormableHOC-21051057.js +83 -0
- package/FormableMultiSelectDropdown.js +105 -0
- package/FormableNumberInput.js +31 -0
- package/FormableRadio.js +23 -0
- package/FormableSwitcher.js +23 -0
- package/FormableTextInput.js +31 -0
- package/FormableUploader.js +40 -0
- package/GeneUIProvider.js +256 -0
- package/Grid.js +166 -0
- package/Holder.js +99 -0
- package/Icon.js +63 -0
- package/Image.js +130 -0
- package/ImagePreview.js +99 -0
- package/KeyValue.js +63 -0
- package/Label.js +58 -0
- package/LinkButton.js +104 -0
- package/Menu.js +277 -0
- package/MobileNavigation.js +95 -0
- package/MobilePopup.js +180 -0
- package/Modal.js +251 -0
- package/ModuleTitle.js +99 -0
- package/NavigationMenu.js +212 -0
- package/Notification.js +120 -0
- package/Option.js +186 -0
- package/Overlay.js +99 -0
- package/Overspread.js +343 -0
- package/Pagination.js +258 -0
- package/Paper.js +97 -0
- package/Popover-f4d1cac0.js +411 -0
- package/Popover.js +20 -0
- package/PopoverV2.js +19 -0
- package/Portal.js +58 -0
- package/Products.js +115 -0
- package/Profile.js +99 -0
- package/Progress.js +200 -0
- package/QRCode.js +816 -0
- package/README.md +90 -0
- package/Radio.js +152 -0
- package/RadioGroup.js +105 -0
- package/Range.js +14 -0
- package/RichEditor-b7928765.js +228 -0
- package/RichEditor.js +13 -0
- package/Scrollbar.js +1587 -0
- package/Search.js +72 -0
- package/SearchWithDropdown.js +195 -0
- package/Section.js +62 -0
- package/SkeletonLoader.js +82 -0
- package/Slider.js +256 -0
- package/Status.js +104 -0
- package/Steps.js +312 -0
- package/SuggestionList.js +15 -0
- package/Switcher.js +194 -0
- package/Table.js +102 -0
- package/TableCompositions.js +17028 -0
- package/Tabs.js +236 -0
- package/Tag.js +103 -0
- package/TextLink.js +22 -0
- package/Textarea.js +239 -0
- package/Time.js +63 -0
- package/TimePicker.js +99 -0
- package/Timeline.js +114 -0
- package/Title.js +66 -0
- package/Toaster.js +116 -0
- package/Tooltip.js +157 -0
- package/TransferList.js +502 -0
- package/Uploader.js +32 -0
- package/ValidatableCheckbox.js +126 -0
- package/ValidatableDatePicker.js +312 -0
- package/ValidatableDropdown.js +99 -0
- package/ValidatableElements.js +99 -0
- package/ValidatableMultiSelectDropdown.js +99 -0
- package/ValidatableNumberInput.js +194 -0
- package/ValidatableRadio.js +117 -0
- package/ValidatableSwitcher.js +94 -0
- package/ValidatableTextInput.js +164 -0
- package/ValidatableTimeInput.js +171 -0
- package/ValidatableUploader.js +94 -0
- package/Widget.js +99 -0
- package/_commonjsHelpers-24198af3.js +35 -0
- package/_rollupPluginBabelHelpers-e8fb2e5c.js +16 -0
- package/checkTimeValidation-e56771be.js +16 -0
- package/checkboxRadioSwitcher-5b69d7bd.js +4 -0
- package/clsx.m-2bb6df4b.js +3 -0
- package/configs-91c86664.js +96 -0
- package/configs.js +131 -0
- package/dateValidation-67caec66.js +225 -0
- package/debounce-4419bc2f.js +17 -0
- package/globalStyling-9c60a159.js +4 -0
- package/guid-8ddf77b3.js +16 -0
- package/index-00fe8887.js +193 -0
- package/index-0cf65939.js +30991 -0
- package/index-122432cd.js +270 -0
- package/index-262edd7a.js +77 -0
- package/index-5cea9a7d.js +407 -0
- package/index-5e722d91.js +867 -0
- package/index-67f4d4d1.js +6568 -0
- package/index-6ff23041.js +66 -0
- package/index-702bf24a.js +1938 -0
- package/index-a4635754.js +329 -0
- package/index-a59530cd.js +4 -0
- package/index-ac59cb10.js +169 -0
- package/index-b7a33c58.js +11 -0
- package/index-d9e8a888.js +987 -0
- package/index-e0af0caf.js +1182 -0
- package/index-e8776f3d.js +807 -0
- package/index.js +128 -0
- package/localization-4ba17032.js +46 -0
- package/objectWithoutPropertiesLoose-299691d8.js +78 -0
- package/package.json +190 -0
- package/rangeAndSlider-20599da4.js +8839 -0
- package/react-beautiful-dnd.esm-38c37304.js +10117 -0
- package/style-inject.es-746bb8ed.js +28 -0
- package/useClickOutside-5183e396.js +25 -0
- package/useDeviceType-dd51db38.js +15 -0
- package/useEllipsisDetection-ef536015.js +23 -0
- package/useKeyDown-38102ae7.js +21 -0
- package/useMount-6fef51a5.js +9 -0
- package/useWidth-9f4647f8.js +15 -0
- package/useWindowSize-80369d76.js +33 -0
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
|
|
2
|
+
import React__default, { useReducer, useRef, useCallback, forwardRef, useState, useContext, useMemo, Children, useEffect } from 'react';
|
|
3
|
+
import { _ as _default } from './Popover-f4d1cac0.js';
|
|
4
|
+
import { u as useSwipeable } from './index-122432cd.js';
|
|
5
|
+
import { c as classnames } from './index-6ff23041.js';
|
|
6
|
+
import { p as propTypesExports } from './index-e0af0caf.js';
|
|
7
|
+
import { n as noop, s as stopEvent } from './index-ac59cb10.js';
|
|
8
|
+
import { u as useDeviceType } from './useDeviceType-dd51db38.js';
|
|
9
|
+
import { d as popoverConfig, s as screenTypes } from './configs-91c86664.js';
|
|
10
|
+
import { GeneUIDesignSystemContext } from './GeneUIProvider.js';
|
|
11
|
+
import Portal from './Portal.js';
|
|
12
|
+
import CustomScrollbar from './Scrollbar.js';
|
|
13
|
+
import './globalStyling-9c60a159.js';
|
|
14
|
+
import { s as styleInject } from './style-inject.es-746bb8ed.js';
|
|
15
|
+
import { g as guid } from './guid-8ddf77b3.js';
|
|
16
|
+
|
|
17
|
+
const useForceUpdate = () => {
|
|
18
|
+
const [ignored, forceUpdate] = useReducer(x => x + 1, 0);
|
|
19
|
+
return forceUpdate;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const useUpdatableRef = initial => {
|
|
23
|
+
const ref = useRef(initial);
|
|
24
|
+
const forceUpdate = useForceUpdate();
|
|
25
|
+
const update = useCallback(value => {
|
|
26
|
+
if (ref.current !== value) forceUpdate();
|
|
27
|
+
ref.current = value;
|
|
28
|
+
}, []);
|
|
29
|
+
return [ref, update];
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
var css_248z = "[data-gene-ui-version=\"2.11.0\"] .popover-positioner{--popover-border-radius:1rem;--popover-shadow:0 0.2rem 0.4rem 0 #0000000d,0 0 0 1px rgba(var(--background-sc-rgb),0.08);z-index:400}[data-gene-ui-version=\"2.11.0\"] .popover-positioner.cr-smooth-radius{--popover-border-radius:0.4rem}[data-gene-ui-version=\"2.11.0\"] .popover-positioner.mobile-view{--popover-border-radius:0.8rem 0.8rem 0 0;--popover-shadow:0 -1px 0.2rem 0 #0000000d;bottom:0;left:0!important;overflow:hidden;position:fixed!important;top:0!important;width:100%}[data-gene-ui-version=\"2.11.0\"] .popover-positioner .popover-top-bottom-padding{padding:1rem 0;width:100%}[data-gene-ui-version=\"2.11.0\"] .popover-positioner .popover-top-bottom-padding>div[style*=width]{width:100%!important}[data-gene-ui-version=\"2.11.0\"] .popover{width:100%}[data-gene-ui-version=\"2.11.0\"] .popover-positioner.mobile-view .popover{height:100%;position:relative}[data-gene-ui-version=\"2.11.0\"] .popover-content{background:var(--background);border-radius:var(--popover-border-radius);box-shadow:var(--popover-shadow);overflow:hidden;padding:0 0 env(safe-area-inset-bottom);transition:padding .4s;width:100%}[data-gene-ui-version=\"2.11.0\"] .popover-positioner.mobile-view .popover-content{-webkit-overflow-scrolling:auto;bottom:0;left:0;max-height:calc(100% - 10rem);overflow-x:hidden;overflow-y:auto;position:absolute;z-index:1}[data-gene-ui-version=\"2.11.0\"] .popover-positioner.mobile-view[style*=\"opacity: 0\"] .popover-content{transform:translateY(100%)}[data-gene-ui-version=\"2.11.0\"] .popover-positioner.mobile-view .popover-content{transform:translateY(0)}[data-gene-ui-version=\"2.11.0\"] .fullHeight{height:100%}[data-gene-ui-version=\"2.11.0\"] .popover-mobile-backdrop{background:#0003;height:100%;left:0;opacity:1;position:absolute;top:0;width:100%;z-index:0}[data-gene-ui-version=\"2.11.0\"] .popover-footer,[data-gene-ui-version=\"2.11.0\"] .popover-header{background:var(--background);position:-webkit-sticky;position:sticky;z-index:1}[data-gene-ui-version=\"2.11.0\"] .popover-header{border-bottom:1px solid rgba(var(--background-sc-rgb),.1);top:0}[data-gene-ui-version=\"2.11.0\"] .popover-footer{align-items:stretch;border-top:1px solid rgba(var(--background-sc-rgb),.1);bottom:calc(env(safe-area-inset-bottom)*-1);display:flex;padding:0 0 env(safe-area-inset-bottom);transition:padding .4s}[data-gene-ui-version=\"2.11.0\"] .popover-body{position:relative;z-index:0}[data-gene-ui-version=\"2.11.0\"] .popover-search{padding:1.4rem 1.5rem}[data-gene-ui-version=\"2.11.0\"] .empty-data-holder{align-items:center;display:flex;height:19rem;justify-content:center;width:100%}[data-gene-ui-version=\"2.11.0\"] .popover-disabled{opacity:.5;pointer-events:none;transition:opacity .5s}";
|
|
33
|
+
styleInject(css_248z);
|
|
34
|
+
|
|
35
|
+
const setRef = (ref, currentRef) => {
|
|
36
|
+
if (!ref) return;
|
|
37
|
+
if (typeof ref === 'function') {
|
|
38
|
+
ref(currentRef);
|
|
39
|
+
} else {
|
|
40
|
+
ref.current = currentRef;
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
const Popover = /*#__PURE__*/forwardRef((props, ref) => {
|
|
44
|
+
const {
|
|
45
|
+
extendTargetWidth,
|
|
46
|
+
disableReposition,
|
|
47
|
+
toggleHandler,
|
|
48
|
+
cornerRadius,
|
|
49
|
+
screenType,
|
|
50
|
+
minHeight,
|
|
51
|
+
maxHeight,
|
|
52
|
+
className,
|
|
53
|
+
children,
|
|
54
|
+
position,
|
|
55
|
+
disabled,
|
|
56
|
+
Content,
|
|
57
|
+
padding,
|
|
58
|
+
behave,
|
|
59
|
+
Header,
|
|
60
|
+
Footer,
|
|
61
|
+
align,
|
|
62
|
+
scrollbarNeeded,
|
|
63
|
+
contentRef,
|
|
64
|
+
isOpen,
|
|
65
|
+
getScrollRef,
|
|
66
|
+
swipeable,
|
|
67
|
+
onSwipedDown,
|
|
68
|
+
scrollbarProps,
|
|
69
|
+
fullHeight,
|
|
70
|
+
...restProps
|
|
71
|
+
} = props;
|
|
72
|
+
const id = guid();
|
|
73
|
+
const popoverBodyRef = useRef(null);
|
|
74
|
+
const [popoverOpened, setPopoverOpened] = useState(false);
|
|
75
|
+
const isControlled = ('isOpen' in props);
|
|
76
|
+
const popoverState = isControlled ? isOpen : popoverOpened;
|
|
77
|
+
const {
|
|
78
|
+
isMobile
|
|
79
|
+
} = useDeviceType(screenType);
|
|
80
|
+
const isToggle = behave === 'toggle';
|
|
81
|
+
const [targetWidth, setTargetWidth] = useState(null);
|
|
82
|
+
const [swipingPosition, setSwipingPosition] = useState(0);
|
|
83
|
+
const [portalContainerRef, updatePortalContainerRef] = useUpdatableRef(null);
|
|
84
|
+
const {
|
|
85
|
+
geneUIProviderRef
|
|
86
|
+
} = useContext(GeneUIDesignSystemContext);
|
|
87
|
+
const checkBodyContains = event => popoverBodyRef.current.contains(event.target);
|
|
88
|
+
const handleSwiped = event => setSwipingPosition(0);
|
|
89
|
+
const handleSwipedDown = touchEvent => {
|
|
90
|
+
!checkBodyContains(touchEvent.event) && onSwipedDown(touchEvent);
|
|
91
|
+
};
|
|
92
|
+
const handleSwiping = useCallback(_ref => {
|
|
93
|
+
let {
|
|
94
|
+
deltaY,
|
|
95
|
+
event
|
|
96
|
+
} = _ref;
|
|
97
|
+
if (checkBodyContains(event)) {
|
|
98
|
+
stopEvent(event);
|
|
99
|
+
} else if (deltaY >= 0) {
|
|
100
|
+
setSwipingPosition(deltaY * -1);
|
|
101
|
+
}
|
|
102
|
+
}, [popoverBodyRef, setSwipingPosition]);
|
|
103
|
+
const swipeHandlers = useSwipeable(useMemo(() => swipeable ? {
|
|
104
|
+
onSwipedDown: handleSwipedDown,
|
|
105
|
+
onSwiping: handleSwiping,
|
|
106
|
+
onSwiped: handleSwiped
|
|
107
|
+
} : {}, [swipeable, handleSwipedDown, handleSwiping, handleSwiped]));
|
|
108
|
+
const popoverStateChange = useCallback(event => {
|
|
109
|
+
stopEvent(event);
|
|
110
|
+
if (isControlled) {
|
|
111
|
+
toggleHandler(event, isOpen);
|
|
112
|
+
} else {
|
|
113
|
+
setPopoverOpened(isPopoverOpened => {
|
|
114
|
+
toggleHandler(event, !isPopoverOpened);
|
|
115
|
+
return !isPopoverOpened;
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
}, [isControlled, toggleHandler, isOpen]);
|
|
119
|
+
const handlePopoverStateChange = useCallback(event => {
|
|
120
|
+
Children.map(children, child => child.props.onClick && child.props.onClick(event));
|
|
121
|
+
popoverStateChange(event);
|
|
122
|
+
}, [children, popoverStateChange]);
|
|
123
|
+
const setPopoverRef = popoverRef => {
|
|
124
|
+
setRef(ref, popoverRef);
|
|
125
|
+
const rect = popoverRef && popoverRef.target.getBoundingClientRect();
|
|
126
|
+
setTargetWidth(rect && rect.width);
|
|
127
|
+
};
|
|
128
|
+
const handleClick = useCallback(e => {
|
|
129
|
+
if (!disabled) {
|
|
130
|
+
popoverState ? isToggle && handlePopoverStateChange(e) : handlePopoverStateChange(e);
|
|
131
|
+
}
|
|
132
|
+
}, [popoverState, isToggle, disabled, handlePopoverStateChange]);
|
|
133
|
+
const generateContentRef = useCallback(element => {
|
|
134
|
+
isMobile && getScrollRef(element);
|
|
135
|
+
if (contentRef) {
|
|
136
|
+
typeof contentRef === 'function' ? contentRef(element) : contentRef.current = element;
|
|
137
|
+
}
|
|
138
|
+
}, [isMobile, contentRef, getScrollRef]);
|
|
139
|
+
const portalContent = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("ul", {
|
|
140
|
+
onClick: stopEvent,
|
|
141
|
+
ref: generateContentRef,
|
|
142
|
+
className: classnames('popover-content', {
|
|
143
|
+
fullHeight: fullHeight && isMobile
|
|
144
|
+
}),
|
|
145
|
+
style: {
|
|
146
|
+
bottom: swipingPosition
|
|
147
|
+
}
|
|
148
|
+
}, Header && /*#__PURE__*/React__default.createElement("li", {
|
|
149
|
+
className: "popover-header"
|
|
150
|
+
}, Header), /*#__PURE__*/React__default.createElement("li", {
|
|
151
|
+
ref: popoverBodyRef,
|
|
152
|
+
className: "popover-body"
|
|
153
|
+
}, scrollbarNeeded && !isMobile ? /*#__PURE__*/React__default.createElement(CustomScrollbar, _extends({
|
|
154
|
+
ref: scrollbar => {
|
|
155
|
+
scrollbar && getScrollRef(scrollbar.view);
|
|
156
|
+
},
|
|
157
|
+
autoHeight: true,
|
|
158
|
+
autoHeightMax: maxHeight,
|
|
159
|
+
autoHeightMin: minHeight
|
|
160
|
+
}, scrollbarProps), Content) : Content), Footer && /*#__PURE__*/React__default.createElement("li", {
|
|
161
|
+
className: "popover-footer"
|
|
162
|
+
}, Footer)), isMobile && /*#__PURE__*/React__default.createElement("div", {
|
|
163
|
+
className: "popover-mobile-backdrop",
|
|
164
|
+
onClick: popoverStateChange
|
|
165
|
+
}));
|
|
166
|
+
const getChild = useCallback((child, index) => /*#__PURE__*/React__default.cloneElement(child, {
|
|
167
|
+
key: index,
|
|
168
|
+
onClick: e => handleClick(e),
|
|
169
|
+
className: classnames(child.props.className, 'cursor-pointer', {
|
|
170
|
+
'popover-opened': popoverState,
|
|
171
|
+
'popover-disabled': disabled
|
|
172
|
+
})
|
|
173
|
+
}), [handleClick, popoverState, disabled]);
|
|
174
|
+
const childElements = useMemo(() => Children.map(children, getChild), [getChild, children]);
|
|
175
|
+
useEffect(() => {
|
|
176
|
+
!popoverState && updatePortalContainerRef(null);
|
|
177
|
+
}, [popoverState]);
|
|
178
|
+
return Content ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(_default, _extends({
|
|
179
|
+
contentDestination: geneUIProviderRef.current,
|
|
180
|
+
disableReposition: disableReposition,
|
|
181
|
+
ref: setPopoverRef,
|
|
182
|
+
isOpen: popoverState,
|
|
183
|
+
position: position,
|
|
184
|
+
align: align,
|
|
185
|
+
onClickOutside: handlePopoverStateChange,
|
|
186
|
+
containerClassName: classnames("popover-positioner", "cr-".concat(cornerRadius), className, {
|
|
187
|
+
'mobile-view': isMobile
|
|
188
|
+
}),
|
|
189
|
+
transitionDuration: -1,
|
|
190
|
+
padding: padding,
|
|
191
|
+
content: /*#__PURE__*/React__default.createElement("div", swipeHandlers, /*#__PURE__*/React__default.createElement("div", {
|
|
192
|
+
ref: updatePortalContainerRef,
|
|
193
|
+
id: id,
|
|
194
|
+
style: {
|
|
195
|
+
width: extendTargetWidth && !isMobile && targetWidth || null
|
|
196
|
+
}
|
|
197
|
+
})),
|
|
198
|
+
containerStyle: {
|
|
199
|
+
overflow: null
|
|
200
|
+
}
|
|
201
|
+
}, restProps), childElements), portalContainerRef.current && /*#__PURE__*/React__default.createElement(Portal, {
|
|
202
|
+
isOpen: true,
|
|
203
|
+
container: portalContainerRef.current
|
|
204
|
+
}, portalContent)) : childElements;
|
|
205
|
+
});
|
|
206
|
+
Popover.propTypes = {
|
|
207
|
+
/**
|
|
208
|
+
* The component that need to be displayed in the Popover. Any valid React node
|
|
209
|
+
*/
|
|
210
|
+
Content: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.func]),
|
|
211
|
+
/**
|
|
212
|
+
* The component that need to be displayed as Popover header. Any valid React node
|
|
213
|
+
*/
|
|
214
|
+
Header: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.func]),
|
|
215
|
+
/**
|
|
216
|
+
* The component that need to be displayed as Popover footer. Any valid React node
|
|
217
|
+
*/
|
|
218
|
+
Footer: propTypesExports.oneOfType([propTypesExports.node, propTypesExports.func]),
|
|
219
|
+
/**
|
|
220
|
+
* The component which click needs to trigger the Popover to open. Need to passed as child to Popover. Any valid React node
|
|
221
|
+
*/
|
|
222
|
+
children: propTypesExports.node,
|
|
223
|
+
/**
|
|
224
|
+
* The Popover will get the width of its child. The property will not work when "width" prop is specified
|
|
225
|
+
*/
|
|
226
|
+
extendTargetWidth: propTypesExports.bool,
|
|
227
|
+
/**
|
|
228
|
+
* The Popover "Content" minimum scroll height
|
|
229
|
+
*/
|
|
230
|
+
minHeight: propTypesExports.number,
|
|
231
|
+
/**
|
|
232
|
+
* The Popover "Content" maximum scroll height. Will not work when the "screenType" is "mobile"
|
|
233
|
+
*/
|
|
234
|
+
maxHeight: propTypesExports.number,
|
|
235
|
+
/**
|
|
236
|
+
* Use this prop to control the Popover. Note the component will start not to open and close automatically
|
|
237
|
+
*/
|
|
238
|
+
isOpen: propTypesExports.bool,
|
|
239
|
+
/**
|
|
240
|
+
* Popover position to be displayed
|
|
241
|
+
*/
|
|
242
|
+
position: propTypesExports.oneOfType([propTypesExports.oneOf(popoverConfig.position), propTypesExports.arrayOf(propTypesExports.oneOf(popoverConfig.position))]),
|
|
243
|
+
/**
|
|
244
|
+
* Will called each time the popover need to be toggled(child click, close button click, backdrop click).
|
|
245
|
+
* (event: Event, isOpen: bool) => void
|
|
246
|
+
*/
|
|
247
|
+
toggleHandler: propTypesExports.func,
|
|
248
|
+
/**
|
|
249
|
+
* Possible values are start, center, and end.
|
|
250
|
+
* If start is specified, the popover content's top or left location is aligned with its target's.
|
|
251
|
+
* With end specified, the content's bottom or right location is aligned with its target's.
|
|
252
|
+
* If center is specified, the popover content and target's centers are aligned.
|
|
253
|
+
*/
|
|
254
|
+
align: propTypesExports.oneOf(popoverConfig.align),
|
|
255
|
+
/**
|
|
256
|
+
* If you'd like to apply styles to the single container div that your popover content is rendered within via stylesheets,
|
|
257
|
+
* you can specify a custom className for the container here.
|
|
258
|
+
*/
|
|
259
|
+
className: propTypesExports.string,
|
|
260
|
+
/**
|
|
261
|
+
* This number determines the gap, in pixels, between your target content and your popover content
|
|
262
|
+
*/
|
|
263
|
+
padding: propTypesExports.number,
|
|
264
|
+
/**
|
|
265
|
+
* If this property is enabled, rather than the popover content repositioning on a boundary collision,
|
|
266
|
+
* the popover content container will move beyond the window's bounds.
|
|
267
|
+
* You are, however, supplied with nudgedLeft and nudgedTop values, so you may choose to handle content overflow as you wish.
|
|
268
|
+
*/
|
|
269
|
+
disableReposition: propTypesExports.bool,
|
|
270
|
+
/**
|
|
271
|
+
* Popover corner radius
|
|
272
|
+
*/
|
|
273
|
+
cornerRadius: propTypesExports.oneOf(popoverConfig.cornerRadius),
|
|
274
|
+
/**
|
|
275
|
+
* The switch between mobile and desktop version of Popover will be applied automatically, when the prop is not specified.
|
|
276
|
+
* When the prop is present it must be changed from outside.
|
|
277
|
+
*/
|
|
278
|
+
screenType: propTypesExports.oneOf(screenTypes),
|
|
279
|
+
/**
|
|
280
|
+
* Specify does Popover needs to be toggled on child click
|
|
281
|
+
*/
|
|
282
|
+
behave: propTypesExports.oneOf(popoverConfig.behave),
|
|
283
|
+
/**
|
|
284
|
+
* Given content prop can have its own scroll, and with this props we can use/not use default scroll that has popover
|
|
285
|
+
*/
|
|
286
|
+
scrollbarNeeded: propTypesExports.bool,
|
|
287
|
+
/**
|
|
288
|
+
* Popover content ref
|
|
289
|
+
*/
|
|
290
|
+
contentRef: propTypesExports.oneOfType([propTypesExports.func, propTypesExports.shape({
|
|
291
|
+
current: propTypesExports.any
|
|
292
|
+
})]),
|
|
293
|
+
disabled: propTypesExports.bool,
|
|
294
|
+
getScrollRef: propTypesExports.func,
|
|
295
|
+
/*
|
|
296
|
+
* After DOWN swipe (SwipeEventData) => void
|
|
297
|
+
*/
|
|
298
|
+
onSwipedDown: propTypesExports.func,
|
|
299
|
+
/*
|
|
300
|
+
* props for scrollbar
|
|
301
|
+
*/
|
|
302
|
+
scrollbarProps: propTypesExports.shape({
|
|
303
|
+
...CustomScrollbar.propTypes
|
|
304
|
+
}),
|
|
305
|
+
/*
|
|
306
|
+
* Popup content opens with full height. Mobile only property.
|
|
307
|
+
*/
|
|
308
|
+
fullHeight: propTypesExports.bool,
|
|
309
|
+
swipeable: propTypesExports.bool
|
|
310
|
+
};
|
|
311
|
+
Popover.defaultProps = {
|
|
312
|
+
cornerRadius: popoverConfig.cornerRadius[0],
|
|
313
|
+
position: popoverConfig.position,
|
|
314
|
+
align: popoverConfig.align[0],
|
|
315
|
+
toggleHandler: noop,
|
|
316
|
+
behave: popoverConfig.behave[0],
|
|
317
|
+
fullHeight: false,
|
|
318
|
+
extendTargetWidth: true,
|
|
319
|
+
disableReposition: true,
|
|
320
|
+
minHeight: 0,
|
|
321
|
+
maxHeight: 510,
|
|
322
|
+
padding: 10,
|
|
323
|
+
getScrollRef: noop,
|
|
324
|
+
scrollbarNeeded: true,
|
|
325
|
+
swipeable: false,
|
|
326
|
+
onSwipedDown: noop
|
|
327
|
+
};
|
|
328
|
+
|
|
329
|
+
export { Popover as P, useUpdatableRef as u };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { s as styleInject } from './style-inject.es-746bb8ed.js';
|
|
2
|
+
|
|
3
|
+
var css_248z = "[data-gene-ui-version=\"2.11.0\"] .dropdown-holder{--input-message-padding-side:2rem;max-width:100%}[data-gene-ui-version=\"2.11.0\"] .dropdown-holder .read-only-cursor-default{cursor:default}[data-gene-ui-version=\"2.11.0\"] .dropdown-holder:not(.f-content-size){width:100%}[data-gene-ui-version=\"2.11.0\"] .dropdown-holder.a-minimal.s-small{--input-message-padding-side:0.7rem}[data-gene-ui-version=\"2.11.0\"] .pointer-events-none-dropdown:active{pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .dropdown-actions{align-items:center;color:var(--hero);display:flex;font:600 1.6rem/2rem var(--font-family);height:6.1rem;padding-inline-end:3rem;padding-inline-start:2rem;width:100%}[data-gene-ui-version=\"2.11.0\"] .dropdown-actions:not(:only-child){border-bottom:1px solid rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.11.0\"] .dropdown-actions>li:first-child{flex:auto}[data-gene-ui-version=\"2.11.0\"] .dropdown-actions>li:nth-child(2){flex-shrink:0}[data-gene-ui-version=\"2.11.0\"] .dropdown-item{align-items:center;display:flex;font:600 1.4rem/1.8rem var(--font-family);height:4rem;justify-content:flex-start;padding:0 1.4rem;transition:color .4s,background .4s;width:100%}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .dropdown-item.hovered,[data-gene-ui-version=\"2.11.0\"] .dropdown-item:not(.hover-disabled):hover{background:rgba(var(--background-sc-rgb),.05)}}html[dir=rtl] .dropdown-item{justify-content:flex-end}[data-gene-ui-version=\"2.11.0\"] .dropdown-item:not(.read-only){cursor:pointer}html[dir=rtl] .dropdown-item:not(.sticky-option,.group-title){display:flex;flex-direction:row-reverse;justify-content:flex-start;width:100%}html[dir=rtl] .dropdown-item:not(.sticky-option,.group-title) p{flex-grow:1!important}html[dir=rtl] .dropdown-item .crs-holder .label-holder.has-label{grid-template-columns:1fr auto}html[dir=rtl] .dropdown-item .crs-holder .label-holder.has-label>:first-child{order:0}html[dir=rtl] .dropdown-item .crs-holder .label-holder.has-label>:last-child{order:1}[data-gene-ui-version=\"2.11.0\"] .dropdown-item.sticky-option{position:-webkit-sticky;position:sticky;top:0;z-index:10}[data-gene-ui-version=\"2.11.0\"] .dropdown-item.sticky-option.hovered{background:var(--background-hover)}[data-gene-ui-version=\"2.11.0\"] .dropdown-item.sticky-option:not(.hovered){background:var(--background)}@media (hover:hover){[data-gene-ui-version=\"2.11.0\"] .dropdown-item.sticky-option:not(.hover-disabled):hover{background:var(--background-hover)}}html[dir=rtl] .dropdown-item.sticky-option{display:flex;justify-content:flex-start;width:100%}html[dir=rtl] .dropdown-item.sticky-option .label-holder{display:flex;flex-direction:row-reverse}[data-gene-ui-version=\"2.11.0\"] .dropdown-item>p{align-items:center;display:flex;flex:auto;overflow:hidden}html[dir=rtl] .dropdown-item>p{flex:none}[data-gene-ui-version=\"2.11.0\"] .dropdown-item>p i{flex-shrink:0}html:not([dir=rtl]) .dropdown-item>p i{margin-right:1.2rem}html[dir=rtl] .dropdown-item>p i{margin-left:1.2rem}[data-gene-ui-version=\"2.11.0\"] .dropdown-item>p span{flex:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.11.0\"] .dropdown-item>small{flex-shrink:0}[data-gene-ui-version=\"2.11.0\"] .dropdown-item>small.bc-icon-selected:before{display:block;transform:scale(0);transition:transform .4s}[data-gene-ui-version=\"2.11.0\"] .selected.dropdown-item>small.bc-icon-selected:before{transform:scale(1)}[data-gene-ui-version=\"2.11.0\"] .dropdown-item.selected{color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .dropdown-item.disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .dropdown-item.group-title{background:#0000;color:rgba(var(--background-sc-rgb),.75);display:flex;font-size:12px;font-weight:600;height:25px;line-height:16px;padding:0 1.2rem 0 .8rem;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .dropdown-item.group-title:hover{background:#0000}html[dir=rtl] .dropdown-item.group-title{flex-direction:row-reverse;justify-content:space-between;padding:0 .8rem 0 1.2rem}[data-gene-ui-version=\"2.11.0\"] .dropdown-item .group-title-icon{color:rgba(var(--background-sc-rgb),.75);pointer-events:auto}[data-gene-ui-version=\"2.11.0\"] .dropdown-item.groupLastChild{border-bottom:1px solid rgba(var(--background-sc-rgb),.16)}[data-gene-ui-version=\"2.11.0\"] .popover-positioner.mobile-view .dropdown-item{height:4.8rem;padding:0 2rem}[data-gene-ui-version=\"2.11.0\"] .temporary-full-width{width:100%}[data-gene-ui-version=\"2.11.0\"] .dropdown-item-tag{flex-shrink:0;font:600 1.4rem/1.8rem var(--font-family);opacity:.5}[data-gene-ui-version=\"2.11.0\"] .busy-loader{align-items:center;border-radius:100%;display:block;display:flex;height:19rem;justify-content:center;margin:0 1rem}";
|
|
4
|
+
styleInject(css_248z);
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import { p as propTypesExports } from './index-e0af0caf.js';
|
|
2
|
+
import { a as dayjs } from './dateValidation-67caec66.js';
|
|
3
|
+
import 'react-dom';
|
|
4
|
+
|
|
5
|
+
class Logger {
|
|
6
|
+
success(message) {
|
|
7
|
+
console.log("%c".concat(message), 'color: green');
|
|
8
|
+
}
|
|
9
|
+
warning(message) {
|
|
10
|
+
console.warn(message);
|
|
11
|
+
}
|
|
12
|
+
error(message) {
|
|
13
|
+
console.error(message);
|
|
14
|
+
}
|
|
15
|
+
deprecate(message) {
|
|
16
|
+
console.warn("DEPRECATION WARNING(gene-ui): ".concat(message));
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
var Logger$1 = new Logger();
|
|
20
|
+
|
|
21
|
+
/*
|
|
22
|
+
* Use this function for informing about
|
|
23
|
+
* props that are in conflict with each other.
|
|
24
|
+
*/
|
|
25
|
+
const conflictPropsLog = function (componentName, props) {
|
|
26
|
+
let isWarning = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
27
|
+
const message = props.map(prop => "'".concat(prop, "'")).join(' and ');
|
|
28
|
+
const logFunction = isWarning ? Logger$1.warning : Logger$1.error;
|
|
29
|
+
logFunction("You can't specify ".concat(message, " props together for ").concat(componentName, " component."));
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
/*
|
|
33
|
+
* Function will check does provided keyboard key codes
|
|
34
|
+
* match with the one that bubbled event.
|
|
35
|
+
*/
|
|
36
|
+
const keyboardHandler = (e, keys) => keys.some(key => key === e.which || key === e.keycode);
|
|
37
|
+
|
|
38
|
+
/*
|
|
39
|
+
* PropTypes.instanceOf works only for class components
|
|
40
|
+
*/
|
|
41
|
+
const childrenOf = types => {
|
|
42
|
+
const type = propTypesExports.shape({
|
|
43
|
+
type: propTypesExports.oneOf(types)
|
|
44
|
+
});
|
|
45
|
+
return propTypesExports.oneOfType([type, propTypesExports.arrayOf(type)]);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
/*
|
|
49
|
+
* One of specified props is required. Use for conditinal required props.
|
|
50
|
+
*/
|
|
51
|
+
|
|
52
|
+
const oneIsRequired = properties => {
|
|
53
|
+
const keys = Object.keys(properties);
|
|
54
|
+
return keys.reduce((acc, item) => {
|
|
55
|
+
acc[item] = (props, propName, componentName) => {
|
|
56
|
+
if (keys.every(key => !props.hasOwnProperty(key))) {
|
|
57
|
+
return new Error("".concat(keys.join(' or '), " must be specified for ").concat(componentName));
|
|
58
|
+
}
|
|
59
|
+
propTypesExports.checkPropTypes({
|
|
60
|
+
[propName]: properties[propName]
|
|
61
|
+
}, props, propName, componentName);
|
|
62
|
+
};
|
|
63
|
+
return acc;
|
|
64
|
+
}, {});
|
|
65
|
+
};
|
|
66
|
+
const chunk = function (array) {
|
|
67
|
+
let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
68
|
+
const length = array && array.length;
|
|
69
|
+
if (!array || !length) return [];
|
|
70
|
+
if (size < 1) return array;
|
|
71
|
+
let i = 0;
|
|
72
|
+
let j = 0;
|
|
73
|
+
const result = [];
|
|
74
|
+
while (i < length) {
|
|
75
|
+
result[j++] = array.slice(i, i += size);
|
|
76
|
+
}
|
|
77
|
+
return result;
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
/*
|
|
81
|
+
* Display file size bytes
|
|
82
|
+
*/
|
|
83
|
+
const fileSizeDisplay = bytes => {
|
|
84
|
+
if (!bytes || bytes < 1) return '0 Byte';
|
|
85
|
+
const sizes = ['Byte', 'KB', 'MB', 'GB', 'TR'];
|
|
86
|
+
const powerOfTwo = Math.floor(Math.log2(bytes) / 10);
|
|
87
|
+
const i = powerOfTwo > 4 ? 4 : powerOfTwo;
|
|
88
|
+
return "".concat(Math.floor(bytes / 2 ** (i * 10)), " ").concat(sizes[i]);
|
|
89
|
+
};
|
|
90
|
+
const getImageDimensions = image => new Promise((resolve, reject) => {
|
|
91
|
+
if (window.Image && window.URL) {
|
|
92
|
+
const img = new Image();
|
|
93
|
+
img.src = window.URL.createObjectURL(image);
|
|
94
|
+
img.onload = function () {
|
|
95
|
+
resolve({
|
|
96
|
+
width: img.naturalWidth,
|
|
97
|
+
height: img.naturalHeight
|
|
98
|
+
});
|
|
99
|
+
window.URL.revokeObjectURL(img.src);
|
|
100
|
+
};
|
|
101
|
+
img.onerror = error => {
|
|
102
|
+
reject(error);
|
|
103
|
+
};
|
|
104
|
+
} else {
|
|
105
|
+
reject();
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
const interceptValue = (event, value) => ({
|
|
109
|
+
...event,
|
|
110
|
+
target: {
|
|
111
|
+
...event.target,
|
|
112
|
+
value
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
const stopEvent = function (event) {
|
|
116
|
+
let isPreventNeeded = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
117
|
+
event.stopPropagation();
|
|
118
|
+
isPreventNeeded && event.preventDefault();
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
/*
|
|
122
|
+
* This part for date filter organism,
|
|
123
|
+
* functions are checking is your past date in right range or no.
|
|
124
|
+
*/
|
|
125
|
+
|
|
126
|
+
const getLMTD = (today, dayFromLastMonth) => {
|
|
127
|
+
const dayOfMonth = today.date();
|
|
128
|
+
const selectedDayOfMonth = dayFromLastMonth.startOf('month').date(dayOfMonth);
|
|
129
|
+
return today.isSame(selectedDayOfMonth, 'month') ? dayFromLastMonth.endOf('month') : selectedDayOfMonth;
|
|
130
|
+
};
|
|
131
|
+
const isDateInRightRange = (rangeStart, rangeEnd, startDate, endDate) => rangeStart.isSame(startDate, 'day') && rangeEnd.isSame(endDate, 'day');
|
|
132
|
+
const isToday = (startDate, endDate) => {
|
|
133
|
+
const today = dayjs();
|
|
134
|
+
return isDateInRightRange(today, today, startDate, endDate);
|
|
135
|
+
};
|
|
136
|
+
const isYesterday = (startDate, endDate) => {
|
|
137
|
+
const yesterday = dayjs().subtract(1, 'day');
|
|
138
|
+
return isDateInRightRange(yesterday, yesterday, startDate, endDate);
|
|
139
|
+
};
|
|
140
|
+
const isThisWeek = (startDate, endDate) => {
|
|
141
|
+
const startOfCurrentWeek = dayjs().startOf('week');
|
|
142
|
+
const endOfCurrentWeek = dayjs().endOf('week');
|
|
143
|
+
return isDateInRightRange(startOfCurrentWeek, endOfCurrentWeek, startDate, endDate);
|
|
144
|
+
};
|
|
145
|
+
const isLastWeek = (startDate, endDate) => {
|
|
146
|
+
const startOfLastWeek = dayjs().subtract(7, 'day').startOf('week');
|
|
147
|
+
const endOfLastWeek = dayjs().subtract(7, 'day').endOf('week');
|
|
148
|
+
return isDateInRightRange(startOfLastWeek, endOfLastWeek, startDate, endDate);
|
|
149
|
+
};
|
|
150
|
+
const isThisMonth = (startDate, endDate) => {
|
|
151
|
+
const startOfCurrentMonth = dayjs().startOf('month');
|
|
152
|
+
const endOfCurrentMonth = dayjs().endOf('month');
|
|
153
|
+
return isDateInRightRange(startOfCurrentMonth, endOfCurrentMonth, startDate, endDate);
|
|
154
|
+
};
|
|
155
|
+
const isLastMonth = (startDate, endDate) => {
|
|
156
|
+
const startOfLastMonth = dayjs().subtract(1, 'month').startOf('month');
|
|
157
|
+
const endOfLastMonth = dayjs().subtract(1, 'month').endOf('month');
|
|
158
|
+
return isDateInRightRange(startOfLastMonth, endOfLastMonth, startDate, endDate);
|
|
159
|
+
};
|
|
160
|
+
const isLastMonthToDate = (startDate, endDate) => {
|
|
161
|
+
const today = dayjs();
|
|
162
|
+
const startOfLastMonth = today.subtract(1, 'month').startOf('month');
|
|
163
|
+
const sameDayFromLastMonth = getLMTD(today, startOfLastMonth);
|
|
164
|
+
return isDateInRightRange(startOfLastMonth, sameDayFromLastMonth, startDate, endDate);
|
|
165
|
+
};
|
|
166
|
+
const noop = () => {};
|
|
167
|
+
const getInitials = name => name.match(/\b(\w)/g).join('').substr(0, 2).toUpperCase();
|
|
168
|
+
|
|
169
|
+
export { Logger$1 as L, conflictPropsLog as a, isToday as b, childrenOf as c, isYesterday as d, isThisWeek as e, fileSizeDisplay as f, getInitials as g, isLastWeek as h, interceptValue as i, isThisMonth as j, keyboardHandler as k, isLastMonth as l, isLastMonthToDate as m, noop as n, getLMTD as o, oneIsRequired as p, getImageDimensions as q, chunk as r, stopEvent as s };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import './dateValidation-67caec66.js';
|
|
2
|
+
import 'react-dom';
|
|
3
|
+
|
|
4
|
+
const stopEvent = function (event) {
|
|
5
|
+
let isPreventNeeded = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
6
|
+
event.stopPropagation();
|
|
7
|
+
isPreventNeeded && event.preventDefault();
|
|
8
|
+
};
|
|
9
|
+
const noop = () => {};
|
|
10
|
+
|
|
11
|
+
export { noop as n, stopEvent as s };
|