jy-headless 0.2.35 → 0.3.0

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.
Files changed (78) hide show
  1. package/Popover/Popover.d.ts +2 -0
  2. package/Popover/Popover.js +75 -0
  3. package/Popover/Popover.type.d.ts +9 -0
  4. package/Popover/index.d.ts +2 -0
  5. package/cjs/Popover/Popover.d.ts +2 -0
  6. package/cjs/Popover/Popover.js +77 -0
  7. package/cjs/Popover/Popover.type.d.ts +9 -0
  8. package/cjs/Popover/index.d.ts +2 -0
  9. package/cjs/index.d.ts +1 -7
  10. package/cjs/index.js +2 -21
  11. package/index.d.ts +1 -7
  12. package/index.js +1 -12
  13. package/package.json +8 -53
  14. package/version.txt +1 -1
  15. package/buttons/Button/Button.d.ts +0 -3
  16. package/buttons/Button/Button.js +0 -9
  17. package/buttons/index.d.ts +0 -1
  18. package/cjs/buttons/Button/Button.d.ts +0 -3
  19. package/cjs/buttons/Button/Button.js +0 -11
  20. package/cjs/buttons/index.d.ts +0 -1
  21. package/cjs/hooks/index.d.ts +0 -3
  22. package/cjs/hooks/useDebouncing.d.ts +0 -2
  23. package/cjs/hooks/useDebouncing.js +0 -16
  24. package/cjs/hooks/useDropdown.d.ts +0 -10
  25. package/cjs/hooks/useDropdown.js +0 -32
  26. package/cjs/hooks/useThrottling.d.ts +0 -2
  27. package/cjs/hooks/useThrottling.js +0 -16
  28. package/cjs/inputs/ImageInput/ImageInput.d.ts +0 -7
  29. package/cjs/inputs/ImageInput/ImageInput.js +0 -76
  30. package/cjs/inputs/Input/Input.d.ts +0 -3
  31. package/cjs/inputs/Input/Input.js +0 -17
  32. package/cjs/inputs/checkboxList/index.d.ts +0 -5
  33. package/cjs/inputs/index.d.ts +0 -2
  34. package/cjs/selectors/Dropdown/Dropdown.d.ts +0 -8
  35. package/cjs/selectors/Dropdown/Dropdown.js +0 -55
  36. package/cjs/selectors/index.d.ts +0 -1
  37. package/cjs/tooltip/Tooltip/Tooltip.d.ts +0 -5
  38. package/cjs/tooltip/Tooltip/Tooltip.js +0 -66
  39. package/cjs/tooltip/index.d.ts +0 -1
  40. package/cjs/types/buttons/index.d.ts +0 -7
  41. package/cjs/types/common/index.d.ts +0 -11
  42. package/cjs/types/index.d.ts +0 -4
  43. package/cjs/types/inputs/index.d.ts +0 -36
  44. package/cjs/types/selectors/index.d.ts +0 -16
  45. package/cjs/types/tooltip/index.d.ts +0 -14
  46. package/cjs/types/tooltip/index.js +0 -7
  47. package/cjs/utils/ArrayUtils.d.ts +0 -2
  48. package/cjs/utils/MessageUtils.d.ts +0 -1
  49. package/cjs/utils/index.d.ts +0 -1
  50. package/hooks/index.d.ts +0 -3
  51. package/hooks/useDebouncing.d.ts +0 -2
  52. package/hooks/useDebouncing.js +0 -14
  53. package/hooks/useDropdown.d.ts +0 -10
  54. package/hooks/useDropdown.js +0 -26
  55. package/hooks/useThrottling.d.ts +0 -2
  56. package/hooks/useThrottling.js +0 -14
  57. package/inputs/ImageInput/ImageInput.d.ts +0 -7
  58. package/inputs/ImageInput/ImageInput.js +0 -71
  59. package/inputs/Input/Input.d.ts +0 -3
  60. package/inputs/Input/Input.js +0 -15
  61. package/inputs/checkboxList/index.d.ts +0 -5
  62. package/inputs/index.d.ts +0 -2
  63. package/selectors/Dropdown/Dropdown.d.ts +0 -8
  64. package/selectors/Dropdown/Dropdown.js +0 -53
  65. package/selectors/index.d.ts +0 -1
  66. package/tooltip/Tooltip/Tooltip.d.ts +0 -5
  67. package/tooltip/Tooltip/Tooltip.js +0 -64
  68. package/tooltip/index.d.ts +0 -1
  69. package/types/buttons/index.d.ts +0 -7
  70. package/types/common/index.d.ts +0 -11
  71. package/types/index.d.ts +0 -4
  72. package/types/inputs/index.d.ts +0 -36
  73. package/types/selectors/index.d.ts +0 -16
  74. package/types/tooltip/index.d.ts +0 -14
  75. package/types/tooltip/index.js +0 -5
  76. package/utils/ArrayUtils.d.ts +0 -2
  77. package/utils/MessageUtils.d.ts +0 -1
  78. package/utils/index.d.ts +0 -1
