@ncds/ui-admin 0.0.8 → 0.0.10

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 (69) hide show
  1. package/dist/const/Icon/FinanceECommerce.js +7 -15
  2. package/dist/const/Icon/alertAndFeedback.js +7 -1
  3. package/dist/const/Icon/arrow.js +7 -11
  4. package/dist/const/Icon/chart.js +7 -1
  5. package/dist/const/Icon/chevron.js +7 -1
  6. package/dist/const/Icon/circle.js +7 -1
  7. package/dist/const/Icon/communication.js +7 -1
  8. package/dist/const/Icon/development.js +7 -12
  9. package/dist/const/Icon/editor.js +7 -1
  10. package/dist/const/Icon/education.js +7 -1
  11. package/dist/const/Icon/files.js +7 -1
  12. package/dist/const/Icon/general.js +31 -57
  13. package/dist/const/Icon/index.js +37 -31
  14. package/dist/const/Icon/layout.js +9 -13
  15. package/dist/const/Icon/mapsTravel.js +7 -1
  16. package/dist/const/Icon/mediaDevices.js +7 -11
  17. package/dist/const/Icon/message.js +7 -1
  18. package/dist/const/Icon/sales.js +7 -1
  19. package/dist/const/Icon/security.js +7 -1
  20. package/dist/const/Icon/shapes.js +9 -4
  21. package/dist/const/Icon/tag.js +7 -1
  22. package/dist/const/Icon/time.js +7 -1
  23. package/dist/const/Icon/users.js +7 -11
  24. package/dist/const/Icon/weather.js +7 -1
  25. package/dist/tsconfig.tsbuildinfo +1 -1
  26. package/dist/ui-admin/assets/images/sprite.png +0 -0
  27. package/dist/ui-admin/assets/scripts/index.js +16 -1
  28. package/dist/ui-admin/assets/scripts/test.js +9 -2
  29. package/dist/ui-admin/assets/styles/style.css +1438 -0
  30. package/dist/ui-admin/constant/color.js +38 -32
  31. package/dist/ui-admin/constant/size.js +5 -1
  32. package/dist/ui-admin/index.js +148 -13
  33. package/dist/ui-admin/src/components/button/Button.js +103 -68
  34. package/dist/ui-admin/src/components/button/ButtonGroup.js +93 -54
  35. package/dist/ui-admin/src/components/button/index.js +27 -2
  36. package/dist/ui-admin/src/components/checkbox/Checkbox.js +67 -26
  37. package/dist/ui-admin/src/components/checkbox/CheckboxInput.js +65 -30
  38. package/dist/ui-admin/src/components/checkbox/index.js +27 -2
  39. package/dist/ui-admin/src/components/index.js +115 -10
  40. package/dist/ui-admin/src/components/input/FileInput.js +1 -1
  41. package/dist/ui-admin/src/components/input/InputBase.js +162 -77
  42. package/dist/ui-admin/src/components/input/PasswordInput.js +84 -66
  43. package/dist/ui-admin/src/components/input/index.d.ts +0 -1
  44. package/dist/ui-admin/src/components/input/index.d.ts.map +1 -1
  45. package/dist/ui-admin/src/components/input/index.js +27 -3
  46. package/dist/ui-admin/src/components/pagination/NavButton.js +87 -60
  47. package/dist/ui-admin/src/components/pagination/Pagination.d.ts.map +1 -1
  48. package/dist/ui-admin/src/components/pagination/Pagination.js +169 -104
  49. package/dist/ui-admin/src/components/pagination/index.js +27 -2
  50. package/dist/ui-admin/src/components/radio/Radio.js +62 -26
  51. package/dist/ui-admin/src/components/radio/RadioInput.js +48 -27
  52. package/dist/ui-admin/src/components/radio/index.js +27 -2
  53. package/dist/ui-admin/src/components/select/Select.js +96 -33
  54. package/dist/ui-admin/src/components/select/index.js +16 -1
  55. package/dist/ui-admin/src/components/shared/hintText/HintText.js +40 -25
  56. package/dist/ui-admin/src/components/shared/hintText/index.js +16 -1
  57. package/dist/ui-admin/src/components/shared/index.js +27 -2
  58. package/dist/ui-admin/src/components/shared/label/Label.js +40 -25
  59. package/dist/ui-admin/src/components/shared/label/index.js +16 -1
  60. package/dist/ui-admin/src/components/spinner/Spinner.js +49 -17
  61. package/dist/ui-admin/src/components/spinner/index.js +16 -1
  62. package/dist/ui-admin/src/components/svg/SvgIcon.js +62 -27
  63. package/dist/ui-admin/src/components/svg/const.js +792 -786
  64. package/dist/ui-admin/src/components/svg/index.js +27 -2
  65. package/dist/ui-admin/src/components/tooltip/Tooltip.js +67 -18
  66. package/dist/ui-admin/src/components/tooltip/index.js +16 -1
  67. package/dist/ui-admin/src/constant/index.js +16 -1
  68. package/dist/ui-admin/src/constant/size.js +7 -1
  69. package/package.json +1 -1
