@jk-core/components 1.1.11 → 1.1.13
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/README.md +73 -73
- package/dist/index.js +278 -277
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +7 -7
- package/dist/index.umd.cjs.map +1 -1
- package/dist/src/common/DropDown/index.d.ts +5 -1
- package/package.json +99 -99
- package/src/Calendar/Calendar.module.scss +213 -213
- package/src/Calendar/RangeCalendar.tsx +125 -125
- package/src/Calendar/ScrollCalendar.module.scss +214 -214
- package/src/Calendar/ScrollCalendar.tsx +124 -124
- package/src/Calendar/SingleCalendar.tsx +121 -121
- package/src/Calendar/components/DateLabel/DateLabel.module.scss +89 -89
- package/src/Calendar/components/DateLabel/index.tsx +91 -91
- package/src/Calendar/components/DayTile/DayTile.module.scss +117 -117
- package/src/Calendar/components/DayTile/index.tsx +108 -108
- package/src/Calendar/components/MonthTile/MonthTile.module.scss +59 -59
- package/src/Calendar/components/MonthTile/index.tsx +50 -50
- package/src/Calendar/components/ViewSelector/ViewSelector.module.scss +48 -48
- package/src/Calendar/components/ViewSelector/index.tsx +49 -49
- package/src/Calendar/components/YearTile/YearTile.module.scss +85 -85
- package/src/Calendar/components/YearTile/index.tsx +65 -65
- package/src/Calendar/hooks/useCalendarNav.ts +83 -83
- package/src/Calendar/hooks/useDateSelect.ts +54 -54
- package/src/Calendar/index.scss +189 -189
- package/src/Calendar/index.tsx +66 -66
- package/src/Calendar/type.ts +3 -3
- package/src/Calendar/utils/getWeeksInMonth.ts +45 -45
- package/src/Calendar/utils/isInRange.ts +8 -8
- package/src/Calendar/utils/isSameDay.ts +21 -21
- package/src/assets/arrow.svg +11 -11
- package/src/assets/close.svg +15 -15
- package/src/assets/drop-arrow.svg +3 -3
- package/src/common/Accordion/Accordion.module.scss +53 -53
- package/src/common/Accordion/arrow-down.svg +3 -3
- package/src/common/Accordion/arrow-up.svg +3 -3
- package/src/common/Accordion/index.tsx +54 -54
- package/src/common/Breadcrumbs/Breadcrumbs.module.scss +46 -46
- package/src/common/Breadcrumbs/home.svg +5 -5
- package/src/common/Breadcrumbs/index.tsx +82 -82
- package/src/common/Button/Button.module.scss +127 -127
- package/src/common/Button/index.tsx +60 -60
- package/src/common/Card/Card.module.scss +28 -28
- package/src/common/Card/index.tsx +19 -19
- package/src/common/Divider/Divider.module.scss +101 -101
- package/src/common/Divider/index.tsx +24 -24
- package/src/common/DropDown/DropDown.module.scss +135 -135
- package/src/common/DropDown/List.tsx +156 -156
- package/src/common/DropDown/arrow-down.svg +3 -3
- package/src/common/DropDown/index.tsx +108 -103
- package/src/common/DropDown/search.svg +4 -4
- package/src/common/Pagination/Pagination.module.scss +210 -210
- package/src/common/Pagination/arrow-left.svg +11 -11
- package/src/common/Pagination/arrow-right.svg +11 -11
- package/src/common/Pagination/index.tsx +156 -156
- package/src/common/SegmentButton/SegmentButton.module.scss +45 -45
- package/src/common/SegmentButton/index.tsx +79 -79
- package/src/common/Skeleton/Skeleton.module.scss +80 -80
- package/src/common/Skeleton/index.tsx +47 -47
- package/src/common/SwitchButton/SwitchButton.module.scss +65 -65
- package/src/common/SwitchButton/index.tsx +56 -56
- package/src/common/Table/Table.module.scss +70 -70
- package/src/common/Table/index.tsx +128 -128
- package/src/index.scss +1 -1
- package/src/index.tsx +21 -21
- package/src/styles/color.scss +346 -346
- package/src/styles/font-face.scss +18 -18
- package/src/styles/font.scss +49 -49
- package/src/styles/mediaQuery.scss +22 -22
- package/src/styles/scrollbar.scss +71 -71
- package/src/svg.d.ts +6 -6
- package/src/utils/styles/mediaQuery.scss +22 -22
- package/src/utils/ts/allowDecimal.ts +4 -4
- package/src/utils/ts/autoHypen.ts +33 -33
- package/src/utils/ts/calculateMax.ts +24 -24
- package/src/utils/ts/checkIsMobilePlatform.ts +15 -15
- package/src/utils/ts/formatFileSize.ts +16 -16
- package/src/utils/ts/formatMoney.ts +16 -16
- package/src/utils/ts/gradientRatio.ts +61 -61
- package/src/utils/ts/kiloToMega.ts +30 -30
- package/src/utils/ts/maskingPhone.ts +8 -8
- package/src/utils/ts/toQueryString.ts +7 -7
- package/src/utils/ts/valueAsNumber.ts +15 -15
- package/src/vite-env.d.ts +2 -2
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 특정 퍼센트에서 시작 색상과 끝 색상 사이의 그라디언트 색상을 계산합니다.
|
|
3
|
-
*
|
|
4
|
-
* @param {Object} params - 그라디언트 계산을 위한 매개변수입니다.
|
|
5
|
-
* @param {number} params.currPercent - 그라디언트 색상을 계산할 현재 퍼센트입니다.
|
|
6
|
-
* @param {number} params.startPercent - 그라디언트의 시작 퍼센트입니다.
|
|
7
|
-
* @param {string} params.startColor - 그라디언트의 시작 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
|
|
8
|
-
* @param {number} params.endPercent - 그라디언트의 끝 퍼센트입니다.
|
|
9
|
-
* @param {string} params.endColor - 그라디언트의 끝 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
|
|
10
|
-
* @returns {string} 계산된 그라디언트 색상입니다. 16진수 형식(앞에 # 없이)으로 반환됩니다.
|
|
11
|
-
*/
|
|
12
|
-
const gradientRatio = ({
|
|
13
|
-
currPercent,
|
|
14
|
-
startPercent,
|
|
15
|
-
startColor,
|
|
16
|
-
endPercent,
|
|
17
|
-
endColor,
|
|
18
|
-
}: {
|
|
19
|
-
currPercent: number;
|
|
20
|
-
startPercent: number;
|
|
21
|
-
startColor: string;
|
|
22
|
-
endPercent: number;
|
|
23
|
-
endColor: string;
|
|
24
|
-
}) => {
|
|
25
|
-
if (currPercent < startPercent) return startColor;
|
|
26
|
-
if (currPercent > endPercent) return endColor;
|
|
27
|
-
|
|
28
|
-
const start = {
|
|
29
|
-
R: parseInt(startColor.substr(0, 2), 16),
|
|
30
|
-
G: parseInt(startColor.substr(2, 2), 16),
|
|
31
|
-
B: parseInt(startColor.substr(4, 2), 16),
|
|
32
|
-
};
|
|
33
|
-
const end = {
|
|
34
|
-
R: parseInt(endColor.substr(0, 2), 16),
|
|
35
|
-
G: parseInt(endColor.substr(2, 2), 16),
|
|
36
|
-
B: parseInt(endColor.substr(4, 2), 16),
|
|
37
|
-
};
|
|
38
|
-
const R = {
|
|
39
|
-
coefficient: (end.R - start.R) / (endPercent - startPercent),
|
|
40
|
-
intercept: start.R - (((end.R - start.R) / (endPercent - startPercent)) * startPercent),
|
|
41
|
-
value: '',
|
|
42
|
-
};
|
|
43
|
-
const G = {
|
|
44
|
-
coefficient: (end.G - start.G) / (endPercent - startPercent),
|
|
45
|
-
intercept: start.G - (((end.G - start.G) / (endPercent - startPercent)) * startPercent),
|
|
46
|
-
value: '',
|
|
47
|
-
};
|
|
48
|
-
const B = {
|
|
49
|
-
coefficient: (end.B - start.B) / (endPercent - startPercent),
|
|
50
|
-
intercept: start.B - (((end.B - start.B) / (endPercent - startPercent)) * startPercent),
|
|
51
|
-
value: '',
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
R.value = Math.round(R.coefficient * currPercent + R.intercept).toString(16).padStart(2, '0');
|
|
55
|
-
G.value = Math.round(G.coefficient * currPercent + G.intercept).toString(16).padStart(2, '0');
|
|
56
|
-
B.value = Math.round(B.coefficient * currPercent + B.intercept).toString(16).padStart(2, '0');
|
|
57
|
-
|
|
58
|
-
return (R.value + G.value + B.value);
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
export default gradientRatio;
|
|
1
|
+
/**
|
|
2
|
+
* 특정 퍼센트에서 시작 색상과 끝 색상 사이의 그라디언트 색상을 계산합니다.
|
|
3
|
+
*
|
|
4
|
+
* @param {Object} params - 그라디언트 계산을 위한 매개변수입니다.
|
|
5
|
+
* @param {number} params.currPercent - 그라디언트 색상을 계산할 현재 퍼센트입니다.
|
|
6
|
+
* @param {number} params.startPercent - 그라디언트의 시작 퍼센트입니다.
|
|
7
|
+
* @param {string} params.startColor - 그라디언트의 시작 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
|
|
8
|
+
* @param {number} params.endPercent - 그라디언트의 끝 퍼센트입니다.
|
|
9
|
+
* @param {string} params.endColor - 그라디언트의 끝 색상입니다. 16진수 형식(앞에 # 없이)으로 입력합니다.
|
|
10
|
+
* @returns {string} 계산된 그라디언트 색상입니다. 16진수 형식(앞에 # 없이)으로 반환됩니다.
|
|
11
|
+
*/
|
|
12
|
+
const gradientRatio = ({
|
|
13
|
+
currPercent,
|
|
14
|
+
startPercent,
|
|
15
|
+
startColor,
|
|
16
|
+
endPercent,
|
|
17
|
+
endColor,
|
|
18
|
+
}: {
|
|
19
|
+
currPercent: number;
|
|
20
|
+
startPercent: number;
|
|
21
|
+
startColor: string;
|
|
22
|
+
endPercent: number;
|
|
23
|
+
endColor: string;
|
|
24
|
+
}) => {
|
|
25
|
+
if (currPercent < startPercent) return startColor;
|
|
26
|
+
if (currPercent > endPercent) return endColor;
|
|
27
|
+
|
|
28
|
+
const start = {
|
|
29
|
+
R: parseInt(startColor.substr(0, 2), 16),
|
|
30
|
+
G: parseInt(startColor.substr(2, 2), 16),
|
|
31
|
+
B: parseInt(startColor.substr(4, 2), 16),
|
|
32
|
+
};
|
|
33
|
+
const end = {
|
|
34
|
+
R: parseInt(endColor.substr(0, 2), 16),
|
|
35
|
+
G: parseInt(endColor.substr(2, 2), 16),
|
|
36
|
+
B: parseInt(endColor.substr(4, 2), 16),
|
|
37
|
+
};
|
|
38
|
+
const R = {
|
|
39
|
+
coefficient: (end.R - start.R) / (endPercent - startPercent),
|
|
40
|
+
intercept: start.R - (((end.R - start.R) / (endPercent - startPercent)) * startPercent),
|
|
41
|
+
value: '',
|
|
42
|
+
};
|
|
43
|
+
const G = {
|
|
44
|
+
coefficient: (end.G - start.G) / (endPercent - startPercent),
|
|
45
|
+
intercept: start.G - (((end.G - start.G) / (endPercent - startPercent)) * startPercent),
|
|
46
|
+
value: '',
|
|
47
|
+
};
|
|
48
|
+
const B = {
|
|
49
|
+
coefficient: (end.B - start.B) / (endPercent - startPercent),
|
|
50
|
+
intercept: start.B - (((end.B - start.B) / (endPercent - startPercent)) * startPercent),
|
|
51
|
+
value: '',
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
R.value = Math.round(R.coefficient * currPercent + R.intercept).toString(16).padStart(2, '0');
|
|
55
|
+
G.value = Math.round(G.coefficient * currPercent + G.intercept).toString(16).padStart(2, '0');
|
|
56
|
+
B.value = Math.round(B.coefficient * currPercent + B.intercept).toString(16).padStart(2, '0');
|
|
57
|
+
|
|
58
|
+
return (R.value + G.value + B.value);
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
export default gradientRatio;
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
import { roundNum } from '@jk-core/utils';
|
|
2
|
-
|
|
3
|
-
const KiloToMega = (amount: number | null | undefined, unit = 'Wh', scale = 2, isKilo = true) => {
|
|
4
|
-
const validAmount = amount ?? 0;
|
|
5
|
-
|
|
6
|
-
if (!isKilo) {
|
|
7
|
-
if (roundNum(validAmount / Math.pow(10, 9)) >= 1) {
|
|
8
|
-
return { generation: roundNum(validAmount / Math.pow(10, 9), scale) || 0, unit: `G${unit}`, total: `${roundNum(validAmount / Math.pow(10, 9), scale)} G${unit}` };
|
|
9
|
-
}
|
|
10
|
-
if (roundNum(validAmount / Math.pow(10, 6)) >= 1) {
|
|
11
|
-
return { generation: roundNum(validAmount / Math.pow(10, 6), scale) || 0, unit: `M${unit}`, total: `${roundNum(validAmount / Math.pow(10, 6), scale)} M${unit}` };
|
|
12
|
-
}
|
|
13
|
-
if (roundNum(validAmount / Math.pow(10, 3)) >= 1) {
|
|
14
|
-
return { generation: roundNum(validAmount / Math.pow(10, 3), scale), unit: `k${unit}`, total: `${roundNum(validAmount / Math.pow(10, 3), scale).toLocaleString()} k${unit}` };
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
return { generation: roundNum(validAmount, scale), unit: `${unit}`, total: `${roundNum(validAmount, scale).toLocaleString()} ${unit}` };
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
if (roundNum(validAmount / Math.pow(10, 6)) >= 1) {
|
|
21
|
-
return { generation: roundNum(validAmount / Math.pow(10, 6), scale) || 0, unit: `G${unit}`, total: `${roundNum(validAmount / Math.pow(10, 6), scale)} G${unit}` };
|
|
22
|
-
}
|
|
23
|
-
if (roundNum(validAmount / Math.pow(10, 3)) >= 1) {
|
|
24
|
-
return { generation: roundNum(validAmount / Math.pow(10, 3), scale), unit: `M${unit}`, total: `${roundNum(validAmount / Math.pow(10, 3), scale).toLocaleString()} M${unit}` };
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
return { generation: roundNum(validAmount, scale), unit: `k${unit}`, total: `${roundNum(validAmount, scale).toLocaleString()} k${unit}` };
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export default KiloToMega;
|
|
1
|
+
import { roundNum } from '@jk-core/utils';
|
|
2
|
+
|
|
3
|
+
const KiloToMega = (amount: number | null | undefined, unit = 'Wh', scale = 2, isKilo = true) => {
|
|
4
|
+
const validAmount = amount ?? 0;
|
|
5
|
+
|
|
6
|
+
if (!isKilo) {
|
|
7
|
+
if (roundNum(validAmount / Math.pow(10, 9)) >= 1) {
|
|
8
|
+
return { generation: roundNum(validAmount / Math.pow(10, 9), scale) || 0, unit: `G${unit}`, total: `${roundNum(validAmount / Math.pow(10, 9), scale)} G${unit}` };
|
|
9
|
+
}
|
|
10
|
+
if (roundNum(validAmount / Math.pow(10, 6)) >= 1) {
|
|
11
|
+
return { generation: roundNum(validAmount / Math.pow(10, 6), scale) || 0, unit: `M${unit}`, total: `${roundNum(validAmount / Math.pow(10, 6), scale)} M${unit}` };
|
|
12
|
+
}
|
|
13
|
+
if (roundNum(validAmount / Math.pow(10, 3)) >= 1) {
|
|
14
|
+
return { generation: roundNum(validAmount / Math.pow(10, 3), scale), unit: `k${unit}`, total: `${roundNum(validAmount / Math.pow(10, 3), scale).toLocaleString()} k${unit}` };
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
return { generation: roundNum(validAmount, scale), unit: `${unit}`, total: `${roundNum(validAmount, scale).toLocaleString()} ${unit}` };
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
if (roundNum(validAmount / Math.pow(10, 6)) >= 1) {
|
|
21
|
+
return { generation: roundNum(validAmount / Math.pow(10, 6), scale) || 0, unit: `G${unit}`, total: `${roundNum(validAmount / Math.pow(10, 6), scale)} G${unit}` };
|
|
22
|
+
}
|
|
23
|
+
if (roundNum(validAmount / Math.pow(10, 3)) >= 1) {
|
|
24
|
+
return { generation: roundNum(validAmount / Math.pow(10, 3), scale), unit: `M${unit}`, total: `${roundNum(validAmount / Math.pow(10, 3), scale).toLocaleString()} M${unit}` };
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
return { generation: roundNum(validAmount, scale), unit: `k${unit}`, total: `${roundNum(validAmount, scale).toLocaleString()} k${unit}` };
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export default KiloToMega;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
const maskingPhone = (phone: string = '') => {
|
|
2
|
-
const phoneArr = phone.split('-');
|
|
3
|
-
if (phoneArr.length === 3) {
|
|
4
|
-
return `${phoneArr[0]}-****-${phoneArr[2]}`;
|
|
5
|
-
}
|
|
6
|
-
return phone;
|
|
7
|
-
};
|
|
8
|
-
|
|
1
|
+
const maskingPhone = (phone: string = '') => {
|
|
2
|
+
const phoneArr = phone.split('-');
|
|
3
|
+
if (phoneArr.length === 3) {
|
|
4
|
+
return `${phoneArr[0]}-****-${phoneArr[2]}`;
|
|
5
|
+
}
|
|
6
|
+
return phone;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
9
|
export default maskingPhone;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const makeQueryString = ({ path, data }: { path: string; data: object; }) =>
|
|
2
|
-
`${path}?${Object.entries(data).reduce((acc, [key, value]) => {
|
|
3
|
-
acc.append(key, value);
|
|
4
|
-
return acc;
|
|
5
|
-
}, new URLSearchParams())}`;
|
|
6
|
-
|
|
7
|
-
export default makeQueryString;
|
|
1
|
+
const makeQueryString = ({ path, data }: { path: string; data: object; }) =>
|
|
2
|
+
`${path}?${Object.entries(data).reduce((acc, [key, value]) => {
|
|
3
|
+
acc.append(key, value);
|
|
4
|
+
return acc;
|
|
5
|
+
}, new URLSearchParams())}`;
|
|
6
|
+
|
|
7
|
+
export default makeQueryString;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* useForm의 register option중
|
|
3
|
-
* valueAsNumber: true인 경우에
|
|
4
|
-
* input 필드가 비어있는 경우 (즉, ''인 경우)
|
|
5
|
-
* 필드값이 NaN으로 할당되어 이를 대체하기위한 함수
|
|
6
|
-
*
|
|
7
|
-
* e.g.) ...register('calibrationFactor', valueAsNumber()),
|
|
8
|
-
* e.g.) ...register('vltMp', { required: true, ...valueAsNumber() }),
|
|
9
|
-
*/
|
|
10
|
-
export const valueAsNumber = () => ({
|
|
11
|
-
setValueAs: (v: string): undefined | string | number => {
|
|
12
|
-
if (v === '' || v === undefined) return undefined;
|
|
13
|
-
if (Number.isNaN(Number(v))) return v;
|
|
14
|
-
return Number(v);
|
|
15
|
-
},
|
|
1
|
+
/**
|
|
2
|
+
* useForm의 register option중
|
|
3
|
+
* valueAsNumber: true인 경우에
|
|
4
|
+
* input 필드가 비어있는 경우 (즉, ''인 경우)
|
|
5
|
+
* 필드값이 NaN으로 할당되어 이를 대체하기위한 함수
|
|
6
|
+
*
|
|
7
|
+
* e.g.) ...register('calibrationFactor', valueAsNumber()),
|
|
8
|
+
* e.g.) ...register('vltMp', { required: true, ...valueAsNumber() }),
|
|
9
|
+
*/
|
|
10
|
+
export const valueAsNumber = () => ({
|
|
11
|
+
setValueAs: (v: string): undefined | string | number => {
|
|
12
|
+
if (v === '' || v === undefined) return undefined;
|
|
13
|
+
if (Number.isNaN(Number(v))) return v;
|
|
14
|
+
return Number(v);
|
|
15
|
+
},
|
|
16
16
|
});
|
package/src/vite-env.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
/// <reference types="vite/client" />
|
|
2
|
-
/// <reference types="vite-plugin-svgr/client" />
|
|
1
|
+
/// <reference types="vite/client" />
|
|
2
|
+
/// <reference types="vite-plugin-svgr/client" />
|