1
This commit is contained in:
+4
@@ -0,0 +1,4 @@
|
||||
import type { ScreenMap } from '../../_util/responsiveObserver';
|
||||
declare function useBreakpoint(refreshOnChange: boolean, defaultScreens: null): ScreenMap | null;
|
||||
declare function useBreakpoint(refreshOnChange?: boolean, defaultScreens?: ScreenMap): ScreenMap;
|
||||
export default useBreakpoint;
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
"use strict";
|
||||
"use client";
|
||||
|
||||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = void 0;
|
||||
var _react = require("react");
|
||||
var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
|
||||
var _hooks = require("../../_util/hooks");
|
||||
var _responsiveObserver = _interopRequireDefault(require("../../_util/responsiveObserver"));
|
||||
function useBreakpoint(refreshOnChange = true, defaultScreens = {}) {
|
||||
const screensRef = (0, _react.useRef)(defaultScreens);
|
||||
const [, forceUpdate] = (0, _hooks.useForceUpdate)();
|
||||
const responsiveObserver = (0, _responsiveObserver.default)();
|
||||
(0, _useLayoutEffect.default)(() => {
|
||||
const token = responsiveObserver.subscribe(supportScreens => {
|
||||
screensRef.current = supportScreens;
|
||||
if (refreshOnChange) {
|
||||
forceUpdate();
|
||||
}
|
||||
});
|
||||
return () => responsiveObserver.unsubscribe(token);
|
||||
}, []);
|
||||
return screensRef.current;
|
||||
}
|
||||
var _default = exports.default = useBreakpoint;
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { ScreenMap } from '../../_util/responsiveObserver';
|
||||
import type { RowProps } from '../row';
|
||||
export type Gap = number | string | undefined;
|
||||
export default function useGutter(gutter: RowProps['gutter'], screens: ScreenMap | null): [Gap, Gap];
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = useGutter;
|
||||
var _is = require("../../_util/is");
|
||||
var _responsiveObserver = require("../../_util/responsiveObserver");
|
||||
function useGutter(gutter, screens) {
|
||||
const results = [undefined, undefined];
|
||||
const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, undefined];
|
||||
// By default use as `xs`
|
||||
const mergedScreens = screens || {
|
||||
xs: true,
|
||||
sm: true,
|
||||
md: true,
|
||||
lg: true,
|
||||
xl: true,
|
||||
xxl: true,
|
||||
xxxl: true
|
||||
};
|
||||
normalizedGutter.forEach((g, index) => {
|
||||
if ((0, _is.isPlainObject)(g)) {
|
||||
for (let i = 0; i < _responsiveObserver.responsiveArray.length; i++) {
|
||||
const breakpoint = _responsiveObserver.responsiveArray[i];
|
||||
if (mergedScreens[breakpoint] && g[breakpoint] !== undefined) {
|
||||
results[index] = g[breakpoint];
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
results[index] = g;
|
||||
}
|
||||
});
|
||||
return results;
|
||||
}
|
||||
Reference in New Issue
Block a user