@@ -1,70 +1,88 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.PasswordInput = void 0;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ var _react = require("react");
9
+ var _InputBase = require("./InputBase");
10
+ var _uiAdminIcon = require("@ncds/ui-admin-icon");
11
+ var _classnames = _interopRequireDefault(require("classnames"));
12
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
+ var __assign = void 0 && (void 0).__assign || function () {
14
+ __assign = Object.assign || function (t) {
15
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
16
+ s = arguments[i];
17
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
18
+ }
21
19
  return t;
20
+ };
21
+ return __assign.apply(this, arguments);
22
+ };
23
+ var __rest = void 0 && (void 0).__rest || function (s, e) {
24
+ var t = {};
25
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
26
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
27
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
28
+ }
29
+ return t;
22
30
  };
23
- import { jsx as _jsx } from "react/jsx-runtime";
24
- import { forwardRef, useEffect, useRef, useState } from 'react';
25
- import { InputBase } from './InputBase';
26
- import { Eye, EyeOff } from '@ncds/ui-admin-icon';
27
- import classNames from 'classnames';
28
31
  var svgSize = {
29
- xs: 14,
30
- md: 20,
32
+ xs: 14,
33
+ md: 20
31
34
  };
32
- export var PasswordInput = forwardRef(function (_a, ref) {
33
- var _b = _a.size, size = _b === void 0 ? 'md' : _b, props = __rest(_a, ["size"]);
34
- var inputRef = useRef(null);
35
- var _c = useState(false), isVisible = _c[0], setIsVisible = _c[1];
36
- var _d = useState(false), hasContent = _d[0], setHasContent = _d[1];
37
- var svgProps = {
38
- width: svgSize[size],
39
- height: svgSize[size],
40
- };
41
- var handleVisibilityChange = function () {
42
- setIsVisible(!isVisible);
43
- };
44
- useEffect(function () {
45
- if (inputRef.current) {
46
- setHasContent(!!inputRef.current.value);
47
- inputRef.current.addEventListener('input', function () {
48
- var _a;
49
- setHasContent(!!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value));
50
- });
51
- }
52
- }, []);
53
- return (_jsx(InputBase, __assign({ ref: function (node) {
54
- if (typeof ref === 'function') {
55
- ref(node);
56
- }
57
- else if (ref) {
58
- ref.current = node;
59
- }
60
- inputRef.current = node;
61
- }, type: isVisible ? 'text' : 'password', leadingElement: {
62
- type: 'icon',
63
- icon: 'lock-01',
64
- color: hasContent ? 'gray600' : 'gray300',
65
- }, trailingElement: {
66
- type: 'custom',
67
- placement: 'inside',
68
- children: (_jsx("button", __assign({ className: classNames('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__password-icon'), onClick: handleVisibilityChange }, { children: isVisible ? _jsx(Eye, __assign({}, svgProps)) : _jsx(EyeOff, __assign({}, svgProps)) }))),
69
- } }, props)));
70
- });
35
+ var PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
36
+ var _b = _a.size,
37
+ size = _b === void 0 ? 'md' : _b,
38
+ props = __rest(_a, ["size"]);
39
+ var inputRef = (0, _react.useRef)(null);
40
+ var _c = (0, _react.useState)(false),
41
+ isVisible = _c[0],
42
+ setIsVisible = _c[1];
43
+ var _d = (0, _react.useState)(false),
44
+ hasContent = _d[0],
45
+ setHasContent = _d[1];
46
+ var svgProps = {
47
+ width: svgSize[size],
48
+ height: svgSize[size]
49
+ };
50
+ var handleVisibilityChange = function () {
51
+ setIsVisible(!isVisible);
52
+ };
53
+ (0, _react.useEffect)(function () {
54
+ if (inputRef.current) {
55
+ setHasContent(!!inputRef.current.value);
56
+ inputRef.current.addEventListener('input', function () {
57
+ var _a;
58
+ setHasContent(!!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value));
59
+ });
60
+ }
61
+ }, []);
62
+ return (0, _jsxRuntime.jsx)(_InputBase.InputBase, __assign({
63
+ ref: function (node) {
64
+ if (typeof ref === 'function') {
65
+ ref(node);
66
+ } else if (ref) {
67
+ ref.current = node;
68
+ }
69
+ inputRef.current = node;
70
+ },
71
+ type: isVisible ? 'text' : 'password',
72
+ leadingElement: {
73
+ type: 'icon',
74
+ icon: 'lock-01',
75
+ color: hasContent ? 'gray600' : 'gray300'
76
+ },
77
+ trailingElement: {
78
+ type: 'custom',
79
+ placement: 'inside',
80
+ children: (0, _jsxRuntime.jsx)("button", __assign({
81
+ className: (0, _classnames.default)('ncua-input__icon-wrap', 'ncua-input__right-icon', 'ncua-input__password-icon'),
82
+ onClick: handleVisibilityChange
83
+ }, {
84
+ children: isVisible ? (0, _jsxRuntime.jsx)(_uiAdminIcon.Eye, __assign({}, svgProps)) : (0, _jsxRuntime.jsx)(_uiAdminIcon.EyeOff, __assign({}, svgProps))
85
+ }))
86
+ }
87
+ }, props));
88
+ });
@@ -1,4 +1,3 @@
1
- export * from './FileInput';
2
1
  export * from './InputBase';
