@vkontakte/vkui 5.9.0 → 5.9.2
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/dist/cjs/components/Alert/Alert.d.ts +3 -3
- package/dist/cjs/components/Alert/Alert.d.ts.map +1 -1
- package/dist/cjs/components/Alert/Alert.js +5 -3
- package/dist/cjs/components/Alert/Alert.js.map +1 -1
- package/dist/cjs/components/CalendarRange/CalendarRange.d.ts +1 -1
- package/dist/cjs/components/CalendarRange/CalendarRange.d.ts.map +1 -1
- package/dist/cjs/components/CalendarRange/CalendarRange.js +1 -2
- package/dist/cjs/components/CalendarRange/CalendarRange.js.map +1 -1
- package/dist/cjs/components/ChipsSelect/ChipsSelect.js +1 -1
- package/dist/cjs/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/cjs/components/CustomScrollView/CustomScrollView.d.ts +4 -2
- package/dist/cjs/components/CustomScrollView/CustomScrollView.d.ts.map +1 -1
- package/dist/cjs/components/CustomScrollView/CustomScrollView.js +17 -5
- package/dist/cjs/components/CustomScrollView/CustomScrollView.js.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.d.ts +4 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cjs/components/FormLayout/FormLayout.d.ts +3 -3
- package/dist/cjs/components/FormLayout/FormLayout.d.ts.map +1 -1
- package/dist/cjs/components/FormLayout/FormLayout.js +5 -2
- package/dist/cjs/components/FormLayout/FormLayout.js.map +1 -1
- package/dist/cjs/components/Gallery/Gallery.d.ts.map +1 -1
- package/dist/cjs/components/Gallery/Gallery.js +3 -10
- package/dist/cjs/components/Gallery/Gallery.js.map +1 -1
- package/dist/cjs/components/Gallery/hooks.d.ts +2 -0
- package/dist/cjs/components/Gallery/hooks.d.ts.map +1 -0
- package/dist/cjs/components/Gallery/hooks.js +52 -0
- package/dist/cjs/components/Gallery/hooks.js.map +1 -0
- package/dist/cjs/components/HorizontalScroll/HorizontalScroll.d.ts.map +1 -1
- package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js +49 -20
- package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/cjs/components/ModalPageHeader/ModalPageHeader.d.ts +3 -3
- package/dist/cjs/components/ModalPageHeader/ModalPageHeader.d.ts.map +1 -1
- package/dist/cjs/components/ModalPageHeader/ModalPageHeader.js +5 -2
- package/dist/cjs/components/ModalPageHeader/ModalPageHeader.js.map +1 -1
- package/dist/cjs/components/ModalRoot/ModalRoot.js +6 -8
- package/dist/cjs/components/ModalRoot/ModalRoot.js.map +1 -1
- package/dist/cjs/components/VisuallyHiddenInput/VisuallyHiddenInput.d.ts +3 -3
- package/dist/cjs/components/VisuallyHiddenInput/VisuallyHiddenInput.d.ts.map +1 -1
- package/dist/cjs/components/VisuallyHiddenInput/VisuallyHiddenInput.js +6 -3
- package/dist/cjs/components/VisuallyHiddenInput/VisuallyHiddenInput.js.map +1 -1
- package/dist/cjs/hooks/useDirection.d.ts +39 -0
- package/dist/cjs/hooks/useDirection.d.ts.map +1 -0
- package/dist/cjs/hooks/useDirection.js +39 -0
- package/dist/cjs/hooks/useDirection.js.map +1 -0
- package/dist/cjs/lib/floating/adapters.d.ts +1 -1
- package/dist/cjs/lib/floating/adapters.d.ts.map +1 -1
- package/dist/cjs/lib/floating/adapters.js +1 -1
- package/dist/cjs/lib/floating/adapters.js.map +1 -1
- package/dist/cjs/lib/floating/index.d.ts +1 -1
- package/dist/cjs/lib/floating/index.d.ts.map +1 -1
- package/dist/cjs/lib/floating/index.js +1 -1
- package/dist/cjs/lib/floating/index.js.map +1 -1
- package/dist/cjs/lib/floating/types.d.ts +2 -2
- package/dist/cjs/lib/floating/types.d.ts.map +1 -1
- package/dist/components/Alert/Alert.d.ts +3 -3
- package/dist/components/Alert/Alert.d.ts.map +1 -1
- package/dist/components/Alert/Alert.js +5 -3
- package/dist/components/Alert/Alert.js.map +1 -1
- package/dist/components/CalendarRange/CalendarRange.d.ts +1 -1
- package/dist/components/CalendarRange/CalendarRange.d.ts.map +1 -1
- package/dist/components/CalendarRange/CalendarRange.js +1 -2
- package/dist/components/CalendarRange/CalendarRange.js.map +1 -1
- package/dist/components/ChipsSelect/ChipsSelect.js +1 -1
- package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/components/CustomScrollView/CustomScrollView.d.ts +4 -2
- package/dist/components/CustomScrollView/CustomScrollView.d.ts.map +1 -1
- package/dist/components/CustomScrollView/CustomScrollView.js +17 -5
- package/dist/components/CustomScrollView/CustomScrollView.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.d.ts +4 -1
- package/dist/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/components/FormLayout/FormLayout.d.ts +3 -3
- package/dist/components/FormLayout/FormLayout.d.ts.map +1 -1
- package/dist/components/FormLayout/FormLayout.js +5 -2
- package/dist/components/FormLayout/FormLayout.js.map +1 -1
- package/dist/components/Gallery/Gallery.d.ts.map +1 -1
- package/dist/components/Gallery/Gallery.js +3 -10
- package/dist/components/Gallery/Gallery.js.map +1 -1
- package/dist/components/Gallery/hooks.d.ts +2 -0
- package/dist/components/Gallery/hooks.d.ts.map +1 -0
- package/dist/components/Gallery/hooks.js +41 -0
- package/dist/components/Gallery/hooks.js.map +1 -0
- package/dist/components/HorizontalScroll/HorizontalScroll.d.ts.map +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.js +49 -20
- package/dist/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/components/ModalPageHeader/ModalPageHeader.d.ts +3 -3
- package/dist/components/ModalPageHeader/ModalPageHeader.d.ts.map +1 -1
- package/dist/components/ModalPageHeader/ModalPageHeader.js +5 -2
- package/dist/components/ModalPageHeader/ModalPageHeader.js.map +1 -1
- package/dist/components/ModalRoot/ModalRoot.js +6 -8
- package/dist/components/ModalRoot/ModalRoot.js.map +1 -1
- package/dist/components/VisuallyHiddenInput/VisuallyHiddenInput.d.ts +3 -3
- package/dist/components/VisuallyHiddenInput/VisuallyHiddenInput.d.ts.map +1 -1
- package/dist/components/VisuallyHiddenInput/VisuallyHiddenInput.js +6 -3
- package/dist/components/VisuallyHiddenInput/VisuallyHiddenInput.js.map +1 -1
- package/dist/components.css +6 -6
- package/dist/components.css.map +1 -1
- package/dist/components.js.tmp +3941 -2540
- package/dist/cssm/components/Alert/Alert.d.ts +3 -3
- package/dist/cssm/components/Alert/Alert.d.ts.map +1 -1
- package/dist/cssm/components/Alert/Alert.js +3 -2
- package/dist/cssm/components/Alert/Alert.js.map +1 -1
- package/dist/cssm/components/Button/Button.module.css +3 -1
- package/dist/cssm/components/CalendarRange/CalendarRange.d.ts +1 -1
- package/dist/cssm/components/CalendarRange/CalendarRange.d.ts.map +1 -1
- package/dist/cssm/components/CalendarRange/CalendarRange.js +1 -1
- package/dist/cssm/components/CalendarRange/CalendarRange.js.map +1 -1
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js +1 -1
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/cssm/components/CustomScrollView/CustomScrollView.d.ts +4 -2
- package/dist/cssm/components/CustomScrollView/CustomScrollView.d.ts.map +1 -1
- package/dist/cssm/components/CustomScrollView/CustomScrollView.js +4 -2
- package/dist/cssm/components/CustomScrollView/CustomScrollView.js.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.d.ts +4 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cssm/components/CustomSelectOption/CustomSelectOption.module.css +0 -5
- package/dist/cssm/components/FormLayout/FormLayout.d.ts +3 -3
- package/dist/cssm/components/FormLayout/FormLayout.d.ts.map +1 -1
- package/dist/cssm/components/FormLayout/FormLayout.js +4 -2
- package/dist/cssm/components/FormLayout/FormLayout.js.map +1 -1
- package/dist/cssm/components/Gallery/Gallery.d.ts.map +1 -1
- package/dist/cssm/components/Gallery/Gallery.js +2 -7
- package/dist/cssm/components/Gallery/Gallery.js.map +1 -1
- package/dist/cssm/components/Gallery/hooks.d.ts +2 -0
- package/dist/cssm/components/Gallery/hooks.d.ts.map +1 -0
- package/dist/cssm/components/Gallery/hooks.js +39 -0
- package/dist/cssm/components/Gallery/hooks.js.map +1 -0
- package/dist/cssm/components/Group/Group.module.css +2 -2
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.d.ts.map +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js +48 -19
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/cssm/components/ModalPage/ModalPage.module.css +1 -4
- package/dist/cssm/components/ModalPageHeader/ModalPageHeader.d.ts +3 -3
- package/dist/cssm/components/ModalPageHeader/ModalPageHeader.d.ts.map +1 -1
- package/dist/cssm/components/ModalPageHeader/ModalPageHeader.js +4 -2
- package/dist/cssm/components/ModalPageHeader/ModalPageHeader.js.map +1 -1
- package/dist/cssm/components/ModalRoot/ModalRoot.js +6 -8
- package/dist/cssm/components/ModalRoot/ModalRoot.js.map +1 -1
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.module.css +7 -1
- package/dist/cssm/components/Snackbar/Snackbar.module.css +1 -1
- package/dist/cssm/components/VisuallyHiddenInput/VisuallyHiddenInput.d.ts +3 -3
- package/dist/cssm/components/VisuallyHiddenInput/VisuallyHiddenInput.d.ts.map +1 -1
- package/dist/cssm/components/VisuallyHiddenInput/VisuallyHiddenInput.js +4 -2
- package/dist/cssm/components/VisuallyHiddenInput/VisuallyHiddenInput.js.map +1 -1
- package/dist/cssm/hooks/useDirection.d.ts +39 -0
- package/dist/cssm/hooks/useDirection.d.ts.map +1 -0
- package/dist/cssm/hooks/useDirection.js +55 -0
- package/dist/cssm/hooks/useDirection.js.map +1 -0
- package/dist/cssm/lib/floating/adapters.d.ts +1 -1
- package/dist/cssm/lib/floating/adapters.d.ts.map +1 -1
- package/dist/cssm/lib/floating/adapters.js +1 -1
- package/dist/cssm/lib/floating/adapters.js.map +1 -1
- package/dist/cssm/lib/floating/index.d.ts +1 -1
- package/dist/cssm/lib/floating/index.d.ts.map +1 -1
- package/dist/cssm/lib/floating/index.js +1 -1
- package/dist/cssm/lib/floating/index.js.map +1 -1
- package/dist/cssm/lib/floating/types.d.ts +2 -2
- package/dist/cssm/lib/floating/types.d.ts.map +1 -1
- package/dist/cssm/lib/floating/types.js.map +1 -1
- package/dist/hooks/useDirection.d.ts +39 -0
- package/dist/hooks/useDirection.d.ts.map +1 -0
- package/dist/hooks/useDirection.js +56 -0
- package/dist/hooks/useDirection.js.map +1 -0
- package/dist/lib/floating/adapters.d.ts +1 -1
- package/dist/lib/floating/adapters.d.ts.map +1 -1
- package/dist/lib/floating/adapters.js +1 -1
- package/dist/lib/floating/adapters.js.map +1 -1
- package/dist/lib/floating/index.d.ts +1 -1
- package/dist/lib/floating/index.d.ts.map +1 -1
- package/dist/lib/floating/index.js +1 -1
- package/dist/lib/floating/index.js.map +1 -1
- package/dist/lib/floating/types.d.ts +2 -2
- package/dist/lib/floating/types.d.ts.map +1 -1
- package/dist/lib/floating/types.js.map +1 -1
- package/dist/vkui.css +6 -6
- package/dist/vkui.css.map +1 -1
- package/dist/vkui.js.tmp +3941 -2540
- package/package.json +2 -2
- package/src/components/Alert/Alert.tsx +10 -3
- package/src/components/Button/Button.module.css +3 -1
- package/src/components/CalendarRange/CalendarRange.tsx +0 -1
- package/src/components/ChipsSelect/ChipsSelect.tsx +1 -1
- package/src/components/CustomScrollView/CustomScrollView.tsx +13 -2
- package/src/components/CustomSelect/CustomSelect.tsx +5 -1
- package/src/components/CustomSelectOption/CustomSelectOption.module.css +0 -5
- package/src/components/FormLayout/FormLayout.tsx +8 -3
- package/src/components/Gallery/Gallery.tsx +2 -6
- package/src/components/Gallery/hooks.ts +39 -0
- package/src/components/Group/Group.module.css +2 -2
- package/src/components/HorizontalScroll/HorizontalScroll.tsx +54 -20
- package/src/components/ModalPage/ModalPage.module.css +1 -4
- package/src/components/ModalPageHeader/ModalPageHeader.tsx +8 -4
- package/src/components/ModalRoot/ModalRoot.tsx +6 -5
- package/src/components/PanelHeaderButton/PanelHeaderButton.module.css +6 -1
- package/src/components/Snackbar/Snackbar.module.css +1 -1
- package/src/components/VisuallyHiddenInput/VisuallyHiddenInput.tsx +6 -2
- package/src/hooks/useDirection.ts +63 -0
- package/src/lib/floating/adapters.ts +1 -1
- package/src/lib/floating/index.ts +1 -1
- package/src/lib/floating/types.ts +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute } from '../../types';
|
|
2
|
+
import { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute, HasRootRef } from '../../types';
|
|
3
3
|
import { ButtonProps } from '../Button/Button';
|
|
4
4
|
import { AlertActionProps } from './AlertAction';
|
|
5
5
|
type AlertActionMode = 'cancel' | 'destructive' | 'default';
|
|
@@ -9,7 +9,7 @@ export interface AlertActionInterface extends Pick<ButtonProps, 'Component'>, An
|
|
|
9
9
|
autoClose?: boolean;
|
|
10
10
|
mode: AlertActionMode;
|
|
11
11
|
}
|
|
12
|
-
export interface AlertProps extends React.HTMLAttributes<HTMLElement> {
|
|
12
|
+
export interface AlertProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement> {
|
|
13
13
|
actionsLayout?: 'vertical' | 'horizontal';
|
|
14
14
|
actionsAlign?: AlignType;
|
|
15
15
|
actions?: AlertActionInterface[];
|
|
@@ -30,6 +30,6 @@ export interface AlertProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
30
30
|
/**
|
|
31
31
|
* @see https://vkcom.github.io/VKUI/#/Alert
|
|
32
32
|
*/
|
|
33
|
-
export declare const Alert: ({ actions, actionsLayout, children, className, style, text, header, onClose, dismissLabel, renderAction, actionsAlign, dismissButtonMode, ...restProps }: AlertProps) => React.JSX.Element;
|
|
33
|
+
export declare const Alert: ({ actions, actionsLayout, children, className, style, text, header, onClose, dismissLabel, renderAction, actionsAlign, dismissButtonMode, getRootRef, ...restProps }: AlertProps) => React.JSX.Element;
|
|
34
34
|
export {};
|
|
35
35
|
//# sourceMappingURL=Alert.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEhG,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAK/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAKjD,KAAK,eAAe,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,CAAC;AAE5D,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,EACpC,wBAAwB,EACxB,gBAAgB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC;IAC/F,aAAa,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAC1C,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC1C;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,yKAef,UAAU,sBAmHZ,CAAC"}
|
|
@@ -30,7 +30,7 @@ var _PopoutWrapper = require("../PopoutWrapper/PopoutWrapper");
|
|
|
30
30
|
var _AlertActions = require("./AlertActions");
|
|
31
31
|
var _AlertTypography = require("./AlertTypography");
|
|
32
32
|
var Alert = function(_param) {
|
|
33
|
-
var _param_actions = _param.actions, actions = _param_actions === void 0 ? [] : _param_actions, _param_actionsLayout = _param.actionsLayout, actionsLayout = _param_actionsLayout === void 0 ? "horizontal" : _param_actionsLayout, children = _param.children, className = _param.className, style = _param.style, text = _param.text, header = _param.header, onClose = _param.onClose, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Закрыть предупреждение" : _param_dismissLabel, renderAction = _param.renderAction, actionsAlign = _param.actionsAlign, _param_dismissButtonMode = _param.dismissButtonMode, dismissButtonMode = _param_dismissButtonMode === void 0 ? "outside" : _param_dismissButtonMode, restProps = _object_without_properties._(_param, [
|
|
33
|
+
var _param_actions = _param.actions, actions = _param_actions === void 0 ? [] : _param_actions, _param_actionsLayout = _param.actionsLayout, actionsLayout = _param_actionsLayout === void 0 ? "horizontal" : _param_actionsLayout, children = _param.children, className = _param.className, style = _param.style, text = _param.text, header = _param.header, onClose = _param.onClose, _param_dismissLabel = _param.dismissLabel, dismissLabel = _param_dismissLabel === void 0 ? "Закрыть предупреждение" : _param_dismissLabel, renderAction = _param.renderAction, actionsAlign = _param.actionsAlign, _param_dismissButtonMode = _param.dismissButtonMode, dismissButtonMode = _param_dismissButtonMode === void 0 ? "outside" : _param_dismissButtonMode, getRootRef = _param.getRootRef, restProps = _object_without_properties._(_param, [
|
|
34
34
|
"actions",
|
|
35
35
|
"actionsLayout",
|
|
36
36
|
"children",
|
|
@@ -42,7 +42,8 @@ var Alert = function(_param) {
|
|
|
42
42
|
"dismissLabel",
|
|
43
43
|
"renderAction",
|
|
44
44
|
"actionsAlign",
|
|
45
|
-
"dismissButtonMode"
|
|
45
|
+
"dismissButtonMode",
|
|
46
|
+
"getRootRef"
|
|
46
47
|
]);
|
|
47
48
|
var generatedId = (0, _useId.useId)();
|
|
48
49
|
var headerId = "vkui-alert-".concat(generatedId, "-header");
|
|
@@ -91,7 +92,8 @@ var Alert = function(_param) {
|
|
|
91
92
|
className: className,
|
|
92
93
|
closing: closing,
|
|
93
94
|
style: style,
|
|
94
|
-
onClick: close
|
|
95
|
+
onClick: close,
|
|
96
|
+
getRootRef: getRootRef
|
|
95
97
|
}, /*#__PURE__*/ _react.createElement(_FocusTrap.FocusTrap, _object_spread_props._(_object_spread._({}, restProps), {
|
|
96
98
|
getRootRef: elementRef,
|
|
97
99
|
onClick: _utils.stopPropagation,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useId } from '../../hooks/useId';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { AlertActionProps } from './AlertAction';\nimport { AlertActions } from './AlertActions';\nimport { AlertHeader, AlertText } from './AlertTypography';\nimport styles from './Alert.module.css';\n\ntype AlertActionMode = 'cancel' | 'destructive' | 'default';\n\nexport interface AlertActionInterface\n extends Pick<ButtonProps, 'Component'>,\n AnchorHTMLAttributesOnly,\n HasDataAttribute {\n title: string;\n action?: VoidFunction;\n autoClose?: boolean;\n mode: AlertActionMode;\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n actionsLayout?: 'vertical' | 'horizontal';\n actionsAlign?: AlignType;\n actions?: AlertActionInterface[];\n renderAction?: (props: AlertActionProps) => React.ReactNode;\n header?: React.ReactNode;\n text?: React.ReactNode;\n onClose: VoidFunction;\n\n /**\n * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n */\n dismissLabel?: string;\n /**\n * Расположение кнопки закрытия (внутри и вне `popout'a`)\n * Доступно только в `compact`-режиме, не отображается на `iOS`\n */\n dismissButtonMode?: 'inside' | 'outside';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n actions = [],\n actionsLayout = 'horizontal',\n children,\n className,\n style,\n text,\n header,\n onClose,\n dismissLabel = 'Закрыть предупреждение',\n renderAction,\n actionsAlign,\n dismissButtonMode = 'outside',\n ...restProps\n}: AlertProps) => {\n const generatedId = useId();\n\n const headerId = `vkui-alert-${generatedId}-header`;\n const textId = `vkui-alert-${generatedId}-text`;\n\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n const { waitTransitionFinish } = useWaitTransitionFinish();\n\n const [closing, setClosing] = React.useState(false);\n const isDismissButtonVisible = isDesktop && platform !== Platform.IOS;\n\n const elementRef = React.useRef<HTMLDivElement>(null);\n\n const timeout = platform === Platform.IOS ? 300 : 200;\n\n const close = React.useCallback(() => {\n setClosing(true);\n waitTransitionFinish(\n elementRef.current,\n (e?: TransitionEvent) => {\n if (!e || e.propertyName === 'opacity') {\n onClose();\n }\n },\n timeout,\n );\n }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n const onItemClick = React.useCallback(\n (item: AlertActionInterface) => {\n const { action, autoClose } = item;\n\n if (autoClose) {\n setClosing(true);\n waitTransitionFinish(\n elementRef.current,\n (e?: TransitionEvent) => {\n if (!e || e.propertyName === 'opacity') {\n onClose();\n action && action();\n }\n },\n timeout,\n );\n } else {\n action && action();\n }\n },\n [elementRef, waitTransitionFinish, onClose, timeout],\n );\n\n useScrollLock();\n\n return (\n <PopoutWrapper
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useId } from '../../hooks/useId';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute, HasRootRef } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { AlertActionProps } from './AlertAction';\nimport { AlertActions } from './AlertActions';\nimport { AlertHeader, AlertText } from './AlertTypography';\nimport styles from './Alert.module.css';\n\ntype AlertActionMode = 'cancel' | 'destructive' | 'default';\n\nexport interface AlertActionInterface\n extends Pick<ButtonProps, 'Component'>,\n AnchorHTMLAttributesOnly,\n HasDataAttribute {\n title: string;\n action?: VoidFunction;\n autoClose?: boolean;\n mode: AlertActionMode;\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement> {\n actionsLayout?: 'vertical' | 'horizontal';\n actionsAlign?: AlignType;\n actions?: AlertActionInterface[];\n renderAction?: (props: AlertActionProps) => React.ReactNode;\n header?: React.ReactNode;\n text?: React.ReactNode;\n onClose: VoidFunction;\n\n /**\n * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n */\n dismissLabel?: string;\n /**\n * Расположение кнопки закрытия (внутри и вне `popout'a`)\n * Доступно только в `compact`-режиме, не отображается на `iOS`\n */\n dismissButtonMode?: 'inside' | 'outside';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n actions = [],\n actionsLayout = 'horizontal',\n children,\n className,\n style,\n text,\n header,\n onClose,\n dismissLabel = 'Закрыть предупреждение',\n renderAction,\n actionsAlign,\n dismissButtonMode = 'outside',\n getRootRef,\n ...restProps\n}: AlertProps) => {\n const generatedId = useId();\n\n const headerId = `vkui-alert-${generatedId}-header`;\n const textId = `vkui-alert-${generatedId}-text`;\n\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n const { waitTransitionFinish } = useWaitTransitionFinish();\n\n const [closing, setClosing] = React.useState(false);\n const isDismissButtonVisible = isDesktop && platform !== Platform.IOS;\n\n const elementRef = React.useRef<HTMLDivElement>(null);\n\n const timeout = platform === Platform.IOS ? 300 : 200;\n\n const close = React.useCallback(() => {\n setClosing(true);\n waitTransitionFinish(\n elementRef.current,\n (e?: TransitionEvent) => {\n if (!e || e.propertyName === 'opacity') {\n onClose();\n }\n },\n timeout,\n );\n }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n const onItemClick = React.useCallback(\n (item: AlertActionInterface) => {\n const { action, autoClose } = item;\n\n if (autoClose) {\n setClosing(true);\n waitTransitionFinish(\n elementRef.current,\n (e?: TransitionEvent) => {\n if (!e || e.propertyName === 'opacity') {\n onClose();\n action && action();\n }\n },\n timeout,\n );\n } else {\n action && action();\n }\n },\n [elementRef, waitTransitionFinish, onClose, timeout],\n );\n\n useScrollLock();\n\n return (\n <PopoutWrapper\n className={className}\n closing={closing}\n style={style}\n onClick={close}\n getRootRef={getRootRef}\n >\n <FocusTrap\n {...restProps}\n getRootRef={elementRef}\n onClick={stopPropagation}\n onClose={close}\n timeout={timeout}\n className={classNames(\n styles['Alert'],\n platform === Platform.IOS && styles['Alert--ios'],\n platform === Platform.VKCOM && styles['Alert--vkcom'],\n closing && styles['Alert--closing'],\n isDesktop && styles['Alert--desktop'],\n )}\n role=\"alertdialog\"\n aria-modal\n aria-labelledby={headerId}\n aria-describedby={textId}\n >\n <div\n className={classNames(\n styles['Alert__content'],\n dismissButtonMode === 'inside' && styles['Alert__content--withButton'],\n )}\n >\n {hasReactNode(header) && <AlertHeader id={headerId}>{header}</AlertHeader>}\n {hasReactNode(text) && <AlertText id={textId}>{text}</AlertText>}\n {children}\n {isDismissButtonVisible && dismissButtonMode === 'inside' && (\n <IconButton\n aria-label={dismissLabel}\n className={classNames(styles['Alert__dismiss'], 'vkuiInternalAlert__dismiss')}\n onClick={close}\n hoverMode=\"opacity\"\n activeMode=\"opacity\"\n >\n <Icon20Cancel />\n </IconButton>\n )}\n </div>\n <AlertActions\n actions={actions}\n actionsAlign={actionsAlign}\n actionsLayout={actionsLayout}\n renderAction={renderAction}\n onItemClick={onItemClick}\n />\n {isDismissButtonVisible && dismissButtonMode === 'outside' && (\n <ModalDismissButton onClick={close} aria-label={dismissLabel} />\n )}\n </FocusTrap>\n </PopoutWrapper>\n );\n};\n"],"names":["Alert","actions","actionsLayout","children","className","style","text","header","onClose","dismissLabel","renderAction","actionsAlign","dismissButtonMode","getRootRef","restProps","generatedId","useId","headerId","textId","platform","usePlatform","isDesktop","useAdaptivityWithJSMediaQueries","waitTransitionFinish","useWaitTransitionFinish","React","useState","closing","setClosing","isDismissButtonVisible","Platform","IOS","elementRef","useRef","timeout","close","useCallback","current","e","propertyName","onItemClick","item","action","autoClose","useScrollLock","PopoutWrapper","onClick","FocusTrap","stopPropagation","classNames","VKCOM","role","aria-modal","aria-labelledby","aria-describedby","div","hasReactNode","AlertHeader","id","AlertText","IconButton","aria-label","hoverMode","activeMode","Icon20Cancel","AlertActions","ModalDismissButton"],"mappings":"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"}
|
|
@@ -16,5 +16,5 @@ export interface CalendarRangeProps extends Omit<HTMLAttributesWithRootRef<HTMLD
|
|
|
16
16
|
/**
|
|
17
17
|
* @see https://vkcom.github.io/VKUI/#/CalendarRange
|
|
18
18
|
*/
|
|
19
|
-
export declare const CalendarRange: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn,
|
|
19
|
+
export declare const CalendarRange: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn, disablePickers, prevMonthAriaLabel, nextMonthAriaLabel, changeMonthAriaLabel, changeYearAriaLabel, changeDayAriaLabel, prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, ...props }: CalendarRangeProps) => React.JSX.Element;
|
|
20
20
|
//# sourceMappingURL=CalendarRange.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarRange.d.ts","sourceRoot":"","sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAIvF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,IAAI,CACF,mBAAmB,EACjB,oBAAoB,GACpB,oBAAoB,GACpB,sBAAsB,GACtB,qBAAqB,GACrB,eAAe,GACf,eAAe,CAClB,EACD,IAAI,CAAC,iBAAiB,EAAE,2BAA2B,CAAC;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,QAAQ,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAC5C,iBAAiB,CAAC,CAAC,KAAK,EAAE,IAAI,GAAG,OAAO,CAAC;IACzC,OAAO,CAAC,IAAI,IAAI,CAAC;CAClB;AAUD;;GAEG;AACH,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"CalendarRange.d.ts","sourceRoot":"","sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAIvF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,IAAI,CACF,mBAAmB,EACjB,oBAAoB,GACpB,oBAAoB,GACpB,sBAAsB,GACtB,qBAAqB,GACrB,eAAe,GACf,eAAe,CAClB,EACD,IAAI,CAAC,iBAAiB,EAAE,2BAA2B,CAAC;IACtD,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,QAAQ,CAAC,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAC5C,iBAAiB,CAAC,CAAC,KAAK,EAAE,IAAI,GAAG,OAAO,CAAC;IACzC,OAAO,CAAC,IAAI,IAAI,CAAC;CAClB;AAUD;;GAEG;AACH,eAAO,MAAM,aAAa,wRAkBvB,kBAAkB,sBAwLpB,CAAC"}
|
|
@@ -27,7 +27,7 @@ var getIsDaySelected = function(day, value) {
|
|
|
27
27
|
return Boolean((0, _date.isWithinInterval)(day, (0, _date.startOfDay)(value[0]), (0, _date.endOfDay)(value[1])));
|
|
28
28
|
};
|
|
29
29
|
var CalendarRange = function(_param) {
|
|
30
|
-
var value = _param.value, onChange = _param.onChange, disablePast = _param.disablePast, disableFuture = _param.disableFuture, shouldDisableDate = _param.shouldDisableDate, onClose = _param.onClose, _param_weekStartsOn = _param.weekStartsOn, weekStartsOn = _param_weekStartsOn === void 0 ? 1 : _param_weekStartsOn,
|
|
30
|
+
var value = _param.value, onChange = _param.onChange, disablePast = _param.disablePast, disableFuture = _param.disableFuture, shouldDisableDate = _param.shouldDisableDate, onClose = _param.onClose, _param_weekStartsOn = _param.weekStartsOn, weekStartsOn = _param_weekStartsOn === void 0 ? 1 : _param_weekStartsOn, disablePickers = _param.disablePickers, prevMonthAriaLabel = _param.prevMonthAriaLabel, nextMonthAriaLabel = _param.nextMonthAriaLabel, changeMonthAriaLabel = _param.changeMonthAriaLabel, changeYearAriaLabel = _param.changeYearAriaLabel, _param_changeDayAriaLabel = _param.changeDayAriaLabel, changeDayAriaLabel = _param_changeDayAriaLabel === void 0 ? "Изменить день" : _param_changeDayAriaLabel, prevMonthIcon = _param.prevMonthIcon, nextMonthIcon = _param.nextMonthIcon, listenDayChangesForUpdate = _param.listenDayChangesForUpdate, props = _object_without_properties._(_param, [
|
|
31
31
|
"value",
|
|
32
32
|
"onChange",
|
|
33
33
|
"disablePast",
|
|
@@ -35,7 +35,6 @@ var CalendarRange = function(_param) {
|
|
|
35
35
|
"shouldDisableDate",
|
|
36
36
|
"onClose",
|
|
37
37
|
"weekStartsOn",
|
|
38
|
-
"getRootRef",
|
|
39
38
|
"disablePickers",
|
|
40
39
|
"prevMonthAriaLabel",
|
|
41
40
|
"nextMonthAriaLabel",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport {\n addMonths,\n endOfDay,\n isAfter,\n isBefore,\n isSameDay,\n isSameMonth,\n isWithinInterval,\n startOfDay,\n} from '../../lib/date';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport interface CalendarRangeProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n Pick<\n CalendarHeaderProps,\n | 'prevMonthAriaLabel'\n | 'nextMonthAriaLabel'\n | 'changeMonthAriaLabel'\n | 'changeYearAriaLabel'\n | 'prevMonthIcon'\n | 'nextMonthIcon'\n >,\n Pick<CalendarDaysProps, 'listenDayChangesForUpdate'> {\n value?: Array<Date | null>;\n disablePast?: boolean;\n disableFuture?: boolean;\n disablePickers?: boolean;\n changeDayAriaLabel?: string;\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n onChange?(value?: Array<Date | null>): void;\n shouldDisableDate?(value: Date): boolean;\n onClose?(): void;\n}\n\nconst getIsDaySelected = (day: Date, value?: Array<Date | null>) => {\n if (!value?.[0] || !value[1]) {\n return false;\n }\n\n return Boolean(isWithinInterval(day, startOfDay(value[0]), endOfDay(value[1])));\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n value,\n onChange,\n disablePast,\n disableFuture,\n shouldDisableDate,\n onClose,\n weekStartsOn = 1,\n getRootRef,\n disablePickers,\n prevMonthAriaLabel,\n nextMonthAriaLabel,\n changeMonthAriaLabel,\n changeYearAriaLabel,\n changeDayAriaLabel = 'Изменить день',\n prevMonthIcon,\n nextMonthIcon,\n listenDayChangesForUpdate,\n ...props\n}: CalendarRangeProps) => {\n const {\n viewDate,\n setViewDate,\n setPrevMonth,\n setNextMonth,\n focusedDay,\n setFocusedDay,\n isDayFocused,\n isDayDisabled,\n resetSelectedDay,\n } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n const [hintedDate, setHintedDate] = React.useState<Array<Date | null>>();\n const secondViewDate = addMonths(viewDate, 1);\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n event.preventDefault();\n }\n\n const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);\n\n if (\n newFocusedDay &&\n !isSameMonth(newFocusedDay, viewDate) &&\n !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n ) {\n setViewDate(newFocusedDay);\n }\n setFocusedDay(newFocusedDay);\n },\n [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n );\n\n const getNewValue = React.useCallback(\n (date: Date) => {\n if (!value) {\n return [date, null];\n }\n\n const start = value[0];\n const end = value[1];\n if ((start && isSameDay(date, start)) || (end && isSameDay(date, end))) {\n return [setTimeEqual(date, start), setTimeEqual(date, end)];\n } else if (start && isBefore(date, start)) {\n return [setTimeEqual(date, start), end];\n } else if (start && isAfter(date, start)) {\n return [start, setTimeEqual(date, end)];\n }\n\n return value;\n },\n [value],\n );\n\n const onDayChange = React.useCallback(\n (date: Date) => {\n onChange?.(getNewValue(date));\n setHintedDate(undefined);\n },\n [onChange, getNewValue],\n );\n\n const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n const isDayActive = React.useCallback(\n (day: Date) =>\n Boolean((value?.[0] && isSameDay(day, value[0])) || (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) || (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isHintedDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) || (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n [hintedDate],\n );\n\n const isDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDay(day, value[0]))),\n [value],\n );\n\n const isHintedDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) || (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n [hintedDate],\n );\n\n const onDayEnter = React.useCallback(\n (date: Date) => setHintedDate(getNewValue(date)),\n [setHintedDate, getNewValue],\n );\n\n const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n const isDayHinted = React.useCallback(\n (day: Date) => getIsDaySelected(day, hintedDate),\n [hintedDate],\n );\n\n return (\n <RootComponent {...props} baseClassName={styles['CalendarRange']}>\n <div className={styles['CalendarRange__inner']}>\n <CalendarHeader\n viewDate={viewDate}\n onChange={setViewDate}\n nextMonth={false}\n onPrevMonth={setPrevMonth}\n disablePickers={disablePickers}\n className={styles['CalendarRange__header']}\n prevMonthAriaLabel={prevMonthAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n changeMonthAriaLabel={changeMonthAriaLabel}\n changeYearAriaLabel={changeYearAriaLabel}\n prevMonthIcon={prevMonthIcon}\n />\n <CalendarDays\n viewDate={viewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n onKeyDown={handleKeyDown}\n isDayFocused={isDayFocused}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n aria-label={changeDayAriaLabel}\n />\n </div>\n <div className={styles['CalendarRange__inner']}>\n <CalendarHeader\n viewDate={secondViewDate}\n onChange={setViewDate}\n prevMonth={false}\n onNextMonth={setNextMonth}\n disablePickers={disablePickers}\n className={styles['CalendarRange__header']}\n prevMonthAriaLabel={prevMonthAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n changeMonthAriaLabel={changeMonthAriaLabel}\n changeYearAriaLabel={changeYearAriaLabel}\n nextMonthIcon={nextMonthIcon}\n />\n <CalendarDays\n viewDate={secondViewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n aria-label={changeDayAriaLabel}\n onKeyDown={handleKeyDown}\n isDayFocused={isDayFocused}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n tabIndex={0}\n onBlur={resetSelectedDay}\n />\n </div>\n </RootComponent>\n );\n};\n"],"names":["CalendarRange","getIsDaySelected","day","value","Boolean","isWithinInterval","startOfDay","endOfDay","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","getRootRef","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","props","useCalendar","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","React","useState","hintedDate","setHintedDate","secondViewDate","addMonths","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","getNewValue","date","start","end","isSameDay","setTimeEqual","isBefore","isAfter","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isLastDay","isHintedDaySelectionEnd","isDaySelectionStart","isFirstDay","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","RootComponent","baseClassName","div","className","CalendarHeader","nextMonth","onPrevMonth","CalendarDays","onKeyDown","aria-label","prevMonth","onNextMonth","tabIndex","onBlur"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport {\n addMonths,\n endOfDay,\n isAfter,\n isBefore,\n isSameDay,\n isSameMonth,\n isWithinInterval,\n startOfDay,\n} from '../../lib/date';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport interface CalendarRangeProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n Pick<\n CalendarHeaderProps,\n | 'prevMonthAriaLabel'\n | 'nextMonthAriaLabel'\n | 'changeMonthAriaLabel'\n | 'changeYearAriaLabel'\n | 'prevMonthIcon'\n | 'nextMonthIcon'\n >,\n Pick<CalendarDaysProps, 'listenDayChangesForUpdate'> {\n value?: Array<Date | null>;\n disablePast?: boolean;\n disableFuture?: boolean;\n disablePickers?: boolean;\n changeDayAriaLabel?: string;\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n onChange?(value?: Array<Date | null>): void;\n shouldDisableDate?(value: Date): boolean;\n onClose?(): void;\n}\n\nconst getIsDaySelected = (day: Date, value?: Array<Date | null>) => {\n if (!value?.[0] || !value[1]) {\n return false;\n }\n\n return Boolean(isWithinInterval(day, startOfDay(value[0]), endOfDay(value[1])));\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n value,\n onChange,\n disablePast,\n disableFuture,\n shouldDisableDate,\n onClose,\n weekStartsOn = 1,\n disablePickers,\n prevMonthAriaLabel,\n nextMonthAriaLabel,\n changeMonthAriaLabel,\n changeYearAriaLabel,\n changeDayAriaLabel = 'Изменить день',\n prevMonthIcon,\n nextMonthIcon,\n listenDayChangesForUpdate,\n ...props\n}: CalendarRangeProps) => {\n const {\n viewDate,\n setViewDate,\n setPrevMonth,\n setNextMonth,\n focusedDay,\n setFocusedDay,\n isDayFocused,\n isDayDisabled,\n resetSelectedDay,\n } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n const [hintedDate, setHintedDate] = React.useState<Array<Date | null>>();\n const secondViewDate = addMonths(viewDate, 1);\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n event.preventDefault();\n }\n\n const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);\n\n if (\n newFocusedDay &&\n !isSameMonth(newFocusedDay, viewDate) &&\n !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n ) {\n setViewDate(newFocusedDay);\n }\n setFocusedDay(newFocusedDay);\n },\n [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n );\n\n const getNewValue = React.useCallback(\n (date: Date) => {\n if (!value) {\n return [date, null];\n }\n\n const start = value[0];\n const end = value[1];\n if ((start && isSameDay(date, start)) || (end && isSameDay(date, end))) {\n return [setTimeEqual(date, start), setTimeEqual(date, end)];\n } else if (start && isBefore(date, start)) {\n return [setTimeEqual(date, start), end];\n } else if (start && isAfter(date, start)) {\n return [start, setTimeEqual(date, end)];\n }\n\n return value;\n },\n [value],\n );\n\n const onDayChange = React.useCallback(\n (date: Date) => {\n onChange?.(getNewValue(date));\n setHintedDate(undefined);\n },\n [onChange, getNewValue],\n );\n\n const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n const isDayActive = React.useCallback(\n (day: Date) =>\n Boolean((value?.[0] && isSameDay(day, value[0])) || (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) || (value?.[1] && isSameDay(day, value[1]))),\n [value],\n );\n\n const isHintedDaySelectionEnd = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isLastDay(day, dayOfWeek) || (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n [hintedDate],\n );\n\n const isDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDay(day, value[0]))),\n [value],\n );\n\n const isHintedDaySelectionStart = React.useCallback(\n (day: Date, dayOfWeek: number) =>\n Boolean(isFirstDay(day, dayOfWeek) || (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n [hintedDate],\n );\n\n const onDayEnter = React.useCallback(\n (date: Date) => setHintedDate(getNewValue(date)),\n [setHintedDate, getNewValue],\n );\n\n const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n const isDayHinted = React.useCallback(\n (day: Date) => getIsDaySelected(day, hintedDate),\n [hintedDate],\n );\n\n return (\n <RootComponent {...props} baseClassName={styles['CalendarRange']}>\n <div className={styles['CalendarRange__inner']}>\n <CalendarHeader\n viewDate={viewDate}\n onChange={setViewDate}\n nextMonth={false}\n onPrevMonth={setPrevMonth}\n disablePickers={disablePickers}\n className={styles['CalendarRange__header']}\n prevMonthAriaLabel={prevMonthAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n changeMonthAriaLabel={changeMonthAriaLabel}\n changeYearAriaLabel={changeYearAriaLabel}\n prevMonthIcon={prevMonthIcon}\n />\n <CalendarDays\n viewDate={viewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n onKeyDown={handleKeyDown}\n isDayFocused={isDayFocused}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n aria-label={changeDayAriaLabel}\n />\n </div>\n <div className={styles['CalendarRange__inner']}>\n <CalendarHeader\n viewDate={secondViewDate}\n onChange={setViewDate}\n prevMonth={false}\n onNextMonth={setNextMonth}\n disablePickers={disablePickers}\n className={styles['CalendarRange__header']}\n prevMonthAriaLabel={prevMonthAriaLabel}\n nextMonthAriaLabel={nextMonthAriaLabel}\n changeMonthAriaLabel={changeMonthAriaLabel}\n changeYearAriaLabel={changeYearAriaLabel}\n nextMonthIcon={nextMonthIcon}\n />\n <CalendarDays\n viewDate={secondViewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n aria-label={changeDayAriaLabel}\n onKeyDown={handleKeyDown}\n isDayFocused={isDayFocused}\n onDayChange={onDayChange}\n isDaySelected={isDaySelected}\n isDayActive={isDayActive}\n isDaySelectionEnd={isDaySelectionEnd}\n isDaySelectionStart={isDaySelectionStart}\n isDayHinted={isDayHinted}\n onDayEnter={onDayEnter}\n onDayLeave={onDayLeave}\n isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n isHintedDaySelectionStart={isHintedDaySelectionStart}\n isDayDisabled={isDayDisabled}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n tabIndex={0}\n onBlur={resetSelectedDay}\n />\n </div>\n </RootComponent>\n );\n};\n"],"names":["CalendarRange","getIsDaySelected","day","value","Boolean","isWithinInterval","startOfDay","endOfDay","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","disablePickers","prevMonthAriaLabel","nextMonthAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","props","useCalendar","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","React","useState","hintedDate","setHintedDate","secondViewDate","addMonths","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","getNewValue","date","start","end","isSameDay","setTimeEqual","isBefore","isAfter","onDayChange","undefined","isDaySelected","isDayActive","isDaySelectionEnd","dayOfWeek","isLastDay","isHintedDaySelectionEnd","isDaySelectionStart","isFirstDay","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","RootComponent","baseClassName","div","className","CalendarHeader","nextMonth","onPrevMonth","CalendarDays","onKeyDown","aria-label","prevMonth","onNextMonth","tabIndex","onBlur"],"mappings":"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"}
|
|
@@ -81,7 +81,7 @@ var ChipsSelect = function(props) {
|
|
|
81
81
|
var document = (0, _dom.useDOM)().document;
|
|
82
82
|
var _React_useState = _sliced_to_array._(_react.useState(undefined), 2), popperPlacement = _React_useState[0], setPopperPlacement = _React_useState[1];
|
|
83
83
|
var scrollBoxRef = _react.useRef(null);
|
|
84
|
-
var rootRef = (0, _useExternRef.useExternRef)(
|
|
84
|
+
var rootRef = (0, _useExternRef.useExternRef)(getRootRef);
|
|
85
85
|
var _useChipsSelect1 = (0, _useChipsSelect.useChipsSelect)(propsWithDefault), fieldValue = _useChipsSelect1.fieldValue, _useChipsSelect_selectedOptions = _useChipsSelect1.selectedOptions, selectedOptions = _useChipsSelect_selectedOptions === void 0 ? [] : _useChipsSelect_selectedOptions, opened = _useChipsSelect1.opened, setOpened = _useChipsSelect1.setOpened, addOptionFromInput = _useChipsSelect1.addOptionFromInput, filteredOptions = _useChipsSelect1.filteredOptions, addOption = _useChipsSelect1.addOption, handleInputChange = _useChipsSelect1.handleInputChange, clearInput = _useChipsSelect1.clearInput, focusedOption = _useChipsSelect1.focusedOption, setFocusedOption = _useChipsSelect1.setFocusedOption, focusedOptionIndex = _useChipsSelect1.focusedOptionIndex, setFocusedOptionIndex = _useChipsSelect1.setFocusedOptionIndex;
|
|
86
86
|
var showCreatable = Boolean(creatable && creatableText && !filteredOptions.length && fieldValue);
|
|
87
87
|
var handleFocus = function(e) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useChipsSelect } from '../../hooks/useChipsSelect';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport { ChipsInputProps } from '../ChipsInput/ChipsInput';\nimport { ChipsInputBase, chipsInputDefaultProps } from '../ChipsInputBase/ChipsInputBase';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './ChipsSelect.module.css';\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n extends Omit<ChipsInputProps<Option>, 'after'> {\n popupDirection?: 'top' | 'bottom';\n options?: Option[];\n filterFn?:\n | false\n | ((\n value?: string,\n option?: Option,\n getOptionLabel?: Pick<ChipsInputProps<Option>, 'getOptionLabel'>['getOptionLabel'],\n ) => boolean);\n /**\n * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n */\n creatable?: boolean;\n /**\n * Отрисовка лоадера вместо списка опций в выпадающем списке\n */\n fetching?: boolean;\n renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n /**\n * Показывать или скрывать уже выбранные опции\n */\n showSelected?: boolean;\n /**\n * Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n */\n creatableText?: string;\n /**\n * Текст который показывается если список опций пуст\n */\n emptyText?: string;\n /**\n * Событие срабатывающее перед onChange\n */\n onChangeStart?: (e: React.MouseEvent | React.KeyboardEvent, option: Option) => void;\n /**\n * Закрытие выпадающего списка после выбора элемента\n */\n closeAfterSelect?: boolean;\n fixDropdownWidth?: boolean;\n forceDropdownPortal?: boolean;\n /**\n * Иконка раскрывающегося списка\n */\n icon?: React.ReactNode;\n /**\n * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n */\n addOnBlur?: boolean;\n}\n\ntype FocusActionType = 'next' | 'prev';\n\nconst FOCUS_ACTION_NEXT: FocusActionType = 'next';\nconst FOCUS_ACTION_PREV: FocusActionType = 'prev';\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n ...chipsInputDefaultProps,\n emptyText: 'Ничего не найдено',\n creatableText: 'Создать значение',\n onChangeStart: noop,\n creatable: false,\n fetching: false,\n showSelected: true,\n closeAfterSelect: true,\n options: [],\n filterFn: defaultFilterFn,\n renderOption(props) {\n return <CustomSelectOption {...props} />;\n },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<Option>) => {\n const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n const {\n style,\n onFocus,\n onBlur,\n onKeyDown,\n className,\n fetching,\n renderOption,\n emptyText,\n getRef,\n getRootRef,\n disabled,\n placeholder,\n tabIndex,\n getOptionValue,\n getOptionLabel,\n showSelected,\n getNewOptionData,\n renderChip,\n popupDirection,\n creatable,\n filterFn,\n inputValue,\n creatableText,\n closeAfterSelect,\n onChangeStart,\n before,\n icon,\n options,\n fixDropdownWidth,\n forceDropdownPortal,\n ...restProps\n } = propsWithDefault;\n\n const { document } = useDOM();\n\n const [popperPlacement, setPopperPlacement] = React.useState<Placement | undefined>(undefined);\n\n const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n const rootRef = useExternRef(getRef);\n const {\n fieldValue,\n selectedOptions = [],\n opened,\n setOpened,\n addOptionFromInput,\n filteredOptions,\n addOption,\n handleInputChange,\n clearInput,\n focusedOption,\n setFocusedOption,\n focusedOptionIndex,\n setFocusedOptionIndex,\n } = useChipsSelect(propsWithDefault);\n\n const showCreatable = Boolean(\n creatable && creatableText && !filteredOptions.length && fieldValue,\n );\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n setOpened(true);\n setFocusedOptionIndex(null);\n onFocus!(e);\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n onBlur!(e);\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!e.defaultPrevented && !creatable) {\n e.preventDefault();\n }\n };\n\n const handleClickOutside = (e: MouseEvent) => {\n const isClickOutsideFormField = !rootRef.current?.contains(e.target as Node);\n const isClickOutsideDropdown = !scrollBoxRef.current?.contains(e.target as Node);\n\n if (isClickOutsideFormField && isClickOutsideDropdown) {\n setOpened(false);\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = scrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n if (!item || !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n const { length } = filteredOptions;\n\n if (index < 0) {\n index = length - 1;\n } else if (index >= length) {\n index = 0;\n }\n\n if (index === oldIndex) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n index = index + 1;\n } else if (type === FOCUS_ACTION_PREV) {\n index = index - 1;\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown!(e);\n\n if (e.key === 'ArrowUp' && !e.defaultPrevented) {\n e.preventDefault();\n\n if (!opened) {\n setOpened(true);\n setFocusedOptionIndex(0);\n } else {\n focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n }\n }\n\n if (e.key === 'ArrowDown' && !e.defaultPrevented) {\n e.preventDefault();\n\n if (!opened) {\n setOpened(true);\n setFocusedOptionIndex(0);\n } else {\n focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n }\n }\n\n if (e.key === 'Enter' && !e.defaultPrevented && opened) {\n if (focusedOptionIndex != null) {\n const option = filteredOptions[focusedOptionIndex];\n\n if (option) {\n onChangeStart!(e, option);\n\n if (!e.defaultPrevented) {\n addOption(option);\n setFocusedOptionIndex(null);\n clearInput();\n closeAfterSelect && setOpened(false);\n e.preventDefault();\n }\n } else if (!creatable) {\n e.preventDefault();\n }\n } else if (!creatable) {\n e.preventDefault();\n }\n }\n\n if (['Escape', 'Tab'].includes(e.key) && !e.defaultPrevented && opened) {\n setOpened(false);\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n setFocusedOption(filteredOptions[focusedOptionIndex]);\n } else if (focusedOptionIndex === null || focusedOptionIndex === 0) {\n setFocusedOption(null);\n }\n }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n useGlobalEventListener(document, 'click', handleClickOutside);\n\n const renderChipWrapper = (renderChipProps: RenderChip<Option> | undefined) => {\n if (renderChipProps === undefined) {\n return null;\n }\n const onRemoveWrapper = (e: React.MouseEvent | undefined, value: ChipValue | undefined) => {\n e?.preventDefault();\n e?.stopPropagation();\n\n renderChipProps.onRemove?.(e, value);\n };\n\n return renderChip!({\n ...renderChipProps,\n onRemove: onRemoveWrapper,\n });\n };\n\n const isPopperDirectionTop = popperPlacement?.includes('top');\n\n const onPlacementChange = React.useCallback(\n (placement?: Placement) => {\n setPopperPlacement(placement);\n },\n [setPopperPlacement],\n );\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const toggleOpened = () => {\n setOpened((prevOpened) => !prevOpened);\n };\n\n return (\n <>\n <FormField\n getRootRef={rootRef}\n style={style}\n className={classNames(\n styles['ChipsSelect'],\n opened &&\n (isPopperDirectionTop\n ? styles['ChipsSelect--pop-up']\n : styles['ChipsSelect--pop-down']),\n className,\n )}\n disabled={disabled}\n role=\"application\"\n aria-disabled={disabled}\n aria-readonly={restProps.readOnly}\n after={\n <IconButton\n className={styles['ChipsSelect__dropdown']}\n activeMode=\"\"\n hoverMode=\"\"\n // TODO [>=6]: add label customization\n aria-label={opened ? 'Скрыть' : 'Развернуть'}\n onClick={toggleOpened}\n >\n {icon ?? <DropdownIcon className={styles['ChipsSelect__icon']} opened={opened} />}\n </IconButton>\n }\n before={before}\n >\n <ChipsInputBase\n {...restProps}\n tabIndex={tabIndex}\n value={selectedOptions}\n inputValue={fieldValue}\n getNewOptionData={getNewOptionData}\n getOptionLabel={getOptionLabel}\n getOptionValue={getOptionValue}\n renderChip={renderChipWrapper}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n getRef={getRef}\n disabled={disabled}\n onInputChange={handleInputChange}\n />\n </FormField>\n {opened && (\n <CustomSelectDropdown\n targetRef={rootRef}\n placement={popupDirection}\n scrollBoxRef={scrollBoxRef}\n onPlacementChange={onPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n sameWidth={fixDropdownWidth}\n forcePortal={forceDropdownPortal}\n >\n {showCreatable && (\n <CustomSelectOption\n hovered={focusedOptionIndex === 0}\n onMouseDown={addOptionFromInput}\n onMouseEnter={() => setFocusedOptionIndex(0)}\n >\n {creatableText}\n </CustomSelectOption>\n )}\n {!filteredOptions?.length && !showCreatable && emptyText ? (\n <Footnote className={styles['ChipsSelect__empty']}>{emptyText}</Footnote>\n ) : (\n filteredOptions.map((option: Option, index: number) => {\n const label = getOptionLabel!(option);\n const hovered =\n focusedOption && getOptionValue!(option) === getOptionValue!(focusedOption);\n const selected = selectedOptions.find((selectedOption: Option) => {\n return getOptionValue!(selectedOption) === getOptionValue!(option);\n });\n const value = getOptionValue!(option);\n\n return (\n <React.Fragment key={`${typeof value}-${value}`}>\n {renderOption!({\n option,\n hovered: Boolean(hovered),\n children: label,\n selected: !!selected,\n getRootRef: (e) => {\n if (e) {\n return (chipsSelectOptions[index] = e);\n }\n return undefined;\n },\n onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n onChangeStart?.(e, option);\n\n if (!e.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n clearInput();\n }\n },\n onMouseEnter: () => setFocusedOptionIndex(index),\n })}\n </React.Fragment>\n );\n })\n )}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["ChipsSelect","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","chipsInputDefaultProps","emptyText","creatableText","onChangeStart","noop","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","defaultFilterFn","renderOption","props","CustomSelectOption","propsWithDefault","style","onFocus","onBlur","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","useDOM","React","useState","undefined","popperPlacement","setPopperPlacement","scrollBoxRef","useRef","rootRef","useExternRef","useChipsSelect","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleBlur","defaultPrevented","preventDefault","handleClickOutside","isClickOutsideFormField","current","contains","target","isClickOutsideDropdown","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","option","includes","useEffect","useGlobalEventListener","renderChipWrapper","renderChipProps","onRemoveWrapper","value","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","FormField","classNames","role","aria-disabled","aria-readonly","readOnly","after","IconButton","activeMode","hoverMode","aria-label","onClick","DropdownIcon","ChipsInputBase","onInputChange","CustomSelectDropdown","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","Footnote","map","label","selected","find","selectedOption","Fragment","children"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useChipsSelect } from '../../hooks/useChipsSelect';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport { ChipsInputProps } from '../ChipsInput/ChipsInput';\nimport { ChipsInputBase, chipsInputDefaultProps } from '../ChipsInputBase/ChipsInputBase';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './ChipsSelect.module.css';\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n extends Omit<ChipsInputProps<Option>, 'after'> {\n popupDirection?: 'top' | 'bottom';\n options?: Option[];\n filterFn?:\n | false\n | ((\n value?: string,\n option?: Option,\n getOptionLabel?: Pick<ChipsInputProps<Option>, 'getOptionLabel'>['getOptionLabel'],\n ) => boolean);\n /**\n * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n */\n creatable?: boolean;\n /**\n * Отрисовка лоадера вместо списка опций в выпадающем списке\n */\n fetching?: boolean;\n renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n /**\n * Показывать или скрывать уже выбранные опции\n */\n showSelected?: boolean;\n /**\n * Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n */\n creatableText?: string;\n /**\n * Текст который показывается если список опций пуст\n */\n emptyText?: string;\n /**\n * Событие срабатывающее перед onChange\n */\n onChangeStart?: (e: React.MouseEvent | React.KeyboardEvent, option: Option) => void;\n /**\n * Закрытие выпадающего списка после выбора элемента\n */\n closeAfterSelect?: boolean;\n fixDropdownWidth?: boolean;\n forceDropdownPortal?: boolean;\n /**\n * Иконка раскрывающегося списка\n */\n icon?: React.ReactNode;\n /**\n * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n */\n addOnBlur?: boolean;\n}\n\ntype FocusActionType = 'next' | 'prev';\n\nconst FOCUS_ACTION_NEXT: FocusActionType = 'next';\nconst FOCUS_ACTION_PREV: FocusActionType = 'prev';\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n ...chipsInputDefaultProps,\n emptyText: 'Ничего не найдено',\n creatableText: 'Создать значение',\n onChangeStart: noop,\n creatable: false,\n fetching: false,\n showSelected: true,\n closeAfterSelect: true,\n options: [],\n filterFn: defaultFilterFn,\n renderOption(props) {\n return <CustomSelectOption {...props} />;\n },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<Option>) => {\n const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n const {\n style,\n onFocus,\n onBlur,\n onKeyDown,\n className,\n fetching,\n renderOption,\n emptyText,\n getRef,\n getRootRef,\n disabled,\n placeholder,\n tabIndex,\n getOptionValue,\n getOptionLabel,\n showSelected,\n getNewOptionData,\n renderChip,\n popupDirection,\n creatable,\n filterFn,\n inputValue,\n creatableText,\n closeAfterSelect,\n onChangeStart,\n before,\n icon,\n options,\n fixDropdownWidth,\n forceDropdownPortal,\n ...restProps\n } = propsWithDefault;\n\n const { document } = useDOM();\n\n const [popperPlacement, setPopperPlacement] = React.useState<Placement | undefined>(undefined);\n\n const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n const rootRef = useExternRef(getRootRef);\n const {\n fieldValue,\n selectedOptions = [],\n opened,\n setOpened,\n addOptionFromInput,\n filteredOptions,\n addOption,\n handleInputChange,\n clearInput,\n focusedOption,\n setFocusedOption,\n focusedOptionIndex,\n setFocusedOptionIndex,\n } = useChipsSelect(propsWithDefault);\n\n const showCreatable = Boolean(\n creatable && creatableText && !filteredOptions.length && fieldValue,\n );\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n setOpened(true);\n setFocusedOptionIndex(null);\n onFocus!(e);\n };\n\n const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n onBlur!(e);\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!e.defaultPrevented && !creatable) {\n e.preventDefault();\n }\n };\n\n const handleClickOutside = (e: MouseEvent) => {\n const isClickOutsideFormField = !rootRef.current?.contains(e.target as Node);\n const isClickOutsideDropdown = !scrollBoxRef.current?.contains(e.target as Node);\n\n if (isClickOutsideFormField && isClickOutsideDropdown) {\n setOpened(false);\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = scrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n if (!item || !dropdown) {\n return;\n }\n\n const dropdownHeight = dropdown.offsetHeight;\n const scrollTop = dropdown.scrollTop;\n const itemTop = item.offsetTop;\n const itemHeight = item.offsetHeight;\n\n if (center) {\n dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n } else if (itemTop < scrollTop) {\n dropdown.scrollTop = itemTop;\n }\n };\n\n const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n const { length } = filteredOptions;\n\n if (index < 0) {\n index = length - 1;\n } else if (index >= length) {\n index = 0;\n }\n\n if (index === oldIndex) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n index = index + 1;\n } else if (type === FOCUS_ACTION_PREV) {\n index = index - 1;\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown!(e);\n\n if (e.key === 'ArrowUp' && !e.defaultPrevented) {\n e.preventDefault();\n\n if (!opened) {\n setOpened(true);\n setFocusedOptionIndex(0);\n } else {\n focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n }\n }\n\n if (e.key === 'ArrowDown' && !e.defaultPrevented) {\n e.preventDefault();\n\n if (!opened) {\n setOpened(true);\n setFocusedOptionIndex(0);\n } else {\n focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n }\n }\n\n if (e.key === 'Enter' && !e.defaultPrevented && opened) {\n if (focusedOptionIndex != null) {\n const option = filteredOptions[focusedOptionIndex];\n\n if (option) {\n onChangeStart!(e, option);\n\n if (!e.defaultPrevented) {\n addOption(option);\n setFocusedOptionIndex(null);\n clearInput();\n closeAfterSelect && setOpened(false);\n e.preventDefault();\n }\n } else if (!creatable) {\n e.preventDefault();\n }\n } else if (!creatable) {\n e.preventDefault();\n }\n }\n\n if (['Escape', 'Tab'].includes(e.key) && !e.defaultPrevented && opened) {\n setOpened(false);\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n setFocusedOption(filteredOptions[focusedOptionIndex]);\n } else if (focusedOptionIndex === null || focusedOptionIndex === 0) {\n setFocusedOption(null);\n }\n }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n useGlobalEventListener(document, 'click', handleClickOutside);\n\n const renderChipWrapper = (renderChipProps: RenderChip<Option> | undefined) => {\n if (renderChipProps === undefined) {\n return null;\n }\n const onRemoveWrapper = (e: React.MouseEvent | undefined, value: ChipValue | undefined) => {\n e?.preventDefault();\n e?.stopPropagation();\n\n renderChipProps.onRemove?.(e, value);\n };\n\n return renderChip!({\n ...renderChipProps,\n onRemove: onRemoveWrapper,\n });\n };\n\n const isPopperDirectionTop = popperPlacement?.includes('top');\n\n const onPlacementChange = React.useCallback(\n (placement?: Placement) => {\n setPopperPlacement(placement);\n },\n [setPopperPlacement],\n );\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const toggleOpened = () => {\n setOpened((prevOpened) => !prevOpened);\n };\n\n return (\n <>\n <FormField\n getRootRef={rootRef}\n style={style}\n className={classNames(\n styles['ChipsSelect'],\n opened &&\n (isPopperDirectionTop\n ? styles['ChipsSelect--pop-up']\n : styles['ChipsSelect--pop-down']),\n className,\n )}\n disabled={disabled}\n role=\"application\"\n aria-disabled={disabled}\n aria-readonly={restProps.readOnly}\n after={\n <IconButton\n className={styles['ChipsSelect__dropdown']}\n activeMode=\"\"\n hoverMode=\"\"\n // TODO [>=6]: add label customization\n aria-label={opened ? 'Скрыть' : 'Развернуть'}\n onClick={toggleOpened}\n >\n {icon ?? <DropdownIcon className={styles['ChipsSelect__icon']} opened={opened} />}\n </IconButton>\n }\n before={before}\n >\n <ChipsInputBase\n {...restProps}\n tabIndex={tabIndex}\n value={selectedOptions}\n inputValue={fieldValue}\n getNewOptionData={getNewOptionData}\n getOptionLabel={getOptionLabel}\n getOptionValue={getOptionValue}\n renderChip={renderChipWrapper}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n getRef={getRef}\n disabled={disabled}\n onInputChange={handleInputChange}\n />\n </FormField>\n {opened && (\n <CustomSelectDropdown\n targetRef={rootRef}\n placement={popupDirection}\n scrollBoxRef={scrollBoxRef}\n onPlacementChange={onPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n sameWidth={fixDropdownWidth}\n forcePortal={forceDropdownPortal}\n >\n {showCreatable && (\n <CustomSelectOption\n hovered={focusedOptionIndex === 0}\n onMouseDown={addOptionFromInput}\n onMouseEnter={() => setFocusedOptionIndex(0)}\n >\n {creatableText}\n </CustomSelectOption>\n )}\n {!filteredOptions?.length && !showCreatable && emptyText ? (\n <Footnote className={styles['ChipsSelect__empty']}>{emptyText}</Footnote>\n ) : (\n filteredOptions.map((option: Option, index: number) => {\n const label = getOptionLabel!(option);\n const hovered =\n focusedOption && getOptionValue!(option) === getOptionValue!(focusedOption);\n const selected = selectedOptions.find((selectedOption: Option) => {\n return getOptionValue!(selectedOption) === getOptionValue!(option);\n });\n const value = getOptionValue!(option);\n\n return (\n <React.Fragment key={`${typeof value}-${value}`}>\n {renderOption!({\n option,\n hovered: Boolean(hovered),\n children: label,\n selected: !!selected,\n getRootRef: (e) => {\n if (e) {\n return (chipsSelectOptions[index] = e);\n }\n return undefined;\n },\n onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n onChangeStart?.(e, option);\n\n if (!e.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n clearInput();\n }\n },\n onMouseEnter: () => setFocusedOptionIndex(index),\n })}\n </React.Fragment>\n );\n })\n )}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["ChipsSelect","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","chipsInputDefaultProps","emptyText","creatableText","onChangeStart","noop","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","defaultFilterFn","renderOption","props","CustomSelectOption","propsWithDefault","style","onFocus","onBlur","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","useDOM","React","useState","undefined","popperPlacement","setPopperPlacement","scrollBoxRef","useRef","rootRef","useExternRef","useChipsSelect","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleBlur","defaultPrevented","preventDefault","handleClickOutside","isClickOutsideFormField","current","contains","target","isClickOutsideDropdown","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","option","includes","useEffect","useGlobalEventListener","renderChipWrapper","renderChipProps","onRemoveWrapper","value","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","FormField","classNames","role","aria-disabled","aria-readonly","readOnly","after","IconButton","activeMode","hoverMode","aria-label","onClick","DropdownIcon","ChipsInputBase","onInputChange","CustomSelectDropdown","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","Footnote","map","label","selected","find","selectedOption","Fragment","children"],"mappings":"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"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { DOMProps } from '../../lib/dom';
|
|
3
|
+
import type { HasRootRef } from '../../types';
|
|
3
4
|
import { TrackerOptionsProps } from './useTrackerVisibility';
|
|
4
|
-
export interface CustomScrollViewProps extends DOMProps,
|
|
5
|
+
export interface CustomScrollViewProps extends React.AllHTMLAttributes<HTMLDivElement>, DOMProps, // TODO [>=6]: remove
|
|
6
|
+
HasRootRef<HTMLDivElement>, TrackerOptionsProps {
|
|
5
7
|
windowResize?: boolean;
|
|
6
8
|
boxRef?: React.Ref<HTMLDivElement>;
|
|
7
9
|
className?: HTMLDivElement['className'];
|
|
8
10
|
onScroll?(event: React.UIEvent<HTMLDivElement>): void;
|
|
9
11
|
children: React.ReactNode;
|
|
10
12
|
}
|
|
11
|
-
export declare const CustomScrollView: ({ className, children, boxRef: externalBoxRef, windowResize, autoHideScrollbar, autoHideScrollbarDelay, onScroll, }: CustomScrollViewProps) => React.JSX.Element;
|
|
13
|
+
export declare const CustomScrollView: ({ className, children, boxRef: externalBoxRef, windowResize, autoHideScrollbar, autoHideScrollbarDelay, onScroll, getRootRef, ...restProps }: CustomScrollViewProps) => React.JSX.Element;
|
|
12
14
|
//# sourceMappingURL=CustomScrollView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,QAAQ,EAAU,MAAM,eAAe,CAAC;AAGjD,OAAO,EAAE,mBAAmB,EAAwB,MAAM,wBAAwB,CAAC;AAGnF,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"CustomScrollView.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,QAAQ,EAAU,MAAM,eAAe,CAAC;AAGjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAwB,MAAM,wBAAwB,CAAC;AAGnF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAC7C,QAAQ,EAAE,qBAAqB;AAC/B,UAAU,CAAC,cAAc,CAAC,EAC1B,mBAAmB;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,iJAU1B,qBAAqB,sBA6KvB,CAAC"}
|
|
@@ -9,6 +9,8 @@ Object.defineProperty(exports, "CustomScrollView", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
+
var _object_spread = require("@swc/helpers/_/_object_spread");
|
|
13
|
+
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
|
|
12
14
|
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
15
|
var _vkjs = require("@vkontakte/vkjs");
|
|
14
16
|
var _useEventListener = require("../../hooks/useEventListener");
|
|
@@ -17,8 +19,7 @@ var _dom = require("../../lib/dom");
|
|
|
17
19
|
var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
|
|
18
20
|
var _utils = require("../../lib/utils");
|
|
19
21
|
var _useTrackerVisibility = require("./useTrackerVisibility");
|
|
20
|
-
var CustomScrollView = function(
|
|
21
|
-
var className = param.className, children = param.children, externalBoxRef = param.boxRef, windowResize = param.windowResize, _param_autoHideScrollbar = param.autoHideScrollbar, autoHideScrollbar = _param_autoHideScrollbar === void 0 ? false : _param_autoHideScrollbar, autoHideScrollbarDelay = param.autoHideScrollbarDelay, onScroll = param.onScroll;
|
|
22
|
+
var CustomScrollView = function(_param) {
|
|
22
23
|
var subscribe = function subscribe(el) {
|
|
23
24
|
if (el) {
|
|
24
25
|
listeners.forEach(function(l) {
|
|
@@ -31,6 +32,16 @@ var CustomScrollView = function(param) {
|
|
|
31
32
|
return l.remove();
|
|
32
33
|
});
|
|
33
34
|
};
|
|
35
|
+
var className = _param.className, children = _param.children, externalBoxRef = _param.boxRef, windowResize = _param.windowResize, _param_autoHideScrollbar = _param.autoHideScrollbar, autoHideScrollbar = _param_autoHideScrollbar === void 0 ? false : _param_autoHideScrollbar, autoHideScrollbarDelay = _param.autoHideScrollbarDelay, onScroll = _param.onScroll, getRootRef = _param.getRootRef, restProps = _object_without_properties._(_param, [
|
|
36
|
+
"className",
|
|
37
|
+
"children",
|
|
38
|
+
"boxRef",
|
|
39
|
+
"windowResize",
|
|
40
|
+
"autoHideScrollbar",
|
|
41
|
+
"autoHideScrollbarDelay",
|
|
42
|
+
"onScroll",
|
|
43
|
+
"getRootRef"
|
|
44
|
+
]);
|
|
34
45
|
var _useDOM = (0, _dom.useDOM)(), document = _useDOM.document, window = _useDOM.window;
|
|
35
46
|
var ratio = _react.useRef(NaN);
|
|
36
47
|
var lastTrackerTop = _react.useRef(0);
|
|
@@ -139,9 +150,10 @@ var CustomScrollView = function(param) {
|
|
|
139
150
|
}
|
|
140
151
|
subscribe(document);
|
|
141
152
|
};
|
|
142
|
-
return /*#__PURE__*/ _react.createElement("div", {
|
|
143
|
-
className: (0, _vkjs.classNames)("vkuiCustomScrollView", className)
|
|
144
|
-
|
|
153
|
+
return /*#__PURE__*/ _react.createElement("div", _object_spread._({
|
|
154
|
+
className: (0, _vkjs.classNames)("vkuiCustomScrollView", className),
|
|
155
|
+
ref: getRootRef
|
|
156
|
+
}, restProps), /*#__PURE__*/ _react.createElement("div", {
|
|
145
157
|
className: "vkuiCustomScrollView__box",
|
|
146
158
|
tabIndex: -1,
|
|
147
159
|
ref: boxRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nexport interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {\n windowResize?: boolean;\n boxRef?: React.Ref<HTMLDivElement>;\n className?: HTMLDivElement['className'];\n onScroll?(event: React.UIEvent<HTMLDivElement>): void;\n children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n className,\n children,\n boxRef: externalBoxRef,\n windowResize,\n autoHideScrollbar = false,\n autoHideScrollbarDelay,\n onScroll,\n}: CustomScrollViewProps) => {\n const { document, window } = useDOM();\n\n const ratio = React.useRef(NaN);\n const lastTrackerTop = React.useRef(0);\n const clientHeight = React.useRef(0);\n const trackerHeight = React.useRef(0);\n const scrollHeight = React.useRef(0);\n const transformProp = React.useRef('');\n const startY = React.useRef(0);\n const trackerTop = React.useRef(0);\n\n const boxRef = useExternRef(externalBoxRef);\n\n const barY = React.useRef<HTMLDivElement>(null);\n const trackerY = React.useRef<HTMLDivElement>(null);\n\n const setTrackerPosition = (scrollTop: number) => {\n lastTrackerTop.current = scrollTop;\n if (trackerY.current !== null) {\n (trackerY.current.style as any)[transformProp.current] = `translate(0, ${scrollTop}px)`;\n }\n };\n\n const setTrackerPositionFromScroll = (scrollTop: number) => {\n const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n setTrackerPosition((clientHeight.current - trackerHeight.current) * progress);\n };\n\n const resize = () => {\n if (!boxRef.current || !barY.current || !trackerY.current) {\n return;\n }\n const localClientHeight = boxRef.current.clientHeight;\n const localScrollHeight = boxRef.current.scrollHeight;\n const localRatio = localClientHeight / localScrollHeight;\n const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n ratio.current = localRatio;\n clientHeight.current = localClientHeight;\n scrollHeight.current = localScrollHeight;\n trackerHeight.current = localTrackerHeight;\n\n if (localRatio >= 1) {\n barY.current.style.display = 'none';\n } else {\n barY.current.style.display = '';\n trackerY.current.style.height = `${localTrackerHeight}px`;\n setTrackerPositionFromScroll(boxRef.current.scrollTop);\n }\n };\n\n const resizeHandler = useEventListener('resize', resize);\n\n useIsomorphicLayoutEffect(() => {\n if (windowResize && window) {\n resizeHandler.add(window);\n }\n }, [windowResize, window]);\n\n useIsomorphicLayoutEffect(() => {\n let style = trackerY.current?.style;\n let prop = '';\n if (style !== undefined) {\n if ('transform' in style) {\n prop = 'transform';\n } else if ('webkitTransform' in style) {\n prop = 'webkitTransform';\n }\n }\n transformProp.current = prop;\n }, []);\n\n useIsomorphicLayoutEffect(resize);\n\n const setScrollPositionFromTracker = (trackerTop: number) => {\n const progress = trackerTop / (clientHeight.current - trackerHeight.current);\n if (boxRef.current !== null) {\n boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;\n }\n };\n\n const onMove = (e: MouseEvent) => {\n e.preventDefault();\n const diff = e.clientY - startY.current;\n const position = Math.min(\n Math.max(trackerTop.current + diff, 0),\n clientHeight.current - trackerHeight.current,\n );\n\n setScrollPositionFromTracker(position);\n };\n\n const {\n trackerVisible,\n onTargetScroll,\n onTrackerDragStart,\n onTrackerDragStop,\n onTrackerMouseEnter,\n onTrackerMouseLeave,\n } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n const onUp = (e: MouseEvent) => {\n e.preventDefault();\n\n if (autoHideScrollbar) {\n onTrackerDragStop();\n }\n\n unsubscribe();\n };\n\n const scroll = (event: React.UIEvent<HTMLDivElement>) => {\n if (ratio.current >= 1 || !boxRef.current) {\n return;\n }\n\n if (autoHideScrollbar) {\n onTargetScroll();\n }\n\n setTrackerPositionFromScroll(boxRef.current.scrollTop);\n onScroll?.(event);\n };\n\n const listeners = [useEventListener('mousemove', onMove), useEventListener('mouseup', onUp)];\n\n function subscribe(el: Document | undefined) {\n if (el) {\n listeners.forEach((l) => l.add(el));\n }\n }\n\n function unsubscribe() {\n listeners.forEach((l) => l.remove());\n }\n\n const onDragStart = (e: React.MouseEvent) => {\n e.preventDefault();\n startY.current = e.clientY;\n trackerTop.current = lastTrackerTop.current;\n\n if (autoHideScrollbar) {\n onTrackerDragStart();\n }\n\n subscribe(document);\n };\n\n return (\n <div className={classNames(styles['CustomScrollView'], className)}>\n <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>\n {children}\n </div>\n\n <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>\n <div\n className={classNames(\n styles['CustomScrollView__trackerY'],\n !trackerVisible && styles['CustomScrollView__trackerY--hidden'],\n )}\n onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n ref={trackerY}\n onMouseDown={onDragStart}\n />\n </div>\n </div>\n );\n};\n"],"names":["CustomScrollView","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","onScroll","subscribe","el","listeners","forEach","l","add","unsubscribe","remove","useDOM","document","window","ratio","React","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","useExternRef","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","useEventListener","useIsomorphicLayoutEffect","prop","undefined","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","useTrackerVisibility","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","onUp","scroll","event","onDragStart","div","classNames","tabIndex","ref","onClick","stopPropagation","onMouseEnter","onMouseLeave","onMouseDown"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;+DAlBU;oBACI;gCACM;4BACJ;mBACI;yCACS;qBACV;oCAC0B;AAWnD,IAAMA,mBAAmB;QAC9BC,kBAAAA,WACAC,iBAAAA,UACAC,AAAQC,uBAARD,QACAE,qBAAAA,+CACAC,mBAAAA,0DAAoB,kCACpBC,+BAAAA,wBACAC,iBAAAA;QAgISC,YAAT,SAASA,UAAUC,EAAwB;QACzC,IAAIA,IAAI;YACNC,UAAUC,OAAO,CAAC,SAACC;uBAAMA,EAAEC,GAAG,CAACJ;;QACjC;IACF;QAESK,cAAT,SAASA;QACPJ,UAAUC,OAAO,CAAC,SAACC;mBAAMA,EAAEG,MAAM;;IACnC;IAtIA,IAA6BC,UAAAA,IAAAA,WAAM,KAA3BC,WAAqBD,QAArBC,UAAUC,SAAWF,QAAXE;IAElB,IAAMC,QAAQC,OAAMC,MAAM,CAACC;IAC3B,IAAMC,iBAAiBH,OAAMC,MAAM,CAAC;IACpC,IAAMG,eAAeJ,OAAMC,MAAM,CAAC;IAClC,IAAMI,gBAAgBL,OAAMC,MAAM,CAAC;IACnC,IAAMK,eAAeN,OAAMC,MAAM,CAAC;IAClC,IAAMM,gBAAgBP,OAAMC,MAAM,CAAC;IACnC,IAAMO,SAASR,OAAMC,MAAM,CAAC;IAC5B,IAAMQ,aAAaT,OAAMC,MAAM,CAAC;IAEhC,IAAMnB,SAAS4B,IAAAA,0BAAY,EAAC3B;IAE5B,IAAM4B,OAAOX,OAAMC,MAAM,CAAiB;IAC1C,IAAMW,WAAWZ,OAAMC,MAAM,CAAiB;IAE9C,IAAMY,qBAAqB,SAACC;QAC1BX,eAAeY,OAAO,GAAGD;QACzB,IAAIF,SAASG,OAAO,KAAK,MAAM;YAC5BH,SAASG,OAAO,CAACC,KAAK,AAAQ,CAACT,cAAcQ,OAAO,CAAC,GAAG,AAAC,gBAAyB,OAAVD,WAAU;QACrF;IACF;IAEA,IAAMG,+BAA+B,SAACH;QACpC,IAAMI,WAAWJ,YAAaR,CAAAA,aAAaS,OAAO,GAAGX,aAAaW,OAAO,AAAD;QACxEF,mBAAmB,AAACT,CAAAA,aAAaW,OAAO,GAAGV,cAAcU,OAAO,AAAD,IAAKG;IACtE;IAEA,IAAMC,SAAS;QACb,IAAI,CAACrC,OAAOiC,OAAO,IAAI,CAACJ,KAAKI,OAAO,IAAI,CAACH,SAASG,OAAO,EAAE;YACzD;QACF;QACA,IAAMK,oBAAoBtC,OAAOiC,OAAO,CAACX,YAAY;QACrD,IAAMiB,oBAAoBvC,OAAOiC,OAAO,CAACT,YAAY;QACrD,IAAMgB,aAAaF,oBAAoBC;QACvC,IAAME,qBAAqBC,KAAKC,GAAG,CAACL,oBAAoBE,YAAY;QAEpEvB,MAAMgB,OAAO,GAAGO;QAChBlB,aAAaW,OAAO,GAAGK;QACvBd,aAAaS,OAAO,GAAGM;QACvBhB,cAAcU,OAAO,GAAGQ;QAExB,IAAID,cAAc,GAAG;YACnBX,KAAKI,OAAO,CAACC,KAAK,CAACU,OAAO,GAAG;QAC/B,OAAO;YACLf,KAAKI,OAAO,CAACC,KAAK,CAACU,OAAO,GAAG;YAC7Bd,SAASG,OAAO,CAACC,KAAK,CAACW,MAAM,GAAG,AAAC,GAAqB,OAAnBJ,oBAAmB;YACtDN,6BAA6BnC,OAAOiC,OAAO,CAACD,SAAS;QACvD;IACF;IAEA,IAAMc,gBAAgBC,IAAAA,kCAAgB,EAAC,UAAUV;IAEjDW,IAAAA,oDAAyB,EAAC;QACxB,IAAI9C,gBAAgBc,QAAQ;YAC1B8B,cAAcnC,GAAG,CAACK;QACpB;IACF,GAAG;QAACd;QAAcc;KAAO;IAEzBgC,IAAAA,oDAAyB,EAAC;YACZlB;QAAZ,IAAII,SAAQJ,oBAAAA,SAASG,OAAO,cAAhBH,wCAAAA,kBAAkBI,KAAK;QACnC,IAAIe,OAAO;QACX,IAAIf,UAAUgB,WAAW;YACvB,IAAI,eAAehB,OAAO;gBACxBe,OAAO;YACT,OAAO,IAAI,qBAAqBf,OAAO;gBACrCe,OAAO;YACT;QACF;QACAxB,cAAcQ,OAAO,GAAGgB;IAC1B,GAAG,EAAE;IAELD,IAAAA,oDAAyB,EAACX;IAE1B,IAAMc,+BAA+B,SAACxB;QACpC,IAAMS,WAAWT,aAAcL,CAAAA,aAAaW,OAAO,GAAGV,cAAcU,OAAO,AAAD;QAC1E,IAAIjC,OAAOiC,OAAO,KAAK,MAAM;YAC3BjC,OAAOiC,OAAO,CAACD,SAAS,GAAG,AAACR,CAAAA,aAAaS,OAAO,GAAGX,aAAaW,OAAO,AAAD,IAAKG;QAC7E;IACF;IAEA,IAAMgB,SAAS,SAACC;QACdA,EAAEC,cAAc;QAChB,IAAMC,OAAOF,EAAEG,OAAO,GAAG9B,OAAOO,OAAO;QACvC,IAAMwB,WAAWf,KAAKgB,GAAG,CACvBhB,KAAKC,GAAG,CAAChB,WAAWM,OAAO,GAAGsB,MAAM,IACpCjC,aAAaW,OAAO,GAAGV,cAAcU,OAAO;QAG9CkB,6BAA6BM;IAC/B;IAEA,IAOIE,yBAAAA,IAAAA,0CAAoB,EAACxD,mBAAmBC,yBAN1CwD,iBAMED,uBANFC,gBACAC,iBAKEF,uBALFE,gBACAC,qBAIEH,uBAJFG,oBACAC,oBAGEJ,uBAHFI,mBACAC,sBAEEL,uBAFFK,qBACAC,sBACEN,uBADFM;IAGF,IAAMC,OAAO,SAACb;QACZA,EAAEC,cAAc;QAEhB,IAAInD,mBAAmB;YACrB4D;QACF;QAEAnD;IACF;IAEA,IAAMuD,SAAS,SAACC;QACd,IAAInD,MAAMgB,OAAO,IAAI,KAAK,CAACjC,OAAOiC,OAAO,EAAE;YACzC;QACF;QAEA,IAAI9B,mBAAmB;YACrB0D;QACF;QAEA1B,6BAA6BnC,OAAOiC,OAAO,CAACD,SAAS;QACrD3B,qBAAAA,+BAAAA,SAAW+D;IACb;IAEA,IAAM5D,YAAY;QAACuC,IAAAA,kCAAgB,EAAC,aAAaK;QAASL,IAAAA,kCAAgB,EAAC,WAAWmB;KAAM;IAY5F,IAAMG,cAAc,SAAChB;QACnBA,EAAEC,cAAc;QAChB5B,OAAOO,OAAO,GAAGoB,EAAEG,OAAO;QAC1B7B,WAAWM,OAAO,GAAGZ,eAAeY,OAAO;QAE3C,IAAI9B,mBAAmB;YACrB2D;QACF;QAEAxD,UAAUS;IACZ;IAEA,qBACE,qBAACuD;QAAIxE,WAAWyE,IAAAA,gBAAU,0BAA6BzE;qBACrD,qBAACwE;QAAIxE,SAAS;QAAmC0E,UAAU,CAAC;QAAGC,KAAKzE;QAAQK,UAAU8D;OACnFpE,yBAGH,qBAACuE;QAAIxE,SAAS;QAAoC2E,KAAK5C;QAAM6C,SAASC,sBAAe;qBACnF,qBAACL;QACCxE,WAAWyE,IAAAA,gBAAU,oCAEnB,CAACX;QAEHgB,cAAczE,oBAAoB6D,sBAAsBd;QACxD2B,cAAc1E,oBAAoB8D,sBAAsBf;QACxDuB,KAAK3C;QACLgD,aAAaT;;AAKvB"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport type { HasRootRef } from '../../types';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nexport interface CustomScrollViewProps\n extends React.AllHTMLAttributes<HTMLDivElement>,\n DOMProps, // TODO [>=6]: remove\n HasRootRef<HTMLDivElement>,\n TrackerOptionsProps {\n windowResize?: boolean;\n boxRef?: React.Ref<HTMLDivElement>;\n className?: HTMLDivElement['className'];\n onScroll?(event: React.UIEvent<HTMLDivElement>): void;\n children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n className,\n children,\n boxRef: externalBoxRef,\n windowResize,\n autoHideScrollbar = false,\n autoHideScrollbarDelay,\n onScroll,\n getRootRef,\n ...restProps\n}: CustomScrollViewProps) => {\n const { document, window } = useDOM();\n\n const ratio = React.useRef(NaN);\n const lastTrackerTop = React.useRef(0);\n const clientHeight = React.useRef(0);\n const trackerHeight = React.useRef(0);\n const scrollHeight = React.useRef(0);\n const transformProp = React.useRef('');\n const startY = React.useRef(0);\n const trackerTop = React.useRef(0);\n\n const boxRef = useExternRef(externalBoxRef);\n\n const barY = React.useRef<HTMLDivElement>(null);\n const trackerY = React.useRef<HTMLDivElement>(null);\n\n const setTrackerPosition = (scrollTop: number) => {\n lastTrackerTop.current = scrollTop;\n if (trackerY.current !== null) {\n (trackerY.current.style as any)[transformProp.current] = `translate(0, ${scrollTop}px)`;\n }\n };\n\n const setTrackerPositionFromScroll = (scrollTop: number) => {\n const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n setTrackerPosition((clientHeight.current - trackerHeight.current) * progress);\n };\n\n const resize = () => {\n if (!boxRef.current || !barY.current || !trackerY.current) {\n return;\n }\n const localClientHeight = boxRef.current.clientHeight;\n const localScrollHeight = boxRef.current.scrollHeight;\n const localRatio = localClientHeight / localScrollHeight;\n const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n ratio.current = localRatio;\n clientHeight.current = localClientHeight;\n scrollHeight.current = localScrollHeight;\n trackerHeight.current = localTrackerHeight;\n\n if (localRatio >= 1) {\n barY.current.style.display = 'none';\n } else {\n barY.current.style.display = '';\n trackerY.current.style.height = `${localTrackerHeight}px`;\n setTrackerPositionFromScroll(boxRef.current.scrollTop);\n }\n };\n\n const resizeHandler = useEventListener('resize', resize);\n\n useIsomorphicLayoutEffect(() => {\n if (windowResize && window) {\n resizeHandler.add(window);\n }\n }, [windowResize, window]);\n\n useIsomorphicLayoutEffect(() => {\n let style = trackerY.current?.style;\n let prop = '';\n if (style !== undefined) {\n if ('transform' in style) {\n prop = 'transform';\n } else if ('webkitTransform' in style) {\n prop = 'webkitTransform';\n }\n }\n transformProp.current = prop;\n }, []);\n\n useIsomorphicLayoutEffect(resize);\n\n const setScrollPositionFromTracker = (trackerTop: number) => {\n const progress = trackerTop / (clientHeight.current - trackerHeight.current);\n if (boxRef.current !== null) {\n boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;\n }\n };\n\n const onMove = (e: MouseEvent) => {\n e.preventDefault();\n const diff = e.clientY - startY.current;\n const position = Math.min(\n Math.max(trackerTop.current + diff, 0),\n clientHeight.current - trackerHeight.current,\n );\n\n setScrollPositionFromTracker(position);\n };\n\n const {\n trackerVisible,\n onTargetScroll,\n onTrackerDragStart,\n onTrackerDragStop,\n onTrackerMouseEnter,\n onTrackerMouseLeave,\n } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n const onUp = (e: MouseEvent) => {\n e.preventDefault();\n\n if (autoHideScrollbar) {\n onTrackerDragStop();\n }\n\n unsubscribe();\n };\n\n const scroll = (event: React.UIEvent<HTMLDivElement>) => {\n if (ratio.current >= 1 || !boxRef.current) {\n return;\n }\n\n if (autoHideScrollbar) {\n onTargetScroll();\n }\n\n setTrackerPositionFromScroll(boxRef.current.scrollTop);\n onScroll?.(event);\n };\n\n const listeners = [useEventListener('mousemove', onMove), useEventListener('mouseup', onUp)];\n\n function subscribe(el: Document | undefined) {\n if (el) {\n listeners.forEach((l) => l.add(el));\n }\n }\n\n function unsubscribe() {\n listeners.forEach((l) => l.remove());\n }\n\n const onDragStart = (e: React.MouseEvent) => {\n e.preventDefault();\n startY.current = e.clientY;\n trackerTop.current = lastTrackerTop.current;\n\n if (autoHideScrollbar) {\n onTrackerDragStart();\n }\n\n subscribe(document);\n };\n\n return (\n <div\n className={classNames(styles['CustomScrollView'], className)}\n ref={getRootRef}\n {...restProps}\n >\n <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>\n {children}\n </div>\n\n <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>\n <div\n className={classNames(\n styles['CustomScrollView__trackerY'],\n !trackerVisible && styles['CustomScrollView__trackerY--hidden'],\n )}\n onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n ref={trackerY}\n onMouseDown={onDragStart}\n />\n </div>\n </div>\n );\n};\n"],"names":["CustomScrollView","subscribe","el","listeners","forEach","l","add","unsubscribe","remove","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","onScroll","getRootRef","restProps","useDOM","document","window","ratio","React","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","useExternRef","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","useEventListener","useIsomorphicLayoutEffect","prop","undefined","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","useTrackerVisibility","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","onUp","scroll","event","onDragStart","div","classNames","ref","tabIndex","onClick","stopPropagation","onMouseEnter","onMouseLeave","onMouseDown"],"mappings":"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"}
|
|
@@ -12,6 +12,9 @@ export interface CustomSelectOptionInterface {
|
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
[index: string]: any;
|
|
14
14
|
}
|
|
15
|
+
interface CustomSelectRenderOption extends CustomSelectOptionProps {
|
|
16
|
+
option?: CustomSelectOptionInterface;
|
|
17
|
+
}
|
|
15
18
|
export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerOptionsProps {
|
|
16
19
|
/**
|
|
17
20
|
* Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск
|
|
@@ -41,7 +44,7 @@ export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerO
|
|
|
41
44
|
* > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии
|
|
42
45
|
* опции.
|
|
43
46
|
*/
|
|
44
|
-
renderOption?: (props:
|
|
47
|
+
renderOption?: (props: CustomSelectRenderOption) => React.ReactNode;
|
|
45
48
|
/**
|
|
46
49
|
* Рендер-проп для кастомного рендера содержимого дропдауна.
|
|
47
50
|
* В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAE/E,OAAO,EAEL,uBAAuB,EACxB,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,OAAO,EAA2B,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAiFlG,KAAK,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC;AAE1E,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,iBAAiB,EAAE,cAAc,EAAE,mBAAmB;IACzF;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,CACd,CAAC,EAAE,KAAK,CAAC,WAAW,EACpB,OAAO,EAAE,2BAA2B,EAAE,KACnC,IAAI,GAAG,2BAA2B,EAAE,CAAC;IAC1C,OAAO,EAAE,2BAA2B,EAAE,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,GACL,CAAC,CACC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,2BAA2B,EACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,2BAA2B,CAAC,KAAK,MAAM,KACtE,OAAO,CAAC,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAE/E,OAAO,EAEL,uBAAuB,EACxB,MAAM,0CAA0C,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,OAAO,EAA2B,4BAA4B,EAAE,MAAM,2BAA2B,CAAC;AAiFlG,KAAK,WAAW,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC;AAE1E,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,UAAU,wBAAyB,SAAQ,uBAAuB;IAChE,MAAM,CAAC,EAAE,2BAA2B,CAAC;CACtC;AAED,MAAM,WAAW,WAAY,SAAQ,iBAAiB,EAAE,cAAc,EAAE,mBAAmB;IACzF;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,CACd,CAAC,EAAE,KAAK,CAAC,WAAW,EACpB,OAAO,EAAE,2BAA2B,EAAE,KACnC,IAAI,GAAG,2BAA2B,EAAE,CAAC;IAC1C,OAAO,EAAE,2BAA2B,EAAE,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,GACL,CAAC,CACC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,2BAA2B,EACnC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,2BAA2B,CAAC,KAAK,MAAM,KACtE,OAAO,CAAC,CAAC;IAClB,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,CAAC;IACpE;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAChE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAID;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,qBAsmB9C"}
|