@ncds/ui-admin 1.8.22-alpha.3 → 1.8.22
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/src/components/feedback-and-status/badge/Badge.js +1 -1
- package/dist/cjs/src/components/overlays/modal/Modal.js +46 -41
- package/dist/cjs/src/components/overlays/postcode-search-modal/PostcodeSearchModal.js +2 -2
- package/dist/cjs/src/generated/scoped-css.js +1 -1
- package/dist/esm/src/components/feedback-and-status/badge/Badge.js +1 -1
- package/dist/esm/src/components/overlays/modal/Modal.js +47 -42
- package/dist/esm/src/components/overlays/postcode-search-modal/PostcodeSearchModal.js +2 -2
- package/dist/esm/src/generated/scoped-css.js +1 -1
- package/dist/temp/src/components/feedback-and-status/badge/Badge.d.ts +1 -1
- package/dist/temp/src/components/feedback-and-status/badge/Badge.js +1 -1
- package/dist/temp/src/components/overlays/modal/Modal.d.ts +5 -5
- package/dist/temp/src/components/overlays/modal/Modal.js +11 -14
- package/dist/temp/src/components/overlays/postcode-search-modal/PostcodeSearchModal.js +1 -1
- package/dist/temp/src/generated/scoped-css.js +1 -1
- package/dist/types/src/components/feedback-and-status/badge/Badge.d.ts +1 -1
- package/dist/types/src/components/overlays/modal/Modal.d.ts +5 -5
- package/dist/ui-admin/assets/styles/style.css +28 -28
- package/package.json +1 -1
|
@@ -16,4 +16,4 @@ type BadgeProps = {
|
|
|
16
16
|
};
|
|
17
17
|
declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
18
|
export { Badge };
|
|
19
|
-
export type {
|
|
19
|
+
export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };
|
|
@@ -7,7 +7,7 @@ import { sideSlotRender } from './utils';
|
|
|
7
7
|
*/
|
|
8
8
|
const BADGE_ICON_SIZE = 12;
|
|
9
9
|
/** new-badge 박스 안에 들어가는 'N' 아이콘 크기. 박스는 sm 16px / md 20px 이며 아이콘은 그보다 작다(패딩 포함). */
|
|
10
|
-
const NEW_BADGE_ICON_SIZE = { sm: 12, md:
|
|
10
|
+
const NEW_BADGE_ICON_SIZE = { sm: 12, md: 16 };
|
|
11
11
|
const Badge = ({ label, type = 'pill-outline', color = 'neutral', className, leadingIcon, trailingIcon, size = 'xs', }) => {
|
|
12
12
|
// new-badge: 신규 콘텐츠 'N' 마크 전용 타입. label·color·leadingIcon·trailingIcon은 무시되고
|
|
13
13
|
// 색은 --pink-600 으로 고정된다. (디자이너 명세: Icon/FeaturedIcon/Badge로 대체 불가한 전용 표시)
|
|
@@ -12,14 +12,12 @@ type ModalProps = {
|
|
|
12
12
|
children: ReactNode;
|
|
13
13
|
closeOnBackdropClick?: boolean;
|
|
14
14
|
closeOnEsc?: boolean;
|
|
15
|
-
showHeaderDivider?: boolean;
|
|
16
|
-
showActionsDivider?: boolean;
|
|
17
15
|
className?: string;
|
|
18
16
|
zIndex?: number;
|
|
19
17
|
};
|
|
20
18
|
declare const Modal: {
|
|
21
|
-
({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc,
|
|
22
|
-
Header({ children, onClose, featuredIcon, title, subtitle, align, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
|
|
20
|
+
Header({ children, onClose, featuredIcon, title, subtitle, align, showDivider, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
23
21
|
Content({ children, className }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
|
|
24
22
|
/**
|
|
25
23
|
* Modal.Actions - The actions area of the modal
|
|
@@ -49,7 +47,7 @@ declare const Modal: {
|
|
|
49
47
|
* <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
|
|
50
48
|
* </Modal.Actions>
|
|
51
49
|
*/
|
|
52
|
-
Actions({ children, layout, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
50
|
+
Actions({ children, layout, showDivider, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
53
51
|
};
|
|
54
52
|
type ModalHeaderProps = {
|
|
55
53
|
children?: ReactNode;
|
|
@@ -62,6 +60,7 @@ type ModalHeaderProps = {
|
|
|
62
60
|
align?: ModalHeaderAlign;
|
|
63
61
|
title?: string | ReactNode;
|
|
64
62
|
subtitle?: string | ReactNode;
|
|
63
|
+
showDivider?: boolean;
|
|
65
64
|
hideCloseButton?: boolean;
|
|
66
65
|
};
|
|
67
66
|
type ModalContentProps = {
|
|
@@ -72,6 +71,7 @@ type ModalActionsProps = {
|
|
|
72
71
|
className?: string;
|
|
73
72
|
children: ReactNode;
|
|
74
73
|
layout?: ModalActionsLayout;
|
|
74
|
+
showDivider?: boolean;
|
|
75
75
|
align?: ModalActionsAlign;
|
|
76
76
|
checkboxContent?: ReactNode;
|
|
77
77
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import { useEffect, useRef } from 'react';
|
|
4
4
|
import ReactDOM from 'react-dom';
|
|
5
5
|
import { ButtonCloseX } from '../../action/button/ButtonCloseX';
|
|
6
6
|
import { FeaturedIcon } from '../../image-and-icons/featured-icon';
|
|
7
|
-
const Modal = ({ isOpen, onClose, children, size = 'md', closeOnBackdropClick = false, closeOnEsc = true,
|
|
7
|
+
const Modal = ({ isOpen, onClose, children, size = 'md', closeOnBackdropClick = false, closeOnEsc = true, className, zIndex, ...restProps }) => {
|
|
8
8
|
const modalRef = useRef(null);
|
|
9
9
|
const handleBackdropClick = (e) => {
|
|
10
10
|
if (closeOnBackdropClick && e.target === e.currentTarget) {
|
|
@@ -28,16 +28,13 @@ const Modal = ({ isOpen, onClose, children, size = 'md', closeOnBackdropClick =
|
|
|
28
28
|
}, [isOpen, closeOnEsc, onClose]);
|
|
29
29
|
if (!isOpen)
|
|
30
30
|
return null;
|
|
31
|
-
const modalContent = (_jsx("div", { className: classnames('ncua-modal-backdrop', className), onClick: handleBackdropClick, ref: modalRef, style: zIndex ? { zIndex } : undefined, ...restProps, children: _jsx("div", { className: classnames('ncua-modal', `ncua-modal--${size}
|
|
32
|
-
'ncua-modal--divider-header': showHeaderDivider,
|
|
33
|
-
'ncua-modal--divider-actions': showActionsDivider,
|
|
34
|
-
}), children: children }) }));
|
|
31
|
+
const modalContent = (_jsx("div", { className: classnames('ncua-modal-backdrop', className), onClick: handleBackdropClick, ref: modalRef, style: zIndex ? { zIndex } : undefined, ...restProps, children: _jsx("div", { className: classnames('ncua-modal', `ncua-modal--${size}`), children: children }) }));
|
|
35
32
|
return ReactDOM.createPortal(modalContent, document.body);
|
|
36
33
|
};
|
|
37
|
-
Modal.Header = ({ children, onClose, featuredIcon, title, subtitle, align = 'left', hideCloseButton = false, }) => {
|
|
38
|
-
return (_jsxs("header", { className: classnames('ncua-modal__header', `ncua-modal__header--${align}`, {
|
|
39
|
-
|
|
40
|
-
|
|
34
|
+
Modal.Header = ({ children, onClose, featuredIcon, title, subtitle, align = 'left', showDivider = false, hideCloseButton = false, }) => {
|
|
35
|
+
return (_jsxs(_Fragment, { children: [_jsxs("header", { className: classnames('ncua-modal__header', `ncua-modal__header--${align}`, {
|
|
36
|
+
'ncua-modal__header--close-button': !hideCloseButton,
|
|
37
|
+
}), children: [featuredIcon && (_jsx(FeaturedIcon, { icon: featuredIcon.icon, color: featuredIcon.color, theme: featuredIcon.theme, size: "sm" })), _jsxs("div", { className: "ncua-modal__title", children: [_jsx("div", { className: "ncua-modal__title-text", children: title }), subtitle && _jsx("div", { className: "ncua-modal__title-subtitle", children: subtitle })] }), children, !hideCloseButton && (_jsx(ButtonCloseX, { className: "ncua-modal__close-button", size: "sm", theme: "light", onClick: onClose }))] }), showDivider && _jsx("div", { className: "ncua-modal__header-divider" })] }));
|
|
41
38
|
};
|
|
42
39
|
Modal.Content = ({ children, className }) => {
|
|
43
40
|
return _jsx("div", { className: classnames('ncua-modal__content', className), children: children });
|
|
@@ -70,9 +67,9 @@ Modal.Content = ({ children, className }) => {
|
|
|
70
67
|
* <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
|
|
71
68
|
* </Modal.Actions>
|
|
72
69
|
*/
|
|
73
|
-
Modal.Actions = ({ children, layout = 'vertical', align = 'stretch', checkboxContent, className, }) => {
|
|
74
|
-
return (_jsxs("div", { className: classnames('ncua-modal__actions-wrapper', className, {
|
|
75
|
-
|
|
76
|
-
|
|
70
|
+
Modal.Actions = ({ children, layout = 'vertical', showDivider = false, align = 'stretch', checkboxContent, className, }) => {
|
|
71
|
+
return (_jsxs(_Fragment, { children: [showDivider && _jsx("div", { className: "ncua-modal__actions-divider" }), _jsxs("div", { className: classnames('ncua-modal__actions-wrapper', className, {
|
|
72
|
+
'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox',
|
|
73
|
+
}), children: [layout === 'checkbox' && (_jsx("div", { className: "ncua-modal__actions-checkbox", children: _jsx("div", { className: "ncua-modal__actions-checkbox-content", children: checkboxContent }) })), _jsx("div", { className: classnames('ncua-modal__actions', `ncua-modal__actions--${layout}`, `ncua-modal__actions--${align}`), children: children })] })] }));
|
|
77
74
|
};
|
|
78
75
|
export { Modal };
|
|
@@ -117,7 +117,7 @@ const PostcodeSearchModal = ({ open, onClose, zIndex, className, searchQuery, on
|
|
|
117
117
|
event.preventDefault();
|
|
118
118
|
handleSearch();
|
|
119
119
|
};
|
|
120
|
-
return (_jsxs(Modal, { isOpen: open, onClose: onClose, size: "md", zIndex: zIndex, className: className,
|
|
120
|
+
return (_jsxs(Modal, { isOpen: open, onClose: onClose, size: "md", zIndex: zIndex, className: className, children: [_jsx(Modal.Header, { title: MODAL_TITLE, onClose: onClose, showDivider: true }), _jsx(Modal.Content, { children: _jsxs("div", { className: "ncua-postcode-search-modal", ref: rootRef, children: [_jsxs("div", { className: classnames('ncua-postcode-search-modal__search-area', {
|
|
121
121
|
'is-fixed': hasResults && isContentScrolled,
|
|
122
122
|
}), children: [_jsxs("div", { className: "ncua-postcode-search-modal__search", children: [_jsx(InputBase, { className: "ncua-postcode-search-modal__search-input", size: "sm", fullWidth: true, value: searchQuery, clearText: !!searchQuery, onClearText: () => onSearchQueryChange(''), onChange: handleSearchQueryChange, onKeyDown: handleSearchKeyDown, placeholder: SEARCH_PLACEHOLDER, destructive: hasError, hintText: errorCode ? (ERROR_HINT[errorCode] ?? DEFAULT_ERROR_HINT) : undefined }), _jsx(Button, { className: "ncua-postcode-search-modal__search-button", label: SEARCH_BUTTON_LABEL, size: "sm", hierarchy: "secondary", onClick: handleSearch })] }), showSearchHint && (_jsxs("div", { children: [_jsx("p", { className: "ncua-postcode-search-modal__result-title", children: "\uC544\uB798 \uC870\uD569\uC73C\uB85C \uAC80\uC0C9 \uC2DC \uC8FC\uC18C\uB97C \uB354 \uC27D\uAC8C \uCC3E\uC744 \uC218 \uC788\uC5B4\uC694." }), _jsx("p", { className: "ncua-postcode-search-modal__result-desc", children: "\uB3C4\uB85C\uBA85+\uAC74\uBB3C\uBC88\uD638, \uC9C0\uC5ED\uBA85+\uC9C0\uBC88, \uC9C0\uC5ED\uBA85+\uAC74\uBB3C\uBA85(\uC544\uD30C\uD2B8\uBA85)" })] }))] }), !hasResults && _jsx(PostcodeSearchModal.Tip, {}), hasResults && (_jsxs(_Fragment, { children: [_jsxs("p", { className: "ncua-postcode-search-modal__count", children: ["\uAC80\uC0C9 ", _jsx("b", { children: totalCount }), "\uAC1C"] }), _jsx("ul", { className: "ncua-postcode-search-modal__list", children: results.map((result, index) => (_jsx("li", { className: "ncua-postcode-search-modal__item", children: _jsx(Radio, { name: RESULT_RADIO_NAME, value: result.zipCode, checked: selectedKey === resultKey(result), onChange: () => {
|
|
123
123
|
setSelectedKey(resultKey(result));
|