x-ui-design 0.9.89 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/types/components/DatePicker/RangePicker/RangePicker.d.ts +1 -1
- package/dist/esm/types/components/Popover/Popover.d.ts +1 -1
- package/dist/esm/types/helpers/index.d.ts +0 -7
- package/dist/esm/types/hooks/usePosition.d.ts +15 -0
- package/dist/esm/types/types/datepicker.d.ts +2 -2
- package/dist/esm/types/types/dropdown.d.ts +3 -2
- package/dist/esm/types/types/index.d.ts +0 -1
- package/dist/esm/types/types/popover.d.ts +2 -4
- package/dist/esm/types/types/select.d.ts +1 -1
- package/dist/esm/types/utils/index.d.ts +0 -1
- package/dist/index.esm.js +290 -460
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +290 -460
- package/dist/index.js.map +1 -1
- package/lib/components/DatePicker/DatePicker.tsx +21 -23
- package/lib/components/DatePicker/RangePicker/RangePicker.tsx +26 -34
- package/lib/components/DatePicker/RangePicker/style.css +2 -1
- package/lib/components/DatePicker/TimePicker/TimePicker.tsx +46 -57
- package/lib/components/DatePicker/TimePicker/style.css +26 -9
- package/lib/components/DatePicker/style.css +1 -4
- package/lib/components/Dropdown/Dropdown.tsx +97 -97
- package/lib/components/Dropdown/style.css +76 -8
- package/lib/components/Menu/Item/Item.tsx +0 -4
- package/lib/components/Menu/Menu.tsx +6 -13
- package/lib/components/Menu/index.css +4 -5
- package/lib/components/Popover/Popover.tsx +53 -88
- package/lib/components/Popover/style.css +59 -1
- package/lib/components/Result/Result.tsx +1 -1
- package/lib/components/Select/Option/Option.tsx +1 -0
- package/lib/components/Select/Select.tsx +18 -19
- package/lib/helpers/index.ts +0 -51
- package/lib/hooks/usePosition.ts +206 -0
- package/lib/styles/global.css +3 -81
- package/lib/types/datepicker.ts +2 -2
- package/lib/types/dropdown.ts +5 -2
- package/lib/types/index.ts +1 -3
- package/lib/types/popover.ts +2 -4
- package/lib/types/select.ts +1 -1
- package/lib/utils/index.ts +0 -2
- package/package.json +1 -1
- package/src/app/globals.css +48 -0
- package/src/app/layout.tsx +1 -1
- package/src/app/page.tsx +24 -203
- package/dist/esm/types/hooks/usePopupPosition.d.ts +0 -17
- package/lib/hooks/usePopupPosition.ts +0 -266
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TRangePickerProps } from '../../../types/datepicker';
|
|
3
3
|
import './style.css';
|
|
4
|
-
declare const RangePicker: ({ prefixCls, value, onChange, placeholder, disabled, error, format, prefix, allowClear, inputReadOnly, size, picker, locale, disabledDate, onVisibleChange, onCalendarChange, style, className, separator, defaultValue, bordered, getPopupContainer, placement
|
|
4
|
+
declare const RangePicker: ({ prefixCls, value, onChange, placeholder, disabled, error, format, prefix, allowClear, inputReadOnly, size, picker, locale, disabledDate, onVisibleChange, onCalendarChange, style, className, separator, defaultValue, bordered, getPopupContainer, placement }: TRangePickerProps) => React.JSX.Element;
|
|
5
5
|
export default RangePicker;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { PopoverProps } from "../../types/popover";
|
|
3
3
|
import './style.css';
|
|
4
|
-
declare const Popover: ({ prefixCls, content, children, trigger, placement, open, visible, title, style, overlayClassName, overlayStyle, onVisibleChange, getPopupContainer
|
|
4
|
+
declare const Popover: ({ prefixCls, content, children, trigger, placement, open, visible, title, style, overlayClassName, overlayStyle, onVisibleChange, getPopupContainer }: PopoverProps) => React.JSX.Element;
|
|
5
5
|
export default Popover;
|
|
@@ -2,10 +2,3 @@ import { RuleType } from '../types';
|
|
|
2
2
|
export declare const parseValue: (value: RuleType) => RuleType;
|
|
3
3
|
export declare function createArray(length: number): number[];
|
|
4
4
|
export declare function clsx(...args: RuleType[]): string;
|
|
5
|
-
export declare function getElementParentDetails(el: HTMLElement | null, includeSelf?: boolean): {
|
|
6
|
-
relativePosition: {
|
|
7
|
-
left: number;
|
|
8
|
-
top: number;
|
|
9
|
-
};
|
|
10
|
-
scrollableParents: HTMLElement | null;
|
|
11
|
-
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Placement } from "../types";
|
|
2
|
+
import { CSSProperties, RefObject } from "react";
|
|
3
|
+
type TPosition = {
|
|
4
|
+
isOpen: boolean;
|
|
5
|
+
popupRef: RefObject<HTMLDivElement | null>;
|
|
6
|
+
triggerRef: RefObject<HTMLDivElement | null>;
|
|
7
|
+
getPopupContainer?: HTMLElement;
|
|
8
|
+
placement?: Placement;
|
|
9
|
+
offset?: number;
|
|
10
|
+
};
|
|
11
|
+
export declare const usePosition: ({ isOpen, offset, popupRef, placement, triggerRef, getPopupContainer }: TPosition) => {
|
|
12
|
+
showPlacement: string;
|
|
13
|
+
dropdownPosition: CSSProperties;
|
|
14
|
+
};
|
|
15
|
+
export {};
|
|
@@ -34,7 +34,7 @@ export type TDatePickerProps = DefaultProps & {
|
|
|
34
34
|
onChange?: (date: RuleType | RuleType[], dateString: string | string[]) => void;
|
|
35
35
|
onCalendarChange?: (date: RuleType | RuleType[], dateString: string | string[], info: BaseInfo) => void;
|
|
36
36
|
onVisibleChange?: ((open: boolean) => void) | undefined;
|
|
37
|
-
getPopupContainer?: (
|
|
37
|
+
getPopupContainer?: (node: HTMLElement) => HTMLElement;
|
|
38
38
|
showToday?: boolean;
|
|
39
39
|
inputReadOnly?: boolean;
|
|
40
40
|
picker?: PanelMode;
|
|
@@ -115,7 +115,7 @@ export type TimePickerProps = DefaultProps & {
|
|
|
115
115
|
onSelect?: ((value: Date | null) => void) | undefined;
|
|
116
116
|
showNow?: boolean;
|
|
117
117
|
clearIcon?: ReactNode;
|
|
118
|
-
getPopupContainer?: (
|
|
118
|
+
getPopupContainer?: (node: HTMLElement) => HTMLElement;
|
|
119
119
|
suffixIcon?: ReactNode;
|
|
120
120
|
placeholder?: string;
|
|
121
121
|
placement?: Placement;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { CSSProperties, MouseEvent, ReactElement, ReactNode, RefObject } from "react";
|
|
2
|
-
import { DefaultProps, Placement
|
|
2
|
+
import { DefaultProps, Placement } from ".";
|
|
3
|
+
export type TriggerType = 'click' | 'hover' | 'contextMenu' | Array<TriggerType>;
|
|
3
4
|
export interface DropdownItemType {
|
|
4
5
|
key: string;
|
|
5
6
|
label?: ReactNode;
|
|
@@ -20,7 +21,7 @@ export type DropdownProps = DefaultProps & {
|
|
|
20
21
|
placement?: Placement;
|
|
21
22
|
overlayClassName?: string;
|
|
22
23
|
overlayStyle?: CSSProperties;
|
|
23
|
-
getPopupContainer?: (
|
|
24
|
+
getPopupContainer?: (node: HTMLElement) => HTMLElement;
|
|
24
25
|
destroyOnHidden?: boolean;
|
|
25
26
|
disabled?: boolean;
|
|
26
27
|
arrow?: boolean;
|
|
@@ -25,4 +25,3 @@ export type SyntheticBaseEvent = {
|
|
|
25
25
|
currentTarget: EventTarget;
|
|
26
26
|
};
|
|
27
27
|
export type Placement = 'bottomLeft' | 'bottom' | 'bottomRight' | 'topLeft' | 'top' | 'topRight' | 'left' | 'right';
|
|
28
|
-
export type TriggerType = 'click' | 'hover' | 'contextMenu' | Array<TriggerType>;
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
import { CSSProperties, ReactNode } from "react";
|
|
2
|
-
import { DefaultProps
|
|
2
|
+
import { DefaultProps } from ".";
|
|
3
3
|
export type PopoverProps = DefaultProps & {
|
|
4
4
|
content: ReactNode;
|
|
5
5
|
children: ReactNode;
|
|
6
|
-
trigger?:
|
|
6
|
+
trigger?: "click" | "hover";
|
|
7
7
|
placement?: "top" | "bottom" | "left" | "right" | "topRight" | "bottomRight" | "topLeft" | "bottomLeft";
|
|
8
8
|
open?: boolean;
|
|
9
9
|
overlayStyle?: CSSProperties;
|
|
10
10
|
overlayClassName?: string;
|
|
11
|
-
listenPopoverPossitions?: CSSProperties;
|
|
12
11
|
title?: string | ReactNode;
|
|
13
12
|
visible?: boolean;
|
|
14
|
-
placementPositionOffset?: number;
|
|
15
13
|
onVisibleChange?: ((open: boolean) => void) | undefined;
|
|
16
14
|
getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
|
|
17
15
|
};
|
|
@@ -43,7 +43,7 @@ export type SelectProps = DefaultProps & {
|
|
|
43
43
|
searchIcon?: ReactNode;
|
|
44
44
|
open?: boolean;
|
|
45
45
|
notFoundContent?: ReactNode;
|
|
46
|
-
getPopupContainer?: (
|
|
46
|
+
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
|
47
47
|
dropdownRender?: (menu: ReactNode) => ReactNode;
|
|
48
48
|
feedbackIcons?: boolean;
|
|
49
49
|
placement?: Placement;
|