@@ -0,0 +1,2 @@
1
+ import { HoverProps } from './Popover.type';
2
+ export declare const Popover: ({ children, direction, popover, domNode, rootId, key }: HoverProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,75 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { useState, useRef, useCallback, useLayoutEffect } from 'react';
3
+ import { createPortal } from 'react-dom';
4
+
5
+ const Popover = ({ children, direction, popover, domNode, rootId, key }) => {
6
+ const [visible, setVisible] = useState(false);
7
+ const [position, setPosition] = useState({ top: 0, left: 0 });
8
+ const rootDom = domNode ?? document.getElementById(rootId ?? 'root');
9
+ const targetRef = useRef(null);
10
+ const popoverRef = useRef(null);
11
+ const getPopoverPosition = useCallback((targetRect, popoverRect) => {
12
+ let top = 0;
13
+ let left = 0;
14
+ switch (direction) {
15
+ case 'top-left':
16
+ top = targetRect.top - popoverRect.height;
17
+ left = targetRect.left;
18
+ break;
19
+ case 'top-center':
20
+ case 'top':
21
+ top = targetRect.top - popoverRect.height;
22
+ left = targetRect.left + (targetRect.width - popoverRect.width) / 2;
23
+ break;
24
+ case 'top-right':
25
+ top = targetRect.top - popoverRect.height;
26
+ left = targetRect.right - popoverRect.width;
27
+ break;
28
+ case 'left':
29
+ top = targetRect.top + (targetRect.height - popoverRect.height) / 2;
30
+ left = targetRect.left - popoverRect.width;
31
+ break;
32
+ case 'right':
33
+ top = targetRect.top + (targetRect.height - popoverRect.height) / 2;
34
+ left = targetRect.right;
35
+ break;
36
+ case 'bottom-left':
37
+ top = targetRect.bottom;
38
+ left = targetRect.left;
39
+ break;
40
+ case 'bottom-center':
41
+ case 'bottom':
42
+ top = targetRect.bottom;
43
+ left = targetRect.left + (targetRect.width - popoverRect.width) / 2;
44
+ break;
45
+ case 'bottom-right':
46
+ top = targetRect.bottom;
47
+ left = targetRect.right - popoverRect.width;
48
+ break;
49
+ }
50
+ return { top, left };
51
+ }, [direction]);
52
+ const handleMouseEnter = () => {
53
+ setVisible(true);
54
+ };
55
+ const handleMouseLeave = () => {
56
+ setVisible(false);
57
+ };
58
+ useLayoutEffect(() => {
59
+ if (visible && targetRef.current && popoverRef.current) {
60
+ const targetRect = targetRef.current.getBoundingClientRect();
61
+ const popoverRect = popoverRef.current.getBoundingClientRect();
62
+ const { top, left } = getPopoverPosition(targetRect, popoverRect);
63
+ setPosition({ top: top + window.scrollY, left: left + window.scrollX });
64
+ }
65
+ }, [visible, popover, getPopoverPosition]);
66
+ return (jsxs("span", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: targetRef, children: [children, rootDom &&
67
+ visible &&
68
+ createPortal(jsx("span", { ref: popoverRef, style: {
69
+ position: 'absolute',
70
+ top: `${position.top}px`,
71
+ left: `${position.left}px`,
72
+ }, children: popover }), rootDom, key)] }));
73
+ };
74
+
75
+ export { Popover };
@@ -0,0 +1,9 @@
1
+ import { ReactNode } from 'react';
2
+ export interface HoverProps {
3
+ children: ReactNode;
4
+ popover: ReactNode;
5
+ direction: 'top-left' | 'top-center' | 'top' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-center' | 'bottom-right';
6
+ rootId?: string;
7
+ domNode?: Element;
8
+ key?: string;
9
+ }
@@ -0,0 +1,2 @@
1
+ export * from './Popover';
2
+ export * from './Popover.type';
@@ -0,0 +1,2 @@
1
+ import { HoverProps } from './Popover.type';
2
+ export declare const Popover: ({ children, direction, popover, domNode, rootId, key }: HoverProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,77 @@
1
+ 'use strict';
2
+
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ var react = require('react');
5
+ var reactDom = require('react-dom');
6
+
7
+ const Popover = ({ children, direction, popover, domNode, rootId, key }) => {
8
+ const [visible, setVisible] = react.useState(false);
9
+ const [position, setPosition] = react.useState({ top: 0, left: 0 });
10
+ const rootDom = domNode ?? document.getElementById(rootId ?? 'root');
11
+ const targetRef = react.useRef(null);
12
+ const popoverRef = react.useRef(null);
13
+ const getPopoverPosition = react.useCallback((targetRect, popoverRect) => {
14
+ let top = 0;
15
+ let left = 0;
16
+ switch (direction) {
17
+ case 'top-left':
18
+ top = targetRect.top - popoverRect.height;
19
+ left = targetRect.left;
20
+ break;
21
+ case 'top-center':
22
+ case 'top':
23
+ top = targetRect.top - popoverRect.height;
24
+ left = targetRect.left + (targetRect.width - popoverRect.width) / 2;
25
+ break;
26
+ case 'top-right':
27
+ top = targetRect.top - popoverRect.height;
28
+ left = targetRect.right - popoverRect.width;
29
+ break;
30
+ case 'left':
31
+ top = targetRect.top + (targetRect.height - popoverRect.height) / 2;
32
+ left = targetRect.left - popoverRect.width;
33
+ break;
34
+ case 'right':
35
+ top = targetRect.top + (targetRect.height - popoverRect.height) / 2;
36
+ left = targetRect.right;
37
+ break;
38
+ case 'bottom-left':
39
+ top = targetRect.bottom;
40
+ left = targetRect.left;
41
+ break;
42
+ case 'bottom-center':
43
+ case 'bottom':
44
+ top = targetRect.bottom;
45
+ left = targetRect.left + (targetRect.width - popoverRect.width) / 2;
46
+ break;
47
+ case 'bottom-right':
48
+ top = targetRect.bottom;
49
+ left = targetRect.right - popoverRect.width;
50
+ break;
51
+ }
52
+ return { top, left };
53
+ }, [direction]);
54
+ const handleMouseEnter = () => {
55
+ setVisible(true);
56
+ };
57
+ const handleMouseLeave = () => {
58
+ setVisible(false);
59
+ };
60
+ react.useLayoutEffect(() => {
61
+ if (visible && targetRef.current && popoverRef.current) {
62
+ const targetRect = targetRef.current.getBoundingClientRect();
63
+ const popoverRect = popoverRef.current.getBoundingClientRect();
64
+ const { top, left } = getPopoverPosition(targetRect, popoverRect);
65
+ setPosition({ top: top + window.scrollY, left: left + window.scrollX });
66
+ }
67
+ }, [visible, popover, getPopoverPosition]);
68
+ return (jsxRuntime.jsxs("span", { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ref: targetRef, children: [children, rootDom &&
69
+ visible &&
70
+ reactDom.createPortal(jsxRuntime.jsx("span", { ref: popoverRef, style: {
71
+ position: 'absolute',
72
+ top: `${position.top}px`,
73
+ left: `${position.left}px`,
74
+ }, children: popover }), rootDom, key)] }));
75
+ };
76
+
77
+ exports.Popover = Popover;
@@ -0,0 +1,9 @@
1
+ import { ReactNode } from 'react';
2
+ export interface HoverProps {
3
+ children: ReactNode;
4
+ popover: ReactNode;
5
+ direction: 'top-left' | 'top-center' | 'top' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-center' | 'bottom-right';
6
+ rootId?: string;
7
+ domNode?: Element;
8
+ key?: string;
9
+ }
@@ -0,0 +1,2 @@
1
+ export * from './Popover';
2
+ export * from './Popover.type';
package/cjs/index.d.ts CHANGED
@@ -1,7 +1 @@
1
- export * from './buttons';
2
- export * from './inputs';
3
- export * from './selectors';
4
- export * from './tooltip';
5
- export * from './types';
6
- export * from './utils';
7
- export * from './hooks';
1
+ export * from './Popover';
package/cjs/index.js CHANGED
@@ -1,26 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var Button = require('./buttons/Button/Button.js');
4
- var Input = require('./inputs/Input/Input.js');
5
- var ImageInput = require('./inputs/ImageInput/ImageInput.js');
6
- var Dropdown = require('./selectors/Dropdown/Dropdown.js');
7
- var Tooltip = require('./tooltip/Tooltip/Tooltip.js');
8
- require('react');
9
- var useDropdown = require('./hooks/useDropdown.js');
3
+ var Popover = require('./Popover/Popover.js');
10
4
 
11
- function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, default: e }); }
12
5
 