3
2
  export * from './PasswordInput';
4
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}
@@ -1,3 +1,27 @@
1
- export * from './FileInput';
2
- export * from './InputBase';
3
- export * from './PasswordInput';
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _InputBase = require("./InputBase");
7
+ Object.keys(_InputBase).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _InputBase[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function () {
13
+ return _InputBase[key];
14
+ }
15
+ });
16
+ });
17
+ var _PasswordInput = require("./PasswordInput");
18
+ Object.keys(_PasswordInput).forEach(function (key) {
19
+ if (key === "default" || key === "__esModule") return;
20
+ if (key in exports && exports[key] === _PasswordInput[key]) return;
21
+ Object.defineProperty(exports, key, {
22
+ enumerable: true,
23
+ get: function () {
24
+ return _PasswordInput[key];
25
+ }
26
+ });
27
+ });
@@ -1,64 +1,91 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.NavButton = void 0;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ var _Button = require("../button/Button");
9
+ var __assign = void 0 && (void 0).__assign || function () {
10
+ __assign = Object.assign || function (t) {
11
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
12
+ s = arguments[i];
13
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
14
+ }
15
+ return t;
16
+ };
17
+ return __assign.apply(this, arguments);
11
18
  };
12
- import { jsx as _jsx } from "react/jsx-runtime";
13
- import { Button } from '../button/Button';
14
19
  var NAV_BUTTON_CONFIG = {
15
- first: {
16
- label: '처음',
17
- className: 'ncua-pagination__first',
18
- getIcon: function (isPC) { return 'chevron-left-double'; },
19
- },
20
- prev: {
21
- label: '이전',
22
- className: 'ncua-pagination__before',
23
- getIcon: function (isPC) { return (isPC ? 'chevron-left' : 'arrow-left'); },
24
- },
25
- next: {
26
- label: '다음',
27
- className: 'ncua-pagination__next',
28
- getIcon: function (isPC) { return (isPC ? 'chevron-right' : 'arrow-right'); },
29
- },
30
- last: {
31
- label: '마지막',
32
- className: 'ncua-pagination__last',
33
- getIcon: function (isPC) { return 'chevron-right-double'; },
34
- },
35
- };
36
- export var NavButton = function (_a) {
37
- var type = _a.type, as = _a.as, isPC = _a.isPC, noPrev = _a.noPrev, noNext = _a.noNext, href = _a.href, target = _a.target, onClick = _a.onClick;
38
- var config = NAV_BUTTON_CONFIG[type];
39
- var isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
40
- var isFirstOrPrev = type === 'first' || type === 'prev';
41
- var isNextOrLast = type === 'next' || type === 'last';
42
- var disabled = isFirstOrPrev ? noPrev : isNextOrLast ? noNext : false;
43
- // key를 제외한 공통 props
44
- var buttonProps = {
45
- label: config.label,
46
- className: config.className,
47
- onlyIcon: true,
48
- leadingIcon: {
49
- type: 'icon',
50
- icon: config.getIcon(isPC),
51
- color: disabled ? 'gray200' : 'gray700',
52
- },
53
- hierarchy: 'secondary-gray',
54
- size: 'xs',
55
- disabled: disabled,
56
- onClick: onClick,
57
- };
58
- // key 값 별도 계산
59
- var buttonKey = isNavigationButton ? "".concat(isPC ? 'pc' : 'mobile', "-").concat(type) : undefined;
60
- if (as === 'a') {
61
- return _jsx(Button, __assign({ as: "a", href: href, target: target }, buttonProps), buttonKey);
20
+ first: {
21
+ label: '처음',
22
+ className: 'ncua-pagination__first',
23
+ getIcon: function (isPC) {
24
+ return 'chevron-left-double';
62
25
  }
63
- return _jsx(Button, __assign({ as: "button" }, buttonProps), buttonKey);
26
+ },
27
+ prev: {
28
+ label: '이전',
29
+ className: 'ncua-pagination__before',
30
+ getIcon: function (isPC) {
31
+ return isPC ? 'chevron-left' : 'arrow-left';
32
+ }
33
+ },
34
+ next: {
35
+ label: '다음',
36
+ className: 'ncua-pagination__next',
37
+ getIcon: function (isPC) {
38
+ return isPC ? 'chevron-right' : 'arrow-right';
39
+ }
40
+ },
41
+ last: {
42
+ label: '마지막',
43
+ className: 'ncua-pagination__last',
44
+ getIcon: function (isPC) {
45
+ return 'chevron-right-double';
46
+ }
47
+ }
48
+ };
49
+ var NavButton = function (_a) {
50
+ var type = _a.type,
51
+ as = _a.as,
52
+ isPC = _a.isPC,
53
+ noPrev = _a.noPrev,
54
+ noNext = _a.noNext,
55
+ href = _a.href,
56
+ target = _a.target,
57
+ onClick = _a.onClick;
58
+ var config = NAV_BUTTON_CONFIG[type];
59
+ var isNavigationButton = type === 'first' || type === 'prev' || type === 'next' || type === 'last';
60
+ var isFirstOrPrev = type === 'first' || type === 'prev';
61
+ var isNextOrLast = type === 'next' || type === 'last';
62
+ var disabled = isFirstOrPrev ? noPrev : isNextOrLast ? noNext : false;
63
+ // key를 제외한 공통 props
64
+ var buttonProps = {
65
+ label: config.label,
66
+ className: config.className,
67
+ onlyIcon: true,
68
+ leadingIcon: {
69
+ type: 'icon',
70
+ icon: config.getIcon(isPC),
71
+ color: disabled ? 'gray200' : 'gray700'
72
+ },
73
+ hierarchy: 'secondary-gray',
74
+ size: 'xs',
75
+ disabled: disabled,
76
+ onClick: onClick
77
+ };
78
+ // key 값 별도 계산
79
+ var buttonKey = isNavigationButton ? "".concat(isPC ? 'pc' : 'mobile', "-").concat(type) : undefined;
80
+ if (as === 'a') {
81
+ return (0, _jsxRuntime.jsx)(_Button.Button, __assign({
82
+ as: "a",
83
+ href: href,
84
+ target: target
85
+ }, buttonProps), buttonKey);
86
+ }
87
+ return (0, _jsxRuntime.jsx)(_Button.Button, __assign({
88
+ as: "button"
89
+ }, buttonProps), buttonKey);
64
90
  };
91
+ exports.NavButton = NavButton;
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/pagination/Pagination.tsx"],"names":[],"mappings":"AAMA,KAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,KAAK,qBAAqB,GAAG,qBAAqB,GAAG;IACnD,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,KAAK,qBAAqB,GAAG,qBAAqB,GAAG;IACnD,EAAE,EAAE,GAAG,CAAC;IACR,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,eAAe,GAAG,qBAAqB,GAAG,qBAAqB,CAAC;AAIrE,eAAO,MAAM,UAAU,wGASpB,eAAe,4CAwHjB,CAAC"}
1
+ {"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/pagination/Pagination.tsx"],"names":[],"mappings":"AAMA,KAAK,qBAAqB,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,KAAK,qBAAqB,GAAG,qBAAqB,GAAG;IACnD,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB,CAAC;AAEF,KAAK,qBAAqB,GAAG,qBAAqB,GAAG;IACnD,EAAE,EAAE,GAAG,CAAC;IACR,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,eAAe,GAAG,qBAAqB,GAAG,qBAAqB,CAAC;AAIrE,eAAO,MAAM,UAAU,wGASpB,eAAe,4CAuHjB,CAAC"}
@@ -1,109 +1,174 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.Pagination = void 0;
7
+ var _jsxRuntime = require("react/jsx-runtime");
8
+ var _classnames = _interopRequireDefault(require("classnames"));
9
+ var _lodashEs = require("lodash-es");
10
+ var _react = require("react");
11
+ var _constant = require("../../constant");
12
+ var _NavButton = require("./NavButton");
13
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
+ var __assign = void 0 && (void 0).__assign || function () {
15
+ __assign = Object.assign || function (t) {
16
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
17
+ s = arguments[i];
18
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
19
+ }
21
20
  return t;
21
+ };
22
+ return __assign.apply(this, arguments);
23
+ };
24
+ var __rest = void 0 && (void 0).__rest || function (s, e) {
25
+ var t = {};
26
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
27
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
28
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
29
+ }
30
+ return t;
22
31
  };