13
- var Button__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Button);
14
- var Input__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Input);
15
- var Dropdown__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Dropdown);
16
- var Tooltip__namespace = /*#__PURE__*/_interopNamespaceDefaultOnly(Tooltip);
17
6
 
18
-
19
-
20
- exports.Button = Button__namespace;
21
- exports.Input = Input__namespace;
22
- exports.ImageInput = ImageInput;
23
- exports.Dropdown = Dropdown__namespace;
24
- exports.Tooltip = Tooltip__namespace;
25
- exports.DropdownContext = useDropdown.DropdownContext;
26
- exports.useDropdownContext = useDropdown.useDropdownContext;
7
+ exports.Popover = Popover.Popover;
package/index.d.ts CHANGED
@@ -1,7 +1 @@
1
- export * from './buttons';
2
- export * from './inputs';
3
- export * from './selectors';
4
- export * from './tooltip';
5
- export * from './types';
6
- export * from './utils';
7
- export * from './hooks';
1
+ export * from './Popover';
package/index.js CHANGED
@@ -1,12 +1 @@
1
- import * as Button from './buttons/Button/Button.js';
2
- export { Button };
3
- import * as Input from './inputs/Input/Input.js';
4
- export { Input };
5
- import * as ImageInput from './inputs/ImageInput/ImageInput.js';
6
- export { ImageInput };
7
- import * as Dropdown from './selectors/Dropdown/Dropdown.js';
8
- export { Dropdown };
9
- import * as Tooltip from './tooltip/Tooltip/Tooltip.js';
10
- export { Tooltip };
11
- import 'react';
12
- export { DropdownContext, useDropdownContext } from './hooks/useDropdown.js';
1
+ export { Popover } from './Popover/Popover.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jy-headless",
3
- "version": "0.2.35",
3
+ "version": "0.3.0",
4
4
  "description": "A lightweight and customizable headless UI library for React components",
5
5
  "license": "MIT",
6
6
  "repository": "https://github.com/yCZwIqY/jy-headless",
@@ -13,65 +13,20 @@
13
13
  "require": "./cjs/index.js",
14
14
  "types": "./index.d.ts"
15
15
  },
16
- "./Button": {
17
- "import": "./cjs/buttons/Button/Button.js",
18
- "require": "./cjs/cjs/buttons/Button/Button.js",
19
- "types": "./cjs/buttons/Button/Button.d.ts"
20
- },
21
16
  "./cjs": {
22
17
  "import": "./cjs/index.js",
23
18
  "require": "./cjs/cjs/index.js",
24
19
  "types": "./cjs/index.d.ts"
25
20
  },
26
- "./useDebouncing": {
27
- "import": "./hooks/useDebouncing.js",
28
- "require": "./cjs/hooks/useDebouncing.js",
29
- "types": "./hooks/useDebouncing.d.ts"
30
- },
31
- "./useDropdown": {
32
- "import": "./hooks/useDropdown.js",
33
- "require": "./cjs/hooks/useDropdown.js",
34
- "types": "./hooks/useDropdown.d.ts"
35
- },
36
- "./useThrottling": {
37
- "import": "./hooks/useThrottling.js",
38
- "require": "./cjs/hooks/useThrottling.js",
39
- "types": "./hooks/useThrottling.d.ts"
40
- },
41
21
  "./index": {
42
- "import": "./types/tooltip/index.js",
43
- "require": "./cjs/types/tooltip/index.js",
44
- "types": "./types/tooltip/index.d.ts"
45
- },
46
- "./ImageInput": {
47
- "import": "./inputs/ImageInput/ImageInput.js",
48
- "require": "./cjs/inputs/ImageInput/ImageInput.js",
49
- "types": "./inputs/ImageInput/ImageInput.d.ts"
50
- },
51
- "./Input": {
52
- "import": "./inputs/Input/Input.js",
53
- "require": "./cjs/inputs/Input/Input.js",
54
- "types": "./inputs/Input/Input.d.ts"
55
- },
56
- "./Dropdown": {
57
- "import": "./selectors/Dropdown/Dropdown.js",
58
- "require": "./cjs/selectors/Dropdown/Dropdown.js",
59
- "types": "./selectors/Dropdown/Dropdown.d.ts"
60
- },
61
- "./Tooltip": {
62
- "import": "./tooltip/Tooltip/Tooltip.js",
63
- "require": "./cjs/tooltip/Tooltip/Tooltip.js",
64
- "types": "./tooltip/Tooltip/Tooltip.d.ts"
65
- },
66
- "./cjs/types/tooltip": {
67
- "import": "./cjs/types/tooltip/index.js",
68
- "require": "./cjs/cjs/types/tooltip/index.js",
69
- "types": "./cjs/types/tooltip/index.d.ts"
22
+ "import": "./index.js",
23
+ "require": "./cjs/index.js",
24
+ "types": "./index.d.ts"
70
25
  },