23
- import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
24
- import classNames from 'classnames';
25
- import { isFunction, range, uniqueId } from 'lodash-es';
26
- import { useEffect, useState } from 'react';
27
- import { MINIMUM_PC_SIZE } from '../../constant';
28
- import { NavButton } from './NavButton';
29
32
  // 네비게이션 버튼 설정
30
- export var Pagination = function (_a) {
31
- var _b = _a.className, className = _b === void 0 ? '' : _b, totalCount = _a.totalCount, _c = _a.itemCountPerPage, itemCountPerPage = _c === void 0 ? 10 : _c, _d = _a.pageCount, pageCount = _d === void 0 ? 10 : _d, currentPage = _a.currentPage, _e = _a.as, as = _e === void 0 ? 'button' : _e, onPageChange = _a.onPageChange, restProps = __rest(_a, ["className", "totalCount", "itemCountPerPage", "pageCount", "currentPage", "as", "onPageChange"]);
32
- var totalPage = Math.ceil(totalCount / itemCountPerPage);
33
- var _f = useState(1), start = _f[0], setStart = _f[1];
34
- var _g = useState(globalThis.innerWidth > MINIMUM_PC_SIZE), isPC = _g[0], setIsPC = _g[1];
35
- var noPrev = start === 1;
36
- var noNext = start + pageCount - 1 >= totalPage;
37
- var showJumpPageButton = totalPage > pageCount;
38
- var handleClickButton = function (pageNum) {
39
- isFunction(onPageChange);
40
- if (isFunction(onPageChange)) {
41
- onPageChange(pageNum);
42
- }
33
+ var Pagination = function (_a) {
34
+ var _b = _a.className,
35
+ className = _b === void 0 ? '' : _b,
36
+ totalCount = _a.totalCount,
37
+ _c = _a.itemCountPerPage,
38
+ itemCountPerPage = _c === void 0 ? 10 : _c,
39
+ _d = _a.pageCount,
40
+ pageCount = _d === void 0 ? 10 : _d,
41
+ currentPage = _a.currentPage,
42
+ _e = _a.as,
43
+ as = _e === void 0 ? 'button' : _e,
44
+ onPageChange = _a.onPageChange,
45
+ restProps = __rest(_a, ["className", "totalCount", "itemCountPerPage", "pageCount", "currentPage", "as", "onPageChange"]);
46
+ var totalPage = Math.ceil(totalCount / itemCountPerPage);
47
+ var _f = (0, _react.useState)(1),
48
+ start = _f[0],
49
+ setStart = _f[1];
50
+ var _g = (0, _react.useState)(globalThis.innerWidth > _constant.MINIMUM_PC_SIZE),
51
+ isPC = _g[0],
52
+ setIsPC = _g[1];
53
+ var noPrev = start === 1;
54
+ var noNext = start + pageCount - 1 >= totalPage;
55
+ var showJumpPageButton = totalPage > pageCount;
56
+ var handleClickButton = function (pageNum) {
57
+ if ((0, _lodashEs.isFunction)(onPageChange)) {
58
+ onPageChange(pageNum);
59
+ }
60
+ };
61
+ (0, _react.useEffect)(function () {
62
+ if (currentPage === start + pageCount) {
63
+ setStart(start + pageCount);
64
+ }
65
+ if (currentPage > start + pageCount) {
66
+ var newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
67
+ setStart(newStart);
68
+ }
69
+ if (currentPage < start) {
70
+ setStart(start - pageCount);
71
+ }
72
+ if (currentPage === 1) {
73
+ setStart(1);
74
+ }
75
+ if (currentPage === totalPage) {
76
+ var lastGroupStart = Math.max(1, totalPage - pageCount + 1);
77
+ setStart(lastGroupStart);
78
+ }
79
+ }, [currentPage]);
80
+ (0, _react.useEffect)(function () {
81
+ var mql = globalThis.matchMedia("(min-width: ".concat(_constant.MINIMUM_PC_SIZE, "px)"));
82
+ setIsPC(mql.matches);
83
+ var handleResize = function (e) {
84
+ setIsPC(e.matches);
85
+ };
86
+ mql.addEventListener('change', handleResize);
87
+ return function () {
88
+ return mql.removeEventListener('change', handleResize);
43
89
  };
44
- useEffect(function () {
45
- if (currentPage === start + pageCount) {
46
- setStart(start + pageCount);
47
- }
48
- if (currentPage > start + pageCount) {
49
- var newStart = Math.floor((currentPage - 1) / pageCount) * pageCount + 1;
50
- setStart(newStart);
51
- }
52
- if (currentPage < start) {
53
- setStart(start - pageCount);
54
- }
55
- if (currentPage === 1) {
56
- setStart(1);
57
- }
58
- if (currentPage === totalPage) {
59
- var lastGroupStart = Math.max(1, totalPage - pageCount + 1);
60
- setStart(lastGroupStart);
61
- }
62
- }, [currentPage]);
63
- useEffect(function () {
64
- var mql = globalThis.matchMedia("(min-width: ".concat(MINIMUM_PC_SIZE, "px)"));
65
- setIsPC(mql.matches);
66
- var handleResize = function (e) {
67
- setIsPC(e.matches);
68
- };
69
- mql.addEventListener('change', handleResize);
70
- return function () { return mql.removeEventListener('change', handleResize); };
71
- }, []);
72
- return (_jsx(_Fragment, { children: _jsxs("div", __assign({ className: classNames('ncua-pagination', className) }, { children: [showJumpPageButton && (_jsxs(_Fragment, { children: [NavButton({
73
- type: 'first',
74
- as: as,
75
- isPC: isPC,
76
- noPrev: noPrev,
77
- noNext: noNext,
78
- href: restProps.href || '',
79
- target: restProps.target || '',
80
- onClick: function () { return handleClickButton(1); },
81
- }), NavButton({
82
- type: 'prev',
83
- as: as,
84
- isPC: isPC,
85
- noPrev: noPrev,
86
- noNext: noNext,
87
- href: restProps.href || '',
88
- target: restProps.target || '',
89
- onClick: function () { return handleClickButton(Math.max(start - pageCount, 1)); },
90
- })] })), _jsx("ul", __assign({ className: "ncua-pagination__list" }, { children: range(start, Math.min(totalPage + 1, start + pageCount)).map(function (pageNumber, i) { return (_jsx("li", __assign({ className: "ncua-pagination__item" }, { children: _jsx("button", __assign({ className: classNames('ncua-pagination__page-num', { 'is-current': pageNumber === currentPage }), onClick: function () { return handleClickButton(start + i); } }, restProps, { children: start + i })) }), uniqueId('ncua-pagination__page-num'))); }) })), _jsxs("p", __assign({ className: "ncua-pagination__page-info" }, { children: [_jsx("em", __assign({ className: "ncua-pagination__current-num" }, { children: currentPage })), " / ", totalPage] })), showJumpPageButton && (_jsxs(_Fragment, { children: [NavButton({
91
- type: 'next',
92
- as: as,
93
- isPC: isPC,
94
- noPrev: noPrev,
95
- noNext: noNext,
96
- href: restProps.href || '',
97
- target: restProps.target || '',
98
- onClick: function () { return handleClickButton(Math.min(start + pageCount, totalPage)); },
99
- }), NavButton({
100
- type: 'last',
101
- as: as,
102
- isPC: isPC,
103
- noPrev: noPrev,
104
- noNext: noNext,
105
- href: restProps.href || '',
106
- target: restProps.target || '',
107
- onClick: function () { return handleClickButton(totalPage); },
108
- })] }))] })) }));
90
+ }, []);
91
+ return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
92
+ children: (0, _jsxRuntime.jsxs)("div", __assign({
93
+ className: (0, _classnames.default)('ncua-pagination', className)
94
+ }, {
95
+ children: [showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
96
+ children: [(0, _NavButton.NavButton)({
97
+ type: 'first',
98
+ as: as,
99
+ isPC: isPC,
100
+ noPrev: noPrev,
101
+ noNext: noNext,
102
+ href: restProps.href || '',
103
+ target: restProps.target || '',
104
+ onClick: function () {
105
+ return handleClickButton(1);
106
+ }
107
+ }), (0, _NavButton.NavButton)({
108
+ type: 'prev',
109
+ as: as,
110
+ isPC: isPC,
111
+ noPrev: noPrev,
112
+ noNext: noNext,
113
+ href: restProps.href || '',
114
+ target: restProps.target || '',
115
+ onClick: function () {
116
+ return handleClickButton(Math.max(start - pageCount, 1));
117
+ }
118
+ })]
119
+ }), (0, _jsxRuntime.jsx)("ul", __assign({
120
+ className: "ncua-pagination__list"
121
+ }, {
122
+ children: (0, _lodashEs.range)(start, Math.min(totalPage + 1, start + pageCount)).map(function (pageNumber, i) {
123
+ return (0, _jsxRuntime.jsx)("li", __assign({
124
+ className: "ncua-pagination__item"
125
+ }, {
126
+ children: (0, _jsxRuntime.jsx)("button", __assign({
127
+ className: (0, _classnames.default)('ncua-pagination__page-num', {
128
+ 'is-current': pageNumber === currentPage
129
+ }),
130
+ onClick: function () {
131
+ return handleClickButton(start + i);
132
+ }
133
+ }, restProps, {
134
+ children: start + i
135
+ }))
136
+ }), (0, _lodashEs.uniqueId)('ncua-pagination__page-num'));
137
+ })
138
+ })), (0, _jsxRuntime.jsxs)("p", __assign({
139
+ className: "ncua-pagination__page-info"
140
+ }, {
141
+ children: [(0, _jsxRuntime.jsx)("em", __assign({
142
+ className: "ncua-pagination__current-num"
143
+ }, {
144
+ children: currentPage
145
+ })), " / ", totalPage]
146
+ })), showJumpPageButton && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
147
+ children: [(0, _NavButton.NavButton)({
148
+ type: 'next',
149
+ as: as,
150
+ isPC: isPC,
151
+ noPrev: noPrev,
152
+ noNext: noNext,
153
+ href: restProps.href || '',
154
+ target: restProps.target || '',
155
+ onClick: function () {
156
+ return handleClickButton(Math.min(start + pageCount, totalPage));
157
+ }
158
+ }), (0, _NavButton.NavButton)({
159
+ type: 'last',
160
+ as: as,
161
+ isPC: isPC,
162
+ noPrev: noPrev,
163
+ noNext: noNext,
164
+ href: restProps.href || '',
165
+ target: restProps.target || '',
166
+ onClick: function () {
167
+ return handleClickButton(totalPage);
168
+ }
169
+ })]
170
+ })]
171
+ }))
172
+ });
109
173
  };
174
+ exports.Pagination = Pagination;