71
- "./types/tooltip": {
72
- "import": "./types/tooltip/index.js",
73
- "require": "./cjs/types/tooltip/index.js",
74
- "types": "./types/tooltip/index.d.ts"
26
+ "./Popover": {
27
+ "import": "./Popover/Popover.js",
28
+ "require": "./cjs/Popover/Popover.js",
29
+ "types": "./Popover/Popover.d.ts"
75
30
  }
76
31
  },
77
32
  "keywords": [
package/version.txt CHANGED
@@ -1 +1 @@
1
- 0.2.35
1
+ 0.3.0
@@ -1,3 +0,0 @@
1
- import type { ButtonProps } from '../../types';
2
- declare const Button: ({ onClick, loading, readOnly, disabled, useDebounce, timeout, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
3
- export default Button;
@@ -1,9 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import useDebouncing from '../../hooks/useDebouncing.js';
3
-
4
- const Button = ({ onClick, loading = false, readOnly = false, disabled = false, useDebounce = false, timeout = 300, children, ...props }) => {
5
- const handleClick = onClick && useDebounce ? useDebouncing(onClick, timeout || 300) : onClick;
6
- return (jsx("button", { onClick: handleClick, disabled: disabled || loading || readOnly, ...props, children: children }));
7
- };
8
-
9
- export { Button as default };
@@ -1 +0,0 @@
1
- export * as Button from './Button/Button';
@@ -1,3 +0,0 @@
1
- import type { ButtonProps } from '../../types';
2
- declare const Button: ({ onClick, loading, readOnly, disabled, useDebounce, timeout, children, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
3
- export default Button;
@@ -1,11 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var useDebouncing = require('../../hooks/useDebouncing.js');
5
-
6
- const Button = ({ onClick, loading = false, readOnly = false, disabled = false, useDebounce = false, timeout = 300, children, ...props }) => {
7
- const handleClick = onClick && useDebounce ? useDebouncing(onClick, timeout || 300) : onClick;
8
- return (jsxRuntime.jsx("button", { onClick: handleClick, disabled: disabled || loading || readOnly, ...props, children: children }));
9
- };
10
-
11
- module.exports = Button;
@@ -1 +0,0 @@
1
- export * as Button from './Button/Button';
@@ -1,3 +0,0 @@
1
- export * from './useDebouncing';
2
- export * from './useThrottling';
3
- export * from './useDropdown';
@@ -1,2 +0,0 @@
1
- declare const useDebouncing: <T extends (...args: any[]) => void>(callback: T, delay: number) => T;
2
- export default useDebouncing;
@@ -1,16 +0,0 @@
1
- 'use strict';
2
-
3
- var react = require('react');
4
-
5
- const useDebouncing = (callback, delay) => {
6
- const timer = react.useRef(null);
7
- return react.useCallback(() => {
8
- if (timer.current)
9
- clearTimeout(timer.current);
10
- timer.current = setTimeout(() => {
11
- callback();
12
- }, delay);
13
- }, [callback, delay]);
14
- };
15
-
16
- module.exports = useDebouncing;
@@ -1,10 +0,0 @@
1
- import { DropdownContextValue } from '../types';
2
- export declare const DropdownContext: import("react").Context<DropdownContextValue<any> | null>;
3
- declare const useDropdown: <T>(defaultValue?: T | null) => {
4
- isOpen: boolean;
5
- selected: T | null;
6
- toggle: () => void;
7
- select: (value: T) => void;
8
- };
9
- export declare const useDropdownContext: <T>() => DropdownContextValue<T>;
10
- export default useDropdown;
@@ -1,32 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var react = require('react');
6
-
7
- const DropdownContext = react.createContext(null);
8
- const useDropdown = (defaultValue = null) => {
9
- const [isOpen, setIsOpen] = react.useState(false);
10
- const [selected, setSelected] = react.useState(defaultValue);
11
- const toggle = () => setIsOpen((prev) => !prev);
12
- const select = (value) => {
13
- setSelected(value);
14
- setIsOpen(false);
15
- };
16
- return {
17
- isOpen,
18
- selected,
19
- toggle,
20
- select,
21
- };
22
- };
23
- const useDropdownContext = () => {
24
- const context = react.useContext(DropdownContext);
25
- if (!context)
26
- throw new Error('Dropdown components must be used within <Dropdown>');
27
- return context;
28
- };
29
-
30
- exports.DropdownContext = DropdownContext;
31
- exports.default = useDropdown;
32
- exports.useDropdownContext = useDropdownContext;
@@ -1,2 +0,0 @@
1
- declare const useThrottling: <T extends (...args: any[]) => void>(callback: T, delay: number) => T;
2
- export default useThrottling;
@@ -1,16 +0,0 @@
1
- 'use strict';
2
-
3
- var react = require('react');
4
-
5
- const useThrottling = (callback, delay) => {
6
- const lastCalled = react.useRef(0);
7
- return react.useCallback((...args) => {
8
- const now = Date.now();
9
- if (now - lastCalled.current >= delay) {
10
- lastCalled.current = now;
11
- callback(...args);
12
- }
13
- }, [callback, delay]);
14
- };
15
-
16
- module.exports = useThrottling;
@@ -1,7 +0,0 @@
1
- import { ImageAttribute, ImageInputContextData, ImageInputProps, LabelAttribute } from '../../types';
2
- export declare const ImageInputContext: import("react").Context<ImageInputContextData | null>;
3
- declare const ImageInput: (({ accepts, id, value, draggable, onChange, children, ...props }: ImageInputProps) => import("react/jsx-runtime").JSX.Element) & {
4
- Preview: ({ src: defaultSrc, ...props }: ImageAttribute) => import("react/jsx-runtime").JSX.Element;
5
- Uploader: ({ children, ...props }: LabelAttribute) => import("react/jsx-runtime").JSX.Element;
6
- };
7
- export default ImageInput;
@@ -1,76 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var react = require('react');
7
-
8
- const ImageInputContext = react.createContext(null);
9
- const getAccepts = (accepts) => {
10
- return accepts && accepts.length > 0 ? accepts.map((it) => `image/${it}`).join() : 'image/*';
11
- };
12
- const ImageInputRoot = ({ accepts, id, value, draggable = false, onChange, children, ...props }) => {
13
- const [previewUrl, setPreviewUrl] = react.useState('');
14
- const [dragOver, setDragOver] = react.useState(false);
15
- const inputId = [id, 'image-input'].join('-');
16
- react.useEffect(() => {
17
- if (!value)
18
- setPreviewUrl('');
19
- }, [value]);
20
- const setImagePreview = (file) => {
21
- const reader = new FileReader();
22
- reader.onload = (e) => {
23
- setPreviewUrl(e.target.result);
24
- };
25
- reader.readAsDataURL(file);
26
- };
27
- const onImageChange = (e) => {
28
- const file = e.target.files?.[0];
29
- if (!file)
30
- return;
31
- setImagePreview(file);
32
- onChange?.(file);
33
- };
34
- const onDrop = (e) => {
35
- if (!draggable)
36
- return;
37
- e.preventDefault();
38
- setDragOver(false);
39
- const file = e.dataTransfer.files?.[0];
40
- if (file && file.type.startsWith('image/')) {
41
- setImagePreview(file);
42
- onChange?.(file);
43
- }
44
- };
45
- const onDragOver = (e) => {
46
- if (!draggable)
47
- return;
48
- e.preventDefault();
49
- setDragOver(true);
50
- };
51
- const onDragLeave = () => setDragOver(false);
52
- return (jsxRuntime.jsxs("span", { ...props, onDrop: onDrop, onDragOver: onDragOver, onDragEnter: onDragOver, onDragLeave: onDragLeave, children: [jsxRuntime.jsx("input", { "data-testid": inputId, id: inputId, type: 'file', accept: getAccepts(accepts ?? []), onChange: onImageChange, style: { display: 'none' } }), jsxRuntime.jsx(ImageInputContext.Provider, { value: { id: inputId, previewUrl, dragOver }, children: children })] }));
53
- };
54
- const ImageInputUploader = ({ children, ...props }) => {
55
- const context = react.useContext(ImageInputContext);
56
- if (!context) {
57
- throw new Error('ImageInput.* 컴포넌트는 ImageInput 내에서만 사용해야 합니다.');
58
- }
59
- const { id } = context;
60
- return (jsxRuntime.jsx("label", { htmlFor: id ?? '', ...props, children: children }));
61
- };
62
- const ImageInputPreview = ({ src: defaultSrc, ...props }) => {
63
- const context = react.useContext(ImageInputContext);
64
- if (!context) {
65
- throw new Error('ImageInput.* 컴포넌트는 ImageInput 내에서만 사용해야 합니다.');
66
- }
67
- const { previewUrl } = context;
68
- return jsxRuntime.jsx("img", { ...props, src: previewUrl ?? defaultSrc ?? '' });
69
- };
70
- const ImageInput = Object.assign(ImageInputRoot, {
71
- Preview: ImageInputPreview,
72
- Uploader: ImageInputUploader,
73
- });
74
-
75
- exports.ImageInputContext = ImageInputContext;
76
- exports.default = ImageInput;
@@ -1,3 +0,0 @@
1
- import { InputProps } from '../../types';
2
- declare const Input: ({ id, value, suffixElement, prefixElement, wrapperStyle, wrapperClass, onChange, timeout, children, showLimit, maxLength, onThrottledChange, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
3
- export default Input;
@@ -1,17 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var useThrottling = require('../../hooks/useThrottling.js');
5
-
6
- const Input = ({ id, value, suffixElement, prefixElement, wrapperStyle, wrapperClass = [], onChange, timeout = 300, children, showLimit, maxLength, onThrottledChange, ...props }) => {
7
- const throttledOnChange = onThrottledChange ? useThrottling(onThrottledChange, timeout) : null;
8
- const handleChange = (e) => {
9
- if (maxLength && e.target.value?.length > maxLength)
10
- return;
11
- onChange?.(e);
12
- throttledOnChange?.(e);
13
- };
14
- return (jsxRuntime.jsxs("span", { "data-testid": 'input-wrapper', id: [id, 'input-wrapper'].join('-'), className: wrapperClass?.join(' '), style: wrapperStyle, children: [prefixElement, jsxRuntime.jsx("input", { role: 'textbox', id: id, value: value, onChange: handleChange, ...props }), showLimit && maxLength && (jsxRuntime.jsxs("span", { id: [id, 'input-limit'].join('-'), children: [(value ?? '').toString().length, "/", maxLength] })), suffixElement] }));
15
- };
16
-
17
- module.exports = Input;
@@ -1,5 +0,0 @@
1
- import { CheckboxItemProps, CheckboxProps } from '../../types';
2
- declare const CheckboxList: (<T>({ children, values, onChange, max, ...props }: CheckboxProps<T>) => import("react/jsx-runtime").JSX.Element) & {
3
- Item: <T>({ value, children, id, ...props }: CheckboxItemProps<T>) => import("react/jsx-runtime").JSX.Element | null;
4
- };
5
- export default CheckboxList;
@@ -1,2 +0,0 @@
1
- export * as Input from './Input/Input';
2
- export * as ImageInput from './ImageInput/ImageInput';
@@ -1,8 +0,0 @@
1
- import { DivAttribute, DropdownProps, SpanAttribute } from '../../types';
2
- declare const Dropdown: (<T>({ select, selected, isOpen, toggle, children, ...props }: DropdownProps<T>) => import("react/jsx-runtime").JSX.Element) & {
3
- Button: <T>({ onClick, children, ...props }: SpanAttribute<T>) => import("react/jsx-runtime").JSX.Element;
4
- Options: <T>({ children, ...props }: DivAttribute<T>) => import("react/jsx-runtime").JSX.Element | null;
5
- Option: <T>({ children, value, ...props }: DivAttribute<T>) => import("react/jsx-runtime").JSX.Element;
6
- Viewer: ({ children, ...props }: SpanAttribute<null>) => import("react/jsx-runtime").JSX.Element;
7
- };
8
- export default Dropdown;